:root {
  --padding-1: 0.5rem;
  --padding-2: 1rem;
  --padding-3: 1.5rem;
  --padding-4: 2rem;

  --margin-1: 0.5rem;
  --margin-2: 1rem;
  --margin-3: 1.5rem;
  --margin-4: 2rem;

  --footprint-spacing-xs: 6px;
  --footprint-spacing-s: 12px;
  --footprint-spacing-m: 18px;
  --footprint-spacing-l: 24px;
  --footprint-spacing-xl: 40px;
}

/* padding xs:6px */
.footprint-p-xs,
:local(.footprint-p-xs) {
  padding: var(--footprint-spacing-xs);
}

.footprint-px-xs,
:local(.footprint-px-xs) {
  padding: 0 var(--footprint-spacing-xs);
}

.footprint-py-xs,
:local(.footprint-py-xs) {
  padding: var(--footprint-spacing-xs) 0;
}

.footprint-pt-xs,
:local(.footprint-pt-xs) {
  padding: var(--footprint-spacing-xs) 0 0 0;
}

.footprint-pb-xs,
:local(.footprint-pb-xs) {
  padding: 0 0 var(--footprint-spacing-xs) 0;
}

.footprint-pl-xs,
:local(.footprint-pl-xs) {
  padding: 0 0 0 var(--footprint-spacing-xs);
}

.footprint-pr-xs,
:local(.footprint-pr-xs) {
  padding: 0 var(--footprint-spacing-xs) 0 0;
}

/* padding s: 12px */
.footprint-p-s,
:local(.footprint-p-s) {
  padding: var(--footprint-spacing-s);
}

.footprint-px-s,
:local(.footprint-px-s) {
  padding: 0 var(--footprint-spacing-s);
}

.footprint-py-s,
:local(.footprint-py-s) {
  padding: var(--footprint-spacing-s) 0;
}

.footprint-pt-s,
:local(.footprint-pt-s) {
  padding: var(--footprint-spacing-s) 0 0 0;
}

.footprint-pb-s,
:local(.footprint-pb-s) {
  padding: 0 0 var(--footprint-spacing-s) 0;
}

.footprint-pl-s,
:local(.footprint-pl-s) {
  padding: 0 0 0 var(--footprint-spacing-s);
}

.footprint-pr-s,
:local(.footprint-pr-s) {
  padding: 0 var(--footprint-spacing-s) 0 0;
}

/* padding m: 18px */
.footprint-p-m,
:local(.footprint-p-m) {
  padding: var(--footprint-spacing-m);
}

.footprint-px-m,
:local(.footprint-px-m) {
  padding: 0 var(--footprint-spacing-m);
}

.footprint-py-m,
:local(.footprint-py-m) {
  padding: var(--footprint-spacing-m) 0;
}

.footprint-pt-m,
:local(.footprint-pt-m) {
  padding: var(--footprint-spacing-m) 0 0 0;
}

.footprint-pb-m,
:local(.footprint-pb-m) {
  padding: 0 0 var(--footprint-spacing-m) 0;
}

.footprint-pl-m,
:local(.footprint-pl-m) {
  padding: 0 0 0 var(--footprint-spacing-m);
}

.footprint-pr-m,
:local(.footprint-pr-m) {
  padding: 0 var(--footprint-spacing-m) 0 0;
}

/* padding l: 24px */
.footprint-p-l,
:local(.footprint-p-l) {
  padding: var(--footprint-spacing-l);
}

.footprint-px-l,
:local(.footprint-px-l) {
  padding: 0 var(--footprint-spacing-l);
}

.footprint-py-l,
:local(.footprint-py-l) {
  padding: var(--footprint-spacing-l) 0;
}

.footprint-pt-l,
:local(.footprint-pt-l) {
  padding: var(--footprint-spacing-l) 0 0 0;
}

.footprint-pb-l,
:local(.footprint-pb-l) {
  padding: 0 0 var(--footprint-spacing-l) 0;
}

.footprint-pl-l,
:local(.footprint-pl-l) {
  padding: 0 0 0 var(--footprint-spacing-l);
}

.footprint-pr-l,
:local(.footprint-pr-l) {
  padding: 0 var(--footprint-spacing-l) 0 0;
}

/* padding xl: 40px */
.footprint-p-xl,
:local(.footprint-p-xl) {
  padding: var(--footprint-spacing-xl);
}

.footprint-px-xl,
:local(.footprint-px-xl) {
  padding: 0 var(--footprint-spacing-xl);
}

.footprint-py-xl,
:local(.footprint-py-xl) {
  padding: var(--footprint-spacing-xl) 0;
}

.footprint-pt-xl,
:local(.footprint-pt-xl) {
  padding: var(--footprint-spacing-xl) 0 0 0;
}

.footprint-pb-xl,
:local(.footprint-pb-xl) {
  padding: 0 0 var(--footprint-spacing-xl) 0;
}

.footprint-pl-xl,
:local(.footprint-pl-xl) {
  padding: 0 0 0 var(--footprint-spacing-xl);
}

.footprint-pr-xl,
:local(.footprint-pr-xl) {
  padding: 0 var(--footprint-spacing-xl) 0 0;
}

/* margin xs: 6px */
.footprint-m-xs,
:local(.footprint-m-xs) {
  margin: var(--footprint-spacing-xs);
}

.footprint-mx-xs,
:local(.footprint-mx-xs) {
  margin: 0 var(--footprint-spacing-xs);
}

.footprint-my-xs,
:local(.footprint-my-xs) {
  margin: var(--footprint-spacing-xs) 0;
}

.footprint-mt-xs,
:local(.footprint-mt-xs) {
  margin: var(--footprint-spacing-xs) 0 0 0;
}

.footprint-mb-xs,
:local(.footprint-mb-xs) {
  margin: 0 0 var(--footprint-spacing-xs) 0;
}

.footprint-ml-xs,
:local(.footprint-ml-xs) {
  margin: 0 0 0 var(--footprint-spacing-xs);
}

.footprint-mr-xs,
:local(.footprint-mr-xs) {
  margin: 0 var(--footprint-spacing-xs) 0 0;
}

/* margin s: 12px */
.footprint-m-s,
:local(.footprint-m-s) {
  margin: var(--footprint-spacing-s);
}

.footprint-mx-s,
:local(.footprint-mx-s) {
  margin: 0 var(--footprint-spacing-s);
}

.footprint-my-s,
:local(.footprint-my-s) {
  margin: var(--footprint-spacing-s) 0;
}

.footprint-mt-s,
:local(.footprint-mt-s) {
  margin: var(--footprint-spacing-s) 0 0 0;
}

.footprint-mb-s,
:local(.footprint-mb-s) {
  margin: 0 0 var(--footprint-spacing-s) 0;
}

.footprint-ml-s,
:local(.footprint-ml-s) {
  margin: 0 0 0 var(--footprint-spacing-s);
}

.footprint-mr-s,
:local(.footprint-mr-s) {
  margin: 0 var(--footprint-spacing-s) 0 0;
}

/* margin m: 18px */
.footprint-m-m,
:local(.footprint-m-m) {
  margin: var(--footprint-spacing-m);
}

.footprint-mx-m,
:local(.footprint-mx-m) {
  margin: 0 var(--footprint-spacing-m);
}

.footprint-my-m,
:local(.footprint-my-m) {
  margin: var(--footprint-spacing-m) 0;
}

.footprint-mt-m,
:local(.footprint-mt-m) {
  margin: var(--footprint-spacing-m) 0 0 0;
}

.footprint-mb-m,
:local(.footprint-mb-m) {
  margin: 0 0 var(--footprint-spacing-m) 0;
}

.footprint-ml-m,
:local(.footprint-ml-m) {
  margin: 0 0 0 var(--footprint-spacing-m);
}

.footprint-mr-m,
:local(.footprint-mr-m) {
  margin: 0 var(--footprint-spacing-m) 0 0;
}

/* margin l: 24px */
.footprint-m-l,
:local(.footprint-m-l) {
  margin: var(--footprint-spacing-l);
}

.footprint-mx-l,
:local(.footprint-mx-l) {
  margin: 0 var(--footprint-spacing-l);
}

.footprint-my-l,
:local(.footprint-my-l) {
  margin: var(--footprint-spacing-l) 0;
}

.footprint-mt-l,
:local(.footprint-mt-l) {
  margin: var(--footprint-spacing-l) 0 0 0;
}

.footprint-mb-l,
:local(.footprint-mb-l) {
  margin: 0 0 var(--footprint-spacing-l) 0;
}

.footprint-ml-l,
:local(.footprint-ml-l) {
  margin: 0 0 0 var(--footprint-spacing-l);
}

.footprint-mr-l,
:local(.footprint-mr-l) {
  margin: 0 var(--footprint-spacing-l) 0 0;
}

/* margin xl: 40px */
.footprint-m-xl,
:local(.footprint-m-xl) {
  margin: var(--footprint-spacing-xl);
}

.footprint-mx-xl,
:local(.footprint-mx-xl) {
  margin: 0 var(--footprint-spacing-xl);
}

.footprint-my-xl,
:local(.footprint-my-xl) {
  margin: var(--footprint-spacing-xl) 0;
}

.footprint-mt-xl,
:local(.footprint-mt-xl) {
  margin: var(--footprint-spacing-xl) 0 0 0;
}

.footprint-mb-xl,
:local(.footprint-mb-xl) {
  margin: 0 0 var(--footprint-spacing-xl) 0;
}

.footprint-ml-xl,
:local(.footprint-ml-xl) {
  margin: 0 0 0 var(--footprint-spacing-xl);
}

.footprint-mr-xl,
:local(.footprint-mr-xl) {
  margin: 0 var(--footprint-spacing-xl) 0 0;
}
/* padding xs:6px */
.footprint-p-xs,
:local(.footprint-p-xs) {
  padding: var(--footprint-spacing-xs);
}

.footprint-px-xs,
:local(.footprint-px-xs) {
  padding: 0 var(--footprint-spacing-xs);
}

.footprint-py-xs,
:local(.footprint-py-xs) {
  padding: var(--footprint-spacing-xs) 0;
}

.footprint-pt-xs,
:local(.footprint-pt-xs) {
  padding: var(--footprint-spacing-xs) 0 0 0;
}

.footprint-pb-xs,
:local(.footprint-pb-xs) {
  padding: 0 0 var(--footprint-spacing-xs) 0;
}

.footprint-pl-xs,
:local(.footprint-pl-xs) {
  padding: 0 0 0 var(--footprint-spacing-xs);
}

.footprint-pr-xs,
:local(.footprint-pr-xs) {
  padding: 0 var(--footprint-spacing-xs) 0 0;
}

/* padding s: 12px */
.footprint-p-s,
:local(.footprint-p-s) {
  padding: var(--footprint-spacing-s);
}

.footprint-px-s,
:local(.footprint-px-s) {
  padding: 0 var(--footprint-spacing-s);
}

.footprint-py-s,
:local(.footprint-py-s) {
  padding: var(--footprint-spacing-s) 0;
}

.footprint-pt-s,
:local(.footprint-pt-s) {
  padding: var(--footprint-spacing-s) 0 0 0;
}

.footprint-pb-s,
:local(.footprint-pb-s) {
  padding: 0 0 var(--footprint-spacing-s) 0;
}

.footprint-pl-s,
:local(.footprint-pl-s) {
  padding: 0 0 0 var(--footprint-spacing-s);
}

.footprint-pr-s,
:local(.footprint-pr-s) {
  padding: 0 var(--footprint-spacing-s) 0 0;
}

/* padding m: 18px */
.footprint-p-m,
:local(.footprint-p-m) {
  padding: var(--footprint-spacing-m);
}

.footprint-px-m,
:local(.footprint-px-m) {
  padding: 0 var(--footprint-spacing-m);
}

.footprint-py-m,
:local(.footprint-py-m) {
  padding: var(--footprint-spacing-m) 0;
}

.footprint-pt-m,
:local(.footprint-pt-m) {
  padding: var(--footprint-spacing-m) 0 0 0;
}

.footprint-pb-m,
:local(.footprint-pb-m) {
  padding: 0 0 var(--footprint-spacing-m) 0;
}

.footprint-pl-m,
:local(.footprint-pl-m) {
  padding: 0 0 0 var(--footprint-spacing-m);
}

.footprint-pr-m,
:local(.footprint-pr-m) {
  padding: 0 var(--footprint-spacing-m) 0 0;
}

/* padding l: 24px */
.footprint-p-l,
:local(.footprint-p-l) {
  padding: var(--footprint-spacing-l);
}

.footprint-px-l,
:local(.footprint-px-l) {
  padding: 0 var(--footprint-spacing-l);
}

.footprint-py-l,
:local(.footprint-py-l) {
  padding: var(--footprint-spacing-l) 0;
}

.footprint-pt-l,
:local(.footprint-pt-l) {
  padding: var(--footprint-spacing-l) 0 0 0;
}

.footprint-pb-l,
:local(.footprint-pb-l) {
  padding: 0 0 var(--footprint-spacing-l) 0;
}

.footprint-pl-l,
:local(.footprint-pl-l) {
  padding: 0 0 0 var(--footprint-spacing-l);
}

.footprint-pr-l,
:local(.footprint-pr-l) {
  padding: 0 var(--footprint-spacing-l) 0 0;
}

/* padding xl: 40px */
.footprint-p-xl,
:local(.footprint-p-xl) {
  padding: var(--footprint-spacing-xl);
}

.footprint-px-xl,
:local(.footprint-px-xl) {
  padding: 0 var(--footprint-spacing-xl);
}

.footprint-py-xl,
:local(.footprint-py-xl) {
  padding: var(--footprint-spacing-xl) 0;
}

.footprint-pt-xl,
:local(.footprint-pt-xl) {
  padding: var(--footprint-spacing-xl) 0 0 0;
}

.footprint-pb-xl,
:local(.footprint-pb-xl) {
  padding: 0 0 var(--footprint-spacing-xl) 0;
}

.footprint-pl-xl,
:local(.footprint-pl-xl) {
  padding: 0 0 0 var(--footprint-spacing-xl);
}

.footprint-pr-xl,
:local(.footprint-pr-xl) {
  padding: 0 var(--footprint-spacing-xl) 0 0;
}

/* margin xs: 6px */
.footprint-m-xs,
:local(.footprint-m-xs) {
  margin: var(--footprint-spacing-xs);
}

.footprint-mx-xs,
:local(.footprint-mx-xs) {
  margin: 0 var(--footprint-spacing-xs);
}

.footprint-my-xs,
:local(.footprint-my-xs) {
  margin: var(--footprint-spacing-xs) 0;
}

.footprint-mt-xs,
:local(.footprint-mt-xs) {
  margin: var(--footprint-spacing-xs) 0 0 0;
}

.footprint-mb-xs,
:local(.footprint-mb-xs) {
  margin: 0 0 var(--footprint-spacing-xs) 0;
}

.footprint-ml-xs,
:local(.footprint-ml-xs) {
  margin: 0 0 0 var(--footprint-spacing-xs);
}

.footprint-mr-xs,
:local(.footprint-mr-xs) {
  margin: 0 var(--footprint-spacing-xs) 0 0;
}

/* margin s: 12px */
.footprint-m-s,
:local(.footprint-m-s) {
  margin: var(--footprint-spacing-s);
}

.footprint-mx-s,
:local(.footprint-mx-s) {
  margin: 0 var(--footprint-spacing-s);
}

.footprint-my-s,
:local(.footprint-my-s) {
  margin: var(--footprint-spacing-s) 0;
}

.footprint-mt-s,
:local(.footprint-mt-s) {
  margin: var(--footprint-spacing-s) 0 0 0;
}

.footprint-mb-s,
:local(.footprint-mb-s) {
  margin: 0 0 var(--footprint-spacing-s) 0;
}

.footprint-ml-s,
:local(.footprint-ml-s) {
  margin: 0 0 0 var(--footprint-spacing-s);
}

.footprint-mr-s,
:local(.footprint-mr-s) {
  margin: 0 var(--footprint-spacing-s) 0 0;
}

/* margin m: 18px */
.footprint-m-m,
:local(.footprint-m-m) {
  margin: var(--footprint-spacing-m);
}

.footprint-mx-m,
:local(.footprint-mx-m) {
  margin: 0 var(--footprint-spacing-m);
}

.footprint-my-m,
:local(.footprint-my-m) {
  margin: var(--footprint-spacing-m) 0;
}

.footprint-mt-m,
:local(.footprint-mt-m) {
  margin: var(--footprint-spacing-m) 0 0 0;
}

.footprint-mb-m,
:local(.footprint-mb-m) {
  margin: 0 0 var(--footprint-spacing-m) 0;
}

.footprint-ml-m,
:local(.footprint-ml-m) {
  margin: 0 0 0 var(--footprint-spacing-m);
}

.footprint-mr-m,
:local(.footprint-mr-m) {
  margin: 0 var(--footprint-spacing-m) 0 0;
}

/* margin l: 24px */
.footprint-m-l,
:local(.footprint-m-l) {
  margin: var(--footprint-spacing-l);
}

.footprint-mx-l,
:local(.footprint-mx-l) {
  margin: 0 var(--footprint-spacing-l);
}

.footprint-my-l,
:local(.footprint-my-l) {
  margin: var(--footprint-spacing-l) 0;
}

.footprint-mt-l,
:local(.footprint-mt-l) {
  margin: var(--footprint-spacing-l) 0 0 0;
}

.footprint-mb-l,
:local(.footprint-mb-l) {
  margin: 0 0 var(--footprint-spacing-l) 0;
}

.footprint-ml-l,
:local(.footprint-ml-l) {
  margin: 0 0 0 var(--footprint-spacing-l);
}

.footprint-mr-l,
:local(.footprint-mr-l) {
  margin: 0 var(--footprint-spacing-l) 0 0;
}

/* margin xl: 40px */
.footprint-m-xl,
:local(.footprint-m-xl) {
  margin: var(--footprint-spacing-xl);
}

.footprint-mx-xl,
:local(.footprint-mx-xl) {
  margin: 0 var(--footprint-spacing-xl);
}

.footprint-my-xl,
:local(.footprint-my-xl) {
  margin: var(--footprint-spacing-xl) 0;
}

.footprint-mt-xl,
:local(.footprint-mt-xl) {
  margin: var(--footprint-spacing-xl) 0 0 0;
}

.footprint-mb-xl,
:local(.footprint-mb-xl) {
  margin: 0 0 var(--footprint-spacing-xl) 0;
}

.footprint-ml-xl,
:local(.footprint-ml-xl) {
  margin: 0 0 0 var(--footprint-spacing-xl);
}

.footprint-mr-xl,
:local(.footprint-mr-xl) {
  margin: 0 var(--footprint-spacing-xl) 0 0;
}


.ml-auto,
:local(.ml-auto) {
  margin-left: auto;
}
.mr-auto,
:local(.mr-auto) {
  margin-right: auto;
}
.mt-auto {
  margin-top: auto;
}

.mb-auto {
  margin-bottom: auto;
}

/* padding */

/* 0 */
.p0,
:local(.p0) {
  padding: 0;
}
.pt0,
:local(.pt0) {
  padding-top: 0;
}
.pb0,
:local(.pb0) {
  padding-bottom: 0;
}
.pl0,
:local(.pl0) {
  padding-left: 0;
}
.pr0,
:local(.pr0) {
  padding-right: 0;
}

/* 1 */
.p1,
:local(.p1) {
  padding: var(--padding-1);
}

.px1,
:local(.px1) {
  padding-left: var(--padding-1);
  padding-right: var(--padding-1);
}

.py1,
:local(.py1) {
  padding-top: var(--padding-1);
  padding-bottom: var(--padding-1);
}

.pt1,
:local(.pt1) {
  padding-top: var(--padding-1);
}
.pb1,
:local(.pb1) {
  padding-bottom: var(--padding-1);
}
.pl1,
:local(.pl1) {
  padding-left: var(--padding-1);
}
.pr1,
:local(.pr1) {
  padding-right: var(--padding-1);
}

/* 2 */

.p2,
:local(.p2) {
  padding: var(--padding-2);
}

.px2,
:local(.px2) {
  padding-left: var(--padding-2);
  padding-right: var(--padding-2);
}

.py2,
:local(.py2) {
  padding-top: var(--padding-2);
  padding-bottom: var(--padding-2);
}

.pt2,
:local(.pt2) {
  padding-top: var(--padding-2);
}
.pb2,
:local(.pb2) {
  padding-bottom: var(--padding-2);
}
.pl2,
:local(.pl2) {
  padding-left: var(--padding-2);
}
.pr2,
:local(.pr2) {
  padding-right: var(--padding-2);
}

/* 3 */

.p3,
:local(.p3) {
  padding: var(--padding-3);
}

.px3,
:local(.px3) {
  padding-left: var(--padding-3);
  padding-right: var(--padding-3);
}

.py3,
:local(.py3) {
  padding-top: var(--padding-3);
  padding-bottom: var(--padding-3);
}

.pt3,
:local(.pt3) {
  padding-top: var(--padding-3);
}
.pb3,
:local(.pb3) {
  padding-bottom: var(--padding-3);
}
.pl3,
:local(.pl3) {
  padding-left: var(--padding-3);
}
.pr3,
:local(.pr3) {
  padding-right: var(--padding-3);
}

/* 4 */

.p4,
:local(.p4) {
  padding: var(--padding-4);
}

.px4,
:local(.px4) {
  padding-left: var(--padding-4);
  padding-right: var(--padding-4);
}

.py4,
:local(.py4) {
  padding-top: var(--padding-4);
  padding-bottom: var(--padding-4);
}

.pt4,
:local(.pt4) {
  padding-top: var(--padding-4);
}
.pb4,
:local(.pb4) {
  padding-bottom: var(--padding-4);
}
.pl4,
:local(.pl4) {
  padding-left: var(--padding-4);
}
.pr4,
:local(.pr4) {
  padding-right: var(--padding-4);
}

/* margin */

/* 0 */
.m0,
:local(.m0) {
  margin: 0;
}
.mt0,
:local(.mt0) {
  margin-top: 0;
}
.mb0,
:local(.mb0) {
  margin-bottom: 0;
}
.ml0,
:local(.ml0) {
  margin-left: 0;
}
.mr0,
:local(.mr0) {
  margin-right: 0;
}

/* 1 */
.m1,
:local(.m1) {
  margin: var(--margin-1);
}

.mx1,
:local(.mx1) {
  margin-left: var(--margin-1);
  margin-right: var(--margin-1);
}

.my1,
:local(.my1) {
  margin-top: var(--margin-1);
  margin-bottom: var(--margin-1);
}

.mt1,
:local(.mt1) {
  margin-top: var(--margin-1);
}
.mb1,
:local(.mb1) {
  margin-bottom: var(--margin-1);
}
.ml1,
:local(.ml1) {
  margin-left: var(--margin-1);
}
.mr1,
:local(.mr1) {
  margin-right: var(--margin-1);
}

/* 2 */

.m2,
:local(.m2) {
  margin: var(--margin-2);
}

.mx2,
:local(.mx2) {
  margin-left: var(--margin-2);
  margin-right: var(--margin-2);
}

.my2,
:local(.my2) {
  margin-top: var(--margin-2);
  margin-bottom: var(--margin-2);
}

.mt2,
:local(.mt2) {
  margin-top: var(--margin-2);
}
.mb2,
:local(.mb2) {
  margin-bottom: var(--margin-2);
}
.ml2,
:local(.ml2) {
  margin-left: var(--margin-2);
}
.mr2,
:local(.mr2) {
  margin-right: var(--margin-2);
}

/* 3 */

.m3,
:local(.m3) {
  margin: var(--margin-3);
}

.mx3,
:local(.mx3) {
  margin-left: var(--margin-3);
  margin-right: var(--margin-3);
}

.my3,
:local(.my3) {
  margin-top: var(--padding-3);
  margin-bottom: var(--padding-3);
}

.mt3,
:local(.mt3) {
  margin-top: var(--margin-3);
}
.mb3,
:local(.mb3) {
  margin-bottom: var(--margin-3);
}
.ml3,
:local(.ml3) {
  margin-left: var(--margin-3);
}
.mr3,
:local(.mr3) {
  margin-right: var(--margin-3);
}

/* 4 */

.m4,
:local(.m4) {
  margin: var(--margin-4);
}

.mx4,
:local(.mx4) {
  margin-left: var(--margin-4);
  margin-right: var(--margin-4);
}

.my4,
:local(.my4) {
  margin-top: var(--margin-4);
  margin-bottom: var(--margin-4);
}

.mt4,
:local(.mt4) {
  margin-top: var(--margin-4);
}
.mb4,
:local(.mb4) {
  margin-bottom: var(--margin-4);
}
.ml4,
:local(.ml4) {
  margin-left: var(--margin-4);
}
.mr4,
:local(.mr4) {
  margin-right: var(--margin-4);
}

/* negative margin (mainly for correction of horizontal positioning) */
.mln1 {
  margin-left: calc(-1 * var(--margin-1));
}
.mln2 {
  margin-left: calc(-1 * var(--margin-2));
}
.mln3 {
  margin-left: calc(-1 * var(--margin-3));
}
.mln4 {
  margin-left: calc(-1 * var(--margin-4));
}

.mbn1 {
  margin-bottom: calc(-1 * var(--margin-1));
}
.mbn2 {
  margin-bottom: calc(-1 * var(--margin-2));
}
.mbn3 {
  margin-bottom: calc(-1 * var(--margin-3));
}
.mbn4 {
  margin-bottom: calc(-1 * var(--margin-4));
}

/* responsive spacing */

@media screen and (--breakpoint-min-sm) {
  /* padding */

  /* 0 */
  .sm-p0 {
    padding: 0;
  }
  .sm-pt0 {
    padding-top: 0;
  }
  .sm-pb0 {
    padding-bottom: 0;
  }
  .sm-pl0 {
    padding-left: 0;
  }
  .sm-pr0 {
    padding-right: 0;
  }

  /* 1 */
  .sm-p1 {
    padding: var(--padding-1);
  }

  .sm-px1 {
    padding-left: var(--padding-1);
    padding-right: var(--padding-1);
  }

  .sm-py1 {
    padding-top: var(--padding-1);
    padding-bottom: var(--padding-1);
  }

  .sm-pt1 {
    padding-top: var(--padding-1);
  }
  .sm-pb1 {
    padding-bottom: var(--padding-1);
  }
  .sm-pl1 {
    padding-left: var(--padding-1);
  }
  .sm-pr1 {
    padding-right: var(--padding-1);
  }

  /* 2 */

  .sm-p2 {
    padding: var(--padding-2);
  }

  .sm-px2 {
    padding-left: var(--padding-2);
    padding-right: var(--padding-2);
  }

  .sm-py2 {
    padding-top: var(--padding-2);
    padding-bottom: var(--padding-2);
  }

  .sm-pt2 {
    padding-top: var(--padding-2);
  }
  .sm-pb2 {
    padding-bottom: var(--padding-2);
  }
  .sm-pl2 {
    padding-left: var(--padding-2);
  }
  .sm-pr2 {
    padding-right: var(--padding-2);
  }

  /* 3 */

  .sm-p3 {
    padding: var(--padding-3);
  }

  .sm-px3 {
    padding-left: var(--padding-3);
    padding-right: var(--padding-3);
  }

  .sm-py3 {
    padding-top: var(--padding-3);
    padding-bottom: var(--padding-3);
  }

  .sm-pt3 {
    padding-top: var(--padding-3);
  }
  .sm-pb3 {
    padding-bottom: var(--padding-3);
  }
  .sm-pl3 {
    padding-left: var(--padding-3);
  }
  .sm-pr3 {
    padding-right: var(--padding-3);
  }

  /* 4 */

  .sm-p4 {
    padding: var(--padding-4);
  }

  .sm-px4 {
    padding-left: var(--padding-4);
    padding-right: var(--padding-4);
  }

  .sm-py4 {
    padding-top: var(--padding-4);
    padding-bottom: var(--padding-4);
  }

  .sm-pt4 {
    padding-top: var(--padding-4);
  }
  .sm-pb4 {
    padding-bottom: var(--padding-4);
  }
  .sm-pl4 {
    padding-left: var(--padding-4);
  }
  .sm-pr4 {
    padding-right: var(--padding-4);
  }

  /* margin */

  /* 0 */
  .sm-m0 {
    margin: 0;
  }
  .sm-mt0 {
    margin-top: 0;
  }
  .sm-mb0 {
    margin-bottom: 0;
  }
  .sm-ml0 {
    margin-left: 0;
  }
  .sm-mr0 {
    margin-right: 0;
  }

  /* 1 */
  .sm-m1 {
    margin: var(--margin-1);
  }

  .sm-mx1 {
    margin-left: var(--margin-1);
    margin-right: var(--margin-1);
  }

  .sm-my1 {
    margin-top: var(--margin-1);
    margin-bottom: var(--margin-1);
  }

  .sm-mt1 {
    margin-top: var(--margin-1);
  }
  .sm-mb1 {
    margin-bottom: var(--margin-1);
  }
  .sm-ml1 {
    margin-left: var(--margin-1);
  }
  .sm-mr1 {
    margin-right: var(--margin-1);
  }

  /* 2 */

  .sm-m2 {
    margin: var(--margin-2);
  }

  .sm-mx2 {
    margin-left: var(--margin-2);
    margin-right: var(--margin-2);
  }

  .sm-my2 {
    margin-top: var(--margin-2);
    margin-bottom: var(--margin-2);
  }

  .sm-mt2 {
    margin-top: var(--margin-2);
  }
  .sm-mb2 {
    margin-bottom: var(--margin-2);
  }
  .sm-ml2 {
    margin-left: var(--margin-2);
  }
  .sm-mr2 {
    margin-right: var(--margin-2);
  }

  /* 3 */

  .sm-m3 {
    margin: var(--margin-3);
  }

  .sm-mx3 {
    margin-left: var(--margin-3);
    margin-right: var(--margin-3);
  }

  .sm-my3 {
    margin-top: var(--padding-3);
    margin-bottom: var(--padding-3);
  }

  .sm-mt3 {
    margin-top: var(--margin-3);
  }
  .sm-mb3 {
    margin-bottom: var(--margin-3);
  }
  .sm-ml3 {
    margin-left: var(--margin-3);
  }
  .sm-mr3 {
    margin-right: var(--margin-3);
  }

  /* 4 */

  .sm-m4 {
    margin: var(--margin-4);
  }

  .sm-mx4 {
    margin-left: var(--margin-4);
    margin-right: var(--margin-4);
  }

  .sm-my4 {
    margin-top: var(--margin-4);
    margin-bottom: var(--margin-4);
  }

  .sm-mt4 {
    margin-top: var(--margin-4);
  }
  .sm-mb4 {
    margin-bottom: var(--margin-4);
  }
  .sm-ml4 {
    margin-left: var(--margin-4);
  }
  .sm-mr4 {
    margin-right: var(--margin-4);
  }
}

@media screen and (--breakpoint-min-md) {
  /* padding */

  /* 0 */
  .md-p0 {
    padding: 0;
  }
  .md-pt0 {
    padding-top: 0;
  }
  .md-pb0 {
    padding-bottom: 0;
  }
  .md-pl0 {
    padding-left: 0;
  }
  .md-pr0 {
    padding-right: 0;
  }

  /* 1 */
  .md-p1 {
    padding: var(--padding-1);
  }

  .md-px1 {
    padding-left: var(--padding-1);
    padding-right: var(--padding-1);
  }

  .md-py1 {
    padding-top: var(--padding-1);
    padding-bottom: var(--padding-1);
  }

  .md-pt1 {
    padding-top: var(--padding-1);
  }
  .md-pb1 {
    padding-bottom: var(--padding-1);
  }
  .md-pl1 {
    padding-left: var(--padding-1);
  }
  .md-pr1 {
    padding-right: var(--padding-1);
  }

  /* 2 */

  .md-p2 {
    padding: var(--padding-2);
  }

  .md-px2 {
    padding-left: var(--padding-2);
    padding-right: var(--padding-2);
  }

  .md-py2 {
    padding-top: var(--padding-2);
    padding-bottom: var(--padding-2);
  }

  .md-pt2 {
    padding-top: var(--padding-2);
  }
  .md-pb2 {
    padding-bottom: var(--padding-2);
  }
  .md-pl2 {
    padding-left: var(--padding-2);
  }
  .md-pr2 {
    padding-right: var(--padding-2);
  }

  /* 3 */

  .md-p3 {
    padding: var(--padding-3);
  }

  .md-px3 {
    padding-left: var(--padding-3);
    padding-right: var(--padding-3);
  }

  .md-py3 {
    padding-top: var(--padding-3);
    padding-bottom: var(--padding-3);
  }

  .md-pt3 {
    padding-top: var(--padding-3);
  }
  .md-pb3 {
    padding-bottom: var(--padding-3);
  }
  .md-pl3 {
    padding-left: var(--padding-3);
  }
  .md-pr3 {
    padding-right: var(--padding-3);
  }

  /* 4 */

  .md-p4 {
    padding: var(--padding-4);
  }

  .md-px4 {
    padding-left: var(--padding-4);
    padding-right: var(--padding-4);
  }

  .md-py4 {
    padding-top: var(--padding-4);
    padding-bottom: var(--padding-4);
  }

  .md-pt4 {
    padding-top: var(--padding-4);
  }
  .md-pb4 {
    padding-bottom: var(--padding-4);
  }
  .md-pl4 {
    padding-left: var(--padding-4);
  }
  .md-pr4 {
    padding-right: var(--padding-4);
  }

  /* margin */

  /* 0 */
  .md-m0 {
    margin: 0;
  }
  .md-mt0 {
    margin-top: 0;
  }
  .md-mb0 {
    margin-bottom: 0;
  }
  .md-ml0 {
    margin-left: 0;
  }
  .md-mr0 {
    margin-right: 0;
  }

  /* 1 */
  .md-m1 {
    margin: var(--margin-1);
  }

  .md-mx1 {
    margin-left: var(--margin-1);
    margin-right: var(--margin-1);
  }

  .md-my1 {
    margin-top: var(--margin-1);
    margin-bottom: var(--margin-1);
  }

  .md-mt1 {
    margin-top: var(--margin-1);
  }
  .md-mb1 {
    margin-bottom: var(--margin-1);
  }
  .md-ml1 {
    margin-left: var(--margin-1);
  }
  .md-mr1 {
    margin-right: var(--margin-1);
  }

  /* 2 */

  .md-m2 {
    margin: var(--margin-2);
  }

  .md-mx2 {
    margin-left: var(--margin-2);
    margin-right: var(--margin-2);
  }

  .md-my2 {
    margin-top: var(--margin-2);
    margin-bottom: var(--margin-2);
  }

  .md-mt2 {
    margin-top: var(--margin-2);
  }
  .md-mb2 {
    margin-bottom: var(--margin-2);
  }
  .md-ml2 {
    margin-left: var(--margin-2);
  }
  .md-mr2 {
    margin-right: var(--margin-2);
  }

  /* 3 */

  .md-m3 {
    margin: var(--margin-3);
  }

  .md-mx3 {
    margin-left: var(--margin-3);
    margin-right: var(--margin-3);
  }

  .md-my3 {
    margin-top: var(--padding-3);
    margin-bottom: var(--padding-3);
  }

  .md-mt3 {
    margin-top: var(--margin-3);
  }
  .md-mb3 {
    margin-bottom: var(--margin-3);
  }
  .md-ml3 {
    margin-left: var(--margin-3);
  }
  .md-mr3 {
    margin-right: var(--margin-3);
  }

  /* 4 */

  .md-m4 {
    margin: var(--margin-4);
  }

  .md-mx4 {
    margin-left: var(--margin-4);
    margin-right: var(--margin-4);
  }

  .md-my4 {
    margin-top: var(--margin-4);
    margin-bottom: var(--margin-4);
  }

  .md-mt4 {
    margin-top: var(--margin-4);
  }
  .md-mb4 {
    margin-bottom: var(--margin-4);
  }
  .md-ml4 {
    margin-left: var(--margin-4);
  }
  .md-mr4 {
    margin-right: var(--margin-4);
  }
}

@media screen and (--breakpoint-min-lg) {
  /* padding */

  /* 0 */
  .lg-p0 {
    padding: 0;
  }
  .lg-pt0 {
    padding-top: 0;
  }
  .lg-pb0 {
    padding-bottom: 0;
  }
  .lg-pl0 {
    padding-left: 0;
  }
  .lg-pr0 {
    padding-right: 0;
  }

  /* 1 */
  .lg-p1 {
    padding: var(--padding-1);
  }

  .lg-px1 {
    padding-left: var(--padding-1);
    padding-right: var(--padding-1);
  }

  .lg-py1 {
    padding-top: var(--padding-1);
    padding-bottom: var(--padding-1);
  }

  .lg-pt1 {
    padding-top: var(--padding-1);
  }
  .lg-pb1 {
    padding-bottom: var(--padding-1);
  }
  .lg-pl1 {
    padding-left: var(--padding-1);
  }
  .lg-pr1 {
    padding-right: var(--padding-1);
  }

  /* 2 */

  .lg-p2 {
    padding: var(--padding-2);
  }

  .lg-px2 {
    padding-left: var(--padding-2);
    padding-right: var(--padding-2);
  }

  .lg-py2 {
    padding-top: var(--padding-2);
    padding-bottom: var(--padding-2);
  }

  .lg-pt2 {
    padding-top: var(--padding-2);
  }
  .lg-pb2 {
    padding-bottom: var(--padding-2);
  }
  .lg-pl2 {
    padding-left: var(--padding-2);
  }
  .lg-pr2 {
    padding-right: var(--padding-2);
  }

  /* 3 */

  .lg-p3 {
    padding: var(--padding-3);
  }

  .lg-px3 {
    padding-left: var(--padding-3);
    padding-right: var(--padding-3);
  }

  .lg-py3 {
    padding-top: var(--padding-3);
    padding-bottom: var(--padding-3);
  }

  .lg-pt3 {
    padding-top: var(--padding-3);
  }
  .lg-pb3 {
    padding-bottom: var(--padding-3);
  }
  .lg-pl3 {
    padding-left: var(--padding-3);
  }
  .lg-pr3 {
    padding-right: var(--padding-3);
  }

  /* 4 */

  .lg-p4 {
    padding: var(--padding-4);
  }

  .lg-px4 {
    padding-left: var(--padding-4);
    padding-right: var(--padding-4);
  }

  .lg-py4 {
    padding-top: var(--padding-4);
    padding-bottom: var(--padding-4);
  }

  .lg-pt4 {
    padding-top: var(--padding-4);
  }
  .lg-pb4 {
    padding-bottom: var(--padding-4);
  }
  .lg-pl4 {
    padding-left: var(--padding-4);
  }
  .lg-pr4 {
    padding-right: var(--padding-4);
  }

  /* margin */

  /* 0 */
  .lg-m0 {
    margin: 0;
  }
  .lg-mt0 {
    margin-top: 0;
  }
  .lg-mb0 {
    margin-bottom: 0;
  }
  .lg-ml0 {
    margin-left: 0;
  }
  .lg-mr0 {
    margin-right: 0;
  }

  /* 1 */
  .lg-m1 {
    margin: var(--margin-1);
  }

  .lg-mx1 {
    margin-left: var(--margin-1);
    margin-right: var(--margin-1);
  }

  .lg-my1 {
    margin-top: var(--margin-1);
    margin-bottom: var(--margin-1);
  }

  .lg-mt1 {
    margin-top: var(--margin-1);
  }
  .lg-mb1 {
    margin-bottom: var(--margin-1);
  }
  .lg-ml1 {
    margin-left: var(--margin-1);
  }
  .lg-mr1 {
    margin-right: var(--margin-1);
  }

  /* 2 */

  .lg-m2 {
    margin: var(--margin-2);
  }

  .lg-mx2 {
    margin-left: var(--margin-2);
    margin-right: var(--margin-2);
  }

  .lg-my2 {
    margin-top: var(--margin-2);
    margin-bottom: var(--margin-2);
  }

  .lg-mt2 {
    margin-top: var(--margin-2);
  }
  .lg-mb2 {
    margin-bottom: var(--margin-2);
  }
  .lg-ml2 {
    margin-left: var(--margin-2);
  }
  .lg-mr2 {
    margin-right: var(--margin-2);
  }

  /* 3 */

  .lg-m3 {
    margin: var(--margin-3);
  }

  .lg-mx3 {
    margin-left: var(--margin-3);
    margin-right: var(--margin-3);
  }

  .lg-my3 {
    margin-top: var(--padding-3);
    margin-bottom: var(--padding-3);
  }

  .lg-mt3 {
    margin-top: var(--margin-3);
  }
  .lg-mb3 {
    margin-bottom: var(--margin-3);
  }
  .lg-ml3 {
    margin-left: var(--margin-3);
  }
  .lg-mr3 {
    margin-right: var(--margin-3);
  }

  /* 4 */

  .lg-m4 {
    margin: var(--margin-4);
  }

  .lg-mx4 {
    margin-left: var(--margin-4);
    margin-right: var(--margin-4);
  }

  .lg-my4 {
    margin-top: var(--margin-4);
    margin-bottom: var(--margin-4);
  }

  .lg-mt4 {
    margin-top: var(--margin-4);
  }
  .lg-mb4 {
    margin-bottom: var(--margin-4);
  }
  .lg-ml4 {
    margin-left: var(--margin-4);
  }
  .lg-mr4 {
    margin-right: var(--margin-4);
  }
}

@media screen and (--breakpoint-min-xl) {
  /* padding */

  /* 0 */
  .xl-p0 {
    padding: 0;
  }
  .xl-pt0 {
    padding-top: 0;
  }
  .xl-pb0 {
    padding-bottom: 0;
  }
  .xl-pl0 {
    padding-left: 0;
  }
  .xl-pr0 {
    padding-right: 0;
  }

  /* 1 */
  .xl-p1 {
    padding: var(--padding-1);
  }

  .xl-px1 {
    padding-left: var(--padding-1);
    padding-right: var(--padding-1);
  }

  .xl-py1 {
    padding-top: var(--padding-1);
    padding-bottom: var(--padding-1);
  }

  .xl-pt1 {
    padding-top: var(--padding-1);
  }
  .xl-pb1 {
    padding-bottom: var(--padding-1);
  }
  .xl-pl1 {
    padding-left: var(--padding-1);
  }
  .xl-pr1 {
    padding-right: var(--padding-1);
  }

  /* 2 */

  .xl-p2 {
    padding: var(--padding-2);
  }

  .xl-px2 {
    padding-left: var(--padding-2);
    padding-right: var(--padding-2);
  }

  .xl-py2 {
    padding-top: var(--padding-2);
    padding-bottom: var(--padding-2);
  }

  .xl-pt2 {
    padding-top: var(--padding-2);
  }
  .xl-pb2 {
    padding-bottom: var(--padding-2);
  }
  .xl-pl2 {
    padding-left: var(--padding-2);
  }
  .xl-pr2 {
    padding-right: var(--padding-2);
  }

  /* 3 */

  .xl-p3 {
    padding: var(--padding-3);
  }

  .xl-px3 {
    padding-left: var(--padding-3);
    padding-right: var(--padding-3);
  }

  .xl-py3 {
    padding-top: var(--padding-3);
    padding-bottom: var(--padding-3);
  }

  .xl-pt3 {
    padding-top: var(--padding-3);
  }
  .xl-pb3 {
    padding-bottom: var(--padding-3);
  }
  .xl-pl3 {
    padding-left: var(--padding-3);
  }
  .xl-pr3 {
    padding-right: var(--padding-3);
  }

  /* 4 */

  .xl-p4 {
    padding: var(--padding-4);
  }

  .xl-px4 {
    padding-left: var(--padding-4);
    padding-right: var(--padding-4);
  }

  .xl-py4 {
    padding-top: var(--padding-4);
    padding-bottom: var(--padding-4);
  }

  .xl-pt4 {
    padding-top: var(--padding-4);
  }
  .xl-pb4 {
    padding-bottom: var(--padding-4);
  }
  .xl-pl4 {
    padding-left: var(--padding-4);
  }
  .xl-pr4 {
    padding-right: var(--padding-4);
  }

  /* margin */

  /* 0 */
  .xl-m0 {
    margin: 0;
  }
  .xl-mt0 {
    margin-top: 0;
  }
  .xl-mb0 {
    margin-bottom: 0;
  }
  .xl-ml0 {
    margin-left: 0;
  }
  .xl-mr0 {
    margin-right: 0;
  }

  /* 1 */
  .xl-m1 {
    margin: var(--margin-1);
  }

  .xl-mx1 {
    margin-left: var(--margin-1);
    margin-right: var(--margin-1);
  }

  .xl-my1 {
    margin-top: var(--margin-1);
    margin-bottom: var(--margin-1);
  }

  .xl-mt1 {
    margin-top: var(--margin-1);
  }
  .xl-mb1 {
    margin-bottom: var(--margin-1);
  }
  .xl-ml1 {
    margin-left: var(--margin-1);
  }
  .xl-mr1 {
    margin-right: var(--margin-1);
  }

  /* 2 */

  .xl-m2 {
    margin: var(--margin-2);
  }

  .xl-mx2 {
    margin-left: var(--margin-2);
    margin-right: var(--margin-2);
  }

  .xl-my2 {
    margin-top: var(--margin-2);
    margin-bottom: var(--margin-2);
  }

  .xl-mt2 {
    margin-top: var(--margin-2);
  }
  .xl-mb2 {
    margin-bottom: var(--margin-2);
  }
  .xl-ml2 {
    margin-left: var(--margin-2);
  }
  .xl-mr2 {
    margin-right: var(--margin-2);
  }

  /* 3 */

  .xl-m3 {
    margin: var(--margin-3);
  }

  .xl-mx3 {
    margin-left: var(--margin-3);
    margin-right: var(--margin-3);
  }

  .xl-my3 {
    margin-top: var(--padding-3);
    margin-bottom: var(--padding-3);
  }

  .xl-mt3 {
    margin-top: var(--margin-3);
  }
  .xl-mb3 {
    margin-bottom: var(--margin-3);
  }
  .xl-ml3 {
    margin-left: var(--margin-3);
  }
  .xl-mr3 {
    margin-right: var(--margin-3);
  }

  /* 4 */

  .xl-m4 {
    margin: var(--margin-4);
  }

  .xl-mx4 {
    margin-left: var(--margin-4);
    margin-right: var(--margin-4);
  }

  .xl-my4 {
    margin-top: var(--margin-4);
    margin-bottom: var(--margin-4);
  }

  .xl-mt4 {
    margin-top: var(--margin-4);
  }
  .xl-mb4 {
    margin-bottom: var(--margin-4);
  }
  .xl-ml4 {
    margin-left: var(--margin-4);
  }
  .xl-mr4 {
    margin-right: var(--margin-4);
  }
}
