/* =========================================
   MINI TAILWIND — RESPONSIVE SPACING
   ========================================= */

:root {

    /* -----------------------------------------
       Spacing scale
       ----------------------------------------- */

    --space-0: 0px;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;
    --space-9: 96px;
    --space-10: 128px;

}


/* =========================================
   PADDING
   ========================================= */

.p-space-0  { padding: var(--space-0); }
.p-space-1  { padding: var(--space-1); }
.p-space-2  { padding: var(--space-2); }
.p-space-3  { padding: var(--space-3); }
.p-space-4  { padding: var(--space-4); }
.p-space-5  { padding: var(--space-5); }
.p-space-6  { padding: var(--space-6); }
.p-space-7  { padding: var(--space-7); }
.p-space-8  { padding: var(--space-8); }
.p-space-9  { padding: var(--space-9); }
.p-space-10 { padding: var(--space-10); }


/* -----------------------------------------
   Padding X — left + right
   ----------------------------------------- */

.px-space-0  { padding-left: var(--space-0); padding-right: var(--space-0); }
.px-space-1  { padding-left: var(--space-1); padding-right: var(--space-1); }
.px-space-2  { padding-left: var(--space-2); padding-right: var(--space-2); }
.px-space-3  { padding-left: var(--space-3); padding-right: var(--space-3); }
.px-space-4  { padding-left: var(--space-4); padding-right: var(--space-4); }
.px-space-5  { padding-left: var(--space-5); padding-right: var(--space-5); }
.px-space-6  { padding-left: var(--space-6); padding-right: var(--space-6); }
.px-space-7  { padding-left: var(--space-7); padding-right: var(--space-7); }
.px-space-8  { padding-left: var(--space-8); padding-right: var(--space-8); }
.px-space-9  { padding-left: var(--space-9); padding-right: var(--space-9); }
.px-space-10 { padding-left: var(--space-10); padding-right: var(--space-10); }


/* -----------------------------------------
   Padding Y — top + bottom
   ----------------------------------------- */

.py-space-0  { padding-top: var(--space-0); padding-bottom: var(--space-0); }
.py-space-1  { padding-top: var(--space-1); padding-bottom: var(--space-1); }
.py-space-2  { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.py-space-3  { padding-top: var(--space-3); padding-bottom: var(--space-3); }
.py-space-4  { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.py-space-5  { padding-top: var(--space-5); padding-bottom: var(--space-5); }
.py-space-6  { padding-top: var(--space-6); padding-bottom: var(--space-6); }
.py-space-7  { padding-top: var(--space-7); padding-bottom: var(--space-7); }
.py-space-8  { padding-top: var(--space-8); padding-bottom: var(--space-8); }
.py-space-9  { padding-top: var(--space-9); padding-bottom: var(--space-9); }
.py-space-10 { padding-top: var(--space-10); padding-bottom: var(--space-10); }


/* -----------------------------------------
   Padding — individual sides
   ----------------------------------------- */

.pt-space-0  { padding-top: var(--space-0); }
.pt-space-1  { padding-top: var(--space-1); }
.pt-space-2  { padding-top: var(--space-2); }
.pt-space-3  { padding-top: var(--space-3); }
.pt-space-4  { padding-top: var(--space-4); }
.pt-space-5  { padding-top: var(--space-5); }
.pt-space-6  { padding-top: var(--space-6); }
.pt-space-7  { padding-top: var(--space-7); }
.pt-space-8  { padding-top: var(--space-8); }
.pt-space-9  { padding-top: var(--space-9); }
.pt-space-10 { padding-top: var(--space-10); }

.pb-space-0  { padding-bottom: var(--space-0); }
.pb-space-1  { padding-bottom: var(--space-1); }
.pb-space-2  { padding-bottom: var(--space-2); }
.pb-space-3  { padding-bottom: var(--space-3); }
.pb-space-4  { padding-bottom: var(--space-4); }
.pb-space-5  { padding-bottom: var(--space-5); }
.pb-space-6  { padding-bottom: var(--space-6); }
.pb-space-7  { padding-bottom: var(--space-7); }
.pb-space-8  { padding-bottom: var(--space-8); }
.pb-space-9  { padding-bottom: var(--space-9); }
.pb-space-10 { padding-bottom: var(--space-10); }

.pl-space-0  { padding-left: var(--space-0); }
.pl-space-1  { padding-left: var(--space-1); }
.pl-space-2  { padding-left: var(--space-2); }
.pl-space-3  { padding-left: var(--space-3); }
.pl-space-4  { padding-left: var(--space-4); }
.pl-space-5  { padding-left: var(--space-5); }
.pl-space-6  { padding-left: var(--space-6); }
.pl-space-7  { padding-left: var(--space-7); }
.pl-space-8  { padding-left: var(--space-8); }
.pl-space-9  { padding-left: var(--space-9); }
.pl-space-10 { padding-left: var(--space-10); }

.pr-space-0  { padding-right: var(--space-0); }
.pr-space-1  { padding-right: var(--space-1); }
.pr-space-2  { padding-right: var(--space-2); }
.pr-space-3  { padding-right: var(--space-3); }
.pr-space-4  { padding-right: var(--space-4); }
.pr-space-5  { padding-right: var(--space-5); }
.pr-space-6  { padding-right: var(--space-6); }
.pr-space-7  { padding-right: var(--space-7); }
.pr-space-8  { padding-right: var(--space-8); }
.pr-space-9  { padding-right: var(--space-9); }
.pr-space-10 { padding-right: var(--space-10); }


/* =========================================
   MARGIN
   ========================================= */

/* -----------------------------------------
   Margin — all sides
   ----------------------------------------- */

.m-space-0  { margin: var(--space-0); }
.m-space-1  { margin: var(--space-1); }
.m-space-2  { margin: var(--space-2); }
.m-space-3  { margin: var(--space-3); }
.m-space-4  { margin: var(--space-4); }
.m-space-5  { margin: var(--space-5); }
.m-space-6  { margin: var(--space-6); }
.m-space-7  { margin: var(--space-7); }
.m-space-8  { margin: var(--space-8); }
.m-space-9  { margin: var(--space-9); }
.m-space-10 { margin: var(--space-10); }


/* -----------------------------------------
   Margin X — left + right
   ----------------------------------------- */

.mx-space-0  { margin-left: var(--space-0); margin-right: var(--space-0); }
.mx-space-1  { margin-left: var(--space-1); margin-right: var(--space-1); }
.mx-space-2  { margin-left: var(--space-2); margin-right: var(--space-2); }
.mx-space-3  { margin-left: var(--space-3); margin-right: var(--space-3); }
.mx-space-4  { margin-left: var(--space-4); margin-right: var(--space-4); }
.mx-space-5  { margin-left: var(--space-5); margin-right: var(--space-5); }
.mx-space-6  { margin-left: var(--space-6); margin-right: var(--space-6); }
.mx-space-7  { margin-left: var(--space-7); margin-right: var(--space-7); }
.mx-space-8  { margin-left: var(--space-8); margin-right: var(--space-8); }
.mx-space-9  { margin-left: var(--space-9); margin-right: var(--space-9); }
.mx-space-10 { margin-left: var(--space-10); margin-right: var(--space-10); }


/* -----------------------------------------
   Margin Y — top + bottom
   ----------------------------------------- */

.my-space-0  { margin-top: var(--space-0); margin-bottom: var(--space-0); }
.my-space-1  { margin-top: var(--space-1); margin-bottom: var(--space-1); }
.my-space-2  { margin-top: var(--space-2); margin-bottom: var(--space-2); }
.my-space-3  { margin-top: var(--space-3); margin-bottom: var(--space-3); }
.my-space-4  { margin-top: var(--space-4); margin-bottom: var(--space-4); }
.my-space-5  { margin-top: var(--space-5); margin-bottom: var(--space-5); }
.my-space-6  { margin-top: var(--space-6); margin-bottom: var(--space-6); }
.my-space-7  { margin-top: var(--space-7); margin-bottom: var(--space-7); }
.my-space-8  { margin-top: var(--space-8); margin-bottom: var(--space-8); }
.my-space-9  { margin-top: var(--space-9); margin-bottom: var(--space-9); }
.my-space-10 { margin-top: var(--space-10); margin-bottom: var(--space-10); }


/* -----------------------------------------
   Margin — individual sides
   ----------------------------------------- */

.mt-space-0  { margin-top: var(--space-0); }
.mt-space-1  { margin-top: var(--space-1); }
.mt-space-2  { margin-top: var(--space-2); }
.mt-space-3  { margin-top: var(--space-3); }
.mt-space-4  { margin-top: var(--space-4); }
.mt-space-5  { margin-top: var(--space-5); }
.mt-space-6  { margin-top: var(--space-6); }
.mt-space-7  { margin-top: var(--space-7); }
.mt-space-8  { margin-top: var(--space-8); }
.mt-space-9  { margin-top: var(--space-9); }
.mt-space-10 { margin-top: var(--space-10); }

.mb-space-0  { margin-bottom: var(--space-0); }
.mb-space-1  { margin-bottom: var(--space-1); }
.mb-space-2  { margin-bottom: var(--space-2); }
.mb-space-3  { margin-bottom: var(--space-3); }
.mb-space-4  { margin-bottom: var(--space-4); }
.mb-space-5  { margin-bottom: var(--space-5); }
.mb-space-6  { margin-bottom: var(--space-6); }
.mb-space-7  { margin-bottom: var(--space-7); }
.mb-space-8  { margin-bottom: var(--space-8); }
.mb-space-9  { margin-bottom: var(--space-9); }
.mb-space-10 { margin-bottom: var(--space-10); }

.ml-space-0  { margin-left: var(--space-0); }
.ml-space-1  { margin-left: var(--space-1); }
.ml-space-2  { margin-left: var(--space-2); }
.ml-space-3  { margin-left: var(--space-3); }
.ml-space-4  { margin-left: var(--space-4); }
.ml-space-5  { margin-left: var(--space-5); }
.ml-space-6  { margin-left: var(--space-6); }
.ml-space-7  { margin-left: var(--space-7); }
.ml-space-8  { margin-left: var(--space-8); }
.ml-space-9  { margin-left: var(--space-9); }
.ml-space-10 { margin-left: var(--space-10); }

.mr-space-0  { margin-right: var(--space-0); }
.mr-space-1  { margin-right: var(--space-1); }
.mr-space-2  { margin-right: var(--space-2); }
.mr-space-3  { margin-right: var(--space-3); }
.mr-space-4  { margin-right: var(--space-4); }
.mr-space-5  { margin-right: var(--space-5); }
.mr-space-6  { margin-right: var(--space-6); }
.mr-space-7  { margin-right: var(--space-7); }
.mr-space-8  { margin-right: var(--space-8); }
.mr-space-9  { margin-right: var(--space-9); }
.mr-space-10 { margin-right: var(--space-10); }


/* =========================================
   GAP
   ========================================= */

/* -----------------------------------------
   Gap — rows + columns
   ----------------------------------------- */

.gap-space-0  { gap: var(--space-0); }
.gap-space-1  { gap: var(--space-1); }
.gap-space-2  { gap: var(--space-2); }
.gap-space-3  { gap: var(--space-3); }
.gap-space-4  { gap: var(--space-4); }
.gap-space-5  { gap: var(--space-5); }
.gap-space-6  { gap: var(--space-6); }
.gap-space-7  { gap: var(--space-7); }
.gap-space-8  { gap: var(--space-8); }
.gap-space-9  { gap: var(--space-9); }
.gap-space-10 { gap: var(--space-10); }


/* -----------------------------------------
   Gap X — columns
   ----------------------------------------- */

.gap-x-space-0  { column-gap: var(--space-0); }
.gap-x-space-1  { column-gap: var(--space-1); }
.gap-x-space-2  { column-gap: var(--space-2); }
.gap-x-space-3  { column-gap: var(--space-3); }
.gap-x-space-4  { column-gap: var(--space-4); }
.gap-x-space-5  { column-gap: var(--space-5); }
.gap-x-space-6  { column-gap: var(--space-6); }
.gap-x-space-7  { column-gap: var(--space-7); }
.gap-x-space-8  { column-gap: var(--space-8); }
.gap-x-space-9  { column-gap: var(--space-9); }
.gap-x-space-10 { column-gap: var(--space-10); }


/* -----------------------------------------
   Gap Y — rows
   ----------------------------------------- */

.gap-y-space-0  { row-gap: var(--space-0); }
.gap-y-space-1  { row-gap: var(--space-1); }
.gap-y-space-2  { row-gap: var(--space-2); }
.gap-y-space-3  { row-gap: var(--space-3); }
.gap-y-space-4  { row-gap: var(--space-4); }
.gap-y-space-5  { row-gap: var(--space-5); }
.gap-y-space-6  { row-gap: var(--space-6); }
.gap-y-space-7  { row-gap: var(--space-7); }
.gap-y-space-8  { row-gap: var(--space-8); }
.gap-y-space-9  { row-gap: var(--space-9); }
.gap-y-space-10 { row-gap: var(--space-10); }


/* =========================================
   RESPONSIVE — MD
   767px AND ABOVE
   ========================================= */

@media (min-width: 767px) {

    /* -----------------------------------------
       Padding
       ----------------------------------------- */

    .md-p-space-0  { padding: var(--space-0); }
    .md-p-space-1  { padding: var(--space-1); }
    .md-p-space-2  { padding: var(--space-2); }
    .md-p-space-3  { padding: var(--space-3); }
    .md-p-space-4  { padding: var(--space-4); }
    .md-p-space-5  { padding: var(--space-5); }
    .md-p-space-6  { padding: var(--space-6); }
    .md-p-space-7  { padding: var(--space-7); }
    .md-p-space-8  { padding: var(--space-8); }
    .md-p-space-9  { padding: var(--space-9); }
    .md-p-space-10 { padding: var(--space-10); }

    .md-px-space-0  { padding-left: var(--space-0); padding-right: var(--space-0); }
    .md-px-space-1  { padding-left: var(--space-1); padding-right: var(--space-1); }
    .md-px-space-2  { padding-left: var(--space-2); padding-right: var(--space-2); }
    .md-px-space-3  { padding-left: var(--space-3); padding-right: var(--space-3); }
    .md-px-space-4  { padding-left: var(--space-4); padding-right: var(--space-4); }
    .md-px-space-5  { padding-left: var(--space-5); padding-right: var(--space-5); }
    .md-px-space-6  { padding-left: var(--space-6); padding-right: var(--space-6); }
    .md-px-space-7  { padding-left: var(--space-7); padding-right: var(--space-7); }
    .md-px-space-8  { padding-left: var(--space-8); padding-right: var(--space-8); }
    .md-px-space-9  { padding-left: var(--space-9); padding-right: var(--space-9); }
    .md-px-space-10 { padding-left: var(--space-10); padding-right: var(--space-10); }

    .md-py-space-0  { padding-top: var(--space-0); padding-bottom: var(--space-0); }
    .md-py-space-1  { padding-top: var(--space-1); padding-bottom: var(--space-1); }
    .md-py-space-2  { padding-top: var(--space-2); padding-bottom: var(--space-2); }
    .md-py-space-3  { padding-top: var(--space-3); padding-bottom: var(--space-3); }
    .md-py-space-4  { padding-top: var(--space-4); padding-bottom: var(--space-4); }
    .md-py-space-5  { padding-top: var(--space-5); padding-bottom: var(--space-5); }
    .md-py-space-6  { padding-top: var(--space-6); padding-bottom: var(--space-6); }
    .md-py-space-7  { padding-top: var(--space-7); padding-bottom: var(--space-7); }
    .md-py-space-8  { padding-top: var(--space-8); padding-bottom: var(--space-8); }
    .md-py-space-9  { padding-top: var(--space-9); padding-bottom: var(--space-9); }
    .md-py-space-10 { padding-top: var(--space-10); padding-bottom: var(--space-10); }

    .md-pt-space-0  { padding-top: var(--space-0); }
    .md-pt-space-1  { padding-top: var(--space-1); }
    .md-pt-space-2  { padding-top: var(--space-2); }
    .md-pt-space-3  { padding-top: var(--space-3); }
    .md-pt-space-4  { padding-top: var(--space-4); }
    .md-pt-space-5  { padding-top: var(--space-5); }
    .md-pt-space-6  { padding-top: var(--space-6); }
    .md-pt-space-7  { padding-top: var(--space-7); }
    .md-pt-space-8  { padding-top: var(--space-8); }
    .md-pt-space-9  { padding-top: var(--space-9); }
    .md-pt-space-10 { padding-top: var(--space-10); }

    .md-pb-space-0  { padding-bottom: var(--space-0); }
    .md-pb-space-1  { padding-bottom: var(--space-1); }
    .md-pb-space-2  { padding-bottom: var(--space-2); }
    .md-pb-space-3  { padding-bottom: var(--space-3); }
    .md-pb-space-4  { padding-bottom: var(--space-4); }
    .md-pb-space-5  { padding-bottom: var(--space-5); }
    .md-pb-space-6  { padding-bottom: var(--space-6); }
    .md-pb-space-7  { padding-bottom: var(--space-7); }
    .md-pb-space-8  { padding-bottom: var(--space-8); }
    .md-pb-space-9  { padding-bottom: var(--space-9); }
    .md-pb-space-10 { padding-bottom: var(--space-10); }

    .md-pl-space-0  { padding-left: var(--space-0); }
    .md-pl-space-1  { padding-left: var(--space-1); }
    .md-pl-space-2  { padding-left: var(--space-2); }
    .md-pl-space-3  { padding-left: var(--space-3); }
    .md-pl-space-4  { padding-left: var(--space-4); }
    .md-pl-space-5  { padding-left: var(--space-5); }
    .md-pl-space-6  { padding-left: var(--space-6); }
    .md-pl-space-7  { padding-left: var(--space-7); }
    .md-pl-space-8  { padding-left: var(--space-8); }
    .md-pl-space-9  { padding-left: var(--space-9); }
    .md-pl-space-10 { padding-left: var(--space-10); }

    .md-pr-space-0  { padding-right: var(--space-0); }
    .md-pr-space-1  { padding-right: var(--space-1); }
    .md-pr-space-2  { padding-right: var(--space-2); }
    .md-pr-space-3  { padding-right: var(--space-3); }
    .md-pr-space-4  { padding-right: var(--space-4); }
    .md-pr-space-5  { padding-right: var(--space-5); }
    .md-pr-space-6  { padding-right: var(--space-6); }
    .md-pr-space-7  { padding-right: var(--space-7); }
    .md-pr-space-8  { padding-right: var(--space-8); }
    .md-pr-space-9  { padding-right: var(--space-9); }
    .md-pr-space-10 { padding-right: var(--space-10); }


    /* -----------------------------------------
       Margin
       ----------------------------------------- */

    .md-m-space-0  { margin: var(--space-0); }
    .md-m-space-1  { margin: var(--space-1); }
    .md-m-space-2  { margin: var(--space-2); }
    .md-m-space-3  { margin: var(--space-3); }
    .md-m-space-4  { margin: var(--space-4); }
    .md-m-space-5  { margin: var(--space-5); }
    .md-m-space-6  { margin: var(--space-6); }
    .md-m-space-7  { margin: var(--space-7); }
    .md-m-space-8  { margin: var(--space-8); }
    .md-m-space-9  { margin: var(--space-9); }
    .md-m-space-10 { margin: var(--space-10); }

    .md-mx-space-0  { margin-left: var(--space-0); margin-right: var(--space-0); }
    .md-mx-space-1  { margin-left: var(--space-1); margin-right: var(--space-1); }
    .md-mx-space-2  { margin-left: var(--space-2); margin-right: var(--space-2); }
    .md-mx-space-3  { margin-left: var(--space-3); margin-right: var(--space-3); }
    .md-mx-space-4  { margin-left: var(--space-4); margin-right: var(--space-4); }
    .md-mx-space-5  { margin-left: var(--space-5); margin-right: var(--space-5); }
    .md-mx-space-6  { margin-left: var(--space-6); margin-right: var(--space-6); }
    .md-mx-space-7  { margin-left: var(--space-7); margin-right: var(--space-7); }
    .md-mx-space-8  { margin-left: var(--space-8); margin-right: var(--space-8); }
    .md-mx-space-9  { margin-left: var(--space-9); margin-right: var(--space-9); }
    .md-mx-space-10 { margin-left: var(--space-10); margin-right: var(--space-10); }

    .md-my-space-0  { margin-top: var(--space-0); margin-bottom: var(--space-0); }
    .md-my-space-1  { margin-top: var(--space-1); margin-bottom: var(--space-1); }
    .md-my-space-2  { margin-top: var(--space-2); margin-bottom: var(--space-2); }
    .md-my-space-3  { margin-top: var(--space-3); margin-bottom: var(--space-3); }
    .md-my-space-4  { margin-top: var(--space-4); margin-bottom: var(--space-4); }
    .md-my-space-5  { margin-top: var(--space-5); margin-bottom: var(--space-5); }
    .md-my-space-6  { margin-top: var(--space-6); margin-bottom: var(--space-6); }
    .md-my-space-7  { margin-top: var(--space-7); margin-bottom: var(--space-7); }
    .md-my-space-8  { margin-top: var(--space-8); margin-bottom: var(--space-8); }
    .md-my-space-9  { margin-top: var(--space-9); margin-bottom: var(--space-9); }
    .md-my-space-10 { margin-top: var(--space-10); margin-bottom: var(--space-10); }

    .md-mt-space-0  { margin-top: var(--space-0); }
    .md-mt-space-1  { margin-top: var(--space-1); }
    .md-mt-space-2  { margin-top: var(--space-2); }
    .md-mt-space-3  { margin-top: var(--space-3); }
    .md-mt-space-4  { margin-top: var(--space-4); }
    .md-mt-space-5  { margin-top: var(--space-5); }
    .md-mt-space-6  { margin-top: var(--space-6); }
    .md-mt-space-7  { margin-top: var(--space-7); }
    .md-mt-space-8  { margin-top: var(--space-8); }
    .md-mt-space-9  { margin-top: var(--space-9); }
    .md-mt-space-10 { margin-top: var(--space-10); }

    .md-mb-space-0  { margin-bottom: var(--space-0); }
    .md-mb-space-1  { margin-bottom: var(--space-1); }
    .md-mb-space-2  { margin-bottom: var(--space-2); }
    .md-mb-space-3  { margin-bottom: var(--space-3); }
    .md-mb-space-4  { margin-bottom: var(--space-4); }
    .md-mb-space-5  { margin-bottom: var(--space-5); }
    .md-mb-space-6  { margin-bottom: var(--space-6); }
    .md-mb-space-7  { margin-bottom: var(--space-7); }
    .md-mb-space-8  { margin-bottom: var(--space-8); }
    .md-mb-space-9  { margin-bottom: var(--space-9); }
    .md-mb-space-10 { margin-bottom: var(--space-10); }

    .md-ml-space-0  { margin-left: var(--space-0); }
    .md-ml-space-1  { margin-left: var(--space-1); }
    .md-ml-space-2  { margin-left: var(--space-2); }
    .md-ml-space-3  { margin-left: var(--space-3); }
    .md-ml-space-4  { margin-left: var(--space-4); }
    .md-ml-space-5  { margin-left: var(--space-5); }
    .md-ml-space-6  { margin-left: var(--space-6); }
    .md-ml-space-7  { margin-left: var(--space-7); }
    .md-ml-space-8  { margin-left: var(--space-8); }
    .md-ml-space-9  { margin-left: var(--space-9); }
    .md-ml-space-10 { margin-left: var(--space-10); }

    .md-mr-space-0  { margin-right: var(--space-0); }
    .md-mr-space-1  { margin-right: var(--space-1); }
    .md-mr-space-2  { margin-right: var(--space-2); }
    .md-mr-space-3  { margin-right: var(--space-3); }
    .md-mr-space-4  { margin-right: var(--space-4); }
    .md-mr-space-5  { margin-right: var(--space-5); }
    .md-mr-space-6  { margin-right: var(--space-6); }
    .md-mr-space-7  { margin-right: var(--space-7); }
    .md-mr-space-8  { margin-right: var(--space-8); }
    .md-mr-space-9  { margin-right: var(--space-9); }
    .md-mr-space-10 { margin-right: var(--space-10); }


    /* -----------------------------------------
       Gap
       ----------------------------------------- */

    .md-gap-space-0  { gap: var(--space-0); }
    .md-gap-space-1  { gap: var(--space-1); }
    .md-gap-space-2  { gap: var(--space-2); }
    .md-gap-space-3  { gap: var(--space-3); }
    .md-gap-space-4  { gap: var(--space-4); }
    .md-gap-space-5  { gap: var(--space-5); }
    .md-gap-space-6  { gap: var(--space-6); }
    .md-gap-space-7  { gap: var(--space-7); }
    .md-gap-space-8  { gap: var(--space-8); }
    .md-gap-space-9  { gap: var(--space-9); }
    .md-gap-space-10 { gap: var(--space-10); }

    .md-gap-x-space-0  { column-gap: var(--space-0); }
    .md-gap-x-space-1  { column-gap: var(--space-1); }
    .md-gap-x-space-2  { column-gap: var(--space-2); }
    .md-gap-x-space-3  { column-gap: var(--space-3); }
    .md-gap-x-space-4  { column-gap: var(--space-4); }
    .md-gap-x-space-5  { column-gap: var(--space-5); }
    .md-gap-x-space-6  { column-gap: var(--space-6); }
    .md-gap-x-space-7  { column-gap: var(--space-7); }
    .md-gap-x-space-8  { column-gap: var(--space-8); }
    .md-gap-x-space-9  { column-gap: var(--space-9); }
    .md-gap-x-space-10 { column-gap: var(--space-10); }

    .md-gap-y-space-0  { row-gap: var(--space-0); }
    .md-gap-y-space-1  { row-gap: var(--space-1); }
    .md-gap-y-space-2  { row-gap: var(--space-2); }
    .md-gap-y-space-3  { row-gap: var(--space-3); }
    .md-gap-y-space-4  { row-gap: var(--space-4); }
    .md-gap-y-space-5  { row-gap: var(--space-5); }
    .md-gap-y-space-6  { row-gap: var(--space-6); }
    .md-gap-y-space-7  { row-gap: var(--space-7); }
    .md-gap-y-space-8  { row-gap: var(--space-8); }
    .md-gap-y-space-9  { row-gap: var(--space-9); }
    .md-gap-y-space-10 { row-gap: var(--space-10); }

}


/* =========================================
   RESPONSIVE — LG
   1024px AND ABOVE
   ========================================= */

@media (min-width: 1024px) {

    /* -----------------------------------------
       Padding
       ----------------------------------------- */

    .lg-p-space-0  { padding: var(--space-0); }
    .lg-p-space-1  { padding: var(--space-1); }
    .lg-p-space-2  { padding: var(--space-2); }
    .lg-p-space-3  { padding: var(--space-3); }
    .lg-p-space-4  { padding: var(--space-4); }
    .lg-p-space-5  { padding: var(--space-5); }
    .lg-p-space-6  { padding: var(--space-6); }
    .lg-p-space-7  { padding: var(--space-7); }
    .lg-p-space-8  { padding: var(--space-8); }
    .lg-p-space-9  { padding: var(--space-9); }
    .lg-p-space-10 { padding: var(--space-10); }

    .lg-px-space-0  { padding-left: var(--space-0); padding-right: var(--space-0); }
    .lg-px-space-1  { padding-left: var(--space-1); padding-right: var(--space-1); }
    .lg-px-space-2  { padding-left: var(--space-2); padding-right: var(--space-2); }
    .lg-px-space-3  { padding-left: var(--space-3); padding-right: var(--space-3); }
    .lg-px-space-4  { padding-left: var(--space-4); padding-right: var(--space-4); }
    .lg-px-space-5  { padding-left: var(--space-5); padding-right: var(--space-5); }
    .lg-px-space-6  { padding-left: var(--space-6); padding-right: var(--space-6); }
    .lg-px-space-7  { padding-left: var(--space-7); padding-right: var(--space-7); }
    .lg-px-space-8  { padding-left: var(--space-8); padding-right: var(--space-8); }
    .lg-px-space-9  { padding-left: var(--space-9); padding-right: var(--space-9); }
    .lg-px-space-10 { padding-left: var(--space-10); padding-right: var(--space-10); }

    .lg-py-space-0  { padding-top: var(--space-0); padding-bottom: var(--space-0); }
    .lg-py-space-1  { padding-top: var(--space-1); padding-bottom: var(--space-1); }
    .lg-py-space-2  { padding-top: var(--space-2); padding-bottom: var(--space-2); }
    .lg-py-space-3  { padding-top: var(--space-3); padding-bottom: var(--space-3); }
    .lg-py-space-4  { padding-top: var(--space-4); padding-bottom: var(--space-4); }
    .lg-py-space-5  { padding-top: var(--space-5); padding-bottom: var(--space-5); }
    .lg-py-space-6  { padding-top: var(--space-6); padding-bottom: var(--space-6); }
    .lg-py-space-7  { padding-top: var(--space-7); padding-bottom: var(--space-7); }
    .lg-py-space-8  { padding-top: var(--space-8); padding-bottom: var(--space-8); }
    .lg-py-space-9  { padding-top: var(--space-9); padding-bottom: var(--space-9); }
    .lg-py-space-10 { padding-top: var(--space-10); padding-bottom: var(--space-10); }

    .lg-pt-space-0  { padding-top: var(--space-0); }
    .lg-pt-space-1  { padding-top: var(--space-1); }
    .lg-pt-space-2  { padding-top: var(--space-2); }
    .lg-pt-space-3  { padding-top: var(--space-3); }
    .lg-pt-space-4  { padding-top: var(--space-4); }
    .lg-pt-space-5  { padding-top: var(--space-5); }
    .lg-pt-space-6  { padding-top: var(--space-6); }
    .lg-pt-space-7  { padding-top: var(--space-7); }
    .lg-pt-space-8  { padding-top: var(--space-8); }
    .lg-pt-space-9  { padding-top: var(--space-9); }
    .lg-pt-space-10 { padding-top: var(--space-10); }

    .lg-pb-space-0  { padding-bottom: var(--space-0); }
    .lg-pb-space-1  { padding-bottom: var(--space-1); }
    .lg-pb-space-2  { padding-bottom: var(--space-2); }
    .lg-pb-space-3  { padding-bottom: var(--space-3); }
    .lg-pb-space-4  { padding-bottom: var(--space-4); }
    .lg-pb-space-5  { padding-bottom: var(--space-5); }
    .lg-pb-space-6  { padding-bottom: var(--space-6); }
    .lg-pb-space-7  { padding-bottom: var(--space-7); }
    .lg-pb-space-8  { padding-bottom: var(--space-8); }
    .lg-pb-space-9  { padding-bottom: var(--space-9); }
    .lg-pb-space-10 { padding-bottom: var(--space-10); }

    .lg-pl-space-0  { padding-left: var(--space-0); }
    .lg-pl-space-1  { padding-left: var(--space-1); }
    .lg-pl-space-2  { padding-left: var(--space-2); }
    .lg-pl-space-3  { padding-left: var(--space-3); }
    .lg-pl-space-4  { padding-left: var(--space-4); }
    .lg-pl-space-5  { padding-left: var(--space-5); }
    .lg-pl-space-6  { padding-left: var(--space-6); }
    .lg-pl-space-7  { padding-left: var(--space-7); }
    .lg-pl-space-8  { padding-left: var(--space-8); }
    .lg-pl-space-9  { padding-left: var(--space-9); }
    .lg-pl-space-10 { padding-left: var(--space-10); }

    .lg-pr-space-0  { padding-right: var(--space-0); }
    .lg-pr-space-1  { padding-right: var(--space-1); }
    .lg-pr-space-2  { padding-right: var(--space-2); }
    .lg-pr-space-3  { padding-right: var(--space-3); }
    .lg-pr-space-4  { padding-right: var(--space-4); }
    .lg-pr-space-5  { padding-right: var(--space-5); }
    .lg-pr-space-6  { padding-right: var(--space-6); }
    .lg-pr-space-7  { padding-right: var(--space-7); }
    .lg-pr-space-8  { padding-right: var(--space-8); }
    .lg-pr-space-9  { padding-right: var(--space-9); }
    .lg-pr-space-10 { padding-right: var(--space-10); }


    /* -----------------------------------------
       Margin
       ----------------------------------------- */

    .lg-m-space-0  { margin: var(--space-0); }
    .lg-m-space-1  { margin: var(--space-1); }
    .lg-m-space-2  { margin: var(--space-2); }
    .lg-m-space-3  { margin: var(--space-3); }
    .lg-m-space-4  { margin: var(--space-4); }
    .lg-m-space-5  { margin: var(--space-5); }
    .lg-m-space-6  { margin: var(--space-6); }
    .lg-m-space-7  { margin: var(--space-7); }
    .lg-m-space-8  { margin: var(--space-8); }
    .lg-m-space-9  { margin: var(--space-9); }
    .lg-m-space-10 { margin: var(--space-10); }

    .lg-mx-space-0  { margin-left: var(--space-0); margin-right: var(--space-0); }
    .lg-mx-space-1  { margin-left: var(--space-1); margin-right: var(--space-1); }
    .lg-mx-space-2  { margin-left: var(--space-2); margin-right: var(--space-2); }
    .lg-mx-space-3  { margin-left: var(--space-3); margin-right: var(--space-3); }
    .lg-mx-space-4  { margin-left: var(--space-4); margin-right: var(--space-4); }
    .lg-mx-space-5  { margin-left: var(--space-5); margin-right: var(--space-5); }
    .lg-mx-space-6  { margin-left: var(--space-6); margin-right: var(--space-6); }
    .lg-mx-space-7  { margin-left: var(--space-7); margin-right: var(--space-7); }
    .lg-mx-space-8  { margin-left: var(--space-8); margin-right: var(--space-8); }
    .lg-mx-space-9  { margin-left: var(--space-9); margin-right: var(--space-9); }
    .lg-mx-space-10 { margin-left: var(--space-10); margin-right: var(--space-10); }

    .lg-my-space-0  { margin-top: var(--space-0); margin-bottom: var(--space-0); }
    .lg-my-space-1  { margin-top: var(--space-1); margin-bottom: var(--space-1); }
    .lg-my-space-2  { margin-top: var(--space-2); margin-bottom: var(--space-2); }
    .lg-my-space-3  { margin-top: var(--space-3); margin-bottom: var(--space-3); }
    .lg-my-space-4  { margin-top: var(--space-4); margin-bottom: var(--space-4); }
    .lg-my-space-5  { margin-top: var(--space-5); margin-bottom: var(--space-5); }
    .lg-my-space-6  { margin-top: var(--space-6); margin-bottom: var(--space-6); }
    .lg-my-space-7  { margin-top: var(--space-7); margin-bottom: var(--space-7); }
    .lg-my-space-8  { margin-top: var(--space-8); margin-bottom: var(--space-8); }
    .lg-my-space-9  { margin-top: var(--space-9); margin-bottom: var(--space-9); }
    .lg-my-space-10 { margin-top: var(--space-10); margin-bottom: var(--space-10); }

    .lg-mt-space-0  { margin-top: var(--space-0); }
    .lg-mt-space-1  { margin-top: var(--space-1); }
    .lg-mt-space-2  { margin-top: var(--space-2); }
    .lg-mt-space-3  { margin-top: var(--space-3); }
    .lg-mt-space-4  { margin-top: var(--space-4); }
    .lg-mt-space-5  { margin-top: var(--space-5); }
    .lg-mt-space-6  { margin-top: var(--space-6); }
    .lg-mt-space-7  { margin-top: var(--space-7); }
    .lg-mt-space-8  { margin-top: var(--space-8); }
    .lg-mt-space-9  { margin-top: var(--space-9); }
    .lg-mt-space-10 { margin-top: var(--space-10); }

    .lg-mb-space-0  { margin-bottom: var(--space-0); }
    .lg-mb-space-1  { margin-bottom: var(--space-1); }
    .lg-mb-space-2  { margin-bottom: var(--space-2); }
    .lg-mb-space-3  { margin-bottom: var(--space-3); }
    .lg-mb-space-4  { margin-bottom: var(--space-4); }
    .lg-mb-space-5  { margin-bottom: var(--space-5); }
    .lg-mb-space-6  { margin-bottom: var(--space-6); }
    .lg-mb-space-7  { margin-bottom: var(--space-7); }
    .lg-mb-space-8  { margin-bottom: var(--space-8); }
    .lg-mb-space-9  { margin-bottom: var(--space-9); }
    .lg-mb-space-10 { margin-bottom: var(--space-10); }

    .lg-ml-space-0  { margin-left: var(--space-0); }
    .lg-ml-space-1  { margin-left: var(--space-1); }
    .lg-ml-space-2  { margin-left: var(--space-2); }
    .lg-ml-space-3  { margin-left: var(--space-3); }
    .lg-ml-space-4  { margin-left: var(--space-4); }
    .lg-ml-space-5  { margin-left: var(--space-5); }
    .lg-ml-space-6  { margin-left: var(--space-6); }
    .lg-ml-space-7  { margin-left: var(--space-7); }
    .lg-ml-space-8  { margin-left: var(--space-8); }
    .lg-ml-space-9  { margin-left: var(--space-9); }
    .lg-ml-space-10 { margin-left: var(--space-10); }

    .lg-mr-space-0  { margin-right: var(--space-0); }
    .lg-mr-space-1  { margin-right: var(--space-1); }
    .lg-mr-space-2  { margin-right: var(--space-2); }
    .lg-mr-space-3  { margin-right: var(--space-3); }
    .lg-mr-space-4  { margin-right: var(--space-4); }
    .lg-mr-space-5  { margin-right: var(--space-5); }
    .lg-mr-space-6  { margin-right: var(--space-6); }
    .lg-mr-space-7  { margin-right: var(--space-7); }
    .lg-mr-space-8  { margin-right: var(--space-8); }
    .lg-mr-space-9  { margin-right: var(--space-9); }
    .lg-mr-space-10 { margin-right: var(--space-10); }


    /* -----------------------------------------
       Gap
       ----------------------------------------- */

    .lg-gap-space-0  { gap: var(--space-0); }
    .lg-gap-space-1  { gap: var(--space-1); }
    .lg-gap-space-2  { gap: var(--space-2); }
    .lg-gap-space-3  { gap: var(--space-3); }
    .lg-gap-space-4  { gap: var(--space-4); }
    .lg-gap-space-5  { gap: var(--space-5); }
    .lg-gap-space-6  { gap: var(--space-6); }
    .lg-gap-space-7  { gap: var(--space-7); }
    .lg-gap-space-8  { gap: var(--space-8); }
    .lg-gap-space-9  { gap: var(--space-9); }
    .lg-gap-space-10 { gap: var(--space-10); }

    .lg-gap-x-space-0  { column-gap: var(--space-0); }
    .lg-gap-x-space-1  { column-gap: var(--space-1); }
    .lg-gap-x-space-2  { column-gap: var(--space-2); }
    .lg-gap-x-space-3  { column-gap: var(--space-3); }
    .lg-gap-x-space-4  { column-gap: var(--space-4); }
    .lg-gap-x-space-5  { column-gap: var(--space-5); }
    .lg-gap-x-space-6  { column-gap: var(--space-6); }
    .lg-gap-x-space-7  { column-gap: var(--space-7); }
    .lg-gap-x-space-8  { column-gap: var(--space-8); }
    .lg-gap-x-space-9  { column-gap: var(--space-9); }
    .lg-gap-x-space-10 { column-gap: var(--space-10); }

    .lg-gap-y-space-0  { row-gap: var(--space-0); }
    .lg-gap-y-space-1  { row-gap: var(--space-1); }
    .lg-gap-y-space-2  { row-gap: var(--space-2); }
    .lg-gap-y-space-3  { row-gap: var(--space-3); }
    .lg-gap-y-space-4  { row-gap: var(--space-4); }
    .lg-gap-y-space-5  { row-gap: var(--space-5); }
    .lg-gap-y-space-6  { row-gap: var(--space-6); }
    .lg-gap-y-space-7  { row-gap: var(--space-7); }
    .lg-gap-y-space-8  { row-gap: var(--space-8); }
    .lg-gap-y-space-9  { row-gap: var(--space-9); }
    .lg-gap-y-space-10 { row-gap: var(--space-10); }

}