/* =========================================================
   Spacing System (Margin + Padding)
   Scale: 1 = 0.1rem
   Range: 0 ~ 50
   ========================================================= */

/* -------- VARIABLES (0~50) -------- */
/* =========================================================
   MARGIN (m, mt, mr, mb, ml, mx, my)
   ========================================================= */

:root {
    --s-0: 0rem;
    --s-1: 0.1rem;
    --s-2: 0.2rem;
    --s-3: 0.3rem;
    --s-4: 0.4rem;
    --s-5: 0.5rem;
    --s-6: 0.6rem;
    --s-7: 0.7rem;
    --s-8: 0.8rem;
    --s-9: 0.9rem;
    --s-10: 1.0rem;
    --s-11: 1.1rem;
    --s-12: 1.2rem;
    --s-13: 1.3rem;
    --s-14: 1.4rem;
    --s-15: 1.5rem;
    --s-16: 1.6rem;
    --s-17: 1.7rem;
    --s-18: 1.8rem;
    --s-19: 1.9rem;
    --s-20: 2.0rem;
    --s-21: 2.1rem;
    --s-22: 2.2rem;
    --s-23: 2.3rem;
    --s-24: 2.4rem;
    --s-25: 2.5rem;
    --s-26: 2.6rem;
    --s-27: 2.7rem;
    --s-28: 2.8rem;
    --s-29: 2.9rem;
    --s-30: 3.0rem;
    --s-31: 3.1rem;
    --s-32: 3.2rem;
    --s-33: 3.3rem;
    --s-34: 3.4rem;
    --s-35: 3.5rem;
    --s-36: 3.6rem;
    --s-37: 3.7rem;
    --s-38: 3.8rem;
    --s-39: 3.9rem;
    --s-40: 4.0rem;
    --s-41: 4.1rem;
    --s-42: 4.2rem;
    --s-43: 4.3rem;
    --s-44: 4.4rem;
    --s-45: 4.5rem;
    --s-46: 4.6rem;
    --s-47: 4.7rem;
    --s-48: 4.8rem;
    --s-49: 4.9rem;
    --s-50: 5.0rem;
    --s-51: 5.1rem;
    --s-52: 5.2rem;
    --s-58: 5.8rem;
    --s-60: 6.0rem;
    --s-64: 6.4rem;
    --s-70: 7rem;
    --s-71: 7.1rem;
    --s-72: 7.2rem;
    --s-77: 7.7rem;
    --s-80: 8.0rem;
    --s-84: 8.4rem;
    --s-88: 8.8rem;
    --s-90: 9.0rem;
    --s-100: 10rem;
    --s-110: 11rem;
    --s-120: 12rem;
    --s-125: 12.5rem;
    --s-130: 13rem;
    --s-140: 14rem;
    --s-144: 14.4rem;
    --s-150: 15rem;
    --s-157: 15.7rem;
    --s-160: 16rem;
    --s-170: 17rem;
    --s-180: 18rem;
    --s-190: 19rem;
    --s-200: 20rem;
    --s-220: 22rem;
    --s-230: 23rem;
    --s-240: 24rem;
    --s-250: 25rem;
    --s-260: 26rem;
    --s-280: 28rem;
    --s-300: 30rem;
    --s-320: 32rem;
    --s-350: 35rem;
    --s-400: 40rem;
    --s-450: 45rem;
    --s-500: 50rem;
    --s-550: 55rem;
    --s-570: 57rem;
    --s-680: 68rem;
    --s-800: 80rem;
}

/* ALL (m-N) */
.m-0 { margin: var(--s-0); }
.m-1 { margin: var(--s-1); }
.m-2 { margin: var(--s-2); }
.m-3 { margin: var(--s-3); }
.m-4 { margin: var(--s-4); }
.m-5 { margin: var(--s-5); }
.m-6 { margin: var(--s-6); }
.m-7 { margin: var(--s-7); }
.m-8 { margin: var(--s-8); }
.m-9 { margin: var(--s-9); }
.m-10 { margin: var(--s-10); }
.m-11 { margin: var(--s-11); }
.m-12 { margin: var(--s-12); }
.m-13 { margin: var(--s-13); }
.m-14 { margin: var(--s-14); }
.m-15 { margin: var(--s-15); }
.m-16 { margin: var(--s-16); }
.m-17 { margin: var(--s-17); }
.m-18 { margin: var(--s-18); }
.m-19 { margin: var(--s-19); }
.m-20 { margin: var(--s-20); }
.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); }
.m-33 { margin: var(--s-33); }
.m-34 { margin: var(--s-34); }
.m-35 { margin: var(--s-35); }
.m-36 { margin: var(--s-36); }
.m-37 { margin: var(--s-37); }
.m-38 { margin: var(--s-38); }
.m-39 { margin: var(--s-39); }
.m-40 { margin: var(--s-40); }
.m-41 { margin: var(--s-41); }
.m-42 { margin: var(--s-42); }
.m-43 { margin: var(--s-43); }
.m-44 { margin: var(--s-44); }
.m-45 { margin: var(--s-45); }
.m-46 { margin: var(--s-46); }
.m-47 { margin: var(--s-47); }
.m-48 { margin: var(--s-48); }
.m-49 { margin: var(--s-49); }
.m-50 { margin: var(--s-50); }



/* TOP NEGATIVE (-mt-N) */
.-mt-0  { margin-top: calc(var(--s-0)  * -1); }
.-mt-1  { margin-top: calc(var(--s-1)  * -1); }
.-mt-2  { margin-top: calc(var(--s-2)  * -1); }
.-mt-3  { margin-top: calc(var(--s-3)  * -1); }
.-mt-4  { margin-top: calc(var(--s-4)  * -1); }
.-mt-5  { margin-top: calc(var(--s-5)  * -1); }
.-mt-6  { margin-top: calc(var(--s-6)  * -1); }
.-mt-7  { margin-top: calc(var(--s-7)  * -1); }
.-mt-8  { margin-top: calc(var(--s-8)  * -1); }
.-mt-9  { margin-top: calc(var(--s-9)  * -1); }
.-mt-10 { margin-top: calc(var(--s-10) * -1); }
.-mt-11 { margin-top: calc(var(--s-11) * -1); }
.-mt-12 { margin-top: calc(var(--s-12) * -1); }
.-mt-13 { margin-top: calc(var(--s-13) * -1); }
.-mt-14 { margin-top: calc(var(--s-14) * -1); }
.-mt-15 { margin-top: calc(var(--s-15) * -1); }
.-mt-16 { margin-top: calc(var(--s-16) * -1); }
.-mt-17 { margin-top: calc(var(--s-17) * -1); }
.-mt-18 { margin-top: calc(var(--s-18) * -1); }
.-mt-19 { margin-top: calc(var(--s-19) * -1); }
.-mt-20 { margin-top: calc(var(--s-20) * -1); }
.-mt-30 { margin-top: calc(var(--s-30) * -1); }
.-mt-35 { margin-top: calc(var(--s-35) * -1); }
.-mt-40 { margin-top: calc(var(--s-40) * -1); }
.-mt-45 { margin-top: calc(var(--s-45) * -1); }
.-mt-50 { margin-top: calc(var(--s-50) * -1); }
.-mt-60 { margin-top: calc(var(--s-60) * -1); }
.-mt-100 { margin-top: calc(var(--s-100) * -1); }
.-mt-125 { margin-top: calc(var(--s-125) * -1); }
.-mt-150 { margin-top: calc(var(--s-150) * -1); }
.-mt-180 { margin-top: calc(var(--s-180) * -1); }
.-mt-200 { margin-top: calc(var(--s-200) * -1); }
.-mt-250 { margin-top: calc(var(--s-250) * -1); }
.-mt-400 { margin-top: calc(var(--s-400) * -1); }
.-mt-800 { margin-top: calc(var(--s-800) * -1); }



@media (min-width: 1024px) {
.lg--mt-0 { margin-top: 0; }
.lg--mt-20 { margin-top: calc(var(--s-20) * -1); }
.lg--mt-30 { margin-top: calc(var(--s-30) * -1); }
.lg--mt-40 { margin-top: calc(var(--s-40) * -1); }
.lg--mt-50 { margin-top: calc(var(--s-50) * -1); }
.lg--mt-70 { margin-top: calc(var(--s-70) * -1); }
.lg--mt-250 { margin-top: calc(var(--s-250) * -1); }
.lg--mt-260 { margin-top: calc(var(--s-260) * -1); }
.lg--mt-280 { margin-top: calc(var(--s-280) * -1); }
}


/* TOP (mt-N) */
.mt-0 { margin-top: var(--s-0); }
.mt-1 { margin-top: var(--s-1); }
.mt-2 { margin-top: var(--s-2); }
.mt-3 { margin-top: var(--s-3); }
.mt-4 { margin-top: var(--s-4); }
.mt-5 { margin-top: var(--s-5); }
.mt-6 { margin-top: var(--s-6); }
.mt-7 { margin-top: var(--s-7); }
.mt-8 { margin-top: var(--s-8); }
.mt-9 { margin-top: var(--s-9); }
.mt-10 { margin-top: var(--s-10); }
.mt-11 { margin-top: var(--s-11); }
.mt-12 { margin-top: var(--s-12); }
.mt-13 { margin-top: var(--s-13); }
.mt-14 { margin-top: var(--s-14); }
.mt-15 { margin-top: var(--s-15); }
.mt-16 { margin-top: var(--s-16); }
.mt-17 { margin-top: var(--s-17); }
.mt-18 { margin-top: var(--s-18); }
.mt-19 { margin-top: var(--s-19); }
.mt-20 { margin-top: var(--s-20); }
.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); }
.mt-33 { margin-top: var(--s-33); }
.mt-34 { margin-top: var(--s-34); }
.mt-35 { margin-top: var(--s-35); }
.mt-36 { margin-top: var(--s-36); }
.mt-37 { margin-top: var(--s-37); }
.mt-38 { margin-top: var(--s-38); }
.mt-39 { margin-top: var(--s-39); }
.mt-40 { margin-top: var(--s-40); }
.mt-41 { margin-top: var(--s-41); }
.mt-42 { margin-top: var(--s-42); }
.mt-43 { margin-top: var(--s-43); }
.mt-44 { margin-top: var(--s-44); }
.mt-45 { margin-top: var(--s-45); }
.mt-46 { margin-top: var(--s-46); }
.mt-47 { margin-top: var(--s-47); }
.mt-48 { margin-top: var(--s-48); }
.mt-49 { margin-top: var(--s-49); }
.mt-50 { margin-top: var(--s-50); }
.mt-70 { margin-top: var(--s-70); }
.mt-80 { margin-top: var(--s-80); }
.mt-90 { margin-top: var(--s-90); }
.mt-100 { margin-top: var(--s-100); }
.mt-110 { margin-top: var(--s-110); }
.mt-130 { margin-top: var(--s-130); }
.mt-140 { margin-top: var(--s-140); }
.mt-160 { margin-top: var(--s-160); }
.mt-200 { margin-top: var(--s-200); }
.mt-260 { margin-top: var(--s-260); }
.mt-300 { margin-top: var(--s-300); }

/* RIGHT (mr-N) */
.mr-0 { margin-right: var(--s-0); }
.mr-1 { margin-right: var(--s-1); }
.mr-2 { margin-right: var(--s-2); }
.mr-3 { margin-right: var(--s-3); }
.mr-4 { margin-right: var(--s-4); }
.mr-5 { margin-right: var(--s-5); }
.mr-6 { margin-right: var(--s-6); }
.mr-7 { margin-right: var(--s-7); }
.mr-8 { margin-right: var(--s-8); }
.mr-9 { margin-right: var(--s-9); }
.mr-10 { margin-right: var(--s-10); }
.mr-11 { margin-right: var(--s-11); }
.mr-12 { margin-right: var(--s-12); }
.mr-13 { margin-right: var(--s-13); }
.mr-14 { margin-right: var(--s-14); }
.mr-15 { margin-right: var(--s-15); }
.mr-16 { margin-right: var(--s-16); }
.mr-17 { margin-right: var(--s-17); }
.mr-18 { margin-right: var(--s-18); }
.mr-19 { margin-right: var(--s-19); }
.mr-20 { margin-right: var(--s-20); }
.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); }
.mr-33 { margin-right: var(--s-33); }
.mr-34 { margin-right: var(--s-34); }
.mr-35 { margin-right: var(--s-35); }
.mr-36 { margin-right: var(--s-36); }
.mr-37 { margin-right: var(--s-37); }
.mr-38 { margin-right: var(--s-38); }
.mr-39 { margin-right: var(--s-39); }
.mr-40 { margin-right: var(--s-40); }
.mr-41 { margin-right: var(--s-41); }
.mr-42 { margin-right: var(--s-42); }
.mr-43 { margin-right: var(--s-43); }
.mr-44 { margin-right: var(--s-44); }
.mr-45 { margin-right: var(--s-45); }
.mr-46 { margin-right: var(--s-46); }
.mr-47 { margin-right: var(--s-47); }
.mr-48 { margin-right: var(--s-48); }
.mr-49 { margin-right: var(--s-49); }
.mr-50 { margin-right: var(--s-50); }
.mr-60 { margin-right: var(--s-60); }
.mr-90 { margin-right: var(--s-90); }
.mr-100 { margin-right: var(--s-100); }

/* RIGHT NEGATIVE (-mr-N) */
.-mr-1  { margin-right: calc(var(--s-1) * -1); }
.-mr-2  { margin-right: calc(var(--s-2) * -1); }
.-mr-3  { margin-right: calc(var(--s-3) * -1); }
.-mr-4  { margin-right: calc(var(--s-4) * -1); }
.-mr-5  { margin-right: calc(var(--s-5) * -1); }
.-mr-6  { margin-right: calc(var(--s-6) * -1); }
.-mr-7  { margin-right: calc(var(--s-7) * -1); }
.-mr-8  { margin-right: calc(var(--s-8) * -1); }
.-mr-9  { margin-right: calc(var(--s-9) * -1); }
.-mr-10 { margin-right: calc(var(--s-10) * -1); }
.-mr-11 { margin-right: calc(var(--s-11) * -1); }
.-mr-12 { margin-right: calc(var(--s-12) * -1); }
.-mr-13 { margin-right: calc(var(--s-13) * -1); }
.-mr-14 { margin-right: calc(var(--s-14) * -1); }
.-mr-15 { margin-right: calc(var(--s-15) * -1); }
.-mr-16 { margin-right: calc(var(--s-16) * -1); }
.-mr-17 { margin-right: calc(var(--s-17) * -1); }
.-mr-18 { margin-right: calc(var(--s-18) * -1); }
.-mr-19 { margin-right: calc(var(--s-19) * -1); }
.-mr-20 { margin-right: calc(var(--s-20) * -1); }
.-mr-21 { margin-right: calc(var(--s-21) * -1); }
.-mr-22 { margin-right: calc(var(--s-22) * -1); }
.-mr-23 { margin-right: calc(var(--s-23) * -1); }
.-mr-24 { margin-right: calc(var(--s-24) * -1); }
.-mr-25 { margin-right: calc(var(--s-25) * -1); }
.-mr-26 { margin-right: calc(var(--s-26) * -1); }
.-mr-27 { margin-right: calc(var(--s-27) * -1); }
.-mr-28 { margin-right: calc(var(--s-28) * -1); }
.-mr-29 { margin-right: calc(var(--s-29) * -1); }
.-mr-30 { margin-right: calc(var(--s-30) * -1); }
.-mr-50 { margin-right: calc(var(--s-50) * -1); }

/* RIGHT PERCENT (mr-Np) */
.mr-1p { margin-right: 1%; }
.mr-2p { margin-right: 2%; }
.mr-3p { margin-right: 3%; }
.mr-4p { margin-right: 4%; }
.mr-5p { margin-right: 5%; }
.mr-6p { margin-right: 6%; }
.mr-7p { margin-right: 7%; }
.mr-8p { margin-right: 8%; }
.mr-9p { margin-right: 9%; }
.mr-10p { margin-right: 10%; }
.mr-11p { margin-right: 11%; }
.mr-12p { margin-right: 12%; }
.mr-13p { margin-right: 13%; }
.mr-14p { margin-right: 14%; }
.mr-15p { margin-right: 15%; }
.mr-16p { margin-right: 16%; }
.mr-17p { margin-right: 17%; }
.mr-18p { margin-right: 18%; }
.mr-19p { margin-right: 19%; }
.mr-20p { margin-right: 20%; }
.mr-21p { margin-right: 21%; }
.mr-22p { margin-right: 22%; }
.mr-23p { margin-right: 23%; }
.mr-24p { margin-right: 24%; }
.mr-25p { margin-right: 25%; }
.mr-26p { margin-right: 26%; }
.mr-27p { margin-right: 27%; }
.mr-28p { margin-right: 28%; }
.mr-29p { margin-right: 29%; }
.mr-30p { margin-right: 30%; }
.mr-31p { margin-right: 31%; }
.mr-32p { margin-right: 32%; }
.mr-33p { margin-right: 33%; }
.mr-34p { margin-right: 34%; }
.mr-35p { margin-right: 35%; }
.mr-36p { margin-right: 36%; }
.mr-37p { margin-right: 37%; }
.mr-38p { margin-right: 38%; }
.mr-39p { margin-right: 39%; }
.mr-40p { margin-right: 40%; }
.mr-41p { margin-right: 41%; }
.mr-42p { margin-right: 42%; }
.mr-43p { margin-right: 43%; }
.mr-44p { margin-right: 44%; }
.mr-45p { margin-right: 45%; }
.mr-46p { margin-right: 46%; }
.mr-47p { margin-right: 47%; }
.mr-48p { margin-right: 48%; }
.mr-49p { margin-right: 49%; }
.mr-50p { margin-right: 50%; }

/* BOTTOM (mb-N) */
.mb-0 { margin-bottom: var(--s-0); }
.mb-1 { margin-bottom: var(--s-1); }
.mb-2 { margin-bottom: var(--s-2); }
.mb-3 { margin-bottom: var(--s-3); }
.mb-4 { margin-bottom: var(--s-4); }
.mb-5 { margin-bottom: var(--s-5); }
.mb-6 { margin-bottom: var(--s-6); }
.mb-7 { margin-bottom: var(--s-7); }
.mb-8 { margin-bottom: var(--s-8); }
.mb-9 { margin-bottom: var(--s-9); }
.mb-10 { margin-bottom: var(--s-10); }
.mb-11 { margin-bottom: var(--s-11); }
.mb-12 { margin-bottom: var(--s-12); }
.mb-13 { margin-bottom: var(--s-13); }
.mb-14 { margin-bottom: var(--s-14); }
.mb-15 { margin-bottom: var(--s-15); }
.mb-16 { margin-bottom: var(--s-16); }
.mb-17 { margin-bottom: var(--s-17); }
.mb-18 { margin-bottom: var(--s-18); }
.mb-19 { margin-bottom: var(--s-19); }
.mb-20 { margin-bottom: var(--s-20); }
.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); }
.mb-33 { margin-bottom: var(--s-33); }
.mb-34 { margin-bottom: var(--s-34); }
.mb-35 { margin-bottom: var(--s-35); }
.mb-36 { margin-bottom: var(--s-36); }
.mb-37 { margin-bottom: var(--s-37); }
.mb-38 { margin-bottom: var(--s-38); }
.mb-39 { margin-bottom: var(--s-39); }
.mb-40 { margin-bottom: var(--s-40); }
.mb-41 { margin-bottom: var(--s-41); }
.mb-42 { margin-bottom: var(--s-42); }
.mb-43 { margin-bottom: var(--s-43); }
.mb-44 { margin-bottom: var(--s-44); }
.mb-45 { margin-bottom: var(--s-45); }
.mb-46 { margin-bottom: var(--s-46); }
.mb-47 { margin-bottom: var(--s-47); }
.mb-48 { margin-bottom: var(--s-48); }
.mb-49 { margin-bottom: var(--s-49); }
.mb-50 { margin-bottom: var(--s-50); }
.mb-60 { margin-bottom: var(--s-60); }
.mb-70 { margin-bottom: var(--s-70); }
.mb-71 { margin-bottom: var(--s-71); }
.mb-80{ margin-bottom: var(--s-80); }
.mb-88{ margin-bottom: var(--s-88); }
.mb-90{ margin-bottom: var(--s-90); }
.mb-100{ margin-bottom: var(--s-100); }
.mb-110{ margin-bottom: var(--s-110); }
.mb-120{ margin-bottom: var(--s-120); }
.mb-144{ margin-bottom: var(--s-144); }
.mb-150{ margin-bottom: var(--s-150); }
.mb-200{ margin-bottom: var(--s-200); }

/* BOTTOM NEGATIVE (-mb-N) */
.-mb-1  { margin-bottom: calc(var(--s-1)  * -1); }
.-mb-2  { margin-bottom: calc(var(--s-2)  * -1); }
.-mb-3  { margin-bottom: calc(var(--s-3)  * -1); }
.-mb-4  { margin-bottom: calc(var(--s-4)  * -1); }
.-mb-5  { margin-bottom: calc(var(--s-5)  * -1); }
.-mb-6  { margin-bottom: calc(var(--s-6)  * -1); }
.-mb-7  { margin-bottom: calc(var(--s-7)  * -1); }
.-mb-8  { margin-bottom: calc(var(--s-8)  * -1); }
.-mb-9  { margin-bottom: calc(var(--s-9)  * -1); }
.-mb-10 { margin-bottom: calc(var(--s-10) * -1); }
.-mb-11 { margin-bottom: calc(var(--s-11) * -1); }
.-mb-12 { margin-bottom: calc(var(--s-12) * -1); }
.-mb-13 { margin-bottom: calc(var(--s-13) * -1); }
.-mb-14 { margin-bottom: calc(var(--s-14) * -1); }
.-mb-15 { margin-bottom: calc(var(--s-15) * -1); }
.-mb-16 { margin-bottom: calc(var(--s-16) * -1); }
.-mb-17 { margin-bottom: calc(var(--s-17) * -1); }
.-mb-18 { margin-bottom: calc(var(--s-18) * -1); }
.-mb-19 { margin-bottom: calc(var(--s-19) * -1); }
.-mb-20 { margin-bottom: calc(var(--s-20) * -1); }
.-mb-21 { margin-bottom: calc(var(--s-21) * -1); }
.-mb-22 { margin-bottom: calc(var(--s-22) * -1); }
.-mb-23 { margin-bottom: calc(var(--s-23) * -1); }
.-mb-24 { margin-bottom: calc(var(--s-24) * -1); }
.-mb-25 { margin-bottom: calc(var(--s-25) * -1); }
.-mb-26 { margin-bottom: calc(var(--s-26) * -1); }
.-mb-27 { margin-bottom: calc(var(--s-27) * -1); }
.-mb-28 { margin-bottom: calc(var(--s-28) * -1); }
.-mb-29 { margin-bottom: calc(var(--s-29) * -1); }
.-mb-30 { margin-bottom: calc(var(--s-30) * -1); }
.-mb-31 { margin-bottom: calc(var(--s-31) * -1); }
.-mb-32 { margin-bottom: calc(var(--s-32) * -1); }
.-mb-33 { margin-bottom: calc(var(--s-33) * -1); }
.-mb-34 { margin-bottom: calc(var(--s-34) * -1); }
.-mb-35 { margin-bottom: calc(var(--s-35) * -1); }
.-mb-36 { margin-bottom: calc(var(--s-36) * -1); }
.-mb-37 { margin-bottom: calc(var(--s-37) * -1); }
.-mb-38 { margin-bottom: calc(var(--s-38) * -1); }
.-mb-39 { margin-bottom: calc(var(--s-39) * -1); }
.-mb-40 { margin-bottom: calc(var(--s-40) * -1); }
.-mb-41 { margin-bottom: calc(var(--s-41) * -1); }
.-mb-42 { margin-bottom: calc(var(--s-42) * -1); }
.-mb-43 { margin-bottom: calc(var(--s-43) * -1); }
.-mb-44 { margin-bottom: calc(var(--s-44) * -1); }
.-mb-45 { margin-bottom: calc(var(--s-45) * -1); }
.-mb-46 { margin-bottom: calc(var(--s-46) * -1); }
.-mb-47 { margin-bottom: calc(var(--s-47) * -1); }
.-mb-48 { margin-bottom: calc(var(--s-48) * -1); }
.-mb-49 { margin-bottom: calc(var(--s-49) * -1); }
.-mb-50 { margin-bottom: calc(var(--s-50) * -1); }


@media (min-width: 1024px) {
.lg--mb-0 { margin-bottom: 0; }
.lg--mb-5 { margin-bottom: calc(var(--s-5) * -1); }
.lg--mb-20 { margin-bottom: calc(var(--s-20) * -1); }
}


/* LEFT (ml-N) */
.ml-0 { margin-left: var(--s-0); }
.ml-1 { margin-left: var(--s-1); }
.ml-2 { margin-left: var(--s-2); }
.ml-3 { margin-left: var(--s-3); }
.ml-4 { margin-left: var(--s-4); }
.ml-5 { margin-left: var(--s-5); }
.ml-6 { margin-left: var(--s-6); }
.ml-7 { margin-left: var(--s-7); }
.ml-8 { margin-left: var(--s-8); }
.ml-9 { margin-left: var(--s-9); }
.ml-10 { margin-left: var(--s-10); }
.ml-11 { margin-left: var(--s-11); }
.ml-12 { margin-left: var(--s-12); }
.ml-13 { margin-left: var(--s-13); }
.ml-14 { margin-left: var(--s-14); }
.ml-15 { margin-left: var(--s-15); }
.ml-16 { margin-left: var(--s-16); }
.ml-17 { margin-left: var(--s-17); }
.ml-18 { margin-left: var(--s-18); }
.ml-19 { margin-left: var(--s-19); }
.ml-20 { margin-left: var(--s-20); }
.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); }
.ml-33 { margin-left: var(--s-33); }
.ml-34 { margin-left: var(--s-34); }
.ml-35 { margin-left: var(--s-35); }
.ml-36 { margin-left: var(--s-36); }
.ml-37 { margin-left: var(--s-37); }
.ml-38 { margin-left: var(--s-38); }
.ml-39 { margin-left: var(--s-39); }
.ml-40 { margin-left: var(--s-40); }
.ml-41 { margin-left: var(--s-41); }
.ml-42 { margin-left: var(--s-42); }
.ml-43 { margin-left: var(--s-43); }
.ml-44 { margin-left: var(--s-44); }
.ml-45 { margin-left: var(--s-45); }
.ml-46 { margin-left: var(--s-46); }
.ml-47 { margin-left: var(--s-47); }
.ml-48 { margin-left: var(--s-48); }
.ml-49 { margin-left: var(--s-49); }
.ml-50 { margin-left: var(--s-50); }

.-ml-50 {   margin-left: calc(var(--s-50) * -1); }
.-ml-200 {   margin-left: calc(var(--s-200) * -1); }


@media (min-width: 1024px) {

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

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

}

/* X-axis (mx-N) */
.mx-0 { margin-left: var(--s-0); margin-right: var(--s-0); }
.mx-1 { margin-left: var(--s-1); margin-right: var(--s-1); }
.mx-2 { margin-left: var(--s-2); margin-right: var(--s-2); }
.mx-3 { margin-left: var(--s-3); margin-right: var(--s-3); }
.mx-4 { margin-left: var(--s-4); margin-right: var(--s-4); }
.mx-5 { margin-left: var(--s-5); margin-right: var(--s-5); }
.mx-6 { margin-left: var(--s-6); margin-right: var(--s-6); }
.mx-7 { margin-left: var(--s-7); margin-right: var(--s-7); }
.mx-8 { margin-left: var(--s-8); margin-right: var(--s-8); }
.mx-9 { margin-left: var(--s-9); margin-right: var(--s-9); }
.mx-10 { margin-left: var(--s-10); margin-right: var(--s-10); }
.mx-11 { margin-left: var(--s-11); margin-right: var(--s-11); }
.mx-12 { margin-left: var(--s-12); margin-right: var(--s-12); }
.mx-13 { margin-left: var(--s-13); margin-right: var(--s-13); }
.mx-14 { margin-left: var(--s-14); margin-right: var(--s-14); }
.mx-15 { margin-left: var(--s-15); margin-right: var(--s-15); }
.mx-16 { margin-left: var(--s-16); margin-right: var(--s-16); }
.mx-17 { margin-left: var(--s-17); margin-right: var(--s-17); }
.mx-18 { margin-left: var(--s-18); margin-right: var(--s-18); }
.mx-19 { margin-left: var(--s-19); margin-right: var(--s-19); }
.mx-20 { margin-left: var(--s-20); margin-right: var(--s-20); }
.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); }
.mx-33 { margin-left: var(--s-33); margin-right: var(--s-33); }
.mx-34 { margin-left: var(--s-34); margin-right: var(--s-34); }
.mx-35 { margin-left: var(--s-35); margin-right: var(--s-35); }
.mx-36 { margin-left: var(--s-36); margin-right: var(--s-36); }
.mx-37 { margin-left: var(--s-37); margin-right: var(--s-37); }
.mx-38 { margin-left: var(--s-38); margin-right: var(--s-38); }
.mx-39 { margin-left: var(--s-39); margin-right: var(--s-39); }
.mx-40 { margin-left: var(--s-40); margin-right: var(--s-40); }
.mx-41 { margin-left: var(--s-41); margin-right: var(--s-41); }
.mx-42 { margin-left: var(--s-42); margin-right: var(--s-42); }
.mx-43 { margin-left: var(--s-43); margin-right: var(--s-43); }
.mx-44 { margin-left: var(--s-44); margin-right: var(--s-44); }
.mx-45 { margin-left: var(--s-45); margin-right: var(--s-45); }
.mx-46 { margin-left: var(--s-46); margin-right: var(--s-46); }
.mx-47 { margin-left: var(--s-47); margin-right: var(--s-47); }
.mx-48 { margin-left: var(--s-48); margin-right: var(--s-48); }
.mx-49 { margin-left: var(--s-49); margin-right: var(--s-49); }
.mx-50 { margin-left: var(--s-50); margin-right: var(--s-50); }

/* Y-axis (my-N) */
.my-0 { margin-top: var(--s-0); margin-bottom: var(--s-0); }
.my-1 { margin-top: var(--s-1); margin-bottom: var(--s-1); }
.my-2 { margin-top: var(--s-2); margin-bottom: var(--s-2); }
.my-3 { margin-top: var(--s-3); margin-bottom: var(--s-3); }
.my-4 { margin-top: var(--s-4); margin-bottom: var(--s-4); }
.my-5 { margin-top: var(--s-5); margin-bottom: var(--s-5); }
.my-6 { margin-top: var(--s-6); margin-bottom: var(--s-6); }
.my-7 { margin-top: var(--s-7); margin-bottom: var(--s-7); }
.my-8 { margin-top: var(--s-8); margin-bottom: var(--s-8); }
.my-9 { margin-top: var(--s-9); margin-bottom: var(--s-9); }
.my-10 { margin-top: var(--s-10); margin-bottom: var(--s-10); }
.my-11 { margin-top: var(--s-11); margin-bottom: var(--s-11); }
.my-12 { margin-top: var(--s-12); margin-bottom: var(--s-12); }
.my-13 { margin-top: var(--s-13); margin-bottom: var(--s-13); }
.my-14 { margin-top: var(--s-14); margin-bottom: var(--s-14); }
.my-15 { margin-top: var(--s-15); margin-bottom: var(--s-15); }
.my-16 { margin-top: var(--s-16); margin-bottom: var(--s-16); }
.my-17 { margin-top: var(--s-17); margin-bottom: var(--s-17); }
.my-18 { margin-top: var(--s-18); margin-bottom: var(--s-18); }
.my-19 { margin-top: var(--s-19); margin-bottom: var(--s-19); }
.my-20 { margin-top: var(--s-20); margin-bottom: var(--s-20); }
.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); }
.my-33 { margin-top: var(--s-33); margin-bottom: var(--s-33); }
.my-34 { margin-top: var(--s-34); margin-bottom: var(--s-34); }
.my-35 { margin-top: var(--s-35); margin-bottom: var(--s-35); }
.my-36 { margin-top: var(--s-36); margin-bottom: var(--s-36); }
.my-37 { margin-top: var(--s-37); margin-bottom: var(--s-37); }
.my-38 { margin-top: var(--s-38); margin-bottom: var(--s-38); }
.my-39 { margin-top: var(--s-39); margin-bottom: var(--s-39); }
.my-40 { margin-top: var(--s-40); margin-bottom: var(--s-40); }
.my-41 { margin-top: var(--s-41); margin-bottom: var(--s-41); }
.my-42 { margin-top: var(--s-42); margin-bottom: var(--s-42); }
.my-43 { margin-top: var(--s-43); margin-bottom: var(--s-43); }
.my-44 { margin-top: var(--s-44); margin-bottom: var(--s-44); }
.my-45 { margin-top: var(--s-45); margin-bottom: var(--s-45); }
.my-46 { margin-top: var(--s-46); margin-bottom: var(--s-46); }
.my-47 { margin-top: var(--s-47); margin-bottom: var(--s-47); }
.my-48 { margin-top: var(--s-48); margin-bottom: var(--s-48); }
.my-49 { margin-top: var(--s-49); margin-bottom: var(--s-49); }
.my-50 { margin-top: var(--s-50); margin-bottom: var(--s-50); }


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

.ml-auto {
    margin-left: auto;
}

.mr-auto {
    margin-right: auto;
}

/* =========================================================
   PADDING (p, pt, pr, pb, pl, px, py)
   ========================================================= */

/* ALL (p-N) */
.p-0 { padding: var(--s-0); }
.p-1 { padding: var(--s-1); }
.p-2 { padding: var(--s-2); }
.p-3 { padding: var(--s-3); }
.p-4 { padding: var(--s-4); }
.p-5 { padding: var(--s-5); }
.p-6 { padding: var(--s-6); }
.p-7 { padding: var(--s-7); }
.p-8 { padding: var(--s-8); }
.p-9 { padding: var(--s-9); }
.p-10 { padding: var(--s-10); }
.p-11 { padding: var(--s-11); }
.p-12 { padding: var(--s-12); }
.p-13 { padding: var(--s-13); }
.p-14 { padding: var(--s-14); }
.p-15 { padding: var(--s-15); }
.p-16 { padding: var(--s-16); }
.p-17 { padding: var(--s-17); }
.p-18 { padding: var(--s-18); }
.p-19 { padding: var(--s-19); }
.p-20 { padding: var(--s-20); }
.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); }
.p-33 { padding: var(--s-33); }
.p-34 { padding: var(--s-34); }
.p-35 { padding: var(--s-35); }
.p-36 { padding: var(--s-36); }
.p-37 { padding: var(--s-37); }
.p-38 { padding: var(--s-38); }
.p-39 { padding: var(--s-39); }
.p-40 { padding: var(--s-40); }
.p-41 { padding: var(--s-41); }
.p-42 { padding: var(--s-42); }
.p-43 { padding: var(--s-43); }
.p-44 { padding: var(--s-44); }
.p-45 { padding: var(--s-45); }
.p-46 { padding: var(--s-46); }
.p-47 { padding: var(--s-47); }
.p-48 { padding: var(--s-48); }
.p-49 { padding: var(--s-49); }
.p-50 { padding: var(--s-50); }

/* TOP (pt-N) */
.pt-0 { padding-top: var(--s-0); }
.pt-1 { padding-top: var(--s-1); }
.pt-2 { padding-top: var(--s-2); }
.pt-3 { padding-top: var(--s-3); }
.pt-4 { padding-top: var(--s-4); }
.pt-5 { padding-top: var(--s-5); }
.pt-6 { padding-top: var(--s-6); }
.pt-7 { padding-top: var(--s-7); }
.pt-8 { padding-top: var(--s-8); }
.pt-9 { padding-top: var(--s-9); }
.pt-10 { padding-top: var(--s-10); }
.pt-11 { padding-top: var(--s-11); }
.pt-12 { padding-top: var(--s-12); }
.pt-13 { padding-top: var(--s-13); }
.pt-14 { padding-top: var(--s-14); }
.pt-15 { padding-top: var(--s-15); }
.pt-16 { padding-top: var(--s-16); }
.pt-17 { padding-top: var(--s-17); }
.pt-18 { padding-top: var(--s-18); }
.pt-19 { padding-top: var(--s-19); }
.pt-20 { padding-top: var(--s-20); }
.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); }
.pt-33 { padding-top: var(--s-33); }
.pt-34 { padding-top: var(--s-34); }
.pt-35 { padding-top: var(--s-35); }
.pt-36 { padding-top: var(--s-36); }
.pt-37 { padding-top: var(--s-37); }
.pt-38 { padding-top: var(--s-38); }
.pt-39 { padding-top: var(--s-39); }
.pt-40 { padding-top: var(--s-40); }
.pt-41 { padding-top: var(--s-41); }
.pt-42 { padding-top: var(--s-42); }
.pt-43 { padding-top: var(--s-43); }
.pt-44 { padding-top: var(--s-44); }
.pt-45 { padding-top: var(--s-45); }
.pt-46 { padding-top: var(--s-46); }
.pt-47 { padding-top: var(--s-47); }
.pt-48 { padding-top: var(--s-48); }
.pt-49 { padding-top: var(--s-49); }
.pt-50 { padding-top: var(--s-50); }
.pt-58 { padding-top: var(--s-58); }
.pt-60 { padding-top: var(--s-60); }
.pt-70 { padding-top: var(--s-70); }
.pt-72 { padding-top: var(--s-72); }
.pt-80 { padding-top: var(--s-80); }
.pt-100 { padding-top: var(--s-100); }
.pt-120 { padding-top: var(--s-120); }
.pt-130 { padding-top: var(--s-130); }
.pt-140 { padding-top: var(--s-140); }
.pt-150 { padding-top: var(--s-150); }
.pt-157 { padding-top: var(--s-157); }
.pt-200 { padding-top: var(--s-200); }
.pt-240 { padding-top: var(--s-240); }
.pt-260 { padding-top: var(--s-260); }
.pt-300 { padding-top: var(--s-300); }
.pt-500 { padding-top: var(--s-500); }
.pt-550 { padding-top: var(--s-550); }
.pt-570 { padding-top: var(--s-570); }
.pt-650 { padding-top: var(--s-680); }
.pt-680 { padding-top: var(--s-680); }


/* RIGHT (pr-N) */
.pr-0 { padding-right: var(--s-0); }
.pr-1 { padding-right: var(--s-1); }
.pr-2 { padding-right: var(--s-2); }
.pr-3 { padding-right: var(--s-3); }
.pr-4 { padding-right: var(--s-4); }
.pr-5 { padding-right: var(--s-5); }
.pr-6 { padding-right: var(--s-6); }
.pr-7 { padding-right: var(--s-7); }
.pr-8 { padding-right: var(--s-8); }
.pr-9 { padding-right: var(--s-9); }
.pr-10 { padding-right: var(--s-10); }
.pr-11 { padding-right: var(--s-11); }
.pr-12 { padding-right: var(--s-12); }
.pr-13 { padding-right: var(--s-13); }
.pr-14 { padding-right: var(--s-14); }
.pr-15 { padding-right: var(--s-15); }
.pr-16 { padding-right: var(--s-16); }
.pr-17 { padding-right: var(--s-17); }
.pr-18 { padding-right: var(--s-18); }
.pr-19 { padding-right: var(--s-19); }
.pr-20 { padding-right: var(--s-20); }
.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); }
.pr-33 { padding-right: var(--s-33); }
.pr-34 { padding-right: var(--s-34); }
.pr-35 { padding-right: var(--s-35); }
.pr-36 { padding-right: var(--s-36); }
.pr-37 { padding-right: var(--s-37); }
.pr-38 { padding-right: var(--s-38); }
.pr-39 { padding-right: var(--s-39); }
.pr-40 { padding-right: var(--s-40); }
.pr-41 { padding-right: var(--s-41); }
.pr-42 { padding-right: var(--s-42); }
.pr-43 { padding-right: var(--s-43); }
.pr-44 { padding-right: var(--s-44); }
.pr-45 { padding-right: var(--s-45); }
.pr-46 { padding-right: var(--s-46); }
.pr-47 { padding-right: var(--s-47); }
.pr-48 { padding-right: var(--s-48); }
.pr-49 { padding-right: var(--s-49); }
.pr-50 { padding-right: var(--s-50); }

/* BOTTOM (pb-N) */
.pb-0 { padding-bottom: var(--s-0); }
.pb-0 { padding-bottom: var(--s-0); }
.pb-1 { padding-bottom: var(--s-1); }
.pb-2 { padding-bottom: var(--s-2); }
.pb-3 { padding-bottom: var(--s-3); }
.pb-4 { padding-bottom: var(--s-4); }
.pb-5 { padding-bottom: var(--s-5); }
.pb-6 { padding-bottom: var(--s-6); }
.pb-7 { padding-bottom: var(--s-7); }
.pb-8 { padding-bottom: var(--s-8); }
.pb-9 { padding-bottom: var(--s-9); }
.pb-10 { padding-bottom: var(--s-10); }
.pb-11 { padding-bottom: var(--s-11); }
.pb-12 { padding-bottom: var(--s-12); }
.pb-13 { padding-bottom: var(--s-13); }
.pb-14 { padding-bottom: var(--s-14); }
.pb-15 { padding-bottom: var(--s-15); }
.pb-16 { padding-bottom: var(--s-16); }
.pb-17 { padding-bottom: var(--s-17); }
.pb-18 { padding-bottom: var(--s-18); }
.pb-19 { padding-bottom: var(--s-19); }
.pb-20 { padding-bottom: var(--s-20); }
.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); }
.pb-33 { padding-bottom: var(--s-33); }
.pb-34 { padding-bottom: var(--s-34); }
.pb-35 { padding-bottom: var(--s-35); }
.pb-36 { padding-bottom: var(--s-36); }
.pb-37 { padding-bottom: var(--s-37); }
.pb-38 { padding-bottom: var(--s-38); }
.pb-39 { padding-bottom: var(--s-39); }
.pb-40 { padding-bottom: var(--s-40); }
.pb-41 { padding-bottom: var(--s-41); }
.pb-42 { padding-bottom: var(--s-42); }
.pb-43 { padding-bottom: var(--s-43); }
.pb-44 { padding-bottom: var(--s-44); }
.pb-45 { padding-bottom: var(--s-45); }
.pb-46 { padding-bottom: var(--s-46); }
.pb-47 { padding-bottom: var(--s-47); }
.pb-48 { padding-bottom: var(--s-48); }
.pb-49 { padding-bottom: var(--s-49); }
.pb-50 { padding-bottom: var(--s-50); }
.pb-60 { padding-bottom: var(--s-60); }
.pb-70 { padding-bottom: var(--s-70); }
.pb-80 { padding-bottom: var(--s-80); }
.pb-100 { padding-bottom: var(--s-100); }
.pb-130 { padding-bottom: var(--s-130); }
.pb-150 { padding-bottom: var(--s-150); }
.pb-160 { padding-bottom: var(--s-160); }
.pb-170 { padding-bottom: var(--s-170); }
.pb-180 { padding-bottom: var(--s-180); }
.pb-190 { padding-bottom: var(--s-190); }
.pb-200 { padding-bottom: var(--s-200); }
.pb-230 { padding-bottom: var(--s-230); }
.pb-240 { padding-bottom: var(--s-240); }
.pb-300 { padding-bottom: var(--s-300); }
.pb-400 { padding-bottom: var(--s-400); }

/* NOTE: CSS does not support negative padding; map -pb-* to negative margin-bottom */
.-pb-0 { margin-bottom: 0; }
.-pb-1  { margin-bottom: calc(var(--s-1)  * -1); }
.-pb-2  { margin-bottom: calc(var(--s-2)  * -1); }
.-pb-3  { margin-bottom: calc(var(--s-3)  * -1); }
.-pb-4  { margin-bottom: calc(var(--s-4)  * -1); }
.-pb-5  { margin-bottom: calc(var(--s-5)  * -1); }
.-pb-6  { margin-bottom: calc(var(--s-6)  * -1); }
.-pb-7  { margin-bottom: calc(var(--s-7)  * -1); }
.-pb-8  { margin-bottom: calc(var(--s-8)  * -1); }
.-pb-9  { margin-bottom: calc(var(--s-9)  * -1); }
.-pb-10 { margin-bottom: calc(var(--s-10) * -1); }
.-pb-11 { margin-bottom: calc(var(--s-11) * -1); }
.-pb-12 { margin-bottom: calc(var(--s-12) * -1); }
.-pb-13 { margin-bottom: calc(var(--s-13) * -1); }
.-pb-14 { margin-bottom: calc(var(--s-14) * -1); }
.-pb-15 { margin-bottom: calc(var(--s-15) * -1); }
.-pb-16 { margin-bottom: calc(var(--s-16) * -1); }
.-pb-17 { margin-bottom: calc(var(--s-17) * -1); }
.-pb-18 { margin-bottom: calc(var(--s-18) * -1); }
.-pb-19 { margin-bottom: calc(var(--s-19) * -1); }
.-pb-20 { margin-bottom: calc(var(--s-20) * -1); }
.-pb-21 { margin-bottom: calc(var(--s-21) * -1); }
.-pb-22 { margin-bottom: calc(var(--s-22) * -1); }
.-pb-23 { margin-bottom: calc(var(--s-23) * -1); }
.-pb-24 { margin-bottom: calc(var(--s-24) * -1); }
.-pb-25 { margin-bottom: calc(var(--s-25) * -1); }
.-pb-26 { margin-bottom: calc(var(--s-26) * -1); }
.-pb-27 { margin-bottom: calc(var(--s-27) * -1); }
.-pb-28 { margin-bottom: calc(var(--s-28) * -1); }
.-pb-29 { margin-bottom: calc(var(--s-29) * -1); }
.-pb-30 { margin-bottom: calc(var(--s-30) * -1); }
.-pb-31 { margin-bottom: calc(var(--s-31) * -1); }
.-pb-32 { margin-bottom: calc(var(--s-32) * -1); }
.-pb-33 { margin-bottom: calc(var(--s-33) * -1); }
.-pb-34 { margin-bottom: calc(var(--s-34) * -1); }
.-pb-35 { margin-bottom: calc(var(--s-35) * -1); }
.-pb-36 { margin-bottom: calc(var(--s-36) * -1); }
.-pb-37 { margin-bottom: calc(var(--s-37) * -1); }
.-pb-38 { margin-bottom: calc(var(--s-38) * -1); }
.-pb-39 { margin-bottom: calc(var(--s-39) * -1); }
.-pb-40 { margin-bottom: calc(var(--s-40) * -1); }
.-pb-41 { margin-bottom: calc(var(--s-41) * -1); }
.-pb-42 { margin-bottom: calc(var(--s-42) * -1); }
.-pb-43 { margin-bottom: calc(var(--s-43) * -1); }
.-pb-44 { margin-bottom: calc(var(--s-44) * -1); }
.-pb-45 { margin-bottom: calc(var(--s-45) * -1); }
.-pb-46 { margin-bottom: calc(var(--s-46) * -1); }
.-pb-47 { margin-bottom: calc(var(--s-47) * -1); }
.-pb-48 { margin-bottom: calc(var(--s-48) * -1); }
.-pb-49 { margin-bottom: calc(var(--s-49) * -1); }
.-pb-50 { margin-bottom: calc(var(--s-50) * -1); }

/* LEFT (pl-N) */
.pl-0 { padding-left: var(--s-0); }
.pl-1 { padding-left: var(--s-1); }
.pl-2 { padding-left: var(--s-2); }
.pl-3 { padding-left: var(--s-3); }
.pl-4 { padding-left: var(--s-4); }
.pl-5 { padding-left: var(--s-5); }
.pl-6 { padding-left: var(--s-6); }
.pl-7 { padding-left: var(--s-7); }
.pl-8 { padding-left: var(--s-8); }
.pl-9 { padding-left: var(--s-9); }
.pl-10 { padding-left: var(--s-10); }
.pl-11 { padding-left: var(--s-11); }
.pl-12 { padding-left: var(--s-12); }
.pl-13 { padding-left: var(--s-13); }
.pl-14 { padding-left: var(--s-14); }
.pl-15 { padding-left: var(--s-15); }
.pl-16 { padding-left: var(--s-16); }
.pl-17 { padding-left: var(--s-17); }
.pl-18 { padding-left: var(--s-18); }
.pl-19 { padding-left: var(--s-19); }
.pl-20 { padding-left: var(--s-20); }
.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); }
.pl-33 { padding-left: var(--s-33); }
.pl-34 { padding-left: var(--s-34); }
.pl-35 { padding-left: var(--s-35); }
.pl-36 { padding-left: var(--s-36); }
.pl-37 { padding-left: var(--s-37); }
.pl-38 { padding-left: var(--s-38); }
.pl-39 { padding-left: var(--s-39); }
.pl-40 { padding-left: var(--s-40); }
.pl-41 { padding-left: var(--s-41); }
.pl-42 { padding-left: var(--s-42); }
.pl-43 { padding-left: var(--s-43); }
.pl-44 { padding-left: var(--s-44); }
.pl-45 { padding-left: var(--s-45); }
.pl-46 { padding-left: var(--s-46); }
.pl-47 { padding-left: var(--s-47); }
.pl-48 { padding-left: var(--s-48); }
.pl-49 { padding-left: var(--s-49); }
.pl-50 { padding-left: var(--s-50); }
.pl-64 { padding-left: var(--s-64); }
.pl-230 { padding-left: var(--s-230); }



/* X-axis (px-N) */
.px-0 { padding-left: var(--s-0); padding-right: var(--s-0); }
.px-1 { padding-left: var(--s-1); padding-right: var(--s-1); }
.px-2 { padding-left: var(--s-2); padding-right: var(--s-2); }
.px-3 { padding-left: var(--s-3); padding-right: var(--s-3); }
.px-4 { padding-left: var(--s-4); padding-right: var(--s-4); }
.px-5 { padding-left: var(--s-5); padding-right: var(--s-5); }
.px-6 { padding-left: var(--s-6); padding-right: var(--s-6); }
.px-7 { padding-left: var(--s-7); padding-right: var(--s-7); }
.px-8 { padding-left: var(--s-8); padding-right: var(--s-8); }
.px-9 { padding-left: var(--s-9); padding-right: var(--s-9); }
.px-10 { padding-left: var(--s-10); padding-right: var(--s-10); }
.px-11 { padding-left: var(--s-11); padding-right: var(--s-11); }
.px-12 { padding-left: var(--s-12); padding-right: var(--s-12); }
.px-13 { padding-left: var(--s-13); padding-right: var(--s-13); }
.px-14 { padding-left: var(--s-14); padding-right: var(--s-14); }
.px-15 { padding-left: var(--s-15); padding-right: var(--s-15); }
.px-16 { padding-left: var(--s-16); padding-right: var(--s-16); }
.px-17 { padding-left: var(--s-17); padding-right: var(--s-17); }
.px-18 { padding-left: var(--s-18); padding-right: var(--s-18); }
.px-19 { padding-left: var(--s-19); padding-right: var(--s-19); }
.px-20 { padding-left: var(--s-20); padding-right: var(--s-20); }
.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); }
.px-33 { padding-left: var(--s-33); padding-right: var(--s-33); }
.px-34 { padding-left: var(--s-34); padding-right: var(--s-34); }
.px-35 { padding-left: var(--s-35); padding-right: var(--s-35); }
.px-36 { padding-left: var(--s-36); padding-right: var(--s-36); }
.px-37 { padding-left: var(--s-37); padding-right: var(--s-37); }
.px-38 { padding-left: var(--s-38); padding-right: var(--s-38); }
.px-39 { padding-left: var(--s-39); padding-right: var(--s-39); }
.px-40 { padding-left: var(--s-40); padding-right: var(--s-40); }
.px-41 { padding-left: var(--s-41); padding-right: var(--s-41); }
.px-42 { padding-left: var(--s-42); padding-right: var(--s-42); }
.px-43 { padding-left: var(--s-43); padding-right: var(--s-43); }
.px-44 { padding-left: var(--s-44); padding-right: var(--s-44); }
.px-45 { padding-left: var(--s-45); padding-right: var(--s-45); }
.px-46 { padding-left: var(--s-46); padding-right: var(--s-46); }
.px-47 { padding-left: var(--s-47); padding-right: var(--s-47); }
.px-48 { padding-left: var(--s-48); padding-right: var(--s-48); }
.px-49 { padding-left: var(--s-49); padding-right: var(--s-49); }
.px-50 { padding-left: var(--s-50); padding-right: var(--s-50); }
.px-70 { padding-left: var(--s-70); padding-right: var(--s-70); }
.px-100 { padding-left: var(--s-100); padding-right: var(--s-100); }
.px-110 { padding-left: var(--s-110); padding-right: var(--s-110); }
.px-120 { padding-left: var(--s-120); padding-right: var(--s-120); }
.px-130 { padding-left: var(--s-130); padding-right: var(--s-130); }
.px-140 { padding-left: var(--s-140); padding-right: var(--s-140); }

/* Y-axis (py-N) */
.py-0 { padding-top: var(--s-0); padding-bottom: var(--s-0); }
.py-1 { padding-top: var(--s-1); padding-bottom: var(--s-1); }
.py-2 { padding-top: var(--s-2); padding-bottom: var(--s-2); }
.py-3 { padding-top: var(--s-3); padding-bottom: var(--s-3); }
.py-4 { padding-top: var(--s-4); padding-bottom: var(--s-4); }
.py-5 { padding-top: var(--s-5); padding-bottom: var(--s-5); }
.py-6 { padding-top: var(--s-6); padding-bottom: var(--s-6); }
.py-7 { padding-top: var(--s-7); padding-bottom: var(--s-7); }
.py-8 { padding-top: var(--s-8); padding-bottom: var(--s-8); }
.py-9 { padding-top: var(--s-9); padding-bottom: var(--s-9); }
.py-10 { padding-top: var(--s-10); padding-bottom: var(--s-10); }
.py-11 { padding-top: var(--s-11); padding-bottom: var(--s-11); }
.py-12 { padding-top: var(--s-12); padding-bottom: var(--s-12); }
.py-13 { padding-top: var(--s-13); padding-bottom: var(--s-13); }
.py-14 { padding-top: var(--s-14); padding-bottom: var(--s-14); }
.py-15 { padding-top: var(--s-15); padding-bottom: var(--s-15); }
.py-16 { padding-top: var(--s-16); padding-bottom: var(--s-16); }
.py-17 { padding-top: var(--s-17); padding-bottom: var(--s-17); }
.py-18 { padding-top: var(--s-18); padding-bottom: var(--s-18); }
.py-19 { padding-top: var(--s-19); padding-bottom: var(--s-19); }
.py-20 { padding-top: var(--s-20); padding-bottom: var(--s-20); }
.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); }
.py-33 { padding-top: var(--s-33); padding-bottom: var(--s-33); }
.py-34 { padding-top: var(--s-34); padding-bottom: var(--s-34); }
.py-35 { padding-top: var(--s-35); padding-bottom: var(--s-35); }
.py-36 { padding-top: var(--s-36); padding-bottom: var(--s-36); }
.py-37 { padding-top: var(--s-37); padding-bottom: var(--s-37); }
.py-38 { padding-top: var(--s-38); padding-bottom: var(--s-38); }
.py-39 { padding-top: var(--s-39); padding-bottom: var(--s-39); }
.py-40 { padding-top: var(--s-40); padding-bottom: var(--s-40); }
.py-41 { padding-top: var(--s-41); padding-bottom: var(--s-41); }
.py-42 { padding-top: var(--s-42); padding-bottom: var(--s-42); }
.py-43 { padding-top: var(--s-43); padding-bottom: var(--s-43); }
.py-44 { padding-top: var(--s-44); padding-bottom: var(--s-44); }
.py-45 { padding-top: var(--s-45); padding-bottom: var(--s-45); }
.py-46 { padding-top: var(--s-46); padding-bottom: var(--s-46); }
.py-47 { padding-top: var(--s-47); padding-bottom: var(--s-47); }
.py-48 { padding-top: var(--s-48); padding-bottom: var(--s-48); }
.py-49 { padding-top: var(--s-49); padding-bottom: var(--s-49); }
.py-50 { padding-top: var(--s-50); padding-bottom: var(--s-50); }

@media (min-width: 768px) {
    .md-mt-0 { margin-top: var(--s-0); }
    .md-mb-70 { margin-bottom: var(--s-70); }
    .md-my-auto {
        margin-top: auto;
        margin-bottom: auto;
    }
    .md-px-24 {
        padding-left: var(--s-24);
        padding-right: var(--s-24);
    }
}

/* =========================================================
   Spacing System LG (>=1024px)
   Tailwind-style responsive utilities
   ========================================================= */

@media (min-width: 1024px) {

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

    .lg-m-0  { margin: var(--s-0); }
    .lg-m-10 { margin: var(--s-10); }
    .lg-m-20 { margin: var(--s-20); }
    .lg-m-30 { margin: var(--s-30); }
    .lg-m-40 { margin: var(--s-40); }
    .lg-m-50 { margin: var(--s-50); }

    .lg-mt-0 { margin-top:0; }
    .lg-mt-5 { margin-top: var(--s-5); }
    .lg-mt-10 { margin-top: var(--s-10); }
    .lg-mt-20 { margin-top: var(--s-20); }
    .lg-mt-23 { margin-top: var(--s-23); }
    .lg-mt-30 { margin-top: var(--s-30); }
    .lg-mt-40 { margin-top: var(--s-40); }
    .lg-mt-50 { margin-top: var(--s-50); }
    .lg-mt-60 { margin-top: var(--s-60); }
    .lg-mt-80 { margin-top: var(--s-80); }
    .lg-mt-84 { margin-top: var(--s-84); }
    .lg-mt-90 { margin-top: var(--s-90); }
    .lg-mt-100 { margin-top: var(--s-100); }
    .lg-mt-110 { margin-top: var(--s-110); }
    .lg-mt-120 { margin-top: var(--s-120); }
    .lg-mt-130 { margin-top: var(--s-130); }
    .lg-mt-150 { margin-top: var(--s-150); }
    .lg-mt-200 { margin-top: var(--s-200); }
    .lg-mt-auto { margin-top: auto; }


    .lg-mt-84p { margin-top: 84px; }

    .lg-mt-33vw { margin-top: 3.3vw; }
    .lg-mt-100vw { margin-top: 10vw; }



    .lg-mb-0 { margin-bottom: var(--s-0); }
    .lg-mb-10 { margin-bottom: var(--s-10); }
    .lg-mb-20 { margin-bottom: var(--s-20); }
    .lg-mb-21 { margin-bottom: var(--s-21); }
    .lg-mb-25 { margin-bottom: var(--s-25); }
    .lg-mb-30 { margin-bottom: var(--s-30); }
    .lg-mb-34 { margin-bottom: var(--s-34); }
    .lg-mb-35 { margin-bottom: var(--s-35); }
    .lg-mb-40 { margin-bottom: var(--s-40); }
    .lg-mb-50 { margin-bottom: var(--s-50); }
    .lg-mb-70 { margin-bottom: var(--s-70); }
    .lg-mb-80 { margin-bottom: var(--s-80); }
    .lg-mb-84 { margin-bottom: var(--s-84); }
    .lg-mb-100 { margin-bottom: var(--s-100); }
    .lg-mb-130 { margin-bottom: var(--s-130); }
    .lg-mb-150 { margin-bottom: var(--s-150); }

    .lg-ml-auto  { margin-left: auto; }
    .lg-ml-0  { margin-left: var(--s-0); }
    .lg-ml-38 { margin-left: var(--s-38); }
    .lg-ml-45 { margin-left: var(--s-45); }

    .lg--ml-25 {   margin-left: calc(var(--s-25) * -1); }
    .lg--ml-30 {   margin-left: calc(var(--s-30) * -1); }
    .lg--ml-38 {   margin-left: calc(var(--s-38) * -1); }
    .lg--ml-40 {   margin-left: calc(var(--s-40) * -1); }
    .lg--ml-50 {   margin-left: calc(var(--s-50) * -1); }
    .lg--ml-100 {   margin-left: calc(var(--s-100) * -1); }
    .lg--ml-150 {   margin-left: calc(var(--s-150) * -1); }
    .lg--ml-180 {   margin-left: calc(var(--s-180) * -1); }
    .lg--ml-200 {   margin-left: calc(var(--s-200) * -1); }

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

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

    .lg-mr-1p { margin-right: 1%; }
    .lg-mr-2p { margin-right: 2%; }
    .lg-mr-3p { margin-right: 3%; }
    .lg-mr-4p { margin-right: 4%; }
    .lg-mr-5p { margin-right: 5%; }
    .lg-mr-6p { margin-right: 6%; }
    .lg-mr-7p { margin-right: 7%; }
    .lg-mr-8p { margin-right: 8%; }
    .lg-mr-9p { margin-right: 9%; }
    .lg-mr-10p { margin-right: 10%; }
    .lg-mr-11p { margin-right: 11%; }
    .lg-mr-12p { margin-right: 12%; }
    .lg-mr-13p { margin-right: 13%; }
    .lg-mr-14p { margin-right: 14%; }
    .lg-mr-15p { margin-right: 15%; }
    .lg-mr-16p { margin-right: 16%; }
    .lg-mr-17p { margin-right: 17%; }
    .lg-mr-18p { margin-right: 18%; }
    .lg-mr-19p { margin-right: 19%; }
    .lg-mr-20p { margin-right: 20%; }
    .lg-mr-21p { margin-right: 21%; }
    .lg-mr-22p { margin-right: 22%; }
    .lg-mr-23p { margin-right: 23%; }
    .lg-mr-24p { margin-right: 24%; }
    .lg-mr-25p { margin-right: 25%; }
    .lg-mr-26p { margin-right: 26%; }
    .lg-mr-27p { margin-right: 27%; }
    .lg-mr-28p { margin-right: 28%; }
    .lg-mr-29p { margin-right: 29%; }
    .lg-mr-30p { margin-right: 30%; }
    .lg-mr-31p { margin-right: 31%; }
    .lg-mr-32p { margin-right: 32%; }
    .lg-mr-33p { margin-right: 33%; }
    .lg-mr-34p { margin-right: 34%; }
    .lg-mr-35p { margin-right: 35%; }
    .lg-mr-36p { margin-right: 36%; }
    .lg-mr-37p { margin-right: 37%; }
    .lg-mr-38p { margin-right: 38%; }
    .lg-mr-39p { margin-right: 39%; }
    .lg-mr-40p { margin-right: 40%; }
    .lg-mr-41p { margin-right: 41%; }
    .lg-mr-42p { margin-right: 42%; }
    .lg-mr-43p { margin-right: 43%; }
    .lg-mr-44p { margin-right: 44%; }
    .lg-mr-45p { margin-right: 45%; }
    .lg-mr-46p { margin-right: 46%; }
    .lg-mr-47p { margin-right: 47%; }
    .lg-mr-48p { margin-right: 48%; }
    .lg-mr-49p { margin-right: 49%; }
    .lg-mr-50p { margin-right: 50%; }


    .lg--mr-25 {   margin-right: calc(var(--s-25) * -1); }
    .lg--mr-30 {   margin-right: calc(var(--s-30) * -1); }
    .lg--mr-38 {   margin-right: calc(var(--s-38) * -1); }
    .lg--mr-40 {   margin-right: calc(var(--s-40) * -1); }
    .lg--mr-50 {   margin-right: calc(var(--s-50) * -1); }
    .lg--mr-100 {   margin-right: calc(var(--s-100) * -1); }



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

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

    .lg-p-10 { padding: var(--s-10); }
    .lg-p-20 { padding: var(--s-20); }
    .lg-p-30 { padding: var(--s-30); }
    .lg-p-40 { padding: var(--s-40); }
    .lg-p-50 { padding: var(--s-50); }

    .lg-pt-0 { padding-top: 0; }
    .lg-pt-5 { padding-top: var(--s-5); }
    .lg-pt-10 { padding-top: var(--s-10); }
    .lg-pt-15 { padding-top: var(--s-15); }
    .lg-pt-20 { padding-top: var(--s-20); }
    .lg-pt-28 { padding-top: var(--s-28); }
    .lg-pt-30 { padding-top: var(--s-30); }
    .lg-pt-40 { padding-top: var(--s-40); }
    .lg-pt-50 { padding-top: var(--s-50); }
    .lg-pt-70 { padding-top: var(--s-70); }
    .lg-pt-77 { padding-top: var(--s-77); }
    .lg-pt-90 { padding-top: var(--s-90); }
    .lg-pt-100 { padding-top: var(--s-100); }
    .lg-pt-120 { padding-top: var(--s-120); }
    .lg-pt-130 { padding-top: var(--s-130); }
    .lg-pt-140 { padding-top: var(--s-140); }
    .lg-pt-150 { padding-top: var(--s-150); }
    .lg-pt-240 { padding-top: var(--s-240); }
    .lg-pt-300 { padding-top: var(--s-300); }
    .lg-pt-320 { padding-top: var(--s-320); }
    .lg-pt-350 { padding-top: var(--s-350); }
    .lg-pt-450 { padding-top: var(--s-450); }
    .lg-pt-500 { padding-top: var(--s-500); }

    .lg-pb-0 { padding-bottom: var(--s-0); }
    .lg-pb-5 { padding-bottom: var(--s-5); }
    .lg-pb-10 { padding-bottom: var(--s-10); }
    .lg-pb-20 { padding-bottom: var(--s-20); }
    .lg-pb-28 { padding-bottom: var(--s-28); }
    .lg-pb-30 { padding-bottom: var(--s-30); }
    .lg-pb-40 { padding-bottom: var(--s-40); }
    .lg-pb-50 { padding-bottom: var(--s-50); }
    .lg-pb-60 { padding-bottom: var(--s-60); }
    .lg-pb-80 { padding-bottom: var(--s-80); }
    .lg-pb-100 { padding-bottom: var(--s-100); }
    .lg-pb-150 { padding-bottom: var(--s-150); }
    .lg-pb-200 { padding-bottom: var(--s-200); }
    .lg-pb-220 { padding-bottom: var(--s-220); }
    .lg-pb-240 { padding-bottom: var(--s-240); }
    .lg-pb-300 { padding-bottom: var(--s-300); }
    .lg-pb-500 { padding-bottom: var(--s-500); }

    /* NOTE: CSS does not support negative padding; map lg--pb-* to negative margin-bottom */
    .lg--pb-1  { margin-bottom: calc(var(--s-1) * -1); }
    .lg--pb-2  { margin-bottom: calc(var(--s-2) * -1); }
    .lg--pb-3  { margin-bottom: calc(var(--s-3) * -1); }
    .lg--pb-4  { margin-bottom: calc(var(--s-4) * -1); }
    .lg--pb-5  { margin-bottom: calc(var(--s-5) * -1); }
    .lg--pb-6  { margin-bottom: calc(var(--s-6) * -1); }
    .lg--pb-7  { margin-bottom: calc(var(--s-7) * -1); }
    .lg--pb-8  { margin-bottom: calc(var(--s-8) * -1); }
    .lg--pb-9  { margin-bottom: calc(var(--s-9) * -1); }
    .lg--pb-10 { margin-bottom: calc(var(--s-10) * -1); }
    .lg--pb-11 { margin-bottom: calc(var(--s-11) * -1); }
    .lg--pb-12 { margin-bottom: calc(var(--s-12) * -1); }
    .lg--pb-13 { margin-bottom: calc(var(--s-13) * -1); }
    .lg--pb-14 { margin-bottom: calc(var(--s-14) * -1); }
    .lg--pb-15 { margin-bottom: calc(var(--s-15) * -1); }
    .lg--pb-16 { margin-bottom: calc(var(--s-16) * -1); }
    .lg--pb-17 { margin-bottom: calc(var(--s-17) * -1); }
    .lg--pb-18 { margin-bottom: calc(var(--s-18) * -1); }
    .lg--pb-19 { margin-bottom: calc(var(--s-19) * -1); }
    .lg--pb-20 { margin-bottom: calc(var(--s-20) * -1); }
    .lg--pb-21 { margin-bottom: calc(var(--s-21) * -1); }
    .lg--pb-22 { margin-bottom: calc(var(--s-22) * -1); }
    .lg--pb-23 { margin-bottom: calc(var(--s-23) * -1); }
    .lg--pb-24 { margin-bottom: calc(var(--s-24) * -1); }
    .lg--pb-25 { margin-bottom: calc(var(--s-25) * -1); }
    .lg--pb-26 { margin-bottom: calc(var(--s-26) * -1); }
    .lg--pb-27 { margin-bottom: calc(var(--s-27) * -1); }
    .lg--pb-28 { margin-bottom: calc(var(--s-28) * -1); }
    .lg--pb-29 { margin-bottom: calc(var(--s-29) * -1); }
    .lg--pb-30 { margin-bottom: calc(var(--s-30) * -1); }
    .lg--pb-31 { margin-bottom: calc(var(--s-31) * -1); }
    .lg--pb-32 { margin-bottom: calc(var(--s-32) * -1); }
    .lg--pb-33 { margin-bottom: calc(var(--s-33) * -1); }
    .lg--pb-34 { margin-bottom: calc(var(--s-34) * -1); }
    .lg--pb-35 { margin-bottom: calc(var(--s-35) * -1); }
    .lg--pb-36 { margin-bottom: calc(var(--s-36) * -1); }
    .lg--pb-37 { margin-bottom: calc(var(--s-37) * -1); }
    .lg--pb-38 { margin-bottom: calc(var(--s-38) * -1); }
    .lg--pb-39 { margin-bottom: calc(var(--s-39) * -1); }
    .lg--pb-40 { margin-bottom: calc(var(--s-40) * -1); }
    .lg--pb-41 { margin-bottom: calc(var(--s-41) * -1); }
    .lg--pb-42 { margin-bottom: calc(var(--s-42) * -1); }
    .lg--pb-43 { margin-bottom: calc(var(--s-43) * -1); }
    .lg--pb-44 { margin-bottom: calc(var(--s-44) * -1); }
    .lg--pb-45 { margin-bottom: calc(var(--s-45) * -1); }
    .lg--pb-46 { margin-bottom: calc(var(--s-46) * -1); }
    .lg--pb-47 { margin-bottom: calc(var(--s-47) * -1); }
    .lg--pb-48 { margin-bottom: calc(var(--s-48) * -1); }
    .lg--pb-49 { margin-bottom: calc(var(--s-49) * -1); }
    .lg--pb-50 { margin-bottom: calc(var(--s-50) * -1); }
    .lg--pb-51 { margin-bottom: calc(var(--s-51) * -1); }
    .lg--pb-52 { margin-bottom: calc(var(--s-52) * -1); }
    .lg--pb-60 { margin-bottom: calc(var(--s-60) * -1); }

    .lg-pl-0 { padding-left: var(--s-0); }
    .lg-pl-10 { padding-left: var(--s-10); }
    .lg-pl-20 { padding-left: var(--s-20); }
    .lg-pl-21 { padding-left: var(--s-21); }
    .lg-pl-31 { padding-left: var(--s-31); }
    .lg-pl-40 { padding-left: var(--s-40); }
    .lg-pl-50 { padding-left: var(--s-50); }


    .lg-pl-10p { padding-left: 10%; }
    .lg-pl-20p { padding-left: 20%; }
    .lg-pl-25p { padding-left: 25%; }
    .lg-pl-30p { padding-left: 30%; }



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

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

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

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

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

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

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

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

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



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

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

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

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

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

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

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

@media (min-width: 1600px) {
    .xl-px-135 {
        padding-left: 135px;
        padding-right: 135px;
    }
}