@layer genr.component {
    .member-card {
      display: flex;
      flex-direction: column;
      text-decoration: none;
      background-color: var(--color-dark-green);
      transition: calc(var(--transition-duration) / 2);

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

      &:hover {
        background-color: var(--color-dark-green-hover);
        box-shadow: 0 0 0 1rem var(--color-dark-green-hover);

        .member-card__content {
          transform: translateY(1rem);
        }

        .member-card__media {
          clip-path: inset(0);

          .image__media {
            transform: scale(1.05);
          }
        }
      }
    }

    @keyframes member-card-transition {
      from {
        transform: translateY(2rem) scale(0.9);
      }

      to {
        transform: translateY(0) scale(1);
      }
    }

    .member-card__content {
      padding: 0.75rem;
      text-align: center;
      transition: calc(var(--transition-duration) / 2);

      @media (width > 992px) {
        padding: 0.5rem 1.5rem 1.5rem;
      }
    }

    .member-card__name {
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      font-size: var(--font-size-md);
      font-weight: 700;
    }

    .member-card__vineyard {
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }

    .member-card__media {
      display: flex;
      align-items: center;
      justify-content: center;
      order: -1;
      overflow: hidden;
      margin: -1rem -1rem 0;
      clip-path: inset(1rem);
      aspect-ratio: 3 / 4;
      background-color: var(--color-dark-green);
      background-image: linear-gradient(45deg, rgba(0, 0, 0, .1), transparent);
      border-bottom: 1px solid var(--color-darker-green);
      transition: calc(var(--transition-duration) / 2);

      .image__media {
        object-fit: cover;
        aspect-ratio: 3 / 4;
        transition: var(--transition-duration);
      }

      .icon {
        opacity: 0.25;
      }
    }
}