/* Layout primitives: container, grid, responsive rhythm. */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

main { display: block; }

/* Vertical rhythm between major sections */
section {
  padding-block: var(--space-8);
}
@media (min-width: 768px) {
  section { padding-block: var(--space-9); }
}

/* Simple 12-col grid helper (opt-in) */
.grid {
  display: grid;
  gap: var(--space-5);
}
@media (min-width: 768px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}