/* =========================================================
   MSDW Utilities (Namespaced)
   Prefix: u-
   - Rem-based spacing utilities (0–32)
   - Layout, flex, grid, text, sizing, borders, shadows
   ========================================================= */

:root {
    --space-unit: 0.25rem; /* 1 = 0.25rem (4px), 32 = 8rem (128px) */
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 10px rgba(0, 0, 0, 0.10);
    --shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.14);
}

/* =========================
   Padding
========================= */
.u-p-0 {
    padding: 0;
}

.u-p-1 {
    padding: calc(var(--space-unit) * 1);
}

.u-p-2 {
    padding: calc(var(--space-unit) * 2);
}

.u-p-3 {
    padding: calc(var(--space-unit) * 3);
}

.u-p-4 {
    padding: calc(var(--space-unit) * 4);
}

.u-p-5 {
    padding: calc(var(--space-unit) * 5);
}

.u-p-6 {
    padding: calc(var(--space-unit) * 6);
}

.u-p-7 {
    padding: calc(var(--space-unit) * 7);
}

.u-p-8 {
    padding: calc(var(--space-unit) * 8);
}

.u-p-9 {
    padding: calc(var(--space-unit) * 9);
}

.u-p-10 {
    padding: calc(var(--space-unit) * 10);
}

.u-p-11 {
    padding: calc(var(--space-unit) * 11);
}

.u-p-12 {
    padding: calc(var(--space-unit) * 12);
}

.u-p-13 {
    padding: calc(var(--space-unit) * 13);
}

.u-p-14 {
    padding: calc(var(--space-unit) * 14);
}

.u-p-15 {
    padding: calc(var(--space-unit) * 15);
}

.u-p-16 {
    padding: calc(var(--space-unit) * 16);
}

.u-p-17 {
    padding: calc(var(--space-unit) * 17);
}

.u-p-18 {
    padding: calc(var(--space-unit) * 18);
}

.u-p-19 {
    padding: calc(var(--space-unit) * 19);
}

.u-p-20 {
    padding: calc(var(--space-unit) * 20);
}

.u-p-21 {
    padding: calc(var(--space-unit) * 21);
}

.u-p-22 {
    padding: calc(var(--space-unit) * 22);
}

.u-p-23 {
    padding: calc(var(--space-unit) * 23);
}

.u-p-24 {
    padding: calc(var(--space-unit) * 24);
}

.u-p-25 {
    padding: calc(var(--space-unit) * 25);
}

.u-p-26 {
    padding: calc(var(--space-unit) * 26);
}

.u-p-27 {
    padding: calc(var(--space-unit) * 27);
}

.u-p-28 {
    padding: calc(var(--space-unit) * 28);
}

.u-p-29 {
    padding: calc(var(--space-unit) * 29);
}

.u-p-30 {
    padding: calc(var(--space-unit) * 30);
}

.u-p-31 {
    padding: calc(var(--space-unit) * 31);
}

.u-p-32 {
    padding: calc(var(--space-unit) * 32);
}

.u-px-0 {
    padding-left: 0;
    padding-right: 0;
}

.u-px-1 {
    padding-left: calc(var(--space-unit) * 1);
    padding-right: calc(var(--space-unit) * 1);
}

.u-px-2 {
    padding-left: calc(var(--space-unit) * 2);
    padding-right: calc(var(--space-unit) * 2);
}

.u-px-3 {
    padding-left: calc(var(--space-unit) * 3);
    padding-right: calc(var(--space-unit) * 3);
}

.u-px-4 {
    padding-left: calc(var(--space-unit) * 4);
    padding-right: calc(var(--space-unit) * 4);
}

.u-px-5 {
    padding-left: calc(var(--space-unit) * 5);
    padding-right: calc(var(--space-unit) * 5);
}

.u-px-6 {
    padding-left: calc(var(--space-unit) * 6);
    padding-right: calc(var(--space-unit) * 6);
}

.u-px-7 {
    padding-left: calc(var(--space-unit) * 7);
    padding-right: calc(var(--space-unit) * 7);
}

.u-px-8 {
    padding-left: calc(var(--space-unit) * 8);
    padding-right: calc(var(--space-unit) * 8);
}

.u-px-9 {
    padding-left: calc(var(--space-unit) * 9);
    padding-right: calc(var(--space-unit) * 9);
}

.u-px-10 {
    padding-left: calc(var(--space-unit) * 10);
    padding-right: calc(var(--space-unit) * 10);
}

.u-px-11 {
    padding-left: calc(var(--space-unit) * 11);
    padding-right: calc(var(--space-unit) * 11);
}

.u-px-12 {
    padding-left: calc(var(--space-unit) * 12);
    padding-right: calc(var(--space-unit) * 12);
}

.u-px-13 {
    padding-left: calc(var(--space-unit) * 13);
    padding-right: calc(var(--space-unit) * 13);
}

.u-px-14 {
    padding-left: calc(var(--space-unit) * 14);
    padding-right: calc(var(--space-unit) * 14);
}

.u-px-15 {
    padding-left: calc(var(--space-unit) * 15);
    padding-right: calc(var(--space-unit) * 15);
}

.u-px-16 {
    padding-left: calc(var(--space-unit) * 16);
    padding-right: calc(var(--space-unit) * 16);
}

.u-px-17 {
    padding-left: calc(var(--space-unit) * 17);
    padding-right: calc(var(--space-unit) * 17);
}

.u-px-18 {
    padding-left: calc(var(--space-unit) * 18);
    padding-right: calc(var(--space-unit) * 18);
}

.u-px-19 {
    padding-left: calc(var(--space-unit) * 19);
    padding-right: calc(var(--space-unit) * 19);
}

.u-px-20 {
    padding-left: calc(var(--space-unit) * 20);
    padding-right: calc(var(--space-unit) * 20);
}

.u-px-21 {
    padding-left: calc(var(--space-unit) * 21);
    padding-right: calc(var(--space-unit) * 21);
}

.u-px-22 {
    padding-left: calc(var(--space-unit) * 22);
    padding-right: calc(var(--space-unit) * 22);
}

.u-px-23 {
    padding-left: calc(var(--space-unit) * 23);
    padding-right: calc(var(--space-unit) * 23);
}

.u-px-24 {
    padding-left: calc(var(--space-unit) * 24);
    padding-right: calc(var(--space-unit) * 24);
}

.u-px-25 {
    padding-left: calc(var(--space-unit) * 25);
    padding-right: calc(var(--space-unit) * 25);
}

.u-px-26 {
    padding-left: calc(var(--space-unit) * 26);
    padding-right: calc(var(--space-unit) * 26);
}

.u-px-27 {
    padding-left: calc(var(--space-unit) * 27);
    padding-right: calc(var(--space-unit) * 27);
}

.u-px-28 {
    padding-left: calc(var(--space-unit) * 28);
    padding-right: calc(var(--space-unit) * 28);
}

.u-px-29 {
    padding-left: calc(var(--space-unit) * 29);
    padding-right: calc(var(--space-unit) * 29);
}

.u-px-30 {
    padding-left: calc(var(--space-unit) * 30);
    padding-right: calc(var(--space-unit) * 30);
}

.u-px-31 {
    padding-left: calc(var(--space-unit) * 31);
    padding-right: calc(var(--space-unit) * 31);
}

.u-px-32 {
    padding-left: calc(var(--space-unit) * 32);
    padding-right: calc(var(--space-unit) * 32);
}

.u-py-0 {
    padding-top: 0;
    padding-bottom: 0;
}

.u-py-1 {
    padding-top: calc(var(--space-unit) * 1);
    padding-bottom: calc(var(--space-unit) * 1);
}

.u-py-2 {
    padding-top: calc(var(--space-unit) * 2);
    padding-bottom: calc(var(--space-unit) * 2);
}

.u-py-3 {
    padding-top: calc(var(--space-unit) * 3);
    padding-bottom: calc(var(--space-unit) * 3);
}

.u-py-4 {
    padding-top: calc(var(--space-unit) * 4);
    padding-bottom: calc(var(--space-unit) * 4);
}

.u-py-5 {
    padding-top: calc(var(--space-unit) * 5);
    padding-bottom: calc(var(--space-unit) * 5);
}

.u-py-6 {
    padding-top: calc(var(--space-unit) * 6);
    padding-bottom: calc(var(--space-unit) * 6);
}

.u-py-7 {
    padding-top: calc(var(--space-unit) * 7);
    padding-bottom: calc(var(--space-unit) * 7);
}

.u-py-8 {
    padding-top: calc(var(--space-unit) * 8);
    padding-bottom: calc(var(--space-unit) * 8);
}

.u-py-9 {
    padding-top: calc(var(--space-unit) * 9);
    padding-bottom: calc(var(--space-unit) * 9);
}

.u-py-10 {
    padding-top: calc(var(--space-unit) * 10);
    padding-bottom: calc(var(--space-unit) * 10);
}

.u-py-11 {
    padding-top: calc(var(--space-unit) * 11);
    padding-bottom: calc(var(--space-unit) * 11);
}

.u-py-12 {
    padding-top: calc(var(--space-unit) * 12);
    padding-bottom: calc(var(--space-unit) * 12);
}

.u-py-13 {
    padding-top: calc(var(--space-unit) * 13);
    padding-bottom: calc(var(--space-unit) * 13);
}

.u-py-14 {
    padding-top: calc(var(--space-unit) * 14);
    padding-bottom: calc(var(--space-unit) * 14);
}

.u-py-15 {
    padding-top: calc(var(--space-unit) * 15);
    padding-bottom: calc(var(--space-unit) * 15);
}

.u-py-16 {
    padding-top: calc(var(--space-unit) * 16);
    padding-bottom: calc(var(--space-unit) * 16);
}

.u-py-17 {
    padding-top: calc(var(--space-unit) * 17);
    padding-bottom: calc(var(--space-unit) * 17);
}

.u-py-18 {
    padding-top: calc(var(--space-unit) * 18);
    padding-bottom: calc(var(--space-unit) * 18);
}

.u-py-19 {
    padding-top: calc(var(--space-unit) * 19);
    padding-bottom: calc(var(--space-unit) * 19);
}

.u-py-20 {
    padding-top: calc(var(--space-unit) * 20);
    padding-bottom: calc(var(--space-unit) * 20);
}

.u-py-21 {
    padding-top: calc(var(--space-unit) * 21);
    padding-bottom: calc(var(--space-unit) * 21);
}

.u-py-22 {
    padding-top: calc(var(--space-unit) * 22);
    padding-bottom: calc(var(--space-unit) * 22);
}

.u-py-23 {
    padding-top: calc(var(--space-unit) * 23);
    padding-bottom: calc(var(--space-unit) * 23);
}

.u-py-24 {
    padding-top: calc(var(--space-unit) * 24);
    padding-bottom: calc(var(--space-unit) * 24);
}

.u-py-25 {
    padding-top: calc(var(--space-unit) * 25);
    padding-bottom: calc(var(--space-unit) * 25);
}

.u-py-26 {
    padding-top: calc(var(--space-unit) * 26);
    padding-bottom: calc(var(--space-unit) * 26);
}

.u-py-27 {
    padding-top: calc(var(--space-unit) * 27);
    padding-bottom: calc(var(--space-unit) * 27);
}

.u-py-28 {
    padding-top: calc(var(--space-unit) * 28);
    padding-bottom: calc(var(--space-unit) * 28);
}

.u-py-29 {
    padding-top: calc(var(--space-unit) * 29);
    padding-bottom: calc(var(--space-unit) * 29);
}

.u-py-30 {
    padding-top: calc(var(--space-unit) * 30);
    padding-bottom: calc(var(--space-unit) * 30);
}

.u-py-31 {
    padding-top: calc(var(--space-unit) * 31);
    padding-bottom: calc(var(--space-unit) * 31);
}

.u-py-32 {
    padding-top: calc(var(--space-unit) * 32);
    padding-bottom: calc(var(--space-unit) * 32);
}

/* Individual sides */
.u-pt-0 {
    padding-top: 0;
}

.u-pt-1 {
    padding-top: calc(var(--space-unit) * 1);
}

.u-pt-2 {
    padding-top: calc(var(--space-unit) * 2);
}

.u-pt-3 {
    padding-top: calc(var(--space-unit) * 3);
}

.u-pt-4 {
    padding-top: calc(var(--space-unit) * 4);
}

.u-pt-5 {
    padding-top: calc(var(--space-unit) * 5);
}

.u-pt-6 {
    padding-top: calc(var(--space-unit) * 6);
}

.u-pt-7 {
    padding-top: calc(var(--space-unit) * 7);
}

.u-pt-8 {
    padding-top: calc(var(--space-unit) * 8);
}

.u-pt-9 {
    padding-top: calc(var(--space-unit) * 9);
}

.u-pt-10 {
    padding-top: calc(var(--space-unit) * 10);
}

.u-pt-11 {
    padding-top: calc(var(--space-unit) * 11);
}

.u-pt-12 {
    padding-top: calc(var(--space-unit) * 12);
}

.u-pt-13 {
    padding-top: calc(var(--space-unit) * 13);
}

.u-pt-14 {
    padding-top: calc(var(--space-unit) * 14);
}

.u-pt-15 {
    padding-top: calc(var(--space-unit) * 15);
}

.u-pt-16 {
    padding-top: calc(var(--space-unit) * 16);
}

.u-pt-17 {
    padding-top: calc(var(--space-unit) * 17);
}

.u-pt-18 {
    padding-top: calc(var(--space-unit) * 18);
}

.u-pt-19 {
    padding-top: calc(var(--space-unit) * 19);
}

.u-pt-20 {
    padding-top: calc(var(--space-unit) * 20);
}

.u-pt-21 {
    padding-top: calc(var(--space-unit) * 21);
}

.u-pt-22 {
    padding-top: calc(var(--space-unit) * 22);
}

.u-pt-23 {
    padding-top: calc(var(--space-unit) * 23);
}

.u-pt-24 {
    padding-top: calc(var(--space-unit) * 24);
}

.u-pt-25 {
    padding-top: calc(var(--space-unit) * 25);
}

.u-pt-26 {
    padding-top: calc(var(--space-unit) * 26);
}

.u-pt-27 {
    padding-top: calc(var(--space-unit) * 27);
}

.u-pt-28 {
    padding-top: calc(var(--space-unit) * 28);
}

.u-pt-29 {
    padding-top: calc(var(--space-unit) * 29);
}

.u-pt-30 {
    padding-top: calc(var(--space-unit) * 30);
}

.u-pt-31 {
    padding-top: calc(var(--space-unit) * 31);
}

.u-pt-32 {
    padding-top: calc(var(--space-unit) * 32);
}

.u-pr-0 {
    padding-right: 0;
}

.u-pr-1 {
    padding-right: calc(var(--space-unit) * 1);
}

.u-pr-2 {
    padding-right: calc(var(--space-unit) * 2);
}

.u-pr-3 {
    padding-right: calc(var(--space-unit) * 3);
}

.u-pr-4 {
    padding-right: calc(var(--space-unit) * 4);
}

.u-pr-5 {
    padding-right: calc(var(--space-unit) * 5);
}

.u-pr-6 {
    padding-right: calc(var(--space-unit) * 6);
}

.u-pr-7 {
    padding-right: calc(var(--space-unit) * 7);
}

.u-pr-8 {
    padding-right: calc(var(--space-unit) * 8);
}

.u-pr-9 {
    padding-right: calc(var(--space-unit) * 9);
}

.u-pr-10 {
    padding-right: calc(var(--space-unit) * 10);
}

.u-pr-11 {
    padding-right: calc(var(--space-unit) * 11);
}

.u-pr-12 {
    padding-right: calc(var(--space-unit) * 12);
}

.u-pr-13 {
    padding-right: calc(var(--space-unit) * 13);
}

.u-pr-14 {
    padding-right: calc(var(--space-unit) * 14);
}

.u-pr-15 {
    padding-right: calc(var(--space-unit) * 15);
}

.u-pr-16 {
    padding-right: calc(var(--space-unit) * 16);
}

.u-pr-17 {
    padding-right: calc(var(--space-unit) * 17);
}

.u-pr-18 {
    padding-right: calc(var(--space-unit) * 18);
}

.u-pr-19 {
    padding-right: calc(var(--space-unit) * 19);
}

.u-pr-20 {
    padding-right: calc(var(--space-unit) * 20);
}

.u-pr-21 {
    padding-right: calc(var(--space-unit) * 21);
}

.u-pr-22 {
    padding-right: calc(var(--space-unit) * 22);
}

.u-pr-23 {
    padding-right: calc(var(--space-unit) * 23);
}

.u-pr-24 {
    padding-right: calc(var(--space-unit) * 24);
}

.u-pr-25 {
    padding-right: calc(var(--space-unit) * 25);
}

.u-pr-26 {
    padding-right: calc(var(--space-unit) * 26);
}

.u-pr-27 {
    padding-right: calc(var(--space-unit) * 27);
}

.u-pr-28 {
    padding-right: calc(var(--space-unit) * 28);
}

.u-pr-29 {
    padding-right: calc(var(--space-unit) * 29);
}

.u-pr-30 {
    padding-right: calc(var(--space-unit) * 30);
}

.u-pr-31 {
    padding-right: calc(var(--space-unit) * 31);
}

.u-pr-32 {
    padding-right: calc(var(--space-unit) * 32);
}

.u-pb-0 {
    padding-bottom: 0;
}

.u-pb-1 {
    padding-bottom: calc(var(--space-unit) * 1);
}

.u-pb-2 {
    padding-bottom: calc(var(--space-unit) * 2);
}

.u-pb-3 {
    padding-bottom: calc(var(--space-unit) * 3);
}

.u-pb-4 {
    padding-bottom: calc(var(--space-unit) * 4);
}

.u-pb-5 {
    padding-bottom: calc(var(--space-unit) * 5);
}

.u-pb-6 {
    padding-bottom: calc(var(--space-unit) * 6);
}

.u-pb-7 {
    padding-bottom: calc(var(--space-unit) * 7);
}

.u-pb-8 {
    padding-bottom: calc(var(--space-unit) * 8);
}

.u-pb-9 {
    padding-bottom: calc(var(--space-unit) * 9);
}

.u-pb-10 {
    padding-bottom: calc(var(--space-unit) * 10);
}

.u-pb-11 {
    padding-bottom: calc(var(--space-unit) * 11);
}

.u-pb-12 {
    padding-bottom: calc(var(--space-unit) * 12);
}

.u-pb-13 {
    padding-bottom: calc(var(--space-unit) * 13);
}

.u-pb-14 {
    padding-bottom: calc(var(--space-unit) * 14);
}

.u-pb-15 {
    padding-bottom: calc(var(--space-unit) * 15);
}

.u-pb-16 {
    padding-bottom: calc(var(--space-unit) * 16);
}

.u-pb-17 {
    padding-bottom: calc(var(--space-unit) * 17);
}

.u-pb-18 {
    padding-bottom: calc(var(--space-unit) * 18);
}

.u-pb-19 {
    padding-bottom: calc(var(--space-unit) * 19);
}

.u-pb-20 {
    padding-bottom: calc(var(--space-unit) * 20);
}

.u-pb-21 {
    padding-bottom: calc(var(--space-unit) * 21);
}

.u-pb-22 {
    padding-bottom: calc(var(--space-unit) * 22);
}

.u-pb-23 {
    padding-bottom: calc(var(--space-unit) * 23);
}

.u-pb-24 {
    padding-bottom: calc(var(--space-unit) * 24);
}

.u-pb-25 {
    padding-bottom: calc(var(--space-unit) * 25);
}

.u-pb-26 {
    padding-bottom: calc(var(--space-unit) * 26);
}

.u-pb-27 {
    padding-bottom: calc(var(--space-unit) * 27);
}

.u-pb-28 {
    padding-bottom: calc(var(--space-unit) * 28);
}

.u-pb-29 {
    padding-bottom: calc(var(--space-unit) * 29);
}

.u-pb-30 {
    padding-bottom: calc(var(--space-unit) * 30);
}

.u-pb-31 {
    padding-bottom: calc(var(--space-unit) * 31);
}

.u-pb-32 {
    padding-bottom: calc(var(--space-unit) * 32);
}

.u-pl-0 {
    padding-left: 0;
}

.u-pl-1 {
    padding-left: calc(var(--space-unit) * 1);
}

.u-pl-2 {
    padding-left: calc(var(--space-unit) * 2);
}

.u-pl-3 {
    padding-left: calc(var(--space-unit) * 3);
}

.u-pl-4 {
    padding-left: calc(var(--space-unit) * 4);
}

.u-pl-5 {
    padding-left: calc(var(--space-unit) * 5);
}

.u-pl-6 {
    padding-left: calc(var(--space-unit) * 6);
}

.u-pl-7 {
    padding-left: calc(var(--space-unit) * 7);
}

.u-pl-8 {
    padding-left: calc(var(--space-unit) * 8);
}

.u-pl-9 {
    padding-left: calc(var(--space-unit) * 9);
}

.u-pl-10 {
    padding-left: calc(var(--space-unit) * 10);
}

.u-pl-11 {
    padding-left: calc(var(--space-unit) * 11);
}

.u-pl-12 {
    padding-left: calc(var(--space-unit) * 12);
}

.u-pl-13 {
    padding-left: calc(var(--space-unit) * 13);
}

.u-pl-14 {
    padding-left: calc(var(--space-unit) * 14);
}

.u-pl-15 {
    padding-left: calc(var(--space-unit) * 15);
}

.u-pl-16 {
    padding-left: calc(var(--space-unit) * 16);
}

.u-pl-17 {
    padding-left: calc(var(--space-unit) * 17);
}

.u-pl-18 {
    padding-left: calc(var(--space-unit) * 18);
}

.u-pl-19 {
    padding-left: calc(var(--space-unit) * 19);
}

.u-pl-20 {
    padding-left: calc(var(--space-unit) * 20);
}

.u-pl-21 {
    padding-left: calc(var(--space-unit) * 21);
}

.u-pl-22 {
    padding-left: calc(var(--space-unit) * 22);
}

.u-pl-23 {
    padding-left: calc(var(--space-unit) * 23);
}

.u-pl-24 {
    padding-left: calc(var(--space-unit) * 24);
}

.u-pl-25 {
    padding-left: calc(var(--space-unit) * 25);
}

.u-pl-26 {
    padding-left: calc(var(--space-unit) * 26);
}

.u-pl-27 {
    padding-left: calc(var(--space-unit) * 27);
}

.u-pl-28 {
    padding-left: calc(var(--space-unit) * 28);
}

.u-pl-29 {
    padding-left: calc(var(--space-unit) * 29);
}

.u-pl-30 {
    padding-left: calc(var(--space-unit) * 30);
}

.u-pl-31 {
    padding-left: calc(var(--space-unit) * 31);
}

.u-pl-32 {
    padding-left: calc(var(--space-unit) * 32);
}

/* =========================
   Margin
========================= */
.u-m-0 {
    margin: 0;
}

.u-m-1 {
    margin: calc(var(--space-unit) * 1);
}

.u-m-2 {
    margin: calc(var(--space-unit) * 2);
}

.u-m-3 {
    margin: calc(var(--space-unit) * 3);
}

.u-m-4 {
    margin: calc(var(--space-unit) * 4);
}

.u-m-5 {
    margin: calc(var(--space-unit) * 5);
}

.u-m-6 {
    margin: calc(var(--space-unit) * 6);
}

.u-m-7 {
    margin: calc(var(--space-unit) * 7);
}

.u-m-8 {
    margin: calc(var(--space-unit) * 8);
}

.u-m-9 {
    margin: calc(var(--space-unit) * 9);
}

.u-m-10 {
    margin: calc(var(--space-unit) * 10);
}

.u-m-11 {
    margin: calc(var(--space-unit) * 11);
}

.u-m-12 {
    margin: calc(var(--space-unit) * 12);
}

.u-m-13 {
    margin: calc(var(--space-unit) * 13);
}

.u-m-14 {
    margin: calc(var(--space-unit) * 14);
}

.u-m-15 {
    margin: calc(var(--space-unit) * 15);
}

.u-m-16 {
    margin: calc(var(--space-unit) * 16);
}

.u-m-17 {
    margin: calc(var(--space-unit) * 17);
}

.u-m-18 {
    margin: calc(var(--space-unit) * 18);
}

.u-m-19 {
    margin: calc(var(--space-unit) * 19);
}

.u-m-20 {
    margin: calc(var(--space-unit) * 20);
}

.u-m-21 {
    margin: calc(var(--space-unit) * 21);
}

.u-m-22 {
    margin: calc(var(--space-unit) * 22);
}

.u-m-23 {
    margin: calc(var(--space-unit) * 23);
}

.u-m-24 {
    margin: calc(var(--space-unit) * 24);
}

.u-m-25 {
    margin: calc(var(--space-unit) * 25);
}

.u-m-26 {
    margin: calc(var(--space-unit) * 26);
}

.u-m-27 {
    margin: calc(var(--space-unit) * 27);
}

.u-m-28 {
    margin: calc(var(--space-unit) * 28);
}

.u-m-29 {
    margin: calc(var(--space-unit) * 29);
}

.u-m-30 {
    margin: calc(var(--space-unit) * 30);
}

.u-m-31 {
    margin: calc(var(--space-unit) * 31);
}

.u-m-32 {
    margin: calc(var(--space-unit) * 32);
}

.u-mx-0 {
    margin-left: 0;
    margin-right: 0;
}

.u-mx-1 {
    margin-left: calc(var(--space-unit) * 1);
    margin-right: calc(var(--space-unit) * 1);
}

.u-mx-2 {
    margin-left: calc(var(--space-unit) * 2);
    margin-right: calc(var(--space-unit) * 2);
}

.u-mx-3 {
    margin-left: calc(var(--space-unit) * 3);
    margin-right: calc(var(--space-unit) * 3);
}

.u-mx-4 {
    margin-left: calc(var(--space-unit) * 4);
    margin-right: calc(var(--space-unit) * 4);
}

.u-mx-5 {
    margin-left: calc(var(--space-unit) * 5);
    margin-right: calc(var(--space-unit) * 5);
}

.u-mx-6 {
    margin-left: calc(var(--space-unit) * 6);
    margin-right: calc(var(--space-unit) * 6);
}

.u-mx-7 {
    margin-left: calc(var(--space-unit) * 7);
    margin-right: calc(var(--space-unit) * 7);
}

.u-mx-8 {
    margin-left: calc(var(--space-unit) * 8);
    margin-right: calc(var(--space-unit) * 8);
}

.u-mx-9 {
    margin-left: calc(var(--space-unit) * 9);
    margin-right: calc(var(--space-unit) * 9);
}

.u-mx-10 {
    margin-left: calc(var(--space-unit) * 10);
    margin-right: calc(var(--space-unit) * 10);
}

.u-mx-11 {
    margin-left: calc(var(--space-unit) * 11);
    margin-right: calc(var(--space-unit) * 11);
}

.u-mx-12 {
    margin-left: calc(var(--space-unit) * 12);
    margin-right: calc(var(--space-unit) * 12);
}

.u-mx-13 {
    margin-left: calc(var(--space-unit) * 13);
    margin-right: calc(var(--space-unit) * 13);
}

.u-mx-14 {
    margin-left: calc(var(--space-unit) * 14);
    margin-right: calc(var(--space-unit) * 14);
}

.u-mx-15 {
    margin-left: calc(var(--space-unit) * 15);
    margin-right: calc(var(--space-unit) * 15);
}

.u-mx-16 {
    margin-left: calc(var(--space-unit) * 16);
    margin-right: calc(var(--space-unit) * 16);
}

.u-mx-17 {
    margin-left: calc(var(--space-unit) * 17);
    margin-right: calc(var(--space-unit) * 17);
}

.u-mx-18 {
    margin-left: calc(var(--space-unit) * 18);
    margin-right: calc(var(--space-unit) * 18);
}

.u-mx-19 {
    margin-left: calc(var(--space-unit) * 19);
    margin-right: calc(var(--space-unit) * 19);
}

.u-mx-20 {
    margin-left: calc(var(--space-unit) * 20);
    margin-right: calc(var(--space-unit) * 20);
}

.u-mx-21 {
    margin-left: calc(var(--space-unit) * 21);
    margin-right: calc(var(--space-unit) * 21);
}

.u-mx-22 {
    margin-left: calc(var(--space-unit) * 22);
    margin-right: calc(var(--space-unit) * 22);
}

.u-mx-23 {
    margin-left: calc(var(--space-unit) * 23);
    margin-right: calc(var(--space-unit) * 23);
}

.u-mx-24 {
    margin-left: calc(var(--space-unit) * 24);
    margin-right: calc(var(--space-unit) * 24);
}

.u-mx-25 {
    margin-left: calc(var(--space-unit) * 25);
    margin-right: calc(var(--space-unit) * 25);
}

.u-mx-26 {
    margin-left: calc(var(--space-unit) * 26);
    margin-right: calc(var(--space-unit) * 26);
}

.u-mx-27 {
    margin-left: calc(var(--space-unit) * 27);
    margin-right: calc(var(--space-unit) * 27);
}

.u-mx-28 {
    margin-left: calc(var(--space-unit) * 28);
    margin-right: calc(var(--space-unit) * 28);
}

.u-mx-29 {
    margin-left: calc(var(--space-unit) * 29);
    margin-right: calc(var(--space-unit) * 29);
}

.u-mx-30 {
    margin-left: calc(var(--space-unit) * 30);
    margin-right: calc(var(--space-unit) * 30);
}

.u-mx-31 {
    margin-left: calc(var(--space-unit) * 31);
    margin-right: calc(var(--space-unit) * 31);
}

.u-mx-32 {
    margin-left: calc(var(--space-unit) * 32);
    margin-right: calc(var(--space-unit) * 32);
}

.u-my-0 {
    margin-top: 0;
    margin-bottom: 0;
}

.u-my-1 {
    margin-top: calc(var(--space-unit) * 1);
    margin-bottom: calc(var(--space-unit) * 1);
}

.u-my-2 {
    margin-top: calc(var(--space-unit) * 2);
    margin-bottom: calc(var(--space-unit) * 2);
}

.u-my-3 {
    margin-top: calc(var(--space-unit) * 3);
    margin-bottom: calc(var(--space-unit) * 3);
}

.u-my-4 {
    margin-top: calc(var(--space-unit) * 4);
    margin-bottom: calc(var(--space-unit) * 4);
}

.u-my-5 {
    margin-top: calc(var(--space-unit) * 5);
    margin-bottom: calc(var(--space-unit) * 5);
}

.u-my-6 {
    margin-top: calc(var(--space-unit) * 6);
    margin-bottom: calc(var(--space-unit) * 6);
}

.u-my-7 {
    margin-top: calc(var(--space-unit) * 7);
    margin-bottom: calc(var(--space-unit) * 7);
}

.u-my-8 {
    margin-top: calc(var(--space-unit) * 8);
    margin-bottom: calc(var(--space-unit) * 8);
}

.u-my-9 {
    margin-top: calc(var(--space-unit) * 9);
    margin-bottom: calc(var(--space-unit) * 9);
}

.u-my-10 {
    margin-top: calc(var(--space-unit) * 10);
    margin-bottom: calc(var(--space-unit) * 10);
}

.u-my-11 {
    margin-top: calc(var(--space-unit) * 11);
    margin-bottom: calc(var(--space-unit) * 11);
}

.u-my-12 {
    margin-top: calc(var(--space-unit) * 12);
    margin-bottom: calc(var(--space-unit) * 12);
}

.u-my-13 {
    margin-top: calc(var(--space-unit) * 13);
    margin-bottom: calc(var(--space-unit) * 13);
}

.u-my-14 {
    margin-top: calc(var(--space-unit) * 14);
    margin-bottom: calc(var(--space-unit) * 14);
}

.u-my-15 {
    margin-top: calc(var(--space-unit) * 15);
    margin-bottom: calc(var(--space-unit) * 15);
}

.u-my-16 {
    margin-top: calc(var(--space-unit) * 16);
    margin-bottom: calc(var(--space-unit) * 16);
}

.u-my-17 {
    margin-top: calc(var(--space-unit) * 17);
    margin-bottom: calc(var(--space-unit) * 17);
}

.u-my-18 {
    margin-top: calc(var(--space-unit) * 18);
    margin-bottom: calc(var(--space-unit) * 18);
}

.u-my-19 {
    margin-top: calc(var(--space-unit) * 19);
    margin-bottom: calc(var(--space-unit) * 19);
}

.u-my-20 {
    margin-top: calc(var(--space-unit) * 20);
    margin-bottom: calc(var(--space-unit) * 20);
}

.u-my-21 {
    margin-top: calc(var(--space-unit) * 21);
    margin-bottom: calc(var(--space-unit) * 21);
}

.u-my-22 {
    margin-top: calc(var(--space-unit) * 22);
    margin-bottom: calc(var(--space-unit) * 22);
}

.u-my-23 {
    margin-top: calc(var(--space-unit) * 23);
    margin-bottom: calc(var(--space-unit) * 23);
}

.u-my-24 {
    margin-top: calc(var(--space-unit) * 24);
    margin-bottom: calc(var(--space-unit) * 24);
}

.u-my-25 {
    margin-top: calc(var(--space-unit) * 25);
    margin-bottom: calc(var(--space-unit) * 25);
}

.u-my-26 {
    margin-top: calc(var(--space-unit) * 26);
    margin-bottom: calc(var(--space-unit) * 26);
}

.u-my-27 {
    margin-top: calc(var(--space-unit) * 27);
    margin-bottom: calc(var(--space-unit) * 27);
}

.u-my-28 {
    margin-top: calc(var(--space-unit) * 28);
    margin-bottom: calc(var(--space-unit) * 28);
}

.u-my-29 {
    margin-top: calc(var(--space-unit) * 29);
    margin-bottom: calc(var(--space-unit) * 29);
}

.u-my-30 {
    margin-top: calc(var(--space-unit) * 30);
    margin-bottom: calc(var(--space-unit) * 30);
}

.u-my-31 {
    margin-top: calc(var(--space-unit) * 31);
    margin-bottom: calc(var(--space-unit) * 31);
}

.u-my-32 {
    margin-top: calc(var(--space-unit) * 32);
    margin-bottom: calc(var(--space-unit) * 32);
}

/* Individual sides */
.u-mt-0 {
    margin-top: 0;
}

.u-mt-1 {
    margin-top: calc(var(--space-unit) * 1);
}

.u-mt-2 {
    margin-top: calc(var(--space-unit) * 2);
}

.u-mt-3 {
    margin-top: calc(var(--space-unit) * 3);
}

.u-mt-4 {
    margin-top: calc(var(--space-unit) * 4);
}

.u-mt-5 {
    margin-top: calc(var(--space-unit) * 5);
}

.u-mt-6 {
    margin-top: calc(var(--space-unit) * 6);
}

.u-mt-7 {
    margin-top: calc(var(--space-unit) * 7);
}

.u-mt-8 {
    margin-top: calc(var(--space-unit) * 8);
}

.u-mt-9 {
    margin-top: calc(var(--space-unit) * 9);
}

.u-mt-10 {
    margin-top: calc(var(--space-unit) * 10);
}

.u-mt-11 {
    margin-top: calc(var(--space-unit) * 11);
}

.u-mt-12 {
    margin-top: calc(var(--space-unit) * 12);
}

.u-mt-13 {
    margin-top: calc(var(--space-unit) * 13);
}

.u-mt-14 {
    margin-top: calc(var(--space-unit) * 14);
}

.u-mt-15 {
    margin-top: calc(var(--space-unit) * 15);
}

.u-mt-16 {
    margin-top: calc(var(--space-unit) * 16);
}

.u-mt-17 {
    margin-top: calc(var(--space-unit) * 17);
}

.u-mt-18 {
    margin-top: calc(var(--space-unit) * 18);
}

.u-mt-19 {
    margin-top: calc(var(--space-unit) * 19);
}

.u-mt-20 {
    margin-top: calc(var(--space-unit) * 20);
}

.u-mt-21 {
    margin-top: calc(var(--space-unit) * 21);
}

.u-mt-22 {
    margin-top: calc(var(--space-unit) * 22);
}

.u-mt-23 {
    margin-top: calc(var(--space-unit) * 23);
}

.u-mt-24 {
    margin-top: calc(var(--space-unit) * 24);
}

.u-mt-25 {
    margin-top: calc(var(--space-unit) * 25);
}

.u-mt-26 {
    margin-top: calc(var(--space-unit) * 26);
}

.u-mt-27 {
    margin-top: calc(var(--space-unit) * 27);
}

.u-mt-28 {
    margin-top: calc(var(--space-unit) * 28);
}

.u-mt-29 {
    margin-top: calc(var(--space-unit) * 29);
}

.u-mt-30 {
    margin-top: calc(var(--space-unit) * 30);
}

.u-mt-31 {
    margin-top: calc(var(--space-unit) * 31);
}

.u-mt-32 {
    margin-top: calc(var(--space-unit) * 32);
}

.u-mr-0 {
    margin-right: 0;
}

.u-mr-1 {
    margin-right: calc(var(--space-unit) * 1);
}

.u-mr-2 {
    margin-right: calc(var(--space-unit) * 2);
}

.u-mr-3 {
    margin-right: calc(var(--space-unit) * 3);
}

.u-mr-4 {
    margin-right: calc(var(--space-unit) * 4);
}

.u-mr-5 {
    margin-right: calc(var(--space-unit) * 5);
}

.u-mr-6 {
    margin-right: calc(var(--space-unit) * 6);
}

.u-mr-7 {
    margin-right: calc(var(--space-unit) * 7);
}

.u-mr-8 {
    margin-right: calc(var(--space-unit) * 8);
}

.u-mr-9 {
    margin-right: calc(var(--space-unit) * 9);
}

.u-mr-10 {
    margin-right: calc(var(--space-unit) * 10);
}

.u-mr-11 {
    margin-right: calc(var(--space-unit) * 11);
}

.u-mr-12 {
    margin-right: calc(var(--space-unit) * 12);
}

.u-mr-13 {
    margin-right: calc(var(--space-unit) * 13);
}

.u-mr-14 {
    margin-right: calc(var(--space-unit) * 14);
}

.u-mr-15 {
    margin-right: calc(var(--space-unit) * 15);
}

.u-mr-16 {
    margin-right: calc(var(--space-unit) * 16);
}

.u-mr-17 {
    margin-right: calc(var(--space-unit) * 17);
}

.u-mr-18 {
    margin-right: calc(var(--space-unit) * 18);
}

.u-mr-19 {
    margin-right: calc(var(--space-unit) * 19);
}

.u-mr-20 {
    margin-right: calc(var(--space-unit) * 20);
}

.u-mr-21 {
    margin-right: calc(var(--space-unit) * 21);
}

.u-mr-22 {
    margin-right: calc(var(--space-unit) * 22);
}

.u-mr-23 {
    margin-right: calc(var(--space-unit) * 23);
}

.u-mr-24 {
    margin-right: calc(var(--space-unit) * 24);
}

.u-mr-25 {
    margin-right: calc(var(--space-unit) * 25);
}

.u-mr-26 {
    margin-right: calc(var(--space-unit) * 26);
}

.u-mr-27 {
    margin-right: calc(var(--space-unit) * 27);
}

.u-mr-28 {
    margin-right: calc(var(--space-unit) * 28);
}

.u-mr-29 {
    margin-right: calc(var(--space-unit) * 29);
}

.u-mr-30 {
    margin-right: calc(var(--space-unit) * 30);
}

.u-mr-31 {
    margin-right: calc(var(--space-unit) * 31);
}

.u-mr-32 {
    margin-right: calc(var(--space-unit) * 32);
}

.u-mb-0 {
    margin-bottom: 0;
}

.u-mb-1 {
    margin-bottom: calc(var(--space-unit) * 1);
}

.u-mb-2 {
    margin-bottom: calc(var(--space-unit) * 2);
}

.u-mb-3 {
    margin-bottom: calc(var(--space-unit) * 3);
}

.u-mb-4 {
    margin-bottom: calc(var(--space-unit) * 4);
}

.u-mb-5 {
    margin-bottom: calc(var(--space-unit) * 5);
}

.u-mb-6 {
    margin-bottom: calc(var(--space-unit) * 6);
}

.u-mb-7 {
    margin-bottom: calc(var(--space-unit) * 7);
}

.u-mb-8 {
    margin-bottom: calc(var(--space-unit) * 8);
}

.u-mb-9 {
    margin-bottom: calc(var(--space-unit) * 9);
}

.u-mb-10 {
    margin-bottom: calc(var(--space-unit) * 10);
}

.u-mb-11 {
    margin-bottom: calc(var(--space-unit) * 11);
}

.u-mb-12 {
    margin-bottom: calc(var(--space-unit) * 12);
}

.u-mb-13 {
    margin-bottom: calc(var(--space-unit) * 13);
}

.u-mb-14 {
    margin-bottom: calc(var(--space-unit) * 14);
}

.u-mb-15 {
    margin-bottom: calc(var(--space-unit) * 15);
}

.u-mb-16 {
    margin-bottom: calc(var(--space-unit) * 16);
}

.u-mb-17 {
    margin-bottom: calc(var(--space-unit) * 17);
}

.u-mb-18 {
    margin-bottom: calc(var(--space-unit) * 18);
}

.u-mb-19 {
    margin-bottom: calc(var(--space-unit) * 19);
}

.u-mb-20 {
    margin-bottom: calc(var(--space-unit) * 20);
}

.u-mb-21 {
    margin-bottom: calc(var(--space-unit) * 21);
}

.u-mb-22 {
    margin-bottom: calc(var(--space-unit) * 22);
}

.u-mb-23 {
    margin-bottom: calc(var(--space-unit) * 23);
}

.u-mb-24 {
    margin-bottom: calc(var(--space-unit) * 24);
}

.u-mb-25 {
    margin-bottom: calc(var(--space-unit) * 25);
}

.u-mb-26 {
    margin-bottom: calc(var(--space-unit) * 26);
}

.u-mb-27 {
    margin-bottom: calc(var(--space-unit) * 27);
}

.u-mb-28 {
    margin-bottom: calc(var(--space-unit) * 28);
}

.u-mb-29 {
    margin-bottom: calc(var(--space-unit) * 29);
}

.u-mb-30 {
    margin-bottom: calc(var(--space-unit) * 30);
}

.u-mb-31 {
    margin-bottom: calc(var(--space-unit) * 31);
}

.u-mb-32 {
    margin-bottom: calc(var(--space-unit) * 32);
}

.u-ml-0 {
    margin-left: 0;
}

.u-ml-1 {
    margin-left: calc(var(--space-unit) * 1);
}

.u-ml-2 {
    margin-left: calc(var(--space-unit) * 2);
}

.u-ml-3 {
    margin-left: calc(var(--space-unit) * 3);
}

.u-ml-4 {
    margin-left: calc(var(--space-unit) * 4);
}

.u-ml-5 {
    margin-left: calc(var(--space-unit) * 5);
}

.u-ml-6 {
    margin-left: calc(var(--space-unit) * 6);
}

.u-ml-7 {
    margin-left: calc(var(--space-unit) * 7);
}

.u-ml-8 {
    margin-left: calc(var(--space-unit) * 8);
}

.u-ml-9 {
    margin-left: calc(var(--space-unit) * 9);
}

.u-ml-10 {
    margin-left: calc(var(--space-unit) * 10);
}

.u-ml-11 {
    margin-left: calc(var(--space-unit) * 11);
}

.u-ml-12 {
    margin-left: calc(var(--space-unit) * 12);
}

.u-ml-13 {
    margin-left: calc(var(--space-unit) * 13);
}

.u-ml-14 {
    margin-left: calc(var(--space-unit) * 14);
}

.u-ml-15 {
    margin-left: calc(var(--space-unit) * 15);
}

.u-ml-16 {
    margin-left: calc(var(--space-unit) * 16);
}

.u-ml-17 {
    margin-left: calc(var(--space-unit) * 17);
}

.u-ml-18 {
    margin-left: calc(var(--space-unit) * 18);
}

.u-ml-19 {
    margin-left: calc(var(--space-unit) * 19);
}

.u-ml-20 {
    margin-left: calc(var(--space-unit) * 20);
}

.u-ml-21 {
    margin-left: calc(var(--space-unit) * 21);
}

.u-ml-22 {
    margin-left: calc(var(--space-unit) * 22);
}

.u-ml-23 {
    margin-left: calc(var(--space-unit) * 23);
}

.u-ml-24 {
    margin-left: calc(var(--space-unit) * 24);
}

.u-ml-25 {
    margin-left: calc(var(--space-unit) * 25);
}

.u-ml-26 {
    margin-left: calc(var(--space-unit) * 26);
}

.u-ml-27 {
    margin-left: calc(var(--space-unit) * 27);
}

.u-ml-28 {
    margin-left: calc(var(--space-unit) * 28);
}

.u-ml-29 {
    margin-left: calc(var(--space-unit) * 29);
}

.u-ml-30 {
    margin-left: calc(var(--space-unit) * 30);
}

.u-ml-31 {
    margin-left: calc(var(--space-unit) * 31);
}

.u-ml-32 {
    margin-left: calc(var(--space-unit) * 32);
}

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

.u-my-auto {
    margin-top: auto;
    margin-bottom: auto;
}

/* =========================
   Gap
========================= */
.u-gap-0 {
    gap: 0;
}

.u-gap-1 {
    gap: calc(var(--space-unit) * 1);
}

.u-gap-2 {
    gap: calc(var(--space-unit) * 2);
}

.u-gap-3 {
    gap: calc(var(--space-unit) * 3);
}

.u-gap-4 {
    gap: calc(var(--space-unit) * 4);
}

.u-gap-5 {
    gap: calc(var(--space-unit) * 5);
}

.u-gap-6 {
    gap: calc(var(--space-unit) * 6);
}

.u-gap-7 {
    gap: calc(var(--space-unit) * 7);
}

.u-gap-8 {
    gap: calc(var(--space-unit) * 8);
}

.u-gap-9 {
    gap: calc(var(--space-unit) * 9);
}

.u-gap-10 {
    gap: calc(var(--space-unit) * 10);
}

.u-gap-11 {
    gap: calc(var(--space-unit) * 11);
}

.u-gap-12 {
    gap: calc(var(--space-unit) * 12);
}

.u-gap-13 {
    gap: calc(var(--space-unit) * 13);
}

.u-gap-14 {
    gap: calc(var(--space-unit) * 14);
}

.u-gap-15 {
    gap: calc(var(--space-unit) * 15);
}

.u-gap-16 {
    gap: calc(var(--space-unit) * 16);
}

.u-gap-17 {
    gap: calc(var(--space-unit) * 17);
}

.u-gap-18 {
    gap: calc(var(--space-unit) * 18);
}

.u-gap-19 {
    gap: calc(var(--space-unit) * 19);
}

.u-gap-20 {
    gap: calc(var(--space-unit) * 20);
}

.u-gap-21 {
    gap: calc(var(--space-unit) * 21);
}

.u-gap-22 {
    gap: calc(var(--space-unit) * 22);
}

.u-gap-23 {
    gap: calc(var(--space-unit) * 23);
}

.u-gap-24 {
    gap: calc(var(--space-unit) * 24);
}

.u-gap-25 {
    gap: calc(var(--space-unit) * 25);
}

.u-gap-26 {
    gap: calc(var(--space-unit) * 26);
}

.u-gap-27 {
    gap: calc(var(--space-unit) * 27);
}

.u-gap-28 {
    gap: calc(var(--space-unit) * 28);
}

.u-gap-29 {
    gap: calc(var(--space-unit) * 29);
}

.u-gap-30 {
    gap: calc(var(--space-unit) * 30);
}

.u-gap-31 {
    gap: calc(var(--space-unit) * 31);
}

.u-gap-32 {
    gap: calc(var(--space-unit) * 32);
}

.u-row-gap-0 {
    row-gap: 0;
}

.u-row-gap-1 {
    row-gap: calc(var(--space-unit) * 1);
}
/* keep pattern consistent */
.u-row-gap-2 {
    row-gap: calc(var(--space-unit) * 2);
}

.u-row-gap-3 {
    row-gap: calc(var(--space-unit) * 3);
}

.u-row-gap-4 {
    row-gap: calc(var(--space-unit) * 4);
}

.u-row-gap-5 {
    row-gap: calc(var(--space-unit) * 5);
}

.u-row-gap-6 {
    row-gap: calc(var(--space-unit) * 6);
}

.u-row-gap-7 {
    row-gap: calc(var(--space-unit) * 7);
}

.u-row-gap-8 {
    row-gap: calc(var(--space-unit) * 8);
}

.u-row-gap-9 {
    row-gap: calc(var(--space-unit) * 9);
}

.u-row-gap-10 {
    row-gap: calc(var(--space-unit) * 10);
}

.u-row-gap-11 {
    row-gap: calc(var(--space-unit) * 11);
}

.u-row-gap-12 {
    row-gap: calc(var(--space-unit) * 12);
}

.u-row-gap-13 {
    row-gap: calc(var(--space-unit) * 13);
}

.u-row-gap-14 {
    row-gap: calc(var(--space-unit) * 14);
}

.u-row-gap-15 {
    row-gap: calc(var(--space-unit) * 15);
}

.u-row-gap-16 {
    row-gap: calc(var(--space-unit) * 16);
}

.u-row-gap-17 {
    row-gap: calc(var(--space-unit) * 17);
}

.u-row-gap-18 {
    row-gap: calc(var(--space-unit) * 18);
}

.u-row-gap-19 {
    row-gap: calc(var(--space-unit) * 19);
}

.u-row-gap-20 {
    row-gap: calc(var(--space-unit) * 20);
}

.u-row-gap-21 {
    row-gap: calc(var(--space-unit) * 21);
}

.u-row-gap-22 {
    row-gap: calc(var(--space-unit) * 22);
}

.u-row-gap-23 {
    row-gap: calc(var(--space-unit) * 23);
}

.u-row-gap-24 {
    row-gap: calc(var(--space-unit) * 24);
}

.u-row-gap-25 {
    row-gap: calc(var(--space-unit) * 25);
}

.u-row-gap-26 {
    row-gap: calc(var(--space-unit) * 26);
}

.u-row-gap-27 {
    row-gap: calc(var(--space-unit) * 27);
}

.u-row-gap-28 {
    row-gap: calc(var(--space-unit) * 28);
}

.u-row-gap-29 {
    row-gap: calc(var(--space-unit) * 29);
}

.u-row-gap-30 {
    row-gap: calc(var(--space-unit) * 30);
}

.u-row-gap-31 {
    row-gap: calc(var(--space-unit) * 31);
}

.u-row-gap-32 {
    row-gap: calc(var(--space-unit) * 32);
}

.u-col-gap-0 {
    column-gap: 0;
}

.u-col-gap-1 {
    column-gap: calc(var(--space-unit) * 1);
}

.u-col-gap-2 {
    column-gap: calc(var(--space-unit) * 2);
}

.u-col-gap-3 {
    column-gap: calc(var(--space-unit) * 3);
}

.u-col-gap-4 {
    column-gap: calc(var(--space-unit) * 4);
}

.u-col-gap-5 {
    column-gap: calc(var(--space-unit) * 5);
}

.u-col-gap-6 {
    column-gap: calc(var(--space-unit) * 6);
}

.u-col-gap-7 {
    column-gap: calc(var(--space-unit) * 7);
}

.u-col-gap-8 {
    column-gap: calc(var(--space-unit) * 8);
}

.u-col-gap-9 {
    column-gap: calc(var(--space-unit) * 9);
}

.u-col-gap-10 {
    column-gap: calc(var(--space-unit) * 10);
}

.u-col-gap-11 {
    column-gap: calc(var(--space-unit) * 11);
}

.u-col-gap-12 {
    column-gap: calc(var(--space-unit) * 12);
}

.u-col-gap-13 {
    column-gap: calc(var(--space-unit) * 13);
}

.u-col-gap-14 {
    column-gap: calc(var(--space-unit) * 14);
}

.u-col-gap-15 {
    column-gap: calc(var(--space-unit) * 15);
}

.u-col-gap-16 {
    column-gap: calc(var(--space-unit) * 16);
}

.u-col-gap-17 {
    column-gap: calc(var(--space-unit) * 17);
}

.u-col-gap-18 {
    column-gap: calc(var(--space-unit) * 18);
}

.u-col-gap-19 {
    column-gap: calc(var(--space-unit) * 19);
}

.u-col-gap-20 {
    column-gap: calc(var(--space-unit) * 20);
}

.u-col-gap-21 {
    column-gap: calc(var(--space-unit) * 21);
}

.u-col-gap-22 {
    column-gap: calc(var(--space-unit) * 22);
}

.u-col-gap-23 {
    column-gap: calc(var(--space-unit) * 23);
}

.u-col-gap-24 {
    column-gap: calc(var(--space-unit) * 24);
}

.u-col-gap-25 {
    column-gap: calc(var(--space-unit) * 25);
}

.u-col-gap-26 {
    column-gap: calc(var(--space-unit) * 26);
}

.u-col-gap-27 {
    column-gap: calc(var(--space-unit) * 27);
}

.u-col-gap-28 {
    column-gap: calc(var(--space-unit) * 28);
}

.u-col-gap-29 {
    column-gap: calc(var(--space-unit) * 29);
}

.u-col-gap-30 {
    column-gap: calc(var(--space-unit) * 30);
}

.u-col-gap-31 {
    column-gap: calc(var(--space-unit) * 31);
}

.u-col-gap-32 {
    column-gap: calc(var(--space-unit) * 32);
}

/* =========================
   Display
========================= */
.u-d-none {
    display: none !important;
}

.u-d-block {
    display: block !important;
}

.u-d-inline {
    display: inline !important;
}

.u-d-inline-block {
    display: inline-block !important;
}

.u-d-flex {
    display: flex !important;
}

.u-d-inline-flex {
    display: inline-flex !important;
}

.u-d-grid {
    display: grid !important;
}

/* =========================
   Flex
========================= */
.u-flex-row {
    flex-direction: row !important;
}

.u-flex-column {
    flex-direction: column !important;
}

.u-flex-wrap {
    flex-wrap: wrap !important;
}

.u-flex-nowrap {
    flex-wrap: nowrap !important;
}

.u-items-start {
    align-items: flex-start !important;
}

.u-items-center {
    align-items: center !important;
}

.u-items-end {
    align-items: flex-end !important;
}

.u-items-stretch {
    align-items: stretch !important;
}

.u-justify-start {
    justify-content: flex-start !important;
}

.u-justify-center {
    justify-content: center !important;
}

.u-justify-end {
    justify-content: flex-end !important;
}

.u-justify-between {
    justify-content: space-between !important;
}

.u-justify-around {
    justify-content: space-around !important;
}

.u-justify-evenly {
    justify-content: space-evenly !important;
}

.u-content-start {
    align-content: flex-start !important;
}

.u-content-center {
    align-content: center !important;
}

.u-content-end {
    align-content: flex-end !important;
}

.u-self-start {
    align-self: flex-start !important;
}

.u-self-center {
    align-self: center !important;
}

.u-self-end {
    align-self: flex-end !important;
}

.u-flex-1 {
    flex: 1 1 0% !important;
}

.u-flex-auto {
    flex: 1 1 auto !important;
}

.u-flex-initial {
    flex: 0 1 auto !important;
}

.u-flex-none {
    flex: none !important;
}

.u-grow {
    flex-grow: 1 !important;
}

.u-grow-0 {
    flex-grow: 0 !important;
}

.u-shrink {
    flex-shrink: 1 !important;
}

.u-shrink-0 {
    flex-shrink: 0 !important;
}

/* =========================
   Grid
========================= */
.u-grid-auto {
    grid-auto-flow: row !important;
}

.u-grid-auto-col {
    grid-auto-flow: column !important;
}

.u-place-center {
    place-items: center !important;
}

.u-place-start {
    place-items: start !important;
}

.u-place-end {
    place-items: end !important;
}

.u-grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
}

.u-grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.u-grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.u-grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.u-grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

.u-grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
}

.u-grid-cols-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
}

.u-grid-cols-8 {
    grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
}

.u-grid-cols-9 {
    grid-template-columns: repeat(9, minmax(0, 1fr)) !important;
}

.u-grid-cols-10 {
    grid-template-columns: repeat(10, minmax(0, 1fr)) !important;
}

.u-grid-cols-11 {
    grid-template-columns: repeat(11, minmax(0, 1fr)) !important;
}

.u-grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
}

/* =========================
   Text
========================= */
.u-text-left {
    text-align: left !important;
}

.u-text-center {
    text-align: center !important;
}

.u-text-right {
    text-align: right !important;
}

.u-text-justify {
    text-align: justify !important;
}

.u-text-nowrap {
    white-space: nowrap !important;
}

.u-text-wrap {
    white-space: normal !important;
}

.u-break-words {
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
}

.u-truncate {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.u-leading-tight {
    line-height: 1.15 !important;
}

.u-leading-normal {
    line-height: 1.5 !important;
}

.u-leading-loose {
    line-height: 1.75 !important;
}

.u-font-light {
    font-weight: 300 !important;
}

.u-font-normal {
    font-weight: 400 !important;
}

.u-font-medium {
    font-weight: 500 !important;
}

.u-font-semibold {
    font-weight: 600 !important;
}

.u-font-bold {
    font-weight: 700 !important;
}

.u-uppercase {
    text-transform: uppercase !important;
}

.u-lowercase {
    text-transform: lowercase !important;
}

.u-capitalize {
    text-transform: capitalize !important;
}

.u-text-xs {
    font-size: 0.75rem !important;
}

.u-text-sm {
    font-size: 0.875rem !important;
}

.u-text-base {
    font-size: 1rem !important;
}

.u-text-lg {
    font-size: 1.125rem !important;
}

.u-text-xl {
    font-size: 1.25rem !important;
}

.u-text-2xl {
    font-size: 1.5rem !important;
}

.u-text-3xl {
    font-size: 1.875rem !important;
}

/* =========================
   Sizing
========================= */
.u-w-auto {
    width: auto !important;
}

.u-w-fit {
    width: fit-content !important;
}

.u-w-min {
    width: min-content !important;
}

.u-w-max {
    width: max-content !important;
}

.u-w-100 {
    width: 100% !important;
}

.u-h-auto {
    height: auto !important;
}

.u-h-100 {
    height: 100% !important;
}

.u-min-w-0 {
    min-width: 0 !important;
}

.u-min-h-0 {
    min-height: 0 !important;
}

/* =========================
   Overflow
========================= */
.u-overflow-hidden {
    overflow: hidden !important;
}

.u-overflow-auto {
    overflow: auto !important;
}

.u-overflow-scroll {
    overflow: scroll !important;
}

.u-overflow-x-auto {
    overflow-x: auto !important;
    overflow-y: hidden !important;
}

.u-overflow-y-auto {
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* =========================
   Position
========================= */
.u-pos-static {
    position: static !important;
}

.u-pos-relative {
    position: relative !important;
}

.u-pos-absolute {
    position: absolute !important;
}

.u-pos-fixed {
    position: fixed !important;
}

.u-pos-sticky {
    position: sticky !important;
}

.u-top-0 {
    top: 0 !important;
}

.u-right-0 {
    right: 0 !important;
}

.u-bottom-0 {
    bottom: 0 !important;
}

.u-left-0 {
    left: 0 !important;
}

.u-inset-0 {
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
}

.u-z-0 {
    z-index: 0 !important;
}

.u-z-10 {
    z-index: 10 !important;
}

.u-z-20 {
    z-index: 20 !important;
}

.u-z-50 {
    z-index: 50 !important;
}

/* =========================
   Borders, Radius, Shadow
========================= */
.u-border {
    border: 1px solid currentColor;
}

.u-border-0 {
    border: 0 !important;
}

.u-border-t {
    border-top: 1px solid currentColor;
}

.u-border-r {
    border-right: 1px solid currentColor;
}

.u-border-b {
    border-bottom: 1px solid currentColor;
}

.u-border-l {
    border-left: 1px solid currentColor;
}

.u-rounded-none {
    border-radius: 0 !important;
}

.u-rounded-sm {
    border-radius: var(--radius-sm) !important;
}

.u-rounded {
    border-radius: var(--radius-md) !important;
}

.u-rounded-lg {
    border-radius: var(--radius-lg) !important;
}

.u-rounded-full {
    border-radius: 9999px !important;
}

.u-shadow-none {
    box-shadow: none !important;
}

.u-shadow-sm {
    box-shadow: var(--shadow-sm) !important;
}

.u-shadow {
    box-shadow: var(--shadow-md) !important;
}

.u-shadow-lg {
    box-shadow: var(--shadow-lg) !important;
}

/* =========================
   Misc
========================= */
.u-cursor-pointer {
    cursor: pointer !important;
}

.u-select-none {
    user-select: none !important;
}

.u-select-text {
    user-select: text !important;
}

.u-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}