/**
 * @file spacer.css
 * Spacer component — verticale witruimte.
 */

.nnn-spacer {
  display: block;
  width: 100%;
  flex-shrink: 0;
}

/* ─── Groottes ────────────────────────────────────────────── */

.nnn-spacer--xs  { height: var(--nnn-space-xs); }
.nnn-spacer--sm  { height: var(--nnn-space-sm); }
.nnn-spacer--md  { height: var(--nnn-space-md); }
.nnn-spacer--lg  { height: var(--nnn-space-lg); }
.nnn-spacer--xl  { height: var(--nnn-space-xl); }
.nnn-spacer--xxl { height: var(--nnn-space-xxl); }

/* ─── Responsive verkleining ──────────────────────────────── */

@media (max-width: 600px) {
  .nnn-spacer--responsive.nnn-spacer--lg  { height: var(--nnn-space-md); }
  .nnn-spacer--responsive.nnn-spacer--xl  { height: var(--nnn-space-lg); }
  .nnn-spacer--responsive.nnn-spacer--xxl { height: var(--nnn-space-xl); }
}