@media (width>=768px) {
  .meet-our-people-wrapper {
    position: relative;
  }

  .meet-our-people-wrapper::before {
    content: '';
    width: 100%;
    height: 100%;
    background: var(--corp-table-bg);
    z-index: -1;
    position: absolute;
    top: 0;
    left: 0;
  }
}

.meet-our-people {

  padding-bottom: 80px;
  margin-top: -80px;

  .meet-our-people__title {
    :is(h1, h2, h3, h4, h5, h6, p) {
      font-size: var(--corp-type-mobile-display-2-font-size);
      font-weight: var(--corp-type-mobile-display-2-font-weight);
      line-height: var(--corp-type-mobile-display-2-line-height);
      letter-spacing: -0.56px;
      color: var(--corp-color-neutral-black);
      margin: 0;
      text-align: center;
      padding: 30px 0 2px;

      strong {
        color: var(--corp-color-primary);
        font-weight: inherit;
      }
    }
  }

  .meet-our-people__desc {
    font-size: var(--corp-type-mobile-body-2-font-size);
    font-weight: var(--corp-type-mobile-body-2-font-weight);
    line-height: var(--corp-type-mobile-body-2-line-height);
    color: var(--corp-color-overlay-black-60);
    margin: 0;
  }

  .meet-our-people__panel-col {
    overflow: hidden;
    background: var(--corp-color-white);
    border: 1.182px solid var(--corp-border-blue);
    display: flex;
    flex-direction: column;
    gap: 30px;
    align-items: center;
    padding: 0 15px 15px;
    border-radius: 8px;
  }

  .meet-our-people__tabs-col {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
  }

  .corp-toggle {
    display: none;
  }

  .meet-our-people__dropdown-wrap {
    display: inline-flex;

    .meet-our-people__dropdown {
      width: auto;
      appearance: none;
      background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8' fill='none'%3E%3Cpath d='M1 1L7 7L13 1' stroke='%231a1a6e' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 16px center / 14px 8px,
        var(--corp-color-surface-300);
      border: 1px solid var(--corp-table-border);
      border-radius: 12px;
      font-size: var(--corp-type-mobile-body-2-font-size);
      font-weight: var(--corp-type-mobile-body-2-font-weight);
      color: var(--corp-color-neutral-black);
      line-height: var(--corp-type-mobile-body-2-line-height);
      cursor: pointer;
      padding: 16px 44px 16px 20px;

      &:focus {
        outline: 2px solid var(--corp-color-primary);
        outline-offset: 2px;
      }
    }
  }

  .meet-our-people__cards {
    row-gap: 16px;
    width: 100%;
  }

  .meet-our-people__card {
    border-radius: 8px;
    border: 1.182px solid var(--corp-border-blue);
    background: var(--corp-color-white);
    padding: 20px;
    position: relative;
    isolation: isolate;
    width: -webkit-fill-available;

    &[hidden] {
      display: none;
    }

    .meet-our-people__card-inner {
      display: flex;
      flex-direction: column;
      gap: 24px;
    }

    .meet-our-people__card-img img {
      border-radius: 5px;
      width: 90.837px;
      height: 90.373px;
      aspect-ratio: 90.84 / 90.37;
      object-fit: cover;
      object-position: top center;
      display: block;
    }

    .meet-our-people__quote-icon {
      position: absolute;
      top: 20px;
      right: 18px;
      display: flex;
      width: 50px;
      height: 50px;
      padding: 13px;
      justify-content: center;
      align-items: center;
      border-radius: 100px;
      background: var(--corp-color-primary);
      box-sizing: border-box;

      svg {
        width: 24px;
        height: 24px;
        flex-shrink: 0;
      }
    }

    .meet-our-people__card-content {
      display: flex;
      flex-direction: column;
    }

    .meet-our-people__short-quote,
    .meet-our-people__full-desc {
      color: var(--corp-color-neutral-black);
      margin: 0;
      font-size: var(--corp-type-mobile-heading-1-regular-font-size);
      font-weight: var(--corp-type-mobile-heading-1-regular-font-weight);
      line-height: var(--corp-type-mobile-heading-1-regular-line-height);
      letter-spacing: var(--corp-cta-letter-spacing-primary-md);

      .meet-our-people__read-more,
      .meet-our-people__read-less {
        display: inline;
        background: none;
        border: none;
        padding: 0;
        margin: 0;
        color: var(--corp-color-primary);
        font-size: inherit;
        font-weight: var(--corp-type-mobile-heading-2-medium-font-weight);
        line-height: inherit;
        cursor: pointer;
        white-space: nowrap;
        text-decoration: underline;
      }

      @media (width >=768px) {
        .meet-our-people__read-less {
          position: absolute;
          bottom: 20px;
          right: 46px;
          font-size: var(--corp-type-mobile-heading-x-font-size);
          font-weight: var(--corp-type-mobile-heading-1-regular-font-weight);
          line-height: var(--corp-type-desktop-body-3-line-height);
        }
      }

      @media (width >=1200px) {
        .meet-our-people__read-less {
          font-size: var(--corp-type-desktop-heading-1-font-size);
          font-weight: var(--corp-type-desktop-heading-1-font-weight);
          line-height: var(--corp-type-desktop-heading-1-line-height);
        }
      }

      p {
        margin-bottom: 0.75rem;

        &:last-child {
          margin-bottom: 0;
        }
      }
    }

    .meet-our-people__name {
      color: var(--corp-color-neutral-black);
      margin: 24px 0 0;
      font-size: var(--corp-type-mobile-heading-2-medium-font-size);
      font-weight: var(--corp-type-mobile-heading-2-medium-font-weight);
      line-height: var(--corp-type-mobile-heading-2-medium-line-height);
    }

    .meet-our-people__designation {
      font-size: var(--corp-type-mobile-body-sm-2-font-size);
      font-weight: var(--corp-type-mobile-body-sm-2-font-weight);
      line-height: var(--corp-type-mobile-body-sm-2-line-height);
      letter-spacing: -0.24px;
      color: var(--corp-color-neutral-black);
      margin: 0;
      padding-top: 8px;
    }
  }

  @media (width >=768px) {
    .g-container {
      margin-top: -48px;
      padding-bottom: 48px;
    }

    .meet-our-people__title {
      :is(h1, h2, h3, h4, h5, h6, p) {
        font-size: var(--corp-type-tablet-display-font-size);
        font-weight: var(--corp-type-tablet-display-font-weight);
        line-height: var(--corp-type-tablet-display-line-height);
        letter-spacing: var(--corp-cta-letter-spacing-primary);
        padding: 32px 30px 8px 0px;
      }
    }

    .meet-our-people__panel-col {
      border-color: var(--corp-color-white);
      padding: 0px 16px 16px;
      align-items: stretch;
      gap: 24px;
    }

    .meet-our-people__tabs-row {
      justify-content: center;
    }

    .corp-toggle {
      display: flex;
      flex-wrap: nowrap;
      justify-content: center;
      align-items: stretch;
      gap: 3px;
      padding: 3px;
      width: 100%;
      box-sizing: border-box;
      overflow: hidden;
    }

    .corp-toggle__item,
    .corp-toggle__item.is-active {
      flex: 1 1 0;
      width: 0;
      min-width: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: var(--corp-type-tablet-body-1-font-size);
      font-weight: var(--corp-type-tablet-body-2-font-weight);
      line-height: var(--corp-type-tablet-body-8-line-height);
      letter-spacing: -0.36px;
      text-transform: uppercase;
      padding: 18px;
      box-sizing: border-box;
      text-align: center;
    }

    .meet-our-people__dropdown-wrap {
      display: none;
    }

    .meet-our-people__card {
      .meet-our-people__card-inner {
        flex-direction: row;
        align-items: flex-start;
        gap: 16px;
      }

      .meet-our-people__card-img {
        flex-shrink: 0;

        img {
          width: 120.837px;
          height: 120.22px;
          aspect-ratio: 120.84/120.22;
        }
      }

      .meet-our-people__card-content {
        flex: 1;
        min-width: 0;
      }

      .meet-our-people__quote-icon {
        position: static;
        width: 30px;
        height: 30px;
        padding: 8px;
        align-self: flex-start;
        flex-shrink: 0;
      }

      .meet-our-people__short-quote,
      .meet-our-people__full-desc {
        padding: 24px 0;
        line-height: var(--corp-type-tablet-display-4xl-line-height);

        p {
          margin-bottom: 0.75rem;

          &:last-child {
            margin-bottom: 0;
          }
        }
      }

      .meet-our-people__name {
        margin-top: 0;
      }
    }
  }

  @media (width >=1200px) {
    .g-container {
      margin-top: -60px;
      padding: 0 56px 80px;
    }

    .meet-our-people__title {
      :is(h1, h2, h3, h4, h5, h6, p) {
        padding: 0px 56px 36px 0px;
        font-size: var(--corp-type-desktop-heading-xxl-font-size);
        font-weight: var(--corp-type-desktop-heading-xxl-font-weight);
        line-height: var(--corp-type-desktop-heading-4xxl-line-height);
        letter-spacing: -1.5px;
      }
    }

    .meet-our-people__panel-col {
      gap: 0;
      padding: 60px 60px 32px;
    }

    .meet-our-people__tabs-row {
      justify-content: center;
      margin-bottom: 50px;
    }

    .corp-toggle {
      gap: 8px;
      width: 100%;
    }

    .corp-toggle__item,
    .corp-toggle__item.is-active {
      font-size: var(--corp-type-desktop-body-xs-font-size);
      font-weight: var(--corp-type-desktop-body-xs-font-weight);
      line-height: var(--corp-type-desktop-heading-3-line-height);
      letter-spacing: 0.12px;
      text-transform: uppercase;
      padding: 6px 12px;
    }

    .meet-our-people__cards {
      row-gap: 24px;
    }

    .meet-our-people__card {
      padding: 24px 32px 24px 24px;

      .meet-our-people__card-img {
        flex-shrink: 0;

        img {
          width: 171.185px;
          height: 170.312px;
          aspect-ratio: 171.19/170.31;
        }
      }

      .meet-our-people__quote-icon {
        width: 50px;
        height: 50px;
        padding: 13px;
      }

      .meet-our-people__short-quote,
      .meet-our-people__full-desc {
        padding: 48px 0;
      }

      .meet-our-people__short-quote {
        font-size: var(--corp-type-desktop-heading-1-font-size);
        font-weight: var(--corp-type-desktop-heading-1-font-weight);
        line-height: var(--corp-type-desktop-heading-1-line-height);
      }

      .meet-our-people__full-desc {
        font-size: var(--corp-type-desktop-body-2-font-size);
        font-weight: var(--fw-400);
        line-height: var(--corp-type-desktop-caption-5-line-height);
      }

      .meet-our-people__name {
        font-size: var(--corp-type-desktop-heading-4-font-size);
        font-weight: var(--corp-type-desktop-heading-4-font-weight);
        line-height: var(--corp-type-desktop-heading-3xl-line-height);
        margin-top: 0;
      }

      .meet-our-people__designation {
        padding-top: 12px;
        font-size: var(--corp-type-desktop-body-5-font-size);
        font-weight: var(--fw-400);
        line-height: var(--corp-type-desktop-caption-7-line-height);
      }
    }
  }
}