/* ==========================================================
   TABLETTE
========================================================== */

@media (max-width: 992px){

    .cv{

        width:calc(100% - (var(--space-5) * 2));

        margin:var(--space-7) auto;

    }

    #header{

        grid-template-columns:1fr;

        gap:var(--space-7);

    }

    .about{

        flex-direction:column;

        align-items:flex-start;

    }

    .about-stack{

        justify-content:flex-start;

    }

    .projects-grid{

        grid-template-columns:1fr;

    }

    .skills-grid{

        grid-template-columns:1fr;

    }

    .education-grid{

        grid-template-columns:1fr;

    }

}

/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 768px){

    main{

        gap:var(--space-7);

    }

    #header{

        padding:var(--space-7) 0;

    }

    .header-title{

        font-size:2.8rem;

    }

    .header-subtitle{

        font-size:1.25rem;

    }

    .header-description{

        max-width:100%;

    }

    .hero-technologies{

        gap:var(--space-2);

    }

    .contact-list{

        gap:var(--space-3);

    }

    .experience-header{

        flex-direction:column;

        gap:var(--space-2);

    }

    .project-header{

        flex-direction:column;

        align-items:flex-start;

        gap:var(--space-2);

    }

}

/* ==========================================================
   PETIT MOBILE
========================================================== */

@media (max-width: 576px){

    .cv{

        width:calc(100% - (var(--space-4) * 2));

        margin:var(--space-5) auto;

    }

    .header-title{

        font-size:2.2rem;

    }

    .hero-status{

        width:100%;

        justify-content:center;

    }

    .btn{

        width:100%;

    }

    .badge{

        font-size:.72rem;

    }

    .tag{

        font-size:.72rem;

    }

}