:root {
  --gap: 20px;
}

/* Base grid */
.grid {
  display: grid;
  gap: var(--gap);
  grid-template-columns: 1fr; /* default single column on mobile */
}

/* Fixed column count layouts */
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-5 { grid-template-columns: repeat(5, 1fr); }

/* Fraction-based layouts */
.grid-1-2 { grid-template-columns: 1fr 2fr; } /* 1/3 + 2/3 */
.grid-2-1 { grid-template-columns: 2fr 1fr; } /* 2/3 + 1/3 */

/* Responsive collapse */
@media (max-width: 768px) {
  .grid,
  .grid-2,
  .grid-3,
  .grid-4,
  .grid-5,
  .grid-2-1,
  .grid-1-2 {
    grid-template-columns: 1fr;
  }
}