@layer windfce_profilecard {
  .profile-card--grid {
    --_card-accent: var(--wind-fce-color-accent, #a7f3d0);
    --_min-column-size: 40ch;
    --_card-ratio: 19 / 24;
    display: grid;
    gap: 2.5rem;
    grid-template-columns: repeat(
      auto-fit,
      minmax(min(var(--_min-column-size, 20ch), 100%), 1fr)
    );
    .profile-card--card {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      height: fit-content;
      position: relative;
      background: var(--wind-fce-color-surface, #fff);
      box-shadow:
        var(--wind-fce-shadow),
        0 -3px 0 0 var(--_card-accent) inset;
      .profile-card--content {
        order: 1;
        padding-block: 1.25rem;
        padding-inline: 1.625rem;
        a.profile-card--link {
          text-decoration: none;
          &::after {
            content: "";
            position: absolute;
            inset: 0;
            z-index: 1;
            pointer-events: auto;
          }
        }
        .profile-card--header {
          display: flex;
          flex-direction: column;
          gap: 0.3125rem;
        }
        .profile-card--extra-info {
          display: flex;
          flex-direction: column;
          gap: 0.375rem;
          .profile-card--icon {
            display: flex;
            align-items: center;
            gap: 0.3125rem;
            line-height: 1;
            &::before {
              content: "";
              display: block;
              height: 100%;
            }
          }
          .profile-card--social-links {
            margin: 0;
            padding: 0;
            list-style: none;
          }
        }
      }
      .profile-card--image {
        --_ratio: 16 / 18;
        order: 0;
        inline-size: 100%;
        flex: 1 1 auto;
        min-height: 0;
        max-height: 75%;
        aspect-ratio: var(--_ratio);
        padding: 1.625rem 1.625rem 0;
        overflow: clip;
        img.profile-card--image-item {
          width: 100%;
          height: 100%;
          object-fit: cover;
          object-position: top;
        }
      }
    }
  }
}