/* =========================================================
   MudBlazor Extended Spacing (21 → 32)
   Step: 4px
   21=84px ... 32=128px
   Breakpoints:
     sm >= 600px
     md >= 960px
     lg >= 1280px
     xl >= 1920px
     xxl >= 2560px
   ========================================================= */

/* ---------- Variables ---------- */
:root {
    --s-21: 84px;
    --s-22: 88px;
    --s-23: 92px;
    --s-24: 96px;
    --s-25: 100px;
    --s-26: 104px;
    --s-27: 108px;
    --s-28: 112px;
    --s-29: 116px;
    --s-30: 120px;
    --s-31: 124px;
    --s-32: 128px;
}

/* =========================================================
   BASE (no breakpoint suffix)
   ========================================================= */

/* ----- Padding (p, px, py, pt, pr, pb, pl) ----- */
.p-21 {
    padding: var(--s-21);
}

.p-22 {
    padding: var(--s-22);
}

.p-23 {
    padding: var(--s-23);
}

.p-24 {
    padding: var(--s-24);
}

.p-25 {
    padding: var(--s-25);
}

.p-26 {
    padding: var(--s-26);
}

.p-27 {
    padding: var(--s-27);
}

.p-28 {
    padding: var(--s-28);
}

.p-29 {
    padding: var(--s-29);
}

.p-30 {
    padding: var(--s-30);
}

.p-31 {
    padding: var(--s-31);
}

.p-32 {
    padding: var(--s-32);
}

.px-21 {
    padding-left: var(--s-21);
    padding-right: var(--s-21);
}

.px-22 {
    padding-left: var(--s-22);
    padding-right: var(--s-22);
}

.px-23 {
    padding-left: var(--s-23);
    padding-right: var(--s-23);
}

.px-24 {
    padding-left: var(--s-24);
    padding-right: var(--s-24);
}

.px-25 {
    padding-left: var(--s-25);
    padding-right: var(--s-25);
}

.px-26 {
    padding-left: var(--s-26);
    padding-right: var(--s-26);
}

.px-27 {
    padding-left: var(--s-27);
    padding-right: var(--s-27);
}

.px-28 {
    padding-left: var(--s-28);
    padding-right: var(--s-28);
}

.px-29 {
    padding-left: var(--s-29);
    padding-right: var(--s-29);
}

.px-30 {
    padding-left: var(--s-30);
    padding-right: var(--s-30);
}

.px-31 {
    padding-left: var(--s-31);
    padding-right: var(--s-31);
}

.px-32 {
    padding-left: var(--s-32);
    padding-right: var(--s-32);
}

.py-21 {
    padding-top: var(--s-21);
    padding-bottom: var(--s-21);
}

.py-22 {
    padding-top: var(--s-22);
    padding-bottom: var(--s-22);
}

.py-23 {
    padding-top: var(--s-23);
    padding-bottom: var(--s-23);
}

.py-24 {
    padding-top: var(--s-24);
    padding-bottom: var(--s-24);
}

.py-25 {
    padding-top: var(--s-25);
    padding-bottom: var(--s-25);
}

.py-26 {
    padding-top: var(--s-26);
    padding-bottom: var(--s-26);
}

.py-27 {
    padding-top: var(--s-27);
    padding-bottom: var(--s-27);
}

.py-28 {
    padding-top: var(--s-28);
    padding-bottom: var(--s-28);
}

.py-29 {
    padding-top: var(--s-29);
    padding-bottom: var(--s-29);
}

.py-30 {
    padding-top: var(--s-30);
    padding-bottom: var(--s-30);
}

.py-31 {
    padding-top: var(--s-31);
    padding-bottom: var(--s-31);
}

.py-32 {
    padding-top: var(--s-32);
    padding-bottom: var(--s-32);
}

.pt-21 {
    padding-top: var(--s-21);
}

.pt-22 {
    padding-top: var(--s-22);
}

.pt-23 {
    padding-top: var(--s-23);
}

.pt-24 {
    padding-top: var(--s-24);
}

.pt-25 {
    padding-top: var(--s-25);
}

.pt-26 {
    padding-top: var(--s-26);
}

.pt-27 {
    padding-top: var(--s-27);
}

.pt-28 {
    padding-top: var(--s-28);
}

.pt-29 {
    padding-top: var(--s-29);
}

.pt-30 {
    padding-top: var(--s-30);
}

.pt-31 {
    padding-top: var(--s-31);
}

.pt-32 {
    padding-top: var(--s-32);
}

.pr-21 {
    padding-right: var(--s-21);
}

.pr-22 {
    padding-right: var(--s-22);
}

.pr-23 {
    padding-right: var(--s-23);
}

.pr-24 {
    padding-right: var(--s-24);
}

.pr-25 {
    padding-right: var(--s-25);
}

.pr-26 {
    padding-right: var(--s-26);
}

.pr-27 {
    padding-right: var(--s-27);
}

.pr-28 {
    padding-right: var(--s-28);
}

.pr-29 {
    padding-right: var(--s-29);
}

.pr-30 {
    padding-right: var(--s-30);
}

.pr-31 {
    padding-right: var(--s-31);
}

.pr-32 {
    padding-right: var(--s-32);
}

.pb-21 {
    padding-bottom: var(--s-21);
}

.pb-22 {
    padding-bottom: var(--s-22);
}

.pb-23 {
    padding-bottom: var(--s-23);
}

.pb-24 {
    padding-bottom: var(--s-24);
}

.pb-25 {
    padding-bottom: var(--s-25);
}

.pb-26 {
    padding-bottom: var(--s-26);
}

.pb-27 {
    padding-bottom: var(--s-27);
}

.pb-28 {
    padding-bottom: var(--s-28);
}

.pb-29 {
    padding-bottom: var(--s-29);
}

.pb-30 {
    padding-bottom: var(--s-30);
}

.pb-31 {
    padding-bottom: var(--s-31);
}

.pb-32 {
    padding-bottom: var(--s-32);
}

.pl-21 {
    padding-left: var(--s-21);
}

.pl-22 {
    padding-left: var(--s-22);
}

.pl-23 {
    padding-left: var(--s-23);
}

.pl-24 {
    padding-left: var(--s-24);
}

.pl-25 {
    padding-left: var(--s-25);
}

.pl-26 {
    padding-left: var(--s-26);
}

.pl-27 {
    padding-left: var(--s-27);
}

.pl-28 {
    padding-left: var(--s-28);
}

.pl-29 {
    padding-left: var(--s-29);
}

.pl-30 {
    padding-left: var(--s-30);
}

.pl-31 {
    padding-left: var(--s-31);
}

.pl-32 {
    padding-left: var(--s-32);
}

/* ----- Margin (m, mx, my, mt, mr, mb, ml) ----- */
.m-21 {
    margin: var(--s-21);
}

.m-22 {
    margin: var(--s-22);
}

.m-23 {
    margin: var(--s-23);
}

.m-24 {
    margin: var(--s-24);
}

.m-25 {
    margin: var(--s-25);
}

.m-26 {
    margin: var(--s-26);
}

.m-27 {
    margin: var(--s-27);
}

.m-28 {
    margin: var(--s-28);
}

.m-29 {
    margin: var(--s-29);
}

.m-30 {
    margin: var(--s-30);
}

.m-31 {
    margin: var(--s-31);
}

.m-32 {
    margin: var(--s-32);
}

.mx-21 {
    margin-left: var(--s-21);
    margin-right: var(--s-21);
}

.mx-22 {
    margin-left: var(--s-22);
    margin-right: var(--s-22);
}

.mx-23 {
    margin-left: var(--s-23);
    margin-right: var(--s-23);
}

.mx-24 {
    margin-left: var(--s-24);
    margin-right: var(--s-24);
}

.mx-25 {
    margin-left: var(--s-25);
    margin-right: var(--s-25);
}

.mx-26 {
    margin-left: var(--s-26);
    margin-right: var(--s-26);
}

.mx-27 {
    margin-left: var(--s-27);
    margin-right: var(--s-27);
}

.mx-28 {
    margin-left: var(--s-28);
    margin-right: var(--s-28);
}

.mx-29 {
    margin-left: var(--s-29);
    margin-right: var(--s-29);
}

.mx-30 {
    margin-left: var(--s-30);
    margin-right: var(--s-30);
}

.mx-31 {
    margin-left: var(--s-31);
    margin-right: var(--s-31);
}

.mx-32 {
    margin-left: var(--s-32);
    margin-right: var(--s-32);
}

.my-21 {
    margin-top: var(--s-21);
    margin-bottom: var(--s-21);
}

.my-22 {
    margin-top: var(--s-22);
    margin-bottom: var(--s-22);
}

.my-23 {
    margin-top: var(--s-23);
    margin-bottom: var(--s-23);
}

.my-24 {
    margin-top: var(--s-24);
    margin-bottom: var(--s-24);
}

.my-25 {
    margin-top: var(--s-25);
    margin-bottom: var(--s-25);
}

.my-26 {
    margin-top: var(--s-26);
    margin-bottom: var(--s-26);
}

.my-27 {
    margin-top: var(--s-27);
    margin-bottom: var(--s-27);
}

.my-28 {
    margin-top: var(--s-28);
    margin-bottom: var(--s-28);
}

.my-29 {
    margin-top: var(--s-29);
    margin-bottom: var(--s-29);
}

.my-30 {
    margin-top: var(--s-30);
    margin-bottom: var(--s-30);
}

.my-31 {
    margin-top: var(--s-31);
    margin-bottom: var(--s-31);
}

.my-32 {
    margin-top: var(--s-32);
    margin-bottom: var(--s-32);
}

.mt-21 {
    margin-top: var(--s-21);
}

.mt-22 {
    margin-top: var(--s-22);
}

.mt-23 {
    margin-top: var(--s-23);
}

.mt-24 {
    margin-top: var(--s-24);
}

.mt-25 {
    margin-top: var(--s-25);
}

.mt-26 {
    margin-top: var(--s-26);
}

.mt-27 {
    margin-top: var(--s-27);
}

.mt-28 {
    margin-top: var(--s-28);
}

.mt-29 {
    margin-top: var(--s-29);
}

.mt-30 {
    margin-top: var(--s-30);
}

.mt-31 {
    margin-top: var(--s-31);
}

.mt-32 {
    margin-top: var(--s-32);
}

.mr-21 {
    margin-right: var(--s-21);
}

.mr-22 {
    margin-right: var(--s-22);
}

.mr-23 {
    margin-right: var(--s-23);
}

.mr-24 {
    margin-right: var(--s-24);
}

.mr-25 {
    margin-right: var(--s-25);
}

.mr-26 {
    margin-right: var(--s-26);
}

.mr-27 {
    margin-right: var(--s-27);
}

.mr-28 {
    margin-right: var(--s-28);
}

.mr-29 {
    margin-right: var(--s-29);
}

.mr-30 {
    margin-right: var(--s-30);
}

.mr-31 {
    margin-right: var(--s-31);
}

.mr-32 {
    margin-right: var(--s-32);
}

.mb-21 {
    margin-bottom: var(--s-21);
}

.mb-22 {
    margin-bottom: var(--s-22);
}

.mb-23 {
    margin-bottom: var(--s-23);
}

.mb-24 {
    margin-bottom: var(--s-24);
}

.mb-25 {
    margin-bottom: var(--s-25);
}

.mb-26 {
    margin-bottom: var(--s-26);
}

.mb-27 {
    margin-bottom: var(--s-27);
}

.mb-28 {
    margin-bottom: var(--s-28);
}

.mb-29 {
    margin-bottom: var(--s-29);
}

.mb-30 {
    margin-bottom: var(--s-30);
}

.mb-31 {
    margin-bottom: var(--s-31);
}

.mb-32 {
    margin-bottom: var(--s-32);
}

.ml-21 {
    margin-left: var(--s-21);
}

.ml-22 {
    margin-left: var(--s-22);
}

.ml-23 {
    margin-left: var(--s-23);
}

.ml-24 {
    margin-left: var(--s-24);
}

.ml-25 {
    margin-left: var(--s-25);
}

.ml-26 {
    margin-left: var(--s-26);
}

.ml-27 {
    margin-left: var(--s-27);
}

.ml-28 {
    margin-left: var(--s-28);
}

.ml-29 {
    margin-left: var(--s-29);
}

.ml-30 {
    margin-left: var(--s-30);
}

.ml-31 {
    margin-left: var(--s-31);
}

.ml-32 {
    margin-left: var(--s-32);
}

/* =========================================================
   SM (>= 600px)
   ========================================================= */
@media (min-width:600px) {
    /* Padding */
    .p-sm-21 {
        padding: var(--s-21);
    }

    .p-sm-22 {
        padding: var(--s-22);
    }

    .p-sm-23 {
        padding: var(--s-23);
    }

    .p-sm-24 {
        padding: var(--s-24);
    }

    .p-sm-25 {
        padding: var(--s-25);
    }

    .p-sm-26 {
        padding: var(--s-26);
    }

    .p-sm-27 {
        padding: var(--s-27);
    }

    .p-sm-28 {
        padding: var(--s-28);
    }

    .p-sm-29 {
        padding: var(--s-29);
    }

    .p-sm-30 {
        padding: var(--s-30);
    }

    .p-sm-31 {
        padding: var(--s-31);
    }

    .p-sm-32 {
        padding: var(--s-32);
    }

    .px-sm-21 {
        padding-left: var(--s-21);
        padding-right: var(--s-21);
    }

    .px-sm-22 {
        padding-left: var(--s-22);
        padding-right: var(--s-22);
    }

    .px-sm-23 {
        padding-left: var(--s-23);
        padding-right: var(--s-23);
    }

    .px-sm-24 {
        padding-left: var(--s-24);
        padding-right: var(--s-24);
    }

    .px-sm-25 {
        padding-left: var(--s-25);
        padding-right: var(--s-25);
    }

    .px-sm-26 {
        padding-left: var(--s-26);
        padding-right: var(--s-26);
    }

    .px-sm-27 {
        padding-left: var(--s-27);
        padding-right: var(--s-27);
    }

    .px-sm-28 {
        padding-left: var(--s-28);
        padding-right: var(--s-28);
    }

    .px-sm-29 {
        padding-left: var(--s-29);
        padding-right: var(--s-29);
    }

    .px-sm-30 {
        padding-left: var(--s-30);
        padding-right: var(--s-30);
    }

    .px-sm-31 {
        padding-left: var(--s-31);
        padding-right: var(--s-31);
    }

    .px-sm-32 {
        padding-left: var(--s-32);
        padding-right: var(--s-32);
    }

    .py-sm-21 {
        padding-top: var(--s-21);
        padding-bottom: var(--s-21);
    }

    .py-sm-22 {
        padding-top: var(--s-22);
        padding-bottom: var(--s-22);
    }

    .py-sm-23 {
        padding-top: var(--s-23);
        padding-bottom: var(--s-23);
    }

    .py-sm-24 {
        padding-top: var(--s-24);
        padding-bottom: var(--s-24);
    }

    .py-sm-25 {
        padding-top: var(--s-25);
        padding-bottom: var(--s-25);
    }

    .py-sm-26 {
        padding-top: var(--s-26);
        padding-bottom: var(--s-26);
    }

    .py-sm-27 {
        padding-top: var(--s-27);
        padding-bottom: var(--s-27);
    }

    .py-sm-28 {
        padding-top: var(--s-28);
        padding-bottom: var(--s-28);
    }

    .py-sm-29 {
        padding-top: var(--s-29);
        padding-bottom: var(--s-29);
    }

    .py-sm-30 {
        padding-top: var(--s-30);
        padding-bottom: var(--s-30);
    }

    .py-sm-31 {
        padding-top: var(--s-31);
        padding-bottom: var(--s-31);
    }

    .py-sm-32 {
        padding-top: var(--s-32);
        padding-bottom: var(--s-32);
    }

    .pt-sm-21 {
        padding-top: var(--s-21);
    }

    .pt-sm-22 {
        padding-top: var(--s-22);
    }

    .pt-sm-23 {
        padding-top: var(--s-23);
    }

    .pt-sm-24 {
        padding-top: var(--s-24);
    }

    .pt-sm-25 {
        padding-top: var(--s-25);
    }

    .pt-sm-26 {
        padding-top: var(--s-26);
    }

    .pt-sm-27 {
        padding-top: var(--s-27);
    }

    .pt-sm-28 {
        padding-top: var(--s-28);
    }

    .pt-sm-29 {
        padding-top: var(--s-29);
    }

    .pt-sm-30 {
        padding-top: var(--s-30);
    }

    .pt-sm-31 {
        padding-top: var(--s-31);
    }

    .pt-sm-32 {
        padding-top: var(--s-32);
    }

    .pr-sm-21 {
        padding-right: var(--s-21);
    }

    .pr-sm-22 {
        padding-right: var(--s-22);
    }

    .pr-sm-23 {
        padding-right: var(--s-23);
    }

    .pr-sm-24 {
        padding-right: var(--s-24);
    }

    .pr-sm-25 {
        padding-right: var(--s-25);
    }

    .pr-sm-26 {
        padding-right: var(--s-26);
    }

    .pr-sm-27 {
        padding-right: var(--s-27);
    }

    .pr-sm-28 {
        padding-right: var(--s-28);
    }

    .pr-sm-29 {
        padding-right: var(--s-29);
    }

    .pr-sm-30 {
        padding-right: var(--s-30);
    }

    .pr-sm-31 {
        padding-right: var(--s-31);
    }

    .pr-sm-32 {
        padding-right: var(--s-32);
    }

    .pb-sm-21 {
        padding-bottom: var(--s-21);
    }

    .pb-sm-22 {
        padding-bottom: var(--s-22);
    }

    .pb-sm-23 {
        padding-bottom: var(--s-23);
    }

    .pb-sm-24 {
        padding-bottom: var(--s-24);
    }

    .pb-sm-25 {
        padding-bottom: var(--s-25);
    }

    .pb-sm-26 {
        padding-bottom: var(--s-26);
    }

    .pb-sm-27 {
        padding-bottom: var(--s-27);
    }

    .pb-sm-28 {
        padding-bottom: var(--s-28);
    }

    .pb-sm-29 {
        padding-bottom: var(--s-29);
    }

    .pb-sm-30 {
        padding-bottom: var(--s-30);
    }

    .pb-sm-31 {
        padding-bottom: var(--s-31);
    }

    .pb-sm-32 {
        padding-bottom: var(--s-32);
    }

    .pl-sm-21 {
        padding-left: var(--s-21);
    }

    .pl-sm-22 {
        padding-left: var(--s-22);
    }

    .pl-sm-23 {
        padding-left: var(--s-23);
    }

    .pl-sm-24 {
        padding-left: var(--s-24);
    }

    .pl-sm-25 {
        padding-left: var(--s-25);
    }

    .pl-sm-26 {
        padding-left: var(--s-26);
    }

    .pl-sm-27 {
        padding-left: var(--s-27);
    }

    .pl-sm-28 {
        padding-left: var(--s-28);
    }

    .pl-sm-29 {
        padding-left: var(--s-29);
    }

    .pl-sm-30 {
        padding-left: var(--s-30);
    }

    .pl-sm-31 {
        padding-left: var(--s-31);
    }

    .pl-sm-32 {
        padding-left: var(--s-32);
    }

    /* Margin */
    .m-sm-21 {
        margin: var(--s-21);
    }

    .m-sm-22 {
        margin: var(--s-22);
    }

    .m-sm-23 {
        margin: var(--s-23);
    }

    .m-sm-24 {
        margin: var(--s-24);
    }

    .m-sm-25 {
        margin: var(--s-25);
    }

    .m-sm-26 {
        margin: var(--s-26);
    }

    .m-sm-27 {
        margin: var(--s-27);
    }

    .m-sm-28 {
        margin: var(--s-28);
    }

    .m-sm-29 {
        margin: var(--s-29);
    }

    .m-sm-30 {
        margin: var(--s-30);
    }

    .m-sm-31 {
        margin: var(--s-31);
    }

    .m-sm-32 {
        margin: var(--s-32);
    }

    .mx-sm-21 {
        margin-left: var(--s-21);
        margin-right: var(--s-21);
    }

    .mx-sm-22 {
        margin-left: var(--s-22);
        margin-right: var(--s-22);
    }

    .mx-sm-23 {
        margin-left: var(--s-23);
        margin-right: var(--s-23);
    }

    .mx-sm-24 {
        margin-left: var(--s-24);
        margin-right: var(--s-24);
    }

    .mx-sm-25 {
        margin-left: var(--s-25);
        margin-right: var(--s-25);
    }

    .mx-sm-26 {
        margin-left: var(--s-26);
        margin-right: var(--s-26);
    }

    .mx-sm-27 {
        margin-left: var(--s-27);
        margin-right: var(--s-27);
    }

    .mx-sm-28 {
        margin-left: var(--s-28);
        margin-right: var(--s-28);
    }

    .mx-sm-29 {
        margin-left: var(--s-29);
        margin-right: var(--s-29);
    }

    .mx-sm-30 {
        margin-left: var(--s-30);
        margin-right: var(--s-30);
    }

    .mx-sm-31 {
        margin-left: var(--s-31);
        margin-right: var(--s-31);
    }

    .mx-sm-32 {
        margin-left: var(--s-32);
        margin-right: var(--s-32);
    }

    .my-sm-21 {
        margin-top: var(--s-21);
        margin-bottom: var(--s-21);
    }

    .my-sm-22 {
        margin-top: var(--s-22);
        margin-bottom: var(--s-22);
    }

    .my-sm-23 {
        margin-top: var(--s-23);
        margin-bottom: var(--s-23);
    }

    .my-sm-24 {
        margin-top: var(--s-24);
        margin-bottom: var(--s-24);
    }

    .my-sm-25 {
        margin-top: var(--s-25);
        margin-bottom: var(--s-25);
    }

    .my-sm-26 {
        margin-top: var(--s-26);
        margin-bottom: var(--s-26);
    }

    .my-sm-27 {
        margin-top: var(--s-27);
        margin-bottom: var(--s-27);
    }

    .my-sm-28 {
        margin-top: var(--s-28);
        margin-bottom: var(--s-28);
    }

    .my-sm-29 {
        margin-top: var(--s-29);
        margin-bottom: var(--s-29);
    }

    .my-sm-30 {
        margin-top: var(--s-30);
        margin-bottom: var(--s-30);
    }

    .my-sm-31 {
        margin-top: var(--s-31);
        margin-bottom: var(--s-31);
    }

    .my-sm-32 {
        margin-top: var(--s-32);
        margin-bottom: var(--s-32);
    }

    .mt-sm-21 {
        margin-top: var(--s-21);
    }

    .mt-sm-22 {
        margin-top: var(--s-22);
    }

    .mt-sm-23 {
        margin-top: var(--s-23);
    }

    .mt-sm-24 {
        margin-top: var(--s-24);
    }

    .mt-sm-25 {
        margin-top: var(--s-25);
    }

    .mt-sm-26 {
        margin-top: var(--s-26);
    }

    .mt-sm-27 {
        margin-top: var(--s-27);
    }

    .mt-sm-28 {
        margin-top: var(--s-28);
    }

    .mt-sm-29 {
        margin-top: var(--s-29);
    }

    .mt-sm-30 {
        margin-top: var(--s-30);
    }

    .mt-sm-31 {
        margin-top: var(--s-31);
    }

    .mt-sm-32 {
        margin-top: var(--s-32);
    }

    .mr-sm-21 {
        margin-right: var(--s-21);
    }

    .mr-sm-22 {
        margin-right: var(--s-22);
    }

    .mr-sm-23 {
        margin-right: var(--s-23);
    }

    .mr-sm-24 {
        margin-right: var(--s-24);
    }

    .mr-sm-25 {
        margin-right: var(--s-25);
    }

    .mr-sm-26 {
        margin-right: var(--s-26);
    }

    .mr-sm-27 {
        margin-right: var(--s-27);
    }

    .mr-sm-28 {
        margin-right: var(--s-28);
    }

    .mr-sm-29 {
        margin-right: var(--s-29);
    }

    .mr-sm-30 {
        margin-right: var(--s-30);
    }

    .mr-sm-31 {
        margin-right: var(--s-31);
    }

    .mr-sm-32 {
        margin-right: var(--s-32);
    }

    .mb-sm-21 {
        margin-bottom: var(--s-21);
    }

    .mb-sm-22 {
        margin-bottom: var(--s-22);
    }

    .mb-sm-23 {
        margin-bottom: var(--s-23);
    }

    .mb-sm-24 {
        margin-bottom: var(--s-24);
    }

    .mb-sm-25 {
        margin-bottom: var(--s-25);
    }

    .mb-sm-26 {
        margin-bottom: var(--s-26);
    }

    .mb-sm-27 {
        margin-bottom: var(--s-27);
    }

    .mb-sm-28 {
        margin-bottom: var(--s-28);
    }

    .mb-sm-29 {
        margin-bottom: var(--s-29);
    }

    .mb-sm-30 {
        margin-bottom: var(--s-30);
    }

    .mb-sm-31 {
        margin-bottom: var(--s-31);
    }

    .mb-sm-32 {
        margin-bottom: var(--s-32);
    }

    .ml-sm-21 {
        margin-left: var(--s-21);
    }

    .ml-sm-22 {
        margin-left: var(--s-22);
    }

    .ml-sm-23 {
        margin-left: var(--s-23);
    }

    .ml-sm-24 {
        margin-left: var(--s-24);
    }

    .ml-sm-25 {
        margin-left: var(--s-25);
    }

    .ml-sm-26 {
        margin-left: var(--s-26);
    }

    .ml-sm-27 {
        margin-left: var(--s-27);
    }

    .ml-sm-28 {
        margin-left: var(--s-28);
    }

    .ml-sm-29 {
        margin-left: var(--s-29);
    }

    .ml-sm-30 {
        margin-left: var(--s-30);
    }

    .ml-sm-31 {
        margin-left: var(--s-31);
    }

    .ml-sm-32 {
        margin-left: var(--s-32);
    }
}

/* =========================================================
   MD (>= 960px)
   ========================================================= */
@media (min-width:960px) {
    /* Padding */
    .p-md-21 {
        padding: var(--s-21);
    }

    .p-md-22 {
        padding: var(--s-22);
    }

    .p-md-23 {
        padding: var(--s-23);
    }

    .p-md-24 {
        padding: var(--s-24);
    }

    .p-md-25 {
        padding: var(--s-25);
    }

    .p-md-26 {
        padding: var(--s-26);
    }

    .p-md-27 {
        padding: var(--s-27);
    }

    .p-md-28 {
        padding: var(--s-28);
    }

    .p-md-29 {
        padding: var(--s-29);
    }

    .p-md-30 {
        padding: var(--s-30);
    }

    .p-md-31 {
        padding: var(--s-31);
    }

    .p-md-32 {
        padding: var(--s-32);
    }

    .px-md-21 {
        padding-left: var(--s-21);
        padding-right: var(--s-21);
    }

    .px-md-22 {
        padding-left: var(--s-22);
        padding-right: var(--s-22);
    }

    .px-md-23 {
        padding-left: var(--s-23);
        padding-right: var(--s-23);
    }

    .px-md-24 {
        padding-left: var(--s-24);
        padding-right: var(--s-24);
    }

    .px-md-25 {
        padding-left: var(--s-25);
        padding-right: var(--s-25);
    }

    .px-md-26 {
        padding-left: var(--s-26);
        padding-right: var(--s-26);
    }

    .px-md-27 {
        padding-left: var(--s-27);
        padding-right: var(--s-27);
    }

    .px-md-28 {
        padding-left: var(--s-28);
        padding-right: var(--s-28);
    }

    .px-md-29 {
        padding-left: var(--s-29);
        padding-right: var(--s-29);
    }

    .px-md-30 {
        padding-left: var(--s-30);
        padding-right: var(--s-30);
    }

    .px-md-31 {
        padding-left: var(--s-31);
        padding-right: var(--s-31);
    }

    .px-md-32 {
        padding-left: var(--s-32);
        padding-right: var(--s-32);
    }

    .py-md-21 {
        padding-top: var(--s-21);
        padding-bottom: var(--s-21);
    }

    .py-md-22 {
        padding-top: var(--s-22);
        padding-bottom: var(--s-22);
    }

    .py-md-23 {
        padding-top: var(--s-23);
        padding-bottom: var(--s-23);
    }

    .py-md-24 {
        padding-top: var(--s-24);
        padding-bottom: var(--s-24);
    }

    .py-md-25 {
        padding-top: var(--s-25);
        padding-bottom: var(--s-25);
    }

    .py-md-26 {
        padding-top: var(--s-26);
        padding-bottom: var(--s-26);
    }

    .py-md-27 {
        padding-top: var(--s-27);
        padding-bottom: var(--s-27);
    }

    .py-md-28 {
        padding-top: var(--s-28);
        padding-bottom: var(--s-28);
    }

    .py-md-29 {
        padding-top: var(--s-29);
        padding-bottom: var(--s-29);
    }

    .py-md-30 {
        padding-top: var(--s-30);
        padding-bottom: var(--s-30);
    }

    .py-md-31 {
        padding-top: var(--s-31);
        padding-bottom: var(--s-31);
    }

    .py-md-32 {
        padding-top: var(--s-32);
        padding-bottom: var(--s-32);
    }

    .pt-md-21 {
        padding-top: var(--s-21);
    }

    .pt-md-22 {
        padding-top: var(--s-22);
    }

    .pt-md-23 {
        padding-top: var(--s-23);
    }

    .pt-md-24 {
        padding-top: var(--s-24);
    }

    .pt-md-25 {
        padding-top: var(--s-25);
    }

    .pt-md-26 {
        padding-top: var(--s-26);
    }

    .pt-md-27 {
        padding-top: var(--s-27);
    }

    .pt-md-28 {
        padding-top: var(--s-28);
    }

    .pt-md-29 {
        padding-top: var(--s-29);
    }

    .pt-md-30 {
        padding-top: var(--s-30);
    }

    .pt-md-31 {
        padding-top: var(--s-31);
    }

    .pt-md-32 {
        padding-top: var(--s-32);
    }

    .pr-md-21 {
        padding-right: var(--s-21);
    }

    .pr-md-22 {
        padding-right: var(--s-22);
    }

    .pr-md-23 {
        padding-right: var(--s-23);
    }

    .pr-md-24 {
        padding-right: var(--s-24);
    }

    .pr-md-25 {
        padding-right: var(--s-25);
    }

    .pr-md-26 {
        padding-right: var(--s-26);
    }

    .pr-md-27 {
        padding-right: var(--s-27);
    }

    .pr-md-28 {
        padding-right: var(--s-28);
    }

    .pr-md-29 {
        padding-right: var(--s-29);
    }

    .pr-md-30 {
        padding-right: var(--s-30);
    }

    .pr-md-31 {
        padding-right: var(--s-31);
    }

    .pr-md-32 {
        padding-right: var(--s-32);
    }

    .pb-md-21 {
        padding-bottom: var(--s-21);
    }

    .pb-md-22 {
        padding-bottom: var(--s-22);
    }

    .pb-md-23 {
        padding-bottom: var(--s-23);
    }

    .pb-md-24 {
        padding-bottom: var(--s-24);
    }

    .pb-md-25 {
        padding-bottom: var(--s-25);
    }

    .pb-md-26 {
        padding-bottom: var(--s-26);
    }

    .pb-md-27 {
        padding-bottom: var(--s-27);
    }

    .pb-md-28 {
        padding-bottom: var(--s-28);
    }

    .pb-md-29 {
        padding-bottom: var(--s-29);
    }

    .pb-md-30 {
        padding-bottom: var(--s-30);
    }

    .pb-md-31 {
        padding-bottom: var(--s-31);
    }

    .pb-md-32 {
        padding-bottom: var(--s-32);
    }

    .pl-md-21 {
        padding-left: var(--s-21);
    }

    .pl-md-22 {
        padding-left: var(--s-22);
    }

    .pl-md-23 {
        padding-left: var(--s-23);
    }

    .pl-md-24 {
        padding-left: var(--s-24);
    }

    .pl-md-25 {
        padding-left: var(--s-25);
    }

    .pl-md-26 {
        padding-left: var(--s-26);
    }

    .pl-md-27 {
        padding-left: var(--s-27);
    }

    .pl-md-28 {
        padding-left: var(--s-28);
    }

    .pl-md-29 {
        padding-left: var(--s-29);
    }

    .pl-md-30 {
        padding-left: var(--s-30);
    }

    .pl-md-31 {
        padding-left: var(--s-31);
    }

    .pl-md-32 {
        padding-left: var(--s-32);
    }

    /* Margin */
    .m-md-21 {
        margin: var(--s-21);
    }

    .m-md-22 {
        margin: var(--s-22);
    }

    .m-md-23 {
        margin: var(--s-23);
    }

    .m-md-24 {
        margin: var(--s-24);
    }

    .m-md-25 {
        margin: var(--s-25);
    }

    .m-md-26 {
        margin: var(--s-26);
    }

    .m-md-27 {
        margin: var(--s-27);
    }

    .m-md-28 {
        margin: var(--s-28);
    }

    .m-md-29 {
        margin: var(--s-29);
    }

    .m-md-30 {
        margin: var(--s-30);
    }

    .m-md-31 {
        margin: var(--s-31);
    }

    .m-md-32 {
        margin: var(--s-32);
    }

    .mx-md-21 {
        margin-left: var(--s-21);
        margin-right: var(--s-21);
    }

    .mx-md-22 {
        margin-left: var(--s-22);
        margin-right: var(--s-22);
    }

    .mx-md-23 {
        margin-left: var(--s-23);
        margin-right: var(--s-23);
    }

    .mx-md-24 {
        margin-left: var(--s-24);
        margin-right: var(--s-24);
    }

    .mx-md-25 {
        margin-left: var(--s-25);
        margin-right: var(--s-25);
    }

    .mx-md-26 {
        margin-left: var(--s-26);
        margin-right: var(--s-26);
    }

    .mx-md-27 {
        margin-left: var(--s-27);
        margin-right: var(--s-27);
    }

    .mx-md-28 {
        margin-left: var(--s-28);
        margin-right: var(--s-28);
    }

    .mx-md-29 {
        margin-left: var(--s-29);
        margin-right: var(--s-29);
    }

    .mx-md-30 {
        margin-left: var(--s-30);
        margin-right: var(--s-30);
    }

    .mx-md-31 {
        margin-left: var(--s-31);
        margin-right: var(--s-31);
    }

    .mx-md-32 {
        margin-left: var(--s-32);
        margin-right: var(--s-32);
    }

    .my-md-21 {
        margin-top: var(--s-21);
        margin-bottom: var(--s-21);
    }

    .my-md-22 {
        margin-top: var(--s-22);
        margin-bottom: var(--s-22);
    }

    .my-md-23 {
        margin-top: var(--s-23);
        margin-bottom: var(--s-23);
    }

    .my-md-24 {
        margin-top: var(--s-24);
        margin-bottom: var(--s-24);
    }

    .my-md-25 {
        margin-top: var(--s-25);
        margin-bottom: var(--s-25);
    }

    .my-md-26 {
        margin-top: var(--s-26);
        margin-bottom: var(--s-26);
    }

    .my-md-27 {
        margin-top: var(--s-27);
        margin-bottom: var(--s-27);
    }

    .my-md-28 {
        margin-top: var(--s-28);
        margin-bottom: var(--s-28);
    }

    .my-md-29 {
        margin-top: var(--s-29);
        margin-bottom: var(--s-29);
    }

    .my-md-30 {
        margin-top: var(--s-30);
        margin-bottom: var(--s-30);
    }

    .my-md-31 {
        margin-top: var(--s-31);
        margin-bottom: var(--s-31);
    }

    .my-md-32 {
        margin-top: var(--s-32);
        margin-bottom: var(--s-32);
    }

    .mt-md-21 {
        margin-top: var(--s-21);
    }

    .mt-md-22 {
        margin-top: var(--s-22);
    }

    .mt-md-23 {
        margin-top: var(--s-23);
    }

    .mt-md-24 {
        margin-top: var(--s-24);
    }

    .mt-md-25 {
        margin-top: var(--s-25);
    }

    .mt-md-26 {
        margin-top: var(--s-26);
    }

    .mt-md-27 {
        margin-top: var(--s-27);
    }

    .mt-md-28 {
        margin-top: var(--s-28);
    }

    .mt-md-29 {
        margin-top: var(--s-29);
    }

    .mt-md-30 {
        margin-top: var(--s-30);
    }

    .mt-md-31 {
        margin-top: var(--s-31);
    }

    .mt-md-32 {
        margin-top: var(--s-32);
    }

    .mr-md-21 {
        margin-right: var(--s-21);
    }

    .mr-md-22 {
        margin-right: var(--s-22);
    }

    .mr-md-23 {
        margin-right: var(--s-23);
    }

    .mr-md-24 {
        margin-right: var(--s-24);
    }

    .mr-md-25 {
        margin-right: var(--s-25);
    }

    .mr-md-26 {
        margin-right: var(--s-26);
    }

    .mr-md-27 {
        margin-right: var(--s-27);
    }

    .mr-md-28 {
        margin-right: var(--s-28);
    }

    .mr-md-29 {
        margin-right: var(--s-29);
    }

    .mr-md-30 {
        margin-right: var(--s-30);
    }

    .mr-md-31 {
        margin-right: var(--s-31);
    }

    .mr-md-32 {
        margin-right: var(--s-32);
    }

    .mb-md-21 {
        margin-bottom: var(--s-21);
    }

    .mb-md-22 {
        margin-bottom: var(--s-22);
    }

    .mb-md-23 {
        margin-bottom: var(--s-23);
    }

    .mb-md-24 {
        margin-bottom: var(--s-24);
    }

    .mb-md-25 {
        margin-bottom: var(--s-25);
    }

    .mb-md-26 {
        margin-bottom: var(--s-26);
    }

    .mb-md-27 {
        margin-bottom: var(--s-27);
    }

    .mb-md-28 {
        margin-bottom: var(--s-28);
    }

    .mb-md-29 {
        margin-bottom: var(--s-29);
    }

    .mb-md-30 {
        margin-bottom: var(--s-30);
    }

    .mb-md-31 {
        margin-bottom: var(--s-31);
    }

    .mb-md-32 {
        margin-bottom: var(--s-32);
    }

    .ml-md-21 {
        margin-left: var(--s-21);
    }

    .ml-md-22 {
        margin-left: var(--s-22);
    }

    .ml-md-23 {
        margin-left: var(--s-23);
    }

    .ml-md-24 {
        margin-left: var(--s-24);
    }

    .ml-md-25 {
        margin-left: var(--s-25);
    }

    .ml-md-26 {
        margin-left: var(--s-26);
    }

    .ml-md-27 {
        margin-left: var(--s-27);
    }

    .ml-md-28 {
        margin-left: var(--s-28);
    }

    .ml-md-29 {
        margin-left: var(--s-29);
    }

    .ml-md-30 {
        margin-left: var(--s-30);
    }

    .ml-md-31 {
        margin-left: var(--s-31);
    }

    .ml-md-32 {
        margin-left: var(--s-32);
    }
}

/* =========================================================
   LG (>= 1280px)
   ========================================================= */
@media (min-width:1280px) {
    /* Padding */
    .p-lg-21 {
        padding: var(--s-21);
    }

    .p-lg-22 {
        padding: var(--s-22);
    }

    .p-lg-23 {
        padding: var(--s-23);
    }

    .p-lg-24 {
        padding: var(--s-24);
    }

    .p-lg-25 {
        padding: var(--s-25);
    }

    .p-lg-26 {
        padding: var(--s-26);
    }

    .p-lg-27 {
        padding: var(--s-27);
    }

    .p-lg-28 {
        padding: var(--s-28);
    }

    .p-lg-29 {
        padding: var(--s-29);
    }

    .p-lg-30 {
        padding: var(--s-30);
    }

    .p-lg-31 {
        padding: var(--s-31);
    }

    .p-lg-32 {
        padding: var(--s-32);
    }

    .px-lg-21 {
        padding-left: var(--s-21);
        padding-right: var(--s-21);
    }

    .px-lg-22 {
        padding-left: var(--s-22);
        padding-right: var(--s-22);
    }

    .px-lg-23 {
        padding-left: var(--s-23);
        padding-right: var(--s-23);
    }

    .px-lg-24 {
        padding-left: var(--s-24);
        padding-right: var(--s-24);
    }

    .px-lg-25 {
        padding-left: var(--s-25);
        padding-right: var(--s-25);
    }

    .px-lg-26 {
        padding-left: var(--s-26);
        padding-right: var(--s-26);
    }

    .px-lg-27 {
        padding-left: var(--s-27);
        padding-right: var(--s-27);
    }

    .px-lg-28 {
        padding-left: var(--s-28);
        padding-right: var(--s-28);
    }

    .px-lg-29 {
        padding-left: var(--s-29);
        padding-right: var(--s-29);
    }

    .px-lg-30 {
        padding-left: var(--s-30);
        padding-right: var(--s-30);
    }

    .px-lg-31 {
        padding-left: var(--s-31);
        padding-right: var(--s-31);
    }

    .px-lg-32 {
        padding-left: var(--s-32);
        padding-right: var(--s-32);
    }

    .py-lg-21 {
        padding-top: var(--s-21);
        padding-bottom: var(--s-21);
    }

    .py-lg-22 {
        padding-top: var(--s-22);
        padding-bottom: var(--s-22);
    }

    .py-lg-23 {
        padding-top: var(--s-23);
        padding-bottom: var(--s-23);
    }

    .py-lg-24 {
        padding-top: var(--s-24);
        padding-bottom: var(--s-24);
    }

    .py-lg-25 {
        padding-top: var(--s-25);
        padding-bottom: var(--s-25);
    }

    .py-lg-26 {
        padding-top: var(--s-26);
        padding-bottom: var(--s-26);
    }

    .py-lg-27 {
        padding-top: var(--s-27);
        padding-bottom: var(--s-27);
    }

    .py-lg-28 {
        padding-top: var(--s-28);
        padding-bottom: var(--s-28);
    }

    .py-lg-29 {
        padding-top: var(--s-29);
        padding-bottom: var(--s-29);
    }

    .py-lg-30 {
        padding-top: var(--s-30);
        padding-bottom: var(--s-30);
    }

    .py-lg-31 {
        padding-top: var(--s-31);
        padding-bottom: var(--s-31);
    }

    .py-lg-32 {
        padding-top: var(--s-32);
        padding-bottom: var(--s-32);
    }

    .pt-lg-21 {
        padding-top: var(--s-21);
    }

    .pt-lg-22 {
        padding-top: var(--s-22);
    }

    .pt-lg-23 {
        padding-top: var(--s-23);
    }

    .pt-lg-24 {
        padding-top: var(--s-24);
    }

    .pt-lg-25 {
        padding-top: var(--s-25);
    }

    .pt-lg-26 {
        padding-top: var(--s-26);
    }

    .pt-lg-27 {
        padding-top: var(--s-27);
    }

    .pt-lg-28 {
        padding-top: var(--s-28);
    }

    .pt-lg-29 {
        padding-top: var(--s-29);
    }

    .pt-lg-30 {
        padding-top: var(--s-30);
    }

    .pt-lg-31 {
        padding-top: var(--s-31);
    }

    .pt-lg-32 {
        padding-top: var(--s-32);
    }

    .pr-lg-21 {
        padding-right: var(--s-21);
    }

    .pr-lg-22 {
        padding-right: var(--s-22);
    }

    .pr-lg-23 {
        padding-right: var(--s-23);
    }

    .pr-lg-24 {
        padding-right: var(--s-24);
    }

    .pr-lg-25 {
        padding-right: var(--s-25);
    }

    .pr-lg-26 {
        padding-right: var(--s-26);
    }

    .pr-lg-27 {
        padding-right: var(--s-27);
    }

    .pr-lg-28 {
        padding-right: var(--s-28);
    }

    .pr-lg-29 {
        padding-right: var(--s-29);
    }

    .pr-lg-30 {
        padding-right: var(--s-30);
    }

    .pr-lg-31 {
        padding-right: var(--s-31);
    }

    .pr-lg-32 {
        padding-right: var(--s-32);
    }

    .pb-lg-21 {
        padding-bottom: var(--s-21);
    }

    .pb-lg-22 {
        padding-bottom: var(--s-22);
    }

    .pb-lg-23 {
        padding-bottom: var(--s-23);
    }

    .pb-lg-24 {
        padding-bottom: var(--s-24);
    }

    .pb-lg-25 {
        padding-bottom: var(--s-25);
    }

    .pb-lg-26 {
        padding-bottom: var(--s-26);
    }

    .pb-lg-27 {
        padding-bottom: var(--s-27);
    }

    .pb-lg-28 {
        padding-bottom: var(--s-28);
    }

    .pb-lg-29 {
        padding-bottom: var(--s-29);
    }

    .pb-lg-30 {
        padding-bottom: var(--s-30);
    }

    .pb-lg-31 {
        padding-bottom: var(--s-31);
    }

    .pb-lg-32 {
        padding-bottom: var(--s-32);
    }

    .pl-lg-21 {
        padding-left: var(--s-21);
    }

    .pl-lg-22 {
        padding-left: var(--s-22);
    }

    .pl-lg-23 {
        padding-left: var(--s-23);
    }

    .pl-lg-24 {
        padding-left: var(--s-24);
    }

    .pl-lg-25 {
        padding-left: var(--s-25);
    }

    .pl-lg-26 {
        padding-left: var(--s-26);
    }

    .pl-lg-27 {
        padding-left: var(--s-27);
    }

    .pl-lg-28 {
        padding-left: var(--s-28);
    }

    .pl-lg-29 {
        padding-left: var(--s-29);
    }

    .pl-lg-30 {
        padding-left: var(--s-30);
    }

    .pl-lg-31 {
        padding-left: var(--s-31);
    }

    .pl-lg-32 {
        padding-left: var(--s-32);
    }

    /* Margin */
    .m-lg-21 {
        margin: var(--s-21);
    }

    .m-lg-22 {
        margin: var(--s-22);
    }

    .m-lg-23 {
        margin: var(--s-23);
    }

    .m-lg-24 {
        margin: var(--s-24);
    }

    .m-lg-25 {
        margin: var(--s-25);
    }

    .m-lg-26 {
        margin: var(--s-26);
    }

    .m-lg-27 {
        margin: var(--s-27);
    }

    .m-lg-28 {
        margin: var(--s-28);
    }

    .m-lg-29 {
        margin: var(--s-29);
    }

    .m-lg-30 {
        margin: var(--s-30);
    }

    .m-lg-31 {
        margin: var(--s-31);
    }

    .m-lg-32 {
        margin: var(--s-32);
    }

    .mx-lg-21 {
        margin-left: var(--s-21);
        margin-right: var(--s-21);
    }

    .mx-lg-22 {
        margin-left: var(--s-22);
        margin-right: var(--s-22);
    }

    .mx-lg-23 {
        margin-left: var(--s-23);
        margin-right: var(--s-23);
    }

    .mx-lg-24 {
        margin-left: var(--s-24);
        margin-right: var(--s-24);
    }

    .mx-lg-25 {
        margin-left: var(--s-25);
        margin-right: var(--s-25);
    }

    .mx-lg-26 {
        margin-left: var(--s-26);
        margin-right: var(--s-26);
    }

    .mx-lg-27 {
        margin-left: var(--s-27);
        margin-right: var(--s-27);
    }

    .mx-lg-28 {
        margin-left: var(--s-28);
        margin-right: var(--s-28);
    }

    .mx-lg-29 {
        margin-left: var(--s-29);
        margin-right: var(--s-29);
    }

    .mx-lg-30 {
        margin-left: var(--s-30);
        margin-right: var(--s-30);
    }

    .mx-lg-31 {
        margin-left: var(--s-31);
        margin-right: var(--s-31);
    }

    .mx-lg-32 {
        margin-left: var(--s-32);
        margin-right: var(--s-32);
    }

    .my-lg-21 {
        margin-top: var(--s-21);
        margin-bottom: var(--s-21);
    }

    .my-lg-22 {
        margin-top: var(--s-22);
        margin-bottom: var(--s-22);
    }

    .my-lg-23 {
        margin-top: var(--s-23);
        margin-bottom: var(--s-23);
    }

    .my-lg-24 {
        margin-top: var(--s-24);
        margin-bottom: var(--s-24);
    }

    .my-lg-25 {
        margin-top: var(--s-25);
        margin-bottom: var(--s-25);
    }

    .my-lg-26 {
        margin-top: var(--s-26);
        margin-bottom: var(--s-26);
    }

    .my-lg-27 {
        margin-top: var(--s-27);
        margin-bottom: var(--s-27);
    }

    .my-lg-28 {
        margin-top: var(--s-28);
        margin-bottom: var(--s-28);
    }

    .my-lg-29 {
        margin-top: var(--s-29);
        margin-bottom: var(--s-29);
    }

    .my-lg-30 {
        margin-top: var(--s-30);
        margin-bottom: var(--s-30);
    }

    .my-lg-31 {
        margin-top: var(--s-31);
        margin-bottom: var(--s-31);
    }

    .my-lg-32 {
        margin-top: var(--s-32);
        margin-bottom: var(--s-32);
    }

    .mt-lg-21 {
        margin-top: var(--s-21);
    }

    .mt-lg-22 {
        margin-top: var(--s-22);
    }

    .mt-lg-23 {
        margin-top: var(--s-23);
    }

    .mt-lg-24 {
        margin-top: var(--s-24);
    }

    .mt-lg-25 {
        margin-top: var(--s-25);
    }

    .mt-lg-26 {
        margin-top: var(--s-26);
    }

    .mt-lg-27 {
        margin-top: var(--s-27);
    }

    .mt-lg-28 {
        margin-top: var(--s-28);
    }

    .mt-lg-29 {
        margin-top: var(--s-29);
    }

    .mt-lg-30 {
        margin-top: var(--s-30);
    }

    .mt-lg-31 {
        margin-top: var(--s-31);
    }

    .mt-lg-32 {
        margin-top: var(--s-32);
    }

    .mr-lg-21 {
        margin-right: var(--s-21);
    }

    .mr-lg-22 {
        margin-right: var(--s-22);
    }

    .mr-lg-23 {
        margin-right: var(--s-23);
    }

    .mr-lg-24 {
        margin-right: var(--s-24);
    }

    .mr-lg-25 {
        margin-right: var(--s-25);
    }

    .mr-lg-26 {
        margin-right: var(--s-26);
    }

    .mr-lg-27 {
        margin-right: var(--s-27);
    }

    .mr-lg-28 {
        margin-right: var(--s-28);
    }

    .mr-lg-29 {
        margin-right: var(--s-29);
    }

    .mr-lg-30 {
        margin-right: var(--s-30);
    }

    .mr-lg-31 {
        margin-right: var(--s-31);
    }

    .mr-lg-32 {
        margin-right: var(--s-32);
    }

    .mb-lg-21 {
        margin-bottom: var(--s-21);
    }

    .mb-lg-22 {
        margin-bottom: var(--s-22);
    }

    .mb-lg-23 {
        margin-bottom: var(--s-23);
    }

    .mb-lg-24 {
        margin-bottom: var(--s-24);
    }

    .mb-lg-25 {
        margin-bottom: var(--s-25);
    }

    .mb-lg-26 {
        margin-bottom: var(--s-26);
    }

    .mb-lg-27 {
        margin-bottom: var(--s-27);
    }

    .mb-lg-28 {
        margin-bottom: var(--s-28);
    }

    .mb-lg-29 {
        margin-bottom: var(--s-29);
    }

    .mb-lg-30 {
        margin-bottom: var(--s-30);
    }

    .mb-lg-31 {
        margin-bottom: var(--s-31);
    }

    .mb-lg-32 {
        margin-bottom: var(--s-32);
    }

    .ml-lg-21 {
        margin-left: var(--s-21);
    }

    .ml-lg-22 {
        margin-left: var(--s-22);
    }

    .ml-lg-23 {
        margin-left: var(--s-23);
    }

    .ml-lg-24 {
        margin-left: var(--s-24);
    }

    .ml-lg-25 {
        margin-left: var(--s-25);
    }

    .ml-lg-26 {
        margin-left: var(--s-26);
    }

    .ml-lg-27 {
        margin-left: var(--s-27);
    }

    .ml-lg-28 {
        margin-left: var(--s-28);
    }

    .ml-lg-29 {
        margin-left: var(--s-29);
    }

    .ml-lg-30 {
        margin-left: var(--s-30);
    }

    .ml-lg-31 {
        margin-left: var(--s-31);
    }

    .ml-lg-32 {
        margin-left: var(--s-32);
    }
}

/* =========================================================
   XL (>= 1920px)
   ========================================================= */
@media (min-width:1920px) {
    /* Padding */
    .p-xl-21 {
        padding: var(--s-21);
    }

    .p-xl-22 {
        padding: var(--s-22);
    }

    .p-xl-23 {
        padding: var(--s-23);
    }

    .p-xl-24 {
        padding: var(--s-24);
    }

    .p-xl-25 {
        padding: var(--s-25);
    }

    .p-xl-26 {
        padding: var(--s-26);
    }

    .p-xl-27 {
        padding: var(--s-27);
    }

    .p-xl-28 {
        padding: var(--s-28);
    }

    .p-xl-29 {
        padding: var(--s-29);
    }

    .p-xl-30 {
        padding: var(--s-30);
    }

    .p-xl-31 {
        padding: var(--s-31);
    }

    .p-xl-32 {
        padding: var(--s-32);
    }

    .px-xl-21 {
        padding-left: var(--s-21);
        padding-right: var(--s-21);
    }

    .px-xl-22 {
        padding-left: var(--s-22);
        padding-right: var(--s-22);
    }

    .px-xl-23 {
        padding-left: var(--s-23);
        padding-right: var(--s-23);
    }

    .px-xl-24 {
        padding-left: var(--s-24);
        padding-right: var(--s-24);
    }

    .px-xl-25 {
        padding-left: var(--s-25);
        padding-right: var(--s-25);
    }

    .px-xl-26 {
        padding-left: var(--s-26);
        padding-right: var(--s-26);
    }

    .px-xl-27 {
        padding-left: var(--s-27);
        padding-right: var(--s-27);
    }

    .px-xl-28 {
        padding-left: var(--s-28);
        padding-right: var(--s-28);
    }

    .px-xl-29 {
        padding-left: var(--s-29);
        padding-right: var(--s-29);
    }

    .px-xl-30 {
        padding-left: var(--s-30);
        padding-right: var(--s-30);
    }

    .px-xl-31 {
        padding-left: var(--s-31);
        padding-right: var(--s-31);
    }

    .px-xl-32 {
        padding-left: var(--s-32);
        padding-right: var(--s-32);
    }

    .py-xl-21 {
        padding-top: var(--s-21);
        padding-bottom: var(--s-21);
    }

    .py-xl-22 {
        padding-top: var(--s-22);
        padding-bottom: var(--s-22);
    }

    .py-xl-23 {
        padding-top: var(--s-23);
        padding-bottom: var(--s-23);
    }

    .py-xl-24 {
        padding-top: var(--s-24);
        padding-bottom: var(--s-24);
    }

    .py-xl-25 {
        padding-top: var(--s-25);
        padding-bottom: var(--s-25);
    }

    .py-xl-26 {
        padding-top: var(--s-26);
        padding-bottom: var(--s-26);
    }

    .py-xl-27 {
        padding-top: var(--s-27);
        padding-bottom: var(--s-27);
    }

    .py-xl-28 {
        padding-top: var(--s-28);
        padding-bottom: var(--s-28);
    }

    .py-xl-29 {
        padding-top: var(--s-29);
        padding-bottom: var(--s-29);
    }

    .py-xl-30 {
        padding-top: var(--s-30);
        padding-bottom: var(--s-30);
    }

    .py-xl-31 {
        padding-top: var(--s-31);
        padding-bottom: var(--s-31);
    }

    .py-xl-32 {
        padding-top: var(--s-32);
        padding-bottom: var(--s-32);
    }

    .pt-xl-21 {
        padding-top: var(--s-21);
    }

    .pt-xl-22 {
        padding-top: var(--s-22);
    }

    .pt-xl-23 {
        padding-top: var(--s-23);
    }

    .pt-xl-24 {
        padding-top: var(--s-24);
    }

    .pt-xl-25 {
        padding-top: var(--s-25);
    }

    .pt-xl-26 {
        padding-top: var(--s-26);
    }

    .pt-xl-27 {
        padding-top: var(--s-27);
    }

    .pt-xl-28 {
        padding-top: var(--s-28);
    }

    .pt-xl-29 {
        padding-top: var(--s-29);
    }

    .pt-xl-30 {
        padding-top: var(--s-30);
    }

    .pt-xl-31 {
        padding-top: var(--s-31);
    }

    .pt-xl-32 {
        padding-top: var(--s-32);
    }

    .pr-xl-21 {
        padding-right: var(--s-21);
    }

    .pr-xl-22 {
        padding-right: var(--s-22);
    }

    .pr-xl-23 {
        padding-right: var(--s-23);
    }

    .pr-xl-24 {
        padding-right: var(--s-24);
    }

    .pr-xl-25 {
        padding-right: var(--s-25);
    }

    .pr-xl-26 {
        padding-right: var(--s-26);
    }

    .pr-xl-27 {
        padding-right: var(--s-27);
    }

    .pr-xl-28 {
        padding-right: var(--s-28);
    }

    .pr-xl-29 {
        padding-right: var(--s-29);
    }

    .pr-xl-30 {
        padding-right: var(--s-30);
    }

    .pr-xl-31 {
        padding-right: var(--s-31);
    }

    .pr-xl-32 {
        padding-right: var(--s-32);
    }

    .pb-xl-21 {
        padding-bottom: var(--s-21);
    }

    .pb-xl-22 {
        padding-bottom: var(--s-22);
    }

    .pb-xl-23 {
        padding-bottom: var(--s-23);
    }

    .pb-xl-24 {
        padding-bottom: var(--s-24);
    }

    .pb-xl-25 {
        padding-bottom: var(--s-25);
    }

    .pb-xl-26 {
        padding-bottom: var(--s-26);
    }

    .pb-xl-27 {
        padding-bottom: var(--s-27);
    }

    .pb-xl-28 {
        padding-bottom: var(--s-28);
    }

    .pb-xl-29 {
        padding-bottom: var(--s-29);
    }

    .pb-xl-30 {
        padding-bottom: var(--s-30);
    }

    .pb-xl-31 {
        padding-bottom: var(--s-31);
    }

    .pb-xl-32 {
        padding-bottom: var(--s-32);
    }

    .pl-xl-21 {
        padding-left: var(--s-21);
    }

    .pl-xl-22 {
        padding-left: var(--s-22);
    }

    .pl-xl-23 {
        padding-left: var(--s-23);
    }

    .pl-xl-24 {
        padding-left: var(--s-24);
    }

    .pl-xl-25 {
        padding-left: var(--s-25);
    }

    .pl-xl-26 {
        padding-left: var(--s-26);
    }

    .pl-xl-27 {
        padding-left: var(--s-27);
    }

    .pl-xl-28 {
        padding-left: var(--s-28);
    }

    .pl-xl-29 {
        padding-left: var(--s-29);
    }

    .pl-xl-30 {
        padding-left: var(--s-30);
    }

    .pl-xl-31 {
        padding-left: var(--s-31);
    }

    .pl-xl-32 {
        padding-left: var(--s-32);
    }

    /* Margin */
    .m-xl-21 {
        margin: var(--s-21);
    }

    .m-xl-22 {
        margin: var(--s-22);
    }

    .m-xl-23 {
        margin: var(--s-23);
    }

    .m-xl-24 {
        margin: var(--s-24);
    }

    .m-xl-25 {
        margin: var(--s-25);
    }

    .m-xl-26 {
        margin: var(--s-26);
    }

    .m-xl-27 {
        margin: var(--s-27);
    }

    .m-xl-28 {
        margin: var(--s-28);
    }

    .m-xl-29 {
        margin: var(--s-29);
    }

    .m-xl-30 {
        margin: var(--s-30);
    }

    .m-xl-31 {
        margin: var(--s-31);
    }

    .m-xl-32 {
        margin: var(--s-32);
    }

    .mx-xl-21 {
        margin-left: var(--s-21);
        margin-right: var(--s-21);
    }

    .mx-xl-22 {
        margin-left: var(--s-22);
        margin-right: var(--s-22);
    }

    .mx-xl-23 {
        margin-left: var(--s-23);
        margin-right: var(--s-23);
    }

    .mx-xl-24 {
        margin-left: var(--s-24);
        margin-right: var(--s-24);
    }

    .mx-xl-25 {
        margin-left: var(--s-25);
        margin-right: var(--s-25);
    }

    .mx-xl-26 {
        margin-left: var(--s-26);
        margin-right: var(--s-26);
    }

    .mx-xl-27 {
        margin-left: var(--s-27);
        margin-right: var(--s-27);
    }

    .mx-xl-28 {
        margin-left: var(--s-28);
        margin-right: var(--s-28);
    }

    .mx-xl-29 {
        margin-left: var(--s-29);
        margin-right: var(--s-29);
    }

    .mx-xl-30 {
        margin-left: var(--s-30);
        margin-right: var(--s-30);
    }

    .mx-xl-31 {
        margin-left: var(--s-31);
        margin-right: var(--s-31);
    }

    .mx-xl-32 {
        margin-left: var(--s-32);
        margin-right: var(--s-32);
    }

    .my-xl-21 {
        margin-top: var(--s-21);
        margin-bottom: var(--s-21);
    }

    .my-xl-22 {
        margin-top: var(--s-22);
        margin-bottom: var(--s-22);
    }

    .my-xl-23 {
        margin-top: var(--s-23);
        margin-bottom: var(--s-23);
    }

    .my-xl-24 {
        margin-top: var(--s-24);
        margin-bottom: var(--s-24);
    }

    .my-xl-25 {
        margin-top: var(--s-25);
        margin-bottom: var(--s-25);
    }

    .my-xl-26 {
        margin-top: var(--s-26);
        margin-bottom: var(--s-26);
    }

    .my-xl-27 {
        margin-top: var(--s-27);
        margin-bottom: var(--s-27);
    }

    .my-xl-28 {
        margin-top: var(--s-28);
        margin-bottom: var(--s-28);
    }

    .my-xl-29 {
        margin-top: var(--s-29);
        margin-bottom: var(--s-29);
    }

    .my-xl-30 {
        margin-top: var(--s-30);
        margin-bottom: var(--s-30);
    }

    .my-xl-31 {
        margin-top: var(--s-31);
        margin-bottom: var(--s-31);
    }

    .my-xl-32 {
        margin-top: var(--s-32);
        margin-bottom: var(--s-32);
    }

    .mt-xl-21 {
        margin-top: var(--s-21);
    }

    .mt-xl-22 {
        margin-top: var(--s-22);
    }

    .mt-xl-23 {
        margin-top: var(--s-23);
    }

    .mt-xl-24 {
        margin-top: var(--s-24);
    }

    .mt-xl-25 {
        margin-top: var(--s-25);
    }

    .mt-xl-26 {
        margin-top: var(--s-26);
    }

    .mt-xl-27 {
        margin-top: var(--s-27);
    }

    .mt-xl-28 {
        margin-top: var(--s-28);
    }

    .mt-xl-29 {
        margin-top: var(--s-29);
    }

    .mt-xl-30 {
        margin-top: var(--s-30);
    }

    .mt-xl-31 {
        margin-top: var(--s-31);
    }

    .mt-xl-32 {
        margin-top: var(--s-32);
    }

    .mr-xl-21 {
        margin-right: var(--s-21);
    }

    .mr-xl-22 {
        margin-right: var(--s-22);
    }

    .mr-xl-23 {
        margin-right: var(--s-23);
    }

    .mr-xl-24 {
        margin-right: var(--s-24);
    }

    .mr-xl-25 {
        margin-right: var(--s-25);
    }

    .mr-xl-26 {
        margin-right: var(--s-26);
    }

    .mr-xl-27 {
        margin-right: var(--s-27);
    }

    .mr-xl-28 {
        margin-right: var(--s-28);
    }

    .mr-xl-29 {
        margin-right: var(--s-29);
    }

    .mr-xl-30 {
        margin-right: var(--s-30);
    }

    .mr-xl-31 {
        margin-right: var(--s-31);
    }

    .mr-xl-32 {
        margin-right: var(--s-32);
    }

    .mb-xl-21 {
        margin-bottom: var(--s-21);
    }

    .mb-xl-22 {
        margin-bottom: var(--s-22);
    }

    .mb-xl-23 {
        margin-bottom: var(--s-23);
    }

    .mb-xl-24 {
        margin-bottom: var(--s-24);
    }

    .mb-xl-25 {
        margin-bottom: var(--s-25);
    }

    .mb-xl-26 {
        margin-bottom: var(--s-26);
    }

    .mb-xl-27 {
        margin-bottom: var(--s-27);
    }

    .mb-xl-28 {
        margin-bottom: var(--s-28);
    }

    .mb-xl-29 {
        margin-bottom: var(--s-29);
    }

    .mb-xl-30 {
        margin-bottom: var(--s-30);
    }

    .mb-xl-31 {
        margin-bottom: var(--s-31);
    }

    .mb-xl-32 {
        margin-bottom: var(--s-32);
    }

    .ml-xl-21 {
        margin-left: var(--s-21);
    }

    .ml-xl-22 {
        margin-left: var(--s-22);
    }

    .ml-xl-23 {
        margin-left: var(--s-23);
    }

    .ml-xl-24 {
        margin-left: var(--s-24);
    }

    .ml-xl-25 {
        margin-left: var(--s-25);
    }

    .ml-xl-26 {
        margin-left: var(--s-26);
    }

    .ml-xl-27 {
        margin-left: var(--s-27);
    }

    .ml-xl-28 {
        margin-left: var(--s-28);
    }

    .ml-xl-29 {
        margin-left: var(--s-29);
    }

    .ml-xl-30 {
        margin-left: var(--s-30);
    }

    .ml-xl-31 {
        margin-left: var(--s-31);
    }

    .ml-xl-32 {
        margin-left: var(--s-32);
    }
}

/* =========================================================
   XXL (>= 2560px)
   ========================================================= */
@media (min-width:2560px) {
    /* Padding */
    .p-xxl-21 {
        padding: var(--s-21);
    }

    .p-xxl-22 {
        padding: var(--s-22);
    }

    .p-xxl-23 {
        padding: var(--s-23);
    }

    .p-xxl-24 {
        padding: var(--s-24);
    }

    .p-xxl-25 {
        padding: var(--s-25);
    }

    .p-xxl-26 {
        padding: var(--s-26);
    }

    .p-xxl-27 {
        padding: var(--s-27);
    }

    .p-xxl-28 {
        padding: var(--s-28);
    }

    .p-xxl-29 {
        padding: var(--s-29);
    }

    .p-xxl-30 {
        padding: var(--s-30);
    }

    .p-xxl-31 {
        padding: var(--s-31);
    }

    .p-xxl-32 {
        padding: var(--s-32);
    }

    .px-xxl-21 {
        padding-left: var(--s-21);
        padding-right: var(--s-21);
    }

    .px-xxl-22 {
        padding-left: var(--s-22);
        padding-right: var(--s-22);
    }

    .px-xxl-23 {
        padding-left: var(--s-23);
        padding-right: var(--s-23);
    }

    .px-xxl-24 {
        padding-left: var(--s-24);
        padding-right: var(--s-24);
    }

    .px-xxl-25 {
        padding-left: var(--s-25);
        padding-right: var(--s-25);
    }

    .px-xxl-26 {
        padding-left: var(--s-26);
        padding-right: var(--s-26);
    }

    .px-xxl-27 {
        padding-left: var(--s-27);
        padding-right: var(--s-27);
    }

    .px-xxl-28 {
        padding-left: var(--s-28);
        padding-right: var(--s-28);
    }

    .px-xxl-29 {
        padding-left: var(--s-29);
        padding-right: var(--s-29);
    }

    .px-xxl-30 {
        padding-left: var(--s-30);
        padding-right: var(--s-30);
    }

    .px-xxl-31 {
        padding-left: var(--s-31);
        padding-right: var(--s-31);
    }

    .px-xxl-32 {
        padding-left: var(--s-32);
        padding-right: var(--s-32);
    }

    .py-xxl-21 {
        padding-top: var(--s-21);
        padding-bottom: var(--s-21);
    }

    .py-xxl-22 {
        padding-top: var(--s-22);
        padding-bottom: var(--s-22);
    }

    .py-xxl-23 {
        padding-top: var(--s-23);
        padding-bottom: var(--s-23);
    }

    .py-xxl-24 {
        padding-top: var(--s-24);
        padding-bottom: var(--s-24);
    }

    .py-xxl-25 {
        padding-top: var(--s-25);
        padding-bottom: var(--s-25);
    }

    .py-xxl-26 {
        padding-top: var(--s-26);
        padding-bottom: var(--s-26);
    }

    .py-xxl-27 {
        padding-top: var(--s-27);
        padding-bottom: var(--s-27);
    }

    .py-xxl-28 {
        padding-top: var(--s-28);
        padding-bottom: var(--s-28);
    }

    .py-xxl-29 {
        padding-top: var(--s-29);
        padding-bottom: var(--s-29);
    }

    .py-xxl-30 {
        padding-top: var(--s-30);
        padding-bottom: var(--s-30);
    }

    .py-xxl-31 {
        padding-top: var(--s-31);
        padding-bottom: var(--s-31);
    }

    .py-xxl-32 {
        padding-top: var(--s-32);
        padding-bottom: var(--s-32);
    }

    .pt-xxl-21 {
        padding-top: var(--s-21);
    }

    .pt-xxl-22 {
        padding-top: var(--s-22);
    }

    .pt-xxl-23 {
        padding-top: var(--s-23);
    }

    .pt-xxl-24 {
        padding-top: var(--s-24);
    }

    .pt-xxl-25 {
        padding-top: var(--s-25);
    }

    .pt-xxl-26 {
        padding-top: var(--s-26);
    }

    .pt-xxl-27 {
        padding-top: var(--s-27);
    }

    .pt-xxl-28 {
        padding-top: var(--s-28);
    }

    .pt-xxl-29 {
        padding-top: var(--s-29);
    }

    .pt-xxl-30 {
        padding-top: var(--s-30);
    }

    .pt-xxl-31 {
        padding-top: var(--s-31);
    }

    .pt-xxl-32 {
        padding-top: var(--s-32);
    }

    .pr-xxl-21 {
        padding-right: var(--s-21);
    }

    .pr-xxl-22 {
        padding-right: var(--s-22);
    }

    .pr-xxl-23 {
        padding-right: var(--s-23);
    }

    .pr-xxl-24 {
        padding-right: var(--s-24);
    }

    .pr-xxl-25 {
        padding-right: var(--s-25);
    }

    .pr-xxl-26 {
        padding-right: var(--s-26);
    }

    .pr-xxl-27 {
        padding-right: var(--s-27);
    }

    .pr-xxl-28 {
        padding-right: var(--s-28);
    }

    .pr-xxl-29 {
        padding-right: var(--s-29);
    }

    .pr-xxl-30 {
        padding-right: var(--s-30);
    }

    .pr-xxl-31 {
        padding-right: var(--s-31);
    }

    .pr-xxl-32 {
        padding-right: var(--s-32);
    }

    .pb-xxl-21 {
        padding-bottom: var(--s-21);
    }

    .pb-xxl-22 {
        padding-bottom: var(--s-22);
    }

    .pb-xxl-23 {
        padding-bottom: var(--s-23);
    }

    .pb-xxl-24 {
        padding-bottom: var(--s-24);
    }

    .pb-xxl-25 {
        padding-bottom: var(--s-25);
    }

    .pb-xxl-26 {
        padding-bottom: var(--s-26);
    }

    .pb-xxl-27 {
        padding-bottom: var(--s-27);
    }

    .pb-xxl-28 {
        padding-bottom: var(--s-28);
    }

    .pb-xxl-29 {
        padding-bottom: var(--s-29);
    }

    .pb-xxl-30 {
        padding-bottom: var(--s-30);
    }

    .pb-xxl-31 {
        padding-bottom: var(--s-31);
    }

    .pb-xxl-32 {
        padding-bottom: var(--s-32);
    }

    .pl-xxl-21 {
        padding-left: var(--s-21);
    }

    .pl-xxl-22 {
        padding-left: var(--s-22);
    }

    .pl-xxl-23 {
        padding-left: var(--s-23);
    }

    .pl-xxl-24 {
        padding-left: var(--s-24);
    }

    .pl-xxl-25 {
        padding-left: var(--s-25);
    }

    .pl-xxl-26 {
        padding-left: var(--s-26);
    }

    .pl-xxl-27 {
        padding-left: var(--s-27);
    }

    .pl-xxl-28 {
        padding-left: var(--s-28);
    }

    .pl-xxl-29 {
        padding-left: var(--s-29);
    }

    .pl-xxl-30 {
        padding-left: var(--s-30);
    }

    .pl-xxl-31 {
        padding-left: var(--s-31);
    }

    .pl-xxl-32 {
        padding-left: var(--s-32);
    }

    /* Margin */
    .m-xxl-21 {
        margin: var(--s-21);
    }

    .m-xxl-22 {
        margin: var(--s-22);
    }

    .m-xxl-23 {
        margin: var(--s-23);
    }

    .m-xxl-24 {
        margin: var(--s-24);
    }

    .m-xxl-25 {
        margin: var(--s-25);
    }

    .m-xxl-26 {
        margin: var(--s-26);
    }

    .m-xxl-27 {
        margin: var(--s-27);
    }

    .m-xxl-28 {
        margin: var(--s-28);
    }

    .m-xxl-29 {
        margin: var(--s-29);
    }

    .m-xxl-30 {
        margin: var(--s-30);
    }

    .m-xxl-31 {
        margin: var(--s-31);
    }

    .m-xxl-32 {
        margin: var(--s-32);
    }

    .mx-xxl-21 {
        margin-left: var(--s-21);
        margin-right: var(--s-21);
    }

    .mx-xxl-22 {
        margin-left: var(--s-22);
        margin-right: var(--s-22);
    }

    .mx-xxl-23 {
        margin-left: var(--s-23);
        margin-right: var(--s-23);
    }

    .mx-xxl-24 {
        margin-left: var(--s-24);
        margin-right: var(--s-24);
    }

    .mx-xxl-25 {
        margin-left: var(--s-25);
        margin-right: var(--s-25);
    }

    .mx-xxl-26 {
        margin-left: var(--s-26);
        margin-right: var(--s-26);
    }

    .mx-xxl-27 {
        margin-left: var(--s-27);
        margin-right: var(--s-27);
    }

    .mx-xxl-28 {
        margin-left: var(--s-28);
        margin-right: var(--s-28);
    }

    .mx-xxl-29 {
        margin-left: var(--s-29);
        margin-right: var(--s-29);
    }

    .mx-xxl-30 {
        margin-left: var(--s-30);
        margin-right: var(--s-30);
    }

    .mx-xxl-31 {
        margin-left: var(--s-31);
        margin-right: var(--s-31);
    }

    .mx-xxl-32 {
        margin-left: var(--s-32);
        margin-right: var(--s-32);
    }

    .my-xxl-21 {
        margin-top: var(--s-21);
        margin-bottom: var(--s-21);
    }

    .my-xxl-22 {
        margin-top: var(--s-22);
        margin-bottom: var(--s-22);
    }

    .my-xxl-23 {
        margin-top: var(--s-23);
        margin-bottom: var(--s-23);
    }

    .my-xxl-24 {
        margin-top: var(--s-24);
        margin-bottom: var(--s-24);
    }

    .my-xxl-25 {
        margin-top: var(--s-25);
        margin-bottom: var(--s-25);
    }

    .my-xxl-26 {
        margin-top: var(--s-26);
        margin-bottom: var(--s-26);
    }

    .my-xxl-27 {
        margin-top: var(--s-27);
        margin-bottom: var(--s-27);
    }

    .my-xxl-28 {
        margin-top: var(--s-28);
        margin-bottom: var(--s-28);
    }

    .my-xxl-29 {
        margin-top: var(--s-29);
        margin-bottom: var(--s-29);
    }

    .my-xxl-30 {
        margin-top: var(--s-30);
        margin-bottom: var(--s-30);
    }

    .my-xxl-31 {
        margin-top: var(--s-31);
        margin-bottom: var(--s-31);
    }

    .my-xxl-32 {
        margin-top: var(--s-32);
        margin-bottom: var(--s-32);
    }

    .mt-xxl-21 {
        margin-top: var(--s-21);
    }

    .mt-xxl-22 {
        margin-top: var(--s-22);
    }

    .mt-xxl-23 {
        margin-top: var(--s-23);
    }

    .mt-xxl-24 {
        margin-top: var(--s-24);
    }

    .mt-xxl-25 {
        margin-top: var(--s-25);
    }

    .mt-xxl-26 {
        margin-top: var(--s-26);
    }

    .mt-xxl-27 {
        margin-top: var(--s-27);
    }

    .mt-xxl-28 {
        margin-top: var(--s-28);
    }

    .mt-xxl-29 {
        margin-top: var(--s-29);
    }

    .mt-xxl-30 {
        margin-top: var(--s-30);
    }

    .mt-xxl-31 {
        margin-top: var(--s-31);
    }

    .mt-xxl-32 {
        margin-top: var(--s-32);
    }

    .mr-xxl-21 {
        margin-right: var(--s-21);
    }

    .mr-xxl-22 {
        margin-right: var(--s-22);
    }

    .mr-xxl-23 {
        margin-right: var(--s-23);
    }

    .mr-xxl-24 {
        margin-right: var(--s-24);
    }

    .mr-xxl-25 {
        margin-right: var(--s-25);
    }

    .mr-xxl-26 {
        margin-right: var(--s-26);
    }

    .mr-xxl-27 {
        margin-right: var(--s-27);
    }

    .mr-xxl-28 {
        margin-right: var(--s-28);
    }

    .mr-xxl-29 {
        margin-right: var(--s-29);
    }

    .mr-xxl-30 {
        margin-right: var(--s-30);
    }

    .mr-xxl-31 {
        margin-right: var(--s-31);
    }

    .mr-xxl-32 {
        margin-right: var(--s-32);
    }

    .mb-xxl-21 {
        margin-bottom: var(--s-21);
    }

    .mb-xxl-22 {
        margin-bottom: var(--s-22);
    }

    .mb-xxl-23 {
        margin-bottom: var(--s-23);
    }

    .mb-xxl-24 {
        margin-bottom: var(--s-24);
    }

    .mb-xxl-25 {
        margin-bottom: var(--s-25);
    }

    .mb-xxl-26 {
        margin-bottom: var(--s-26);
    }

    .mb-xxl-27 {
        margin-bottom: var(--s-27);
    }

    .mb-xxl-28 {
        margin-bottom: var(--s-28);
    }

    .mb-xxl-29 {
        margin-bottom: var(--s-29);
    }

    .mb-xxl-30 {
        margin-bottom: var(--s-30);
    }

    .mb-xxl-31 {
        margin-bottom: var(--s-31);
    }

    .mb-xxl-32 {
        margin-bottom: var(--s-32);
    }

    .ml-xxl-21 {
        margin-left: var(--s-21);
    }

    .ml-xxl-22 {
        margin-left: var(--s-22);
    }

    .ml-xxl-23 {
        margin-left: var(--s-23);
    }

    .ml-xxl-24 {
        margin-left: var(--s-24);
    }

    .ml-xxl-25 {
        margin-left: var(--s-25);
    }

    .ml-xxl-26 {
        margin-left: var(--s-26);
    }

    .ml-xxl-27 {
        margin-left: var(--s-27);
    }

    .ml-xxl-28 {
        margin-left: var(--s-28);
    }

    .ml-xxl-29 {
        margin-left: var(--s-29);
    }

    .ml-xxl-30 {
        margin-left: var(--s-30);
    }

    .ml-xxl-31 {
        margin-left: var(--s-31);
    }

    .ml-xxl-32 {
        margin-left: var(--s-32);
    }
}