Content Spacing

Fluid Margin & Padding Helpers

See Grid and Flex classes for layout. Containers (.container-*) set page width only and should not define spacing rhythm. Use the spacing utilities below for consistent internal and external spacing. Gap utilities are available as --gap-* tokens and .gap-* classes.

:root {

  /* ----------------------------------- Spacing tokens -------------------- */
  --space-xxs: clamp(0.222rem, 0.5vw, 0.333rem); /* ~4–6px */
  --space-xs:  clamp(0.444rem, 1vw, 0.556rem);   /* ~8–10px */
  --space-sm:  clamp(0.667rem, 2vw, 1.111rem);   /* ~12–20px */
  --space-md:  clamp(0.889rem, 3vw, 2.222rem);   /* ~16–40px */
  --space-lg:  clamp(1.333rem, 8vw, 4.444rem);   /* ~24–80px */
  --space-xl:  clamp(2.222rem, 10vw, 6.666rem);  /* ~40–120px */

  --space-xxs-static: 0.222rem;
  --space-xs-static:  0.444rem;
  --space-sm-static:  0.667rem;
  --space-md-static:  0.889rem;
  --space-lg-static:  1.333rem;
  --space-xl-static:  2.222rem;
  
  /* ----------------------------------- Jumbo spacing --------------------- */
  --space-jumbo-sm: clamp(1.333rem, 14vw, 14rem);
  --space-jumbo-md: clamp(2.222rem, 16vw, 16rem);
  --space-jumbo-lg: clamp(3.333rem, 25vw, 20rem);
  
  /* ----------------------------------- Gap tokens ------------------------ */
  --gap-none: 0px;
  --gap-xxs: var(--space-xxs);
  --gap-xs: var(--space-xs);
  --gap-sm: var(--space-sm);
  --gap-md: var(--space-md);
  --gap-lg: var(--space-lg);
  --gap-xl: var(--space-xl);
}

/* ****************************************** SPACING *************************
Add space between sections with vertical spacers.
**************************************************************************** */

<div class="v-spacer-sm" aria-hidden="true" role="presentation"></div>

.v-spacer-xxs { height: var(--space-xxs); }
.v-spacer-xs  { height: var(--space-xs); }
.v-spacer-sm  { height: var(--space-sm); }
.v-spacer-md  { height: var(--space-md); }
.v-spacer-lg  { height: var(--space-lg); }
.v-spacer-xl  { height: var(--space-xl); }
  
------------------------------- Examples: padding and margin helpers

in = padding
out = margin
      
• .out-lg       (add large margin on all sides)
• .in-sm        (add small padding on all sides)
      
• .out-y-lg     (add large margin to top & bottom)
• .in-x-sm      (add small padding to left & right)
      
• .in-dwn-x-sm  (add small left/right padding to child elements)
• .out-dwn-lg   (add large margins to child elements)
      
--------------------------------------------------------------------------------  
Class extensions
    
dwn  = cascade to child elements
dwn2 = cascade to grandchildren (skip a level)

• in-Ax-dwn-*   add padding to child elements
• out-Ax-dwn-*  add margin(s) to child elements
    
* = size options
Use size to define the space: xxs, xs, sm, md, lg, xl

Ax = axis options
y = top & bottom 
x = left & right 
l = left
r = right
t = top
b = bottom

-- extended size options — jumbo
in-jumbo-Ax-*
out-jumbo-Ax-*

* = jumbo sizes: sm, md, lg
Example: .in-jumbo-y-sm  (add jumbo padding to top and bottom)
Example: .out-jumbo-y-sm (add jumbo margin to top and bottom)

-------------------------- 
To override inherited child spacing, apply a more specific spacing utility on that element directly.
-------------------------- 

General guidance
- Use .v-spacer-* to create space between sections.
- Prefer padding (in-*) for internal spacing; use margins (out-*) to separate blocks.
- hr elements can use margin classes; padding is not recommended:
  <hr class="out-y-lg" aria-hidden="true" role="presentation">
- As an alternative spacer:
  <div class="v-spacer-lg" aria-hidden="true" role="presentation"></div>
- Standard line breaks <br> are for inline content only.