/* ===========================
   PORTRAIT
=========================== */

.portrait-gallery {
    width: min(1180px, 88%);
    margin: 0 auto;
    padding: 90px 0 130px;

    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 72px 48px;
    align-items: center;
}

/* Base das imagens */

.portrait-gallery img {
    display: block;
    width: 100%;
    max-width: 460px;
    height: auto;
    margin: 0 auto;
    object-fit: cover;
}

/* Alternância de posição */

.portrait-gallery img:nth-of-type(odd) {
    justify-self: start;
}

.portrait-gallery img:nth-of-type(even) {
    justify-self: end;
}

/* Foto principal: menina na água */

.portrait-gallery img:nth-of-type(4) {
    grid-column: 1 / -1;
    width: min(100%, 920px);
    max-width: 920px;
    justify-self: center;
}

/* Algumas fotos menores para dar ritmo */

.portrait-gallery img:nth-of-type(2),
.portrait-gallery img:nth-of-type(5),
.portrait-gallery img:nth-of-type(6),
.portrait-gallery img:nth-of-type(9),
.portrait-gallery img:nth-of-type(12) {
    max-width: 380px;
}

/* Algumas um pouco maiores */

.portrait-gallery img:nth-of-type(3),
.portrait-gallery img:nth-of-type(7),
.portrait-gallery img:nth-of-type(11) {
    max-width: 520px;
}

/* Frase */

.portrait-quote {
    grid-column: 1 / -1;
    width: 100%;
    padding: 60px 20px;
    text-align: center;
}

.portrait-quote p {
    max-width: 760px;
    margin: 0 auto;

    font-size: clamp(1.8rem, 3vw, 3.4rem);
    line-height: 1.15;
    font-weight: 300;
    letter-spacing: -0.03em;
}

/* Tablet e celular */

@media (max-width: 768px) {
    .portrait-gallery {
        width: min(90%, 620px);
        padding: 70px 0 100px;

        grid-template-columns: 1fr;
        gap: 64px;
    }

    .portrait-gallery img,
    .portrait-gallery img:nth-of-type(odd),
    .portrait-gallery img:nth-of-type(even),
    .portrait-gallery img:nth-of-type(3),
    .portrait-gallery img:nth-of-type(7),
    .portrait-gallery img:nth-of-type(11) {
        width: 100%;
        max-width: 480px;
        justify-self: center;
    }

    .portrait-gallery img:nth-of-type(2),
    .portrait-gallery img:nth-of-type(5),
    .portrait-gallery img:nth-of-type(6),
    .portrait-gallery img:nth-of-type(9),
    .portrait-gallery img:nth-of-type(12) {
        max-width: 400px;
    }

    .portrait-gallery img:nth-of-type(4) {
        grid-column: auto;
        width: 100%;
        max-width: 560px;
    }

    .portrait-quote {
        grid-column: auto;
        padding: 35px 10px;
    }
}


/* ==================================================
   PORTRAIT — RESPONSIVE REFINEMENT
================================================== */

@media (max-width:600px){

    .portrait-gallery{
        width:min(90%,520px);

        padding:
            60px
            0
            90px;

        grid-template-columns:1fr;

        gap:52px;
    }


    /* Base */

    .portrait-gallery img,
    .portrait-gallery img:nth-of-type(odd),
    .portrait-gallery img:nth-of-type(even),
    .portrait-gallery img:nth-of-type(3),
    .portrait-gallery img:nth-of-type(7),
    .portrait-gallery img:nth-of-type(11){

        width:100%;
        max-width:440px;

        justify-self:center;
    }


    /* Fotos menores */

    .portrait-gallery img:nth-of-type(2),
    .portrait-gallery img:nth-of-type(5),
    .portrait-gallery img:nth-of-type(6),
    .portrait-gallery img:nth-of-type(9),
    .portrait-gallery img:nth-of-type(12){

        max-width:360px;
    }


    /* Foto principal */

    .portrait-gallery img:nth-of-type(4){

        grid-column:auto;

        width:100%;
        max-width:500px;
    }


    /* Quote */

    .portrait-quote{

        grid-column:auto;

        padding:
            30px
            10px
            34px;
    }

    .portrait-quote p{

        max-width:420px;

        font-size:clamp(1.55rem,7vw,2.2rem);

        line-height:1.2;
        letter-spacing:-.02em;
    }

}


/* ==================================================
   IPHONE SE / TELAS PEQUENAS
================================================== */

@media (max-width:390px){

    .portrait-gallery{

        width:92%;

        padding:
            52px
            0
            80px;

        gap:44px;
    }


    .portrait-gallery img,
    .portrait-gallery img:nth-of-type(odd),
    .portrait-gallery img:nth-of-type(even),
    .portrait-gallery img:nth-of-type(3),
    .portrait-gallery img:nth-of-type(7),
    .portrait-gallery img:nth-of-type(11){

        max-width:100%;
    }


    .portrait-gallery img:nth-of-type(2),
    .portrait-gallery img:nth-of-type(5),
    .portrait-gallery img:nth-of-type(6),
    .portrait-gallery img:nth-of-type(9),
    .portrait-gallery img:nth-of-type(12){

        max-width:330px;
    }


    .portrait-gallery img:nth-of-type(4){

        max-width:100%;
    }


    .portrait-quote{

        padding:
            24px
            14px
            28px;
    }

    .portrait-quote p{

        font-size:1.55rem;

        line-height:1.25;
    }

}