@media (min-width:1200px){

    :root{
        --container-padding:4rem;
    }

}

/* ===========================================
   RESPONSIVIDADE - HEADER
=========================================== */

@media (max-width: 768px) {

    header {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: auto;
        padding: 2rem;
        gap: 2rem;
    }

    .brand {
        padding-left: 0;
        justify-content: center;
    }

    .img-brand {
        width: 5rem;
    }

    .brand-name {
        font-size: 2rem;
        letter-spacing: .18em;
    }

    .menu {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        gap: 2rem;
    }
}

/* ===========================================
   HERO
=========================================== */

@media (max-width:768px){

    .hero{
        padding-inline:2rem;
        text-align:center;
    }

    .hero__title{
        font-size:4rem;
        line-height:1.1;
        margin-top:4rem;
    }

    .hero__text{
        font-size:1.8rem;
        margin-top:2rem;
    }

    .hero__button{
        width:100%;
        justify-content:center;
        margin-top:4rem;
    }

    .product-img{
        width:100%;
        max-width:42rem;
        margin-inline:auto;
    }

    .product-badges{
        width:100%;
        max-width:30rem;
        margin-inline:auto;
    }

    section{
        padding-inline:2rem;
    }
}

/* ===========================================
   INGREDIENTS
=========================================== */

@media(max-width:1100px){
    .ingredients__itens{
        grid-template-columns:repeat(3,1fr);
    }
}

@media(max-width:768px){
    .ingredients__itens{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:500px){
    .ingredients__itens{
        grid-template-columns:1fr;
    }
}

/* ===========================================
   FEATURES
=========================================== */

@media (max-width:768px){

    .features{
        grid-template-columns:1fr;
        gap:3rem;
        padding:2.5rem;
    }

    .features__icon{
       font-size:4rem;
    }

     .features__title{
        font-size:2.4rem;
    }

    .features__text{
        font-size:1.6rem;
        line-height:1.7;
    }

    .features{
        padding-block:8rem;
    }
}

/* ===========================================
   CTA
=========================================== */

@media (max-width: 768px){

    .cta{
        padding-block:6rem;
        padding-inline:2rem;
    }

    .cta__content{
        flex-direction:column;
        align-items:stretch;
        text-align:center;
        gap:3rem;
    }

    .cta__text{
        width:100%;
    }

    .cta__actions{
        width:100%;
    }

    .cta__link{
        display:block;
        width:100%;
    }

    .cta__button{
        width:100%;
        justify-content:center
    }
}

/* ===========================================
   FOOTER
=========================================== */

@media (max-width:768px){

    footer{
        flex-direction:column;
        text-align:center;
        gap:3rem;
    }

    .footer__brand{
        align-items:center;
    }

    .footer__links{
        align-items:center;
    }
}