/* Grid System */
.grid {
    display: grid;
    gap: var(--element-spacing);
}

/* Grid columns for different screen sizes */
.grid-1 { grid-template-columns: repeat(1, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* Auto-fit grid with minimum column width */
.grid-auto {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}

/* Responsive grid adjustments */
@media screen and (max-width: 992px) {
    .grid-4 {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media screen and (max-width: 768px) {
    .grid-3, .grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 576px) {
    .grid-2, .grid-3, .grid-4 {
        grid-template-columns: 1fr;
    }
}

/* Flex Grid */
.flex-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--element-spacing);
    margin: calc(-1 * var(--element-spacing));
}

.flex-grid > * {
    flex: 1 1 var(--item-min-width, 300px);
    margin: var(--element-spacing);
}

/* Grid alignment utilities */
.grid-center {
    place-items: center;
}

.grid-start {
    place-items: start;
}

.grid-end {
    place-items: end;
}

/* Grid spacing utilities */
.grid-gap-sm {
    gap: calc(var(--element-spacing) * 0.5);
}

.grid-gap-lg {
    gap: calc(var(--element-spacing) * 2);
}

/* Product grid specific styles */
.products-grid {
    --item-min-width: 250px;
    margin-top: var(--section-spacing);
}

@media screen and (max-width: 576px) {
    .products-grid {
        --item-min-width: 100%;
    }
}