/* =============================================================================
   DAS ALMAS
   Site Oficial

   Arquivo:
   responsive.css

   Caminho:
   assets/css/responsive.css

   Versão:
   2.0.0

   Descrição:
   Ajustes responsivos para tablets e smartphones.

   ============================================================================= */


/* =============================================================================
   DESKTOP GRANDE
   ========================================================================== */

@media (max-width:1400px){

    .container{

        width:min(94%, var(--container-default));

    }

}


/* =============================================================================
   NOTEBOOK
   ========================================================================== */

@media (max-width:1200px){

    section{

        padding:

            120px

            0;

    }

    .grid-three{

        grid-template-columns:

            repeat(2,1fr);

    }

}


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

@media (max-width:992px){

    #header{

        padding:

            24px

            32px;

    }

    #summary{

        width:360px;

        right:-360px;

    }

    .grid-two{

        grid-template-columns:1fr;

    }

    .grid-three{

        grid-template-columns:1fr;

    }

    .hero-content{

        width:92%;

    }

    .gallery-piece{

        width:100%;

    }

}


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

@media (max-width:768px){

    section{

        padding:

            96px

            0;

    }

    .container{

        width:90%;

    }

    #header{

        padding:

            20px

            24px;

    }

    .logo{

        font-size:.82rem;

        letter-spacing:.20em;

    }

    #summary{

        width:100%;

        right:-100%;

    }

    .summary-header{

        padding:

            24px;

    }

    .summary-title{

        padding:

            0

            24px

            32px;

    }

    .summary-list a{

        padding:

            22px

            24px;

    }

    .hero-content p{

        letter-spacing:.15em;

        font-size:.90rem;

    }

    .scroll-indicator{

        bottom:32px;

    }

    .pillar{

        padding:

            56px

            0;

    }

    .editorial-divider{

        margin:

            32px

            0

            48px;

    }

}


/* =============================================================================
   SMARTPHONE
   ========================================================================== */

@media (max-width:576px){

    html{

        font-size:15px;

    }

    section{

        padding:

            72px

            0;

    }

    #header{

        padding:

            18px

            18px;

    }

    .hero-content{

        width:94%;

    }

    .hero-content h1{

        line-height:1;

    }

    .hero-content p{

        display:flex;

        flex-direction:column;

        gap:8px;

        letter-spacing:.08em;

    }

    .hero-content p span{

        display:none;

    }

    .button{

        width:100%;

        justify-content:center;

    }

    .gallery-piece+.gallery-piece{

        margin-top:96px;

    }

    .footer-content{

        width:90%;

    }

}


/* =============================================================================
   SMARTPHONE PEQUENO
   ========================================================================== */

@media (max-width:390px){

    html{

        font-size:14px;

    }

    #header{

        padding:

            16px;

    }

    .summary-header{

        padding:

            18px;

    }

    .summary-title{

        padding:

            0

            18px

            24px;

    }

    .summary-list a{

        padding:

            18px;

    }

    .chapter-number{

        min-width:28px;

    }

    .scroll-indicator{

        display:none;

    }

}