/* ============================================================
   SPACE block — editor-placed whitespace.
   Sizes are in vh so a "Large" space stays proportional to the
   screen, which matters on the one-viewport home page.
   ============================================================ */
:root {
    /* ========== TUNE HERE ========================================= */
    --space-xs: 1.5vh;
    --space-s:  4vh;
    --space-m:  9vh;
    --space-l:  18vh;
    --space-xl: 32vh;
    /* ============================================================== */
}

.block-spacer { width: 100%; }
.block-spacer--xs { height: var(--space-xs); }
.block-spacer--s  { height: var(--space-s); }
.block-spacer--m  { height: var(--space-m); }
.block-spacer--l  { height: var(--space-l); }
.block-spacer--xl { height: var(--space-xl); }

/* on a phone everything is one column, so huge gaps just become dead
   scrolling — cap the big sizes */
@media (max-width: 780px) {
    .block-spacer--l  { height: var(--space-m); }
    .block-spacer--xl { height: var(--space-l); }
}