/* ==========================================================
Project : Compro Doodle
Module  : Component
File    : product-grid.css
Version : 2.1.0
Author  : Doodle IT Development
========================================================== */

/* ==========================================================
PRODUCT GRID SECTION
========================================================== */

.product-grid-section{

    padding-block:
        var(--section-space-md);

}


/* ==========================================================
GRID
========================================================== */

.product-grid{

    display:grid;

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

    gap:
        var(--space-24);

}


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

@media (max-width:1023px){

    .product-grid{

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

    }

}


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

@media (max-width:767px){

    .product-grid-section{

        padding-block:
            var(--section-space-sm);

    }


    .product-grid{

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

        gap:
            var(--space-4);

    }

}