@media(max-width:1023px){
    .main .text-card h1{
        font-size: 3.5rem;
    }

    .main .text-card p{
        font-size: 1.8rem;
    }

}

@media(max-width:768px){
    body{
        background-image: url(../images/bg-mobile.svg);
        background-size: contain;
    }
    .header img{
        max-width: 180px;
    }

    .main{
        grid-template-columns: 1fr;
        padding:1rem 3rem;
        grid-template-areas: 
        "illustration"
        "text-card";
    }

    .main .illustration img{
        max-width: 450px;
    }

    .main .text-card{
        align-items: center;
        text-align: center;
        padding:2% 5%;
    }

    .main .text-card a{
        font-size: 1.8rem;
    }

    .footer{
        justify-content: center;
    }
}

@media(max-width:475px){
    .main{
        gap:1rem;
    }
    .main .text-card h1{
        font-size: 2.5rem;
    }

    .footer{
        padding-top:2rem;
    }
}

@media(max-height:800px) and (max-width:768px){
    .main .text-card{
        padding: 1rem;
    }

    .main .text-card h1{
        font-size: 2rem;
    }
    .main .text-card p{
        font-size: 1.3rem;
    }

    .main .text-card a{
        font-size:1.5rem;
    }

    .header img{
        max-width: 150px;
    }

    .main .illustration img{
        max-width: 250px;
    }

    .footer{
        padding:1rem;
    }

    .footer .social-medias{
        font-size: 1.5rem;
    }

    .footer .social-medias .media{
        width: 30px;
        height: 30px;
    }
}