﻿/* About_mob.psd: 1080 px artboard. Keep the mobile composition fluid. */
@media (max-width: 640px) {
    .page-about .about-page {
        --about-gray: #818180;
        font-size: 4.025vw;
        line-height: 1.16;
    }

    .page-about .about-intro {
        min-height: 0;
        padding: 0 0 3.1vw;
        border-bottom: 6.76vw solid var(--accent);
        background: var(--about-gray) url('/images/mob/about_1_1.webp') center top / 100% auto no-repeat;
    }
    .page-about .about-intro::before { content: none; }
    .page-about .about-intro > picture { display: none; }
    .page-about .about-intro-copy {
        width: 46%;
        padding: 3.8vw 0 0 3.6%;
        background: transparent;
    }
    .page-about .about-intro h1 {
        max-width: 36vw;
        margin: 0 0 4.2vw;
        font-size: 9.25vw;
        line-height: 1.2;
    }
    .page-about .about-intro-copy p { font-size: 4.167vw; line-height: 1.2; }
    .page-about .about-childhood {
        width: 68.6%;
        margin: 10.7vw 0 0 3.6%;
        transform: none;
    }

    .page-about .about-education { padding: 3.5vw 3% 0; }
    .page-about .about-studies { display: flow-root; min-height: 0; }
    .page-about .about-studies::before {
        top: 7.3vw;
        right: -3.2%;
        width: 55%;
        height: 32.2vw;
    }
    .page-about .about-carnegie {
        position: relative;
        float: right;
        top: -1.6vw;
        width: 51.6%;
        height: 60.65vw;
        margin: 0 0 0 3.8vw;
        object-fit: cover;
        object-position: top;
    }
    .page-about .about-studies p { width: auto; font-size: inherit; text-align: left; }
    .page-about .about-debut { padding: 3.4vw 0 2.3vw; font-size: inherit; text-align: justify; }
    .page-about .about-early-photos {
        grid-template-columns: 436fr 531fr;
        padding: 0;
        gap: 4.45vw;
        margin-bottom: -17.9vw;
    }
    .page-about .about-early-photos img { width: 100%; height: 37vw; object-fit: cover; }

    .page-about .about-achievements {
        padding: 26.1vw 3% 5.55vw;
        border: 0;
    }
    .page-about .about-achievements > p { text-align: justify; margin: 0 0 4.7vw; }
    .page-about .about-awards {
        position: relative;
        isolation: isolate;
        display: flex;
        flex-direction: column;
        gap: 4.5vw;
        margin: 6vw 0 0;
    }
    .page-about .about-awards::before {
        content: '';
        position: absolute;
        top: 18.5vw;
        left: -3.2%;
        right: -3.2%;
        height: 24.8vw;
        background: var(--accent);
        z-index: -1;
    }
    .page-about .about-awards img { width: 98.4%; }
    .page-about .about-awards p { padding: 0; text-align: justify; }

    .page-about .about-world-stage {
        min-height: 178vw;
        padding: 3.7vw 3.4% 6vw;
        border: 0;
        background: #000;
    }
    .page-about .about-world-photo {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
    }
    .page-about .about-world-photo img { width: 100%; height: 100%; object-fit: cover; object-position: right bottom; }
    .page-about .about-world-copy { display: block; width: 100%; padding: 0; border: 0; font-size: inherit; line-height: inherit; }
    .page-about .about-world-copy::before,
    .page-about .about-world-copy p:first-child::before { content: none; }
    .page-about .about-world-copy p { text-align: justify; text-shadow: none; }
    .page-about .about-world-detail { width: 43.2%; margin: 0; }
    .page-about .about-world-detail p { text-align: left; }
    .page-about .about-world-copy p + p { width: auto; margin: 4.7vw 0 0; }

    .page-about .about-recognition {
        grid-template-columns: 1fr 1fr;
        gap: 0 6.5vw;
        padding: 6vw 3.4% 3.4vw;
    }
    .page-about .about-recognition-left,
    .page-about .about-recognition-right { display: contents; }
    .page-about .about-page .about-concert,
    .page-about .about-page .about-vogue { width: 100%; height: 60.3vw; }
    .page-about .about-recognition picture img { width: 100%; height: 100%; object-fit: cover; }
    .page-about .about-recognition-left p { margin: 4.5vw 0 3.8vw; text-align: justify; }
    .page-about .about-page .about-gala { width: 100%; height: auto; }
    .page-about .about-gala img { height: auto; }
    .page-about .about-recognition-right p { padding: 3.5vw 0 0; text-align: justify; }
}
