:root {
  --sp-x6: 4rem;    /* 64px */
  --sp-x7: 5rem;    /* 80px */
  --sp-x8: 6rem;    /* 96px */
  --sp-x9: 8rem;    /* 128px */
  --sp-x10: 10rem;  /* 160px */
}

/* === BASE === */
/* Margin */
.m-6  { margin: var(--sp-x6) !important; }
.mt-6 { margin-top: var(--sp-x6) !important; }
.mb-6 { margin-bottom: var(--sp-x6) !important; }
.ms-6 { margin-left: var(--sp-x6) !important; }
.me-6 { margin-right: var(--sp-x6) !important; }
.mx-6 { margin-left: var(--sp-x6) !important; margin-right: var(--sp-x6) !important; }
.my-6 { margin-top: var(--sp-x6) !important; margin-bottom: var(--sp-x6) !important; }

.m-7  { margin: var(--sp-x7) !important; }
.mt-7 { margin-top: var(--sp-x7) !important; }
.mb-7 { margin-bottom: var(--sp-x7) !important; }
.ms-7 { margin-left: var(--sp-x7) !important; }
.me-7 { margin-right: var(--sp-x7) !important; }
.mx-7 { margin-left: var(--sp-x7) !important; margin-right: var(--sp-x7) !important; }
.my-7 { margin-top: var(--sp-x7) !important; margin-bottom: var(--sp-x7) !important; }

.m-8  { margin: var(--sp-x8) !important; }
.mt-8 { margin-top: var(--sp-x8) !important; }
.mb-8 { margin-bottom: var(--sp-x8) !important; }
.ms-8 { margin-left: var(--sp-x8) !important; }
.me-8 { margin-right: var(--sp-x8) !important; }
.mx-8 { margin-left: var(--sp-x8) !important; margin-right: var(--sp-x8) !important; }
.my-8 { margin-top: var(--sp-x8) !important; margin-bottom: var(--sp-x8) !important; }

.m-9  { margin: var(--sp-x9) !important; }
.mt-9 { margin-top: var(--sp-x9) !important; }
.mb-9 { margin-bottom: var(--sp-x9) !important; }
.ms-9 { margin-left: var(--sp-x9) !important; }
.me-9 { margin-right: var(--sp-x9) !important; }
.mx-9 { margin-left: var(--sp-x9) !important; margin-right: var(--sp-x9) !important; }
.my-9 { margin-top: var(--sp-x9) !important; margin-bottom: var(--sp-x9) !important; }

.m-10  { margin: var(--sp-x10) !important; }
.mt-10 { margin-top: var(--sp-x10) !important; }
.mb-10 { margin-bottom: var(--sp-x10) !important; }
.ms-10 { margin-left: var(--sp-x10) !important; }
.me-10 { margin-right: var(--sp-x10) !important; }
.mx-10 { margin-left: var(--sp-x10) !important; margin-right: var(--sp-x10) !important; }
.my-10 { margin-top: var(--sp-x10) !important; margin-bottom: var(--sp-x10) !important; }

/* Padding */
.p-6  { padding: var(--sp-x6) !important; }
.pt-6 { padding-top: var(--sp-x6) !important; }
.pb-6 { padding-bottom: var(--sp-x6) !important; }
.ps-6 { padding-left: var(--sp-x6) !important; }
.pe-6 { padding-right: var(--sp-x6) !important; }
.px-6 { padding-left: var(--sp-x6) !important; padding-right: var(--sp-x6) !important; }
.py-6 { padding-top: var(--sp-x6) !important; padding-bottom: var(--sp-x6) !important; }

.p-7  { padding: var(--sp-x7) !important; }
.pt-7 { padding-top: var(--sp-x7) !important; }
.pb-7 { padding-bottom: var(--sp-x7) !important; }
.ps-7 { padding-left: var(--sp-x7) !important; }
.pe-7 { padding-right: var(--sp-x7) !important; }
.px-7 { padding-left: var(--sp-x7) !important; padding-right: var(--sp-x7) !important; }
.py-7 { padding-top: var(--sp-x7) !important; padding-bottom: var(--sp-x7) !important; }

.p-8  { padding: var(--sp-x8) !important; }
.pt-8 { padding-top: var(--sp-x8) !important; }
.pb-8 { padding-bottom: var(--sp-x8) !important; }
.ps-8 { padding-left: var(--sp-x8) !important; }
.pe-8 { padding-right: var(--sp-x8) !important; }
.px-8 { padding-left: var(--sp-x8) !important; padding-right: var(--sp-x8) !important; }
.py-8 { padding-top: var(--sp-x8) !important; padding-bottom: var(--sp-x8) !important; }

.p-9  { padding: var(--sp-x9) !important; }
.pt-9 { padding-top: var(--sp-x9) !important; }
.pb-9 { padding-bottom: var(--sp-x9) !important; }
.ps-9 { padding-left: var(--sp-x9) !important; }
.pe-9 { padding-right: var(--sp-x9) !important; }
.px-9 { padding-left: var(--sp-x9) !important; padding-right: var(--sp-x9) !important; }
.py-9 { padding-top: var(--sp-x9) !important; padding-bottom: var(--sp-x9) !important; }

.p-10  { padding: var(--sp-x10) !important; }
.pt-10 { padding-top: var(--sp-x10) !important; }
.pb-10 { padding-bottom: var(--sp-x10) !important; }
.ps-10 { padding-left: var(--sp-x10) !important; }
.pe-10 { padding-right: var(--sp-x10) !important; }
.px-10 { padding-left: var(--sp-x10) !important; padding-right: var(--sp-x10) !important; }
.py-10 { padding-top: var(--sp-x10) !important; padding-bottom: var(--sp-x10) !important; }

/* === SM === */
@media (min-width: 576px) {
  /* Margin */
  .m-sm-6  { margin: var(--sp-x6) !important; }
  .mt-sm-6 { margin-top: var(--sp-x6) !important; }
  .mb-sm-6 { margin-bottom: var(--sp-x6) !important; }
  .ms-sm-6 { margin-left: var(--sp-x6) !important; }
  .me-sm-6 { margin-right: var(--sp-x6) !important; }
  .mx-sm-6 { margin-left: var(--sp-x6) !important; margin-right: var(--sp-x6) !important; }
  .my-sm-6 { margin-top: var(--sp-x6) !important; margin-bottom: var(--sp-x6) !important; }

  .m-sm-7  { margin: var(--sp-x7) !important; }
  .mt-sm-7 { margin-top: var(--sp-x7) !important; }
  .mb-sm-7 { margin-bottom: var(--sp-x7) !important; }
  .ms-sm-7 { margin-left: var(--sp-x7) !important; }
  .me-sm-7 { margin-right: var(--sp-x7) !important; }
  .mx-sm-7 { margin-left: var(--sp-x7) !important; margin-right: var(--sp-x7) !important; }
  .my-sm-7 { margin-top: var(--sp-x7) !important; margin-bottom: var(--sp-x7) !important; }

  .m-sm-8  { margin: var(--sp-x8) !important; }
  .mt-sm-8 { margin-top: var(--sp-x8) !important; }
  .mb-sm-8 { margin-bottom: var(--sp-x8) !important; }
  .ms-sm-8 { margin-left: var(--sp-x8) !important; }
  .me-sm-8 { margin-right: var(--sp-x8) !important; }
  .mx-sm-8 { margin-left: var(--sp-x8) !important; margin-right: var(--sp-x8) !important; }
  .my-sm-8 { margin-top: var(--sp-x8) !important; margin-bottom: var(--sp-x8) !important; }

  .m-sm-9  { margin: var(--sp-x9) !important; }
  .mt-sm-9 { margin-top: var(--sp-x9) !important; }
  .mb-sm-9 { margin-bottom: var(--sp-x9) !important; }
  .ms-sm-9 { margin-left: var(--sp-x9) !important; }
  .me-sm-9 { margin-right: var(--sp-x9) !important; }
  .mx-sm-9 { margin-left: var(--sp-x9) !important; margin-right: var(--sp-x9) !important; }
  .my-sm-9 { margin-top: var(--sp-x9) !important; margin-bottom: var(--sp-x9) !important; }

  .m-sm-10  { margin: var(--sp-x10) !important; }
  .mt-sm-10 { margin-top: var(--sp-x10) !important; }
  .mb-sm-10 { margin-bottom: var(--sp-x10) !important; }
  .ms-sm-10 { margin-left: var(--sp-x10) !important; }
  .me-sm-10 { margin-right: var(--sp-x10) !important; }
  .mx-sm-10 { margin-left: var(--sp-x10) !important; margin-right: var(--sp-x10) !important; }
  .my-sm-10 { margin-top: var(--sp-x10) !important; margin-bottom: var(--sp-x10) !important; }

  /* Padding */
  .p-sm-6  { padding: var(--sp-x6) !important; }
  .pt-sm-6 { padding-top: var(--sp-x6) !important; }
  .pb-sm-6 { padding-bottom: var(--sp-x6) !important; }
  .ps-sm-6 { padding-left: var(--sp-x6) !important; }
  .pe-sm-6 { padding-right: var(--sp-x6) !important; }
  .px-sm-6 { padding-left: var(--sp-x6) !important; padding-right: var(--sp-x6) !important; }
  .py-sm-6 { padding-top: var(--sp-x6) !important; padding-bottom: var(--sp-x6) !important; }

  .p-sm-7  { padding: var(--sp-x7) !important; }
  .pt-sm-7 { padding-top: var(--sp-x7) !important; }
  .pb-sm-7 { padding-bottom: var(--sp-x7) !important; }
  .ps-sm-7 { padding-left: var(--sp-x7) !important; }
  .pe-sm-7 { padding-right: var(--sp-x7) !important; }
  .px-sm-7 { padding-left: var(--sp-x7) !important; padding-right: var(--sp-x7) !important; }
  .py-sm-7 { padding-top: var(--sp-x7) !important; padding-bottom: var(--sp-x7) !important; }

  .p-sm-8  { padding: var(--sp-x8) !important; }
  .pt-sm-8 { padding-top: var(--sp-x8) !important; }
  .pb-sm-8 { padding-bottom: var(--sp-x8) !important; }
  .ps-sm-8 { padding-left: var(--sp-x8) !important; }
  .pe-sm-8 { padding-right: var(--sp-x8) !important; }
  .px-sm-8 { padding-left: var(--sp-x8) !important; padding-right: var(--sp-x8) !important; }
  .py-sm-8 { padding-top: var(--sp-x8) !important; padding-bottom: var(--sp-x8) !important; }

  .p-sm-9  { padding: var(--sp-x9) !important; }
  .pt-sm-9 { padding-top: var(--sp-x9) !important; }
  .pb-sm-9 { padding-bottom: var(--sp-x9) !important; }
  .ps-sm-9 { padding-left: var(--sp-x9) !important; }
  .pe-sm-9 { padding-right: var(--sp-x9) !important; }
  .px-sm-9 { padding-left: var(--sp-x9) !important; padding-right: var(--sp-x9) !important; }
  .py-sm-9 { padding-top: var(--sp-x9) !important; padding-bottom: var(--sp-x9) !important; }

  .p-sm-10  { padding: var(--sp-x10) !important; }
  .pt-sm-10 { padding-top: var(--sp-x10) !important; }
  .pb-sm-10 { padding-bottom: var(--sp-x10) !important; }
  .ps-sm-10 { padding-left: var(--sp-x10) !important; }
  .pe-sm-10 { padding-right: var(--sp-x10) !important; }
  .px-sm-10 { padding-left: var(--sp-x10) !important; padding-right: var(--sp-x10) !important; }
  .py-sm-10 { padding-top: var(--sp-x10) !important; padding-bottom: var(--sp-x10) !important; }
}

/* === MD === */
@media (min-width: 768px) {
  .m-md-6  { margin: var(--sp-x6) !important; }
  .mt-md-6 { margin-top: var(--sp-x6) !important; }
  .mb-md-6 { margin-bottom: var(--sp-x6) !important; }
  .ms-md-6 { margin-left: var(--sp-x6) !important; }
  .me-md-6 { margin-right: var(--sp-x6) !important; }
  .mx-md-6 { margin-left: var(--sp-x6) !important; margin-right: var(--sp-x6) !important; }
  .my-md-6 { margin-top: var(--sp-x6) !important; margin-bottom: var(--sp-x6) !important; }

  .m-md-7  { margin: var(--sp-x7) !important; }
  .mt-md-7 { margin-top: var(--sp-x7) !important; }
  .mb-md-7 { margin-bottom: var(--sp-x7) !important; }
  .ms-md-7 { margin-left: var(--sp-x7) !important; }
  .me-md-7 { margin-right: var(--sp-x7) !important; }
  .mx-md-7 { margin-left: var(--sp-x7) !important; margin-right: var(--sp-x7) !important; }
  .my-md-7 { margin-top: var(--sp-x7) !important; margin-bottom: var(--sp-x7) !important; }

  .m-md-8  { margin: var(--sp-x8) !important; }
  .mt-md-8 { margin-top: var(--sp-x8) !important; }
  .mb-md-8 { margin-bottom: var(--sp-x8) !important; }
  .ms-md-8 { margin-left: var(--sp-x8) !important; }
  .me-md-8 { margin-right: var(--sp-x8) !important; }
  .mx-md-8 { margin-left: var(--sp-x8) !important; margin-right: var(--sp-x8) !important; }
  .my-md-8 { margin-top: var(--sp-x8) !important; margin-bottom: var(--sp-x8) !important; }

  .m-md-9  { margin: var(--sp-x9) !important; }
  .mt-md-9 { margin-top: var(--sp-x9) !important; }
  .mb-md-9 { margin-bottom: var(--sp-x9) !important; }
  .ms-md-9 { margin-left: var(--sp-x9) !important; }
  .me-md-9 { margin-right: var(--sp-x9) !important; }
  .mx-md-9 { margin-left: var(--sp-x9) !important; margin-right: var(--sp-x9) !important; }
  .my-md-9 { margin-top: var(--sp-x9) !important; margin-bottom: var(--sp-x9) !important; }

  .m-md-10  { margin: var(--sp-x10) !important; }
  .mt-md-10 { margin-top: var(--sp-x10) !important; }
  .mb-md-10 { margin-bottom: var(--sp-x10) !important; }
  .ms-md-10 { margin-left: var(--sp-x10) !important; }
  .me-md-10 { margin-right: var(--sp-x10) !important; }
  .mx-md-10 { margin-left: var(--sp-x10) !important; margin-right: var(--sp-x10) !important; }
  .my-md-10 { margin-top: var(--sp-x10) !important; margin-bottom: var(--sp-x10) !important; }

  .p-md-6  { padding: var(--sp-x6) !important; }
  .pt-md-6 { padding-top: var(--sp-x6) !important; }
  .pb-md-6 { padding-bottom: var(--sp-x6) !important; }
  .ps-md-6 { padding-left: var(--sp-x6) !important; }
  .pe-md-6 { padding-right: var(--sp-x6) !important; }
  .px-md-6 { padding-left: var(--sp-x6) !important; padding-right: var(--sp-x6) !important; }
  .py-md-6 { padding-top: var(--sp-x6) !important; padding-bottom: var(--sp-x6) !important; }

  .p-md-7  { padding: var(--sp-x7) !important; }
  .pt-md-7 { padding-top: var(--sp-x7) !important; }
  .pb-md-7 { padding-bottom: var(--sp-x7) !important; }
  .ps-md-7 { padding-left: var(--sp-x7) !important; }
  .pe-md-7 { padding-right: var(--sp-x7) !important; }
  .px-md-7 { padding-left: var(--sp-x7) !important; padding-right: var(--sp-x7) !important; }
  .py-md-7 { padding-top: var(--sp-x7) !important; padding-bottom: var(--sp-x7) !important; }

  .p-md-8  { padding: var(--sp-x8) !important; }
  .pt-md-8 { padding-top: var(--sp-x8) !important; }
  .pb-md-8 { padding-bottom: var(--sp-x8) !important; }
  .ps-md-8 { padding-left: var(--sp-x8) !important; }
  .pe-md-8 { padding-right: var(--sp-x8) !important; }
  .px-md-8 { padding-left: var(--sp-x8) !important; padding-right: var(--sp-x8) !important; }
  .py-md-8 { padding-top: var(--sp-x8) !important; padding-bottom: var(--sp-x8) !important; }

  .p-md-9  { padding: var(--sp-x9) !important; }
  .pt-md-9 { padding-top: var(--sp-x9) !important; }
  .pb-md-9 { padding-bottom: var(--sp-x9) !important; }
  .ps-md-9 { padding-left: var(--sp-x9) !important; }
  .pe-md-9 { padding-right: var(--sp-x9) !important; }
  .px-md-9 { padding-left: var(--sp-x9) !important; padding-right: var(--sp-x9) !important; }
  .py-md-9 { padding-top: var(--sp-x9) !important; padding-bottom: var(--sp-x9) !important; }

  .p-md-10  { padding: var(--sp-x10) !important; }
  .pt-md-10 { padding-top: var(--sp-x10) !important; }
  .pb-md-10 { padding-bottom: var(--sp-x10) !important; }
  .ps-md-10 { padding-left: var(--sp-x10) !important; }
  .pe-md-10 { padding-right: var(--sp-x10) !important; }
  .px-md-10 { padding-left: var(--sp-x10) !important; padding-right: var(--sp-x10) !important; }
  .py-md-10 { padding-top: var(--sp-x10) !important; padding-bottom: var(--sp-x10) !important; }
}

/* === LG === */
@media (min-width: 992px) {
  .m-lg-6  { margin: var(--sp-x6) !important; }
  .mt-lg-6 { margin-top: var(--sp-x6) !important; }
  .mb-lg-6 { margin-bottom: var(--sp-x6) !important; }
  .ms-lg-6 { margin-left: var(--sp-x6) !important; }
  .me-lg-6 { margin-right: var(--sp-x6) !important; }
  .mx-lg-6 { margin-left: var(--sp-x6) !important; margin-right: var(--sp-x6) !important; }
  .my-lg-6 { margin-top: var(--sp-x6) !important; margin-bottom: var(--sp-x6) !important; }

  .m-lg-7  { margin: var(--sp-x7) !important; }
  .mt-lg-7 { margin-top: var(--sp-x7) !important; }
  .mb-lg-7 { margin-bottom: var(--sp-x7) !important; }
  .ms-lg-7 { margin-left: var(--sp-x7) !important; }
  .me-lg-7 { margin-right: var(--sp-x7) !important; }
  .mx-lg-7 { margin-left: var(--sp-x7) !important; margin-right: var(--sp-x7) !important; }
  .my-lg-7 { margin-top: var(--sp-x7) !important; margin-bottom: var(--sp-x7) !important; }

  .m-lg-8  { margin: var(--sp-x8) !important; }
  .mt-lg-8 { margin-top: var(--sp-x8) !important; }
  .mb-lg-8 { margin-bottom: var(--sp-x8) !important; }
  .ms-lg-8 { margin-left: var(--sp-x8) !important; }
  .me-lg-8 { margin-right: var(--sp-x8) !important; }
  .mx-lg-8 { margin-left: var(--sp-x8) !important; margin-right: var(--sp-x8) !important; }
  .my-lg-8 { margin-top: var(--sp-x8) !important; margin-bottom: var(--sp-x8) !important; }

  .m-lg-9  { margin: var(--sp-x9) !important; }
  .mt-lg-9 { margin-top: var(--sp-x9) !important; }
  .mb-lg-9 { margin-bottom: var(--sp-x9) !important; }
  .ms-lg-9 { margin-left: var(--sp-x9) !important; }
  .me-lg-9 { margin-right: var(--sp-x9) !important; }
  .mx-lg-9 { margin-left: var(--sp-x9) !important; margin-right: var(--sp-x9) !important; }
  .my-lg-9 { margin-top: var(--sp-x9) !important; margin-bottom: var(--sp-x9) !important; }

  .m-lg-10  { margin: var(--sp-x10) !important; }
  .mt-lg-10 { margin-top: var(--sp-x10) !important; }
  .mb-lg-10 { margin-bottom: var(--sp-x10) !important; }
  .ms-lg-10 { margin-left: var(--sp-x10) !important; }
  .me-lg-10 { margin-right: var(--sp-x10) !important; }
  .mx-lg-10 { margin-left: var(--sp-x10) !important; margin-right: var(--sp-x10) !important; }
  .my-lg-10 { margin-top: var(--sp-x10) !important; margin-bottom: var(--sp-x10) !important; }

  .p-lg-6  { padding: var(--sp-x6) !important; }
  .pt-lg-6 { padding-top: var(--sp-x6) !important; }
  .pb-lg-6 { padding-bottom: var(--sp-x6) !important; }
  .ps-lg-6 { padding-left: var(--sp-x6) !important; }
  .pe-lg-6 { padding-right: var(--sp-x6) !important; }
  .px-lg-6 { padding-left: var(--sp-x6) !important; padding-right: var(--sp-x6) !important; }
  .py-lg-6 { padding-top: var(--sp-x6) !important; padding-bottom: var(--sp-x6) !important; }

  .p-lg-7  { padding: var(--sp-x7) !important; }
  .pt-lg-7 { padding-top: var(--sp-x7) !important; }
  .pb-lg-7 { padding-bottom: var(--sp-x7) !important; }
  .ps-lg-7 { padding-left: var(--sp-x7) !important; }
  .pe-lg-7 { padding-right: var(--sp-x7) !important; }
  .px-lg-7 { padding-left: var(--sp-x7) !important; padding-right: var(--sp-x7) !important; }
  .py-lg-7 { padding-top: var(--sp-x7) !important; padding-bottom: var(--sp-x7) !important; }

  .p-lg-8  { padding: var(--sp-x8) !important; }
  .pt-lg-8 { padding-top: var(--sp-x8) !important; }
  .pb-lg-8 { padding-bottom: var(--sp-x8) !important; }
  .ps-lg-8 { padding-left: var(--sp-x8) !important; }
  .pe-lg-8 { padding-right: var(--sp-x8) !important; }
  .px-lg-8 { padding-left: var(--sp-x8) !important; padding-right: var(--sp-x8) !important; }
  .py-lg-8 { padding-top: var(--sp-x8) !important; padding-bottom: var(--sp-x8) !important; }

  .p-lg-9  { padding: var(--sp-x9) !important; }
  .pt-lg-9 { padding-top: var(--sp-x9) !important; }
  .pb-lg-9 { padding-bottom: var(--sp-x9) !important; }
  .ps-lg-9 { padding-left: var(--sp-x9) !important; }
  .pe-lg-9 { padding-right: var(--sp-x9) !important; }
  .px-lg-9 { padding-left: var(--sp-x9) !important; padding-right: var(--sp-x9) !important; }
  .py-lg-9 { padding-top: var(--sp-x9) !important; padding-bottom: var(--sp-x9) !important; }

  .p-lg-10  { padding: var(--sp-x10) !important; }
  .pt-lg-10 { padding-top: var(--sp-x10) !important; }
  .pb-lg-10 { padding-bottom: var(--sp-x10) !important; }
  .ps-lg-10 { padding-left: var(--sp-x10) !important; }
  .pe-lg-10 { padding-right: var(--sp-x10) !important; }
  .px-lg-10 { padding-left: var(--sp-x10) !important; padding-right: var(--sp-x10) !important; }
  .py-lg-10 { padding-top: var(--sp-x10) !important; padding-bottom: var(--sp-x10) !important; }
}

/* === XL === */
@media (min-width: 1200px) {
  .m-xl-6  { margin: var(--sp-x6) !important; }
  .mt-xl-6 { margin-top: var(--sp-x6) !important; }
  .mb-xl-6 { margin-bottom: var(--sp-x6) !important; }
  .ms-xl-6 { margin-left: var(--sp-x6) !important; }
  .me-xl-6 { margin-right: var(--sp-x6) !important; }
  .mx-xl-6 { margin-left: var(--sp-x6) !important; margin-right: var(--sp-x6) !important; }
  .my-xl-6 { margin-top: var(--sp-x6) !important; margin-bottom: var(--sp-x6) !important; }

  .m-xl-7  { margin: var(--sp-x7) !important; }
  .mt-xl-7 { margin-top: var(--sp-x7) !important; }
  .mb-xl-7 { margin-bottom: var(--sp-x7) !important; }
  .ms-xl-7 { margin-left: var(--sp-x7) !important; }
  .me-xl-7 { margin-right: var(--sp-x7) !important; }
  .mx-xl-7 { margin-left: var(--sp-x7) !important; margin-right: var(--sp-x7) !important; }
  .my-xl-7 { margin-top: var(--sp-x7) !important; margin-bottom: var(--sp-x7) !important; }

  .m-xl-8  { margin: var(--sp-x8) !important; }
  .mt-xl-8 { margin-top: var(--sp-x8) !important; }
  .mb-xl-8 { margin-bottom: var(--sp-x8) !important; }
  .ms-xl-8 { margin-left: var(--sp-x8) !important; }
  .me-xl-8 { margin-right: var(--sp-x8) !important; }
  .mx-xl-8 { margin-left: var(--sp-x8) !important; margin-right: var(--sp-x8) !important; }
  .my-xl-8 { margin-top: var(--sp-x8) !important; margin-bottom: var(--sp-x8) !important; }

  .m-xl-9  { margin: var(--sp-x9) !important; }
  .mt-xl-9 { margin-top: var(--sp-x9) !important; }
  .mb-xl-9 { margin-bottom: var(--sp-x9) !important; }
  .ms-xl-9 { margin-left: var(--sp-x9) !important; }
  .me-xl-9 { margin-right: var(--sp-x9) !important; }
  .mx-xl-9 { margin-left: var(--sp-x9) !important; margin-right: var(--sp-x9) !important; }
  .my-xl-9 { margin-top: var(--sp-x9) !important; margin-bottom: var(--sp-x9) !important; }

  .m-xl-10  { margin: var(--sp-x10) !important; }
  .mt-xl-10 { margin-top: var(--sp-x10) !important; }
  .mb-xl-10 { margin-bottom: var(--sp-x10) !important; }
  .ms-xl-10 { margin-left: var(--sp-x10) !important; }
  .me-xl-10 { margin-right: var(--sp-x10) !important; }
  .mx-xl-10 { margin-left: var(--sp-x10) !important; margin-right: var(--sp-x10) !important; }
  .my-xl-10 { margin-top: var(--sp-x10) !important; margin-bottom: var(--sp-x10) !important; }

  .p-xl-6  { padding: var(--sp-x6) !important; }
  .pt-xl-6 { padding-top: var(--sp-x6) !important; }
  .pb-xl-6 { padding-bottom: var(--sp-x6) !important; }
  .ps-xl-6 { padding-left: var(--sp-x6) !important; }
  .pe-xl-6 { padding-right: var(--sp-x6) !important; }
  .px-xl-6 { padding-left: var(--sp-x6) !important; padding-right: var(--sp-x6) !important; }
  .py-xl-6 { padding-top: var(--sp-x6) !important; padding-bottom: var(--sp-x6) !important; }

  .p-xl-7  { padding: var(--sp-x7) !important; }
  .pt-xl-7 { padding-top: var(--sp-x7) !important; }
  .pb-xl-7 { padding-bottom: var(--sp-x7) !important; }
  .ps-xl-7 { padding-left: var(--sp-x7) !important; }
  .pe-xl-7 { padding-right: var(--sp-x7) !important; }
  .px-xl-7 { padding-left: var(--sp-x7) !important; padding-right: var(--sp-x7) !important; }
  .py-xl-7 { padding-top: var(--sp-x7) !important; padding-bottom: var(--sp-x7) !important; }

  .p-xl-8  { padding: var(--sp-x8) !important; }
  .pt-xl-8 { padding-top: var(--sp-x8) !important; }
  .pb-xl-8 { padding-bottom: var(--sp-x8) !important; }
  .ps-xl-8 { padding-left: var(--sp-x8) !important; }
  .pe-xl-8 { padding-right: var(--sp-x8) !important; }
  .px-xl-8 { padding-left: var(--sp-x8) !important; padding-right: var(--sp-x8) !important; }
  .py-xl-8 { padding-top: var(--sp-x8) !important; padding-bottom: var(--sp-x8) !important; }

  .p-xl-9  { padding: var(--sp-x9) !important; }
  .pt-xl-9 { padding-top: var(--sp-x9) !important; }
  .pb-xl-9 { padding-bottom: var(--sp-x9) !important; }
  .ps-xl-9 { padding-left: var(--sp-x9) !important; }
  .pe-xl-9 { padding-right: var(--sp-x9) !important; }
  .px-xl-9 { padding-left: var(--sp-x9) !important; padding-right: var(--sp-x9) !important; }
  .py-xl-9 { padding-top: var(--sp-x9) !important; padding-bottom: var(--sp-x9) !important; }

  .p-xl-10  { padding: var(--sp-x10) !important; }
  .pt-xl-10 { padding-top: var(--sp-x10) !important; }
  .pb-xl-10 { padding-bottom: var(--sp-x10) !important; }
  .ps-xl-10 { padding-left: var(--sp-x10) !important; }
  .pe-xl-10 { padding-right: var(--sp-x10) !important; }
  .px-xl-10 { padding-left: var(--sp-x10) !important; padding-right: var(--sp-x10) !important; }
  .py-xl-10 { padding-top: var(--sp-x10) !important; padding-bottom: var(--sp-x10) !important; }
}

/* === XXL === */
@media (min-width: 1400px) {
  .m-xxl-6  { margin: var(--sp-x6) !important; }
  .mt-xxl-6 { margin-top: var(--sp-x6) !important; }
  .mb-xxl-6 { margin-bottom: var(--sp-x6) !important; }
  .ms-xxl-6 { margin-left: var(--sp-x6) !important; }
  .me-xxl-6 { margin-right: var(--sp-x6) !important; }
  .mx-xxl-6 { margin-left: var(--sp-x6) !important; margin-right: var(--sp-x6) !important; }
  .my-xxl-6 { margin-top: var(--sp-x6) !important; margin-bottom: var(--sp-x6) !important; }

  .m-xxl-7  { margin: var(--sp-x7) !important; }
  .mt-xxl-7 { margin-top: var(--sp-x7) !important; }
  .mb-xxl-7 { margin-bottom: var(--sp-x7) !important; }
  .ms-xxl-7 { margin-left: var(--sp-x7) !important; }
  .me-xxl-7 { margin-right: var(--sp-x7) !important; }
  .mx-xxl-7 { margin-left: var(--sp-x7) !important; margin-right: var(--sp-x7) !important; }
  .my-xxl-7 { margin-top: var(--sp-x7) !important; margin-bottom: var(--sp-x7) !important; }

  .m-xxl-8  { margin: var(--sp-x8) !important; }
  .mt-xxl-8 { margin-top: var(--sp-x8) !important; }
  .mb-xxl-8 { margin-bottom: var(--sp-x8) !important; }
  .ms-xxl-8 { margin-left: var(--sp-x8) !important; }
  .me-xxl-8 { margin-right: var(--sp-x8) !important; }
  .mx-xxl-8 { margin-left: var(--sp-x8) !important; margin-right: var(--sp-x8) !important; }
  .my-xxl-8 { margin-top: var(--sp-x8) !important; margin-bottom: var(--sp-x8) !important; }

  .m-xxl-9  { margin: var(--sp-x9) !important; }
  .mt-xxl-9 { margin-top: var(--sp-x9) !important; }
  .mb-xxl-9 { margin-bottom: var(--sp-x9) !important; }
  .ms-xxl-9 { margin-left: var(--sp-x9) !important; }
  .me-xxl-9 { margin-right: var(--sp-x9) !important; }
  .mx-xxl-9 { margin-left: var(--sp-x9) !important; margin-right: var(--sp-x9) !important; }
  .my-xxl-9 { margin-top: var(--sp-x9) !important; margin-bottom: var(--sp-x9) !important; }

  .m-xxl-10  { margin: var(--sp-x10) !important; }
  .mt-xxl-10 { margin-top: var(--sp-x10) !important; }
  .mb-xxl-10 { margin-bottom: var(--sp-x10) !important; }
  .ms-xxl-10 { margin-left: var(--sp-x10) !important; }
  .me-xxl-10 { margin-right: var(--sp-x10) !important; }
  .mx-xxl-10 { margin-left: var(--sp-x10) !important; margin-right: var(--sp-x10) !important; }
  .my-xxl-10 { margin-top: var(--sp-x10) !important; margin-bottom: var(--sp-x10) !important; }

  .p-xxl-6  { padding: var(--sp-x6) !important; }
  .pt-xxl-6 { padding-top: var(--sp-x6) !important; }
  .pb-xxl-6 { padding-bottom: var(--sp-x6) !important; }
  .ps-xxl-6 { padding-left: var(--sp-x6) !important; }
  .pe-xxl-6 { padding-right: var(--sp-x6) !important; }
  .px-xxl-6 { padding-left: var(--sp-x6) !important; padding-right: var(--sp-x6) !important; }
  .py-xxl-6 { padding-top: var(--sp-x6) !important; padding-bottom: var(--sp-x6) !important; }

  .p-xxl-7  { padding: var(--sp-x7) !important; }
  .pt-xxl-7 { padding-top: var(--sp-x7) !important; }
  .pb-xxl-7 { padding-bottom: var(--sp-x7) !important; }
  .ps-xxl-7 { padding-left: var(--sp-x7) !important; }
  .pe-xxl-7 { padding-right: var(--sp-x7) !important; }
  .px-xxl-7 { padding-left: var(--sp-x7) !important; padding-right: var(--sp-x7) !important; }
  .py-xxl-7 { padding-top: var(--sp-x7) !important; padding-bottom: var(--sp-x7) !important; }

  .p-xxl-8  { padding: var(--sp-x8) !important; }
  .pt-xxl-8 { padding-top: var(--sp-x8) !important; }
  .pb-xxl-8 { padding-bottom: var(--sp-x8) !important; }
  .ps-xxl-8 { padding-left: var(--sp-x8) !important; }
  .pe-xxl-8 { padding-right: var(--sp-x8) !important; }
  .px-xxl-8 { padding-left: var(--sp-x8) !important; padding-right: var(--sp-x8) !important; }
  .py-xxl-8 { padding-top: var(--sp-x8) !important; padding-bottom: var(--sp-x8) !important; }

  .p-xxl-9  { padding: var(--sp-x9) !important; }
  .pt-xxl-9 { padding-top: var(--sp-x9) !important; }
  .pb-xxl-9 { padding-bottom: var(--sp-x9) !important; }
  .ps-xxl-9 { padding-left: var(--sp-x9) !important; }
  .pe-xxl-9 { padding-right: var(--sp-x9) !important; }
  .px-xxl-9 { padding-left: var(--sp-x9) !important; padding-right: var(--sp-x9) !important; }
  .py-xxl-9 { padding-top: var(--sp-x9) !important; padding-bottom: var(--sp-x9) !important; }

  .p-xxl-10  { padding: var(--sp-x10) !important; }
  .pt-xxl-10 { padding-top: var(--sp-x10) !important; }
  .pb-xxl-10 { padding-bottom: var(--sp-x10) !important; }
  .ps-xxl-10 { padding-left: var(--sp-x10) !important; }
  .pe-xxl-10 { padding-right: var(--sp-x10) !important; }
  .px-xxl-10 { padding-left: var(--sp-x10) !important; padding-right: var(--sp-x10) !important; }
  .py-xxl-10 { padding-top: var(--sp-x10) !important; padding-bottom: var(--sp-x10) !important; }
}