/* ============================================
GRID SYSTEM FIXES
============================================ */

/* Default grid behavior */
.med-grid {
display: grid;
gap: 1.5rem;
}

/* 3 columns - responsive */
.med-grid-3 {
grid-template-columns: repeat(3, 1fr);
}

/* 2 columns - responsive */
.med-grid-2 {
grid-template-columns: repeat(2, 1fr);
}

/* Mobile: all grids become 1 column */
@media (max-width: 768px) {
.med-grid-3,
.med-grid-2 {
grid-template-columns: 1fr !important;
}
}

/* Small mobile: tighter gaps */
@media (max-width: 480px) {
.med-grid {
gap: 1rem;
}
}