liser/src/modules/spacing.css

functional css help to optimizing design work and building responsive websites

/* Variables */

:root {
  --spacing-none: 0;
  --spacing-extra-small: .25rem;
  --spacing-small: .5rem;
  --spacing-medium: 1rem;
  --spacing-large: 2rem;
  --spacing-extra-large: 4rem;
  --spacing-extra-extra-large: 8rem;
  --spacing-extra-extra-extra-large: 16rem;
}

/*

   An eight step powers of two scale ranging from 0 to 16rem.

   Base:
     p = padding
     m = margin

   Modifiers:
     a = all
     h = horizontal
     v = vertical
     t = top
     r = right
     b = bottom
     l = left

     0 = none
     1 = 1st step in spacing scale
     2 = 2nd step in spacing scale
     3 = 3rd step in spacing scale
     4 = 4th step in spacing scale
     5 = 5th step in spacing scale
     6 = 6th step in spacing scale
     7 = 7th step in spacing scale

   Media Query Extensions:
     -ns = not-small
     -m  = medium       -ml = mobile landscape
     -l  = large

*/


.pa0 { padding: var(--spacing-none); }
.pa0s { padding: calc(var(--spacing-extra-small) - (var(--spacing-extra-small) - var(--spacing-none)) / 2); }
.pa1 { padding: var(--spacing-extra-small); }
.pa1s { padding: calc(var(--spacing-small) - (var(--spacing-small) - var(--spacing-extra-small)) / 2); }
.pa2 { padding: var(--spacing-small); }
.pa2s { padding: calc(var(--spacing-medium) - (var(--spacing-medium) - var(--spacing-small)) / 2); }
.pa3 { padding: var(--spacing-medium); }
.pa3s { padding: calc(var(--spacing-large) - (var(--spacing-large) - var(--spacing-medium)) / 2); }
.pa4 { padding: var(--spacing-large); }
.pa4s { padding: calc(var(--spacing-extra-large) - (var(--spacing-extra-large) - var(--spacing-large)) / 2); }
.pa5 { padding: var(--spacing-extra-large); }
.pa5s { padding: calc(var(--spacing-extra-extra-large) - (var(--spacing-extra-extra-large) - var(--spacing-extra-large)) / 2); }
.pa6 { padding: var(--spacing-extra-extra-large); }
.pa6s { padding: calc(var(--spacing-extra-extra-extra-large) - (var(--spacing-extra-extra-extra-large) - var(--spacing-extra-extra-large)) / 2); }
.pa7 { padding: var(--spacing-extra-extra-extra-large); }

.pl0 { padding-left: var(--spacing-none); }
.pl0s { padding-left: calc(var(--spacing-extra-small) - (var(--spacing-extra-small) - var(--spacing-none)) / 2); }
.pl1 { padding-left: var(--spacing-extra-small); }
.pl1s { padding-left: calc(var(--spacing-small) - (var(--spacing-small) - var(--spacing-extra-small)) / 2); }
.pl2 { padding-left: var(--spacing-small); }
.pl2s { padding-left: calc(var(--spacing-medium) - (var(--spacing-medium) - var(--spacing-small)) / 2); }
.pl3 { padding-left: var(--spacing-medium); }
.pl3s { padding-left: calc(var(--spacing-large) - (var(--spacing-large) - var(--spacing-medium)) / 2); }
.pl4 { padding-left: var(--spacing-large); }
.pl4s { padding-left: calc(var(--spacing-extra-large) - (var(--spacing-extra-large) - var(--spacing-large)) / 2); }
.pl5 { padding-left: var(--spacing-extra-large); }
.pl5s { padding-left: calc(var(--spacing-extra-extra-large) - (var(--spacing-extra-extra-large) - var(--spacing-extra-large)) / 2); }
.pl6 { padding-left: var(--spacing-extra-extra-large); }
.pl6s { padding-left: calc(var(--spacing-extra-extra-extra-large) - (var(--spacing-extra-extra-extra-large) - var(--spacing-extra-extra-large)) / 2); }
.pl7 { padding-left: var(--spacing-extra-extra-extra-large); }

.pr0 { padding-right: var(--spacing-none); }
.pr0s { padding-right: calc(var(--spacing-extra-small) - (var(--spacing-extra-small) - var(--spacing-none)) / 2); }
.pr1 { padding-right: var(--spacing-extra-small); }
.pr1s { padding-right: calc(var(--spacing-small) - (var(--spacing-small) - var(--spacing-extra-small)) / 2); }
.pr2 { padding-right: var(--spacing-small); }
.pr2s { padding-right: calc(var(--spacing-medium) - (var(--spacing-medium) - var(--spacing-small)) / 2); }
.pr3 { padding-right: var(--spacing-medium); }
.pr3s { padding-right: calc(var(--spacing-large) - (var(--spacing-large) - var(--spacing-medium)) / 2); }
.pr4 { padding-right: var(--spacing-large); }
.pr4s { padding-right: calc(var(--spacing-extra-large) - (var(--spacing-extra-large) - var(--spacing-large)) / 2); }
.pr5 { padding-right: var(--spacing-extra-large); }
.pr5s { padding-right: calc(var(--spacing-extra-extra-large) - (var(--spacing-extra-extra-large) - var(--spacing-extra-large)) / 2); }
.pr6 { padding-right: var(--spacing-extra-extra-large); }
.pr6s { padding-right: calc(var(--spacing-extra-extra-extra-large) - (var(--spacing-extra-extra-extra-large) - var(--spacing-extra-extra-large)) / 2); }
.pr7 { padding-right: var(--spacing-extra-extra-extra-large); }

.pb0 { padding-bottom: var(--spacing-none); }
.pb0s { padding-bottom: calc(var(--spacing-extra-small) - (var(--spacing-extra-small) - var(--spacing-none)) / 2); }
.pb1 { padding-bottom: var(--spacing-extra-small); }
.pb1s { padding-bottom: calc(var(--spacing-small) - (var(--spacing-small) - var(--spacing-extra-small)) / 2); }
.pb2 { padding-bottom: var(--spacing-small); }
.pb2s { padding-bottom: calc(var(--spacing-medium) - (var(--spacing-medium) - var(--spacing-small)) / 2); }
.pb3 { padding-bottom: var(--spacing-medium); }
.pb3s { padding-bottom: calc(var(--spacing-large) - (var(--spacing-large) - var(--spacing-medium)) / 2); }
.pb4 { padding-bottom: var(--spacing-large); }
.pb4s { padding-bottom: calc(var(--spacing-extra-large) - (var(--spacing-extra-large) - var(--spacing-large)) / 2); }
.pb5 { padding-bottom: var(--spacing-extra-large); }
.pb5s { padding-bottom: calc(var(--spacing-extra-extra-large) - (var(--spacing-extra-extra-large) - var(--spacing-extra-large)) / 2); }
.pb6 { padding-bottom: var(--spacing-extra-extra-large); }
.pb6s { padding-bottom: calc(var(--spacing-extra-extra-extra-large) - (var(--spacing-extra-extra-extra-large) - var(--spacing-extra-extra-large)) / 2); }
.pb7 { padding-bottom: var(--spacing-extra-extra-extra-large); }

.pt0 { padding-top: var(--spacing-none); }
.pt0s { padding-top: calc(var(--spacing-extra-small) - (var(--spacing-extra-small) - var(--spacing-none)) / 2); }
.pt1 { padding-top: var(--spacing-extra-small); }
.pt1s { padding-top: calc(var(--spacing-small) - (var(--spacing-small) - var(--spacing-extra-small)) / 2); }
.pt2 { padding-top: var(--spacing-small); }
.pt2s { padding-top: calc(var(--spacing-medium) - (var(--spacing-medium) - var(--spacing-small)) / 2); }
.pt3 { padding-top: var(--spacing-medium); }
.pt3s { padding-top: calc(var(--spacing-large) - (var(--spacing-large) - var(--spacing-medium)) / 2); }
.pt4 { padding-top: var(--spacing-large); }
.pt4s { padding-top: calc(var(--spacing-extra-large) - (var(--spacing-extra-large) - var(--spacing-large)) / 2); }
.pt5 { padding-top: var(--spacing-extra-large); }
.pt5s { padding-top: calc(var(--spacing-extra-extra-large) - (var(--spacing-extra-extra-large) - var(--spacing-extra-large)) / 2); }
.pt6 { padding-top: var(--spacing-extra-extra-large); }
.pt6s { padding-top: calc(var(--spacing-extra-extra-extra-large) - (var(--spacing-extra-extra-extra-large) - var(--spacing-extra-extra-large)) / 2); }
.pt7 { padding-top: var(--spacing-extra-extra-extra-large); }

.pv0 {
  padding-top: var(--spacing-none);
  padding-bottom: var(--spacing-none);
}
.pv0s {
  padding-top: calc(var(--spacing-extra-small) - (var(--spacing-extra-small) - var(--spacing-none)) / 2);
  padding-bottom: calc(var(--spacing-extra-small) - (var(--spacing-extra-small) - var(--spacing-none)) / 2);
}
.pv1 {
  padding-top: var(--spacing-extra-small);
  padding-bottom: var(--spacing-extra-small);
}
.pv1s {
  padding-top: calc(var(--spacing-small) - (var(--spacing-small) - var(--spacing-extra-small)) / 2);
  padding-bottom: calc(var(--spacing-small) - (var(--spacing-small) - var(--spacing-extra-small)) / 2);
}
.pv2 {
  padding-top: var(--spacing-small);
  padding-bottom: var(--spacing-small);
}
.pv2s {
  padding-top: calc(var(--spacing-medium) - (var(--spacing-medium) - var(--spacing-small)) / 2);
  padding-bottom: calc(var(--spacing-medium) - (var(--spacing-medium) - var(--spacing-small)) / 2);
}
.pv3 {
  padding-top: var(--spacing-medium);
  padding-bottom: var(--spacing-medium);
}
.pv3s {
  padding-top: calc(var(--spacing-large) - (var(--spacing-large) - var(--spacing-medium)) / 2);
  padding-bottom: calc(var(--spacing-large) - (var(--spacing-large) - var(--spacing-medium)) / 2);
}
.pv4 {
  padding-top: var(--spacing-large);
  padding-bottom: var(--spacing-large);
}
.pv4s {
  padding-top: calc(var(--spacing-extra-large) - (var(--spacing-extra-large) - var(--spacing-large)) / 2);
  padding-bottom: calc(var(--spacing-extra-large) - (var(--spacing-extra-large) - var(--spacing-large)) / 2);
}
.pv5 {
  padding-top: var(--spacing-extra-large);
  padding-bottom: var(--spacing-extra-large);
}
.pv5s {
  padding-top: calc(var(--spacing-extra-extra-large) - (var(--spacing-extra-extra-large) - var(--spacing-extra-large)) / 2);
  padding-bottom: calc(var(--spacing-extra-extra-large) - (var(--spacing-extra-extra-large) - var(--spacing-extra-large)) / 2);
}
.pv6 {
  padding-top: var(--spacing-extra-extra-large);
  padding-bottom: var(--spacing-extra-extra-large);
}
.pv6s {
  padding-top: calc(var(--spacing-extra-extra-extra-large) - (var(--spacing-extra-extra-extra-large) - var(--spacing-extra-extra-large)) / 2);
  padding-bottom: calc(var(--spacing-extra-extra-extra-large) - (var(--spacing-extra-extra-extra-large) - var(--spacing-extra-extra-large)) / 2);
}
.pv7 {
  padding-top: var(--spacing-extra-extra-extra-large);
  padding-bottom: var(--spacing-extra-extra-extra-large);
}

.ph0 {
  padding-left: var(--spacing-none);
  padding-right: var(--spacing-none);
}
.ph0s {
  padding-left: calc(var(--spacing-extra-small) - (var(--spacing-extra-small) - var(--spacing-none)) / 2);
  padding-right: calc(var(--spacing-extra-small) - (var(--spacing-extra-small) - var(--spacing-none)) / 2);
}
.ph1 {
  padding-left: var(--spacing-extra-small);
  padding-right: var(--spacing-extra-small);
}
.ph1s {
  padding-left: calc(var(--spacing-small) - (var(--spacing-small) - var(--spacing-extra-small)) / 2);
  padding-right: calc(var(--spacing-small) - (var(--spacing-small) - var(--spacing-extra-small)) / 2);
}
.ph2 {
  padding-left: var(--spacing-small);
  padding-right: var(--spacing-small);
}
.ph2s {
  padding-left: calc(var(--spacing-medium) - (var(--spacing-medium) - var(--spacing-small)) / 2);
  padding-right: calc(var(--spacing-medium) - (var(--spacing-medium) - var(--spacing-small)) / 2);
}
.ph3 {
  padding-left: var(--spacing-medium);
  padding-right: var(--spacing-medium);
}
.ph3s {
  padding-left: calc(var(--spacing-large) - (var(--spacing-large) - var(--spacing-medium)) / 2);
  padding-right: calc(var(--spacing-large) - (var(--spacing-large) - var(--spacing-medium)) / 2);
}
.ph4 {
  padding-left: var(--spacing-large);
  padding-right: var(--spacing-large);
}
.ph4s {
  padding-left: calc(var(--spacing-extra-large) - (var(--spacing-extra-large) - var(--spacing-large)) / 2);
  padding-right: calc(var(--spacing-extra-large) - (var(--spacing-extra-large) - var(--spacing-large)) / 2);
}
.ph5 {
  padding-left: var(--spacing-extra-large);
  padding-right: var(--spacing-extra-large);
}
.ph5s {
  padding-left: calc(var(--spacing-extra-extra-large) - (var(--spacing-extra-extra-large) - var(--spacing-extra-large)) / 2);
  padding-right: calc(var(--spacing-extra-extra-large) - (var(--spacing-extra-extra-large) - var(--spacing-extra-large)) / 2);
}
.ph6 {
  padding-left: var(--spacing-extra-extra-large);
  padding-right: var(--spacing-extra-extra-large);
}
.ph6s {
  padding-left: calc(var(--spacing-extra-extra-extra-large) - (var(--spacing-extra-extra-extra-large) - var(--spacing-extra-extra-large)) / 2);
  padding-right: calc(var(--spacing-extra-extra-extra-large) - (var(--spacing-extra-extra-extra-large) - var(--spacing-extra-extra-large)) / 2);
}

.ph7 {
  padding-left: var(--spacing-extra-extra-extra-large);
  padding-right: var(--spacing-extra-extra-extra-large);
}

.ma0 { margin: var(--spacing-none); }
.ma0s { margin: calc(var(--spacing-extra-small) - (var(--spacing-extra-small) - var(--spacing-none)) / 2); }
.ma1 { margin: var(--spacing-extra-small); }
.ma1s { margin: calc(var(--spacing-small) - (var(--spacing-small) - var(--spacing-extra-small)) / 2); }
.ma2 { margin: var(--spacing-small); }
.ma2s { margin: calc(var(--spacing-medium) - (var(--spacing-medium) - var(--spacing-small)) / 2); }
.ma3 { margin: var(--spacing-medium); }
.ma3s { margin: calc(var(--spacing-large) - (var(--spacing-large) - var(--spacing-medium)) / 2); }
.ma4 { margin: var(--spacing-large); }
.ma4s { margin: calc(var(--spacing-extra-large) - (var(--spacing-extra-large) - var(--spacing-large)) / 2); }
.ma5 { margin: var(--spacing-extra-large); }
.ma5s { margin: calc(var(--spacing-extra-extra-large) - (var(--spacing-extra-extra-large) - var(--spacing-extra-large)) / 2); }
.ma6 { margin: var(--spacing-extra-extra-large); }
.ma6s { margin: calc(var(--spacing-extra-extra-extra-large) - (var(--spacing-extra-extra-extra-large) - var(--spacing-extra-extra-large)) / 2); }
.ma7 { margin: var(--spacing-extra-extra-extra-large); }

.ml0 { margin-left: var(--spacing-none); }
.ml0s { margin-left: calc(var(--spacing-extra-small) - (var(--spacing-extra-small) - var(--spacing-none)) / 2); }
.ml1 { margin-left: var(--spacing-extra-small); }
.ml1s { margin-left: calc(var(--spacing-small) - (var(--spacing-small) - var(--spacing-extra-small)) / 2); }
.ml2 { margin-left: var(--spacing-small); }
.ml2s { margin-left: calc(var(--spacing-medium) - (var(--spacing-medium) - var(--spacing-small)) / 2); }
.ml3 { margin-left: var(--spacing-medium); }
.ml3s { margin-left: calc(var(--spacing-large) - (var(--spacing-large) - var(--spacing-medium)) / 2); }
.ml4 { margin-left: var(--spacing-large); }
.ml4s { margin-left: calc(var(--spacing-extra-large) - (var(--spacing-extra-large) - var(--spacing-large)) / 2); }
.ml5 { margin-left: var(--spacing-extra-large); }
.ml5s { margin-left: calc(var(--spacing-extra-extra-large) - (var(--spacing-extra-extra-large) - var(--spacing-extra-large)) / 2); }
.ml6 { margin-left: var(--spacing-extra-extra-large); }
.ml6s { margin-left: calc(var(--spacing-extra-extra-extra-large) - (var(--spacing-extra-extra-extra-large) - var(--spacing-extra-extra-large)) / 2); }
.ml7 { margin-left: var(--spacing-extra-extra-extra-large); }

.mr0 { margin-right: var(--spacing-none); }
.mr0s { margin-right: calc(var(--spacing-extra-small) - (var(--spacing-extra-small) - var(--spacing-none)) / 2); }
.mr1 { margin-right: var(--spacing-extra-small); }
.mr1s { margin-right: calc(var(--spacing-small) - (var(--spacing-small) - var(--spacing-extra-small)) / 2); }
.mr2 { margin-right: var(--spacing-small); }
.mr2s { margin-right: calc(var(--spacing-medium) - (var(--spacing-medium) - var(--spacing-small)) / 2); }
.mr3 { margin-right: var(--spacing-medium); }
.mr3s { margin-right: calc(var(--spacing-large) - (var(--spacing-large) - var(--spacing-medium)) / 2); }
.mr4 { margin-right: var(--spacing-large); }
.mr4s { margin-right: calc(var(--spacing-extra-large) - (var(--spacing-extra-large) - var(--spacing-large)) / 2); }
.mr5 { margin-right: var(--spacing-extra-large); }
.mr5s { margin-right: calc(var(--spacing-extra-extra-large) - (var(--spacing-extra-extra-large) - var(--spacing-extra-large)) / 2); }
.mr6 { margin-right: var(--spacing-extra-extra-large); }
.mr6s { margin-right: calc(var(--spacing-extra-extra-extra-large) - (var(--spacing-extra-extra-extra-large) - var(--spacing-extra-extra-large)) / 2); }
.mr7 { margin-right: var(--spacing-extra-extra-extra-large); }

.mb0 { margin-bottom: var(--spacing-none); }
.mb0s { margin-bottom: calc(var(--spacing-extra-small) - (var(--spacing-extra-small) - var(--spacing-none)) / 2); }
.mb1 { margin-bottom: var(--spacing-extra-small); }
.mb1s { margin-bottom: calc(var(--spacing-small) - (var(--spacing-small) - var(--spacing-extra-small)) / 2); }
.mb2 { margin-bottom: var(--spacing-small); }
.mb2s { margin-bottom: calc(var(--spacing-medium) - (var(--spacing-medium) - var(--spacing-small)) / 2); }
.mb3 { margin-bottom: var(--spacing-medium); }
.mb3s { margin-bottom: calc(var(--spacing-large) - (var(--spacing-large) - var(--spacing-medium)) / 2); }
.mb4 { margin-bottom: var(--spacing-large); }
.mb4s { margin-bottom: calc(var(--spacing-extra-large) - (var(--spacing-extra-large) - var(--spacing-large)) / 2); }
.mb5 { margin-bottom: var(--spacing-extra-large); }
.mb5s { margin-bottom: calc(var(--spacing-extra-extra-large) - (var(--spacing-extra-extra-large) - var(--spacing-extra-large)) / 2); }
.mb6 { margin-bottom: var(--spacing-extra-extra-large); }
.mb6s { margin-bottom: calc(var(--spacing-extra-extra-extra-large) - (var(--spacing-extra-extra-extra-large) - var(--spacing-extra-extra-large)) / 2); }
.mb7 { margin-bottom: var(--spacing-extra-extra-extra-large); }

.mt0 { margin-top: var(--spacing-none); }
.mt0s { margin-top: calc(var(--spacing-extra-small) - (var(--spacing-extra-small) - var(--spacing-none)) / 2); }
.mt1 { margin-top: var(--spacing-extra-small); }
.mt1s { margin-top: calc(var(--spacing-small) - (var(--spacing-small) - var(--spacing-extra-small)) / 2); }
.mt2 { margin-top: var(--spacing-small); }
.mt2s { margin-top: calc(var(--spacing-medium) - (var(--spacing-medium) - var(--spacing-small)) / 2); }
.mt3 { margin-top: var(--spacing-medium); }
.mt3s { margin-top: calc(var(--spacing-large) - (var(--spacing-large) - var(--spacing-medium)) / 2); }
.mt4 { margin-top: var(--spacing-large); }
.mt4s { margin-top: calc(var(--spacing-extra-large) - (var(--spacing-extra-large) - var(--spacing-large)) / 2); }
.mt5 { margin-top: var(--spacing-extra-large); }
.mt5s { margin-top: calc(var(--spacing-extra-extra-large) - (var(--spacing-extra-extra-large) - var(--spacing-extra-large)) / 2); }
.mt6 { margin-top: var(--spacing-extra-extra-large); }
.mt6s { margin-top: calc(var(--spacing-extra-extra-extra-large) - (var(--spacing-extra-extra-extra-large) - var(--spacing-extra-extra-large)) / 2); }
.mt7 { margin-top: var(--spacing-extra-extra-extra-large); }

.mv0 {
  margin-top: var(--spacing-none);
  margin-bottom: var(--spacing-none);
}
.mv0s {
  margin-top: calc(var(--spacing-extra-small) - (var(--spacing-extra-small) - var(--spacing-none)) / 2);
  margin-bottom: calc(var(--spacing-extra-small) - (var(--spacing-extra-small) - var(--spacing-none)) / 2);
}
.mv1 {
  margin-top: var(--spacing-extra-small);
  margin-bottom: var(--spacing-extra-small);
}
.mv1s {
  margin-top: calc(var(--spacing-small) - (var(--spacing-small) - var(--spacing-extra-small)) / 2);
  margin-bottom: calc(var(--spacing-small) - (var(--spacing-small) - var(--spacing-extra-small)) / 2);
}
.mv2 {
  margin-top: var(--spacing-small);
  margin-bottom: var(--spacing-small);
}
.mv2s {
  margin-top: calc(var(--spacing-medium) - (var(--spacing-medium) - var(--spacing-small)) / 2);
  margin-bottom: calc(var(--spacing-medium) - (var(--spacing-medium) - var(--spacing-small)) / 2);
}
.mv3 {
  margin-top: var(--spacing-medium);
  margin-bottom: var(--spacing-medium);
}
.mv3s {
  margin-top: calc(var(--spacing-large) - (var(--spacing-large) - var(--spacing-medium)) / 2);
  margin-bottom: calc(var(--spacing-large) - (var(--spacing-large) - var(--spacing-medium)) / 2);
}
.mv4 {
  margin-top: var(--spacing-large);
  margin-bottom: var(--spacing-large);
}
.mv4s {
  margin-top: calc(var(--spacing-extra-large) - (var(--spacing-extra-large) - var(--spacing-large)) / 2);
  margin-bottom: calc(var(--spacing-extra-large) - (var(--spacing-extra-large) - var(--spacing-large)) / 2);
}
.mv5 {
  margin-top: var(--spacing-extra-large);
  margin-bottom: var(--spacing-extra-large);
}
.mv5s {
  margin-top: calc(var(--spacing-extra-extra-large) - (var(--spacing-extra-extra-large) - var(--spacing-extra-large)) / 2);
  margin-bottom: calc(var(--spacing-extra-extra-large) - (var(--spacing-extra-extra-large) - var(--spacing-extra-large)) / 2);
}
.mv6 {
  margin-top: var(--spacing-extra-extra-large);
  margin-bottom: var(--spacing-extra-extra-large);
}
.mv6s {
  margin-top: calc(var(--spacing-extra-extra-extra-large) - (var(--spacing-extra-extra-extra-large) - var(--spacing-extra-extra-large)) / 2);
  margin-bottom: calc(var(--spacing-extra-extra-extra-large) - (var(--spacing-extra-extra-extra-large) - var(--spacing-extra-extra-large)) / 2);
}
.mv7 {
  margin-top: var(--spacing-extra-extra-extra-large);
  margin-bottom: var(--spacing-extra-extra-extra-large);
}

.mh0 {
  margin-left: var(--spacing-none);
  margin-right: var(--spacing-none);
}
.mh0s {
  margin-left: calc(var(--spacing-extra-small) - (var(--spacing-extra-small) - var(--spacing-none)) / 2);
  margin-right: calc(var(--spacing-extra-small) - (var(--spacing-extra-small) - var(--spacing-none)) / 2);
}
.mh1 {
  margin-left: var(--spacing-extra-small);
  margin-right: var(--spacing-extra-small);
}
.mh1s {
  margin-left: calc(var(--spacing-small) - (var(--spacing-small) - var(--spacing-extra-small)) / 2);
  margin-right: calc(var(--spacing-small) - (var(--spacing-small) - var(--spacing-extra-small)) / 2);
}
.mh2 {
  margin-left: var(--spacing-small);
  margin-right: var(--spacing-small);
}
.mh2s {
  margin-left: calc(var(--spacing-medium) - (var(--spacing-medium) - var(--spacing-small)) / 2);
  margin-right: calc(var(--spacing-medium) - (var(--spacing-medium) - var(--spacing-small)) / 2);
}
.mh3 {
  margin-left: var(--spacing-medium);
  margin-right: var(--spacing-medium);
}
.mh3s {
  margin-left: calc(var(--spacing-large) - (var(--spacing-large) - var(--spacing-medium)) / 2);
  margin-right: calc(var(--spacing-large) - (var(--spacing-large) - var(--spacing-medium)) / 2);
}
.mh4 {
  margin-left: var(--spacing-large);
  margin-right: var(--spacing-large);
}
.mh4s {
  margin-left: calc(var(--spacing-extra-large) - (var(--spacing-extra-large) - var(--spacing-large)) / 2);
  margin-right: calc(var(--spacing-extra-large) - (var(--spacing-extra-large) - var(--spacing-large)) / 2);
}
.mh5 {
  margin-left: var(--spacing-extra-large);
  margin-right: var(--spacing-extra-large);
}
.mh5s {
  margin-left: calc(var(--spacing-extra-extra-large) - (var(--spacing-extra-extra-large) - var(--spacing-extra-large)) / 2);
  margin-right: calc(var(--spacing-extra-extra-large) - (var(--spacing-extra-extra-large) - var(--spacing-extra-large)) / 2);
}
.mh6 {
  margin-left: var(--spacing-extra-extra-large);
  margin-right: var(--spacing-extra-extra-large);
}
.mh6s {
  margin-left: calc(var(--spacing-extra-extra-extra-large) - (var(--spacing-extra-extra-extra-large) - var(--spacing-extra-extra-large)) / 2);
  margin-right: calc(var(--spacing-extra-extra-extra-large) - (var(--spacing-extra-extra-extra-large) - var(--spacing-extra-extra-large)) / 2);
}

.mh7 {
  margin-left: var(--spacing-extra-extra-extra-large);
  margin-right: var(--spacing-extra-extra-extra-large);
}

@media screen and (min-width: 30em) {
  .pa0-ns { padding: var(--spacing-none); }
  .pa0s-ns { padding: calc(var(--spacing-extra-small) - (var(--spacing-extra-small) - var(--spacing-none)) / 2); }
  .pa1-ns { padding: var(--spacing-extra-small); }
  .pa1s-ns { padding: calc(var(--spacing-small) - (var(--spacing-small) - var(--spacing-extra-small)) / 2); }
  .pa2-ns { padding: var(--spacing-small); }
  .pa2s-ns { padding: calc(var(--spacing-medium) - (var(--spacing-medium) - var(--spacing-small)) / 2); }
  .pa3-ns { padding: var(--spacing-medium); }
  .pa3s-ns { padding: calc(var(--spacing-large) - (var(--spacing-large) - var(--spacing-medium)) / 2); }
  .pa4-ns { padding: var(--spacing-large); }
  .pa4s-ns { padding: calc(var(--spacing-extra-large) - (var(--spacing-extra-large) - var(--spacing-large)) / 2); }
  .pa5-ns { padding: var(--spacing-extra-large); }
  .pa5s-ns { padding: calc(var(--spacing-extra-extra-large) - (var(--spacing-extra-extra-large) - var(--spacing-extra-large)) / 2); }
  .pa6-ns { padding: var(--spacing-extra-extra-large); }
  .pa6s-ns { padding: calc(var(--spacing-extra-extra-extra-large) - (var(--spacing-extra-extra-extra-large) - var(--spacing-extra-extra-large)) / 2); }
  .pa7-ns { padding: var(--spacing-extra-extra-extra-large); }

  .pl0-ns { padding-left: var(--spacing-none); }
  .pl0s-ns { padding-left: calc(var(--spacing-extra-small) - (var(--spacing-extra-small) - var(--spacing-none)) / 2); }
  .pl1-ns { padding-left: var(--spacing-extra-small); }
  .pl1s-ns { padding-left: calc(var(--spacing-small) - (var(--spacing-small) - var(--spacing-extra-small)) / 2); }
  .pl2-ns { padding-left: var(--spacing-small); }
  .pl2s-ns { padding-left: calc(var(--spacing-medium) - (var(--spacing-medium) - var(--spacing-small)) / 2); }
  .pl3-ns { padding-left: var(--spacing-medium); }
  .pl3s-ns { padding-left: calc(var(--spacing-large) - (var(--spacing-large) - var(--spacing-medium)) / 2); }
  .pl4-ns { padding-left: var(--spacing-large); }
  .pl4s-ns { padding-left: calc(var(--spacing-extra-large) - (var(--spacing-extra-large) - var(--spacing-large)) / 2); }
  .pl5-ns { padding-left: var(--spacing-extra-large); }
  .pl5s-ns { padding-left: calc(var(--spacing-extra-extra-large) - (var(--spacing-extra-extra-large) - var(--spacing-extra-large)) / 2); }
  .pl6-ns { padding-left: var(--spacing-extra-extra-large); }
  .pl6s-ns { padding-left: calc(var(--spacing-extra-extra-extra-large) - (var(--spacing-extra-extra-extra-large) - var(--spacing-extra-extra-large)) / 2); }
  .pl7-ns { padding-left: var(--spacing-extra-extra-extra-large); }

  .pr0-ns { padding-right: var(--spacing-none); }
  .pr0s-ns { padding-right: calc(var(--spacing-extra-small) - (var(--spacing-extra-small) - var(--spacing-none)) / 2); }
  .pr1-ns { padding-right: var(--spacing-extra-small); }
  .pr1s-ns { padding-right: calc(var(--spacing-small) - (var(--spacing-small) - var(--spacing-extra-small)) / 2); }
  .pr2-ns { padding-right: var(--spacing-small); }
  .pr2s-ns { padding-right: calc(var(--spacing-medium) - (var(--spacing-medium) - var(--spacing-small)) / 2); }
  .pr3-ns { padding-right: var(--spacing-medium); }
  .pr3s-ns { padding-right: calc(var(--spacing-large) - (var(--spacing-large) - var(--spacing-medium)) / 2); }
  .pr4-ns { padding-right: var(--spacing-large); }
  .pr4s-ns { padding-right: calc(var(--spacing-extra-large) - (var(--spacing-extra-large) - var(--spacing-large)) / 2); }
  .pr5-ns { padding-right: var(--spacing-extra-large); }
  .pr5s-ns { padding-right: calc(var(--spacing-extra-extra-large) - (var(--spacing-extra-extra-large) - var(--spacing-extra-large)) / 2); }
  .pr6-ns { padding-right: var(--spacing-extra-extra-large); }
  .pr6s-ns { padding-right: calc(var(--spacing-extra-extra-extra-large) - (var(--spacing-extra-extra-extra-large) - var(--spacing-extra-extra-large)) / 2); }
  .pr7-ns { padding-right: var(--spacing-extra-extra-extra-large); }

  .pb0-ns { padding-bottom: var(--spacing-none); }
  .pb0s-ns { padding-bottom: calc(var(--spacing-extra-small) - (var(--spacing-extra-small) - var(--spacing-none)) / 2); }
  .pb1-ns { padding-bottom: var(--spacing-extra-small); }
  .pb1s-ns { padding-bottom: calc(var(--spacing-small) - (var(--spacing-small) - var(--spacing-extra-small)) / 2); }
  .pb2-ns { padding-bottom: var(--spacing-small); }
  .pb2s-ns { padding-bottom: calc(var(--spacing-medium) - (var(--spacing-medium) - var(--spacing-small)) / 2); }
  .pb3-ns { padding-bottom: var(--spacing-medium); }
  .pb3s-ns { padding-bottom: calc(var(--spacing-large) - (var(--spacing-large) - var(--spacing-medium)) / 2); }
  .pb4-ns { padding-bottom: var(--spacing-large); }
  .pb4s-ns { padding-bottom: calc(var(--spacing-extra-large) - (var(--spacing-extra-large) - var(--spacing-large)) / 2); }
  .pb5-ns { padding-bottom: var(--spacing-extra-large); }
  .pb5s-ns { padding-bottom: calc(var(--spacing-extra-extra-large) - (var(--spacing-extra-extra-large) - var(--spacing-extra-large)) / 2); }
  .pb6-ns { padding-bottom: var(--spacing-extra-extra-large); }
  .pb6s-ns { padding-bottom: calc(var(--spacing-extra-extra-extra-large) - (var(--spacing-extra-extra-extra-large) - var(--spacing-extra-extra-large)) / 2); }
  .pb7-ns { padding-bottom: var(--spacing-extra-extra-extra-large); }

  .pt0-ns { padding-top: var(--spacing-none); }
  .pt0s-ns { padding-top: calc(var(--spacing-extra-small) - (var(--spacing-extra-small) - var(--spacing-none)) / 2); }
  .pt1-ns { padding-top: var(--spacing-extra-small); }
  .pt1s-ns { padding-top: calc(var(--spacing-small) - (var(--spacing-small) - var(--spacing-extra-small)) / 2); }
  .pt2-ns { padding-top: var(--spacing-small); }
  .pt2s-ns { padding-top: calc(var(--spacing-medium) - (var(--spacing-medium) - var(--spacing-small)) / 2); }
  .pt3-ns { padding-top: var(--spacing-medium); }
  .pt3s-ns { padding-top: calc(var(--spacing-large) - (var(--spacing-large) - var(--spacing-medium)) / 2); }
  .pt4-ns { padding-top: var(--spacing-large); }
  .pt4s-ns { padding-top: calc(var(--spacing-extra-large) - (var(--spacing-extra-large) - var(--spacing-large)) / 2); }
  .pt5-ns { padding-top: var(--spacing-extra-large); }
  .pt5s-ns { padding-top: calc(var(--spacing-extra-extra-large) - (var(--spacing-extra-extra-large) - var(--spacing-extra-large)) / 2); }
  .pt6-ns { padding-top: var(--spacing-extra-extra-large); }
  .pt6s-ns { padding-top: calc(var(--spacing-extra-extra-extra-large) - (var(--spacing-extra-extra-extra-large) - var(--spacing-extra-extra-large)) / 2); }
  .pt7-ns { padding-top: var(--spacing-extra-extra-extra-large); }

  .pv0-ns {
    padding-top: var(--spacing-none);
    padding-bottom: var(--spacing-none);
  }
  .pv0s-ns {
    padding-top: calc(var(--spacing-extra-small) - (var(--spacing-extra-small) - var(--spacing-none)) / 2);
    padding-bottom: calc(var(--spacing-extra-small) - (var(--spacing-extra-small) - var(--spacing-none)) / 2);
  }
  .pv1-ns {
    padding-top: var(--spacing-extra-small);
    padding-bottom: var(--spacing-extra-small);
  }
  .pv1s-ns {
    padding-top: calc(var(--spacing-small) - (var(--spacing-small) - var(--spacing-extra-small)) / 2);
    padding-bottom: calc(var(--spacing-small) - (var(--spacing-small) - var(--spacing-extra-small)) / 2);
  }
  .pv2-ns {
    padding-top: var(--spacing-small);
    padding-bottom: var(--spacing-small);
  }
  .pv2s-ns {
    padding-top: calc(var(--spacing-medium) - (var(--spacing-medium) - var(--spacing-small)) / 2);
    padding-bottom: calc(var(--spacing-medium) - (var(--spacing-medium) - var(--spacing-small)) / 2);
  }
  .pv3-ns {
    padding-top: var(--spacing-medium);
    padding-bottom: var(--spacing-medium);
  }
  .pv3s-ns {
    padding-top: calc(var(--spacing-large) - (var(--spacing-large) - var(--spacing-medium)) / 2);
    padding-bottom: calc(var(--spacing-large) - (var(--spacing-large) - var(--spacing-medium)) / 2);
  }
  .pv4-ns {
    padding-top: var(--spacing-large);
    padding-bottom: var(--spacing-large);
  }
  .pv4s-ns {
    padding-top: calc(var(--spacing-extra-large) - (var(--spacing-extra-large) - var(--spacing-large)) / 2);
    padding-bottom: calc(var(--spacing-extra-large) - (var(--spacing-extra-large) - var(--spacing-large)) / 2);
  }
  .pv5-ns {
    padding-top: var(--spacing-extra-large);
    padding-bottom: var(--spacing-extra-large);
  }
  .pv5s-ns {
    padding-top: calc(var(--spacing-extra-extra-large) - (var(--spacing-extra-extra-large) - var(--spacing-extra-large)) / 2);
    padding-bottom: calc(var(--spacing-extra-extra-large) - (var(--spacing-extra-extra-large) - var(--spacing-extra-large)) / 2);
  }
  .pv6-ns {
    padding-top: var(--spacing-extra-extra-large);
    padding-bottom: var(--spacing-extra-extra-large);
  }
  .pv6s-ns {
    padding-top: calc(var(--spacing-extra-extra-extra-large) - (var(--spacing-extra-extra-extra-large) - var(--spacing-extra-extra-large)) / 2);
    padding-bottom: calc(var(--spacing-extra-extra-extra-large) - (var(--spacing-extra-extra-extra-large) - var(--spacing-extra-extra-large)) / 2);
  }
  .pv7-ns {
    padding-top: var(--spacing-extra-extra-extra-large);
    padding-bottom: var(--spacing-extra-extra-extra-large);
  }

  .ph0-ns {
    padding-left: var(--spacing-none);
    padding-right: var(--spacing-none);
  }
  .ph0s-ns {
    padding-left: calc(var(--spacing-extra-small) - (var(--spacing-extra-small) - var(--spacing-none)) / 2);
    padding-right: calc(var(--spacing-extra-small) - (var(--spacing-extra-small) - var(--spacing-none)) / 2);
  }
  .ph1-ns {
    padding-left: var(--spacing-extra-small);
    padding-right: var(--spacing-extra-small);
  }
  .ph1s-ns {
    padding-left: calc(var(--spacing-small) - (var(--spacing-small) - var(--spacing-extra-small)) / 2);
    padding-right: calc(var(--spacing-small) - (var(--spacing-small) - var(--spacing-extra-small)) / 2);
  }
  .ph2-ns {
    padding-left: var(--spacing-small);
    padding-right: var(--spacing-small);
  }
  .ph2s-ns {
    padding-left: calc(var(--spacing-medium) - (var(--spacing-medium) - var(--spacing-small)) / 2);
    padding-right: calc(var(--spacing-medium) - (var(--spacing-medium) - var(--spacing-small)) / 2);
  }
  .ph3-ns {
    padding-left: var(--spacing-medium);
    padding-right: var(--spacing-medium);
  }
  .ph3s-ns {
    padding-left: calc(var(--spacing-large) - (var(--spacing-large) - var(--spacing-medium)) / 2);
    padding-right: calc(var(--spacing-large) - (var(--spacing-large) - var(--spacing-medium)) / 2);
  }
  .ph4-ns {
    padding-left: var(--spacing-large);
    padding-right: var(--spacing-large);
  }
  .ph4s-ns {
    padding-left: calc(var(--spacing-extra-large) - (var(--spacing-extra-large) - var(--spacing-large)) / 2);
    padding-right: calc(var(--spacing-extra-large) - (var(--spacing-extra-large) - var(--spacing-large)) / 2);
  }
  .ph5-ns {
    padding-left: var(--spacing-extra-large);
    padding-right: var(--spacing-extra-large);
  }
  .ph5s-ns {
    padding-left: calc(var(--spacing-extra-extra-large) - (var(--spacing-extra-extra-large) - var(--spacing-extra-large)) / 2);
    padding-right: calc(var(--spacing-extra-extra-large) - (var(--spacing-extra-extra-large) - var(--spacing-extra-large)) / 2);
  }
  .ph6-ns {
    padding-left: var(--spacing-extra-extra-large);
    padding-right: var(--spacing-extra-extra-large);
  }
  .ph6s-ns {
    padding-left: calc(var(--spacing-extra-extra-extra-large) - (var(--spacing-extra-extra-extra-large) - var(--spacing-extra-extra-large)) / 2);
    padding-right: calc(var(--spacing-extra-extra-extra-large) - (var(--spacing-extra-extra-extra-large) - var(--spacing-extra-extra-large)) / 2);
  }

  .ph7-ns {
    padding-left: var(--spacing-extra-extra-extra-large);
    padding-right: var(--spacing-extra-extra-extra-large);
  }

  .ma0-ns { margin: var(--spacing-none); }
  .ma0s-ns { margin: calc(var(--spacing-extra-small) - (var(--spacing-extra-small) - var(--spacing-none)) / 2); }
  .ma1-ns { margin: var(--spacing-extra-small); }
  .ma1s-ns { margin: calc(var(--spacing-small) - (var(--spacing-small) - var(--spacing-extra-small)) / 2); }
  .ma2-ns { margin: var(--spacing-small); }
  .ma2s-ns { margin: calc(var(--spacing-medium) - (var(--spacing-medium) - var(--spacing-small)) / 2); }
  .ma3-ns { margin: var(--spacing-medium); }
  .ma3s-ns { margin: calc(var(--spacing-large) - (var(--spacing-large) - var(--spacing-medium)) / 2); }
  .ma4-ns { margin: var(--spacing-large); }
  .ma4s-ns { margin: calc(var(--spacing-extra-large) - (var(--spacing-extra-large) - var(--spacing-large)) / 2); }
  .ma5-ns { margin: var(--spacing-extra-large); }
  .ma5s-ns { margin: calc(var(--spacing-extra-extra-large) - (var(--spacing-extra-extra-large) - var(--spacing-extra-large)) / 2); }
  .ma6-ns { margin: var(--spacing-extra-extra-large); }
  .ma6s-ns { margin: calc(var(--spacing-extra-extra-extra-large) - (var(--spacing-extra-extra-extra-large) - var(--spacing-extra-extra-large)) / 2); }
  .ma7-ns { margin: var(--spacing-extra-extra-extra-large); }

  .ml0-ns { margin-left: var(--spacing-none); }
  .ml0s-ns { margin-left: calc(var(--spacing-extra-small) - (var(--spacing-extra-small) - var(--spacing-none)) / 2); }
  .ml1-ns { margin-left: var(--spacing-extra-small); }
  .ml1s-ns { margin-left: calc(var(--spacing-small) - (var(--spacing-small) - var(--spacing-extra-small)) / 2); }
  .ml2-ns { margin-left: var(--spacing-small); }
  .ml2s-ns { margin-left: calc(var(--spacing-medium) - (var(--spacing-medium) - var(--spacing-small)) / 2); }
  .ml3-ns { margin-left: var(--spacing-medium); }
  .ml3s-ns { margin-left: calc(var(--spacing-large) - (var(--spacing-large) - var(--spacing-medium)) / 2); }
  .ml4-ns { margin-left: var(--spacing-large); }
  .ml4s-ns { margin-left: calc(var(--spacing-extra-large) - (var(--spacing-extra-large) - var(--spacing-large)) / 2); }
  .ml5-ns { margin-left: var(--spacing-extra-large); }
  .ml5s-ns { margin-left: calc(var(--spacing-extra-extra-large) - (var(--spacing-extra-extra-large) - var(--spacing-extra-large)) / 2); }
  .ml6-ns { margin-left: var(--spacing-extra-extra-large); }
  .ml6s-ns { margin-left: calc(var(--spacing-extra-extra-extra-large) - (var(--spacing-extra-extra-extra-large) - var(--spacing-extra-extra-large)) / 2); }
  .ml7-ns { margin-left: var(--spacing-extra-extra-extra-large); }

  .mr0-ns { margin-right: var(--spacing-none); }
  .mr0s-ns { margin-right: calc(var(--spacing-extra-small) - (var(--spacing-extra-small) - var(--spacing-none)) / 2); }
  .mr1-ns { margin-right: var(--spacing-extra-small); }
  .mr1s-ns { margin-right: calc(var(--spacing-small) - (var(--spacing-small) - var(--spacing-extra-small)) / 2); }
  .mr2-ns { margin-right: var(--spacing-small); }
  .mr2s-ns { margin-right: calc(var(--spacing-medium) - (var(--spacing-medium) - var(--spacing-small)) / 2); }
  .mr3-ns { margin-right: var(--spacing-medium); }
  .mr3s-ns { margin-right: calc(var(--spacing-large) - (var(--spacing-large) - var(--spacing-medium)) / 2); }
  .mr4-ns { margin-right: var(--spacing-large); }
  .mr4s-ns { margin-right: calc(var(--spacing-extra-large) - (var(--spacing-extra-large) - var(--spacing-large)) / 2); }
  .mr5-ns { margin-right: var(--spacing-extra-large); }
  .mr5s-ns { margin-right: calc(var(--spacing-extra-extra-large) - (var(--spacing-extra-extra-large) - var(--spacing-extra-large)) / 2); }
  .mr6-ns { margin-right: var(--spacing-extra-extra-large); }
  .mr6s-ns { margin-right: calc(var(--spacing-extra-extra-extra-large) - (var(--spacing-extra-extra-extra-large) - var(--spacing-extra-extra-large)) / 2); }
  .mr7-ns { margin-right: var(--spacing-extra-extra-extra-large); }

  .mb0-ns { margin-bottom: var(--spacing-none); }
  .mb0s-ns { margin-bottom: calc(var(--spacing-extra-small) - (var(--spacing-extra-small) - var(--spacing-none)) / 2); }
  .mb1-ns { margin-bottom: var(--spacing-extra-small); }
  .mb1s-ns { margin-bottom: calc(var(--spacing-small) - (var(--spacing-small) - var(--spacing-extra-small)) / 2); }
  .mb2-ns { margin-bottom: var(--spacing-small); }
  .mb2s-ns { margin-bottom: calc(var(--spacing-medium) - (var(--spacing-medium) - var(--spacing-small)) / 2); }
  .mb3-ns { margin-bottom: var(--spacing-medium); }
  .mb3s-ns { margin-bottom: calc(var(--spacing-large) - (var(--spacing-large) - var(--spacing-medium)) / 2); }
  .mb4-ns { margin-bottom: var(--spacing-large); }
  .mb4s-ns { margin-bottom: calc(var(--spacing-extra-large) - (var(--spacing-extra-large) - var(--spacing-large)) / 2); }
  .mb5-ns { margin-bottom: var(--spacing-extra-large); }
  .mb5s-ns { margin-bottom: calc(var(--spacing-extra-extra-large) - (var(--spacing-extra-extra-large) - var(--spacing-extra-large)) / 2); }
  .mb6-ns { margin-bottom: var(--spacing-extra-extra-large); }
  .mb6s-ns { margin-bottom: calc(var(--spacing-extra-extra-extra-large) - (var(--spacing-extra-extra-extra-large) - var(--spacing-extra-extra-large)) / 2); }
  .mb7-ns { margin-bottom: var(--spacing-extra-extra-extra-large); }

  .mt0-ns { margin-top: var(--spacing-none); }
  .mt0s-ns { margin-top: calc(var(--spacing-extra-small) - (var(--spacing-extra-small) - var(--spacing-none)) / 2); }
  .mt1-ns { margin-top: var(--spacing-extra-small); }
  .mt1s-ns { margin-top: calc(var(--spacing-small) - (var(--spacing-small) - var(--spacing-extra-small)) / 2); }
  .mt2-ns { margin-top: var(--spacing-small); }
  .mt2s-ns { margin-top: calc(var(--spacing-medium) - (var(--spacing-medium) - var(--spacing-small)) / 2); }
  .mt3-ns { margin-top: var(--spacing-medium); }
  .mt3s-ns { margin-top: calc(var(--spacing-large) - (var(--spacing-large) - var(--spacing-medium)) / 2); }
  .mt4-ns { margin-top: var(--spacing-large); }
  .mt4s-ns { margin-top: calc(var(--spacing-extra-large) - (var(--spacing-extra-large) - var(--spacing-large)) / 2); }
  .mt5-ns { margin-top: var(--spacing-extra-large); }
  .mt5s-ns { margin-top: calc(var(--spacing-extra-extra-large) - (var(--spacing-extra-extra-large) - var(--spacing-extra-large)) / 2); }
  .mt6-ns { margin-top: var(--spacing-extra-extra-large); }
  .mt6s-ns { margin-top: calc(var(--spacing-extra-extra-extra-large) - (var(--spacing-extra-extra-extra-large) - var(--spacing-extra-extra-large)) / 2); }
  .mt7-ns { margin-top: var(--spacing-extra-extra-extra-large); }

  .mv0-ns {
    margin-top: var(--spacing-none);
    margin-bottom: var(--spacing-none);
  }
  .mv0s-ns {
    margin-top: calc(var(--spacing-extra-small) - (var(--spacing-extra-small) - var(--spacing-none)) / 2);
    margin-bottom: calc(var(--spacing-extra-small) - (var(--spacing-extra-small) - var(--spacing-none)) / 2);
  }
  .mv1-ns {
    margin-top: var(--spacing-extra-small);
    margin-bottom: var(--spacing-extra-small);
  }
  .mv1s-ns {
    margin-top: calc(var(--spacing-small) - (var(--spacing-small) - var(--spacing-extra-small)) / 2);
    margin-bottom: calc(var(--spacing-small) - (var(--spacing-small) - var(--spacing-extra-small)) / 2);
  }
  .mv2-ns {
    margin-top: var(--spacing-small);
    margin-bottom: var(--spacing-small);
  }
  .mv2s-ns {
    margin-top: calc(var(--spacing-medium) - (var(--spacing-medium) - var(--spacing-small)) / 2);
    margin-bottom: calc(var(--spacing-medium) - (var(--spacing-medium) - var(--spacing-small)) / 2);
  }
  .mv3-ns {
    margin-top: var(--spacing-medium);
    margin-bottom: var(--spacing-medium);
  }
  .mv3s-ns {
    margin-top: calc(var(--spacing-large) - (var(--spacing-large) - var(--spacing-medium)) / 2);
    margin-bottom: calc(var(--spacing-large) - (var(--spacing-large) - var(--spacing-medium)) / 2);
  }
  .mv4-ns {
    margin-top: var(--spacing-large);
    margin-bottom: var(--spacing-large);
  }
  .mv4s-ns {
    margin-top: calc(var(--spacing-extra-large) - (var(--spacing-extra-large) - var(--spacing-large)) / 2);
    margin-bottom: calc(var(--spacing-extra-large) - (var(--spacing-extra-large) - var(--spacing-large)) / 2);
  }
  .mv5-ns {
    margin-top: var(--spacing-extra-large);
    margin-bottom: var(--spacing-extra-large);
  }
  .mv5s-ns {
    margin-top: calc(var(--spacing-extra-extra-large) - (var(--spacing-extra-extra-large) - var(--spacing-extra-large)) / 2);
    margin-bottom: calc(var(--spacing-extra-extra-large) - (var(--spacing-extra-extra-large) - var(--spacing-extra-large)) / 2);
  }
  .mv6-ns {
    margin-top: var(--spacing-extra-extra-large);
    margin-bottom: var(--spacing-extra-extra-large);
  }
  .mv6s-ns {
    margin-top: calc(var(--spacing-extra-extra-extra-large) - (var(--spacing-extra-extra-extra-large) - var(--spacing-extra-extra-large)) / 2);
    margin-bottom: calc(var(--spacing-extra-extra-extra-large) - (var(--spacing-extra-extra-extra-large) - var(--spacing-extra-extra-large)) / 2);
  }
  .mv7-ns {
    margin-top: var(--spacing-extra-extra-extra-large);
    margin-bottom: var(--spacing-extra-extra-extra-large);
  }

  .mh0-ns {
    margin-left: var(--spacing-none);
    margin-right: var(--spacing-none);
  }
  .mh0s-ns {
    margin-left: calc(var(--spacing-extra-small) - (var(--spacing-extra-small) - var(--spacing-none)) / 2);
    margin-right: calc(var(--spacing-extra-small) - (var(--spacing-extra-small) - var(--spacing-none)) / 2);
  }
  .mh1-ns {
    margin-left: var(--spacing-extra-small);
    margin-right: var(--spacing-extra-small);
  }
  .mh1s-ns {
    margin-left: calc(var(--spacing-small) - (var(--spacing-small) - var(--spacing-extra-small)) / 2);
    margin-right: calc(var(--spacing-small) - (var(--spacing-small) - var(--spacing-extra-small)) / 2);
  }
  .mh2-ns {
    margin-left: var(--spacing-small);
    margin-right: var(--spacing-small);
  }
  .mh2s-ns {
    margin-left: calc(var(--spacing-medium) - (var(--spacing-medium) - var(--spacing-small)) / 2);
    margin-right: calc(var(--spacing-medium) - (var(--spacing-medium) - var(--spacing-small)) / 2);
  }
  .mh3-ns {
    margin-left: var(--spacing-medium);
    margin-right: var(--spacing-medium);
  }
  .mh3s-ns {
    margin-left: calc(var(--spacing-large) - (var(--spacing-large) - var(--spacing-medium)) / 2);
    margin-right: calc(var(--spacing-large) - (var(--spacing-large) - var(--spacing-medium)) / 2);
  }
  .mh4-ns {
    margin-left: var(--spacing-large);
    margin-right: var(--spacing-large);
  }
  .mh4s-ns {
    margin-left: calc(var(--spacing-extra-large) - (var(--spacing-extra-large) - var(--spacing-large)) / 2);
    margin-right: calc(var(--spacing-extra-large) - (var(--spacing-extra-large) - var(--spacing-large)) / 2);
  }
  .mh5-ns {
    margin-left: var(--spacing-extra-large);
    margin-right: var(--spacing-extra-large);
  }
  .mh5s-ns {
    margin-left: calc(var(--spacing-extra-extra-large) - (var(--spacing-extra-extra-large) - var(--spacing-extra-large)) / 2);
    margin-right: calc(var(--spacing-extra-extra-large) - (var(--spacing-extra-extra-large) - var(--spacing-extra-large)) / 2);
  }
  .mh6-ns {
    margin-left: var(--spacing-extra-extra-large);
    margin-right: var(--spacing-extra-extra-large);
  }
  .mh6s-ns {
    margin-left: calc(var(--spacing-extra-extra-extra-large) - (var(--spacing-extra-extra-extra-large) - var(--spacing-extra-extra-large)) / 2);
    margin-right: calc(var(--spacing-extra-extra-extra-large) - (var(--spacing-extra-extra-extra-large) - var(--spacing-extra-extra-large)) / 2);
  }

  .mh7-ns {
    margin-left: var(--spacing-extra-extra-extra-large);
    margin-right: var(--spacing-extra-extra-extra-large);
  }
}

@media screen and (min-width: 30em) and (max-width: 60em) {
  .pa0-m { padding: var(--spacing-none); }
  .pa0s-m { padding: calc(var(--spacing-extra-small) - (var(--spacing-extra-small) - var(--spacing-none)) / 2); }
  .pa1-m { padding: var(--spacing-extra-small); }
  .pa1s-m { padding: calc(var(--spacing-small) - (var(--spacing-small) - var(--spacing-extra-small)) / 2); }
  .pa2-m { padding: var(--spacing-small); }
  .pa2s-m { padding: calc(var(--spacing-medium) - (var(--spacing-medium) - var(--spacing-small)) / 2); }
  .pa3-m { padding: var(--spacing-medium); }
  .pa3s-m { padding: calc(var(--spacing-large) - (var(--spacing-large) - var(--spacing-medium)) / 2); }
  .pa4-m { padding: var(--spacing-large); }
  .pa4s-m { padding: calc(var(--spacing-extra-large) - (var(--spacing-extra-large) - var(--spacing-large)) / 2); }
  .pa5-m { padding: var(--spacing-extra-large); }
  .pa5s-m { padding: calc(var(--spacing-extra-extra-large) - (var(--spacing-extra-extra-large) - var(--spacing-extra-large)) / 2); }
  .pa6-m { padding: var(--spacing-extra-extra-large); }
  .pa6s-m { padding: calc(var(--spacing-extra-extra-extra-large) - (var(--spacing-extra-extra-extra-large) - var(--spacing-extra-extra-large)) / 2); }
  .pa7-m { padding: var(--spacing-extra-extra-extra-large); }

  .pl0-m { padding-left: var(--spacing-none); }
  .pl0s-m { padding-left: calc(var(--spacing-extra-small) - (var(--spacing-extra-small) - var(--spacing-none)) / 2); }
  .pl1-m { padding-left: var(--spacing-extra-small); }
  .pl1s-m { padding-left: calc(var(--spacing-small) - (var(--spacing-small) - var(--spacing-extra-small)) / 2); }
  .pl2-m { padding-left: var(--spacing-small); }
  .pl2s-m { padding-left: calc(var(--spacing-medium) - (var(--spacing-medium) - var(--spacing-small)) / 2); }
  .pl3-m { padding-left: var(--spacing-medium); }
  .pl3s-m { padding-left: calc(var(--spacing-large) - (var(--spacing-large) - var(--spacing-medium)) / 2); }
  .pl4-m { padding-left: var(--spacing-large); }
  .pl4s-m { padding-left: calc(var(--spacing-extra-large) - (var(--spacing-extra-large) - var(--spacing-large)) / 2); }
  .pl5-m { padding-left: var(--spacing-extra-large); }
  .pl5s-m { padding-left: calc(var(--spacing-extra-extra-large) - (var(--spacing-extra-extra-large) - var(--spacing-extra-large)) / 2); }
  .pl6-m { padding-left: var(--spacing-extra-extra-large); }
  .pl6s-m { padding-left: calc(var(--spacing-extra-extra-extra-large) - (var(--spacing-extra-extra-extra-large) - var(--spacing-extra-extra-large)) / 2); }
  .pl7-m { padding-left: var(--spacing-extra-extra-extra-large); }

  .pr0-m { padding-right: var(--spacing-none); }
  .pr0s-m { padding-right: calc(var(--spacing-extra-small) - (var(--spacing-extra-small) - var(--spacing-none)) / 2); }
  .pr1-m { padding-right: var(--spacing-extra-small); }
  .pr1s-m { padding-right: calc(var(--spacing-small) - (var(--spacing-small) - var(--spacing-extra-small)) / 2); }
  .pr2-m { padding-right: var(--spacing-small); }
  .pr2s-m { padding-right: calc(var(--spacing-medium) - (var(--spacing-medium) - var(--spacing-small)) / 2); }
  .pr3-m { padding-right: var(--spacing-medium); }
  .pr3s-m { padding-right: calc(var(--spacing-large) - (var(--spacing-large) - var(--spacing-medium)) / 2); }
  .pr4-m { padding-right: var(--spacing-large); }
  .pr4s-m { padding-right: calc(var(--spacing-extra-large) - (var(--spacing-extra-large) - var(--spacing-large)) / 2); }
  .pr5-m { padding-right: var(--spacing-extra-large); }
  .pr5s-m { padding-right: calc(var(--spacing-extra-extra-large) - (var(--spacing-extra-extra-large) - var(--spacing-extra-large)) / 2); }
  .pr6-m { padding-right: var(--spacing-extra-extra-large); }
  .pr6s-m { padding-right: calc(var(--spacing-extra-extra-extra-large) - (var(--spacing-extra-extra-extra-large) - var(--spacing-extra-extra-large)) / 2); }
  .pr7-m { padding-right: var(--spacing-extra-extra-extra-large); }

  .pb0-m { padding-bottom: var(--spacing-none); }
  .pb0s-m { padding-bottom: