/* ============================================================
   SECTIONS — spacing and alternating backgrounds
   ============================================================ */

section {
  padding-block: var(--space-10);
}

@media (min-width: 768px) {
  section { padding-block: var(--space-12); }
}

@media (min-width: 1024px) {
  section { padding-block: var(--space-16); }
}

.section-bg-default { background-color: var(--color-bg); }
.section-bg-surface { background-color: var(--color-surface); }
.section-bg-dark    { background-color: var(--color-primary-dark); color: var(--color-white); }
.section-bg-primary { background-color: var(--color-primary); color: var(--color-white); }