.layout:first-of-type {
    --size: 8rem;
    margin-block-start: calc(var(--flow-space) + var(--size) / 2);
}

.portrait {
    margin-inline: auto;
    max-inline-size: var(--size);
    aspect-ratio: 1;
    margin-block-start: calc(0px - var(--section-block-start-padding) - var(--size) / 2);
    
}
.portrait img {
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 100%;
    outline: dashed var(--border-s) var(--neutral-0);
    outline-offset: 0.5rem;
}

@media (min-width: 48rem) {
    .layout:first-of-type {
        --size: 10rem;
    }
}
@media (min-width: 90rem) {
    .layout:first-of-type {
        --size: 13.75rem;
        margin-block-start: calc(var(--flow-space) + var(--size) * 2);
    }
    .portrait {
        margin-inline: unset;
        margin-block-start: unset;
        position: absolute;
        inset-block-start: calc(0px - var(--size) / 2);
        inset-inline-start: calc(0px - var(--size) / 2);
    }
}