/*======================================
  Wx Design System v1.0
  Responsive
======================================*/


/*==================================================
  LARGE LAPTOPS
==================================================*/

@media (max-width:1200px){

    :root{

        --container-width:1100px;
    }

}



/*==================================================
  TABLETS
==================================================*/

@media (max-width:992px){

    :root{

        --section-padding:96px;
    }

    h1{

        font-size:3rem;
    }

    h2{

        font-size:2.5rem;
    }

    h3{

        font-size:2rem;
    }

    .grid-4{

        grid-template-columns:repeat(2,1fr);
    }

    .grid-3{

        grid-template-columns:repeat(2,1fr);
    }

    .grid-2{

        grid-template-columns:1fr;
    }

}



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

@media (max-width:768px){

    :root{

        --section-padding:80px;

        --header-height:72px;
    }

    h1{

        font-size:2.5rem;
    }

    h2{

        font-size:2rem;
    }

    h3{

        font-size:1.75rem;
    }

    .container,
    .container-wide,
    .container-narrow{

        width:min(100% - 1.5rem,100%);
    }

    .grid-4,
    .grid-3,
    .grid-2{

        grid-template-columns:1fr;
    }

    .section-header{

        margin-bottom:3rem;
    }

    .btn{

        width:100%;

        justify-content:center;
    }

}



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

@media (max-width:576px){

    :root{

        --section-padding:64px;
    }

    html{

        font-size:15px;
    }

    h1{

        font-size:2.2rem;
    }

    h2{

        font-size:1.8rem;
    }

    h3{

        font-size:1.5rem;
    }

    .card{

        padding:1.5rem;
    }

}