/* columns-1.css
   Mobile-first: 1 col (móvil) → 2 cols (>=600px) → 4 cols (>=992px) */

.card-grid {
  display: grid;
  grid-template-columns: 1fr; /* móvil */
  gap: 20px;
}

/* utilidades para forzar columnas si lo necesitas */
.card-grid.columns-2 { grid-template-columns: repeat(2, 1fr); }
.card-grid.columns-3 { grid-template-columns: repeat(3, 1fr); }
.card-grid.columns-4 { grid-template-columns: repeat(4, 1fr); }

/* Tablets: 2 columnas */
@media (min-width: 600px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Desktop / pantallas grandes: 4 columnas */
@media (min-width: 992px) {
  .card-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* --- OPCIONAL (más flexible):
   .card-grid {
     grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
   }
   Esto adapta automáticamente el nº de columnas según el ancho. */