.spacer { display: block; width: 100%; }
.spacer--small  { height: var(--spacing-sm, 1rem); }
.spacer--medium { height: var(--spacing-md, 2rem); }
.spacer--large  { height: var(--spacing-lg, 3rem); }
.spacer--xl     { height: var(--spacing-xl, 4rem); }
.spacer--custom { height: var(--spacer-height); }

@media (max-width: 767px) {
  .spacer--small  { height: var(--spacing-xs, 0.75rem); }
  .spacer--medium { height: var(--spacing-sm, 1rem); }
  .spacer--large  { height: var(--spacing-md, 2rem); }
  .spacer--xl     { height: var(--spacing-lg, 3rem); }
  .spacer--custom { height: var(--spacer-height-mobile, var(--spacer-height)); }
}