:root {
  --sp-0: 0;
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 1rem;
  --sp-4: 1.5rem;
  --sp-5: 3rem;
}

.m-0  { margin: var(--sp-0); }
.m-1  { margin: var(--sp-1); }
.m-2  { margin: var(--sp-2); }
.m-3  { margin: var(--sp-3); }
.m-4  { margin: var(--sp-4); }
.m-5  { margin: var(--sp-5); }

.mt-0 { margin-top: var(--sp-0); }
.mt-1 { margin-top: var(--sp-1); }
.mt-2 { margin-top: var(--sp-2); }
.mt-3 { margin-top: var(--sp-3); }
.mt-4 { margin-top: var(--sp-4); }
.mt-5 { margin-top: var(--sp-5); }

.p-0  { padding: var(--sp-0); }
.p-1  { padding: var(--sp-1); }
.p-2  { padding: var(--sp-2); }
.p-3  { padding: var(--sp-3); }
.p-4  { padding: var(--sp-4); }
.p-5  { padding: var(--sp-5); }

.pt-0 { padding-top: var(--sp-0); }
.pt-1 { padding-top: var(--sp-1); }
.pt-2 { padding-top: var(--sp-2); }
.pt-3 { padding-top: var(--sp-3); }
.pt-4 { padding-top: var(--sp-4); }
.pt-5 { padding-top: var(--sp-5); }

/* Breakpoints */
@media (min-width: 576px) {
  .m-sm-0  { margin: var(--sp-0); }
  .m-sm-1  { margin: var(--sp-1); }
  .m-sm-2  { margin: var(--sp-2); }
  .m-sm-3  { margin: var(--sp-3); }
  .m-sm-4  { margin: var(--sp-4); }
  .m-sm-5  { margin: var(--sp-5); }

  .mt-sm-0 { margin-top: var(--sp-0); }
  .mt-sm-1 { margin-top: var(--sp-1); }
  .mt-sm-2 { margin-top: var(--sp-2); }
  .mt-sm-3 { margin-top: var(--sp-3); }
  .mt-sm-4 { margin-top: var(--sp-4); }
  .mt-sm-5 { margin-top: var(--sp-5); }

  .p-sm-0  { padding: var(--sp-0); }
  .p-sm-1  { padding: var(--sp-1); }
  .p-sm-2  { padding: var(--sp-2); }
  .p-sm-3  { padding: var(--sp-3); }
  .p-sm-4  { padding: var(--sp-4); }
  .p-sm-5  { padding: var(--sp-5); }

  .pt-sm-0 { padding-top: var(--sp-0); }
  .pt-sm-1 { padding-top: var(--sp-1); }
  .pt-sm-2 { padding-top: var(--sp-2); }
  .pt-sm-3 { padding-top: var(--sp-3); }
  .pt-sm-4 { padding-top: var(--sp-4); }
  .pt-sm-5 { padding-top: var(--sp-5); }
}

@media (min-width: 768px) {
  .m-md-0  { margin: var(--sp-0); }
  .m-md-1  { margin: var(--sp-1); }
  .m-md-2  { margin: var(--sp-2); }
  .m-md-3  { margin: var(--sp-3); }
  .m-md-4  { margin: var(--sp-4); }
  .m-md-5  { margin: var(--sp-5); }

  .mt-md-0 { margin-top: var(--sp-0); }
  .mt-md-1 { margin-top: var(--sp-1); }
  .mt-md-2 { margin-top: var(--sp-2); }
  .mt-md-3 { margin-top: var(--sp-3); }
  .mt-md-4 { margin-top: var(--sp-4); }
  .mt-md-5 { margin-top: var(--sp-5); }

  .p-md-0  { padding: var(--sp-0); }
  .p-md-1  { padding: var(--sp-1); }
  .p-md-2  { padding: var(--sp-2); }
  .p-md-3  { padding: var(--sp-3); }
  .p-md-4  { padding: var(--sp-4); }
  .p-md-5  { padding: var(--sp-5); }

  .pt-md-0 { padding-top: var(--sp-0); }
  .pt-md-1 { padding-top: var(--sp-1); }
  .pt-md-2 { padding-top: var(--sp-2); }
  .pt-md-3 { padding-top: var(--sp-3); }
  .pt-md-4 { padding-top: var(--sp-4); }
  .pt-md-5 { padding-top: var(--sp-5); }
}

@media (min-width: 992px) {
  .m-lg-0  { margin: var(--sp-0); }
  .m-lg-1  { margin: var(--sp-1); }
  .m-lg-2  { margin: var(--sp-2); }
  .m-lg-3  { margin: var(--sp-3); }
  .m-lg-4  { margin: var(--sp-4); }
  .m-lg-5  { margin: var(--sp-5); }

  .mt-lg-0 { margin-top: var(--sp-0); }
  .mt-lg-1 { margin-top: var(--sp-1); }
  .mt-lg-2 { margin-top: var(--sp-2); }
  .mt-lg-3 { margin-top: var(--sp-3); }
  .mt-lg-4 { margin-top: var(--sp-4); }
  .mt-lg-5 { margin-top: var(--sp-5); }

  .p-lg-0  { padding: var(--sp-0); }
  .p-lg-1  { padding: var(--sp-1); }
  .p-lg-2  { padding: var(--sp-2); }
  .p-lg-3  { padding: var(--sp-3); }
  .p-lg-4  { padding: var(--sp-4); }
  .p-lg-5  { padding: var(--sp-5); }

  .pt-lg-0 { padding-top: var(--sp-0); }
  .pt-lg-1 { padding-top: var(--sp-1); }
  .pt-lg-2 { padding-top: var(--sp-2); }
  .pt-lg-3 { padding-top: var(--sp-3); }
  .pt-lg-4 { padding-top: var(--sp-4); }
  .pt-lg-5 { padding-top: var(--sp-5); }
}

@media (min-width: 1200px) {
  .m-xl-0  { margin: var(--sp-0); }
  .m-xl-1  { margin: var(--sp-1); }
  .m-xl-2  { margin: var(--sp-2); }
  .m-xl-3  { margin: var(--sp-3); }
  .m-xl-4  { margin: var(--sp-4); }
  .m-xl-5  { margin: var(--sp-5); }

  .mt-xl-0 { margin-top: var(--sp-0); }
  .mt-xl-1 { margin-top: var(--sp-1); }
  .mt-xl-2 { margin-top: var(--sp-2); }
  .mt-xl-3 { margin-top: var(--sp-3); }
  .mt-xl-4 { margin-top: var(--sp-4); }
  .mt-xl-5 { margin-top: var(--sp-5); }

  .p-xl-0  { padding: var(--sp-0); }
  .p-xl-1  { padding: var(--sp-1); }
  .p-xl-2  { padding: var(--sp-2); }
  .p-xl-3  { padding: var(--sp-3); }
  .p-xl-4  { padding: var(--sp-4); }
  .p-xl-5  { padding: var(--sp-5); }

  .pt-xl-0 { padding-top: var(--sp-0); }
  .pt-xl-1 { padding-top: var(--sp-1); }
  .pt-xl-2 { padding-top: var(--sp-2); }
  .pt-xl-3 { padding-top: var(--sp-3); }
  .pt-xl-4 { padding-top: var(--sp-4); }
  .pt-xl-5 { padding-top: var(--sp-5); }
}


.mx-auto {
  margin-left: auto;
  margin-right: auto;
}