:root {
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-7: 1.75rem;
    --space-8: 2rem;
    --space-9: 2.25rem;
    --space-10: 2.5rem;
    --space-11: 2.75rem;
    --space-12: 3rem;
    --space-13: 3.25rem;
    --space-14: 3.5rem;
    --space-15: 3.75rem;
    --space-16: 4rem;
    --space-17: 4.25rem;
    --space-18: 4.5rem;
    --space-19: 4.75rem;
    --space-20: 5rem;
    --space-21: 5.25rem;
    --space-22: 5.5rem;
    --space-23: 5.75rem;
    --space-24: 6rem;
    --space-25: 6.25rem;
    --space-26: 6.5rem;
    --space-27: 6.75rem;
    --space-28: 7rem;
    --space-29: 7.25rem;
    --space-30: 7.5rem;
}

/* Margin Y-axis */
.my-1 { margin-block: var(--space-1) !important; }
.my-2 { margin-block: var(--space-2) !important; }
.my-3 { margin-block: var(--space-3) !important; }
.my-4 { margin-block: var(--space-4) !important; }
.my-5 { margin-block: var(--space-5) !important; }
.my-6 { margin-block: var(--space-6) !important; }
.my-7 { margin-block: var(--space-7) !important; }
.my-8 { margin-block: var(--space-8) !important; }
.my-9 { margin-block: var(--space-9) !important; }
.my-10 { margin-block: var(--space-10) !important; }
.my-11 { margin-block: var(--space-11) !important; }
.my-12 { margin-block: var(--space-12) !important; }
.my-13 { margin-block: var(--space-13) !important; }
.my-14 { margin-block: var(--space-14) !important; }
.my-15 { margin-block: var(--space-15) !important; }
.my-16 { margin-block: var(--space-16) !important; }
.my-17 { margin-block: var(--space-17) !important; }
.my-18 { margin-block: var(--space-18) !important; }
.my-19 { margin-block: var(--space-19) !important; }
.my-20 { margin-block: var(--space-20) !important; }
.my-21 { margin-block: var(--space-21) !important; }
.my-22 { margin-block: var(--space-22) !important; }
.my-23 { margin-block: var(--space-23) !important; }
.my-24 { margin-block: var(--space-24) !important; }
.my-25 { margin-block: var(--space-25) !important; }
.my-26 { margin-block: var(--space-26) !important; }
.my-27 { margin-block: var(--space-27) !important; }
.my-28 { margin-block: var(--space-28) !important; }
.my-29 { margin-block: var(--space-29) !important; }
.my-30 { margin-block: var(--space-30) !important; }

/* Margin X-axis */
.mx-1 { margin-inline: var(--space-1) !important; }
.mx-2 { margin-inline: var(--space-2) !important; }
.mx-3 { margin-inline: var(--space-3) !important; }
.mx-4 { margin-inline: var(--space-4) !important; }
.mx-5 { margin-inline: var(--space-5) !important; }
.mx-6 { margin-inline: var(--space-6) !important; }
.mx-7 { margin-inline: var(--space-7) !important; }
.mx-8 { margin-inline: var(--space-8) !important; }
.mx-9 { margin-inline: var(--space-9) !important; }
.mx-10 { margin-inline: var(--space-10) !important; }
.mx-11 { margin-inline: var(--space-11) !important; }
.mx-12 { margin-inline: var(--space-12) !important; }
.mx-13 { margin-inline: var(--space-13) !important; }
.mx-14 { margin-inline: var(--space-14) !important; }
.mx-15 { margin-inline: var(--space-15) !important; }
.mx-16 { margin-inline: var(--space-16) !important; }
.mx-17 { margin-inline: var(--space-17) !important; }
.mx-18 { margin-inline: var(--space-18) !important; }
.mx-19 { margin-inline: var(--space-19) !important; }
.mx-20 { margin-inline: var(--space-20) !important; }
.mx-21 { margin-inline: var(--space-21) !important; }
.mx-22 { margin-inline: var(--space-22) !important; }
.mx-23 { margin-inline: var(--space-23) !important; }
.mx-24 { margin-inline: var(--space-24) !important; }
.mx-25 { margin-inline: var(--space-25) !important; }
.mx-26 { margin-inline: var(--space-26) !important; }
.mx-27 { margin-inline: var(--space-27) !important; }
.mx-28 { margin-inline: var(--space-28) !important; }
.mx-29 { margin-inline: var(--space-29) !important; }
.mx-30 { margin-inline: var(--space-30) !important; }

/* Padding X-axis */
.px-1 { padding-inline: var(--space-1) !important; }
.px-2 { padding-inline: var(--space-2) !important; }
.px-3 { padding-inline: var(--space-3) !important; }
.px-4 { padding-inline: var(--space-4) !important; }
.px-5 { padding-inline: var(--space-5) !important; }
.px-6 { padding-inline: var(--space-6) !important; }
.px-7 { padding-inline: var(--space-7) !important; }
.px-8 { padding-inline: var(--space-8) !important; }
.px-9 { padding-inline: var(--space-9) !important; }
.px-10 { padding-inline: var(--space-10) !important; }
.px-11 { padding-inline: var(--space-11) !important; }
.px-12 { padding-inline: var(--space-12) !important; }
.px-13 { padding-inline: var(--space-13) !important; }
.px-14 { padding-inline: var(--space-14) !important; }
.px-15 { padding-inline: var(--space-15) !important; }
.px-16 { padding-inline: var(--space-16) !important; }
.px-17 { padding-inline: var(--space-17) !important; }
.px-18 { padding-inline: var(--space-18) !important; }
.px-19 { padding-inline: var(--space-19) !important; }
.px-20 { padding-inline: var(--space-20) !important; }
.px-21 { padding-inline: var(--space-21) !important; }
.px-22 { padding-inline: var(--space-22) !important; }
.px-23 { padding-inline: var(--space-23) !important; }
.px-24 { padding-inline: var(--space-24) !important; }
.px-25 { padding-inline: var(--space-25) !important; }
.px-26 { padding-inline: var(--space-26) !important; }
.px-27 { padding-inline: var(--space-27) !important; }
.px-28 { padding-inline: var(--space-28) !important; }
.px-29 { padding-inline: var(--space-29) !important; }
.px-30 { padding-inline: var(--space-30) !important; }

/* Padding Y-axis */
.py-1 { padding-block: var(--space-1) !important; }
.py-2 { padding-block: var(--space-2) !important; }
.py-3 { padding-block: var(--space-3) !important; }
.py-4 { padding-block: var(--space-4) !important; }
.py-5 { padding-block: var(--space-5) !important; }
.py-6 { padding-block: var(--space-6) !important; }
.py-7 { padding-block: var(--space-7) !important; }
.py-8 { padding-block: var(--space-8) !important; }
.py-9 { padding-block: var(--space-9) !important; }
.py-10 { padding-block: var(--space-10) !important; }
.py-11 { padding-block: var(--space-11) !important; }
.py-12 { padding-block: var(--space-12) !important; }
.py-13 { padding-block: var(--space-13) !important; }
.py-14 { padding-block: var(--space-14) !important; }
.py-15 { padding-block: var(--space-15) !important; }
.py-16 { padding-block: var(--space-16) !important; }
.py-17 { padding-block: var(--space-17) !important; }
.py-18 { padding-block: var(--space-18) !important; }
.py-19 { padding-block: var(--space-19) !important; }
.py-20 { padding-block: var(--space-20) !important; }
.py-21 { padding-block: var(--space-21) !important; }
.py-22 { padding-block: var(--space-22) !important; }
.py-23 { padding-block: var(--space-23) !important; }
.py-24 { padding-block: var(--space-24) !important; }
.py-25 { padding-block: var(--space-25) !important; }
.py-26 { padding-block: var(--space-26) !important; }
.py-27 { padding-block: var(--space-27) !important; }
.py-28 { padding-block: var(--space-28) !important; }
.py-29 { padding-block: var(--space-29) !important; }
.py-30 { padding-block: var(--space-30) !important; }