/* =========================================================
   RESPONSIVE.CSS
   =========================================================

   Responsive = adapting to smaller screens.

   Example:
   Desktop:
       4 products across

   Tablet:
       2 across

   Phone:
       1 across

   ========================================================= */


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

@media (max-width: 900px) {

    .page {

        width: 100%;

        padding: 10px;
    }

    .product-layout {

        grid-template-columns: 1fr;
    }
}


/* =========================================================
   PHONE
   ========================================================= */

@media (max-width: 600px) {

    /*
        Tab mobile behavior is handled in tabs.css.
        Keep this block available for future phone-specific layout rules.
    */
}
/* =========================================================
   CATALOGUE PAGE RESPONSIVE SHELL
   ========================================================= */

@media (max-width: 900px) {

    .page {
        width: calc(100% - 20px);
        padding: 14px;
    }
}

@media (max-width: 520px) {

    .page {
        width: 100%;
        padding: 10px;
    }

    h1 {
        font-size: 23px;
    }
}