#members {
  margin-top: -1.5rem;

  & .heading {
    --opacity: 0.35;

    & .heading__content {
      width: 75%;

      & .title {
        font-size: 8rem;
        font-weight: 400;

        &,
        > * {
          margin: 0;
        }
      }

      & .subheading {
        font-size: 2rem;
        font-weight: 300;
        line-height: 1.5;
      }
    }
  }

  & > div.container .content {
    display: grid;
    grid-template-columns: calc(50% - 4rem) auto;
    align-items: flex-start;
    margin-top: 4rem;
    gap: 2rem;

    > * {
      grid-column: span 2;
      margin: 0;
    }

    & .body__heading {
      grid-column: 1;
      grid-row: 1;

      & .body-title {
        font-size: 2.5rem;
        font-weight: 500;
        margin: 0;
      }

      & .body-subtitle {
        font-size: 1.25rem;
        font-weight: 300;
        line-height: 1.5;
      }
    }

    & .body-description {
      grid-column: 2;
      grid-row: 1 / span 2;
      line-height: 1.75;
      text-align: justify;
    }

    @media (max-width: 1024px) {
      grid-template-columns: 1fr;
      gap: 1rem;

      &.content > * {
        grid-column: 1 !important;
        grid-row: 2;
      }

      .body__heading {
        grid-row: 1;
      }

      &.content > .body__description {
        grid-row: 2 !important;
      }
    }

    & .members {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 2rem;
      margin-top: 2rem;

      & .members__item {
        grid-column-end: span 2;
      }

      &:has(> :nth-child(3n - 1):last-child) .members__item:nth-last-child(2) {
        grid-column-start: 2;
      }

      &:has(> :nth-child(3n - 2):last-child) .members__item:nth-last-child(1) {
        grid-column-start: 3;
      }

      & .members__item {
        --size: 100%;
        display: grid;
        gap: 1rem;

        & img {
          border-radius: 100vmax;
          width: var(--size);
          height: auto;
          aspect-ratio: 1/1;
          object-fit: cover;
          background-color: black;
          margin-bottom: .5rem;
        }

        > * {
          text-align: center;
          font-size: 1.125rem;
          font-weight: 600;
          margin: 0;
        }

        & .members__item__mail {
          font-weight: 400;
          color: black;
          text-decoration: none;
          font-size: .875rem;
        }
      }
    }
  }
}