:root {
  --gap: 20px;
}

/* Base Grid */
.grid {
  display: grid;
  gap: var(--gap);
  grid-template-columns: minmax(0, 1fr);
}

/* Fixed Column Layouts */
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* Fraction-Based Layouts */
.grid-1-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.grid-2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }

/* Grid (Mobile) */
@media (max-width: 768px) {
  .grid {
    grid-template-columns: minmax(0, 1fr);
  }
}