@layer component {
  .person__image:has(img) {
    margin-block-end: 1.25rem;
  }

  .person__name {
    display: flex;
    align-items: baseline;
    gap: 1ch;
    color: var(--color-primary);
    font: var(--font-head-s-light);
    letter-spacing: var(--letter-spacing-head-s-light);

    & > a img {
      block-size: 1.375rem;
      inline-size: 1.375rem;
      transition: var(--transition);
    }

    & > a:hover img,
    & > a:focus-visible img {
      filter: grayscale(1);
    }
  }

  .person__role {
    color: var(--color-text-secondary);
    font: var(--font-body-m-semibold);
    letter-spacing: var(--letter-spacing-body-m-semibold);
    margin-block-start: 0.5rem;
  }

  .person__bio {
    margin-block-start: 1.25rem;
    max-inline-size: 39.125rem;
  }

  .person__links {
    margin-block-start: 1.25rem;

    & > * + * {
      margin-block-start: 1rem;
    }
  }

  @media screen and (min-width: 48rem) {
    .node--person {
      display: flex;
      align-items: flex-start;
      gap: 4.375rem;
    }

    .person__image {
      flex-shrink: 0;
    }

    .person__name {
      font: var(--font-head-m-light);
      letter-spacing: var(--letter-spacing-head-m-light);
    }
  }
}