@layer components{.profile-card figure {
    margin: 0;

    & img {
      width: 100%;
      border-radius: var(--radius);
      object-fit: cover;
    }

    & figcaption {
      margin-top: .5rem;
      font-size: var(--step--1);
      color: var(--muted);
    }
  }

  .profile-meta {
    display: grid;
    gap: .2rem;
    font-size: var(--step--1);
    color: var(--muted);
  }

  .profile-highlight {
    display: grid;
    gap: 1rem;
    align-items: center;

    @media (min-width: 54rem) {
      grid-template-columns: 1fr 1.1fr;
    }
  }

  .profile-highlight__media picture,
  .profile-highlight__media img {
    width: 100%;
    border-radius: var(--radius);
    object-fit: cover;
    min-height: 260px;
  }

  .contact-card {
    display: grid;
    gap: 1.5rem;
  }

  .contact-card__intro {
    max-width: 38ch;
  }
}