/*	diego@quarter.ca
 *
 *	Sass to enable fluid typography and spacing
	
 
 	@link https://utopia.fyi/type/calculator?c=320,16,1.2,2500,26,1.25,7,3,650-1240-1512&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l|m-xl|l-2xl&g=s,l,xl,12



 
	@use "sass:meta";

	// 1. List your token names (they match your CSS variables)
	$space-tokens: (
	  3xs, 2xs, xs, s, m, l, xl, 2xl, 3xl,
	  3xs-2xs, 2xs-xs, xs-s, s-m, m-l, l-xl, xl-2xl, 2xl-3xl,
	  s-l, m-xl, l-2xl
	);
	
	// 2. List your property/side combos
	$utilities: (
	  m: margin,
	  mt: margin-top,
	  mb: margin-bottom,
	  ms: margin-left, // or margin-inline-start for RTL support
	  me: margin-right, // or margin-inline-end
	  mx: (margin-left, margin-right),
	  my: (margin-top, margin-bottom),
	  p: padding,
	  pt: padding-top,
	  pb: padding-bottom,
	  ps: padding-left, // or padding-inline-start
	  pe: padding-right, // or padding-inline-end
	  px: (padding-left, padding-right),
	  py: (padding-top, padding-bottom)
	);
	
	// 3. Loop and generate the classes
	@each $short, $prop in $utilities {
	  @each $token in $space-tokens {
	    .#{$short}-#{$token} {
	      @if meta.type-of($prop) == 'list' {
	        @each $side in $prop {
	          #{$side}: var(--space-#{$token}) !important;
	        }
	      } @else {
	        #{$prop}: var(--space-#{$token}) !important;
	      }
	    }
	  }
	}

 *
 *
 *
 * */

.m-3xs {
  margin: var(--space-3xs) !important;
}

.m-2xs {
  margin: var(--space-2xs) !important;
}

.m-xs {
  margin: var(--space-xs) !important;
}

.m-s {
  margin: var(--space-s) !important;
}

.m-m {
  margin: var(--space-m) !important;
}

.m-l {
  margin: var(--space-l) !important;
}

.m-xl {
  margin: var(--space-xl) !important;
}

.m-2xl {
  margin: var(--space-2xl) !important;
}

.m-3xl {
  margin: var(--space-3xl) !important;
}

.m-1xs {
  margin: var(--space-1xs) !important;
}

.m-2xs-xs {
  margin: var(--space-2xs-xs) !important;
}

.m-xs-s {
  margin: var(--space-xs-s) !important;
}

.m-s-m {
  margin: var(--space-s-m) !important;
}

.m-m-l {
  margin: var(--space-m-l) !important;
}

.m-l-xl {
  margin: var(--space-l-xl) !important;
}

.m-xl-2xl {
  margin: var(--space-xl-2xl) !important;
}

.m--1xl {
  margin: var(--space--1xl) !important;
}

.m-s-l {
  margin: var(--space-s-l) !important;
}

.m-m-xl {
  margin: var(--space-m-xl) !important;
}

.m-l-2xl {
  margin: var(--space-l-2xl) !important;
}

.mt-3xs {
  margin-top: var(--space-3xs) !important;
}

.mt-2xs {
  margin-top: var(--space-2xs) !important;
}

.mt-xs {
  margin-top: var(--space-xs) !important;
}

.mt-s {
  margin-top: var(--space-s) !important;
}

.mt-m {
  margin-top: var(--space-m) !important;
}

.mt-l {
  margin-top: var(--space-l) !important;
}

.mt-xl {
  margin-top: var(--space-xl) !important;
}

.mt-2xl {
  margin-top: var(--space-2xl) !important;
}

.mt-3xl {
  margin-top: var(--space-3xl) !important;
}

.mt-1xs {
  margin-top: var(--space-1xs) !important;
}

.mt-2xs-xs {
  margin-top: var(--space-2xs-xs) !important;
}

.mt-xs-s {
  margin-top: var(--space-xs-s) !important;
}

.mt-s-m {
  margin-top: var(--space-s-m) !important;
}

.mt-m-l {
  margin-top: var(--space-m-l) !important;
}

.mt-l-xl {
  margin-top: var(--space-l-xl) !important;
}

.mt-xl-2xl {
  margin-top: var(--space-xl-2xl) !important;
}

.mt--1xl {
  margin-top: var(--space--1xl) !important;
}

.mt-s-l {
  margin-top: var(--space-s-l) !important;
}

.mt-m-xl {
  margin-top: var(--space-m-xl) !important;
}

.mt-l-2xl {
  margin-top: var(--space-l-2xl) !important;
}

.mb-3xs {
  margin-bottom: var(--space-3xs) !important;
}

.mb-2xs {
  margin-bottom: var(--space-2xs) !important;
}

.mb-xs {
  margin-bottom: var(--space-xs) !important;
}

.mb-s {
  margin-bottom: var(--space-s) !important;
}

.mb-m {
  margin-bottom: var(--space-m) !important;
}

.mb-l {
  margin-bottom: var(--space-l) !important;
}

.mb-xl {
  margin-bottom: var(--space-xl) !important;
}

.mb-2xl {
  margin-bottom: var(--space-2xl) !important;
}

.mb-3xl {
  margin-bottom: var(--space-3xl) !important;
}

.mb-1xs {
  margin-bottom: var(--space-1xs) !important;
}

.mb-2xs-xs {
  margin-bottom: var(--space-2xs-xs) !important;
}

.mb-xs-s {
  margin-bottom: var(--space-xs-s) !important;
}

.mb-s-m {
  margin-bottom: var(--space-s-m) !important;
}

.mb-m-l {
  margin-bottom: var(--space-m-l) !important;
}

.mb-l-xl {
  margin-bottom: var(--space-l-xl) !important;
}

.mb-xl-2xl {
  margin-bottom: var(--space-xl-2xl) !important;
}

.mb--1xl {
  margin-bottom: var(--space--1xl) !important;
}

.mb-s-l {
  margin-bottom: var(--space-s-l) !important;
}

.mb-m-xl {
  margin-bottom: var(--space-m-xl) !important;
}

.mb-l-2xl {
  margin-bottom: var(--space-l-2xl) !important;
}

.ms-3xs {
  margin-left: var(--space-3xs) !important;
}

.ms-2xs {
  margin-left: var(--space-2xs) !important;
}

.ms-xs {
  margin-left: var(--space-xs) !important;
}

.ms-s {
  margin-left: var(--space-s) !important;
}

.ms-m {
  margin-left: var(--space-m) !important;
}

.ms-l {
  margin-left: var(--space-l) !important;
}

.ms-xl {
  margin-left: var(--space-xl) !important;
}

.ms-2xl {
  margin-left: var(--space-2xl) !important;
}

.ms-3xl {
  margin-left: var(--space-3xl) !important;
}

.ms-1xs {
  margin-left: var(--space-1xs) !important;
}

.ms-2xs-xs {
  margin-left: var(--space-2xs-xs) !important;
}

.ms-xs-s {
  margin-left: var(--space-xs-s) !important;
}

.ms-s-m {
  margin-left: var(--space-s-m) !important;
}

.ms-m-l {
  margin-left: var(--space-m-l) !important;
}

.ms-l-xl {
  margin-left: var(--space-l-xl) !important;
}

.ms-xl-2xl {
  margin-left: var(--space-xl-2xl) !important;
}

.ms--1xl {
  margin-left: var(--space--1xl) !important;
}

.ms-s-l {
  margin-left: var(--space-s-l) !important;
}

.ms-m-xl {
  margin-left: var(--space-m-xl) !important;
}

.ms-l-2xl {
  margin-left: var(--space-l-2xl) !important;
}

.me-3xs {
  margin-right: var(--space-3xs) !important;
}

.me-2xs {
  margin-right: var(--space-2xs) !important;
}

.me-xs {
  margin-right: var(--space-xs) !important;
}

.me-s {
  margin-right: var(--space-s) !important;
}

.me-m {
  margin-right: var(--space-m) !important;
}

.me-l {
  margin-right: var(--space-l) !important;
}

.me-xl {
  margin-right: var(--space-xl) !important;
}

.me-2xl {
  margin-right: var(--space-2xl) !important;
}

.me-3xl {
  margin-right: var(--space-3xl) !important;
}

.me-1xs {
  margin-right: var(--space-1xs) !important;
}

.me-2xs-xs {
  margin-right: var(--space-2xs-xs) !important;
}

.me-xs-s {
  margin-right: var(--space-xs-s) !important;
}

.me-s-m {
  margin-right: var(--space-s-m) !important;
}

.me-m-l {
  margin-right: var(--space-m-l) !important;
}

.me-l-xl {
  margin-right: var(--space-l-xl) !important;
}

.me-xl-2xl {
  margin-right: var(--space-xl-2xl) !important;
}

.me--1xl {
  margin-right: var(--space--1xl) !important;
}

.me-s-l {
  margin-right: var(--space-s-l) !important;
}

.me-m-xl {
  margin-right: var(--space-m-xl) !important;
}

.me-l-2xl {
  margin-right: var(--space-l-2xl) !important;
}

.mx-3xs {
  margin-left: var(--space-3xs) !important;
  margin-right: var(--space-3xs) !important;
}

.mx-2xs {
  margin-left: var(--space-2xs) !important;
  margin-right: var(--space-2xs) !important;
}

.mx-xs {
  margin-left: var(--space-xs) !important;
  margin-right: var(--space-xs) !important;
}

.mx-s {
  margin-left: var(--space-s) !important;
  margin-right: var(--space-s) !important;
}

.mx-m {
  margin-left: var(--space-m) !important;
  margin-right: var(--space-m) !important;
}

.mx-l {
  margin-left: var(--space-l) !important;
  margin-right: var(--space-l) !important;
}

.mx-xl {
  margin-left: var(--space-xl) !important;
  margin-right: var(--space-xl) !important;
}

.mx-2xl {
  margin-left: var(--space-2xl) !important;
  margin-right: var(--space-2xl) !important;
}

.mx-3xl {
  margin-left: var(--space-3xl) !important;
  margin-right: var(--space-3xl) !important;
}

.mx-1xs {
  margin-left: var(--space-1xs) !important;
  margin-right: var(--space-1xs) !important;
}

.mx-2xs-xs {
  margin-left: var(--space-2xs-xs) !important;
  margin-right: var(--space-2xs-xs) !important;
}

.mx-xs-s {
  margin-left: var(--space-xs-s) !important;
  margin-right: var(--space-xs-s) !important;
}

.mx-s-m {
  margin-left: var(--space-s-m) !important;
  margin-right: var(--space-s-m) !important;
}

.mx-m-l {
  margin-left: var(--space-m-l) !important;
  margin-right: var(--space-m-l) !important;
}

.mx-l-xl {
  margin-left: var(--space-l-xl) !important;
  margin-right: var(--space-l-xl) !important;
}

.mx-xl-2xl {
  margin-left: var(--space-xl-2xl) !important;
  margin-right: var(--space-xl-2xl) !important;
}

.mx--1xl {
  margin-left: var(--space--1xl) !important;
  margin-right: var(--space--1xl) !important;
}

.mx-s-l {
  margin-left: var(--space-s-l) !important;
  margin-right: var(--space-s-l) !important;
}

.mx-m-xl {
  margin-left: var(--space-m-xl) !important;
  margin-right: var(--space-m-xl) !important;
}

.mx-l-2xl {
  margin-left: var(--space-l-2xl) !important;
  margin-right: var(--space-l-2xl) !important;
}

.my-3xs {
  margin-top: var(--space-3xs) !important;
  margin-bottom: var(--space-3xs) !important;
}

.my-2xs {
  margin-top: var(--space-2xs) !important;
  margin-bottom: var(--space-2xs) !important;
}

.my-xs {
  margin-top: var(--space-xs) !important;
  margin-bottom: var(--space-xs) !important;
}

.my-s {
  margin-top: var(--space-s) !important;
  margin-bottom: var(--space-s) !important;
}

.my-m {
  margin-top: var(--space-m) !important;
  margin-bottom: var(--space-m) !important;
}

.my-l {
  margin-top: var(--space-l) !important;
  margin-bottom: var(--space-l) !important;
}

.my-xl {
  margin-top: var(--space-xl) !important;
  margin-bottom: var(--space-xl) !important;
}

.my-2xl {
  margin-top: var(--space-2xl) !important;
  margin-bottom: var(--space-2xl) !important;
}

.my-3xl {
  margin-top: var(--space-3xl) !important;
  margin-bottom: var(--space-3xl) !important;
}

.my-1xs {
  margin-top: var(--space-1xs) !important;
  margin-bottom: var(--space-1xs) !important;
}

.my-2xs-xs {
  margin-top: var(--space-2xs-xs) !important;
  margin-bottom: var(--space-2xs-xs) !important;
}

.my-xs-s {
  margin-top: var(--space-xs-s) !important;
  margin-bottom: var(--space-xs-s) !important;
}

.my-s-m {
  margin-top: var(--space-s-m) !important;
  margin-bottom: var(--space-s-m) !important;
}

.my-m-l {
  margin-top: var(--space-m-l) !important;
  margin-bottom: var(--space-m-l) !important;
}

.my-l-xl {
  margin-top: var(--space-l-xl) !important;
  margin-bottom: var(--space-l-xl) !important;
}

.my-xl-2xl {
  margin-top: var(--space-xl-2xl) !important;
  margin-bottom: var(--space-xl-2xl) !important;
}

.my--1xl {
  margin-top: var(--space--1xl) !important;
  margin-bottom: var(--space--1xl) !important;
}

.my-s-l {
  margin-top: var(--space-s-l) !important;
  margin-bottom: var(--space-s-l) !important;
}

.my-m-xl {
  margin-top: var(--space-m-xl) !important;
  margin-bottom: var(--space-m-xl) !important;
}

.my-l-2xl {
  margin-top: var(--space-l-2xl) !important;
  margin-bottom: var(--space-l-2xl) !important;
}

.p-3xs {
  padding: var(--space-3xs) !important;
}

.p-2xs {
  padding: var(--space-2xs) !important;
}

.p-xs {
  padding: var(--space-xs) !important;
}

.p-s {
  padding: var(--space-s) !important;
}

.p-m {
  padding: var(--space-m) !important;
}

.p-l {
  padding: var(--space-l) !important;
}

.p-xl {
  padding: var(--space-xl) !important;
}

.p-2xl {
  padding: var(--space-2xl) !important;
}

.p-3xl {
  padding: var(--space-3xl) !important;
}

.p-1xs {
  padding: var(--space-1xs) !important;
}

.p-2xs-xs {
  padding: var(--space-2xs-xs) !important;
}

.p-xs-s {
  padding: var(--space-xs-s) !important;
}

.p-s-m {
  padding: var(--space-s-m) !important;
}

.p-m-l {
  padding: var(--space-m-l) !important;
}

.p-l-xl {
  padding: var(--space-l-xl) !important;
}

.p-xl-2xl {
  padding: var(--space-xl-2xl) !important;
}

.p--1xl {
  padding: var(--space--1xl) !important;
}

.p-s-l {
  padding: var(--space-s-l) !important;
}

.p-m-xl {
  padding: var(--space-m-xl) !important;
}

.p-l-2xl {
  padding: var(--space-l-2xl) !important;
}

.pt-3xs {
  padding-top: var(--space-3xs) !important;
}

.pt-2xs {
  padding-top: var(--space-2xs) !important;
}

.pt-xs {
  padding-top: var(--space-xs) !important;
}

.pt-s {
  padding-top: var(--space-s) !important;
}

.pt-m {
  padding-top: var(--space-m) !important;
}

.pt-l {
  padding-top: var(--space-l) !important;
}

.pt-xl {
  padding-top: var(--space-xl) !important;
}

.pt-2xl {
  padding-top: var(--space-2xl) !important;
}

.pt-3xl {
  padding-top: var(--space-3xl) !important;
}

.pt-1xs {
  padding-top: var(--space-1xs) !important;
}

.pt-2xs-xs {
  padding-top: var(--space-2xs-xs) !important;
}

.pt-xs-s {
  padding-top: var(--space-xs-s) !important;
}

.pt-s-m {
  padding-top: var(--space-s-m) !important;
}

.pt-m-l {
  padding-top: var(--space-m-l) !important;
}

.pt-l-xl {
  padding-top: var(--space-l-xl) !important;
}

.pt-xl-2xl {
  padding-top: var(--space-xl-2xl) !important;
}

.pt--1xl {
  padding-top: var(--space--1xl) !important;
}

.pt-s-l {
  padding-top: var(--space-s-l) !important;
}

.pt-m-xl {
  padding-top: var(--space-m-xl) !important;
}

.pt-l-2xl {
  padding-top: var(--space-l-2xl) !important;
}

.pb-3xs {
  padding-bottom: var(--space-3xs) !important;
}

.pb-2xs {
  padding-bottom: var(--space-2xs) !important;
}

.pb-xs {
  padding-bottom: var(--space-xs) !important;
}

.pb-s {
  padding-bottom: var(--space-s) !important;
}

.pb-m {
  padding-bottom: var(--space-m) !important;
}

.pb-l {
  padding-bottom: var(--space-l) !important;
}

.pb-xl {
  padding-bottom: var(--space-xl) !important;
}

.pb-2xl {
  padding-bottom: var(--space-2xl) !important;
}

.pb-3xl {
  padding-bottom: var(--space-3xl) !important;
}

.pb-1xs {
  padding-bottom: var(--space-1xs) !important;
}

.pb-2xs-xs {
  padding-bottom: var(--space-2xs-xs) !important;
}

.pb-xs-s {
  padding-bottom: var(--space-xs-s) !important;
}

.pb-s-m {
  padding-bottom: var(--space-s-m) !important;
}

.pb-m-l {
  padding-bottom: var(--space-m-l) !important;
}

.pb-l-xl {
  padding-bottom: var(--space-l-xl) !important;
}

.pb-xl-2xl {
  padding-bottom: var(--space-xl-2xl) !important;
}

.pb--1xl {
  padding-bottom: var(--space--1xl) !important;
}

.pb-s-l {
  padding-bottom: var(--space-s-l) !important;
}

.pb-m-xl {
  padding-bottom: var(--space-m-xl) !important;
}

.pb-l-2xl {
  padding-bottom: var(--space-l-2xl) !important;
}

.ps-3xs {
  padding-left: var(--space-3xs) !important;
}

.ps-2xs {
  padding-left: var(--space-2xs) !important;
}

.ps-xs {
  padding-left: var(--space-xs) !important;
}

.ps-s {
  padding-left: var(--space-s) !important;
}

.ps-m {
  padding-left: var(--space-m) !important;
}

.ps-l {
  padding-left: var(--space-l) !important;
}

.ps-xl {
  padding-left: var(--space-xl) !important;
}

.ps-2xl {
  padding-left: var(--space-2xl) !important;
}

.ps-3xl {
  padding-left: var(--space-3xl) !important;
}

.ps-1xs {
  padding-left: var(--space-1xs) !important;
}

.ps-2xs-xs {
  padding-left: var(--space-2xs-xs) !important;
}

.ps-xs-s {
  padding-left: var(--space-xs-s) !important;
}

.ps-s-m {
  padding-left: var(--space-s-m) !important;
}

.ps-m-l {
  padding-left: var(--space-m-l) !important;
}

.ps-l-xl {
  padding-left: var(--space-l-xl) !important;
}

.ps-xl-2xl {
  padding-left: var(--space-xl-2xl) !important;
}

.ps--1xl {
  padding-left: var(--space--1xl) !important;
}

.ps-s-l {
  padding-left: var(--space-s-l) !important;
}

.ps-m-xl {
  padding-left: var(--space-m-xl) !important;
}

.ps-l-2xl {
  padding-left: var(--space-l-2xl) !important;
}

.pe-3xs {
  padding-right: var(--space-3xs) !important;
}

.pe-2xs {
  padding-right: var(--space-2xs) !important;
}

.pe-xs {
  padding-right: var(--space-xs) !important;
}

.pe-s {
  padding-right: var(--space-s) !important;
}

.pe-m {
  padding-right: var(--space-m) !important;
}

.pe-l {
  padding-right: var(--space-l) !important;
}

.pe-xl {
  padding-right: var(--space-xl) !important;
}

.pe-2xl {
  padding-right: var(--space-2xl) !important;
}

.pe-3xl {
  padding-right: var(--space-3xl) !important;
}

.pe-1xs {
  padding-right: var(--space-1xs) !important;
}

.pe-2xs-xs {
  padding-right: var(--space-2xs-xs) !important;
}

.pe-xs-s {
  padding-right: var(--space-xs-s) !important;
}

.pe-s-m {
  padding-right: var(--space-s-m) !important;
}

.pe-m-l {
  padding-right: var(--space-m-l) !important;
}

.pe-l-xl {
  padding-right: var(--space-l-xl) !important;
}

.pe-xl-2xl {
  padding-right: var(--space-xl-2xl) !important;
}

.pe--1xl {
  padding-right: var(--space--1xl) !important;
}

.pe-s-l {
  padding-right: var(--space-s-l) !important;
}

.pe-m-xl {
  padding-right: var(--space-m-xl) !important;
}

.pe-l-2xl {
  padding-right: var(--space-l-2xl) !important;
}

.px-3xs {
  padding-left: var(--space-3xs) !important;
  padding-right: var(--space-3xs) !important;
}

.px-2xs {
  padding-left: var(--space-2xs) !important;
  padding-right: var(--space-2xs) !important;
}

.px-xs {
  padding-left: var(--space-xs) !important;
  padding-right: var(--space-xs) !important;
}

.px-s {
  padding-left: var(--space-s) !important;
  padding-right: var(--space-s) !important;
}

.px-m {
  padding-left: var(--space-m) !important;
  padding-right: var(--space-m) !important;
}

.px-l {
  padding-left: var(--space-l) !important;
  padding-right: var(--space-l) !important;
}

.px-xl {
  padding-left: var(--space-xl) !important;
  padding-right: var(--space-xl) !important;
}

.px-2xl {
  padding-left: var(--space-2xl) !important;
  padding-right: var(--space-2xl) !important;
}

.px-3xl {
  padding-left: var(--space-3xl) !important;
  padding-right: var(--space-3xl) !important;
}

.px-1xs {
  padding-left: var(--space-1xs) !important;
  padding-right: var(--space-1xs) !important;
}

.px-2xs-xs {
  padding-left: var(--space-2xs-xs) !important;
  padding-right: var(--space-2xs-xs) !important;
}

.px-xs-s {
  padding-left: var(--space-xs-s) !important;
  padding-right: var(--space-xs-s) !important;
}

.px-s-m {
  padding-left: var(--space-s-m) !important;
  padding-right: var(--space-s-m) !important;
}

.px-m-l {
  padding-left: var(--space-m-l) !important;
  padding-right: var(--space-m-l) !important;
}

.px-l-xl {
  padding-left: var(--space-l-xl) !important;
  padding-right: var(--space-l-xl) !important;
}

.px-xl-2xl {
  padding-left: var(--space-xl-2xl) !important;
  padding-right: var(--space-xl-2xl) !important;
}

.px--1xl {
  padding-left: var(--space--1xl) !important;
  padding-right: var(--space--1xl) !important;
}

.px-s-l {
  padding-left: var(--space-s-l) !important;
  padding-right: var(--space-s-l) !important;
}

.px-m-xl {
  padding-left: var(--space-m-xl) !important;
  padding-right: var(--space-m-xl) !important;
}

.px-l-2xl {
  padding-left: var(--space-l-2xl) !important;
  padding-right: var(--space-l-2xl) !important;
}

.py-3xs {
  padding-top: var(--space-3xs) !important;
  padding-bottom: var(--space-3xs) !important;
}

.py-2xs {
  padding-top: var(--space-2xs) !important;
  padding-bottom: var(--space-2xs) !important;
}

.py-xs {
  padding-top: var(--space-xs) !important;
  padding-bottom: var(--space-xs) !important;
}

.py-s {
  padding-top: var(--space-s) !important;
  padding-bottom: var(--space-s) !important;
}

.py-m {
  padding-top: var(--space-m) !important;
  padding-bottom: var(--space-m) !important;
}

.py-l {
  padding-top: var(--space-l) !important;
  padding-bottom: var(--space-l) !important;
}

.py-xl {
  padding-top: var(--space-xl) !important;
  padding-bottom: var(--space-xl) !important;
}

.py-2xl {
  padding-top: var(--space-2xl) !important;
  padding-bottom: var(--space-2xl) !important;
}

.py-3xl {
  padding-top: var(--space-3xl) !important;
  padding-bottom: var(--space-3xl) !important;
}

.py-1xs {
  padding-top: var(--space-1xs) !important;
  padding-bottom: var(--space-1xs) !important;
}

.py-2xs-xs {
  padding-top: var(--space-2xs-xs) !important;
  padding-bottom: var(--space-2xs-xs) !important;
}

.py-xs-s {
  padding-top: var(--space-xs-s) !important;
  padding-bottom: var(--space-xs-s) !important;
}

.py-s-m {
  padding-top: var(--space-s-m) !important;
  padding-bottom: var(--space-s-m) !important;
}

.py-m-l {
  padding-top: var(--space-m-l) !important;
  padding-bottom: var(--space-m-l) !important;
}

.py-l-xl {
  padding-top: var(--space-l-xl) !important;
  padding-bottom: var(--space-l-xl) !important;
}

.py-xl-2xl {
  padding-top: var(--space-xl-2xl) !important;
  padding-bottom: var(--space-xl-2xl) !important;
}

.py--1xl {
  padding-top: var(--space--1xl) !important;
  padding-bottom: var(--space--1xl) !important;
}

.py-s-l {
  padding-top: var(--space-s-l) !important;
  padding-bottom: var(--space-s-l) !important;
}

.py-m-xl {
  padding-top: var(--space-m-xl) !important;
  padding-bottom: var(--space-m-xl) !important;
}

.py-l-2xl {
  padding-top: var(--space-l-2xl) !important;
  padding-bottom: var(--space-l-2xl) !important;
}