.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* Grid wrapper */
.grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), 1fr);
  gap: var(--grid-gap);
}

/* Column spans – mobile (4-col) */
.col-1  { grid-column: span 1; }
.col-2  { grid-column: span 2; }
.col-3  { grid-column: span 3; }
.col-4  { grid-column: span 4; }

/* Tablet (8-col) */
@media (min-width: 640px) {
  .sm\:col-1 { grid-column: span 1; }
  .sm\:col-2 { grid-column: span 2; }
  .sm\:col-3 { grid-column: span 3; }
  .sm\:col-4 { grid-column: span 4; }
  .sm\:col-5 { grid-column: span 5; }
  .sm\:col-6 { grid-column: span 6; }
  .sm\:col-7 { grid-column: span 7; }
  .sm\:col-8 { grid-column: span 8; }
}

/* Desktop (12-col) */
@media (min-width: 1024px) {
  .lg\:col-1  { grid-column: span 1; }
  .lg\:col-2  { grid-column: span 2; }
  .lg\:col-3  { grid-column: span 3; }
  .lg\:col-4  { grid-column: span 4; }
  .lg\:col-5  { grid-column: span 5; }
  .lg\:col-6  { grid-column: span 6; }
  .lg\:col-7  { grid-column: span 7; }
  .lg\:col-8  { grid-column: span 8; }
  .lg\:col-9  { grid-column: span 9; }
  .lg\:col-10 { grid-column: span 10; }
  .lg\:col-11 { grid-column: span 11; }
  .lg\:col-12 { grid-column: span 12; }
}

/* 4-pointer spacing utility */
.p-1  { padding: 4px; }
.p-2  { padding: 8px; }
.p-3  { padding: 12px; }
.p-4  { padding: 16px; }
.p-5  { padding: 20px; }
.p-6  { padding: 24px; }
.p-8  { padding: 32px; }
.p-10 { padding: 40px; }
.p-12 { padding: 48px; }

.mt-4  { margin-top: 16px; }
.mt-6  { margin-top: 24px; }
.mt-8  { margin-top: 32px; }
.mt-12 { margin-top: 48px; }
.mt-16 { margin-top: 64px; }
.mt-20 { margin-top: 80px; }