/* ==================================================
   RIO LIFESTYLE
================================================== */

.rio-gallery{

    width:min(1120px,86%);
    margin:0 auto;

    padding:130px 0 190px;

    display:grid;
    grid-template-columns:repeat(12,minmax(0,1fr));

    column-gap:26px;
    row-gap:160px;

    align-items:center;

}


/* ==================================================
   BASE DAS FOTOS
================================================== */

.rio-photo{

    margin:0;

    display:flex;
    align-items:center;

}


.rio-photo img{

    display:block;

    width:100%;
    height:auto;

    object-fit:contain;

}


/* ==================================================
   1 — ABERTURA
   MENINOS COM CAMISA DO BRASIL
================================================== */

.rio-photo-intro{

    grid-column:2 / 12;

    justify-content:center;

}


.rio-photo-intro img{

    max-width:820px;

}


/* ==================================================
   2 — DESTAQUE
   MENINA SOBRE A BANDEIRA
================================================== */

.rio-photo-featured{

    grid-column:4 / 10;

    justify-content:center;

    margin-top:20px;

}


.rio-photo-featured img{

    max-width:560px;

}


/* ==================================================
   3 E 4 — RETRATOS LADO A LADO
================================================== */

.rio-photo-portrait:nth-of-type(3){

    grid-column:2 / 6;

    justify-content:flex-start;

    transform:translateY(-35px);

}


.rio-photo-portrait:nth-of-type(4){

    grid-column:8 / 12;

    justify-content:flex-end;

    transform:translateY(55px);

}


.rio-photo-portrait img{

    max-width:330px;

}


/* ==================================================
   5 — RAPAZ TATUADO
================================================== */

.rio-photo-tattoo{

    grid-column:5 / 9;

    justify-content:center;

    margin-top:50px;

}


.rio-photo-tattoo img{

    max-width:390px;

}


/* ==================================================
   6 — DOIS IRMÃOS
================================================== */

.rio-photo-landscape{

    grid-column:3 / 11;

    justify-content:center;

    margin-top:40px;

}


.rio-photo-landscape img{

    max-width:680px;

}


/* ==================================================
   7 — ENCERRAMENTO
================================================== */

.rio-photo-ending{

    grid-column:1 / -1;

    justify-content:center;

    margin-top:20px;

}


.rio-photo-ending img{

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

}


/* ==================================================
   ANIMAÇÃO SUTIL DAS IMAGENS
================================================== */

.rio-photo img{

    transition:
        transform .8s ease,
        filter .8s ease;

}


.rio-photo:hover img{

    transform:scale(1.015);
    filter:brightness(.96);

}


/* ==================================================
   TABLET
================================================== */

@media (max-width:900px){

    .rio-gallery{

        width:min(88%,760px);

        grid-template-columns:repeat(2,minmax(0,1fr));

        column-gap:36px;
        row-gap:110px;

        padding:100px 0 150px;

    }


    .rio-photo-intro,
    .rio-photo-featured,
    .rio-photo-tattoo,
    .rio-photo-landscape,
    .rio-photo-ending{

        grid-column:1 / -1;

    }


    .rio-photo-portrait:nth-of-type(3){

        grid-column:1;

        transform:translateY(-20px);

    }


    .rio-photo-portrait:nth-of-type(4){

        grid-column:2;

        transform:translateY(35px);

    }


    .rio-photo-intro img{

        max-width:680px;

    }


    .rio-photo-featured img{

        max-width:500px;

    }


    .rio-photo-portrait img{

        max-width:310px;

    }


    .rio-photo-tattoo img{

        max-width:380px;

    }


    .rio-photo-landscape img{

        max-width:620px;

    }

}


/* ==================================================
   CELULAR
================================================== */

@media (max-width:600px){

    .rio-gallery{

        width:min(88%,520px);

        padding:75px 0 110px;

        grid-template-columns:1fr;

        row-gap:72px;

    }


    .rio-photo,
    .rio-photo-intro,
    .rio-photo-featured,
    .rio-photo-portrait:nth-of-type(3),
    .rio-photo-portrait:nth-of-type(4),
    .rio-photo-tattoo,
    .rio-photo-landscape,
    .rio-photo-ending{

        grid-column:1;

        justify-content:center;

        margin-top:0;

        transform:none;

    }


    .rio-photo img,
    .rio-photo-intro img,
    .rio-photo-featured img,
    .rio-photo-portrait img,
    .rio-photo-tattoo img,
    .rio-photo-landscape img,
    .rio-photo-ending img{

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

    }


    .rio-photo-portrait img,
    .rio-photo-tattoo img{

        max-width:360px;

    }

}


/* ==================================================
   RIO LIFESTYLE — MOBILE REFINEMENT
================================================== */

@media (max-width:600px){

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

        padding:
            60px
            0
            90px;

        row-gap:58px;
    }


    /* Todas centralizadas no mobile */

    .rio-photo,
    .rio-photo-intro,
    .rio-photo-featured,
    .rio-photo-portrait:nth-of-type(3),
    .rio-photo-portrait:nth-of-type(4),
    .rio-photo-tattoo,
    .rio-photo-landscape,
    .rio-photo-ending{

        grid-column:1;

        justify-content:center;

        margin-top:0;

        transform:none;
    }


    /* Base */

    .rio-photo img,
    .rio-photo-intro img,
    .rio-photo-featured img,
    .rio-photo-portrait img,
    .rio-photo-tattoo img,
    .rio-photo-landscape img,
    .rio-photo-ending img{

        width:100%;
        height:auto;

        max-width:440px;
    }


    /*
       Mantém os retratos um pouco menores
       para preservar o ritmo editorial
    */

    .rio-photo-portrait img,
    .rio-photo-tattoo img{

        max-width:350px;
    }


    /* Foto da bandeira ganha mais presença */

    .rio-photo-featured img{

        max-width:400px;
    }


    /* As duas cenas finais ficam maiores */

    .rio-photo-landscape img,
    .rio-photo-ending img{

        max-width:100%;
    }

}


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

@media (max-width:390px){

    .rio-gallery{

        width:92%;

        padding:
            52px
            0
            80px;

        row-gap:48px;
    }


    .rio-photo img,
    .rio-photo-intro img,
    .rio-photo-featured img,
    .rio-photo-landscape img,
    .rio-photo-ending img{

        max-width:100%;
    }


    .rio-photo-portrait img,
    .rio-photo-tattoo img{

        max-width:310px;
    }

}


/* ==================================================
   TOUCH DEVICES
================================================== */

@media (hover:none){

    .rio-photo:hover img{

        transform:none;
        filter:none;
    }

}