.person-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* The list a card stands in is the embedding block's; the story brings a bare one of its own. */
.person-card__story {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* The portrait arrives in whatever proportion it was photographed and is cropped to the one
   shape the design draws, which is what keeps a row of cards aligned below the pictures. */
.person-card__portrait {
    width: 100%;

    /* 16px → 24px */
    margin-block-end: clamp(1rem, 1rem + (100vw - 24.375rem) * 0.005979, 1.5rem);
    border-radius: var(--sav-radius);
    aspect-ratio: 430 / 414;
    object-fit: cover;
}

.person-card__name {
    color: var(--sav-color-dunkelblau);
}

.person-card__position {
    /* 4px → 8px */
    margin-block-start: clamp(0.25rem, 0.25rem + (100vw - 24.375rem) * 0.002989, 0.5rem);
}

/* One number per line, the kind in its own column so the numbers line up under each other. */
.person-card__phones {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: start;
    column-gap: 0.5rem;

    /* 24px → 32px */
    margin-block-start: clamp(1.5rem, 1.5rem + (100vw - 24.375rem) * 0.005979, 2rem);
}

.person-card__phone {
    color: inherit;
    text-decoration: none;

    &:hover,
    &:active {
        text-decoration: underline;
    }

    &:focus-visible {
        outline: 2px solid var(--sav-color-dunkelblau);
        outline-offset: 2px;
    }
}

.person-card__actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    /* 32px → 48px */
    row-gap: clamp(2rem, 2rem + (100vw - 24.375rem) * 0.011958, 3rem);
    margin-block-start: 1.5rem;
}

.person-card__contact-links {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}