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

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

  .innerWrapper {
    position: relative;

    .teamMembersCards {
      .cardsWrapper {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 50px;

        @media (min-width: 1024px) {
          grid-template-columns: repeat(2, 1fr);
          gap: 100px;
        }

        .card {
          display: flex;
          flex-direction: column;
          gap: 25px;

          .cardContent {
            &.top {
              display: flex;
              align-items: center;
              gap: 25px;

              .thumbnail {
                width: 100px;
                height: 100px;
                overflow: hidden;
                border-radius: 50px;

                img {
                  width: 100%;
                  height: 100%;
                  object-fit: cover;
                  object-position: top center;
                }
              }

              .name,
              .title {
                margin: 0;
              }

              .name {
                font-size: clamp(var(--h2min), calc(23.24px + 0.35vw), var(--h2max));
                text-transform: capitalize;
              }

              .title {
                font-size: clamp(var(--h4min), calc(23.24px + 0.35vw), var(--h4max));
                color: var(--holtLightBlue);
                font-weight: 500;
              }
            }

            &.bottom {
              flex-grow: 1;
              display: flex;
              flex-direction: column;
              gap: 25px;
              background-color: var(--grey);
              padding: 50px;
              border-top: 2px solid var(--holtLightBlue);
              border-bottom: 2px solid var(--holtLightBlue);

              .bio {
                >:last-child {
                  margin-bottom: 0;
                }
              }

              .links {
                display: flex;
                flex-direction: column;
                gap: 15px;

                .link {
                  display: flex;
                  align-items: center;
                  gap: 15px;

                  .linkIcon {
                    svg {
                      display: block;
                    }
                  }

                  .linkText {
                    font-weight: 700;
                    text-decoration: none;
                    color: var(--holtBlue);
                    transition: all var(--transitionLinear);

                    &:hover {
                      cursor: pointer;
                      color: var(--holtLightBlue);
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}