@layer modules {
  .people-grid__card {
    grid-template-rows: auto 1fr;
  }

  .people-grid__photo {
    aspect-ratio: 1;
    inline-size: 100%;
    overflow: hidden;
  }

  .people-grid__details {
    min-inline-size: 0;
    overflow-wrap: anywhere;
  }

  .people-grid__name {
    align-items: center;
    display: grid;
    gap: var(--inline-space-half);
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .people-grid__credentials {
    align-items: center;
    display: flex;
    margin-block-start: auto;
    min-block-size: var(--credential-badge-size, 1.5rem);
  }

  .person-role {
    @media (width < 640px) {
      flex-direction: column;
    }
  }

  /* People page: the organization's teams as small linked cards. */
  .organization-teams {
    display: grid;
    gap: var(--block-space-half);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .organization-teams__card {
    align-items: center;
    border: 1px solid var(--color-ink-light);
    border-radius: var(--radius);
    color: var(--color-ink);
    display: flex;
    gap: var(--inline-space);
    padding: var(--block-space-half) var(--inline-space);

    &:hover {
      border-color: var(--color-ink-medium);
    }
  }
}