/* ========================================================= */
/* Spacings (margin & padding)
/* ========================================================= */

.ma  { margin: auto; }
.mla { margin-left: auto; }
.mra { margin-right: auto; }
.mxa { margin-left: auto; margin-right: auto; }

.m0  { margin: 0; }
.m1  { margin: var(--s1); }
.m2  { margin: var(--s2); }
.m3  { margin: var(--s3); }
.m4  { margin: var(--s4); }
.m5  { margin: var(--s5); }
.m6  { margin: var(--s6); }
.m7  { margin: var(--s7); }

.mt0 { margin-top: 0; }
.mt1 { margin-top: var(--s1); }
.mt2 { margin-top: var(--s2); }
.mt3 { margin-top: var(--s3); }
.mt4 { margin-top: var(--s4); }
.mt5 { margin-top: var(--s5); }
.mt6 { margin-top: var(--s6); }
.mt7 { margin-top: var(--s7); }

.mb0 { margin-bottom: 0; }
.mb1 { margin-bottom: var(--s1); }
.mb2 { margin-bottom: var(--s2); }
.mb3 { margin-bottom: var(--s3); }
.mb4 { margin-bottom: var(--s4); }
.mb5 { margin-bottom: var(--s5); }
.mb6 { margin-bottom: var(--s6); }
.mb7 { margin-bottom: var(--s7); }

.ml0 { margin-left: 0; }
.ml1 { margin-left: var(--s1); }
.ml2 { margin-left: var(--s2); }
.ml3 { margin-left: var(--s3); }
.ml4 { margin-left: var(--s4); }
.ml5 { margin-left: var(--s5); }
.ml6 { margin-left: var(--s6); }
.ml7 { margin-left: var(--s7); }

.mr0 { margin-right: 0; }
.mr1 { margin-right: var(--s1); }
.mr2 { margin-right: var(--s2); }
.mr3 { margin-right: var(--s3); }
.mr4 { margin-right: var(--s4); }
.mr5 { margin-right: var(--s5); }
.mr6 { margin-right: var(--s6); }
.mr7 { margin-right: var(--s7); }

.my0 { margin-top: 0; margin-bottom: 0; }
.my1 { margin-top: var(--s1); margin-bottom: var(--s1); }
.my2 { margin-top: var(--s2); margin-bottom: var(--s2); }
.my3 { margin-top: var(--s3); margin-bottom: var(--s3); }
.my4 { margin-top: var(--s4); margin-bottom: var(--s4); }
.my5 { margin-top: var(--s5); margin-bottom: var(--s5); }
.my6 { margin-top: var(--s6); margin-bottom: var(--s6); }
.my7 { margin-top: var(--s7); margin-bottom: var(--s7); }

.mx0 { margin-left: 0; margin-right: 0; }
.mx1 { margin-left: var(--s1); margin-right: var(--s1); }
.mx2 { margin-left: var(--s2); margin-right: var(--s2); }
.mx3 { margin-left: var(--s3); margin-right: var(--s3); }
.mx4 { margin-left: var(--s4); margin-right: var(--s4); }
.mx5 { margin-left: var(--s5); margin-right: var(--s5); }
.mx6 { margin-left: var(--s6); margin-right: var(--s6); }
.mx7 { margin-left: var(--s7); margin-right: var(--s7); }

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: calc(0rem - var(--s1)); }
.mt-2 { margin-top: calc(0rem - var(--s2)); }
.mt-3 { margin-top: calc(0rem - var(--s3)); }
.mt-4 { margin-top: calc(0rem - var(--s4)); }
.mt-5 { margin-top: calc(0rem - var(--s5)); }
.mt-6 { margin-top: calc(0rem - var(--s6)); }
.mt-7 { margin-top: calc(0rem - var(--s7)); }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: calc(0rem - var(--s1)); }
.mb-2 { margin-bottom: calc(0rem - var(--s2)); }
.mb-3 { margin-bottom: calc(0rem - var(--s3)); }
.mb-4 { margin-bottom: calc(0rem - var(--s4)); }
.mb-5 { margin-bottom: calc(0rem - var(--s5)); }
.mb-6 { margin-bottom: calc(0rem - var(--s6)); }
.mb-7 { margin-bottom: calc(0rem - var(--s7)); }

.ml-0 { margin-left: 0; }
.ml-1 { margin-left: calc(0rem - var(--s1)); }
.ml-2 { margin-left: calc(0rem - var(--s2)); }
.ml-3 { margin-left: calc(0rem - var(--s3)); }
.ml-4 { margin-left: calc(0rem - var(--s4)); }
.ml-5 { margin-left: calc(0rem - var(--s5)); }
.ml-6 { margin-left: calc(0rem - var(--s6)); }
.ml-7 { margin-left: calc(0rem - var(--s7)); }

.mr-0 { margin-right: 0; }
.mr-1 { margin-right: calc(0rem - var(--s1)); }
.mr-2 { margin-right: calc(0rem - var(--s2)); }
.mr-3 { margin-right: calc(0rem - var(--s3)); }
.mr-4 { margin-right: calc(0rem - var(--s4)); }
.mr-5 { margin-right: calc(0rem - var(--s5)); }
.mr-6 { margin-right: calc(0rem - var(--s6)); }
.mr-7 { margin-right: calc(0rem - var(--s7)); }

.p0  { padding: 0; }
.p1  { padding: var(--s1); }
.p2  { padding: var(--s2); }
.p3  { padding: var(--s3); }
.p4  { padding: var(--s4); }
.p5  { padding: var(--s5); }
.p6  { padding: var(--s6); }
.p7  { padding: var(--s7); }

.pt0 { padding-top: 0; }
.pt1 { padding-top: var(--s1); }
.pt2 { padding-top: var(--s2); }
.pt3 { padding-top: var(--s3); }
.pt4 { padding-top: var(--s4); }
.pt5 { padding-top: var(--s5); }
.pt6 { padding-top: var(--s6); }
.pt7 { padding-top: var(--s7); }

.pb0 { padding-bottom: 0; }
.pb1 { padding-bottom: var(--s1); }
.pb2 { padding-bottom: var(--s2); }
.pb3 { padding-bottom: var(--s3); }
.pb4 { padding-bottom: var(--s4); }
.pb5 { padding-bottom: var(--s5); }
.pb6 { padding-bottom: var(--s6); }
.pb7 { padding-bottom: var(--s7); }

.pl0 { padding-left: 0; }
.pl1 { padding-left: var(--s1); }
.pl2 { padding-left: var(--s2); }
.pl3 { padding-left: var(--s3); }
.pl4 { padding-left: var(--s4); }
.pl5 { padding-left: var(--s5); }
.pl6 { padding-left: var(--s6); }
.pl7 { padding-left: var(--s7); }

.pr0 { padding-right: 0; }
.pr1 { padding-right: var(--s1); }
.pr2 { padding-right: var(--s2); }
.pr3 { padding-right: var(--s3); }
.pr4 { padding-right: var(--s4); }
.pr5 { padding-right: var(--s5); }
.pr6 { padding-right: var(--s6); }
.pr7 { padding-right: var(--s7); }

.py0 { padding-top: 0; padding-bottom: 0; }
.py1 { padding-top: var(--s1); padding-bottom: var(--s1); }
.py2 { padding-top: var(--s2); padding-bottom: var(--s2); }
.py3 { padding-top: var(--s3); padding-bottom: var(--s3); }
.py4 { padding-top: var(--s4); padding-bottom: var(--s4); }
.py5 { padding-top: var(--s5); padding-bottom: var(--s5); }
.py6 { padding-top: var(--s6); padding-bottom: var(--s6); }
.py7 { padding-top: var(--s7); padding-bottom: var(--s7); }

.px0 { padding-left: 0; padding-right: 0; }
.px1 { padding-left: var(--s1); padding-right: var(--s1); }
.px2 { padding-left: var(--s2); padding-right: var(--s2); }
.px3 { padding-left: var(--s3); padding-right: var(--s3); }
.px4 { padding-left: var(--s4); padding-right: var(--s4); }
.px5 { padding-left: var(--s5); padding-right: var(--s5); }
.px6 { padding-left: var(--s6); padding-right: var(--s6); }
.px7 { padding-left: var(--s7); padding-right: var(--s7); }

@media (min-width: 30em) {
  .sm-ma  { margin: auto; }
  .sm-mla { margin-left: auto; }
  .sm-mra { margin-right: auto; }
  .sm-mxa { margin-left: auto; margin-right: auto; }

  .sm-m0  { margin: 0; }
  .sm-m1  { margin: var(--s1); }
  .sm-m2  { margin: var(--s2); }
  .sm-m3  { margin: var(--s3); }
  .sm-m4  { margin: var(--s4); }
  .sm-m5  { margin: var(--s5); }
  .sm-m6  { margin: var(--s6); }
  .sm-m7  { margin: var(--s7); }

  .sm-mt0 { margin-top: 0; }
  .sm-mt1 { margin-top: var(--s1); }
  .sm-mt2 { margin-top: var(--s2); }
  .sm-mt3 { margin-top: var(--s3); }
  .sm-mt4 { margin-top: var(--s4); }
  .sm-mt5 { margin-top: var(--s5); }
  .sm-mt6 { margin-top: var(--s6); }
  .sm-mt7 { margin-top: var(--s7); }

  .sm-mb0 { margin-bottom: 0; }
  .sm-mb1 { margin-bottom: var(--s1); }
  .sm-mb2 { margin-bottom: var(--s2); }
  .sm-mb3 { margin-bottom: var(--s3); }
  .sm-mb4 { margin-bottom: var(--s4); }
  .sm-mb5 { margin-bottom: var(--s5); }
  .sm-mb6 { margin-bottom: var(--s6); }
  .sm-mb7 { margin-bottom: var(--s7); }

  .sm-ml0 { margin-left: 0; }
  .sm-ml1 { margin-left: var(--s1); }
  .sm-ml2 { margin-left: var(--s2); }
  .sm-ml3 { margin-left: var(--s3); }
  .sm-ml4 { margin-left: var(--s4); }
  .sm-ml5 { margin-left: var(--s5); }
  .sm-ml6 { margin-left: var(--s6); }
  .sm-ml7 { margin-left: var(--s7); }

  .sm-mr0 { margin-right: 0; }
  .sm-mr1 { margin-right: var(--s1); }
  .sm-mr2 { margin-right: var(--s2); }
  .sm-mr3 { margin-right: var(--s3); }
  .sm-mr4 { margin-right: var(--s4); }
  .sm-mr5 { margin-right: var(--s5); }
  .sm-mr6 { margin-right: var(--s6); }
  .sm-mr7 { margin-right: var(--s7); }

  .sm-my0 { margin-top: 0; margin-bottom: 0; }
  .sm-my1 { margin-top: var(--s1); margin-bottom: var(--s1); }
  .sm-my2 { margin-top: var(--s2); margin-bottom: var(--s2); }
  .sm-my3 { margin-top: var(--s3); margin-bottom: var(--s3); }
  .sm-my4 { margin-top: var(--s4); margin-bottom: var(--s4); }
  .sm-my5 { margin-top: var(--s5); margin-bottom: var(--s5); }
  .sm-my6 { margin-top: var(--s6); margin-bottom: var(--s6); }
  .sm-my7 { margin-top: var(--s7); margin-bottom: var(--s7); }

  .sm-mx0 { margin-left: 0; margin-right: 0; }
  .sm-mx1 { margin-left: var(--s1); margin-right: var(--s1); }
  .sm-mx2 { margin-left: var(--s2); margin-right: var(--s2); }
  .sm-mx3 { margin-left: var(--s3); margin-right: var(--s3); }
  .sm-mx4 { margin-left: var(--s4); margin-right: var(--s4); }
  .sm-mx5 { margin-left: var(--s5); margin-right: var(--s5); }
  .sm-mx6 { margin-left: var(--s6); margin-right: var(--s6); }
  .sm-mx7 { margin-left: var(--s7); margin-right: var(--s7); }

  .sm-mt-0 { margin-top: 0; }
  .sm-mt-1 { margin-top: calc(0rem - var(--s1)); }
  .sm-mt-2 { margin-top: calc(0rem - var(--s2)); }
  .sm-mt-3 { margin-top: calc(0rem - var(--s3)); }
  .sm-mt-4 { margin-top: calc(0rem - var(--s4)); }
  .sm-mt-5 { margin-top: calc(0rem - var(--s5)); }
  .sm-mt-6 { margin-top: calc(0rem - var(--s6)); }
  .sm-mt-7 { margin-top: calc(0rem - var(--s7)); }

  .sm-mb-0 { margin-bottom: 0; }
  .sm-mb-1 { margin-bottom: calc(0rem - var(--s1)); }
  .sm-mb-2 { margin-bottom: calc(0rem - var(--s2)); }
  .sm-mb-3 { margin-bottom: calc(0rem - var(--s3)); }
  .sm-mb-4 { margin-bottom: calc(0rem - var(--s4)); }
  .sm-mb-5 { margin-bottom: calc(0rem - var(--s5)); }
  .sm-mb-6 { margin-bottom: calc(0rem - var(--s6)); }
  .sm-mb-7 { margin-bottom: calc(0rem - var(--s7)); }

  .sm-ml-0 { margin-left: 0; }
  .sm-ml-1 { margin-left: calc(0rem - var(--s1)); }
  .sm-ml-2 { margin-left: calc(0rem - var(--s2)); }
  .sm-ml-3 { margin-left: calc(0rem - var(--s3)); }
  .sm-ml-4 { margin-left: calc(0rem - var(--s4)); }
  .sm-ml-5 { margin-left: calc(0rem - var(--s5)); }
  .sm-ml-6 { margin-left: calc(0rem - var(--s6)); }
  .sm-ml-7 { margin-left: calc(0rem - var(--s7)); }

  .sm-mr-0 { margin-right: 0; }
  .sm-mr-1 { margin-right: calc(0rem - var(--s1)); }
  .sm-mr-2 { margin-right: calc(0rem - var(--s2)); }
  .sm-mr-3 { margin-right: calc(0rem - var(--s3)); }
  .sm-mr-4 { margin-right: calc(0rem - var(--s4)); }
  .sm-mr-5 { margin-right: calc(0rem - var(--s5)); }
  .sm-mr-6 { margin-right: calc(0rem - var(--s6)); }
  .sm-mr-7 { margin-right: calc(0rem - var(--s7)); }

  .sm-p0  { padding: 0; }
  .sm-p1  { padding: var(--s1); }
  .sm-p2  { padding: var(--s2); }
  .sm-p3  { padding: var(--s3); }
  .sm-p4  { padding: var(--s4); }
  .sm-p5  { padding: var(--s5); }
  .sm-p6  { padding: var(--s6); }
  .sm-p7  { padding: var(--s7); }

  .sm-pt0 { padding-top: 0; }
  .sm-pt1 { padding-top: var(--s1); }
  .sm-pt2 { padding-top: var(--s2); }
  .sm-pt3 { padding-top: var(--s3); }
  .sm-pt4 { padding-top: var(--s4); }
  .sm-pt5 { padding-top: var(--s5); }
  .sm-pt6 { padding-top: var(--s6); }
  .sm-pt7 { padding-top: var(--s7); }

  .sm-pb0 { padding-bottom: 0; }
  .sm-pb1 { padding-bottom: var(--s1); }
  .sm-pb2 { padding-bottom: var(--s2); }
  .sm-pb3 { padding-bottom: var(--s3); }
  .sm-pb4 { padding-bottom: var(--s4); }
  .sm-pb5 { padding-bottom: var(--s5); }
  .sm-pb6 { padding-bottom: var(--s6); }
  .sm-pb7 { padding-bottom: var(--s7); }

  .sm-pl0 { padding-left: 0; }
  .sm-pl1 { padding-left: var(--s1); }
  .sm-pl2 { padding-left: var(--s2); }
  .sm-pl3 { padding-left: var(--s3); }
  .sm-pl4 { padding-left: var(--s4); }
  .sm-pl5 { padding-left: var(--s5); }
  .sm-pl6 { padding-left: var(--s6); }
  .sm-pl7 { padding-left: var(--s7); }

  .sm-pr0 { padding-right: 0; }
  .sm-pr1 { padding-right: var(--s1); }
  .sm-pr2 { padding-right: var(--s2); }
  .sm-pr3 { padding-right: var(--s3); }
  .sm-pr4 { padding-right: var(--s4); }
  .sm-pr5 { padding-right: var(--s5); }
  .sm-pr6 { padding-right: var(--s6); }
  .sm-pr7 { padding-right: var(--s7); }

  .sm-py0 { padding-top: 0; padding-bottom: 0; }
  .sm-py1 { padding-top: var(--s1); padding-bottom: var(--s1); }
  .sm-py2 { padding-top: var(--s2); padding-bottom: var(--s2); }
  .sm-py3 { padding-top: var(--s3); padding-bottom: var(--s3); }
  .sm-py4 { padding-top: var(--s4); padding-bottom: var(--s4); }
  .sm-py5 { padding-top: var(--s5); padding-bottom: var(--s5); }
  .sm-py6 { padding-top: var(--s6); padding-bottom: var(--s6); }
  .sm-py7 { padding-top: var(--s7); padding-bottom: var(--s7); }

  .sm-px0 { padding-left: 0; padding-right: 0; }
  .sm-px1 { padding-left: var(--s1); padding-right: var(--s1); }
  .sm-px2 { padding-left: var(--s2); padding-right: var(--s2); }
  .sm-px3 { padding-left: var(--s3); padding-right: var(--s3); }
  .sm-px4 { padding-left: var(--s4); padding-right: var(--s4); }
  .sm-px5 { padding-left: var(--s5); padding-right: var(--s5); }
  .sm-px6 { padding-left: var(--s6); padding-right: var(--s6); }
  .sm-px7 { padding-left: var(--s7); padding-right: var(--s7); }
}
@media (min-width: 48em) {
  .md-ma  { margin: auto; }
  .md-mla { margin-left: auto; }
  .md-mra { margin-right: auto; }
  .md-mxa { margin-left: auto; margin-right: auto; }

  .md-m0  { margin: 0; }
  .md-m1  { margin: var(--s1); }
  .md-m2  { margin: var(--s2); }
  .md-m3  { margin: var(--s3); }
  .md-m4  { margin: var(--s4); }
  .md-m5  { margin: var(--s5); }
  .md-m6  { margin: var(--s6); }
  .md-m7  { margin: var(--s7); }

  .md-mt0 { margin-top: 0; }
  .md-mt1 { margin-top: var(--s1); }
  .md-mt2 { margin-top: var(--s2); }
  .md-mt3 { margin-top: var(--s3); }
  .md-mt4 { margin-top: var(--s4); }
  .md-mt5 { margin-top: var(--s5); }
  .md-mt6 { margin-top: var(--s6); }
  .md-mt7 { margin-top: var(--s7); }

  .md-mb0 { margin-bottom: 0; }
  .md-mb1 { margin-bottom: var(--s1); }
  .md-mb2 { margin-bottom: var(--s2); }
  .md-mb3 { margin-bottom: var(--s3); }
  .md-mb4 { margin-bottom: var(--s4); }
  .md-mb5 { margin-bottom: var(--s5); }
  .md-mb6 { margin-bottom: var(--s6); }
  .md-mb7 { margin-bottom: var(--s7); }

  .md-ml0 { margin-left: 0; }
  .md-ml1 { margin-left: var(--s1); }
  .md-ml2 { margin-left: var(--s2); }
  .md-ml3 { margin-left: var(--s3); }
  .md-ml4 { margin-left: var(--s4); }
  .md-ml5 { margin-left: var(--s5); }
  .md-ml6 { margin-left: var(--s6); }
  .md-ml7 { margin-left: var(--s7); }

  .md-mr0 { margin-right: 0; }
  .md-mr1 { margin-right: var(--s1); }
  .md-mr2 { margin-right: var(--s2); }
  .md-mr3 { margin-right: var(--s3); }
  .md-mr4 { margin-right: var(--s4); }
  .md-mr5 { margin-right: var(--s5); }
  .md-mr6 { margin-right: var(--s6); }
  .md-mr7 { margin-right: var(--s7); }

  .md-my0 { margin-top: 0; margin-bottom: 0; }
  .md-my1 { margin-top: var(--s1); margin-bottom: var(--s1); }
  .md-my2 { margin-top: var(--s2); margin-bottom: var(--s2); }
  .md-my3 { margin-top: var(--s3); margin-bottom: var(--s3); }
  .md-my4 { margin-top: var(--s4); margin-bottom: var(--s4); }
  .md-my5 { margin-top: var(--s5); margin-bottom: var(--s5); }
  .md-my6 { margin-top: var(--s6); margin-bottom: var(--s6); }
  .md-my7 { margin-top: var(--s7); margin-bottom: var(--s7); }

  .md-mx0 { margin-left: 0; margin-right: 0; }
  .md-mx1 { margin-left: var(--s1); margin-right: var(--s1); }
  .md-mx2 { margin-left: var(--s2); margin-right: var(--s2); }
  .md-mx3 { margin-left: var(--s3); margin-right: var(--s3); }
  .md-mx4 { margin-left: var(--s4); margin-right: var(--s4); }
  .md-mx5 { margin-left: var(--s5); margin-right: var(--s5); }
  .md-mx6 { margin-left: var(--s6); margin-right: var(--s6); }
  .md-mx7 { margin-left: var(--s7); margin-right: var(--s7); }

  .md-mt-0 { margin-top: 0; }
  .md-mt-1 { margin-top: calc(0rem - var(--s1)); }
  .md-mt-2 { margin-top: calc(0rem - var(--s2)); }
  .md-mt-3 { margin-top: calc(0rem - var(--s3)); }
  .md-mt-4 { margin-top: calc(0rem - var(--s4)); }
  .md-mt-5 { margin-top: calc(0rem - var(--s5)); }
  .md-mt-6 { margin-top: calc(0rem - var(--s6)); }
  .md-mt-7 { margin-top: calc(0rem - var(--s7)); }

  .md-mb-0 { margin-bottom: 0; }
  .md-mb-1 { margin-bottom: calc(0rem - var(--s1)); }
  .md-mb-2 { margin-bottom: calc(0rem - var(--s2)); }
  .md-mb-3 { margin-bottom: calc(0rem - var(--s3)); }
  .md-mb-4 { margin-bottom: calc(0rem - var(--s4)); }
  .md-mb-5 { margin-bottom: calc(0rem - var(--s5)); }
  .md-mb-6 { margin-bottom: calc(0rem - var(--s6)); }
  .md-mb-7 { margin-bottom: calc(0rem - var(--s7)); }

  .md-ml-0 { margin-left: 0; }
  .md-ml-1 { margin-left: calc(0rem - var(--s1)); }
  .md-ml-2 { margin-left: calc(0rem - var(--s2)); }
  .md-ml-3 { margin-left: calc(0rem - var(--s3)); }
  .md-ml-4 { margin-left: calc(0rem - var(--s4)); }
  .md-ml-5 { margin-left: calc(0rem - var(--s5)); }
  .md-ml-6 { margin-left: calc(0rem - var(--s6)); }
  .md-ml-7 { margin-left: calc(0rem - var(--s7)); }

  .md-mr-0 { margin-right: 0; }
  .md-mr-1 { margin-right: calc(0rem - var(--s1)); }
  .md-mr-2 { margin-right: calc(0rem - var(--s2)); }
  .md-mr-3 { margin-right: calc(0rem - var(--s3)); }
  .md-mr-4 { margin-right: calc(0rem - var(--s4)); }
  .md-mr-5 { margin-right: calc(0rem - var(--s5)); }
  .md-mr-6 { margin-right: calc(0rem - var(--s6)); }
  .md-mr-7 { margin-right: calc(0rem - var(--s7)); }

  .md-p0  { padding: 0; }
  .md-p1  { padding: var(--s1); }
  .md-p2  { padding: var(--s2); }
  .md-p3  { padding: var(--s3); }
  .md-p4  { padding: var(--s4); }
  .md-p5  { padding: var(--s5); }
  .md-p6  { padding: var(--s6); }
  .md-p7  { padding: var(--s7); }

  .md-pt0 { padding-top: 0; }
  .md-pt1 { padding-top: var(--s1); }
  .md-pt2 { padding-top: var(--s2); }
  .md-pt3 { padding-top: var(--s3); }
  .md-pt4 { padding-top: var(--s4); }
  .md-pt5 { padding-top: var(--s5); }
  .md-pt6 { padding-top: var(--s6); }
  .md-pt7 { padding-top: var(--s7); }

  .md-pb0 { padding-bottom: 0; }
  .md-pb1 { padding-bottom: var(--s1); }
  .md-pb2 { padding-bottom: var(--s2); }
  .md-pb3 { padding-bottom: var(--s3); }
  .md-pb4 { padding-bottom: var(--s4); }
  .md-pb5 { padding-bottom: var(--s5); }
  .md-pb6 { padding-bottom: var(--s6); }
  .md-pb7 { padding-bottom: var(--s7); }

  .md-pl0 { padding-left: 0; }
  .md-pl1 { padding-left: var(--s1); }
  .md-pl2 { padding-left: var(--s2); }
  .md-pl3 { padding-left: var(--s3); }
  .md-pl4 { padding-left: var(--s4); }
  .md-pl5 { padding-left: var(--s5); }
  .md-pl6 { padding-left: var(--s6); }
  .md-pl7 { padding-left: var(--s7); }

  .md-pr0 { padding-right: 0; }
  .md-pr1 { padding-right: var(--s1); }
  .md-pr2 { padding-right: var(--s2); }
  .md-pr3 { padding-right: var(--s3); }
  .md-pr4 { padding-right: var(--s4); }
  .md-pr5 { padding-right: var(--s5); }
  .md-pr6 { padding-right: var(--s6); }
  .md-pr7 { padding-right: var(--s7); }

  .md-py0 { padding-top: 0; padding-bottom: 0; }
  .md-py1 { padding-top: var(--s1); padding-bottom: var(--s1); }
  .md-py2 { padding-top: var(--s2); padding-bottom: var(--s2); }
  .md-py3 { padding-top: var(--s3); padding-bottom: var(--s3); }
  .md-py4 { padding-top: var(--s4); padding-bottom: var(--s4); }
  .md-py5 { padding-top: var(--s5); padding-bottom: var(--s5); }
  .md-py6 { padding-top: var(--s6); padding-bottom: var(--s6); }
  .md-py7 { padding-top: var(--s7); padding-bottom: var(--s7); }

  .md-px0 { padding-left: 0; padding-right: 0; }
  .md-px1 { padding-left: var(--s1); padding-right: var(--s1); }
  .md-px2 { padding-left: var(--s2); padding-right: var(--s2); }
  .md-px3 { padding-left: var(--s3); padding-right: var(--s3); }
  .md-px4 { padding-left: var(--s4); padding-right: var(--s4); }
  .md-px5 { padding-left: var(--s5); padding-right: var(--s5); }
  .md-px6 { padding-left: var(--s6); padding-right: var(--s6); }
  .md-px7 { padding-left: var(--s7); padding-right: var(--s7); }
}
@media (min-width: 64em) {
  .lg-ma  { margin: auto; }
  .lg-mla { margin-left: auto; }
  .lg-mra { margin-right: auto; }
  .lg-mxa { margin-left: auto; margin-right: auto; }

  .lg-m0  { margin: 0; }
  .lg-m1  { margin: var(--s1); }
  .lg-m2  { margin: var(--s2); }
  .lg-m3  { margin: var(--s3); }
  .lg-m4  { margin: var(--s4); }
  .lg-m5  { margin: var(--s5); }
  .lg-m6  { margin: var(--s6); }
  .lg-m7  { margin: var(--s7); }

  .lg-mt0 { margin-top: 0; }
  .lg-mt1 { margin-top: var(--s1); }
  .lg-mt2 { margin-top: var(--s2); }
  .lg-mt3 { margin-top: var(--s3); }
  .lg-mt4 { margin-top: var(--s4); }
  .lg-mt5 { margin-top: var(--s5); }
  .lg-mt6 { margin-top: var(--s6); }
  .lg-mt7 { margin-top: var(--s7); }

  .lg-mb0 { margin-bottom: 0; }
  .lg-mb1 { margin-bottom: var(--s1); }
  .lg-mb2 { margin-bottom: var(--s2); }
  .lg-mb3 { margin-bottom: var(--s3); }
  .lg-mb4 { margin-bottom: var(--s4); }
  .lg-mb5 { margin-bottom: var(--s5); }
  .lg-mb6 { margin-bottom: var(--s6); }
  .lg-mb7 { margin-bottom: var(--s7); }

  .lg-ml0 { margin-left: 0; }
  .lg-ml1 { margin-left: var(--s1); }
  .lg-ml2 { margin-left: var(--s2); }
  .lg-ml3 { margin-left: var(--s3); }
  .lg-ml4 { margin-left: var(--s4); }
  .lg-ml5 { margin-left: var(--s5); }
  .lg-ml6 { margin-left: var(--s6); }
  .lg-ml7 { margin-left: var(--s7); }

  .lg-mr0 { margin-right: 0; }
  .lg-mr1 { margin-right: var(--s1); }
  .lg-mr2 { margin-right: var(--s2); }
  .lg-mr3 { margin-right: var(--s3); }
  .lg-mr4 { margin-right: var(--s4); }
  .lg-mr5 { margin-right: var(--s5); }
  .lg-mr6 { margin-right: var(--s6); }
  .lg-mr7 { margin-right: var(--s7); }

  .lg-my0 { margin-top: 0; margin-bottom: 0; }
  .lg-my1 { margin-top: var(--s1); margin-bottom: var(--s1); }
  .lg-my2 { margin-top: var(--s2); margin-bottom: var(--s2); }
  .lg-my3 { margin-top: var(--s3); margin-bottom: var(--s3); }
  .lg-my4 { margin-top: var(--s4); margin-bottom: var(--s4); }
  .lg-my5 { margin-top: var(--s5); margin-bottom: var(--s5); }
  .lg-my6 { margin-top: var(--s6); margin-bottom: var(--s6); }
  .lg-my7 { margin-top: var(--s7); margin-bottom: var(--s7); }

  .lg-mx0 { margin-left: 0; margin-right: 0; }
  .lg-mx1 { margin-left: var(--s1); margin-right: var(--s1); }
  .lg-mx2 { margin-left: var(--s2); margin-right: var(--s2); }
  .lg-mx3 { margin-left: var(--s3); margin-right: var(--s3); }
  .lg-mx4 { margin-left: var(--s4); margin-right: var(--s4); }
  .lg-mx5 { margin-left: var(--s5); margin-right: var(--s5); }
  .lg-mx6 { margin-left: var(--s6); margin-right: var(--s6); }
  .lg-mx7 { margin-left: var(--s7); margin-right: var(--s7); }

  .lg-mt-0 { margin-top: 0; }
  .lg-mt-1 { margin-top: calc(0rem - var(--s1)); }
  .lg-mt-2 { margin-top: calc(0rem - var(--s2)); }
  .lg-mt-3 { margin-top: calc(0rem - var(--s3)); }
  .lg-mt-4 { margin-top: calc(0rem - var(--s4)); }
  .lg-mt-5 { margin-top: calc(0rem - var(--s5)); }
  .lg-mt-6 { margin-top: calc(0rem - var(--s6)); }
  .lg-mt-7 { margin-top: calc(0rem - var(--s7)); }

  .lg-mb-0 { margin-bottom: 0; }
  .lg-mb-1 { margin-bottom: calc(0rem - var(--s1)); }
  .lg-mb-2 { margin-bottom: calc(0rem - var(--s2)); }
  .lg-mb-3 { margin-bottom: calc(0rem - var(--s3)); }
  .lg-mb-4 { margin-bottom: calc(0rem - var(--s4)); }
  .lg-mb-5 { margin-bottom: calc(0rem - var(--s5)); }
  .lg-mb-6 { margin-bottom: calc(0rem - var(--s6)); }
  .lg-mb-7 { margin-bottom: calc(0rem - var(--s7)); }

  .lg-ml-0 { margin-left: 0; }
  .lg-ml-1 { margin-left: calc(0rem - var(--s1)); }
  .lg-ml-2 { margin-left: calc(0rem - var(--s2)); }
  .lg-ml-3 { margin-left: calc(0rem - var(--s3)); }
  .lg-ml-4 { margin-left: calc(0rem - var(--s4)); }
  .lg-ml-5 { margin-left: calc(0rem - var(--s5)); }
  .lg-ml-6 { margin-left: calc(0rem - var(--s6)); }
  .lg-ml-7 { margin-left: calc(0rem - var(--s7)); }

  .lg-mr-0 { margin-right: 0; }
  .lg-mr-1 { margin-right: calc(0rem - var(--s1)); }
  .lg-mr-2 { margin-right: calc(0rem - var(--s2)); }
  .lg-mr-3 { margin-right: calc(0rem - var(--s3)); }
  .lg-mr-4 { margin-right: calc(0rem - var(--s4)); }
  .lg-mr-5 { margin-right: calc(0rem - var(--s5)); }
  .lg-mr-6 { margin-right: calc(0rem - var(--s6)); }
  .lg-mr-7 { margin-right: calc(0rem - var(--s7)); }

  .lg-p0  { padding: 0; }
  .lg-p1  { padding: var(--s1); }
  .lg-p2  { padding: var(--s2); }
  .lg-p3  { padding: var(--s3); }
  .lg-p4  { padding: var(--s4); }
  .lg-p5  { padding: var(--s5); }
  .lg-p6  { padding: var(--s6); }
  .lg-p7  { padding: var(--s7); }

  .lg-pt0 { padding-top: 0; }
  .lg-pt1 { padding-top: var(--s1); }
  .lg-pt2 { padding-top: var(--s2); }
  .lg-pt3 { padding-top: var(--s3); }
  .lg-pt4 { padding-top: var(--s4); }
  .lg-pt5 { padding-top: var(--s5); }
  .lg-pt6 { padding-top: var(--s6); }
  .lg-pt7 { padding-top: var(--s7); }

  .lg-pb0 { padding-bottom: 0; }
  .lg-pb1 { padding-bottom: var(--s1); }
  .lg-pb2 { padding-bottom: var(--s2); }
  .lg-pb3 { padding-bottom: var(--s3); }
  .lg-pb4 { padding-bottom: var(--s4); }
  .lg-pb5 { padding-bottom: var(--s5); }
  .lg-pb6 { padding-bottom: var(--s6); }
  .lg-pb7 { padding-bottom: var(--s7); }

  .lg-pl0 { padding-left: 0; }
  .lg-pl1 { padding-left: var(--s1); }
  .lg-pl2 { padding-left: var(--s2); }
  .lg-pl3 { padding-left: var(--s3); }
  .lg-pl4 { padding-left: var(--s4); }
  .lg-pl5 { padding-left: var(--s5); }
  .lg-pl6 { padding-left: var(--s6); }
  .lg-pl7 { padding-left: var(--s7); }

  .lg-pr0 { padding-right: 0; }
  .lg-pr1 { padding-right: var(--s1); }
  .lg-pr2 { padding-right: var(--s2); }
  .lg-pr3 { padding-right: var(--s3); }
  .lg-pr4 { padding-right: var(--s4); }
  .lg-pr5 { padding-right: var(--s5); }
  .lg-pr6 { padding-right: var(--s6); }
  .lg-pr7 { padding-right: var(--s7); }

  .lg-py0 { padding-top: 0; padding-bottom: 0; }
  .lg-py1 { padding-top: var(--s1); padding-bottom: var(--s1); }
  .lg-py2 { padding-top: var(--s2); padding-bottom: var(--s2); }
  .lg-py3 { padding-top: var(--s3); padding-bottom: var(--s3); }
  .lg-py4 { padding-top: var(--s4); padding-bottom: var(--s4); }
  .lg-py5 { padding-top: var(--s5); padding-bottom: var(--s5); }
  .lg-py6 { padding-top: var(--s6); padding-bottom: var(--s6); }
  .lg-py7 { padding-top: var(--s7); padding-bottom: var(--s7); }

  .lg-px0 { padding-left: 0; padding-right: 0; }
  .lg-px1 { padding-left: var(--s1); padding-right: var(--s1); }
  .lg-px2 { padding-left: var(--s2); padding-right: var(--s2); }
  .lg-px3 { padding-left: var(--s3); padding-right: var(--s3); }
  .lg-px4 { padding-left: var(--s4); padding-right: var(--s4); }
  .lg-px5 { padding-left: var(--s5); padding-right: var(--s5); }
  .lg-px6 { padding-left: var(--s6); padding-right: var(--s6); }
  .lg-px7 { padding-left: var(--s7); padding-right: var(--s7); }
}

@media (min-width: 90em) {
  .xl-ma  { margin: auto; }
  .xl-mla { margin-left: auto; }
  .xl-mra { margin-right: auto; }
  .xl-mxa { margin-left: auto; margin-right: auto; }
  .xl-m0  { margin: 0; }
  .xl-m1  { margin: var(--s1); }
  .xl-m2  { margin: var(--s2); }
  .xl-m3  { margin: var(--s3); }
  .xl-m4  { margin: var(--s4); }
  .xl-m5  { margin: var(--s5); }
  .xl-m6  { margin: var(--s6); }
  .xl-m7  { margin: var(--s7); }

  .xl-mt0 { margin-top: 0; }
  .xl-mt1 { margin-top: var(--s1); }
  .xl-mt2 { margin-top: var(--s2); }
  .xl-mt3 { margin-top: var(--s3); }
  .xl-mt4 { margin-top: var(--s4); }
  .xl-mt5 { margin-top: var(--s5); }
  .xl-mt6 { margin-top: var(--s6); }
  .xl-mt7 { margin-top: var(--s7); }

  .xl-mb0 { margin-bottom: 0; }
  .xl-mb1 { margin-bottom: var(--s1); }
  .xl-mb2 { margin-bottom: var(--s2); }
  .xl-mb3 { margin-bottom: var(--s3); }
  .xl-mb4 { margin-bottom: var(--s4); }
  .xl-mb5 { margin-bottom: var(--s5); }
  .xl-mb6 { margin-bottom: var(--s6); }
  .xl-mb7 { margin-bottom: var(--s7); }

  .xl-ml0 { margin-left: 0; }
  .xl-ml1 { margin-left: var(--s1); }
  .xl-ml2 { margin-left: var(--s2); }
  .xl-ml3 { margin-left: var(--s3); }
  .xl-ml4 { margin-left: var(--s4); }
  .xl-ml5 { margin-left: var(--s5); }
  .xl-ml6 { margin-left: var(--s6); }
  .xl-ml7 { margin-left: var(--s7); }

  .xl-mr0 { margin-right: 0; }
  .xl-mr1 { margin-right: var(--s1); }
  .xl-mr2 { margin-right: var(--s2); }
  .xl-mr3 { margin-right: var(--s3); }
  .xl-mr4 { margin-right: var(--s4); }
  .xl-mr5 { margin-right: var(--s5); }
  .xl-mr6 { margin-right: var(--s6); }
  .xl-mr7 { margin-right: var(--s7); }

  .xl-my0 { margin-top: 0; margin-bottom: 0; }
  .xl-my1 { margin-top: var(--s1); margin-bottom: var(--s1); }
  .xl-my2 { margin-top: var(--s2); margin-bottom: var(--s2); }
  .xl-my3 { margin-top: var(--s3); margin-bottom: var(--s3); }
  .xl-my4 { margin-top: var(--s4); margin-bottom: var(--s4); }
  .xl-my5 { margin-top: var(--s5); margin-bottom: var(--s5); }
  .xl-my6 { margin-top: var(--s6); margin-bottom: var(--s6); }
  .xl-my7 { margin-top: var(--s7); margin-bottom: var(--s7); }

  .xl-mx0 { margin-left: 0; margin-right: 0; }
  .xl-mx1 { margin-left: var(--s1); margin-right: var(--s1); }
  .xl-mx2 { margin-left: var(--s2); margin-right: var(--s2); }
  .xl-mx3 { margin-left: var(--s3); margin-right: var(--s3); }
  .xl-mx4 { margin-left: var(--s4); margin-right: var(--s4); }
  .xl-mx5 { margin-left: var(--s5); margin-right: var(--s5); }
  .xl-mx6 { margin-left: var(--s6); margin-right: var(--s6); }
  .xl-mx7 { margin-left: var(--s7); margin-right: var(--s7); }

  .xl-mt-0 { margin-top: 0; }
  .xl-mt-1 { margin-top: calc(0rem - var(--s1)); }
  .xl-mt-2 { margin-top: calc(0rem - var(--s2)); }
  .xl-mt-3 { margin-top: calc(0rem - var(--s3)); }
  .xl-mt-4 { margin-top: calc(0rem - var(--s4)); }
  .xl-mt-5 { margin-top: calc(0rem - var(--s5)); }
  .xl-mt-6 { margin-top: calc(0rem - var(--s6)); }
  .xl-mt-7 { margin-top: calc(0rem - var(--s7)); }

  .xl-mb-0 { margin-bottom: 0; }
  .xl-mb-1 { margin-bottom: calc(0rem - var(--s1)); }
  .xl-mb-2 { margin-bottom: calc(0rem - var(--s2)); }
  .xl-mb-3 { margin-bottom: calc(0rem - var(--s3)); }
  .xl-mb-4 { margin-bottom: calc(0rem - var(--s4)); }
  .xl-mb-5 { margin-bottom: calc(0rem - var(--s5)); }
  .xl-mb-6 { margin-bottom: calc(0rem - var(--s6)); }
  .xl-mb-7 { margin-bottom: calc(0rem - var(--s7)); }

  .xl-ml-0 { margin-left: 0; }
  .xl-ml-1 { margin-left: calc(0rem - var(--s1)); }
  .xl-ml-2 { margin-left: calc(0rem - var(--s2)); }
  .xl-ml-3 { margin-left: calc(0rem - var(--s3)); }
  .xl-ml-4 { margin-left: calc(0rem - var(--s4)); }
  .xl-ml-5 { margin-left: calc(0rem - var(--s5)); }
  .xl-ml-6 { margin-left: calc(0rem - var(--s6)); }
  .xl-ml-7 { margin-left: calc(0rem - var(--s7)); }

  .xl-mr-0 { margin-right: 0; }
  .xl-mr-1 { margin-right: calc(0rem - var(--s1)); }
  .xl-mr-2 { margin-right: calc(0rem - var(--s2)); }
  .xl-mr-3 { margin-right: calc(0rem - var(--s3)); }
  .xl-mr-4 { margin-right: calc(0rem - var(--s4)); }
  .xl-mr-5 { margin-right: calc(0rem - var(--s5)); }
  .xl-mr-6 { margin-right: calc(0rem - var(--s6)); }
  .xl-mr-7 { margin-right: calc(0rem - var(--s7)); }

  .xl-p0  { padding: 0; }
  .xl-p1  { padding: var(--s1); }
  .xl-p2  { padding: var(--s2); }
  .xl-p3  { padding: var(--s3); }
  .xl-p4  { padding: var(--s4); }
  .xl-p5  { padding: var(--s5); }
  .xl-p6  { padding: var(--s6); }
  .xl-p7  { padding: var(--s7); }

  .xl-pt0 { padding-top: 0; }
  .xl-pt1 { padding-top: var(--s1); }
  .xl-pt2 { padding-top: var(--s2); }
  .xl-pt3 { padding-top: var(--s3); }
  .xl-pt4 { padding-top: var(--s4); }
  .xl-pt5 { padding-top: var(--s5); }
  .xl-pt6 { padding-top: var(--s6); }
  .xl-pt7 { padding-top: var(--s7); }

  .xl-pb0 { padding-bottom: 0; }
  .xl-pb1 { padding-bottom: var(--s1); }
  .xl-pb2 { padding-bottom: var(--s2); }
  .xl-pb3 { padding-bottom: var(--s3); }
  .xl-pb4 { padding-bottom: var(--s4); }
  .xl-pb5 { padding-bottom: var(--s5); }
  .xl-pb6 { padding-bottom: var(--s6); }
  .xl-pb7 { padding-bottom: var(--s7); }

  .xl-pl0 { padding-left: 0; }
  .xl-pl1 { padding-left: var(--s1); }
  .xl-pl2 { padding-left: var(--s2); }
  .xl-pl3 { padding-left: var(--s3); }
  .xl-pl4 { padding-left: var(--s4); }
  .xl-pl5 { padding-left: var(--s5); }
  .xl-pl6 { padding-left: var(--s6); }
  .xl-pl7 { padding-left: var(--s7); }

  .xl-pr0 { padding-right: 0; }
  .xl-pr1 { padding-right: var(--s1); }
  .xl-pr2 { padding-right: var(--s2); }
  .xl-pr3 { padding-right: var(--s3); }
  .xl-pr4 { padding-right: var(--s4); }
  .xl-pr5 { padding-right: var(--s5); }
  .xl-pr6 { padding-right: var(--s6); }
  .xl-pr7 { padding-right: var(--s7); }

  .xl-py0 { padding-top: 0; padding-bottom: 0; }
  .xl-py1 { padding-top: var(--s1); padding-bottom: var(--s1); }
  .xl-py2 { padding-top: var(--s2); padding-bottom: var(--s2); }
  .xl-py3 { padding-top: var(--s3); padding-bottom: var(--s3); }
  .xl-py4 { padding-top: var(--s4); padding-bottom: var(--s4); }
  .xl-py5 { padding-top: var(--s5); padding-bottom: var(--s5); }
  .xl-py6 { padding-top: var(--s6); padding-bottom: var(--s6); }
  .xl-py7 { padding-top: var(--s7); padding-bottom: var(--s7); }

  .xl-px0 { padding-left: 0; padding-right: 0; }
  .xl-px1 { padding-left: var(--s1); padding-right: var(--s1); }
  .xl-px2 { padding-left: var(--s2); padding-right: var(--s2); }
  .xl-px3 { padding-left: var(--s3); padding-right: var(--s3); }
  .xl-px4 { padding-left: var(--s4); padding-right: var(--s4); }
  .xl-px5 { padding-left: var(--s5); padding-right: var(--s5); }
  .xl-px6 { padding-left: var(--s6); padding-right: var(--s6); }
  .xl-px7 { padding-left: var(--s7); padding-right: var(--s7); }
}