/* Container */
.shop-grid-container {
    container-type: inline-size;
    min-width: 0;
    max-width: 100%;
}

/* Grid */
.shop-grid {
    display: grid;
    grid-template-columns: repeat(20, minmax(0, 1fr));
    row-gap: 1rem;
    column-gap: min(2rem, 2%);
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

/* Gap utilities */
.gap-y-0 {
    row-gap: 0;
}

/* Default: full width */
.shop-grid > * {
    grid-column: span 20;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.shop-grid.main-shop-grid {
    column-gap: 2rem;
}

/* Small containers: below 576px */
@container (width < 576px) {
    .shop-grid.main-shop-grid {
        column-gap: 0rem;
    }
    
    .shop-grid .sm-hidden,
    .shop-grid .md-show,
    .shop-grid .lg-show {
        display: none;
    }

    .shop-grid .sm-show {
        display: block;
    }

    .shop-grid>.sm-5 {
        grid-column: span 1;
    }

    .shop-grid>.sm-10 {
        grid-column: span 2;
    }

    .shop-grid>.sm-15 {
        grid-column: span 3;
    }

    .shop-grid>.sm-20 {
        grid-column: span 4;
    }

    .shop-grid>.sm-25 {
        grid-column: span 5;
    }

    .shop-grid>.sm-30 {
        grid-column: span 6;
    }

    .shop-grid>.sm-35 {
        grid-column: span 7;
    }

    .shop-grid>.sm-40 {
        grid-column: span 8;
    }

    .shop-grid>.sm-45 {
        grid-column: span 9;
    }

    .shop-grid>.sm-50 {
        grid-column: span 10;
    }

    .shop-grid>.sm-55 {
        grid-column: span 11;
    }

    .shop-grid>.sm-60 {
        grid-column: span 12;
    }

    .shop-grid>.sm-65 {
        grid-column: span 13;
    }

    .shop-grid>.sm-70 {
        grid-column: span 14;
    }

    .shop-grid>.sm-75 {
        grid-column: span 15;
    }

    .shop-grid>.sm-80 {
        grid-column: span 16;
    }

    .shop-grid>.sm-85 {
        grid-column: span 17;
    }

    .shop-grid>.sm-90 {
        grid-column: span 18;
    }

    .shop-grid>.sm-95 {
        grid-column: span 19;
    }

    .shop-grid>.sm-100 {
        grid-column: span 20;
    }
}

/* Medium containers: 576px to below 768px */
@container (550px <= width < 768px) {
    .shop-grid.main-shop-grid {
        column-gap: 0rem;
    }

    .shop-grid .md-hidden,
    .shop-grid .sm-show,
    .shop-grid .lg-show {
        display: none;
    }

    .shop-grid .md-show {
        display: block;
    }

    .shop-grid > .md-5 { grid-column: span 1; }
    .shop-grid > .md-10 { grid-column: span 2; }
    .shop-grid > .md-15 { grid-column: span 3; }
    .shop-grid > .md-20 { grid-column: span 4; }
    .shop-grid > .md-25 { grid-column: span 5; }
    .shop-grid > .md-30 { grid-column: span 6; }
    .shop-grid > .md-35 { grid-column: span 7; }
    .shop-grid > .md-40 { grid-column: span 8; }
    .shop-grid > .md-45 { grid-column: span 9; }
    .shop-grid > .md-50 { grid-column: span 10; }
    .shop-grid > .md-55 { grid-column: span 11; }
    .shop-grid > .md-60 { grid-column: span 12; }
    .shop-grid > .md-65 { grid-column: span 13; }
    .shop-grid > .md-70 { grid-column: span 14; }
    .shop-grid > .md-75 { grid-column: span 15; }
    .shop-grid > .md-80 { grid-column: span 16; }
    .shop-grid > .md-85 { grid-column: span 17; }
    .shop-grid > .md-90 { grid-column: span 18; }
    .shop-grid > .md-95 { grid-column: span 19; }
    .shop-grid > .md-100 { grid-column: span 20; }
}

/* Large containers: 768px and above */
@container (min-width: 768px) {
    .shop-grid .sm-show,
    .shop-grid .md-show,
    .shop-grid .lg-hidden {
        display: none;
    }

    .shop-grid .lg-show {
        display: block;
    }

    .shop-grid>.lg-5 {
        grid-column: span 1;
    }

    .shop-grid>.lg-10 {
        grid-column: span 2;
    }

    .shop-grid>.lg-15 {
        grid-column: span 3;
    }

    .shop-grid>.lg-20 {
        grid-column: span 4;
    }

    .shop-grid>.lg-25 {
        grid-column: span 5;
    }

    .shop-grid>.lg-30 {
        grid-column: span 6;
    }

    .shop-grid>.lg-35 {
        grid-column: span 7;
    }

    .shop-grid>.lg-40 {
        grid-column: span 8;
    }

    .shop-grid>.lg-45 {
        grid-column: span 9;
    }

    .shop-grid>.lg-50 {
        grid-column: span 10;
    }

    .shop-grid>.lg-55 {
        grid-column: span 11;
    }

    .shop-grid>.lg-60 {
        grid-column: span 12;
    }

    .shop-grid>.lg-65 {
        grid-column: span 13;
    }

    .shop-grid>.lg-70 {
        grid-column: span 14;
    }

    .shop-grid>.lg-75 {
        grid-column: span 15;
    }

    .shop-grid>.lg-80 {
        grid-column: span 16;
    }

    .shop-grid>.lg-85 {
        grid-column: span 17;
    }

    .shop-grid>.lg-90 {
        grid-column: span 18;
    }

    .shop-grid>.lg-95 {
        grid-column: span 19;
    }

    .shop-grid>.lg-100 {
        grid-column: span 20;
    }
}