/* Grid System */
.grid-12 {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--space-6);
}

.grid-auto {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-6);
}

.layout-2-col {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
}

.layout-3-col {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
}

.layout-4-col {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6);
}

@media (max-width: 1200px) {
    .grid-12 {
        grid-template-columns: repeat(6, 1fr);
        gap: var(--space-4);
    }
}

@media (max-width: 1024px) {
    .layout-4-col {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .grid-12 {
        grid-template-columns: repeat(6, 1fr);
    }
}

@media (max-width: 768px) {
    .layout-2-col,
    .layout-3-col,
    .layout-4-col,
    .grid-12 {
        grid-template-columns: 1fr;
    }
}