:root {
  --space-0: 0;
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
}

/* Padding */

.p0,
.p0.section { padding: var(--space-0); }

.pt0,
.pt0.section { padding-top: var(--space-0); }

.pr0,
.pr0.section { padding-right: var(--space-0); }

.pb0,
.pb0.section { padding-bottom: var(--space-0); }

.pl0,
.pl0.section { padding-left: var(--space-0); }

.px0,
.px0.section {
  padding-left: var(--space-0);
  padding-right: var(--space-0);
}

.py0,
.py0.section {
  padding-top: var(--space-0);
  padding-bottom: var(--space-0);
}

.p1,
.p1.section { padding: var(--space-1); }

.pt1,
.pt1.section { padding-top: var(--space-1); }

.pr1,
.pr1.section { padding-right: var(--space-1); }

.pb1,
.pb1.section { padding-bottom: var(--space-1); }

.pl1,
.pl1.section { padding-left: var(--space-1); }

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

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

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

.pt2,
.pt2.section { padding-top: var(--space-2); }

.pr2,
.pr2.section { padding-right: var(--space-2); }

.pb2,
.pb2.section { padding-bottom: var(--space-2); }

.pl2,
.pl2.section { padding-left: var(--space-2); }

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

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

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

.pt3,
.pt3.section { padding-top: var(--space-3); }

.pr3,
.pr3.section { padding-right: var(--space-3); }

.pb3,
.pb3.section { padding-bottom: var(--space-3); }

.pl3,
.pl3.section { padding-left: var(--space-3); }

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

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

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

.pt4,
.pt4.section { padding-top: var(--space-4); }

.pr4,
.pr4.section { padding-right: var(--space-4); }

.pb4,
.pb4.section { padding-bottom: var(--space-4); }

.pl4,
.pl4.section { padding-left: var(--space-4); }

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

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

/* Margin */

.m0,
.m0.section { margin: var(--space-0); }

.mt0,
.mt0.section { margin-top: var(--space-0); }

.mr0,
.mr0.section { margin-right: var(--space-0); }

.mb0,
.mb0.section { margin-bottom: var(--space-0); }

.ml0,
.ml0.section { margin-left: var(--space-0); }

.mx0,
.mx0.section {
  margin-left: var(--space-0);
  margin-right: var(--space-0);
}

.my0,
.my0.section {
  margin-top: var(--space-0);
  margin-bottom: var(--space-0);
}

.m1,
.m1.section { margin: var(--space-1); }

.mt1,
.mt1.section { margin-top: var(--space-1); }

.mr1,
.mr1.section { margin-right: var(--space-1); }

.mb1,
.mb1.section { margin-bottom: var(--space-1); }

.ml1,
.ml1.section { margin-left: var(--space-1); }

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

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

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

.mt2,
.mt2.section { margin-top: var(--space-2); }

.mr2,
.mr2.section { margin-right: var(--space-2); }

.mb2,
.mb2.section { margin-bottom: var(--space-2); }

.ml2,
.ml2.section { margin-left: var(--space-2); }

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

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

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

.mt3,
.mt3.section { margin-top: var(--space-3); }

.mr3,
.mr3.section { margin-right: var(--space-3); }

.mb3,
.mb3.section { margin-bottom: var(--space-3); }

.ml3,
.ml3.section { margin-left: var(--space-3); }

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

.my3,
.my3.section {
  margin-top: var(--space-3);
  margin-bottom: var(--space-3);
}

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

.mt4,
.mt4.section { margin-top: var(--space-4); }

.mr4,
.mr4.section { margin-right: var(--space-4); }

.mb4,
.mb4.section { margin-bottom: var(--space-4); }

.ml4,
.ml4.section { margin-left: var(--space-4); }

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

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

/* Responsive behavior from your original system */

/* medium down */
@media screen and (max-width: 63.9375em) {
  .pt0.section { padding-top: var(--space-2); }

  .pb1,
  .pb1.section { padding-bottom: 0; }

  .pl1,
  .pl1.section { padding-left: 0; }

  .pt2,
  .pt2.section { padding-top: var(--space-2); }

  .pr2,
  .pr2.section { padding-right: 0; }

  .pb2,
  .pb2.section { padding-bottom: 0; }

  .pl2,
  .pl2.section { padding-left: 0; }

  .pt3,
  .pt3.section { padding-top: var(--space-2); }
}

/* small only */
@media screen and (max-width: 39.9375em) {
  .pt0.section { padding-top: var(--space-2); }

  .pb1,
  .pb1.section { padding-bottom: 0; }

  .pl1,
  .pl1.section { padding-left: 0; }

  .pt2,
  .pt2.section { padding-top: var(--space-2); }

  .pr2,
  .pr2.section { padding-right: 0; }

  .pb2,
  .pb2.section { padding-bottom: 0; }

  .pl2,
  .pl2.section { padding-left: 0; }

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

  .pt3,
  .pt3.section { padding-top: var(--space-2); }

  .pb3,
  .pb3.section { padding-bottom: var(--space-2); }
}