/* =========================================================
   Grid utilities
   Responsibility:
   - grid layout (columns, gaps)
   - geometry policy (aspect-ratio per grid)
   ========================================================= */

.grid {
  display: grid;
  gap: 1.5rem;
}

/* Column presets */

.grid-1 {
  grid-template-columns: 1fr;
}

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

.grid-3 {
/*  grid-template-columns: repeat(3, 1fr);*/
  grid-template-columns: repeat(3, minmax(0, 1fr));

}

.grid-4 {
  grid-template-columns: repeat(4, 1fr);
}

.grid-6 {
/*  grid-template-columns: repeat(6, 1fr);*/
grid-template-columns: repeat(6, minmax(0, 1fr));

}

/* --- Mobile collapse --- */

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