.about-grid{
    display:grid;
    grid-template-columns:minmax(500px,1.2fr) minmax(320px,420px);
    grid-template-areas:"text portrait";
    gap:clamp(32px,5vw,66px);
    align-items:start;
    width:min(1200px,100%);
    margin-inline:auto;
}

.portrait{
    grid-area:portrait;
    justify-self:end;
    width:100%;
    max-width:420px;
    overflow:hidden;
    border:1px solid var(--line);
    border-radius:var(--radius);
    background:var(--panel);
}

.portrait img{
    display:block;
    width:100%;
    height:auto;
    min-height:420px;
    object-fit:cover;
}

.prose{
    grid-area:text;
    max-width:720px;
    color:var(--muted);
    font-size:17px;
    text-align:justify;
}

.prose h2{
    color:var(--text);
    font:300 42px/1 var(--serif);
}

@media (max-width:1120px){

    .about-page .section{
        padding-top:24px;
    }

    .about-grid{
        display:flex;
        flex-direction:column;
        align-items:center;
        gap:28px;
    }

    .portrait{
        order:1;
        display:block;
        width:100%;
        max-width:340px;
        margin:0 auto;
        justify-self:center;
    }

    .portrait img{
        display:block;
        width:100%;
        height:auto;
        min-height:0;
        object-fit:cover;
        visibility:visible;
        opacity:1;
    }

    .prose{
        order:2;
        width:100%;
        max-width:720px;
        padding:0 18px;
        margin:0 auto;
    }

    .prose h2{
        font-size:34px;
    }
}

@media (max-width:768px){

    .portrait{
        max-width:300px;
    }

    .prose{
        font-size:16px;
        padding:0 16px;
    }

    .prose h2{
        font-size:30px;
    }
}