/* ==========================
   CONTAINER
========================== */

.container {
    width: 100%;
    max-width: calc(var(--container-width) + (var(--container-padding) * 2));
    margin: 0 auto;
    padding: 0 var(--container-padding);
}
/* ==========================================
   MOBILE BASE
========================================== */

@media (max-width: 767px) {

    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    .container {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding-left: 16px;
        padding-right: 16px;
        box-sizing: border-box;
    }

    .products-grid {
        grid-template-columns: 1fr;
        gap: 16px;
        width: 100%;
    }

}