/* Mobile: até 620px */
@media (min-width:1680px){
    header,
    #about{
         max-height: 900px; /* ou 85vh por exemplo */
    }
}

@media (min-width:621px) and (max-width: 1280px ){
    #about{
        height: auto;
    }
    #about .about-area img{
        width: 400px;
        align-self: flex-end;
    }
    #about .about-infos h2{
        font-size: 30px;
    }
    #about .about-infos p{
        margin-top: 30px;
        max-width: 550px;
    }
}

@media (max-width: 980px) {
    .container{
        padding: 0px 20px;
    }

    header .mn-mobile{
        display: flex;
        z-index: 2;
    }

    header nav{
        position: fixed;
        padding-top: 60px;
        top: 0;
        left: 100dvw;
        height: 100dvh;
        z-index: 1;
    }
    header nav ul{
        flex-direction: column;
        width: 100%;
    }
    header nav ul li a{
        justify-content: center;
        padding: 20px 0px;
    }

    header .banner h1{
        font-size: 40px;
    }
    header .banner h2{
        font-size: 12px;
    }

    #about{
        height: auto;
    }
    #about .about-area{
        grid-template-columns: 1fr;
        grid-template-areas:
            "about-infos"
            "about-img "
        ;
    }
    #about .about-area img{
        width: 300px;
        align-self: flex-end;
    }
    #about .about-infos{
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-left: 20px;
        padding-top: 50px;
    }
    #about .about-infos h2{
        font-size: 32px;
        text-align: center;
    }
    #about .about-infos p{
        margin-top: 30px;
    }
    #about .about-button-area{
        display: flex;
        flex-direction: column;
    }
    #about .about-infos .cta-button{
    margin-top: 20px;
    margin-right: 0px;
}
}