@layer genr.component {
  .member-teaser {
    position: relative;

    &::before {
      content: '';
      position: absolute;
      inset: 0;
      z-index: -1;
      background-color: var(--color-darker-green);

      @supports (animation-timeline: view()) {
        animation: member-teaser-transition linear forwards;
        animation-timeline: view();
        animation-range: cover 0% cover 20%;
      }
    }
  }

  .member-teaser__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3rem;
    width: 100%;
    max-width: var(--width-lg);
    margin-inline: auto;
    padding-inline: 1.5rem;
    padding-block: 4rem;

    @media (width > 1280px) {
      flex-direction: row;
      padding-inline: 0;
      padding-block: 8rem;
    }
  }

  .member-teaser__form {
    display: flex;
    align-items: flex-end;
    width: 100%;
    margin-bottom: 1.5rem;
  }

  .member-teaser__body {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: var(--width-sm);

    @media (width > 992px) {
      max-width: 23rem;
    }

    .h2 {
      margin-bottom: 3rem;
      color: var(--color-light-patrol);
    }

    .member-teaser__link {
      margin: auto;

      @media (width < 992px) {
        display: none;
      }
    }
  }

  .member-teaser__items {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    list-style: none;
    margin: 0;
    padding: 0;

    @media (width > 576px) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    @media (width > 992px) {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  .member-teaser__item {
    &:nth-child(n+5) {
      display: none;
    }

    @media (width > 576px) {
      &:nth-child(even) {
        transform: translateY(4rem);
      }
    }

    @media (width > 992px) {
      &:nth-child(n+4) {
        display: none;
      }

      &:nth-child(even) {
        transform: none;
      }
    }
  }

  .member-teaser__footer {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 3rem;

    @media (width > 992px) {
      display: none;
    }
  }

  @keyframes member-teaser-transition {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }
}