/* =========================================================
   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-58: 5.8rem;
    --s-60: 6.0rem;
    --s-64: 6.4rem;
    --s-70: 7rem;
    --s-80: 8.0rem;
    --s-84: 8.4rem;
    --s-90: 9.0rem;
    --s-100: 10rem;
    --s-120: 12rem;
    --s-130: 13rem;
    --s-140: 14rem;
    --s-144: 14.4rem;
    --s-157: 15.7rem;
    --s-200: 20rem;
    --s-230: 23rem;
    --s-260: 26rem;
    --s-300: 30rem;
}

/* 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 (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-100 { margin-top: var(--s-100); }
.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); }

/* 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-80{ margin-bottom: var(--s-80); }
.mb-90{ margin-bottom: var(--s-90); }
.mb-120{ margin-bottom: var(--s-120); }
.mb-144{ margin-bottom: var(--s-144); }

/* 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); }

/* 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-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-157 { padding-top: var(--s-157); }
.pt-200 { padding-top: var(--s-200); }
.pt-260 { padding-top: var(--s-260); }


/* 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-230 { padding-bottom: var(--s-230); }

/* 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); }



/* 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); }

/* 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); }


/* =========================================================
   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-5 { margin-top: var(--s-5); }
    .lg\:mt-10 { margin-top: var(--s-10); }
    .lg\:mt-20 { margin-top: var(--s-20); }
    .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-84 { margin-top: var(--s-84); }
    .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-30 { margin-bottom: var(--s-30); }
    .lg\:mb-34 { margin-bottom: var(--s-34); }
    .lg\:mb-40 { margin-bottom: var(--s-40); }
    .lg\:mb-50 { margin-bottom: var(--s-50); }
    .lg\:mb-80 { margin-bottom: var(--s-80); }
    .lg\:mb-100 { margin-bottom: var(--s-100); }

    .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\:mr-0 { margin-right: var(--s-0); }
    .lg\:mr-23 { margin-right: var(--s-23); }
    .lg\:mr-50 { margin-right: var(--s-50); }


    .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-5 { padding-top: var(--s-5); }
    .lg\:pt-20 { padding-top: var(--s-20); }
    .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-100 { padding-top: var(--s-100); }

    .lg\:pb-0 { padding-bottom: var(--s-0); }
    .lg\:pb-5 { padding-bottom: var(--s-5); }
    .lg\:pb-20 { padding-bottom: var(--s-20); }
    .lg\:pb-30 { padding-bottom: var(--s-30); }
    .lg\:pb-40 { padding-bottom: var(--s-40); }
    .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\:pl-0 { padding-left: var(--s-0); }
    .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-20 {
        padding-left: var(--s-20);
        padding-right: var(--s-20);
    }

    .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\:py-30 {
        padding-top: var(--s-30);
        padding-bottom: var(--s-30);
    }
}