:root {
  --spacing-1: .25rem;
  --spacing-2: .5rem;
  --spacing-3: 1rem;
  --spacing-4: 1.5rem;
  --spacing-5: 2rem;
  --spacing-6: 4rem;
  --spacing-7: 8rem;
  --spacing-8: 16rem;
  --spacing-9: 20rem;
  --spacing-10: 30rem;
}

.pa0 { padding: 0 }
.pa1 { padding: var(--spacing-1); }
.pa2 { padding: var(--spacing-2); }
.pa3 { padding: var(--spacing-3); }
.pa4 { padding: var(--spacing-4); }
.pa5 { padding: var(--spacing-5); }
.pa6 { padding: var(--spacing-6); }
.pa7 { padding: var(--spacing-7); }

.pv0 { padding-top: 0; padding-bottom: 0 }
.pv1 { padding-top: var(--spacing-1); padding-bottom: var(--spacing-1); }
.pv2 { padding-top: var(--spacing-2); padding-bottom: var(--spacing-2); }
.pv3 { padding-top: var(--spacing-3); padding-bottom: var(--spacing-3); }
.pv4 { padding-top: var(--spacing-4); padding-bottom: var(--spacing-4); }
.pv5 { padding-top: var(--spacing-5); padding-bottom: var(--spacing-5); }
.pv6 { padding-top: var(--spacing-6); padding-bottom: var(--spacing-6); }
.pv7 { padding-top: var(--spacing-7); padding-bottom: var(--spacing-7); }

.ph0 { padding-left: 0; padding-right: 0 }
.ph1 { padding-left: var(--spacing-1); padding-right: var(--spacing-1); }
.ph2 { padding-left: var(--spacing-2); padding-right: var(--spacing-2); }
.ph3 { padding-left: var(--spacing-3); padding-right: var(--spacing-3); }
.ph4 { padding-left: var(--spacing-4); padding-right: var(--spacing-4); }
.ph5 { padding-left: var(--spacing-5); padding-right: var(--spacing-5); }
.ph6 { padding-left: var(--spacing-6); padding-right: var(--spacing-6); }
.ph7 { padding-left: var(--spacing-7); padding-right: var(--spacing-7); }

.pt0 { padding-top: 0 }
.pt1 { padding-top: var(--spacing-1); }
.pt2 { padding-top: var(--spacing-2); }
.pt3 { padding-top: var(--spacing-3); }
.pt4 { padding-top: var(--spacing-4); }
.pt5 { padding-top: var(--spacing-5); }
.pt6 { padding-top: var(--spacing-6); }
.pt7 { padding-top: var(--spacing-7); }

.pb0 { padding-bottom: 0 }
.pb1 { padding-bottom: var(--spacing-1); }
.pb2 { padding-bottom: var(--spacing-2); }
.pb3 { padding-bottom: var(--spacing-3); }
.pb4 { padding-bottom: var(--spacing-4); }
.pb5 { padding-bottom: var(--spacing-5); }
.pb6 { padding-bottom: var(--spacing-6); }
.pb7 { padding-bottom: var(--spacing-7); }

.pl0 { padding-left: 0 }
.pl1 { padding-left: var(--spacing-1); }
.pl2 { padding-left: var(--spacing-2); }
.pl3 { padding-left: var(--spacing-3); }
.pl4 { padding-left: var(--spacing-4); }
.pl5 { padding-left: var(--spacing-5); }
.pl6 { padding-left: var(--spacing-6); }
.pl7 { padding-left: var(--spacing-7); }

.pr0 { padding-right: 0 }
.pr1 { padding-right: var(--spacing-1); }
.pr2 { padding-right: var(--spacing-2); }
.pr3 { padding-right: var(--spacing-3); }
.pr4 { padding-right: var(--spacing-4); }
.pr5 { padding-right: var(--spacing-5); }
.pr6 { padding-right: var(--spacing-6); }
.pr7 { padding-right: var(--spacing-7); }

.ma0 { margin: 0 }
.ma1 { margin: var(--spacing-1); }
.ma2 { margin: var(--spacing-2); }
.ma3 { margin: var(--spacing-3); }
.ma4 { margin: var(--spacing-4); }
.ma5 { margin: var(--spacing-5); }
.ma6 { margin: var(--spacing-6); }
.ma7 { margin: var(--spacing-7); }

.mv0 { margin-top: 0; margin-bottom: 0 }
.mv1 { margin-top: var(--spacing-1); margin-bottom: var(--spacing-1); }
.mv2 { margin-top: var(--spacing-2); margin-bottom: var(--spacing-2); }
.mv3 { margin-top: var(--spacing-3); margin-bottom: var(--spacing-3); }
.mv4 { margin-top: var(--spacing-4); margin-bottom: var(--spacing-4); }
.mv5 { margin-top: var(--spacing-5); margin-bottom: var(--spacing-5); }
.mv6 { margin-top: var(--spacing-6); margin-bottom: var(--spacing-6); }
.mv7 { margin-top: var(--spacing-7); margin-bottom: var(--spacing-7); }

.mt0 { margin-top: 0 }
.mt1 { margin-top: var(--spacing-1); }
.mt2 { margin-top: var(--spacing-2); }
.mt3 { margin-top: var(--spacing-3); }
.mt4 { margin-top: var(--spacing-4); }
.mt5 { margin-top: var(--spacing-5); }
.mt6 { margin-top: var(--spacing-6); }
.mt7 { margin-top: var(--spacing-7); }

.mb0 { margin-bottom: 0 }
.mb1 { margin-bottom: var(--spacing-1); }
.mb2 { margin-bottom: var(--spacing-2); }
.mb3 { margin-bottom: var(--spacing-3); }
.mb4 { margin-bottom: var(--spacing-4); }
.mb5 { margin-bottom: var(--spacing-5); }
.mb6 { margin-bottom: var(--spacing-6); }
.mb7 { margin-bottom: var(--spacing-7); }

.ml0 { margin-left: 0 }
.ml1 { margin-left: var(--spacing-1); }
.ml2 { margin-left: var(--spacing-2); }
.ml3 { margin-left: var(--spacing-3); }
.ml4 { margin-left: var(--spacing-4); }
.ml5 { margin-left: var(--spacing-5); }
.ml6 { margin-left: var(--spacing-6); }
.ml7 { margin-left: var(--spacing-7); }

.mr0 { margin-right: 0 }
.mr1 { margin-right: var(--spacing-1); }
.mr2 { margin-right: var(--spacing-2); }
.mr3 { margin-right: var(--spacing-3); }
.mr4 { margin-right: var(--spacing-4); }
.mr5 { margin-right: var(--spacing-5); }
.mr6 { margin-right: var(--spacing-6); }
.mr7 { margin-right: var(--spacing-7); }

@media (min-width: 768px) {
  .pa0-ns { padding: 0 }
  .pa1-ns { padding: var(--spacing-1); }
  .pa2-ns { padding: var(--spacing-2); }
  .pa3-ns { padding: var(--spacing-3); }
  .pa4-ns { padding: var(--spacing-4); }
  .pa5-ns { padding: var(--spacing-5); }
  .pa6-ns { padding: var(--spacing-6); }
  .pa7-ns { padding: var(--spacing-7); }

  .pv0-ns { padding-top: 0; padding-bottom: 0 }
  .pv1-ns { padding-top: var(--spacing-1); padding-bottom: var(--spacing-1); }
  .pv2-ns { padding-top: var(--spacing-2); padding-bottom: var(--spacing-2); }
  .pv3-ns { padding-top: var(--spacing-3); padding-bottom: var(--spacing-3); }
  .pv4-ns { padding-top: var(--spacing-4); padding-bottom: var(--spacing-4); }
  .pv5-ns { padding-top: var(--spacing-5); padding-bottom: var(--spacing-5); }
  .pv6-ns { padding-top: var(--spacing-6); padding-bottom: var(--spacing-6); }
  .pv7-ns { padding-top: var(--spacing-7); padding-bottom: var(--spacing-7); }

  .ph0-ns { padding-left: 0; padding-right: 0 }
  .ph1-ns { padding-left: var(--spacing-1); padding-right: var(--spacing-1); }
  .ph2-ns { padding-left: var(--spacing-2); padding-right: var(--spacing-2); }
  .ph3-ns { padding-left: var(--spacing-3); padding-right: var(--spacing-3); }
  .ph4-ns { padding-left: var(--spacing-4); padding-right: var(--spacing-4); }
  .ph5-ns { padding-left: var(--spacing-5); padding-right: var(--spacing-5); }
  .ph6-ns { padding-left: var(--spacing-6); padding-right: var(--spacing-6); }
  .ph7-ns { padding-left: var(--spacing-7); padding-right: var(--spacing-7); }

  .pt0-ns { padding-top: 0 }
  .pt1-ns { padding-top: var(--spacing-1); }
  .pt2-ns { padding-top: var(--spacing-2); }
  .pt3-ns { padding-top: var(--spacing-3); }
  .pt4-ns { padding-top: var(--spacing-4); }
  .pt5-ns { padding-top: var(--spacing-5); }
  .pt6-ns { padding-top: var(--spacing-6); }
  .pt7-ns { padding-top: var(--spacing-7); }

  .pb0-ns { padding-bottom: 0 }
  .pb1-ns { padding-bottom: var(--spacing-1); }
  .pb2-ns { padding-bottom: var(--spacing-2); }
  .pb3-ns { padding-bottom: var(--spacing-3); }
  .pb4-ns { padding-bottom: var(--spacing-4); }
  .pb5-ns { padding-bottom: var(--spacing-5); }
  .pb6-ns { padding-bottom: var(--spacing-6); }
  .pb7-ns { padding-bottom: var(--spacing-7); }

  .pl0-ns { padding-left: 0 }
  .pl1-ns { padding-left: var(--spacing-1); }
  .pl2-ns { padding-left: var(--spacing-2); }
  .pl3-ns { padding-left: var(--spacing-3); }
  .pl4-ns { padding-left: var(--spacing-4); }
  .pl5-ns { padding-left: var(--spacing-5); }
  .pl6-ns { padding-left: var(--spacing-6); }
  .pl7-ns { padding-left: var(--spacing-7); }

  .pr0-ns { padding-right: 0 }
  .pr1-ns { padding-right: var(--spacing-1); }
  .pr2-ns { padding-right: var(--spacing-2); }
  .pr3-ns { padding-right: var(--spacing-3); }
  .pr4-ns { padding-right: var(--spacing-4); }
  .pr5-ns { padding-right: var(--spacing-5); }
  .pr6-ns { padding-right: var(--spacing-6); }
  .pr7-ns { padding-right: var(--spacing-7); }

  .ma0-ns { margin: 0 }
  .ma1-ns { margin: var(--spacing-1); }
  .ma2-ns { margin: var(--spacing-2); }
  .ma3-ns { margin: var(--spacing-3); }
  .ma4-ns { margin: var(--spacing-4); }
  .ma5-ns { margin: var(--spacing-5); }
  .ma6-ns { margin: var(--spacing-6); }
  .ma7-ns { margin: var(--spacing-7); }

  .mv0-ns { margin-top: 0; margin-bottom: 0 }
  .mv1-ns { margin-top: var(--spacing-1); margin-bottom: var(--spacing-1); }
  .mv2-ns { margin-top: var(--spacing-2); margin-bottom: var(--spacing-2); }
  .mv3-ns { margin-top: var(--spacing-3); margin-bottom: var(--spacing-3); }
  .mv4-ns { margin-top: var(--spacing-4); margin-bottom: var(--spacing-4); }
  .mv5-ns { margin-top: var(--spacing-5); margin-bottom: var(--spacing-5); }
  .mv6-ns { margin-top: var(--spacing-6); margin-bottom: var(--spacing-6); }
  .mv7-ns { margin-top: var(--spacing-7); margin-bottom: var(--spacing-7); }
  .mt0-ns { margin-top: 0 }
  .mt1-ns { margin-top: var(--spacing-1); }
  .mt2-ns { margin-top: var(--spacing-2); }
  .mt3-ns { margin-top: var(--spacing-3); }
  .mt4-ns { margin-top: var(--spacing-4); }
  .mt5-ns { margin-top: var(--spacing-5); }
  .mt6-ns { margin-top: var(--spacing-6); }
  .mt7-ns { margin-top: var(--spacing-7); }

  .mb0-ns { margin-bottom: 0 }
  .mb1-ns { margin-bottom: var(--spacing-1); }
  .mb2-ns { margin-bottom: var(--spacing-2); }
  .mb3-ns { margin-bottom: var(--spacing-3); }
  .mb4-ns { margin-bottom: var(--spacing-4); }
  .mb5-ns { margin-bottom: var(--spacing-5); }
  .mb6-ns { margin-bottom: var(--spacing-6); }
  .mb7-ns { margin-bottom: var(--spacing-7); }

  .ml0-ns { margin-left: 0 }
  .ml1-ns { margin-left: var(--spacing-1); }
  .ml2-ns { margin-left: var(--spacing-2); }
  .ml3-ns { margin-left: var(--spacing-3); }
  .ml4-ns { margin-left: var(--spacing-4); }
  .ml5-ns { margin-left: var(--spacing-5); }
  .ml6-ns { margin-left: var(--spacing-6); }
  .ml7-ns { margin-left: var(--spacing-7); }

  .mr0-ns { margin-right: 0 }
  .mr1-ns { margin-right: var(--spacing-1); }
  .mr2-ns { margin-right: var(--spacing-2); }
  .mr3-ns { margin-right: var(--spacing-3); }
  .mr4-ns { margin-right: var(--spacing-4); }
  .mr5-ns { margin-right: var(--spacing-5); }
  .mr6-ns { margin-right: var(--spacing-6); }
  .mr7-ns { margin-right: var(--spacing-7); }
}