:root {
  --spacing-xxs: 0.236em;
  --spacing-xs: 0.382em;
  --spacing-s: 0.618em;
  --spacing-m: 1.000em;
  --spacing-l: 1.618em;
  --spacing-xl: 2.618em;
  --spacing-xxl: 4.236em;
}


/* Spacing utility classes: xxs */
.sp-bls-xxs { margin-block-start: var(--spacing-xxs); }
.sp-ble-xxs { margin-block-end: var(--spacing-xxs); }
.sp-ins-xxs { margin-inline-start: var(--spacing-xxs); }
.sp-ine-xxs { margin-inline-end: var(--spacing-xxs); }

/* Spacing utility classes: xs */
.sp-bls-xs { margin-block-start: var(--spacing-xs); }
.sp-ble-xs { margin-block-end: var(--spacing-xs); }
.sp-ins-xs { margin-inline-start: var(--spacing-xs); }
.sp-ine-xs { margin-inline-end: var(--spacing-xs); }

/* Spacing utility classes: s */
.sp-bls-s { margin-block-start: var(--spacing-s); }
.sp-ble-s { margin-block-end: var(--spacing-s); }
.sp-ins-s { margin-inline-start: var(--spacing-s); }
.sp-ine-s { margin-inline-end: var(--spacing-s); }

/* Spacing utility classes: m */
.sp-bls-m { margin-block-start: var(--spacing-m); }
.sp-ble-m { margin-block-end: var(--spacing-m); }
.sp-ins-m { margin-inline-start: var(--spacing-m); }
.sp-ine-m { margin-inline-end: var(--spacing-m); }

/* Spacing utility classes: l */
.sp-bls-l { margin-block-start: var(--spacing-l); }
.sp-ble-l { margin-block-end: var(--spacing-l); }
.sp-ins-l { margin-inline-start: var(--spacing-l); }
.sp-ine-l { margin-inline-end: var(--spacing-l); }

/* Spacing utility classes: xl */
.sp-bls-xl { margin-block-start: var(--spacing-xl); }
.sp-ble-xl { margin-block-end: var(--spacing-xl); }
.sp-ins-xl { margin-inline-start: var(--spacing-xl); }
.sp-ine-xl { margin-inline-end: var(--spacing-xl); }

/* Spacing utility classes: xxl */
.sp-bls-xxl { margin-block-start: var(--spacing-xxl); }
.sp-ble-xxl { margin-block-end: var(--spacing-xxl); }
.sp-ins-xxl { margin-inline-start: var(--spacing-xxl); }
.sp-ine-xxl { margin-inline-end: var(--spacing-xxl); }