/* ==========================================================
   MASKOTAS THEME
   RESPONSIVE v1.0
========================================================== */

/*==========================================================
LARGE DESKTOP
==========================================================*/

@media (max-width:1400px){

    :root{

        --mk-container:1280px;

    }

}

/*==========================================================
DESKTOP
==========================================================*/

@media (max-width:1200px){

    :root{

        --mk-container:1140px;

        --mk-logo-width:170px;

    }

}

/*==========================================================
TABLET
==========================================================*/

@media (max-width:991px){

    :root{

        --mk-header-height:80px;

    }

    .mk-header__top .mk-container{

        grid-template-columns:180px 1fr;

        row-gap:20px;

    }

    .mk-header__actions{

        grid-column:1 / -1;

        justify-content:flex-end;

    }

    .mk-grid-4{

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

    }

    .mk-grid-3{

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

    }

}

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

@media (max-width:767px){

    :root{

        --mk-header-padding:16px;

        --mk-logo-width:160px;

        --mk-search-height:50px;

    }

    .mk-header__top .mk-container{

        display:flex;

        flex-direction:column;

        gap:16px;

        align-items:stretch;

    }

    .mk-header__logo{

        justify-content:center;

    }

    .mk-header__search{

        width:100%;

    }

    .mk-header__actions{

        width:100%;

        justify-content:space-between;

    }

    .mk-phone{

        display:none;

    }

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

        grid-template-columns:1fr;

    }

    .mk-section{

        padding:40px 0;

    }

}

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

@media (max-width:480px){

    :root{

        --mk-logo-width:140px;

    }

    .mk-container{

        padding-left:12px;

        padding-right:12px;

    }

}