/* ==========================================================
   NEYORD DESIGN SYSTEM
   RESPONSIVE
   ========================================================== */


/* ==========================================================
   DESKTOP
   <= 1400px
   ========================================================== */

@media (max-width: 1400px){
    .container{
        max-width:1200px;
    }
}


/* ==========================================================
   LAPTOP
   <= 1200px
   ========================================================== */

@media (max-width: 1200px){
    .container{
        padding-left:var(--space-4);
        padding-right:var(--space-4);
    }
}


/* ==========================================================
   TABLET
   <= 992px
   ========================================================== */

@media (max-width: 992px){
    .section{
        padding-top:var(--space-7);
        padding-bottom:var(--space-7);
    }

    .grid-2,
    .grid-3,
    .grid-4{
        grid-template-columns:1fr;
    }

    .flex-between{
        flex-direction:column;
        align-items:flex-start;
        gap:var(--space-4);
    }

    .nav{
        display:none;
    }

    .header .btn{
        display:none;
    }

    .menu-toggle{
        display:flex;
        align-items:center;
        justify-content:center;
        font-size:28px;
    }


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

    .hero {
        min-height: auto;
    }

    .hero-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .hero-content {
        align-items: center;
    }

    .hero-actions,
    .hero-chips {
        justify-content: center;
    }

    .hero-visual {
        margin-top: var(--space-6);
    }
}



/* ==========================================================
   MOBILE
   <= 768px
   ========================================================== */

@media (max-width:768px){
    body{
        font-size:16px;
    }

    .container{
        padding-left:20px;
        padding-right:20px;
    }

    .section{
        padding-top:var(--space-6);
        padding-bottom:var(--space-6);
    }

    .btn{
        width:100%;
    }
}



/* ==========================================================
   SMALL MOBILE
   <= 480px
   ========================================================== */

@media (max-width:480px){
    .container{
        padding-left:16px;
        padding-right:16px;
    }
}