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

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

.product-grid-section{

    width:100%;

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

}


/* ============================================================
PRODUCT GRID HEADER
============================================================ */

.product-grid-header{

    display:flex;

    align-items:flex-end;

    justify-content:space-between;

    gap:
        var(--space-24);

    margin-bottom:
        var(--space-32);

}

.product-grid-heading{

    display:flex;

    flex-direction:column;

    min-width:0;

    gap:
        var(--space-8);

}

.product-grid-eyebrow{

    color:
        var(--color-primary);

    font-size:
        var(--font-sm);

    font-weight:
        var(--font-semibold);

    line-height:
        var(--line-tight);

    letter-spacing:
        var(--tracking-wide);

}

.product-grid-title{

    margin:0;

    color:
        var(--color-text);

    font-size:
        var(--font-3xl);

    font-weight:
        var(--font-bold);

    line-height:
        var(--line-tight);

}

.product-grid-count{

    flex:0 0 auto;

    color:
        var(--color-text-muted);

    font-size:
        var(--font-sm);

    font-weight:
        var(--font-medium);

    line-height:
        var(--line-normal);

}


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

.product-grid{

    display:grid;

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

    gap:
        var(--grid-gap-md);

}


/* ============================================================
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-header{

        align-items:flex-start;

        flex-direction:column;

        gap:
            var(--space-12);

        margin-bottom:
            var(--space-24);

    }

    .product-grid-title{

        font-size:
            var(--font-2xl);

    }

    .product-grid-count{

        font-size:
            var(--font-xs);

    }

    .product-grid{

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

        gap:
            var(--grid-gap-sm);

    }

}