/*==================================================
    TABLETTES
==================================================*/

@media (max-width: 1024px){
    :root{
        --section-spacing:100px;
    }

    /*----------------------------------
        Hero
    ----------------------------------*/

    #hero{
        min-height:700px;
    }

    .hero-content h2{
        font-size:clamp(3rem,8vw,5rem);
    }

    /*----------------------------------
        About / Contact
    ----------------------------------*/

    .split{
        grid-template-columns:1fr;
        gap:60px;
    }

    /*----------------------------------
        Portfolio
    ----------------------------------*/

    #gallery-grid{
        grid-template-columns:repeat(3,minmax(0,1fr));
        gap:12px;
    }

    .split {
        grid-template-columns: 1fr;
        gap: 60px;
    }

    #about .image {
        max-width: 700px;
        justify-self: center;
    }
}

/*==================================================
    TÉLÉPHONES
==================================================*/

@media (max-width: 768px){

    :root{
        --section-spacing:80px;
    }

    .container{
        width:min(92%,700px);
    }

    /*----------------------------------
        Hero
    ----------------------------------*/

    #hero{
        min-height:650px;
    }

    .hero-content h2{
        font-size:clamp(2.5rem,10vw,4rem);
    }

    .hero-content p{
        font-size:1rem;
    }

    /*----------------------------------
        Portfolio Hero
    ----------------------------------*/

    #portfolio-hero{
        padding-top:50px;
        padding-bottom:0px;
    }

    #portfolio-description{
        font-size:1rem;
    }

    /*----------------------------------
        Galerie
    ----------------------------------*/

    #gallery-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:8px;
    }

    /*----------------------------------
        Contact
    ----------------------------------*/

    .contact-card{
        padding:28px;
    }


    /*----------------------------------
        Footer
    ----------------------------------*/

    .footer-container{
        flex-direction:column;
        text-align:center;

    }

    .contact-card {
        padding: 28px;
    }

    .footer-container{
        flex-direction:column;
        text-align:center;
        gap:24px;
    }

    .footer-right{
        justify-content:center;
    }

    .lightbox-content{

        padding:
            max(68px, env(safe-area-inset-top))
            8px
            max(24px, env(safe-area-inset-bottom));

    }


    .lightbox-close,
    .lightbox-prev,
    .lightbox-next{

        width:48px;
        height:48px;

    }


    .lightbox-close{

        top:max(10px, env(safe-area-inset-top));

        right:max(10px, env(safe-area-inset-right));

    }


    .lightbox-prev{

        left:max(6px, env(safe-area-inset-left));

    }


    .lightbox-next{

        right:max(6px, env(safe-area-inset-right));

    }

}

/*==================================================
    PETITS TÉLÉPHONES
==================================================*/

@media (max-width: 480px){

    .site-logo h1{
        font-size:1.7rem;
    }

    h2{
        font-size:2.3rem;
    }

    .button{
        width:100%;
    }

    .lightbox-prev,
    .lightbox-next{
        width:44px;
        height:44px;
    }

    .lightbox-close{
        top:20px;
        right:20px;
    }
}