.contentCards {
  position: relative;
  display: flex;
  flex-direction: column;

  &.backgroundColorWhite { background-color: var(--white); }
  &.backgroundColorGrey { background-color: var(--grey); }

  .innerWrapper {
    position: relative;

    .content {
      &.aboveCards,
      &.belowCards {
        width: 100%;
        text-align: center;

        img {
          display: inline-block;
        }

        .btnGroup {
          justify-content: center;
        }
      }

      &.aboveCards {
        margin-bottom: 50px;
      }

      &.belowCards {
        margin-top: 50px;
      }
    }

    .contentCards {
      display: flex;
      flex-direction: row;
      justify-content: center;
      flex-wrap: wrap;
      gap: 50px;

      .card {
        text-align: center;
        width: 100%;
        display: flex;
        flex-direction: column;

        @media (min-width: 768px) { width: calc(50% - 50px); }
        @media (min-width: 1024px) { width: calc(33.333% - 50px); }

        .cardImage {
          img {
            width: 100%;
            height: 100%;
            max-height: 300px;
            object-fit: cover;
            object-position: center;

            @media (min-width: 768px) { object-position: top center; }
          }
        }

        .cardTitle {
          padding: 25px;
          font-size: clamp(var(--h4min), calc(5.35px + 4.93vw), var(--h4max));
          margin: 0;
        }

        .cardContent {
          flex-grow: 1;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          padding: 25px;
          background-color: var(--grey);
          border-top: 2px solid var(--holtLightBlue);
          border-bottom: 2px solid var(--holtLightBlue);

          &.backgroundColorGrey { background-color: var(--white) }

          >:first-child { margin-top: 0; }
          >:last-child { margin-bottom: 0; }
        }
      }
    }
  }
}