/* ==========================================================================
   Utility CSS Classes
   Spacing (padding/margin) in 2px increments from 2–64px
   Flexbox layout utilities
   ========================================================================== */

/* --------------------------------------------------------------------------
   Spacing — Padding
   -------------------------------------------------------------------------- */

.p-0 { padding: 0; }
.p-2 { padding: 2px; }
.p-4 { padding: 4px; }
.p-6 { padding: 6px; }
.p-8 { padding: 8px; }
.p-10 { padding: 10px; }
.p-12 { padding: 12px; }
.p-14 { padding: 14px; }
.p-16 { padding: 16px; }
.p-18 { padding: 18px; }
.p-20 { padding: 20px; }
.p-22 { padding: 22px; }
.p-24 { padding: 24px; }
.p-26 { padding: 26px; }
.p-28 { padding: 28px; }
.p-30 { padding: 30px; }
.p-32 { padding: 32px; }
.p-34 { padding: 34px; }
.p-36 { padding: 36px; }
.p-38 { padding: 38px; }
.p-40 { padding: 40px; }
.p-42 { padding: 42px; }
.p-44 { padding: 44px; }
.p-46 { padding: 46px; }
.p-48 { padding: 48px; }
.p-50 { padding: 50px; }
.p-52 { padding: 52px; }
.p-54 { padding: 54px; }
.p-56 { padding: 56px; }
.p-58 { padding: 58px; }
.p-60 { padding: 60px; }
.p-62 { padding: 62px; }
.p-64 { padding: 64px; }

.px-2 { padding-left: 2px; padding-right: 2px; }
.px-4 { padding-left: 4px; padding-right: 4px; }
.px-6 { padding-left: 6px; padding-right: 6px; }
.px-8 { padding-left: 8px; padding-right: 8px; }
.px-10 { padding-left: 10px; padding-right: 10px; }
.px-12 { padding-left: 12px; padding-right: 12px; }
.px-14 { padding-left: 14px; padding-right: 14px; }
.px-16 { padding-left: 16px; padding-right: 16px; }
.px-18 { padding-left: 18px; padding-right: 18px; }
.px-20 { padding-left: 20px; padding-right: 20px; }
.px-22 { padding-left: 22px; padding-right: 22px; }
.px-24 { padding-left: 24px; padding-right: 24px; }
.px-26 { padding-left: 26px; padding-right: 26px; }
.px-28 { padding-left: 28px; padding-right: 28px; }
.px-30 { padding-left: 30px; padding-right: 30px; }
.px-32 { padding-left: 32px; padding-right: 32px; }
.px-34 { padding-left: 34px; padding-right: 34px; }
.px-36 { padding-left: 36px; padding-right: 36px; }
.px-38 { padding-left: 38px; padding-right: 38px; }
.px-40 { padding-left: 40px; padding-right: 40px; }
.px-42 { padding-left: 42px; padding-right: 42px; }
.px-44 { padding-left: 44px; padding-right: 44px; }
.px-46 { padding-left: 46px; padding-right: 46px; }
.px-48 { padding-left: 48px; padding-right: 48px; }
.px-50 { padding-left: 50px; padding-right: 50px; }
.px-52 { padding-left: 52px; padding-right: 52px; }
.px-54 { padding-left: 54px; padding-right: 54px; }
.px-56 { padding-left: 56px; padding-right: 56px; }
.px-58 { padding-left: 58px; padding-right: 58px; }
.px-60 { padding-left: 60px; padding-right: 60px; }
.px-62 { padding-left: 62px; padding-right: 62px; }
.px-64 { padding-left: 64px; padding-right: 64px; }

.py-2 { padding-top: 2px; padding-bottom: 2px; }
.py-4 { padding-top: 4px; padding-bottom: 4px; }
.py-6 { padding-top: 6px; padding-bottom: 6px; }
.py-8 { padding-top: 8px; padding-bottom: 8px; }
.py-10 { padding-top: 10px; padding-bottom: 10px; }
.py-12 { padding-top: 12px; padding-bottom: 12px; }
.py-14 { padding-top: 14px; padding-bottom: 14px; }
.py-16 { padding-top: 16px; padding-bottom: 16px; }
.py-18 { padding-top: 18px; padding-bottom: 18px; }
.py-20 { padding-top: 20px; padding-bottom: 20px; }
.py-22 { padding-top: 22px; padding-bottom: 22px; }
.py-24 { padding-top: 24px; padding-bottom: 24px; }
.py-26 { padding-top: 26px; padding-bottom: 26px; }
.py-28 { padding-top: 28px; padding-bottom: 28px; }
.py-30 { padding-top: 30px; padding-bottom: 30px; }
.py-32 { padding-top: 32px; padding-bottom: 32px; }
.py-34 { padding-top: 34px; padding-bottom: 34px; }
.py-36 { padding-top: 36px; padding-bottom: 36px; }
.py-38 { padding-top: 38px; padding-bottom: 38px; }
.py-40 { padding-top: 40px; padding-bottom: 40px; }
.py-42 { padding-top: 42px; padding-bottom: 42px; }
.py-44 { padding-top: 44px; padding-bottom: 44px; }
.py-46 { padding-top: 46px; padding-bottom: 46px; }
.py-48 { padding-top: 48px; padding-bottom: 48px; }
.py-50 { padding-top: 50px; padding-bottom: 50px; }
.py-52 { padding-top: 52px; padding-bottom: 52px; }
.py-54 { padding-top: 54px; padding-bottom: 54px; }
.py-56 { padding-top: 56px; padding-bottom: 56px; }
.py-58 { padding-top: 58px; padding-bottom: 58px; }
.py-60 { padding-top: 60px; padding-bottom: 60px; }
.py-62 { padding-top: 62px; padding-bottom: 62px; }
.py-64 { padding-top: 64px; padding-bottom: 64px; }

.pt-2 { padding-top: 2px; }
.pt-4 { padding-top: 4px; }
.pt-6 { padding-top: 6px; }
.pt-8 { padding-top: 8px; }
.pt-10 { padding-top: 10px; }
.pt-12 { padding-top: 12px; }
.pt-14 { padding-top: 14px; }
.pt-16 { padding-top: 16px; }
.pt-18 { padding-top: 18px; }
.pt-20 { padding-top: 20px; }
.pt-22 { padding-top: 22px; }
.pt-24 { padding-top: 24px; }
.pt-26 { padding-top: 26px; }
.pt-28 { padding-top: 28px; }
.pt-30 { padding-top: 30px; }
.pt-32 { padding-top: 32px; }
.pt-34 { padding-top: 34px; }
.pt-36 { padding-top: 36px; }
.pt-38 { padding-top: 38px; }
.pt-40 { padding-top: 40px; }
.pt-42 { padding-top: 42px; }
.pt-44 { padding-top: 44px; }
.pt-46 { padding-top: 46px; }
.pt-48 { padding-top: 48px; }
.pt-50 { padding-top: 50px; }
.pt-52 { padding-top: 52px; }
.pt-54 { padding-top: 54px; }
.pt-56 { padding-top: 56px; }
.pt-58 { padding-top: 58px; }
.pt-60 { padding-top: 60px; }
.pt-62 { padding-top: 62px; }
.pt-64 { padding-top: 64px; }

.pr-2 { padding-right: 2px; }
.pr-4 { padding-right: 4px; }
.pr-6 { padding-right: 6px; }
.pr-8 { padding-right: 8px; }
.pr-10 { padding-right: 10px; }
.pr-12 { padding-right: 12px; }
.pr-14 { padding-right: 14px; }
.pr-16 { padding-right: 16px; }
.pr-18 { padding-right: 18px; }
.pr-20 { padding-right: 20px; }
.pr-22 { padding-right: 22px; }
.pr-24 { padding-right: 24px; }
.pr-26 { padding-right: 26px; }
.pr-28 { padding-right: 28px; }
.pr-30 { padding-right: 30px; }
.pr-32 { padding-right: 32px; }
.pr-34 { padding-right: 34px; }
.pr-36 { padding-right: 36px; }
.pr-38 { padding-right: 38px; }
.pr-40 { padding-right: 40px; }
.pr-42 { padding-right: 42px; }
.pr-44 { padding-right: 44px; }
.pr-46 { padding-right: 46px; }
.pr-48 { padding-right: 48px; }
.pr-50 { padding-right: 50px; }
.pr-52 { padding-right: 52px; }
.pr-54 { padding-right: 54px; }
.pr-56 { padding-right: 56px; }
.pr-58 { padding-right: 58px; }
.pr-60 { padding-right: 60px; }
.pr-62 { padding-right: 62px; }
.pr-64 { padding-right: 64px; }

.pb-2 { padding-bottom: 2px; }
.pb-4 { padding-bottom: 4px; }
.pb-6 { padding-bottom: 6px; }
.pb-8 { padding-bottom: 8px; }
.pb-10 { padding-bottom: 10px; }
.pb-12 { padding-bottom: 12px; }
.pb-14 { padding-bottom: 14px; }
.pb-16 { padding-bottom: 16px; }
.pb-18 { padding-bottom: 18px; }
.pb-20 { padding-bottom: 20px; }
.pb-22 { padding-bottom: 22px; }
.pb-24 { padding-bottom: 24px; }
.pb-26 { padding-bottom: 26px; }
.pb-28 { padding-bottom: 28px; }
.pb-30 { padding-bottom: 30px; }
.pb-32 { padding-bottom: 32px; }
.pb-34 { padding-bottom: 34px; }
.pb-36 { padding-bottom: 36px; }
.pb-38 { padding-bottom: 38px; }
.pb-40 { padding-bottom: 40px; }
.pb-42 { padding-bottom: 42px; }
.pb-44 { padding-bottom: 44px; }
.pb-46 { padding-bottom: 46px; }
.pb-48 { padding-bottom: 48px; }
.pb-50 { padding-bottom: 50px; }
.pb-52 { padding-bottom: 52px; }
.pb-54 { padding-bottom: 54px; }
.pb-56 { padding-bottom: 56px; }
.pb-58 { padding-bottom: 58px; }
.pb-60 { padding-bottom: 60px; }
.pb-62 { padding-bottom: 62px; }
.pb-64 { padding-bottom: 64px; }

.pl-2 { padding-left: 2px; }
.pl-4 { padding-left: 4px; }
.pl-6 { padding-left: 6px; }
.pl-8 { padding-left: 8px; }
.pl-10 { padding-left: 10px; }
.pl-12 { padding-left: 12px; }
.pl-14 { padding-left: 14px; }
.pl-16 { padding-left: 16px; }
.pl-18 { padding-left: 18px; }
.pl-20 { padding-left: 20px; }
.pl-22 { padding-left: 22px; }
.pl-24 { padding-left: 24px; }
.pl-26 { padding-left: 26px; }
.pl-28 { padding-left: 28px; }
.pl-30 { padding-left: 30px; }
.pl-32 { padding-left: 32px; }
.pl-34 { padding-left: 34px; }
.pl-36 { padding-left: 36px; }
.pl-38 { padding-left: 38px; }
.pl-40 { padding-left: 40px; }
.pl-42 { padding-left: 42px; }
.pl-44 { padding-left: 44px; }
.pl-46 { padding-left: 46px; }
.pl-48 { padding-left: 48px; }
.pl-50 { padding-left: 50px; }
.pl-52 { padding-left: 52px; }
.pl-54 { padding-left: 54px; }
.pl-56 { padding-left: 56px; }
.pl-58 { padding-left: 58px; }
.pl-60 { padding-left: 60px; }
.pl-62 { padding-left: 62px; }
.pl-64 { padding-left: 64px; }

/* --------------------------------------------------------------------------
   Spacing — Margin
   -------------------------------------------------------------------------- */

.m-0 { margin: 0; }
.m-2 { margin: 2px; }
.m-4 { margin: 4px; }
.m-6 { margin: 6px; }
.m-8 { margin: 8px; }
.m-10 { margin: 10px; }
.m-12 { margin: 12px; }
.m-14 { margin: 14px; }
.m-16 { margin: 16px; }
.m-18 { margin: 18px; }
.m-20 { margin: 20px; }
.m-22 { margin: 22px; }
.m-24 { margin: 24px; }
.m-26 { margin: 26px; }
.m-28 { margin: 28px; }
.m-30 { margin: 30px; }
.m-32 { margin: 32px; }
.m-34 { margin: 34px; }
.m-36 { margin: 36px; }
.m-38 { margin: 38px; }
.m-40 { margin: 40px; }
.m-42 { margin: 42px; }
.m-44 { margin: 44px; }
.m-46 { margin: 46px; }
.m-48 { margin: 48px; }
.m-50 { margin: 50px; }
.m-52 { margin: 52px; }
.m-54 { margin: 54px; }
.m-56 { margin: 56px; }
.m-58 { margin: 58px; }
.m-60 { margin: 60px; }
.m-62 { margin: 62px; }
.m-64 { margin: 64px; }

.mx-2 { margin-left: 2px; margin-right: 2px; }
.mx-4 { margin-left: 4px; margin-right: 4px; }
.mx-6 { margin-left: 6px; margin-right: 6px; }
.mx-8 { margin-left: 8px; margin-right: 8px; }
.mx-10 { margin-left: 10px; margin-right: 10px; }
.mx-12 { margin-left: 12px; margin-right: 12px; }
.mx-14 { margin-left: 14px; margin-right: 14px; }
.mx-16 { margin-left: 16px; margin-right: 16px; }
.mx-18 { margin-left: 18px; margin-right: 18px; }
.mx-20 { margin-left: 20px; margin-right: 20px; }
.mx-22 { margin-left: 22px; margin-right: 22px; }
.mx-24 { margin-left: 24px; margin-right: 24px; }
.mx-26 { margin-left: 26px; margin-right: 26px; }
.mx-28 { margin-left: 28px; margin-right: 28px; }
.mx-30 { margin-left: 30px; margin-right: 30px; }
.mx-32 { margin-left: 32px; margin-right: 32px; }
.mx-34 { margin-left: 34px; margin-right: 34px; }
.mx-36 { margin-left: 36px; margin-right: 36px; }
.mx-38 { margin-left: 38px; margin-right: 38px; }
.mx-40 { margin-left: 40px; margin-right: 40px; }
.mx-42 { margin-left: 42px; margin-right: 42px; }
.mx-44 { margin-left: 44px; margin-right: 44px; }
.mx-46 { margin-left: 46px; margin-right: 46px; }
.mx-48 { margin-left: 48px; margin-right: 48px; }
.mx-50 { margin-left: 50px; margin-right: 50px; }
.mx-52 { margin-left: 52px; margin-right: 52px; }
.mx-54 { margin-left: 54px; margin-right: 54px; }
.mx-56 { margin-left: 56px; margin-right: 56px; }
.mx-58 { margin-left: 58px; margin-right: 58px; }
.mx-60 { margin-left: 60px; margin-right: 60px; }
.mx-62 { margin-left: 62px; margin-right: 62px; }
.mx-64 { margin-left: 64px; margin-right: 64px; }

.my-2 { margin-top: 2px; margin-bottom: 2px; }
.my-4 { margin-top: 4px; margin-bottom: 4px; }
.my-6 { margin-top: 6px; margin-bottom: 6px; }
.my-8 { margin-top: 8px; margin-bottom: 8px; }
.my-10 { margin-top: 10px; margin-bottom: 10px; }
.my-12 { margin-top: 12px; margin-bottom: 12px; }
.my-14 { margin-top: 14px; margin-bottom: 14px; }
.my-16 { margin-top: 16px; margin-bottom: 16px; }
.my-18 { margin-top: 18px; margin-bottom: 18px; }
.my-20 { margin-top: 20px; margin-bottom: 20px; }
.my-22 { margin-top: 22px; margin-bottom: 22px; }
.my-24 { margin-top: 24px; margin-bottom: 24px; }
.my-26 { margin-top: 26px; margin-bottom: 26px; }
.my-28 { margin-top: 28px; margin-bottom: 28px; }
.my-30 { margin-top: 30px; margin-bottom: 30px; }
.my-32 { margin-top: 32px; margin-bottom: 32px; }
.my-34 { margin-top: 34px; margin-bottom: 34px; }
.my-36 { margin-top: 36px; margin-bottom: 36px; }
.my-38 { margin-top: 38px; margin-bottom: 38px; }
.my-40 { margin-top: 40px; margin-bottom: 40px; }
.my-42 { margin-top: 42px; margin-bottom: 42px; }
.my-44 { margin-top: 44px; margin-bottom: 44px; }
.my-46 { margin-top: 46px; margin-bottom: 46px; }
.my-48 { margin-top: 48px; margin-bottom: 48px; }
.my-50 { margin-top: 50px; margin-bottom: 50px; }
.my-52 { margin-top: 52px; margin-bottom: 52px; }
.my-54 { margin-top: 54px; margin-bottom: 54px; }
.my-56 { margin-top: 56px; margin-bottom: 56px; }
.my-58 { margin-top: 58px; margin-bottom: 58px; }
.my-60 { margin-top: 60px; margin-bottom: 60px; }
.my-62 { margin-top: 62px; margin-bottom: 62px; }
.my-64 { margin-top: 64px; margin-bottom: 64px; }

.mt-2 { margin-top: 2px; }
.mt-4 { margin-top: 4px; }
.mt-6 { margin-top: 6px; }
.mt-8 { margin-top: 8px; }
.mt-10 { margin-top: 10px; }
.mt-12 { margin-top: 12px; }
.mt-14 { margin-top: 14px; }
.mt-16 { margin-top: 16px; }
.mt-18 { margin-top: 18px; }
.mt-20 { margin-top: 20px; }
.mt-22 { margin-top: 22px; }
.mt-24 { margin-top: 24px; }
.mt-26 { margin-top: 26px; }
.mt-28 { margin-top: 28px; }
.mt-30 { margin-top: 30px; }
.mt-32 { margin-top: 32px; }
.mt-34 { margin-top: 34px; }
.mt-36 { margin-top: 36px; }
.mt-38 { margin-top: 38px; }
.mt-40 { margin-top: 40px; }
.mt-42 { margin-top: 42px; }
.mt-44 { margin-top: 44px; }
.mt-46 { margin-top: 46px; }
.mt-48 { margin-top: 48px; }
.mt-50 { margin-top: 50px; }
.mt-52 { margin-top: 52px; }
.mt-54 { margin-top: 54px; }
.mt-56 { margin-top: 56px; }
.mt-58 { margin-top: 58px; }
.mt-60 { margin-top: 60px; }
.mt-62 { margin-top: 62px; }
.mt-64 { margin-top: 64px; }
.mt-auto { margin-top: auto; }

.mr-2 { margin-right: 2px; }
.mr-4 { margin-right: 4px; }
.mr-6 { margin-right: 6px; }
.mr-8 { margin-right: 8px; }
.mr-10 { margin-right: 10px; }
.mr-12 { margin-right: 12px; }
.mr-14 { margin-right: 14px; }
.mr-16 { margin-right: 16px; }
.mr-18 { margin-right: 18px; }
.mr-20 { margin-right: 20px; }
.mr-22 { margin-right: 22px; }
.mr-24 { margin-right: 24px; }
.mr-26 { margin-right: 26px; }
.mr-28 { margin-right: 28px; }
.mr-30 { margin-right: 30px; }
.mr-32 { margin-right: 32px; }
.mr-34 { margin-right: 34px; }
.mr-36 { margin-right: 36px; }
.mr-38 { margin-right: 38px; }
.mr-40 { margin-right: 40px; }
.mr-42 { margin-right: 42px; }
.mr-44 { margin-right: 44px; }
.mr-46 { margin-right: 46px; }
.mr-48 { margin-right: 48px; }
.mr-50 { margin-right: 50px; }
.mr-52 { margin-right: 52px; }
.mr-54 { margin-right: 54px; }
.mr-56 { margin-right: 56px; }
.mr-58 { margin-right: 58px; }
.mr-60 { margin-right: 60px; }
.mr-62 { margin-right: 62px; }
.mr-64 { margin-right: 64px; }

.mb-2 { margin-bottom: 2px; }
.mb-4 { margin-bottom: 4px; }
.mb-6 { margin-bottom: 6px; }
.mb-8 { margin-bottom: 8px; }
.mb-10 { margin-bottom: 10px; }
.mb-12 { margin-bottom: 12px; }
.mb-14 { margin-bottom: 14px; }
.mb-16 { margin-bottom: 16px; }
.mb-18 { margin-bottom: 18px; }
.mb-20 { margin-bottom: 20px; }
.mb-22 { margin-bottom: 22px; }
.mb-24 { margin-bottom: 24px; }
.mb-26 { margin-bottom: 26px; }
.mb-28 { margin-bottom: 28px; }
.mb-30 { margin-bottom: 30px; }
.mb-32 { margin-bottom: 32px; }
.mb-34 { margin-bottom: 34px; }
.mb-36 { margin-bottom: 36px; }
.mb-38 { margin-bottom: 38px; }
.mb-40 { margin-bottom: 40px; }
.mb-42 { margin-bottom: 42px; }
.mb-44 { margin-bottom: 44px; }
.mb-46 { margin-bottom: 46px; }
.mb-48 { margin-bottom: 48px; }
.mb-50 { margin-bottom: 50px; }
.mb-52 { margin-bottom: 52px; }
.mb-54 { margin-bottom: 54px; }
.mb-56 { margin-bottom: 56px; }
.mb-58 { margin-bottom: 58px; }
.mb-60 { margin-bottom: 60px; }
.mb-62 { margin-bottom: 62px; }
.mb-64 { margin-bottom: 64px; }

.ml-2 { margin-left: 2px; }
.ml-4 { margin-left: 4px; }
.ml-6 { margin-left: 6px; }
.ml-8 { margin-left: 8px; }
.ml-10 { margin-left: 10px; }
.ml-12 { margin-left: 12px; }
.ml-14 { margin-left: 14px; }
.ml-16 { margin-left: 16px; }
.ml-18 { margin-left: 18px; }
.ml-20 { margin-left: 20px; }
.ml-22 { margin-left: 22px; }
.ml-24 { margin-left: 24px; }
.ml-26 { margin-left: 26px; }
.ml-28 { margin-left: 28px; }
.ml-30 { margin-left: 30px; }
.ml-32 { margin-left: 32px; }
.ml-34 { margin-left: 34px; }
.ml-36 { margin-left: 36px; }
.ml-38 { margin-left: 38px; }
.ml-40 { margin-left: 40px; }
.ml-42 { margin-left: 42px; }
.ml-44 { margin-left: 44px; }
.ml-46 { margin-left: 46px; }
.ml-48 { margin-left: 48px; }
.ml-50 { margin-left: 50px; }
.ml-52 { margin-left: 52px; }
.ml-54 { margin-left: 54px; }
.ml-56 { margin-left: 56px; }
.ml-58 { margin-left: 58px; }
.ml-60 { margin-left: 60px; }
.ml-62 { margin-left: 62px; }
.ml-64 { margin-left: 64px; }
.ml-auto { margin-left: auto; }

/* --------------------------------------------------------------------------
   Borders — border: Npx solid black (1–8px)
   -------------------------------------------------------------------------- */

.b-1 { border: 1px solid black; }
.b-2 { border: 2px solid black; }
.b-3 { border: 3px solid black; }
.b-4 { border: 4px solid black; }
.b-5 { border: 5px solid black; }
.b-6 { border: 6px solid black; }
.b-7 { border: 7px solid black; }
.b-8 { border: 8px solid black; }

.bt-1 { border-top: 1px solid black; }
.bt-2 { border-top: 2px solid black; }
.bt-3 { border-top: 3px solid black; }
.bt-4 { border-top: 4px solid black; }
.bt-5 { border-top: 5px solid black; }
.bt-6 { border-top: 6px solid black; }
.bt-7 { border-top: 7px solid black; }
.bt-8 { border-top: 8px solid black; }

.br-1 { border-right: 1px solid black; }
.br-2 { border-right: 2px solid black; }
.br-3 { border-right: 3px solid black; }
.br-4 { border-right: 4px solid black; }
.br-5 { border-right: 5px solid black; }
.br-6 { border-right: 6px solid black; }
.br-7 { border-right: 7px solid black; }
.br-8 { border-right: 8px solid black; }

.bb-1 { border-bottom: 1px solid black; }
.bb-2 { border-bottom: 2px solid black; }
.bb-3 { border-bottom: 3px solid black; }
.bb-4 { border-bottom: 4px solid black; }
.bb-5 { border-bottom: 5px solid black; }
.bb-6 { border-bottom: 6px solid black; }
.bb-7 { border-bottom: 7px solid black; }
.bb-8 { border-bottom: 8px solid black; }

.bl-1 { border-left: 1px solid black; }
.bl-2 { border-left: 2px solid black; }
.bl-3 { border-left: 3px solid black; }
.bl-4 { border-left: 4px solid black; }
.bl-5 { border-left: 5px solid black; }
.bl-6 { border-left: 6px solid black; }
.bl-7 { border-left: 7px solid black; }
.bl-8 { border-left: 8px solid black; }

/* --------------------------------------------------------------------------
   Shadow Borders — inset box-shadow that simulates a border without affecting layout
   Unlike regular borders, these don't change the element's size.
   Combine size (sbl-3) with color (sb-gray-300) — color is set via --sb-color CSS variable.
   -------------------------------------------------------------------------- */

/* Left */
.sbl-1 { box-shadow: inset 1px 0 0 0 var(--sb-color, black); }
.sbl-2 { box-shadow: inset 2px 0 0 0 var(--sb-color, black); }
.sbl-3 { box-shadow: inset 3px 0 0 0 var(--sb-color, black); }
.sbl-4 { box-shadow: inset 4px 0 0 0 var(--sb-color, black); }

/* Right */
.sbr-1 { box-shadow: inset -1px 0 0 0 var(--sb-color, black); }
.sbr-2 { box-shadow: inset -2px 0 0 0 var(--sb-color, black); }
.sbr-3 { box-shadow: inset -3px 0 0 0 var(--sb-color, black); }
.sbr-4 { box-shadow: inset -4px 0 0 0 var(--sb-color, black); }

/* Top */
.sbt-1 { box-shadow: inset 0 1px 0 0 var(--sb-color, black); }
.sbt-2 { box-shadow: inset 0 2px 0 0 var(--sb-color, black); }
.sbt-3 { box-shadow: inset 0 3px 0 0 var(--sb-color, black); }
.sbt-4 { box-shadow: inset 0 4px 0 0 var(--sb-color, black); }

/* Bottom */
.sbb-1 { box-shadow: inset 0 -1px 0 0 var(--sb-color, black); }
.sbb-2 { box-shadow: inset 0 -2px 0 0 var(--sb-color, black); }
.sbb-3 { box-shadow: inset 0 -3px 0 0 var(--sb-color, black); }
.sbb-4 { box-shadow: inset 0 -4px 0 0 var(--sb-color, black); }

/* All sides — inset ring on all four edges */
.sb-1 { box-shadow: inset 0 0 0 1px var(--sb-color, black); }
.sb-2 { box-shadow: inset 0 0 0 2px var(--sb-color, black); }
.sb-3 { box-shadow: inset 0 0 0 3px var(--sb-color, black); }
.sb-4 { box-shadow: inset 0 0 0 4px var(--sb-color, black); }

/* Hover variants (all-sides) */
.hover\:sb-1:hover { box-shadow: inset 0 0 0 1px var(--sb-color-hover, var(--sb-color, black)); }
.hover\:sb-2:hover { box-shadow: inset 0 0 0 2px var(--sb-color-hover, var(--sb-color, black)); }
.hover\:sb-3:hover { box-shadow: inset 0 0 0 3px var(--sb-color-hover, var(--sb-color, black)); }
.hover\:sb-4:hover { box-shadow: inset 0 0 0 4px var(--sb-color-hover, var(--sb-color, black)); }

/* Focus variants (all-sides) — apply on :focus and :focus-visible */
.focus\:sb-1:focus,
.focus\:sb-1:focus-visible { box-shadow: inset 0 0 0 1px var(--sb-color-focus, var(--sb-color, black)); }
.focus\:sb-2:focus,
.focus\:sb-2:focus-visible { box-shadow: inset 0 0 0 2px var(--sb-color-focus, var(--sb-color, black)); }
.focus\:sb-3:focus,
.focus\:sb-3:focus-visible { box-shadow: inset 0 0 0 3px var(--sb-color-focus, var(--sb-color, black)); }
.focus\:sb-4:focus,
.focus\:sb-4:focus-visible { box-shadow: inset 0 0 0 4px var(--sb-color-focus, var(--sb-color, black)); }

/* Shadow border colors — combine with size classes above (e.g. sbl-3 sb-gray-300) */
/* Black / White / Transparent */
.sb-black { --sb-color: var(--color-black); }
.sb-white { --sb-color: var(--color-white); }
.sb-transparent { --sb-color: transparent; }
/* Gray */
.sb-gray-50 { --sb-color: var(--color-gray-50); }
.sb-gray-100 { --sb-color: var(--color-gray-100); }
.sb-gray-300 { --sb-color: var(--color-gray-300); }
.sb-gray-400 { --sb-color: var(--color-gray-400); }
.sb-gray-600 { --sb-color: var(--color-gray-600); }
.sb-gray-800 { --sb-color: var(--color-gray-800); }
.sb-gray-900 { --sb-color: var(--color-gray-900); }
/* Success */
.sb-success-50 { --sb-color: var(--color-success-50); }
.sb-success-100 { --sb-color: var(--color-success-100); }
.sb-success-600 { --sb-color: var(--color-success-600); }
/* Error */
.sb-error-50 { --sb-color: var(--color-error-50); }
.sb-error-100 { --sb-color: var(--color-error-100); }
.sb-error-600 { --sb-color: var(--color-error-600); }
.sb-error-800 { --sb-color: var(--color-error-800); }
/* Info */
.sb-info-50 { --sb-color: var(--color-info-50); }
.sb-info-100 { --sb-color: var(--color-info-100); }
.sb-info-600 { --sb-color: var(--color-info-600); }
/* Warning */
.sb-warning-50 { --sb-color: var(--color-warning-50); }
.sb-warning-100 { --sb-color: var(--color-warning-100); }
.sb-warning-500 { --sb-color: var(--color-warning-500); }
.sb-warning-600 { --sb-color: var(--color-warning-600); }
.sb-warning-700 { --sb-color: var(--color-warning-700); }
/* Accent */
.sb-accent-500 { --sb-color: var(--color-accent-500); }
.sb-accent-600 { --sb-color: var(--color-accent-600); }
/* Purple */
.sb-purple-50 { --sb-color: var(--color-purple-50); }
.sb-purple-100 { --sb-color: var(--color-purple-100); }
.sb-purple-600 { --sb-color: var(--color-purple-600); }

/* --------------------------------------------------------------------------
   Flexbox
   -------------------------------------------------------------------------- */

.flex { display: flex; }
.inline-flex { display: inline-flex; }

.flex-col { flex-direction: column; }
.flex-row { flex-direction: row; }

.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }

.flex-1 { flex: 1 1 0%; }
.flex-2 { flex: 2; }
.flex-3 { flex: 3; }
.flex-4 { flex: 4; }
.flex-5 { flex: 5; }
.flex-6 { flex: 6; }
.flex-7 { flex: 7; }
.flex-8 { flex: 8; }
.flex-9 { flex: 9; }
.flex-10 { flex: 10; }
.flex-auto { flex: 1 1 auto; }
.flex-none { flex: none; }

.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.items-stretch { align-items: stretch; }
.items-baseline { align-items: baseline; }

.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.justify-evenly { justify-content: space-evenly; }

.self-start { align-self: flex-start; }
.self-center { align-self: center; }
.self-end { align-self: flex-end; }

.mx-auto { margin-left: auto; margin-right: auto; }
.self-stretch { align-self: stretch; }

/* --------------------------------------------------------------------------
   Text Alignment
   -------------------------------------------------------------------------- */

.text-left, .t-a-left { text-align: left; }
.text-center, .t-a-center { text-align: center; }
.text-right, .t-a-right { text-align: right; }

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

.gap-2 { gap: 2px; }
.gap-4 { gap: 4px; }
.gap-6 { gap: 6px; }
.gap-8 { gap: 8px; }
.gap-10 { gap: 10px; }
.gap-12 { gap: 12px; }
.gap-14 { gap: 14px; }
.gap-16 { gap: 16px; }
.gap-18 { gap: 18px; }
.gap-20 { gap: 20px; }
.gap-22 { gap: 22px; }
.gap-24 { gap: 24px; }
.gap-26 { gap: 26px; }
.gap-28 { gap: 28px; }
.gap-30 { gap: 30px; }
.gap-32 { gap: 32px; }
.gap-34 { gap: 34px; }
.gap-36 { gap: 36px; }
.gap-38 { gap: 38px; }
.gap-40 { gap: 40px; }
.gap-42 { gap: 42px; }
.gap-44 { gap: 44px; }
.gap-46 { gap: 46px; }
.gap-48 { gap: 48px; }
.gap-50 { gap: 50px; }
.gap-52 { gap: 52px; }
.gap-54 { gap: 54px; }
.gap-56 { gap: 56px; }
.gap-58 { gap: 58px; }
.gap-60 { gap: 60px; }
.gap-62 { gap: 62px; }
.gap-64 { gap: 64px; }

/* --------------------------------------------------------------------------
   Color Utilities — text color (clr-), background (bg-), border-color (b-)
   Generated from design system tokens in colors.css
   -------------------------------------------------------------------------- */

/* --- Black / White --- */
.clr-black { color: var(--color-black); }
.clr-white { color: var(--color-white); }
.bg-black { background-color: var(--color-black); }
.bg-white { background-color: var(--color-white); }
.b-black { border-color: var(--color-black); }
.b-white { border-color: var(--color-white); }
.b-transparent { border-color: transparent; }
.bt-black { border-top-color: var(--color-black); }
.br-black { border-right-color: var(--color-black); }
.bb-black { border-bottom-color: var(--color-black); }
.bl-black { border-left-color: var(--color-black); }
.bt-white { border-top-color: var(--color-white); }
.br-white { border-right-color: var(--color-white); }
.bb-white { border-bottom-color: var(--color-white); }
.bl-white { border-left-color: var(--color-white); }
.bt-transparent { border-top-color: transparent; }
.br-transparent { border-right-color: transparent; }
.bb-transparent { border-bottom-color: transparent; }
.bl-transparent { border-left-color: transparent; }

/* --- Gray --- */
.clr-gray-50 { color: var(--color-gray-50); }
.clr-gray-100 { color: var(--color-gray-100); }
.clr-gray-300 { color: var(--color-gray-300); }
.clr-gray-400 { color: var(--color-gray-400); }
.clr-gray-600 { color: var(--color-gray-600); }
.clr-gray-800 { color: var(--color-gray-800); }
.clr-gray-900 { color: var(--color-gray-900); }
.bg-gray-50 { background-color: var(--color-gray-50); }
.bg-gray-100 { background-color: var(--color-gray-100); }
.bg-gray-300 { background-color: var(--color-gray-300); }
.bg-gray-400 { background-color: var(--color-gray-400); }
.bg-gray-600 { background-color: var(--color-gray-600); }
.bg-gray-800 { background-color: var(--color-gray-800); }
.bg-gray-900 { background-color: var(--color-gray-900); }
.b-gray-50 { border-color: var(--color-gray-50); }
.b-gray-100 { border-color: var(--color-gray-100); }
.b-gray-300 { border-color: var(--color-gray-300); }
.b-gray-400 { border-color: var(--color-gray-400); }
.b-gray-600 { border-color: var(--color-gray-600); }
.b-gray-800 { border-color: var(--color-gray-800); }
.b-gray-900 { border-color: var(--color-gray-900); }
.bt-gray-50 { border-top-color: var(--color-gray-50); }
.bt-gray-100 { border-top-color: var(--color-gray-100); }
.bt-gray-300 { border-top-color: var(--color-gray-300); }
.bt-gray-400 { border-top-color: var(--color-gray-400); }
.bt-gray-600 { border-top-color: var(--color-gray-600); }
.bt-gray-800 { border-top-color: var(--color-gray-800); }
.bt-gray-900 { border-top-color: var(--color-gray-900); }
.br-gray-50 { border-right-color: var(--color-gray-50); }
.br-gray-100 { border-right-color: var(--color-gray-100); }
.br-gray-300 { border-right-color: var(--color-gray-300); }
.br-gray-400 { border-right-color: var(--color-gray-400); }
.br-gray-600 { border-right-color: var(--color-gray-600); }
.br-gray-800 { border-right-color: var(--color-gray-800); }
.br-gray-900 { border-right-color: var(--color-gray-900); }
.bb-gray-50 { border-bottom-color: var(--color-gray-50); }
.bb-gray-100 { border-bottom-color: var(--color-gray-100); }
.bb-gray-300 { border-bottom-color: var(--color-gray-300); }
.bb-gray-400 { border-bottom-color: var(--color-gray-400); }
.bb-gray-600 { border-bottom-color: var(--color-gray-600); }
.bb-gray-800 { border-bottom-color: var(--color-gray-800); }
.bb-gray-900 { border-bottom-color: var(--color-gray-900); }
.bl-gray-50 { border-left-color: var(--color-gray-50); }
.bl-gray-100 { border-left-color: var(--color-gray-100); }
.bl-gray-300 { border-left-color: var(--color-gray-300); }
.bl-gray-400 { border-left-color: var(--color-gray-400); }
.bl-gray-600 { border-left-color: var(--color-gray-600); }
.bl-gray-800 { border-left-color: var(--color-gray-800); }
.bl-gray-900 { border-left-color: var(--color-gray-900); }

/* --- Success --- */
.clr-success-50 { color: var(--color-success-50); }
.clr-success-100 { color: var(--color-success-100); }
.clr-success-600 { color: var(--color-success-600); }
.bg-success-50 { background-color: var(--color-success-50); }
.bg-success-100 { background-color: var(--color-success-100); }
.bg-success-600 { background-color: var(--color-success-600); }
.b-success-50 { border-color: var(--color-success-50); }
.b-success-100 { border-color: var(--color-success-100); }
.b-success-600 { border-color: var(--color-success-600); }
.bt-success-50 { border-top-color: var(--color-success-50); }
.bt-success-100 { border-top-color: var(--color-success-100); }
.bt-success-600 { border-top-color: var(--color-success-600); }
.br-success-50 { border-right-color: var(--color-success-50); }
.br-success-100 { border-right-color: var(--color-success-100); }
.br-success-600 { border-right-color: var(--color-success-600); }
.bb-success-50 { border-bottom-color: var(--color-success-50); }
.bb-success-100 { border-bottom-color: var(--color-success-100); }
.bb-success-600 { border-bottom-color: var(--color-success-600); }
.bl-success-50 { border-left-color: var(--color-success-50); }
.bl-success-100 { border-left-color: var(--color-success-100); }
.bl-success-600 { border-left-color: var(--color-success-600); }

/* --- Error --- */
.clr-error-50 { color: var(--color-error-50); }
.clr-error-100 { color: var(--color-error-100); }
.clr-error-600 { color: var(--color-error-600); }
.bg-error-50 { background-color: var(--color-error-50); }
.bg-error-100 { background-color: var(--color-error-100); }
.bg-error-600 { background-color: var(--color-error-600); }
.b-error-50 { border-color: var(--color-error-50); }
.b-error-100 { border-color: var(--color-error-100); }
.b-error-600 { border-color: var(--color-error-600); }
.bt-error-50 { border-top-color: var(--color-error-50); }
.bt-error-100 { border-top-color: var(--color-error-100); }
.bt-error-600 { border-top-color: var(--color-error-600); }
.br-error-50 { border-right-color: var(--color-error-50); }
.br-error-100 { border-right-color: var(--color-error-100); }
.br-error-600 { border-right-color: var(--color-error-600); }
.bb-error-50 { border-bottom-color: var(--color-error-50); }
.bb-error-100 { border-bottom-color: var(--color-error-100); }
.bb-error-600 { border-bottom-color: var(--color-error-600); }
.bl-error-50 { border-left-color: var(--color-error-50); }
.bl-error-100 { border-left-color: var(--color-error-100); }
.bl-error-600 { border-left-color: var(--color-error-600); }
.clr-error-800 { color: var(--color-error-800); }
.bg-error-800 { background-color: var(--color-error-800); }
.b-error-800 { border-color: var(--color-error-800); }
.bt-error-800 { border-top-color: var(--color-error-800); }
.br-error-800 { border-right-color: var(--color-error-800); }
.bb-error-800 { border-bottom-color: var(--color-error-800); }
.bl-error-800 { border-left-color: var(--color-error-800); }

/* --- Info --- */
.clr-info-50 { color: var(--color-info-50); }
.clr-info-100 { color: var(--color-info-100); }
.clr-info-600 { color: var(--color-info-600); }
.bg-info-50 { background-color: var(--color-info-50); }
.bg-info-100 { background-color: var(--color-info-100); }
.bg-info-600 { background-color: var(--color-info-600); }
.b-info-50 { border-color: var(--color-info-50); }
.b-info-100 { border-color: var(--color-info-100); }
.b-info-600 { border-color: var(--color-info-600); }
.bt-info-50 { border-top-color: var(--color-info-50); }
.bt-info-100 { border-top-color: var(--color-info-100); }
.bt-info-600 { border-top-color: var(--color-info-600); }
.br-info-50 { border-right-color: var(--color-info-50); }
.br-info-100 { border-right-color: var(--color-info-100); }
.br-info-600 { border-right-color: var(--color-info-600); }
.bb-info-50 { border-bottom-color: var(--color-info-50); }
.bb-info-100 { border-bottom-color: var(--color-info-100); }
.bb-info-600 { border-bottom-color: var(--color-info-600); }
.bl-info-50 { border-left-color: var(--color-info-50); }
.bl-info-100 { border-left-color: var(--color-info-100); }
.bl-info-600 { border-left-color: var(--color-info-600); }

/* --- Warning --- */
.clr-warning-50 { color: var(--color-warning-50); }
.clr-warning-100 { color: var(--color-warning-100); }
.clr-warning-500 { color: var(--color-warning-500); }
.clr-warning-600 { color: var(--color-warning-600); }
.clr-warning-700 { color: var(--color-warning-700); }
.bg-warning-50 { background-color: var(--color-warning-50); }
.bg-warning-100 { background-color: var(--color-warning-100); }
.bg-warning-600 { background-color: var(--color-warning-600); }
.bg-warning-700 { background-color: var(--color-warning-700); }
.bg-warning-bg { background-color: var(--color-warning-bg); }
.b-warning-50 { border-color: var(--color-warning-50); }
.b-warning-100 { border-color: var(--color-warning-100); }
.b-warning-500 { border-color: var(--color-warning-500); }
.b-warning-600 { border-color: var(--color-warning-600); }
.b-warning-700 { border-color: var(--color-warning-700); }
.bt-warning-50 { border-top-color: var(--color-warning-50); }
.bt-warning-100 { border-top-color: var(--color-warning-100); }
.bt-warning-600 { border-top-color: var(--color-warning-600); }
.bt-warning-700 { border-top-color: var(--color-warning-700); }
.br-warning-50 { border-right-color: var(--color-warning-50); }
.br-warning-100 { border-right-color: var(--color-warning-100); }
.br-warning-600 { border-right-color: var(--color-warning-600); }
.br-warning-700 { border-right-color: var(--color-warning-700); }
.bb-warning-50 { border-bottom-color: var(--color-warning-50); }
.bb-warning-100 { border-bottom-color: var(--color-warning-100); }
.bb-warning-600 { border-bottom-color: var(--color-warning-600); }
.bb-warning-700 { border-bottom-color: var(--color-warning-700); }
.bl-warning-50 { border-left-color: var(--color-warning-50); }
.bl-warning-100 { border-left-color: var(--color-warning-100); }
.bl-warning-600 { border-left-color: var(--color-warning-600); }
.bl-warning-700 { border-left-color: var(--color-warning-700); }

/* --- Accent --- */
.clr-accent-500 { color: var(--color-accent-500); }
.clr-accent-600 { color: var(--color-accent-600); }
.bg-accent-500 { background-color: var(--color-accent-500); }
.bg-accent-600 { background-color: var(--color-accent-600); }
.bg-accent-bg { background-color: var(--color-accent-bg); }
.bg-accent-bg-strong { background-color: var(--color-accent-bg-strong); }
.b-accent-500 { border-color: var(--color-accent-500); }
.b-accent-600 { border-color: var(--color-accent-600); }
.bt-accent-500 { border-top-color: var(--color-accent-500); }
.bt-accent-600 { border-top-color: var(--color-accent-600); }
.br-accent-500 { border-right-color: var(--color-accent-500); }
.br-accent-600 { border-right-color: var(--color-accent-600); }
.bb-accent-500 { border-bottom-color: var(--color-accent-500); }
.bb-accent-600 { border-bottom-color: var(--color-accent-600); }
.bl-accent-500 { border-left-color: var(--color-accent-500); }
.bl-accent-600 { border-left-color: var(--color-accent-600); }

/* --- Purple --- */
.clr-purple-50 { color: var(--color-purple-50); }
.clr-purple-100 { color: var(--color-purple-100); }
.clr-purple-600 { color: var(--color-purple-600); }
.bg-purple-50 { background-color: var(--color-purple-50); }
.bg-purple-100 { background-color: var(--color-purple-100); }
.bg-purple-600 { background-color: var(--color-purple-600); }
.b-purple-50 { border-color: var(--color-purple-50); }
.b-purple-100 { border-color: var(--color-purple-100); }
.b-purple-600 { border-color: var(--color-purple-600); }
.bt-purple-50 { border-top-color: var(--color-purple-50); }
.bt-purple-100 { border-top-color: var(--color-purple-100); }
.bt-purple-600 { border-top-color: var(--color-purple-600); }
.br-purple-50 { border-right-color: var(--color-purple-50); }
.br-purple-100 { border-right-color: var(--color-purple-100); }
.br-purple-600 { border-right-color: var(--color-purple-600); }
.bb-purple-50 { border-bottom-color: var(--color-purple-50); }
.bb-purple-100 { border-bottom-color: var(--color-purple-100); }
.bb-purple-600 { border-bottom-color: var(--color-purple-600); }
.bl-purple-50 { border-left-color: var(--color-purple-50); }
.bl-purple-100 { border-left-color: var(--color-purple-100); }
.bl-purple-600 { border-left-color: var(--color-purple-600); }

/* --------------------------------------------------------------------------
   Border Radius
   -------------------------------------------------------------------------- */

.rounded-2 { border-radius: 2px; }
.rounded-4 { border-radius: 4px; }
.rounded-6 { border-radius: 6px; }
.rounded-8 { border-radius: 8px; }
.rounded-50pc { border-radius: 50%; }
.rounded-100pc { border-radius: 100%; }

/* ---------- Font family ---------- */
.font-sans { font-family: var(--font-sans); }
.font-mono { font-family: var(--font-mono); }

/* ---------- Font weight ---------- */
.fw-400 { font-weight: 400; }
.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }

/* ---------- Text transform ---------- */
.uppercase { text-transform: uppercase; }

/* ---------- Text decoration ---------- */
.line-through { text-decoration: line-through; }

/* ---------- Width ---------- */
.w-0 { width: 0; }
.w-auto { width: auto; }
.w-full { width: 100%; }
.w-5pct { width: 5%; }
.w-10pct { width: 10%; }
.w-15pct { width: 15%; }
.w-20pct { width: 20%; }
.w-25pct { width: 25%; }
.w-30pct { width: 30%; }
.w-35pct { width: 35%; }
.w-40pct { width: 40%; }
.w-45pct { width: 45%; }
.w-50pct { width: 50%; }
.w-55pct { width: 55%; }
.w-60pct { width: 60%; }
.w-65pct { width: 65%; }
.w-70pct { width: 70%; }
.w-75pct { width: 75%; }
.w-80pct { width: 80%; }
.w-85pct { width: 85%; }
.w-90pct { width: 90%; }
.w-95pct { width: 95%; }

/* ---------- Min-width ---------- */
.min-w-0, .mw-0 { min-width: 0; }

/* ---------- Overflow ---------- */
.overflow-hidden { overflow: hidden; }
.overflow-visible { overflow: visible; }
.overflow-auto { overflow: auto; }
.overflow-x-auto { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---------- Vertical align ---------- */
.align-middle { vertical-align: middle; }

/* ---------- Display ---------- */
.inline-block, .d-inline-block { display: inline-block; }
.block, .d-block { display: block; }
.hidden, .d-none { display: none; }

/* ---------- Cursor ---------- */
.cursor-pointer { cursor: pointer; }

/* ---------- Border style ---------- */
.border-collapse { border-collapse: collapse; }

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

/* ---------- Shared keyframes ---------- */
@keyframes accentFlash {
  0% { background-color: var(--color-accent-bg-strong); }
  100% { background-color: var(--color-accent-bg); }
}

/* ==========================================================================
   Responsive Flex Utilities
   Prefix pattern: {breakpoint}-{utility}
   These apply only when the viewport is at or below the breakpoint width.
   ========================================================================== */

/* --- xs (≤ 480px) --- */
@media (max-width: 480px) {
  .xs-flex { display: flex; }
  .xs-inline-flex { display: inline-flex; }
  .xs-flex-col { flex-direction: column; }
  .xs-flex-row { flex-direction: row; }
  .xs-flex-wrap { flex-wrap: wrap; }
  .xs-flex-nowrap { flex-wrap: nowrap; }
  .xs-flex-1 { flex: 1 1 0%; }
  .xs-flex-none { flex: none; }
  .xs-items-start { align-items: flex-start; }
  .xs-items-center { align-items: center; }
  .xs-items-end { align-items: flex-end; }
  .xs-items-stretch { align-items: stretch; }
  .xs-justify-start { justify-content: flex-start; }
  .xs-justify-center { justify-content: center; }
  .xs-justify-end { justify-content: flex-end; }
  .xs-justify-between { justify-content: space-between; }
  .xs-hidden { display: none; }
  .xs-block { display: block; }
}

/* --- s (≤ 640px) --- */
@media (max-width: 640px) {
  .s-flex { display: flex; }
  .s-inline-flex { display: inline-flex; }
  .s-flex-col { flex-direction: column; }
  .s-flex-row { flex-direction: row; }
  .s-flex-wrap { flex-wrap: wrap; }
  .s-flex-nowrap { flex-wrap: nowrap; }
  .s-flex-1 { flex: 1 1 0%; }
  .s-flex-none { flex: none; }
  .s-items-start { align-items: flex-start; }
  .s-items-center { align-items: center; }
  .s-items-end { align-items: flex-end; }
  .s-items-stretch { align-items: stretch; }
  .s-justify-start { justify-content: flex-start; }
  .s-justify-center { justify-content: center; }
  .s-justify-end { justify-content: flex-end; }
  .s-justify-between { justify-content: space-between; }
  .s-hidden { display: none; }
  .s-block { display: block; }
}

/* --- sm (≤ 768px) --- */
@media (max-width: 768px) {
  .sm-flex { display: flex; }
  .sm-inline-flex { display: inline-flex; }
  .sm-flex-col { flex-direction: column; }
  .sm-flex-row { flex-direction: row; }
  .sm-flex-wrap { flex-wrap: wrap; }
  .sm-flex-nowrap { flex-wrap: nowrap; }
  .sm-flex-1 { flex: 1 1 0%; }
  .sm-flex-none { flex: none; }
  .sm-items-start { align-items: flex-start; }
  .sm-items-center { align-items: center; }
  .sm-items-end { align-items: flex-end; }
  .sm-items-stretch { align-items: stretch; }
  .sm-justify-start { justify-content: flex-start; }
  .sm-justify-center { justify-content: center; }
  .sm-justify-end { justify-content: flex-end; }
  .sm-justify-between { justify-content: space-between; }
  .sm-hidden { display: none; }
  .sm-block { display: block; }
  .sm-flex-equal > * { flex: 1 1 0%; }
}

/* --- md (≤ 1024px) --- */
@media (max-width: 1024px) {
  .md-flex { display: flex; }
  .md-inline-flex { display: inline-flex; }
  .md-flex-col { flex-direction: column; }
  .md-flex-row { flex-direction: row; }
  .md-flex-wrap { flex-wrap: wrap; }
  .md-flex-nowrap { flex-wrap: nowrap; }
  .md-flex-1 { flex: 1 1 0%; }
  .md-flex-none { flex: none; }
  .md-items-start { align-items: flex-start; }
  .md-items-center { align-items: center; }
  .md-items-end { align-items: flex-end; }
  .md-items-stretch { align-items: stretch; }
  .md-justify-start { justify-content: flex-start; }
  .md-justify-center { justify-content: center; }
  .md-justify-end { justify-content: flex-end; }
  .md-justify-between { justify-content: space-between; }
  .md-hidden { display: none; }
  .md-block { display: block; }
}

/* --- lg (≤ 1280px) --- */
@media (max-width: 1280px) {
  .lg-flex { display: flex; }
  .lg-inline-flex { display: inline-flex; }
  .lg-flex-col { flex-direction: column; }
  .lg-flex-row { flex-direction: row; }
  .lg-flex-wrap { flex-wrap: wrap; }
  .lg-flex-nowrap { flex-wrap: nowrap; }
  .lg-flex-1 { flex: 1 1 0%; }
  .lg-flex-none { flex: none; }
  .lg-items-start { align-items: flex-start; }
  .lg-items-center { align-items: center; }
  .lg-items-end { align-items: flex-end; }
  .lg-items-stretch { align-items: stretch; }
  .lg-justify-start { justify-content: flex-start; }
  .lg-justify-center { justify-content: center; }
  .lg-justify-end { justify-content: flex-end; }
  .lg-justify-between { justify-content: space-between; }
  .lg-hidden { display: none; }
  .lg-block { display: block; }
}

/* --- xl (≤ 1440px) --- */
@media (max-width: 1440px) {
  .xl-flex { display: flex; }
  .xl-inline-flex { display: inline-flex; }
  .xl-flex-col { flex-direction: column; }
  .xl-flex-row { flex-direction: row; }
  .xl-flex-wrap { flex-wrap: wrap; }
  .xl-flex-nowrap { flex-wrap: nowrap; }
  .xl-flex-1 { flex: 1 1 0%; }
  .xl-flex-none { flex: none; }
  .xl-items-start { align-items: flex-start; }
  .xl-items-center { align-items: center; }
  .xl-items-end { align-items: flex-end; }
  .xl-items-stretch { align-items: stretch; }
  .xl-justify-start { justify-content: flex-start; }
  .xl-justify-center { justify-content: center; }
  .xl-justify-end { justify-content: flex-end; }
  .xl-justify-between { justify-content: space-between; }
  .xl-hidden { display: none; }
  .xl-block { display: block; }
}

/* ==========================================================================
   Responsive Spacing Utilities (Padding / Margin / Gap)
   Prefix pattern: {breakpoint}-{utility}
   These apply only when the viewport is at or below the breakpoint width.
   ========================================================================== */

/* --- xs (≤ 480px) --- */
@media (max-width: 480px) {
  .xs-p-0 { padding: 0px; }
  .xs-px-0 { padding-left: 0px; padding-right: 0px; }
  .xs-py-0 { padding-top: 0px; padding-bottom: 0px; }
  .xs-pt-0 { padding-top: 0px; }
  .xs-pr-0 { padding-right: 0px; }
  .xs-pb-0 { padding-bottom: 0px; }
  .xs-pl-0 { padding-left: 0px; }
  .xs-m-0 { margin: 0px; }
  .xs-mx-0 { margin-left: 0px; margin-right: 0px; }
  .xs-my-0 { margin-top: 0px; margin-bottom: 0px; }
  .xs-mt-0 { margin-top: 0px; }
  .xs-mr-0 { margin-right: 0px; }
  .xs-mb-0 { margin-bottom: 0px; }
  .xs-ml-0 { margin-left: 0px; }
  .xs-gap-0 { gap: 0px; }
  .xs-p-2 { padding: 2px; }
  .xs-px-2 { padding-left: 2px; padding-right: 2px; }
  .xs-py-2 { padding-top: 2px; padding-bottom: 2px; }
  .xs-pt-2 { padding-top: 2px; }
  .xs-pr-2 { padding-right: 2px; }
  .xs-pb-2 { padding-bottom: 2px; }
  .xs-pl-2 { padding-left: 2px; }
  .xs-m-2 { margin: 2px; }
  .xs-mx-2 { margin-left: 2px; margin-right: 2px; }
  .xs-my-2 { margin-top: 2px; margin-bottom: 2px; }
  .xs-mt-2 { margin-top: 2px; }
  .xs-mr-2 { margin-right: 2px; }
  .xs-mb-2 { margin-bottom: 2px; }
  .xs-ml-2 { margin-left: 2px; }
  .xs-gap-2 { gap: 2px; }
  .xs-p-4 { padding: 4px; }
  .xs-px-4 { padding-left: 4px; padding-right: 4px; }
  .xs-py-4 { padding-top: 4px; padding-bottom: 4px; }
  .xs-pt-4 { padding-top: 4px; }
  .xs-pr-4 { padding-right: 4px; }
  .xs-pb-4 { padding-bottom: 4px; }
  .xs-pl-4 { padding-left: 4px; }
  .xs-m-4 { margin: 4px; }
  .xs-mx-4 { margin-left: 4px; margin-right: 4px; }
  .xs-my-4 { margin-top: 4px; margin-bottom: 4px; }
  .xs-mt-4 { margin-top: 4px; }
  .xs-mr-4 { margin-right: 4px; }
  .xs-mb-4 { margin-bottom: 4px; }
  .xs-ml-4 { margin-left: 4px; }
  .xs-gap-4 { gap: 4px; }
  .xs-p-6 { padding: 6px; }
  .xs-px-6 { padding-left: 6px; padding-right: 6px; }
  .xs-py-6 { padding-top: 6px; padding-bottom: 6px; }
  .xs-pt-6 { padding-top: 6px; }
  .xs-pr-6 { padding-right: 6px; }
  .xs-pb-6 { padding-bottom: 6px; }
  .xs-pl-6 { padding-left: 6px; }
  .xs-m-6 { margin: 6px; }
  .xs-mx-6 { margin-left: 6px; margin-right: 6px; }
  .xs-my-6 { margin-top: 6px; margin-bottom: 6px; }
  .xs-mt-6 { margin-top: 6px; }
  .xs-mr-6 { margin-right: 6px; }
  .xs-mb-6 { margin-bottom: 6px; }
  .xs-ml-6 { margin-left: 6px; }
  .xs-gap-6 { gap: 6px; }
  .xs-p-8 { padding: 8px; }
  .xs-px-8 { padding-left: 8px; padding-right: 8px; }
  .xs-py-8 { padding-top: 8px; padding-bottom: 8px; }
  .xs-pt-8 { padding-top: 8px; }
  .xs-pr-8 { padding-right: 8px; }
  .xs-pb-8 { padding-bottom: 8px; }
  .xs-pl-8 { padding-left: 8px; }
  .xs-m-8 { margin: 8px; }
  .xs-mx-8 { margin-left: 8px; margin-right: 8px; }
  .xs-my-8 { margin-top: 8px; margin-bottom: 8px; }
  .xs-mt-8 { margin-top: 8px; }
  .xs-mr-8 { margin-right: 8px; }
  .xs-mb-8 { margin-bottom: 8px; }
  .xs-ml-8 { margin-left: 8px; }
  .xs-gap-8 { gap: 8px; }
  .xs-p-10 { padding: 10px; }
  .xs-px-10 { padding-left: 10px; padding-right: 10px; }
  .xs-py-10 { padding-top: 10px; padding-bottom: 10px; }
  .xs-pt-10 { padding-top: 10px; }
  .xs-pr-10 { padding-right: 10px; }
  .xs-pb-10 { padding-bottom: 10px; }
  .xs-pl-10 { padding-left: 10px; }
  .xs-m-10 { margin: 10px; }
  .xs-mx-10 { margin-left: 10px; margin-right: 10px; }
  .xs-my-10 { margin-top: 10px; margin-bottom: 10px; }
  .xs-mt-10 { margin-top: 10px; }
  .xs-mr-10 { margin-right: 10px; }
  .xs-mb-10 { margin-bottom: 10px; }
  .xs-ml-10 { margin-left: 10px; }
  .xs-gap-10 { gap: 10px; }
  .xs-p-12 { padding: 12px; }
  .xs-px-12 { padding-left: 12px; padding-right: 12px; }
  .xs-py-12 { padding-top: 12px; padding-bottom: 12px; }
  .xs-pt-12 { padding-top: 12px; }
  .xs-pr-12 { padding-right: 12px; }
  .xs-pb-12 { padding-bottom: 12px; }
  .xs-pl-12 { padding-left: 12px; }
  .xs-m-12 { margin: 12px; }
  .xs-mx-12 { margin-left: 12px; margin-right: 12px; }
  .xs-my-12 { margin-top: 12px; margin-bottom: 12px; }
  .xs-mt-12 { margin-top: 12px; }
  .xs-mr-12 { margin-right: 12px; }
  .xs-mb-12 { margin-bottom: 12px; }
  .xs-ml-12 { margin-left: 12px; }
  .xs-gap-12 { gap: 12px; }
  .xs-p-14 { padding: 14px; }
  .xs-px-14 { padding-left: 14px; padding-right: 14px; }
  .xs-py-14 { padding-top: 14px; padding-bottom: 14px; }
  .xs-pt-14 { padding-top: 14px; }
  .xs-pr-14 { padding-right: 14px; }
  .xs-pb-14 { padding-bottom: 14px; }
  .xs-pl-14 { padding-left: 14px; }
  .xs-m-14 { margin: 14px; }
  .xs-mx-14 { margin-left: 14px; margin-right: 14px; }
  .xs-my-14 { margin-top: 14px; margin-bottom: 14px; }
  .xs-mt-14 { margin-top: 14px; }
  .xs-mr-14 { margin-right: 14px; }
  .xs-mb-14 { margin-bottom: 14px; }
  .xs-ml-14 { margin-left: 14px; }
  .xs-gap-14 { gap: 14px; }
  .xs-p-16 { padding: 16px; }
  .xs-px-16 { padding-left: 16px; padding-right: 16px; }
  .xs-py-16 { padding-top: 16px; padding-bottom: 16px; }
  .xs-pt-16 { padding-top: 16px; }
  .xs-pr-16 { padding-right: 16px; }
  .xs-pb-16 { padding-bottom: 16px; }
  .xs-pl-16 { padding-left: 16px; }
  .xs-m-16 { margin: 16px; }
  .xs-mx-16 { margin-left: 16px; margin-right: 16px; }
  .xs-my-16 { margin-top: 16px; margin-bottom: 16px; }
  .xs-mt-16 { margin-top: 16px; }
  .xs-mr-16 { margin-right: 16px; }
  .xs-mb-16 { margin-bottom: 16px; }
  .xs-ml-16 { margin-left: 16px; }
  .xs-gap-16 { gap: 16px; }
  .xs-p-18 { padding: 18px; }
  .xs-px-18 { padding-left: 18px; padding-right: 18px; }
  .xs-py-18 { padding-top: 18px; padding-bottom: 18px; }
  .xs-pt-18 { padding-top: 18px; }
  .xs-pr-18 { padding-right: 18px; }
  .xs-pb-18 { padding-bottom: 18px; }
  .xs-pl-18 { padding-left: 18px; }
  .xs-m-18 { margin: 18px; }
  .xs-mx-18 { margin-left: 18px; margin-right: 18px; }
  .xs-my-18 { margin-top: 18px; margin-bottom: 18px; }
  .xs-mt-18 { margin-top: 18px; }
  .xs-mr-18 { margin-right: 18px; }
  .xs-mb-18 { margin-bottom: 18px; }
  .xs-ml-18 { margin-left: 18px; }
  .xs-gap-18 { gap: 18px; }
  .xs-p-20 { padding: 20px; }
  .xs-px-20 { padding-left: 20px; padding-right: 20px; }
  .xs-py-20 { padding-top: 20px; padding-bottom: 20px; }
  .xs-pt-20 { padding-top: 20px; }
  .xs-pr-20 { padding-right: 20px; }
  .xs-pb-20 { padding-bottom: 20px; }
  .xs-pl-20 { padding-left: 20px; }
  .xs-m-20 { margin: 20px; }
  .xs-mx-20 { margin-left: 20px; margin-right: 20px; }
  .xs-my-20 { margin-top: 20px; margin-bottom: 20px; }
  .xs-mt-20 { margin-top: 20px; }
  .xs-mr-20 { margin-right: 20px; }
  .xs-mb-20 { margin-bottom: 20px; }
  .xs-ml-20 { margin-left: 20px; }
  .xs-gap-20 { gap: 20px; }
  .xs-p-22 { padding: 22px; }
  .xs-px-22 { padding-left: 22px; padding-right: 22px; }
  .xs-py-22 { padding-top: 22px; padding-bottom: 22px; }
  .xs-pt-22 { padding-top: 22px; }
  .xs-pr-22 { padding-right: 22px; }
  .xs-pb-22 { padding-bottom: 22px; }
  .xs-pl-22 { padding-left: 22px; }
  .xs-m-22 { margin: 22px; }
  .xs-mx-22 { margin-left: 22px; margin-right: 22px; }
  .xs-my-22 { margin-top: 22px; margin-bottom: 22px; }
  .xs-mt-22 { margin-top: 22px; }
  .xs-mr-22 { margin-right: 22px; }
  .xs-mb-22 { margin-bottom: 22px; }
  .xs-ml-22 { margin-left: 22px; }
  .xs-gap-22 { gap: 22px; }
  .xs-p-24 { padding: 24px; }
  .xs-px-24 { padding-left: 24px; padding-right: 24px; }
  .xs-py-24 { padding-top: 24px; padding-bottom: 24px; }
  .xs-pt-24 { padding-top: 24px; }
  .xs-pr-24 { padding-right: 24px; }
  .xs-pb-24 { padding-bottom: 24px; }
  .xs-pl-24 { padding-left: 24px; }
  .xs-m-24 { margin: 24px; }
  .xs-mx-24 { margin-left: 24px; margin-right: 24px; }
  .xs-my-24 { margin-top: 24px; margin-bottom: 24px; }
  .xs-mt-24 { margin-top: 24px; }
  .xs-mr-24 { margin-right: 24px; }
  .xs-mb-24 { margin-bottom: 24px; }
  .xs-ml-24 { margin-left: 24px; }
  .xs-gap-24 { gap: 24px; }
  .xs-p-26 { padding: 26px; }
  .xs-px-26 { padding-left: 26px; padding-right: 26px; }
  .xs-py-26 { padding-top: 26px; padding-bottom: 26px; }
  .xs-pt-26 { padding-top: 26px; }
  .xs-pr-26 { padding-right: 26px; }
  .xs-pb-26 { padding-bottom: 26px; }
  .xs-pl-26 { padding-left: 26px; }
  .xs-m-26 { margin: 26px; }
  .xs-mx-26 { margin-left: 26px; margin-right: 26px; }
  .xs-my-26 { margin-top: 26px; margin-bottom: 26px; }
  .xs-mt-26 { margin-top: 26px; }
  .xs-mr-26 { margin-right: 26px; }
  .xs-mb-26 { margin-bottom: 26px; }
  .xs-ml-26 { margin-left: 26px; }
  .xs-gap-26 { gap: 26px; }
  .xs-p-28 { padding: 28px; }
  .xs-px-28 { padding-left: 28px; padding-right: 28px; }
  .xs-py-28 { padding-top: 28px; padding-bottom: 28px; }
  .xs-pt-28 { padding-top: 28px; }
  .xs-pr-28 { padding-right: 28px; }
  .xs-pb-28 { padding-bottom: 28px; }
  .xs-pl-28 { padding-left: 28px; }
  .xs-m-28 { margin: 28px; }
  .xs-mx-28 { margin-left: 28px; margin-right: 28px; }
  .xs-my-28 { margin-top: 28px; margin-bottom: 28px; }
  .xs-mt-28 { margin-top: 28px; }
  .xs-mr-28 { margin-right: 28px; }
  .xs-mb-28 { margin-bottom: 28px; }
  .xs-ml-28 { margin-left: 28px; }
  .xs-gap-28 { gap: 28px; }
  .xs-p-30 { padding: 30px; }
  .xs-px-30 { padding-left: 30px; padding-right: 30px; }
  .xs-py-30 { padding-top: 30px; padding-bottom: 30px; }
  .xs-pt-30 { padding-top: 30px; }
  .xs-pr-30 { padding-right: 30px; }
  .xs-pb-30 { padding-bottom: 30px; }
  .xs-pl-30 { padding-left: 30px; }
  .xs-m-30 { margin: 30px; }
  .xs-mx-30 { margin-left: 30px; margin-right: 30px; }
  .xs-my-30 { margin-top: 30px; margin-bottom: 30px; }
  .xs-mt-30 { margin-top: 30px; }
  .xs-mr-30 { margin-right: 30px; }
  .xs-mb-30 { margin-bottom: 30px; }
  .xs-ml-30 { margin-left: 30px; }
  .xs-gap-30 { gap: 30px; }
  .xs-p-32 { padding: 32px; }
  .xs-px-32 { padding-left: 32px; padding-right: 32px; }
  .xs-py-32 { padding-top: 32px; padding-bottom: 32px; }
  .xs-pt-32 { padding-top: 32px; }
  .xs-pr-32 { padding-right: 32px; }
  .xs-pb-32 { padding-bottom: 32px; }
  .xs-pl-32 { padding-left: 32px; }
  .xs-m-32 { margin: 32px; }
  .xs-mx-32 { margin-left: 32px; margin-right: 32px; }
  .xs-my-32 { margin-top: 32px; margin-bottom: 32px; }
  .xs-mt-32 { margin-top: 32px; }
  .xs-mr-32 { margin-right: 32px; }
  .xs-mb-32 { margin-bottom: 32px; }
  .xs-ml-32 { margin-left: 32px; }
  .xs-gap-32 { gap: 32px; }
  .xs-p-36 { padding: 36px; }
  .xs-px-36 { padding-left: 36px; padding-right: 36px; }
  .xs-py-36 { padding-top: 36px; padding-bottom: 36px; }
  .xs-pt-36 { padding-top: 36px; }
  .xs-pr-36 { padding-right: 36px; }
  .xs-pb-36 { padding-bottom: 36px; }
  .xs-pl-36 { padding-left: 36px; }
  .xs-m-36 { margin: 36px; }
  .xs-mx-36 { margin-left: 36px; margin-right: 36px; }
  .xs-my-36 { margin-top: 36px; margin-bottom: 36px; }
  .xs-mt-36 { margin-top: 36px; }
  .xs-mr-36 { margin-right: 36px; }
  .xs-mb-36 { margin-bottom: 36px; }
  .xs-ml-36 { margin-left: 36px; }
  .xs-gap-36 { gap: 36px; }
  .xs-p-40 { padding: 40px; }
  .xs-px-40 { padding-left: 40px; padding-right: 40px; }
  .xs-py-40 { padding-top: 40px; padding-bottom: 40px; }
  .xs-pt-40 { padding-top: 40px; }
  .xs-pr-40 { padding-right: 40px; }
  .xs-pb-40 { padding-bottom: 40px; }
  .xs-pl-40 { padding-left: 40px; }
  .xs-m-40 { margin: 40px; }
  .xs-mx-40 { margin-left: 40px; margin-right: 40px; }
  .xs-my-40 { margin-top: 40px; margin-bottom: 40px; }
  .xs-mt-40 { margin-top: 40px; }
  .xs-mr-40 { margin-right: 40px; }
  .xs-mb-40 { margin-bottom: 40px; }
  .xs-ml-40 { margin-left: 40px; }
  .xs-gap-40 { gap: 40px; }
  .xs-p-48 { padding: 48px; }
  .xs-px-48 { padding-left: 48px; padding-right: 48px; }
  .xs-py-48 { padding-top: 48px; padding-bottom: 48px; }
  .xs-pt-48 { padding-top: 48px; }
  .xs-pr-48 { padding-right: 48px; }
  .xs-pb-48 { padding-bottom: 48px; }
  .xs-pl-48 { padding-left: 48px; }
  .xs-m-48 { margin: 48px; }
  .xs-mx-48 { margin-left: 48px; margin-right: 48px; }
  .xs-my-48 { margin-top: 48px; margin-bottom: 48px; }
  .xs-mt-48 { margin-top: 48px; }
  .xs-mr-48 { margin-right: 48px; }
  .xs-mb-48 { margin-bottom: 48px; }
  .xs-ml-48 { margin-left: 48px; }
  .xs-gap-48 { gap: 48px; }
  .xs-p-56 { padding: 56px; }
  .xs-px-56 { padding-left: 56px; padding-right: 56px; }
  .xs-py-56 { padding-top: 56px; padding-bottom: 56px; }
  .xs-pt-56 { padding-top: 56px; }
  .xs-pr-56 { padding-right: 56px; }
  .xs-pb-56 { padding-bottom: 56px; }
  .xs-pl-56 { padding-left: 56px; }
  .xs-m-56 { margin: 56px; }
  .xs-mx-56 { margin-left: 56px; margin-right: 56px; }
  .xs-my-56 { margin-top: 56px; margin-bottom: 56px; }
  .xs-mt-56 { margin-top: 56px; }
  .xs-mr-56 { margin-right: 56px; }
  .xs-mb-56 { margin-bottom: 56px; }
  .xs-ml-56 { margin-left: 56px; }
  .xs-gap-56 { gap: 56px; }
  .xs-p-64 { padding: 64px; }
  .xs-px-64 { padding-left: 64px; padding-right: 64px; }
  .xs-py-64 { padding-top: 64px; padding-bottom: 64px; }
  .xs-pt-64 { padding-top: 64px; }
  .xs-pr-64 { padding-right: 64px; }
  .xs-pb-64 { padding-bottom: 64px; }
  .xs-pl-64 { padding-left: 64px; }
  .xs-m-64 { margin: 64px; }
  .xs-mx-64 { margin-left: 64px; margin-right: 64px; }
  .xs-my-64 { margin-top: 64px; margin-bottom: 64px; }
  .xs-mt-64 { margin-top: 64px; }
  .xs-mr-64 { margin-right: 64px; }
  .xs-mb-64 { margin-bottom: 64px; }
  .xs-ml-64 { margin-left: 64px; }
  .xs-gap-64 { gap: 64px; }
}

/* --- s (≤ 640px) --- */
@media (max-width: 640px) {
  .s-p-0 { padding: 0px; }
  .s-px-0 { padding-left: 0px; padding-right: 0px; }
  .s-py-0 { padding-top: 0px; padding-bottom: 0px; }
  .s-pt-0 { padding-top: 0px; }
  .s-pr-0 { padding-right: 0px; }
  .s-pb-0 { padding-bottom: 0px; }
  .s-pl-0 { padding-left: 0px; }
  .s-m-0 { margin: 0px; }
  .s-mx-0 { margin-left: 0px; margin-right: 0px; }
  .s-my-0 { margin-top: 0px; margin-bottom: 0px; }
  .s-mt-0 { margin-top: 0px; }
  .s-mr-0 { margin-right: 0px; }
  .s-mb-0 { margin-bottom: 0px; }
  .s-ml-0 { margin-left: 0px; }
  .s-gap-0 { gap: 0px; }
  .s-p-2 { padding: 2px; }
  .s-px-2 { padding-left: 2px; padding-right: 2px; }
  .s-py-2 { padding-top: 2px; padding-bottom: 2px; }
  .s-pt-2 { padding-top: 2px; }
  .s-pr-2 { padding-right: 2px; }
  .s-pb-2 { padding-bottom: 2px; }
  .s-pl-2 { padding-left: 2px; }
  .s-m-2 { margin: 2px; }
  .s-mx-2 { margin-left: 2px; margin-right: 2px; }
  .s-my-2 { margin-top: 2px; margin-bottom: 2px; }
  .s-mt-2 { margin-top: 2px; }
  .s-mr-2 { margin-right: 2px; }
  .s-mb-2 { margin-bottom: 2px; }
  .s-ml-2 { margin-left: 2px; }
  .s-gap-2 { gap: 2px; }
  .s-p-4 { padding: 4px; }
  .s-px-4 { padding-left: 4px; padding-right: 4px; }
  .s-py-4 { padding-top: 4px; padding-bottom: 4px; }
  .s-pt-4 { padding-top: 4px; }
  .s-pr-4 { padding-right: 4px; }
  .s-pb-4 { padding-bottom: 4px; }
  .s-pl-4 { padding-left: 4px; }
  .s-m-4 { margin: 4px; }
  .s-mx-4 { margin-left: 4px; margin-right: 4px; }
  .s-my-4 { margin-top: 4px; margin-bottom: 4px; }
  .s-mt-4 { margin-top: 4px; }
  .s-mr-4 { margin-right: 4px; }
  .s-mb-4 { margin-bottom: 4px; }
  .s-ml-4 { margin-left: 4px; }
  .s-gap-4 { gap: 4px; }
  .s-p-6 { padding: 6px; }
  .s-px-6 { padding-left: 6px; padding-right: 6px; }
  .s-py-6 { padding-top: 6px; padding-bottom: 6px; }
  .s-pt-6 { padding-top: 6px; }
  .s-pr-6 { padding-right: 6px; }
  .s-pb-6 { padding-bottom: 6px; }
  .s-pl-6 { padding-left: 6px; }
  .s-m-6 { margin: 6px; }
  .s-mx-6 { margin-left: 6px; margin-right: 6px; }
  .s-my-6 { margin-top: 6px; margin-bottom: 6px; }
  .s-mt-6 { margin-top: 6px; }
  .s-mr-6 { margin-right: 6px; }
  .s-mb-6 { margin-bottom: 6px; }
  .s-ml-6 { margin-left: 6px; }
  .s-gap-6 { gap: 6px; }
  .s-p-8 { padding: 8px; }
  .s-px-8 { padding-left: 8px; padding-right: 8px; }
  .s-py-8 { padding-top: 8px; padding-bottom: 8px; }
  .s-pt-8 { padding-top: 8px; }
  .s-pr-8 { padding-right: 8px; }
  .s-pb-8 { padding-bottom: 8px; }
  .s-pl-8 { padding-left: 8px; }
  .s-m-8 { margin: 8px; }
  .s-mx-8 { margin-left: 8px; margin-right: 8px; }
  .s-my-8 { margin-top: 8px; margin-bottom: 8px; }
  .s-mt-8 { margin-top: 8px; }
  .s-mr-8 { margin-right: 8px; }
  .s-mb-8 { margin-bottom: 8px; }
  .s-ml-8 { margin-left: 8px; }
  .s-gap-8 { gap: 8px; }
  .s-p-10 { padding: 10px; }
  .s-px-10 { padding-left: 10px; padding-right: 10px; }
  .s-py-10 { padding-top: 10px; padding-bottom: 10px; }
  .s-pt-10 { padding-top: 10px; }
  .s-pr-10 { padding-right: 10px; }
  .s-pb-10 { padding-bottom: 10px; }
  .s-pl-10 { padding-left: 10px; }
  .s-m-10 { margin: 10px; }
  .s-mx-10 { margin-left: 10px; margin-right: 10px; }
  .s-my-10 { margin-top: 10px; margin-bottom: 10px; }
  .s-mt-10 { margin-top: 10px; }
  .s-mr-10 { margin-right: 10px; }
  .s-mb-10 { margin-bottom: 10px; }
  .s-ml-10 { margin-left: 10px; }
  .s-gap-10 { gap: 10px; }
  .s-p-12 { padding: 12px; }
  .s-px-12 { padding-left: 12px; padding-right: 12px; }
  .s-py-12 { padding-top: 12px; padding-bottom: 12px; }
  .s-pt-12 { padding-top: 12px; }
  .s-pr-12 { padding-right: 12px; }
  .s-pb-12 { padding-bottom: 12px; }
  .s-pl-12 { padding-left: 12px; }
  .s-m-12 { margin: 12px; }
  .s-mx-12 { margin-left: 12px; margin-right: 12px; }
  .s-my-12 { margin-top: 12px; margin-bottom: 12px; }
  .s-mt-12 { margin-top: 12px; }
  .s-mr-12 { margin-right: 12px; }
  .s-mb-12 { margin-bottom: 12px; }
  .s-ml-12 { margin-left: 12px; }
  .s-gap-12 { gap: 12px; }
  .s-p-14 { padding: 14px; }
  .s-px-14 { padding-left: 14px; padding-right: 14px; }
  .s-py-14 { padding-top: 14px; padding-bottom: 14px; }
  .s-pt-14 { padding-top: 14px; }
  .s-pr-14 { padding-right: 14px; }
  .s-pb-14 { padding-bottom: 14px; }
  .s-pl-14 { padding-left: 14px; }
  .s-m-14 { margin: 14px; }
  .s-mx-14 { margin-left: 14px; margin-right: 14px; }
  .s-my-14 { margin-top: 14px; margin-bottom: 14px; }
  .s-mt-14 { margin-top: 14px; }
  .s-mr-14 { margin-right: 14px; }
  .s-mb-14 { margin-bottom: 14px; }
  .s-ml-14 { margin-left: 14px; }
  .s-gap-14 { gap: 14px; }
  .s-p-16 { padding: 16px; }
  .s-px-16 { padding-left: 16px; padding-right: 16px; }
  .s-py-16 { padding-top: 16px; padding-bottom: 16px; }
  .s-pt-16 { padding-top: 16px; }
  .s-pr-16 { padding-right: 16px; }
  .s-pb-16 { padding-bottom: 16px; }
  .s-pl-16 { padding-left: 16px; }
  .s-m-16 { margin: 16px; }
  .s-mx-16 { margin-left: 16px; margin-right: 16px; }
  .s-my-16 { margin-top: 16px; margin-bottom: 16px; }
  .s-mt-16 { margin-top: 16px; }
  .s-mr-16 { margin-right: 16px; }
  .s-mb-16 { margin-bottom: 16px; }
  .s-ml-16 { margin-left: 16px; }
  .s-gap-16 { gap: 16px; }
  .s-p-18 { padding: 18px; }
  .s-px-18 { padding-left: 18px; padding-right: 18px; }
  .s-py-18 { padding-top: 18px; padding-bottom: 18px; }
  .s-pt-18 { padding-top: 18px; }
  .s-pr-18 { padding-right: 18px; }
  .s-pb-18 { padding-bottom: 18px; }
  .s-pl-18 { padding-left: 18px; }
  .s-m-18 { margin: 18px; }
  .s-mx-18 { margin-left: 18px; margin-right: 18px; }
  .s-my-18 { margin-top: 18px; margin-bottom: 18px; }
  .s-mt-18 { margin-top: 18px; }
  .s-mr-18 { margin-right: 18px; }
  .s-mb-18 { margin-bottom: 18px; }
  .s-ml-18 { margin-left: 18px; }
  .s-gap-18 { gap: 18px; }
  .s-p-20 { padding: 20px; }
  .s-px-20 { padding-left: 20px; padding-right: 20px; }
  .s-py-20 { padding-top: 20px; padding-bottom: 20px; }
  .s-pt-20 { padding-top: 20px; }
  .s-pr-20 { padding-right: 20px; }
  .s-pb-20 { padding-bottom: 20px; }
  .s-pl-20 { padding-left: 20px; }
  .s-m-20 { margin: 20px; }
  .s-mx-20 { margin-left: 20px; margin-right: 20px; }
  .s-my-20 { margin-top: 20px; margin-bottom: 20px; }
  .s-mt-20 { margin-top: 20px; }
  .s-mr-20 { margin-right: 20px; }
  .s-mb-20 { margin-bottom: 20px; }
  .s-ml-20 { margin-left: 20px; }
  .s-gap-20 { gap: 20px; }
  .s-p-22 { padding: 22px; }
  .s-px-22 { padding-left: 22px; padding-right: 22px; }
  .s-py-22 { padding-top: 22px; padding-bottom: 22px; }
  .s-pt-22 { padding-top: 22px; }
  .s-pr-22 { padding-right: 22px; }
  .s-pb-22 { padding-bottom: 22px; }
  .s-pl-22 { padding-left: 22px; }
  .s-m-22 { margin: 22px; }
  .s-mx-22 { margin-left: 22px; margin-right: 22px; }
  .s-my-22 { margin-top: 22px; margin-bottom: 22px; }
  .s-mt-22 { margin-top: 22px; }
  .s-mr-22 { margin-right: 22px; }
  .s-mb-22 { margin-bottom: 22px; }
  .s-ml-22 { margin-left: 22px; }
  .s-gap-22 { gap: 22px; }
  .s-p-24 { padding: 24px; }
  .s-px-24 { padding-left: 24px; padding-right: 24px; }
  .s-py-24 { padding-top: 24px; padding-bottom: 24px; }
  .s-pt-24 { padding-top: 24px; }
  .s-pr-24 { padding-right: 24px; }
  .s-pb-24 { padding-bottom: 24px; }
  .s-pl-24 { padding-left: 24px; }
  .s-m-24 { margin: 24px; }
  .s-mx-24 { margin-left: 24px; margin-right: 24px; }
  .s-my-24 { margin-top: 24px; margin-bottom: 24px; }
  .s-mt-24 { margin-top: 24px; }
  .s-mr-24 { margin-right: 24px; }
  .s-mb-24 { margin-bottom: 24px; }
  .s-ml-24 { margin-left: 24px; }
  .s-gap-24 { gap: 24px; }
  .s-p-26 { padding: 26px; }
  .s-px-26 { padding-left: 26px; padding-right: 26px; }
  .s-py-26 { padding-top: 26px; padding-bottom: 26px; }
  .s-pt-26 { padding-top: 26px; }
  .s-pr-26 { padding-right: 26px; }
  .s-pb-26 { padding-bottom: 26px; }
  .s-pl-26 { padding-left: 26px; }
  .s-m-26 { margin: 26px; }
  .s-mx-26 { margin-left: 26px; margin-right: 26px; }
  .s-my-26 { margin-top: 26px; margin-bottom: 26px; }
  .s-mt-26 { margin-top: 26px; }
  .s-mr-26 { margin-right: 26px; }
  .s-mb-26 { margin-bottom: 26px; }
  .s-ml-26 { margin-left: 26px; }
  .s-gap-26 { gap: 26px; }
  .s-p-28 { padding: 28px; }
  .s-px-28 { padding-left: 28px; padding-right: 28px; }
  .s-py-28 { padding-top: 28px; padding-bottom: 28px; }
  .s-pt-28 { padding-top: 28px; }
  .s-pr-28 { padding-right: 28px; }
  .s-pb-28 { padding-bottom: 28px; }
  .s-pl-28 { padding-left: 28px; }
  .s-m-28 { margin: 28px; }
  .s-mx-28 { margin-left: 28px; margin-right: 28px; }
  .s-my-28 { margin-top: 28px; margin-bottom: 28px; }
  .s-mt-28 { margin-top: 28px; }
  .s-mr-28 { margin-right: 28px; }
  .s-mb-28 { margin-bottom: 28px; }
  .s-ml-28 { margin-left: 28px; }
  .s-gap-28 { gap: 28px; }
  .s-p-30 { padding: 30px; }
  .s-px-30 { padding-left: 30px; padding-right: 30px; }
  .s-py-30 { padding-top: 30px; padding-bottom: 30px; }
  .s-pt-30 { padding-top: 30px; }
  .s-pr-30 { padding-right: 30px; }
  .s-pb-30 { padding-bottom: 30px; }
  .s-pl-30 { padding-left: 30px; }
  .s-m-30 { margin: 30px; }
  .s-mx-30 { margin-left: 30px; margin-right: 30px; }
  .s-my-30 { margin-top: 30px; margin-bottom: 30px; }
  .s-mt-30 { margin-top: 30px; }
  .s-mr-30 { margin-right: 30px; }
  .s-mb-30 { margin-bottom: 30px; }
  .s-ml-30 { margin-left: 30px; }
  .s-gap-30 { gap: 30px; }
  .s-p-32 { padding: 32px; }
  .s-px-32 { padding-left: 32px; padding-right: 32px; }
  .s-py-32 { padding-top: 32px; padding-bottom: 32px; }
  .s-pt-32 { padding-top: 32px; }
  .s-pr-32 { padding-right: 32px; }
  .s-pb-32 { padding-bottom: 32px; }
  .s-pl-32 { padding-left: 32px; }
  .s-m-32 { margin: 32px; }
  .s-mx-32 { margin-left: 32px; margin-right: 32px; }
  .s-my-32 { margin-top: 32px; margin-bottom: 32px; }
  .s-mt-32 { margin-top: 32px; }
  .s-mr-32 { margin-right: 32px; }
  .s-mb-32 { margin-bottom: 32px; }
  .s-ml-32 { margin-left: 32px; }
  .s-gap-32 { gap: 32px; }
  .s-p-36 { padding: 36px; }
  .s-px-36 { padding-left: 36px; padding-right: 36px; }
  .s-py-36 { padding-top: 36px; padding-bottom: 36px; }
  .s-pt-36 { padding-top: 36px; }
  .s-pr-36 { padding-right: 36px; }
  .s-pb-36 { padding-bottom: 36px; }
  .s-pl-36 { padding-left: 36px; }
  .s-m-36 { margin: 36px; }
  .s-mx-36 { margin-left: 36px; margin-right: 36px; }
  .s-my-36 { margin-top: 36px; margin-bottom: 36px; }
  .s-mt-36 { margin-top: 36px; }
  .s-mr-36 { margin-right: 36px; }
  .s-mb-36 { margin-bottom: 36px; }
  .s-ml-36 { margin-left: 36px; }
  .s-gap-36 { gap: 36px; }
  .s-p-40 { padding: 40px; }
  .s-px-40 { padding-left: 40px; padding-right: 40px; }
  .s-py-40 { padding-top: 40px; padding-bottom: 40px; }
  .s-pt-40 { padding-top: 40px; }
  .s-pr-40 { padding-right: 40px; }
  .s-pb-40 { padding-bottom: 40px; }
  .s-pl-40 { padding-left: 40px; }
  .s-m-40 { margin: 40px; }
  .s-mx-40 { margin-left: 40px; margin-right: 40px; }
  .s-my-40 { margin-top: 40px; margin-bottom: 40px; }
  .s-mt-40 { margin-top: 40px; }
  .s-mr-40 { margin-right: 40px; }
  .s-mb-40 { margin-bottom: 40px; }
  .s-ml-40 { margin-left: 40px; }
  .s-gap-40 { gap: 40px; }
  .s-p-48 { padding: 48px; }
  .s-px-48 { padding-left: 48px; padding-right: 48px; }
  .s-py-48 { padding-top: 48px; padding-bottom: 48px; }
  .s-pt-48 { padding-top: 48px; }
  .s-pr-48 { padding-right: 48px; }
  .s-pb-48 { padding-bottom: 48px; }
  .s-pl-48 { padding-left: 48px; }
  .s-m-48 { margin: 48px; }
  .s-mx-48 { margin-left: 48px; margin-right: 48px; }
  .s-my-48 { margin-top: 48px; margin-bottom: 48px; }
  .s-mt-48 { margin-top: 48px; }
  .s-mr-48 { margin-right: 48px; }
  .s-mb-48 { margin-bottom: 48px; }
  .s-ml-48 { margin-left: 48px; }
  .s-gap-48 { gap: 48px; }
  .s-p-56 { padding: 56px; }
  .s-px-56 { padding-left: 56px; padding-right: 56px; }
  .s-py-56 { padding-top: 56px; padding-bottom: 56px; }
  .s-pt-56 { padding-top: 56px; }
  .s-pr-56 { padding-right: 56px; }
  .s-pb-56 { padding-bottom: 56px; }
  .s-pl-56 { padding-left: 56px; }
  .s-m-56 { margin: 56px; }
  .s-mx-56 { margin-left: 56px; margin-right: 56px; }
  .s-my-56 { margin-top: 56px; margin-bottom: 56px; }
  .s-mt-56 { margin-top: 56px; }
  .s-mr-56 { margin-right: 56px; }
  .s-mb-56 { margin-bottom: 56px; }
  .s-ml-56 { margin-left: 56px; }
  .s-gap-56 { gap: 56px; }
  .s-p-64 { padding: 64px; }
  .s-px-64 { padding-left: 64px; padding-right: 64px; }
  .s-py-64 { padding-top: 64px; padding-bottom: 64px; }
  .s-pt-64 { padding-top: 64px; }
  .s-pr-64 { padding-right: 64px; }
  .s-pb-64 { padding-bottom: 64px; }
  .s-pl-64 { padding-left: 64px; }
  .s-m-64 { margin: 64px; }
  .s-mx-64 { margin-left: 64px; margin-right: 64px; }
  .s-my-64 { margin-top: 64px; margin-bottom: 64px; }
  .s-mt-64 { margin-top: 64px; }
  .s-mr-64 { margin-right: 64px; }
  .s-mb-64 { margin-bottom: 64px; }
  .s-ml-64 { margin-left: 64px; }
  .s-gap-64 { gap: 64px; }
}

/* --- sm (≤ 768px) --- */
@media (max-width: 768px) {
  .sm-p-0 { padding: 0px; }
  .sm-px-0 { padding-left: 0px; padding-right: 0px; }
  .sm-py-0 { padding-top: 0px; padding-bottom: 0px; }
  .sm-pt-0 { padding-top: 0px; }
  .sm-pr-0 { padding-right: 0px; }
  .sm-pb-0 { padding-bottom: 0px; }
  .sm-pl-0 { padding-left: 0px; }
  .sm-m-0 { margin: 0px; }
  .sm-mx-0 { margin-left: 0px; margin-right: 0px; }
  .sm-my-0 { margin-top: 0px; margin-bottom: 0px; }
  .sm-mt-0 { margin-top: 0px; }
  .sm-mr-0 { margin-right: 0px; }
  .sm-mb-0 { margin-bottom: 0px; }
  .sm-ml-0 { margin-left: 0px; }
  .sm-gap-0 { gap: 0px; }
  .sm-p-2 { padding: 2px; }
  .sm-px-2 { padding-left: 2px; padding-right: 2px; }
  .sm-py-2 { padding-top: 2px; padding-bottom: 2px; }
  .sm-pt-2 { padding-top: 2px; }
  .sm-pr-2 { padding-right: 2px; }
  .sm-pb-2 { padding-bottom: 2px; }
  .sm-pl-2 { padding-left: 2px; }
  .sm-m-2 { margin: 2px; }
  .sm-mx-2 { margin-left: 2px; margin-right: 2px; }
  .sm-my-2 { margin-top: 2px; margin-bottom: 2px; }
  .sm-mt-2 { margin-top: 2px; }
  .sm-mr-2 { margin-right: 2px; }
  .sm-mb-2 { margin-bottom: 2px; }
  .sm-ml-2 { margin-left: 2px; }
  .sm-gap-2 { gap: 2px; }
  .sm-p-4 { padding: 4px; }
  .sm-px-4 { padding-left: 4px; padding-right: 4px; }
  .sm-py-4 { padding-top: 4px; padding-bottom: 4px; }
  .sm-pt-4 { padding-top: 4px; }
  .sm-pr-4 { padding-right: 4px; }
  .sm-pb-4 { padding-bottom: 4px; }
  .sm-pl-4 { padding-left: 4px; }
  .sm-m-4 { margin: 4px; }
  .sm-mx-4 { margin-left: 4px; margin-right: 4px; }
  .sm-my-4 { margin-top: 4px; margin-bottom: 4px; }
  .sm-mt-4 { margin-top: 4px; }
  .sm-mr-4 { margin-right: 4px; }
  .sm-mb-4 { margin-bottom: 4px; }
  .sm-ml-4 { margin-left: 4px; }
  .sm-gap-4 { gap: 4px; }
  .sm-p-6 { padding: 6px; }
  .sm-px-6 { padding-left: 6px; padding-right: 6px; }
  .sm-py-6 { padding-top: 6px; padding-bottom: 6px; }
  .sm-pt-6 { padding-top: 6px; }
  .sm-pr-6 { padding-right: 6px; }
  .sm-pb-6 { padding-bottom: 6px; }
  .sm-pl-6 { padding-left: 6px; }
  .sm-m-6 { margin: 6px; }
  .sm-mx-6 { margin-left: 6px; margin-right: 6px; }
  .sm-my-6 { margin-top: 6px; margin-bottom: 6px; }
  .sm-mt-6 { margin-top: 6px; }
  .sm-mr-6 { margin-right: 6px; }
  .sm-mb-6 { margin-bottom: 6px; }
  .sm-ml-6 { margin-left: 6px; }
  .sm-gap-6 { gap: 6px; }
  .sm-p-8 { padding: 8px; }
  .sm-px-8 { padding-left: 8px; padding-right: 8px; }
  .sm-py-8 { padding-top: 8px; padding-bottom: 8px; }
  .sm-pt-8 { padding-top: 8px; }
  .sm-pr-8 { padding-right: 8px; }
  .sm-pb-8 { padding-bottom: 8px; }
  .sm-pl-8 { padding-left: 8px; }
  .sm-m-8 { margin: 8px; }
  .sm-mx-8 { margin-left: 8px; margin-right: 8px; }
  .sm-my-8 { margin-top: 8px; margin-bottom: 8px; }
  .sm-mt-8 { margin-top: 8px; }
  .sm-mr-8 { margin-right: 8px; }
  .sm-mb-8 { margin-bottom: 8px; }
  .sm-ml-8 { margin-left: 8px; }
  .sm-gap-8 { gap: 8px; }
  .sm-p-10 { padding: 10px; }
  .sm-px-10 { padding-left: 10px; padding-right: 10px; }
  .sm-py-10 { padding-top: 10px; padding-bottom: 10px; }
  .sm-pt-10 { padding-top: 10px; }
  .sm-pr-10 { padding-right: 10px; }
  .sm-pb-10 { padding-bottom: 10px; }
  .sm-pl-10 { padding-left: 10px; }
  .sm-m-10 { margin: 10px; }
  .sm-mx-10 { margin-left: 10px; margin-right: 10px; }
  .sm-my-10 { margin-top: 10px; margin-bottom: 10px; }
  .sm-mt-10 { margin-top: 10px; }
  .sm-mr-10 { margin-right: 10px; }
  .sm-mb-10 { margin-bottom: 10px; }
  .sm-ml-10 { margin-left: 10px; }
  .sm-gap-10 { gap: 10px; }
  .sm-p-12 { padding: 12px; }
  .sm-px-12 { padding-left: 12px; padding-right: 12px; }
  .sm-py-12 { padding-top: 12px; padding-bottom: 12px; }
  .sm-pt-12 { padding-top: 12px; }
  .sm-pr-12 { padding-right: 12px; }
  .sm-pb-12 { padding-bottom: 12px; }
  .sm-pl-12 { padding-left: 12px; }
  .sm-m-12 { margin: 12px; }
  .sm-mx-12 { margin-left: 12px; margin-right: 12px; }
  .sm-my-12 { margin-top: 12px; margin-bottom: 12px; }
  .sm-mt-12 { margin-top: 12px; }
  .sm-mr-12 { margin-right: 12px; }
  .sm-mb-12 { margin-bottom: 12px; }
  .sm-ml-12 { margin-left: 12px; }
  .sm-gap-12 { gap: 12px; }
  .sm-p-14 { padding: 14px; }
  .sm-px-14 { padding-left: 14px; padding-right: 14px; }
  .sm-py-14 { padding-top: 14px; padding-bottom: 14px; }
  .sm-pt-14 { padding-top: 14px; }
  .sm-pr-14 { padding-right: 14px; }
  .sm-pb-14 { padding-bottom: 14px; }
  .sm-pl-14 { padding-left: 14px; }
  .sm-m-14 { margin: 14px; }
  .sm-mx-14 { margin-left: 14px; margin-right: 14px; }
  .sm-my-14 { margin-top: 14px; margin-bottom: 14px; }
  .sm-mt-14 { margin-top: 14px; }
  .sm-mr-14 { margin-right: 14px; }
  .sm-mb-14 { margin-bottom: 14px; }
  .sm-ml-14 { margin-left: 14px; }
  .sm-gap-14 { gap: 14px; }
  .sm-p-16 { padding: 16px; }
  .sm-px-16 { padding-left: 16px; padding-right: 16px; }
  .sm-py-16 { padding-top: 16px; padding-bottom: 16px; }
  .sm-pt-16 { padding-top: 16px; }
  .sm-pr-16 { padding-right: 16px; }
  .sm-pb-16 { padding-bottom: 16px; }
  .sm-pl-16 { padding-left: 16px; }
  .sm-m-16 { margin: 16px; }
  .sm-mx-16 { margin-left: 16px; margin-right: 16px; }
  .sm-my-16 { margin-top: 16px; margin-bottom: 16px; }
  .sm-mt-16 { margin-top: 16px; }
  .sm-mr-16 { margin-right: 16px; }
  .sm-mb-16 { margin-bottom: 16px; }
  .sm-ml-16 { margin-left: 16px; }
  .sm-gap-16 { gap: 16px; }
  .sm-p-18 { padding: 18px; }
  .sm-px-18 { padding-left: 18px; padding-right: 18px; }
  .sm-py-18 { padding-top: 18px; padding-bottom: 18px; }
  .sm-pt-18 { padding-top: 18px; }
  .sm-pr-18 { padding-right: 18px; }
  .sm-pb-18 { padding-bottom: 18px; }
  .sm-pl-18 { padding-left: 18px; }
  .sm-m-18 { margin: 18px; }
  .sm-mx-18 { margin-left: 18px; margin-right: 18px; }
  .sm-my-18 { margin-top: 18px; margin-bottom: 18px; }
  .sm-mt-18 { margin-top: 18px; }
  .sm-mr-18 { margin-right: 18px; }
  .sm-mb-18 { margin-bottom: 18px; }
  .sm-ml-18 { margin-left: 18px; }
  .sm-gap-18 { gap: 18px; }
  .sm-p-20 { padding: 20px; }
  .sm-px-20 { padding-left: 20px; padding-right: 20px; }
  .sm-py-20 { padding-top: 20px; padding-bottom: 20px; }
  .sm-pt-20 { padding-top: 20px; }
  .sm-pr-20 { padding-right: 20px; }
  .sm-pb-20 { padding-bottom: 20px; }
  .sm-pl-20 { padding-left: 20px; }
  .sm-m-20 { margin: 20px; }
  .sm-mx-20 { margin-left: 20px; margin-right: 20px; }
  .sm-my-20 { margin-top: 20px; margin-bottom: 20px; }
  .sm-mt-20 { margin-top: 20px; }
  .sm-mr-20 { margin-right: 20px; }
  .sm-mb-20 { margin-bottom: 20px; }
  .sm-ml-20 { margin-left: 20px; }
  .sm-gap-20 { gap: 20px; }
  .sm-p-22 { padding: 22px; }
  .sm-px-22 { padding-left: 22px; padding-right: 22px; }
  .sm-py-22 { padding-top: 22px; padding-bottom: 22px; }
  .sm-pt-22 { padding-top: 22px; }
  .sm-pr-22 { padding-right: 22px; }
  .sm-pb-22 { padding-bottom: 22px; }
  .sm-pl-22 { padding-left: 22px; }
  .sm-m-22 { margin: 22px; }
  .sm-mx-22 { margin-left: 22px; margin-right: 22px; }
  .sm-my-22 { margin-top: 22px; margin-bottom: 22px; }
  .sm-mt-22 { margin-top: 22px; }
  .sm-mr-22 { margin-right: 22px; }
  .sm-mb-22 { margin-bottom: 22px; }
  .sm-ml-22 { margin-left: 22px; }
  .sm-gap-22 { gap: 22px; }
  .sm-p-24 { padding: 24px; }
  .sm-px-24 { padding-left: 24px; padding-right: 24px; }
  .sm-py-24 { padding-top: 24px; padding-bottom: 24px; }
  .sm-pt-24 { padding-top: 24px; }
  .sm-pr-24 { padding-right: 24px; }
  .sm-pb-24 { padding-bottom: 24px; }
  .sm-pl-24 { padding-left: 24px; }
  .sm-m-24 { margin: 24px; }
  .sm-mx-24 { margin-left: 24px; margin-right: 24px; }
  .sm-my-24 { margin-top: 24px; margin-bottom: 24px; }
  .sm-mt-24 { margin-top: 24px; }
  .sm-mr-24 { margin-right: 24px; }
  .sm-mb-24 { margin-bottom: 24px; }
  .sm-ml-24 { margin-left: 24px; }
  .sm-gap-24 { gap: 24px; }
  .sm-p-26 { padding: 26px; }
  .sm-px-26 { padding-left: 26px; padding-right: 26px; }
  .sm-py-26 { padding-top: 26px; padding-bottom: 26px; }
  .sm-pt-26 { padding-top: 26px; }
  .sm-pr-26 { padding-right: 26px; }
  .sm-pb-26 { padding-bottom: 26px; }
  .sm-pl-26 { padding-left: 26px; }
  .sm-m-26 { margin: 26px; }
  .sm-mx-26 { margin-left: 26px; margin-right: 26px; }
  .sm-my-26 { margin-top: 26px; margin-bottom: 26px; }
  .sm-mt-26 { margin-top: 26px; }
  .sm-mr-26 { margin-right: 26px; }
  .sm-mb-26 { margin-bottom: 26px; }
  .sm-ml-26 { margin-left: 26px; }
  .sm-gap-26 { gap: 26px; }
  .sm-p-28 { padding: 28px; }
  .sm-px-28 { padding-left: 28px; padding-right: 28px; }
  .sm-py-28 { padding-top: 28px; padding-bottom: 28px; }
  .sm-pt-28 { padding-top: 28px; }
  .sm-pr-28 { padding-right: 28px; }
  .sm-pb-28 { padding-bottom: 28px; }
  .sm-pl-28 { padding-left: 28px; }
  .sm-m-28 { margin: 28px; }
  .sm-mx-28 { margin-left: 28px; margin-right: 28px; }
  .sm-my-28 { margin-top: 28px; margin-bottom: 28px; }
  .sm-mt-28 { margin-top: 28px; }
  .sm-mr-28 { margin-right: 28px; }
  .sm-mb-28 { margin-bottom: 28px; }
  .sm-ml-28 { margin-left: 28px; }
  .sm-gap-28 { gap: 28px; }
  .sm-p-30 { padding: 30px; }
  .sm-px-30 { padding-left: 30px; padding-right: 30px; }
  .sm-py-30 { padding-top: 30px; padding-bottom: 30px; }
  .sm-pt-30 { padding-top: 30px; }
  .sm-pr-30 { padding-right: 30px; }
  .sm-pb-30 { padding-bottom: 30px; }
  .sm-pl-30 { padding-left: 30px; }
  .sm-m-30 { margin: 30px; }
  .sm-mx-30 { margin-left: 30px; margin-right: 30px; }
  .sm-my-30 { margin-top: 30px; margin-bottom: 30px; }
  .sm-mt-30 { margin-top: 30px; }
  .sm-mr-30 { margin-right: 30px; }
  .sm-mb-30 { margin-bottom: 30px; }
  .sm-ml-30 { margin-left: 30px; }
  .sm-gap-30 { gap: 30px; }
  .sm-p-32 { padding: 32px; }
  .sm-px-32 { padding-left: 32px; padding-right: 32px; }
  .sm-py-32 { padding-top: 32px; padding-bottom: 32px; }
  .sm-pt-32 { padding-top: 32px; }
  .sm-pr-32 { padding-right: 32px; }
  .sm-pb-32 { padding-bottom: 32px; }
  .sm-pl-32 { padding-left: 32px; }
  .sm-m-32 { margin: 32px; }
  .sm-mx-32 { margin-left: 32px; margin-right: 32px; }
  .sm-my-32 { margin-top: 32px; margin-bottom: 32px; }
  .sm-mt-32 { margin-top: 32px; }
  .sm-mr-32 { margin-right: 32px; }
  .sm-mb-32 { margin-bottom: 32px; }
  .sm-ml-32 { margin-left: 32px; }
  .sm-gap-32 { gap: 32px; }
  .sm-p-36 { padding: 36px; }
  .sm-px-36 { padding-left: 36px; padding-right: 36px; }
  .sm-py-36 { padding-top: 36px; padding-bottom: 36px; }
  .sm-pt-36 { padding-top: 36px; }
  .sm-pr-36 { padding-right: 36px; }
  .sm-pb-36 { padding-bottom: 36px; }
  .sm-pl-36 { padding-left: 36px; }
  .sm-m-36 { margin: 36px; }
  .sm-mx-36 { margin-left: 36px; margin-right: 36px; }
  .sm-my-36 { margin-top: 36px; margin-bottom: 36px; }
  .sm-mt-36 { margin-top: 36px; }
  .sm-mr-36 { margin-right: 36px; }
  .sm-mb-36 { margin-bottom: 36px; }
  .sm-ml-36 { margin-left: 36px; }
  .sm-gap-36 { gap: 36px; }
  .sm-p-40 { padding: 40px; }
  .sm-px-40 { padding-left: 40px; padding-right: 40px; }
  .sm-py-40 { padding-top: 40px; padding-bottom: 40px; }
  .sm-pt-40 { padding-top: 40px; }
  .sm-pr-40 { padding-right: 40px; }
  .sm-pb-40 { padding-bottom: 40px; }
  .sm-pl-40 { padding-left: 40px; }
  .sm-m-40 { margin: 40px; }
  .sm-mx-40 { margin-left: 40px; margin-right: 40px; }
  .sm-my-40 { margin-top: 40px; margin-bottom: 40px; }
  .sm-mt-40 { margin-top: 40px; }
  .sm-mr-40 { margin-right: 40px; }
  .sm-mb-40 { margin-bottom: 40px; }
  .sm-ml-40 { margin-left: 40px; }
  .sm-gap-40 { gap: 40px; }
  .sm-p-48 { padding: 48px; }
  .sm-px-48 { padding-left: 48px; padding-right: 48px; }
  .sm-py-48 { padding-top: 48px; padding-bottom: 48px; }
  .sm-pt-48 { padding-top: 48px; }
  .sm-pr-48 { padding-right: 48px; }
  .sm-pb-48 { padding-bottom: 48px; }
  .sm-pl-48 { padding-left: 48px; }
  .sm-m-48 { margin: 48px; }
  .sm-mx-48 { margin-left: 48px; margin-right: 48px; }
  .sm-my-48 { margin-top: 48px; margin-bottom: 48px; }
  .sm-mt-48 { margin-top: 48px; }
  .sm-mr-48 { margin-right: 48px; }
  .sm-mb-48 { margin-bottom: 48px; }
  .sm-ml-48 { margin-left: 48px; }
  .sm-gap-48 { gap: 48px; }
  .sm-p-56 { padding: 56px; }
  .sm-px-56 { padding-left: 56px; padding-right: 56px; }
  .sm-py-56 { padding-top: 56px; padding-bottom: 56px; }
  .sm-pt-56 { padding-top: 56px; }
  .sm-pr-56 { padding-right: 56px; }
  .sm-pb-56 { padding-bottom: 56px; }
  .sm-pl-56 { padding-left: 56px; }
  .sm-m-56 { margin: 56px; }
  .sm-mx-56 { margin-left: 56px; margin-right: 56px; }
  .sm-my-56 { margin-top: 56px; margin-bottom: 56px; }
  .sm-mt-56 { margin-top: 56px; }
  .sm-mr-56 { margin-right: 56px; }
  .sm-mb-56 { margin-bottom: 56px; }
  .sm-ml-56 { margin-left: 56px; }
  .sm-gap-56 { gap: 56px; }
  .sm-p-64 { padding: 64px; }
  .sm-px-64 { padding-left: 64px; padding-right: 64px; }
  .sm-py-64 { padding-top: 64px; padding-bottom: 64px; }
  .sm-pt-64 { padding-top: 64px; }
  .sm-pr-64 { padding-right: 64px; }
  .sm-pb-64 { padding-bottom: 64px; }
  .sm-pl-64 { padding-left: 64px; }
  .sm-m-64 { margin: 64px; }
  .sm-mx-64 { margin-left: 64px; margin-right: 64px; }
  .sm-my-64 { margin-top: 64px; margin-bottom: 64px; }
  .sm-mt-64 { margin-top: 64px; }
  .sm-mr-64 { margin-right: 64px; }
  .sm-mb-64 { margin-bottom: 64px; }
  .sm-ml-64 { margin-left: 64px; }
  .sm-gap-64 { gap: 64px; }
}

/* --- md (≤ 1024px) --- */
@media (max-width: 1024px) {
  .md-p-0 { padding: 0px; }
  .md-px-0 { padding-left: 0px; padding-right: 0px; }
  .md-py-0 { padding-top: 0px; padding-bottom: 0px; }
  .md-pt-0 { padding-top: 0px; }
  .md-pr-0 { padding-right: 0px; }
  .md-pb-0 { padding-bottom: 0px; }
  .md-pl-0 { padding-left: 0px; }
  .md-m-0 { margin: 0px; }
  .md-mx-0 { margin-left: 0px; margin-right: 0px; }
  .md-my-0 { margin-top: 0px; margin-bottom: 0px; }
  .md-mt-0 { margin-top: 0px; }
  .md-mr-0 { margin-right: 0px; }
  .md-mb-0 { margin-bottom: 0px; }
  .md-ml-0 { margin-left: 0px; }
  .md-gap-0 { gap: 0px; }
  .md-p-2 { padding: 2px; }
  .md-px-2 { padding-left: 2px; padding-right: 2px; }
  .md-py-2 { padding-top: 2px; padding-bottom: 2px; }
  .md-pt-2 { padding-top: 2px; }
  .md-pr-2 { padding-right: 2px; }
  .md-pb-2 { padding-bottom: 2px; }
  .md-pl-2 { padding-left: 2px; }
  .md-m-2 { margin: 2px; }
  .md-mx-2 { margin-left: 2px; margin-right: 2px; }
  .md-my-2 { margin-top: 2px; margin-bottom: 2px; }
  .md-mt-2 { margin-top: 2px; }
  .md-mr-2 { margin-right: 2px; }
  .md-mb-2 { margin-bottom: 2px; }
  .md-ml-2 { margin-left: 2px; }
  .md-gap-2 { gap: 2px; }
  .md-p-4 { padding: 4px; }
  .md-px-4 { padding-left: 4px; padding-right: 4px; }
  .md-py-4 { padding-top: 4px; padding-bottom: 4px; }
  .md-pt-4 { padding-top: 4px; }
  .md-pr-4 { padding-right: 4px; }
  .md-pb-4 { padding-bottom: 4px; }
  .md-pl-4 { padding-left: 4px; }
  .md-m-4 { margin: 4px; }
  .md-mx-4 { margin-left: 4px; margin-right: 4px; }
  .md-my-4 { margin-top: 4px; margin-bottom: 4px; }
  .md-mt-4 { margin-top: 4px; }
  .md-mr-4 { margin-right: 4px; }
  .md-mb-4 { margin-bottom: 4px; }
  .md-ml-4 { margin-left: 4px; }
  .md-gap-4 { gap: 4px; }
  .md-p-6 { padding: 6px; }
  .md-px-6 { padding-left: 6px; padding-right: 6px; }
  .md-py-6 { padding-top: 6px; padding-bottom: 6px; }
  .md-pt-6 { padding-top: 6px; }
  .md-pr-6 { padding-right: 6px; }
  .md-pb-6 { padding-bottom: 6px; }
  .md-pl-6 { padding-left: 6px; }
  .md-m-6 { margin: 6px; }
  .md-mx-6 { margin-left: 6px; margin-right: 6px; }
  .md-my-6 { margin-top: 6px; margin-bottom: 6px; }
  .md-mt-6 { margin-top: 6px; }
  .md-mr-6 { margin-right: 6px; }
  .md-mb-6 { margin-bottom: 6px; }
  .md-ml-6 { margin-left: 6px; }
  .md-gap-6 { gap: 6px; }
  .md-p-8 { padding: 8px; }
  .md-px-8 { padding-left: 8px; padding-right: 8px; }
  .md-py-8 { padding-top: 8px; padding-bottom: 8px; }
  .md-pt-8 { padding-top: 8px; }
  .md-pr-8 { padding-right: 8px; }
  .md-pb-8 { padding-bottom: 8px; }
  .md-pl-8 { padding-left: 8px; }
  .md-m-8 { margin: 8px; }
  .md-mx-8 { margin-left: 8px; margin-right: 8px; }
  .md-my-8 { margin-top: 8px; margin-bottom: 8px; }
  .md-mt-8 { margin-top: 8px; }
  .md-mr-8 { margin-right: 8px; }
  .md-mb-8 { margin-bottom: 8px; }
  .md-ml-8 { margin-left: 8px; }
  .md-gap-8 { gap: 8px; }
  .md-p-10 { padding: 10px; }
  .md-px-10 { padding-left: 10px; padding-right: 10px; }
  .md-py-10 { padding-top: 10px; padding-bottom: 10px; }
  .md-pt-10 { padding-top: 10px; }
  .md-pr-10 { padding-right: 10px; }
  .md-pb-10 { padding-bottom: 10px; }
  .md-pl-10 { padding-left: 10px; }
  .md-m-10 { margin: 10px; }
  .md-mx-10 { margin-left: 10px; margin-right: 10px; }
  .md-my-10 { margin-top: 10px; margin-bottom: 10px; }
  .md-mt-10 { margin-top: 10px; }
  .md-mr-10 { margin-right: 10px; }
  .md-mb-10 { margin-bottom: 10px; }
  .md-ml-10 { margin-left: 10px; }
  .md-gap-10 { gap: 10px; }
  .md-p-12 { padding: 12px; }
  .md-px-12 { padding-left: 12px; padding-right: 12px; }
  .md-py-12 { padding-top: 12px; padding-bottom: 12px; }
  .md-pt-12 { padding-top: 12px; }
  .md-pr-12 { padding-right: 12px; }
  .md-pb-12 { padding-bottom: 12px; }
  .md-pl-12 { padding-left: 12px; }
  .md-m-12 { margin: 12px; }
  .md-mx-12 { margin-left: 12px; margin-right: 12px; }
  .md-my-12 { margin-top: 12px; margin-bottom: 12px; }
  .md-mt-12 { margin-top: 12px; }
  .md-mr-12 { margin-right: 12px; }
  .md-mb-12 { margin-bottom: 12px; }
  .md-ml-12 { margin-left: 12px; }
  .md-gap-12 { gap: 12px; }
  .md-p-14 { padding: 14px; }
  .md-px-14 { padding-left: 14px; padding-right: 14px; }
  .md-py-14 { padding-top: 14px; padding-bottom: 14px; }
  .md-pt-14 { padding-top: 14px; }
  .md-pr-14 { padding-right: 14px; }
  .md-pb-14 { padding-bottom: 14px; }
  .md-pl-14 { padding-left: 14px; }
  .md-m-14 { margin: 14px; }
  .md-mx-14 { margin-left: 14px; margin-right: 14px; }
  .md-my-14 { margin-top: 14px; margin-bottom: 14px; }
  .md-mt-14 { margin-top: 14px; }
  .md-mr-14 { margin-right: 14px; }
  .md-mb-14 { margin-bottom: 14px; }
  .md-ml-14 { margin-left: 14px; }
  .md-gap-14 { gap: 14px; }
  .md-p-16 { padding: 16px; }
  .md-px-16 { padding-left: 16px; padding-right: 16px; }
  .md-py-16 { padding-top: 16px; padding-bottom: 16px; }
  .md-pt-16 { padding-top: 16px; }
  .md-pr-16 { padding-right: 16px; }
  .md-pb-16 { padding-bottom: 16px; }
  .md-pl-16 { padding-left: 16px; }
  .md-m-16 { margin: 16px; }
  .md-mx-16 { margin-left: 16px; margin-right: 16px; }
  .md-my-16 { margin-top: 16px; margin-bottom: 16px; }
  .md-mt-16 { margin-top: 16px; }
  .md-mr-16 { margin-right: 16px; }
  .md-mb-16 { margin-bottom: 16px; }
  .md-ml-16 { margin-left: 16px; }
  .md-gap-16 { gap: 16px; }
  .md-p-18 { padding: 18px; }
  .md-px-18 { padding-left: 18px; padding-right: 18px; }
  .md-py-18 { padding-top: 18px; padding-bottom: 18px; }
  .md-pt-18 { padding-top: 18px; }
  .md-pr-18 { padding-right: 18px; }
  .md-pb-18 { padding-bottom: 18px; }
  .md-pl-18 { padding-left: 18px; }
  .md-m-18 { margin: 18px; }
  .md-mx-18 { margin-left: 18px; margin-right: 18px; }
  .md-my-18 { margin-top: 18px; margin-bottom: 18px; }
  .md-mt-18 { margin-top: 18px; }
  .md-mr-18 { margin-right: 18px; }
  .md-mb-18 { margin-bottom: 18px; }
  .md-ml-18 { margin-left: 18px; }
  .md-gap-18 { gap: 18px; }
  .md-p-20 { padding: 20px; }
  .md-px-20 { padding-left: 20px; padding-right: 20px; }
  .md-py-20 { padding-top: 20px; padding-bottom: 20px; }
  .md-pt-20 { padding-top: 20px; }
  .md-pr-20 { padding-right: 20px; }
  .md-pb-20 { padding-bottom: 20px; }
  .md-pl-20 { padding-left: 20px; }
  .md-m-20 { margin: 20px; }
  .md-mx-20 { margin-left: 20px; margin-right: 20px; }
  .md-my-20 { margin-top: 20px; margin-bottom: 20px; }
  .md-mt-20 { margin-top: 20px; }
  .md-mr-20 { margin-right: 20px; }
  .md-mb-20 { margin-bottom: 20px; }
  .md-ml-20 { margin-left: 20px; }
  .md-gap-20 { gap: 20px; }
  .md-p-22 { padding: 22px; }
  .md-px-22 { padding-left: 22px; padding-right: 22px; }
  .md-py-22 { padding-top: 22px; padding-bottom: 22px; }
  .md-pt-22 { padding-top: 22px; }
  .md-pr-22 { padding-right: 22px; }
  .md-pb-22 { padding-bottom: 22px; }
  .md-pl-22 { padding-left: 22px; }
  .md-m-22 { margin: 22px; }
  .md-mx-22 { margin-left: 22px; margin-right: 22px; }
  .md-my-22 { margin-top: 22px; margin-bottom: 22px; }
  .md-mt-22 { margin-top: 22px; }
  .md-mr-22 { margin-right: 22px; }
  .md-mb-22 { margin-bottom: 22px; }
  .md-ml-22 { margin-left: 22px; }
  .md-gap-22 { gap: 22px; }
  .md-p-24 { padding: 24px; }
  .md-px-24 { padding-left: 24px; padding-right: 24px; }
  .md-py-24 { padding-top: 24px; padding-bottom: 24px; }
  .md-pt-24 { padding-top: 24px; }
  .md-pr-24 { padding-right: 24px; }
  .md-pb-24 { padding-bottom: 24px; }
  .md-pl-24 { padding-left: 24px; }
  .md-m-24 { margin: 24px; }
  .md-mx-24 { margin-left: 24px; margin-right: 24px; }
  .md-my-24 { margin-top: 24px; margin-bottom: 24px; }
  .md-mt-24 { margin-top: 24px; }
  .md-mr-24 { margin-right: 24px; }
  .md-mb-24 { margin-bottom: 24px; }
  .md-ml-24 { margin-left: 24px; }
  .md-gap-24 { gap: 24px; }
  .md-p-26 { padding: 26px; }
  .md-px-26 { padding-left: 26px; padding-right: 26px; }
  .md-py-26 { padding-top: 26px; padding-bottom: 26px; }
  .md-pt-26 { padding-top: 26px; }
  .md-pr-26 { padding-right: 26px; }
  .md-pb-26 { padding-bottom: 26px; }
  .md-pl-26 { padding-left: 26px; }
  .md-m-26 { margin: 26px; }
  .md-mx-26 { margin-left: 26px; margin-right: 26px; }
  .md-my-26 { margin-top: 26px; margin-bottom: 26px; }
  .md-mt-26 { margin-top: 26px; }
  .md-mr-26 { margin-right: 26px; }
  .md-mb-26 { margin-bottom: 26px; }
  .md-ml-26 { margin-left: 26px; }
  .md-gap-26 { gap: 26px; }
  .md-p-28 { padding: 28px; }
  .md-px-28 { padding-left: 28px; padding-right: 28px; }
  .md-py-28 { padding-top: 28px; padding-bottom: 28px; }
  .md-pt-28 { padding-top: 28px; }
  .md-pr-28 { padding-right: 28px; }
  .md-pb-28 { padding-bottom: 28px; }
  .md-pl-28 { padding-left: 28px; }
  .md-m-28 { margin: 28px; }
  .md-mx-28 { margin-left: 28px; margin-right: 28px; }
  .md-my-28 { margin-top: 28px; margin-bottom: 28px; }
  .md-mt-28 { margin-top: 28px; }
  .md-mr-28 { margin-right: 28px; }
  .md-mb-28 { margin-bottom: 28px; }
  .md-ml-28 { margin-left: 28px; }
  .md-gap-28 { gap: 28px; }
  .md-p-30 { padding: 30px; }
  .md-px-30 { padding-left: 30px; padding-right: 30px; }
  .md-py-30 { padding-top: 30px; padding-bottom: 30px; }
  .md-pt-30 { padding-top: 30px; }
  .md-pr-30 { padding-right: 30px; }
  .md-pb-30 { padding-bottom: 30px; }
  .md-pl-30 { padding-left: 30px; }
  .md-m-30 { margin: 30px; }
  .md-mx-30 { margin-left: 30px; margin-right: 30px; }
  .md-my-30 { margin-top: 30px; margin-bottom: 30px; }
  .md-mt-30 { margin-top: 30px; }
  .md-mr-30 { margin-right: 30px; }
  .md-mb-30 { margin-bottom: 30px; }
  .md-ml-30 { margin-left: 30px; }
  .md-gap-30 { gap: 30px; }
  .md-p-32 { padding: 32px; }
  .md-px-32 { padding-left: 32px; padding-right: 32px; }
  .md-py-32 { padding-top: 32px; padding-bottom: 32px; }
  .md-pt-32 { padding-top: 32px; }
  .md-pr-32 { padding-right: 32px; }
  .md-pb-32 { padding-bottom: 32px; }
  .md-pl-32 { padding-left: 32px; }
  .md-m-32 { margin: 32px; }
  .md-mx-32 { margin-left: 32px; margin-right: 32px; }
  .md-my-32 { margin-top: 32px; margin-bottom: 32px; }
  .md-mt-32 { margin-top: 32px; }
  .md-mr-32 { margin-right: 32px; }
  .md-mb-32 { margin-bottom: 32px; }
  .md-ml-32 { margin-left: 32px; }
  .md-gap-32 { gap: 32px; }
  .md-p-36 { padding: 36px; }
  .md-px-36 { padding-left: 36px; padding-right: 36px; }
  .md-py-36 { padding-top: 36px; padding-bottom: 36px; }
  .md-pt-36 { padding-top: 36px; }
  .md-pr-36 { padding-right: 36px; }
  .md-pb-36 { padding-bottom: 36px; }
  .md-pl-36 { padding-left: 36px; }
  .md-m-36 { margin: 36px; }
  .md-mx-36 { margin-left: 36px; margin-right: 36px; }
  .md-my-36 { margin-top: 36px; margin-bottom: 36px; }
  .md-mt-36 { margin-top: 36px; }
  .md-mr-36 { margin-right: 36px; }
  .md-mb-36 { margin-bottom: 36px; }
  .md-ml-36 { margin-left: 36px; }
  .md-gap-36 { gap: 36px; }
  .md-p-40 { padding: 40px; }
  .md-px-40 { padding-left: 40px; padding-right: 40px; }
  .md-py-40 { padding-top: 40px; padding-bottom: 40px; }
  .md-pt-40 { padding-top: 40px; }
  .md-pr-40 { padding-right: 40px; }
  .md-pb-40 { padding-bottom: 40px; }
  .md-pl-40 { padding-left: 40px; }
  .md-m-40 { margin: 40px; }
  .md-mx-40 { margin-left: 40px; margin-right: 40px; }
  .md-my-40 { margin-top: 40px; margin-bottom: 40px; }
  .md-mt-40 { margin-top: 40px; }
  .md-mr-40 { margin-right: 40px; }
  .md-mb-40 { margin-bottom: 40px; }
  .md-ml-40 { margin-left: 40px; }
  .md-gap-40 { gap: 40px; }
  .md-p-48 { padding: 48px; }
  .md-px-48 { padding-left: 48px; padding-right: 48px; }
  .md-py-48 { padding-top: 48px; padding-bottom: 48px; }
  .md-pt-48 { padding-top: 48px; }
  .md-pr-48 { padding-right: 48px; }
  .md-pb-48 { padding-bottom: 48px; }
  .md-pl-48 { padding-left: 48px; }
  .md-m-48 { margin: 48px; }
  .md-mx-48 { margin-left: 48px; margin-right: 48px; }
  .md-my-48 { margin-top: 48px; margin-bottom: 48px; }
  .md-mt-48 { margin-top: 48px; }
  .md-mr-48 { margin-right: 48px; }
  .md-mb-48 { margin-bottom: 48px; }
  .md-ml-48 { margin-left: 48px; }
  .md-gap-48 { gap: 48px; }
  .md-p-56 { padding: 56px; }
  .md-px-56 { padding-left: 56px; padding-right: 56px; }
  .md-py-56 { padding-top: 56px; padding-bottom: 56px; }
  .md-pt-56 { padding-top: 56px; }
  .md-pr-56 { padding-right: 56px; }
  .md-pb-56 { padding-bottom: 56px; }
  .md-pl-56 { padding-left: 56px; }
  .md-m-56 { margin: 56px; }
  .md-mx-56 { margin-left: 56px; margin-right: 56px; }
  .md-my-56 { margin-top: 56px; margin-bottom: 56px; }
  .md-mt-56 { margin-top: 56px; }
  .md-mr-56 { margin-right: 56px; }
  .md-mb-56 { margin-bottom: 56px; }
  .md-ml-56 { margin-left: 56px; }
  .md-gap-56 { gap: 56px; }
  .md-p-64 { padding: 64px; }
  .md-px-64 { padding-left: 64px; padding-right: 64px; }
  .md-py-64 { padding-top: 64px; padding-bottom: 64px; }
  .md-pt-64 { padding-top: 64px; }
  .md-pr-64 { padding-right: 64px; }
  .md-pb-64 { padding-bottom: 64px; }
  .md-pl-64 { padding-left: 64px; }
  .md-m-64 { margin: 64px; }
  .md-mx-64 { margin-left: 64px; margin-right: 64px; }
  .md-my-64 { margin-top: 64px; margin-bottom: 64px; }
  .md-mt-64 { margin-top: 64px; }
  .md-mr-64 { margin-right: 64px; }
  .md-mb-64 { margin-bottom: 64px; }
  .md-ml-64 { margin-left: 64px; }
  .md-gap-64 { gap: 64px; }
}

/* --- lg (≤ 1280px) --- */
@media (max-width: 1280px) {
  .lg-p-0 { padding: 0px; }
  .lg-px-0 { padding-left: 0px; padding-right: 0px; }
  .lg-py-0 { padding-top: 0px; padding-bottom: 0px; }
  .lg-pt-0 { padding-top: 0px; }
  .lg-pr-0 { padding-right: 0px; }
  .lg-pb-0 { padding-bottom: 0px; }
  .lg-pl-0 { padding-left: 0px; }
  .lg-m-0 { margin: 0px; }
  .lg-mx-0 { margin-left: 0px; margin-right: 0px; }
  .lg-my-0 { margin-top: 0px; margin-bottom: 0px; }
  .lg-mt-0 { margin-top: 0px; }
  .lg-mr-0 { margin-right: 0px; }
  .lg-mb-0 { margin-bottom: 0px; }
  .lg-ml-0 { margin-left: 0px; }
  .lg-gap-0 { gap: 0px; }
  .lg-p-2 { padding: 2px; }
  .lg-px-2 { padding-left: 2px; padding-right: 2px; }
  .lg-py-2 { padding-top: 2px; padding-bottom: 2px; }
  .lg-pt-2 { padding-top: 2px; }
  .lg-pr-2 { padding-right: 2px; }
  .lg-pb-2 { padding-bottom: 2px; }
  .lg-pl-2 { padding-left: 2px; }
  .lg-m-2 { margin: 2px; }
  .lg-mx-2 { margin-left: 2px; margin-right: 2px; }
  .lg-my-2 { margin-top: 2px; margin-bottom: 2px; }
  .lg-mt-2 { margin-top: 2px; }
  .lg-mr-2 { margin-right: 2px; }
  .lg-mb-2 { margin-bottom: 2px; }
  .lg-ml-2 { margin-left: 2px; }
  .lg-gap-2 { gap: 2px; }
  .lg-p-4 { padding: 4px; }
  .lg-px-4 { padding-left: 4px; padding-right: 4px; }
  .lg-py-4 { padding-top: 4px; padding-bottom: 4px; }
  .lg-pt-4 { padding-top: 4px; }
  .lg-pr-4 { padding-right: 4px; }
  .lg-pb-4 { padding-bottom: 4px; }
  .lg-pl-4 { padding-left: 4px; }
  .lg-m-4 { margin: 4px; }
  .lg-mx-4 { margin-left: 4px; margin-right: 4px; }
  .lg-my-4 { margin-top: 4px; margin-bottom: 4px; }
  .lg-mt-4 { margin-top: 4px; }
  .lg-mr-4 { margin-right: 4px; }
  .lg-mb-4 { margin-bottom: 4px; }
  .lg-ml-4 { margin-left: 4px; }
  .lg-gap-4 { gap: 4px; }
  .lg-p-6 { padding: 6px; }
  .lg-px-6 { padding-left: 6px; padding-right: 6px; }
  .lg-py-6 { padding-top: 6px; padding-bottom: 6px; }
  .lg-pt-6 { padding-top: 6px; }
  .lg-pr-6 { padding-right: 6px; }
  .lg-pb-6 { padding-bottom: 6px; }
  .lg-pl-6 { padding-left: 6px; }
  .lg-m-6 { margin: 6px; }
  .lg-mx-6 { margin-left: 6px; margin-right: 6px; }
  .lg-my-6 { margin-top: 6px; margin-bottom: 6px; }
  .lg-mt-6 { margin-top: 6px; }
  .lg-mr-6 { margin-right: 6px; }
  .lg-mb-6 { margin-bottom: 6px; }
  .lg-ml-6 { margin-left: 6px; }
  .lg-gap-6 { gap: 6px; }
  .lg-p-8 { padding: 8px; }
  .lg-px-8 { padding-left: 8px; padding-right: 8px; }
  .lg-py-8 { padding-top: 8px; padding-bottom: 8px; }
  .lg-pt-8 { padding-top: 8px; }
  .lg-pr-8 { padding-right: 8px; }
  .lg-pb-8 { padding-bottom: 8px; }
  .lg-pl-8 { padding-left: 8px; }
  .lg-m-8 { margin: 8px; }
  .lg-mx-8 { margin-left: 8px; margin-right: 8px; }
  .lg-my-8 { margin-top: 8px; margin-bottom: 8px; }
  .lg-mt-8 { margin-top: 8px; }
  .lg-mr-8 { margin-right: 8px; }
  .lg-mb-8 { margin-bottom: 8px; }
  .lg-ml-8 { margin-left: 8px; }
  .lg-gap-8 { gap: 8px; }
  .lg-p-10 { padding: 10px; }
  .lg-px-10 { padding-left: 10px; padding-right: 10px; }
  .lg-py-10 { padding-top: 10px; padding-bottom: 10px; }
  .lg-pt-10 { padding-top: 10px; }
  .lg-pr-10 { padding-right: 10px; }
  .lg-pb-10 { padding-bottom: 10px; }
  .lg-pl-10 { padding-left: 10px; }
  .lg-m-10 { margin: 10px; }
  .lg-mx-10 { margin-left: 10px; margin-right: 10px; }
  .lg-my-10 { margin-top: 10px; margin-bottom: 10px; }
  .lg-mt-10 { margin-top: 10px; }
  .lg-mr-10 { margin-right: 10px; }
  .lg-mb-10 { margin-bottom: 10px; }
  .lg-ml-10 { margin-left: 10px; }
  .lg-gap-10 { gap: 10px; }
  .lg-p-12 { padding: 12px; }
  .lg-px-12 { padding-left: 12px; padding-right: 12px; }
  .lg-py-12 { padding-top: 12px; padding-bottom: 12px; }
  .lg-pt-12 { padding-top: 12px; }
  .lg-pr-12 { padding-right: 12px; }
  .lg-pb-12 { padding-bottom: 12px; }
  .lg-pl-12 { padding-left: 12px; }
  .lg-m-12 { margin: 12px; }
  .lg-mx-12 { margin-left: 12px; margin-right: 12px; }
  .lg-my-12 { margin-top: 12px; margin-bottom: 12px; }
  .lg-mt-12 { margin-top: 12px; }
  .lg-mr-12 { margin-right: 12px; }
  .lg-mb-12 { margin-bottom: 12px; }
  .lg-ml-12 { margin-left: 12px; }
  .lg-gap-12 { gap: 12px; }
  .lg-p-14 { padding: 14px; }
  .lg-px-14 { padding-left: 14px; padding-right: 14px; }
  .lg-py-14 { padding-top: 14px; padding-bottom: 14px; }
  .lg-pt-14 { padding-top: 14px; }
  .lg-pr-14 { padding-right: 14px; }
  .lg-pb-14 { padding-bottom: 14px; }
  .lg-pl-14 { padding-left: 14px; }
  .lg-m-14 { margin: 14px; }
  .lg-mx-14 { margin-left: 14px; margin-right: 14px; }
  .lg-my-14 { margin-top: 14px; margin-bottom: 14px; }
  .lg-mt-14 { margin-top: 14px; }
  .lg-mr-14 { margin-right: 14px; }
  .lg-mb-14 { margin-bottom: 14px; }
  .lg-ml-14 { margin-left: 14px; }
  .lg-gap-14 { gap: 14px; }
  .lg-p-16 { padding: 16px; }
  .lg-px-16 { padding-left: 16px; padding-right: 16px; }
  .lg-py-16 { padding-top: 16px; padding-bottom: 16px; }
  .lg-pt-16 { padding-top: 16px; }
  .lg-pr-16 { padding-right: 16px; }
  .lg-pb-16 { padding-bottom: 16px; }
  .lg-pl-16 { padding-left: 16px; }
  .lg-m-16 { margin: 16px; }
  .lg-mx-16 { margin-left: 16px; margin-right: 16px; }
  .lg-my-16 { margin-top: 16px; margin-bottom: 16px; }
  .lg-mt-16 { margin-top: 16px; }
  .lg-mr-16 { margin-right: 16px; }
  .lg-mb-16 { margin-bottom: 16px; }
  .lg-ml-16 { margin-left: 16px; }
  .lg-gap-16 { gap: 16px; }
  .lg-p-18 { padding: 18px; }
  .lg-px-18 { padding-left: 18px; padding-right: 18px; }
  .lg-py-18 { padding-top: 18px; padding-bottom: 18px; }
  .lg-pt-18 { padding-top: 18px; }
  .lg-pr-18 { padding-right: 18px; }
  .lg-pb-18 { padding-bottom: 18px; }
  .lg-pl-18 { padding-left: 18px; }
  .lg-m-18 { margin: 18px; }
  .lg-mx-18 { margin-left: 18px; margin-right: 18px; }
  .lg-my-18 { margin-top: 18px; margin-bottom: 18px; }
  .lg-mt-18 { margin-top: 18px; }
  .lg-mr-18 { margin-right: 18px; }
  .lg-mb-18 { margin-bottom: 18px; }
  .lg-ml-18 { margin-left: 18px; }
  .lg-gap-18 { gap: 18px; }
  .lg-p-20 { padding: 20px; }
  .lg-px-20 { padding-left: 20px; padding-right: 20px; }
  .lg-py-20 { padding-top: 20px; padding-bottom: 20px; }
  .lg-pt-20 { padding-top: 20px; }
  .lg-pr-20 { padding-right: 20px; }
  .lg-pb-20 { padding-bottom: 20px; }
  .lg-pl-20 { padding-left: 20px; }
  .lg-m-20 { margin: 20px; }
  .lg-mx-20 { margin-left: 20px; margin-right: 20px; }
  .lg-my-20 { margin-top: 20px; margin-bottom: 20px; }
  .lg-mt-20 { margin-top: 20px; }
  .lg-mr-20 { margin-right: 20px; }
  .lg-mb-20 { margin-bottom: 20px; }
  .lg-ml-20 { margin-left: 20px; }
  .lg-gap-20 { gap: 20px; }
  .lg-p-22 { padding: 22px; }
  .lg-px-22 { padding-left: 22px; padding-right: 22px; }
  .lg-py-22 { padding-top: 22px; padding-bottom: 22px; }
  .lg-pt-22 { padding-top: 22px; }
  .lg-pr-22 { padding-right: 22px; }
  .lg-pb-22 { padding-bottom: 22px; }
  .lg-pl-22 { padding-left: 22px; }
  .lg-m-22 { margin: 22px; }
  .lg-mx-22 { margin-left: 22px; margin-right: 22px; }
  .lg-my-22 { margin-top: 22px; margin-bottom: 22px; }
  .lg-mt-22 { margin-top: 22px; }
  .lg-mr-22 { margin-right: 22px; }
  .lg-mb-22 { margin-bottom: 22px; }
  .lg-ml-22 { margin-left: 22px; }
  .lg-gap-22 { gap: 22px; }
  .lg-p-24 { padding: 24px; }
  .lg-px-24 { padding-left: 24px; padding-right: 24px; }
  .lg-py-24 { padding-top: 24px; padding-bottom: 24px; }
  .lg-pt-24 { padding-top: 24px; }
  .lg-pr-24 { padding-right: 24px; }
  .lg-pb-24 { padding-bottom: 24px; }
  .lg-pl-24 { padding-left: 24px; }
  .lg-m-24 { margin: 24px; }
  .lg-mx-24 { margin-left: 24px; margin-right: 24px; }
  .lg-my-24 { margin-top: 24px; margin-bottom: 24px; }
  .lg-mt-24 { margin-top: 24px; }
  .lg-mr-24 { margin-right: 24px; }
  .lg-mb-24 { margin-bottom: 24px; }
  .lg-ml-24 { margin-left: 24px; }
  .lg-gap-24 { gap: 24px; }
  .lg-p-26 { padding: 26px; }
  .lg-px-26 { padding-left: 26px; padding-right: 26px; }
  .lg-py-26 { padding-top: 26px; padding-bottom: 26px; }
  .lg-pt-26 { padding-top: 26px; }
  .lg-pr-26 { padding-right: 26px; }
  .lg-pb-26 { padding-bottom: 26px; }
  .lg-pl-26 { padding-left: 26px; }
  .lg-m-26 { margin: 26px; }
  .lg-mx-26 { margin-left: 26px; margin-right: 26px; }
  .lg-my-26 { margin-top: 26px; margin-bottom: 26px; }
  .lg-mt-26 { margin-top: 26px; }
  .lg-mr-26 { margin-right: 26px; }
  .lg-mb-26 { margin-bottom: 26px; }
  .lg-ml-26 { margin-left: 26px; }
  .lg-gap-26 { gap: 26px; }
  .lg-p-28 { padding: 28px; }
  .lg-px-28 { padding-left: 28px; padding-right: 28px; }
  .lg-py-28 { padding-top: 28px; padding-bottom: 28px; }
  .lg-pt-28 { padding-top: 28px; }
  .lg-pr-28 { padding-right: 28px; }
  .lg-pb-28 { padding-bottom: 28px; }
  .lg-pl-28 { padding-left: 28px; }
  .lg-m-28 { margin: 28px; }
  .lg-mx-28 { margin-left: 28px; margin-right: 28px; }
  .lg-my-28 { margin-top: 28px; margin-bottom: 28px; }
  .lg-mt-28 { margin-top: 28px; }
  .lg-mr-28 { margin-right: 28px; }
  .lg-mb-28 { margin-bottom: 28px; }
  .lg-ml-28 { margin-left: 28px; }
  .lg-gap-28 { gap: 28px; }
  .lg-p-30 { padding: 30px; }
  .lg-px-30 { padding-left: 30px; padding-right: 30px; }
  .lg-py-30 { padding-top: 30px; padding-bottom: 30px; }
  .lg-pt-30 { padding-top: 30px; }
  .lg-pr-30 { padding-right: 30px; }
  .lg-pb-30 { padding-bottom: 30px; }
  .lg-pl-30 { padding-left: 30px; }
  .lg-m-30 { margin: 30px; }
  .lg-mx-30 { margin-left: 30px; margin-right: 30px; }
  .lg-my-30 { margin-top: 30px; margin-bottom: 30px; }
  .lg-mt-30 { margin-top: 30px; }
  .lg-mr-30 { margin-right: 30px; }
  .lg-mb-30 { margin-bottom: 30px; }
  .lg-ml-30 { margin-left: 30px; }
  .lg-gap-30 { gap: 30px; }
  .lg-p-32 { padding: 32px; }
  .lg-px-32 { padding-left: 32px; padding-right: 32px; }
  .lg-py-32 { padding-top: 32px; padding-bottom: 32px; }
  .lg-pt-32 { padding-top: 32px; }
  .lg-pr-32 { padding-right: 32px; }
  .lg-pb-32 { padding-bottom: 32px; }
  .lg-pl-32 { padding-left: 32px; }
  .lg-m-32 { margin: 32px; }
  .lg-mx-32 { margin-left: 32px; margin-right: 32px; }
  .lg-my-32 { margin-top: 32px; margin-bottom: 32px; }
  .lg-mt-32 { margin-top: 32px; }
  .lg-mr-32 { margin-right: 32px; }
  .lg-mb-32 { margin-bottom: 32px; }
  .lg-ml-32 { margin-left: 32px; }
  .lg-gap-32 { gap: 32px; }
  .lg-p-36 { padding: 36px; }
  .lg-px-36 { padding-left: 36px; padding-right: 36px; }
  .lg-py-36 { padding-top: 36px; padding-bottom: 36px; }
  .lg-pt-36 { padding-top: 36px; }
  .lg-pr-36 { padding-right: 36px; }
  .lg-pb-36 { padding-bottom: 36px; }
  .lg-pl-36 { padding-left: 36px; }
  .lg-m-36 { margin: 36px; }
  .lg-mx-36 { margin-left: 36px; margin-right: 36px; }
  .lg-my-36 { margin-top: 36px; margin-bottom: 36px; }
  .lg-mt-36 { margin-top: 36px; }
  .lg-mr-36 { margin-right: 36px; }
  .lg-mb-36 { margin-bottom: 36px; }
  .lg-ml-36 { margin-left: 36px; }
  .lg-gap-36 { gap: 36px; }
  .lg-p-40 { padding: 40px; }
  .lg-px-40 { padding-left: 40px; padding-right: 40px; }
  .lg-py-40 { padding-top: 40px; padding-bottom: 40px; }
  .lg-pt-40 { padding-top: 40px; }
  .lg-pr-40 { padding-right: 40px; }
  .lg-pb-40 { padding-bottom: 40px; }
  .lg-pl-40 { padding-left: 40px; }
  .lg-m-40 { margin: 40px; }
  .lg-mx-40 { margin-left: 40px; margin-right: 40px; }
  .lg-my-40 { margin-top: 40px; margin-bottom: 40px; }
  .lg-mt-40 { margin-top: 40px; }
  .lg-mr-40 { margin-right: 40px; }
  .lg-mb-40 { margin-bottom: 40px; }
  .lg-ml-40 { margin-left: 40px; }
  .lg-gap-40 { gap: 40px; }
  .lg-p-48 { padding: 48px; }
  .lg-px-48 { padding-left: 48px; padding-right: 48px; }
  .lg-py-48 { padding-top: 48px; padding-bottom: 48px; }
  .lg-pt-48 { padding-top: 48px; }
  .lg-pr-48 { padding-right: 48px; }
  .lg-pb-48 { padding-bottom: 48px; }
  .lg-pl-48 { padding-left: 48px; }
  .lg-m-48 { margin: 48px; }
  .lg-mx-48 { margin-left: 48px; margin-right: 48px; }
  .lg-my-48 { margin-top: 48px; margin-bottom: 48px; }
  .lg-mt-48 { margin-top: 48px; }
  .lg-mr-48 { margin-right: 48px; }
  .lg-mb-48 { margin-bottom: 48px; }
  .lg-ml-48 { margin-left: 48px; }
  .lg-gap-48 { gap: 48px; }
  .lg-p-56 { padding: 56px; }
  .lg-px-56 { padding-left: 56px; padding-right: 56px; }
  .lg-py-56 { padding-top: 56px; padding-bottom: 56px; }
  .lg-pt-56 { padding-top: 56px; }
  .lg-pr-56 { padding-right: 56px; }
  .lg-pb-56 { padding-bottom: 56px; }
  .lg-pl-56 { padding-left: 56px; }
  .lg-m-56 { margin: 56px; }
  .lg-mx-56 { margin-left: 56px; margin-right: 56px; }
  .lg-my-56 { margin-top: 56px; margin-bottom: 56px; }
  .lg-mt-56 { margin-top: 56px; }
  .lg-mr-56 { margin-right: 56px; }
  .lg-mb-56 { margin-bottom: 56px; }
  .lg-ml-56 { margin-left: 56px; }
  .lg-gap-56 { gap: 56px; }
  .lg-p-64 { padding: 64px; }
  .lg-px-64 { padding-left: 64px; padding-right: 64px; }
  .lg-py-64 { padding-top: 64px; padding-bottom: 64px; }
  .lg-pt-64 { padding-top: 64px; }
  .lg-pr-64 { padding-right: 64px; }
  .lg-pb-64 { padding-bottom: 64px; }
  .lg-pl-64 { padding-left: 64px; }
  .lg-m-64 { margin: 64px; }
  .lg-mx-64 { margin-left: 64px; margin-right: 64px; }
  .lg-my-64 { margin-top: 64px; margin-bottom: 64px; }
  .lg-mt-64 { margin-top: 64px; }
  .lg-mr-64 { margin-right: 64px; }
  .lg-mb-64 { margin-bottom: 64px; }
  .lg-ml-64 { margin-left: 64px; }
  .lg-gap-64 { gap: 64px; }
}

/* --- xl (≤ 1440px) --- */
@media (max-width: 1440px) {
  .xl-p-0 { padding: 0px; }
  .xl-px-0 { padding-left: 0px; padding-right: 0px; }
  .xl-py-0 { padding-top: 0px; padding-bottom: 0px; }
  .xl-pt-0 { padding-top: 0px; }
  .xl-pr-0 { padding-right: 0px; }
  .xl-pb-0 { padding-bottom: 0px; }
  .xl-pl-0 { padding-left: 0px; }
  .xl-m-0 { margin: 0px; }
  .xl-mx-0 { margin-left: 0px; margin-right: 0px; }
  .xl-my-0 { margin-top: 0px; margin-bottom: 0px; }
  .xl-mt-0 { margin-top: 0px; }
  .xl-mr-0 { margin-right: 0px; }
  .xl-mb-0 { margin-bottom: 0px; }
  .xl-ml-0 { margin-left: 0px; }
  .xl-gap-0 { gap: 0px; }
  .xl-p-2 { padding: 2px; }
  .xl-px-2 { padding-left: 2px; padding-right: 2px; }
  .xl-py-2 { padding-top: 2px; padding-bottom: 2px; }
  .xl-pt-2 { padding-top: 2px; }
  .xl-pr-2 { padding-right: 2px; }
  .xl-pb-2 { padding-bottom: 2px; }
  .xl-pl-2 { padding-left: 2px; }
  .xl-m-2 { margin: 2px; }
  .xl-mx-2 { margin-left: 2px; margin-right: 2px; }
  .xl-my-2 { margin-top: 2px; margin-bottom: 2px; }
  .xl-mt-2 { margin-top: 2px; }
  .xl-mr-2 { margin-right: 2px; }
  .xl-mb-2 { margin-bottom: 2px; }
  .xl-ml-2 { margin-left: 2px; }
  .xl-gap-2 { gap: 2px; }
  .xl-p-4 { padding: 4px; }
  .xl-px-4 { padding-left: 4px; padding-right: 4px; }
  .xl-py-4 { padding-top: 4px; padding-bottom: 4px; }
  .xl-pt-4 { padding-top: 4px; }
  .xl-pr-4 { padding-right: 4px; }
  .xl-pb-4 { padding-bottom: 4px; }
  .xl-pl-4 { padding-left: 4px; }
  .xl-m-4 { margin: 4px; }
  .xl-mx-4 { margin-left: 4px; margin-right: 4px; }
  .xl-my-4 { margin-top: 4px; margin-bottom: 4px; }
  .xl-mt-4 { margin-top: 4px; }
  .xl-mr-4 { margin-right: 4px; }
  .xl-mb-4 { margin-bottom: 4px; }
  .xl-ml-4 { margin-left: 4px; }
  .xl-gap-4 { gap: 4px; }
  .xl-p-6 { padding: 6px; }
  .xl-px-6 { padding-left: 6px; padding-right: 6px; }
  .xl-py-6 { padding-top: 6px; padding-bottom: 6px; }
  .xl-pt-6 { padding-top: 6px; }
  .xl-pr-6 { padding-right: 6px; }
  .xl-pb-6 { padding-bottom: 6px; }
  .xl-pl-6 { padding-left: 6px; }
  .xl-m-6 { margin: 6px; }
  .xl-mx-6 { margin-left: 6px; margin-right: 6px; }
  .xl-my-6 { margin-top: 6px; margin-bottom: 6px; }
  .xl-mt-6 { margin-top: 6px; }
  .xl-mr-6 { margin-right: 6px; }
  .xl-mb-6 { margin-bottom: 6px; }
  .xl-ml-6 { margin-left: 6px; }
  .xl-gap-6 { gap: 6px; }
  .xl-p-8 { padding: 8px; }
  .xl-px-8 { padding-left: 8px; padding-right: 8px; }
  .xl-py-8 { padding-top: 8px; padding-bottom: 8px; }
  .xl-pt-8 { padding-top: 8px; }
  .xl-pr-8 { padding-right: 8px; }
  .xl-pb-8 { padding-bottom: 8px; }
  .xl-pl-8 { padding-left: 8px; }
  .xl-m-8 { margin: 8px; }
  .xl-mx-8 { margin-left: 8px; margin-right: 8px; }
  .xl-my-8 { margin-top: 8px; margin-bottom: 8px; }
  .xl-mt-8 { margin-top: 8px; }
  .xl-mr-8 { margin-right: 8px; }
  .xl-mb-8 { margin-bottom: 8px; }
  .xl-ml-8 { margin-left: 8px; }
  .xl-gap-8 { gap: 8px; }
  .xl-p-10 { padding: 10px; }
  .xl-px-10 { padding-left: 10px; padding-right: 10px; }
  .xl-py-10 { padding-top: 10px; padding-bottom: 10px; }
  .xl-pt-10 { padding-top: 10px; }
  .xl-pr-10 { padding-right: 10px; }
  .xl-pb-10 { padding-bottom: 10px; }
  .xl-pl-10 { padding-left: 10px; }
  .xl-m-10 { margin: 10px; }
  .xl-mx-10 { margin-left: 10px; margin-right: 10px; }
  .xl-my-10 { margin-top: 10px; margin-bottom: 10px; }
  .xl-mt-10 { margin-top: 10px; }
  .xl-mr-10 { margin-right: 10px; }
  .xl-mb-10 { margin-bottom: 10px; }
  .xl-ml-10 { margin-left: 10px; }
  .xl-gap-10 { gap: 10px; }
  .xl-p-12 { padding: 12px; }
  .xl-px-12 { padding-left: 12px; padding-right: 12px; }
  .xl-py-12 { padding-top: 12px; padding-bottom: 12px; }
  .xl-pt-12 { padding-top: 12px; }
  .xl-pr-12 { padding-right: 12px; }
  .xl-pb-12 { padding-bottom: 12px; }
  .xl-pl-12 { padding-left: 12px; }
  .xl-m-12 { margin: 12px; }
  .xl-mx-12 { margin-left: 12px; margin-right: 12px; }
  .xl-my-12 { margin-top: 12px; margin-bottom: 12px; }
  .xl-mt-12 { margin-top: 12px; }
  .xl-mr-12 { margin-right: 12px; }
  .xl-mb-12 { margin-bottom: 12px; }
  .xl-ml-12 { margin-left: 12px; }
  .xl-gap-12 { gap: 12px; }
  .xl-p-14 { padding: 14px; }
  .xl-px-14 { padding-left: 14px; padding-right: 14px; }
  .xl-py-14 { padding-top: 14px; padding-bottom: 14px; }
  .xl-pt-14 { padding-top: 14px; }
  .xl-pr-14 { padding-right: 14px; }
  .xl-pb-14 { padding-bottom: 14px; }
  .xl-pl-14 { padding-left: 14px; }
  .xl-m-14 { margin: 14px; }
  .xl-mx-14 { margin-left: 14px; margin-right: 14px; }
  .xl-my-14 { margin-top: 14px; margin-bottom: 14px; }
  .xl-mt-14 { margin-top: 14px; }
  .xl-mr-14 { margin-right: 14px; }
  .xl-mb-14 { margin-bottom: 14px; }
  .xl-ml-14 { margin-left: 14px; }
  .xl-gap-14 { gap: 14px; }
  .xl-p-16 { padding: 16px; }
  .xl-px-16 { padding-left: 16px; padding-right: 16px; }
  .xl-py-16 { padding-top: 16px; padding-bottom: 16px; }
  .xl-pt-16 { padding-top: 16px; }
  .xl-pr-16 { padding-right: 16px; }
  .xl-pb-16 { padding-bottom: 16px; }
  .xl-pl-16 { padding-left: 16px; }
  .xl-m-16 { margin: 16px; }
  .xl-mx-16 { margin-left: 16px; margin-right: 16px; }
  .xl-my-16 { margin-top: 16px; margin-bottom: 16px; }
  .xl-mt-16 { margin-top: 16px; }
  .xl-mr-16 { margin-right: 16px; }
  .xl-mb-16 { margin-bottom: 16px; }
  .xl-ml-16 { margin-left: 16px; }
  .xl-gap-16 { gap: 16px; }
  .xl-p-18 { padding: 18px; }
  .xl-px-18 { padding-left: 18px; padding-right: 18px; }
  .xl-py-18 { padding-top: 18px; padding-bottom: 18px; }
  .xl-pt-18 { padding-top: 18px; }
  .xl-pr-18 { padding-right: 18px; }
  .xl-pb-18 { padding-bottom: 18px; }
  .xl-pl-18 { padding-left: 18px; }
  .xl-m-18 { margin: 18px; }
  .xl-mx-18 { margin-left: 18px; margin-right: 18px; }
  .xl-my-18 { margin-top: 18px; margin-bottom: 18px; }
  .xl-mt-18 { margin-top: 18px; }
  .xl-mr-18 { margin-right: 18px; }
  .xl-mb-18 { margin-bottom: 18px; }
  .xl-ml-18 { margin-left: 18px; }
  .xl-gap-18 { gap: 18px; }
  .xl-p-20 { padding: 20px; }
  .xl-px-20 { padding-left: 20px; padding-right: 20px; }
  .xl-py-20 { padding-top: 20px; padding-bottom: 20px; }
  .xl-pt-20 { padding-top: 20px; }
  .xl-pr-20 { padding-right: 20px; }
  .xl-pb-20 { padding-bottom: 20px; }
  .xl-pl-20 { padding-left: 20px; }
  .xl-m-20 { margin: 20px; }
  .xl-mx-20 { margin-left: 20px; margin-right: 20px; }
  .xl-my-20 { margin-top: 20px; margin-bottom: 20px; }
  .xl-mt-20 { margin-top: 20px; }
  .xl-mr-20 { margin-right: 20px; }
  .xl-mb-20 { margin-bottom: 20px; }
  .xl-ml-20 { margin-left: 20px; }
  .xl-gap-20 { gap: 20px; }
  .xl-p-22 { padding: 22px; }
  .xl-px-22 { padding-left: 22px; padding-right: 22px; }
  .xl-py-22 { padding-top: 22px; padding-bottom: 22px; }
  .xl-pt-22 { padding-top: 22px; }
  .xl-pr-22 { padding-right: 22px; }
  .xl-pb-22 { padding-bottom: 22px; }
  .xl-pl-22 { padding-left: 22px; }
  .xl-m-22 { margin: 22px; }
  .xl-mx-22 { margin-left: 22px; margin-right: 22px; }
  .xl-my-22 { margin-top: 22px; margin-bottom: 22px; }
  .xl-mt-22 { margin-top: 22px; }
  .xl-mr-22 { margin-right: 22px; }
  .xl-mb-22 { margin-bottom: 22px; }
  .xl-ml-22 { margin-left: 22px; }
  .xl-gap-22 { gap: 22px; }
  .xl-p-24 { padding: 24px; }
  .xl-px-24 { padding-left: 24px; padding-right: 24px; }
  .xl-py-24 { padding-top: 24px; padding-bottom: 24px; }
  .xl-pt-24 { padding-top: 24px; }
  .xl-pr-24 { padding-right: 24px; }
  .xl-pb-24 { padding-bottom: 24px; }
  .xl-pl-24 { padding-left: 24px; }
  .xl-m-24 { margin: 24px; }
  .xl-mx-24 { margin-left: 24px; margin-right: 24px; }
  .xl-my-24 { margin-top: 24px; margin-bottom: 24px; }
  .xl-mt-24 { margin-top: 24px; }
  .xl-mr-24 { margin-right: 24px; }
  .xl-mb-24 { margin-bottom: 24px; }
  .xl-ml-24 { margin-left: 24px; }
  .xl-gap-24 { gap: 24px; }
  .xl-p-26 { padding: 26px; }
  .xl-px-26 { padding-left: 26px; padding-right: 26px; }
  .xl-py-26 { padding-top: 26px; padding-bottom: 26px; }
  .xl-pt-26 { padding-top: 26px; }
  .xl-pr-26 { padding-right: 26px; }
  .xl-pb-26 { padding-bottom: 26px; }
  .xl-pl-26 { padding-left: 26px; }
  .xl-m-26 { margin: 26px; }
  .xl-mx-26 { margin-left: 26px; margin-right: 26px; }
  .xl-my-26 { margin-top: 26px; margin-bottom: 26px; }
  .xl-mt-26 { margin-top: 26px; }
  .xl-mr-26 { margin-right: 26px; }
  .xl-mb-26 { margin-bottom: 26px; }
  .xl-ml-26 { margin-left: 26px; }
  .xl-gap-26 { gap: 26px; }
  .xl-p-28 { padding: 28px; }
  .xl-px-28 { padding-left: 28px; padding-right: 28px; }
  .xl-py-28 { padding-top: 28px; padding-bottom: 28px; }
  .xl-pt-28 { padding-top: 28px; }
  .xl-pr-28 { padding-right: 28px; }
  .xl-pb-28 { padding-bottom: 28px; }
  .xl-pl-28 { padding-left: 28px; }
  .xl-m-28 { margin: 28px; }
  .xl-mx-28 { margin-left: 28px; margin-right: 28px; }
  .xl-my-28 { margin-top: 28px; margin-bottom: 28px; }
  .xl-mt-28 { margin-top: 28px; }
  .xl-mr-28 { margin-right: 28px; }
  .xl-mb-28 { margin-bottom: 28px; }
  .xl-ml-28 { margin-left: 28px; }
  .xl-gap-28 { gap: 28px; }
  .xl-p-30 { padding: 30px; }
  .xl-px-30 { padding-left: 30px; padding-right: 30px; }
  .xl-py-30 { padding-top: 30px; padding-bottom: 30px; }
  .xl-pt-30 { padding-top: 30px; }
  .xl-pr-30 { padding-right: 30px; }
  .xl-pb-30 { padding-bottom: 30px; }
  .xl-pl-30 { padding-left: 30px; }
  .xl-m-30 { margin: 30px; }
  .xl-mx-30 { margin-left: 30px; margin-right: 30px; }
  .xl-my-30 { margin-top: 30px; margin-bottom: 30px; }
  .xl-mt-30 { margin-top: 30px; }
  .xl-mr-30 { margin-right: 30px; }
  .xl-mb-30 { margin-bottom: 30px; }
  .xl-ml-30 { margin-left: 30px; }
  .xl-gap-30 { gap: 30px; }
  .xl-p-32 { padding: 32px; }
  .xl-px-32 { padding-left: 32px; padding-right: 32px; }
  .xl-py-32 { padding-top: 32px; padding-bottom: 32px; }
  .xl-pt-32 { padding-top: 32px; }
  .xl-pr-32 { padding-right: 32px; }
  .xl-pb-32 { padding-bottom: 32px; }
  .xl-pl-32 { padding-left: 32px; }
  .xl-m-32 { margin: 32px; }
  .xl-mx-32 { margin-left: 32px; margin-right: 32px; }
  .xl-my-32 { margin-top: 32px; margin-bottom: 32px; }
  .xl-mt-32 { margin-top: 32px; }
  .xl-mr-32 { margin-right: 32px; }
  .xl-mb-32 { margin-bottom: 32px; }
  .xl-ml-32 { margin-left: 32px; }
  .xl-gap-32 { gap: 32px; }
  .xl-p-36 { padding: 36px; }
  .xl-px-36 { padding-left: 36px; padding-right: 36px; }
  .xl-py-36 { padding-top: 36px; padding-bottom: 36px; }
  .xl-pt-36 { padding-top: 36px; }
  .xl-pr-36 { padding-right: 36px; }
  .xl-pb-36 { padding-bottom: 36px; }
  .xl-pl-36 { padding-left: 36px; }
  .xl-m-36 { margin: 36px; }
  .xl-mx-36 { margin-left: 36px; margin-right: 36px; }
  .xl-my-36 { margin-top: 36px; margin-bottom: 36px; }
  .xl-mt-36 { margin-top: 36px; }
  .xl-mr-36 { margin-right: 36px; }
  .xl-mb-36 { margin-bottom: 36px; }
  .xl-ml-36 { margin-left: 36px; }
  .xl-gap-36 { gap: 36px; }
  .xl-p-40 { padding: 40px; }
  .xl-px-40 { padding-left: 40px; padding-right: 40px; }
  .xl-py-40 { padding-top: 40px; padding-bottom: 40px; }
  .xl-pt-40 { padding-top: 40px; }
  .xl-pr-40 { padding-right: 40px; }
  .xl-pb-40 { padding-bottom: 40px; }
  .xl-pl-40 { padding-left: 40px; }
  .xl-m-40 { margin: 40px; }
  .xl-mx-40 { margin-left: 40px; margin-right: 40px; }
  .xl-my-40 { margin-top: 40px; margin-bottom: 40px; }
  .xl-mt-40 { margin-top: 40px; }
  .xl-mr-40 { margin-right: 40px; }
  .xl-mb-40 { margin-bottom: 40px; }
  .xl-ml-40 { margin-left: 40px; }
  .xl-gap-40 { gap: 40px; }
  .xl-p-48 { padding: 48px; }
  .xl-px-48 { padding-left: 48px; padding-right: 48px; }
  .xl-py-48 { padding-top: 48px; padding-bottom: 48px; }
  .xl-pt-48 { padding-top: 48px; }
  .xl-pr-48 { padding-right: 48px; }
  .xl-pb-48 { padding-bottom: 48px; }
  .xl-pl-48 { padding-left: 48px; }
  .xl-m-48 { margin: 48px; }
  .xl-mx-48 { margin-left: 48px; margin-right: 48px; }
  .xl-my-48 { margin-top: 48px; margin-bottom: 48px; }
  .xl-mt-48 { margin-top: 48px; }
  .xl-mr-48 { margin-right: 48px; }
  .xl-mb-48 { margin-bottom: 48px; }
  .xl-ml-48 { margin-left: 48px; }
  .xl-gap-48 { gap: 48px; }
  .xl-p-56 { padding: 56px; }
  .xl-px-56 { padding-left: 56px; padding-right: 56px; }
  .xl-py-56 { padding-top: 56px; padding-bottom: 56px; }
  .xl-pt-56 { padding-top: 56px; }
  .xl-pr-56 { padding-right: 56px; }
  .xl-pb-56 { padding-bottom: 56px; }
  .xl-pl-56 { padding-left: 56px; }
  .xl-m-56 { margin: 56px; }
  .xl-mx-56 { margin-left: 56px; margin-right: 56px; }
  .xl-my-56 { margin-top: 56px; margin-bottom: 56px; }
  .xl-mt-56 { margin-top: 56px; }
  .xl-mr-56 { margin-right: 56px; }
  .xl-mb-56 { margin-bottom: 56px; }
  .xl-ml-56 { margin-left: 56px; }
  .xl-gap-56 { gap: 56px; }
  .xl-p-64 { padding: 64px; }
  .xl-px-64 { padding-left: 64px; padding-right: 64px; }
  .xl-py-64 { padding-top: 64px; padding-bottom: 64px; }
  .xl-pt-64 { padding-top: 64px; }
  .xl-pr-64 { padding-right: 64px; }
  .xl-pb-64 { padding-bottom: 64px; }
  .xl-pl-64 { padding-left: 64px; }
  .xl-m-64 { margin: 64px; }
  .xl-mx-64 { margin-left: 64px; margin-right: 64px; }
  .xl-my-64 { margin-top: 64px; margin-bottom: 64px; }
  .xl-mt-64 { margin-top: 64px; }
  .xl-mr-64 { margin-right: 64px; }
  .xl-mb-64 { margin-bottom: 64px; }
  .xl-ml-64 { margin-left: 64px; }
  .xl-gap-64 { gap: 64px; }
}

/* ==========================================================================
   Responsive Width Utilities
   Prefix pattern: {breakpoint}-w-{value}
   These apply only when the viewport is at or below the breakpoint width.
   ========================================================================== */

/* --- xs (≤ 480px) --- */
@media (max-width: 480px) {
  .xs-w-0 { width: 0; }
  .xs-w-auto { width: auto; }
  .xs-w-full { width: 100%; }
  .xs-w-5pct { width: 5%; }
  .xs-w-10pct { width: 10%; }
  .xs-w-15pct { width: 15%; }
  .xs-w-20pct { width: 20%; }
  .xs-w-25pct { width: 25%; }
  .xs-w-30pct { width: 30%; }
  .xs-w-35pct { width: 35%; }
  .xs-w-40pct { width: 40%; }
  .xs-w-45pct { width: 45%; }
  .xs-w-50pct { width: 50%; }
  .xs-w-55pct { width: 55%; }
  .xs-w-60pct { width: 60%; }
  .xs-w-65pct { width: 65%; }
  .xs-w-70pct { width: 70%; }
  .xs-w-75pct { width: 75%; }
  .xs-w-80pct { width: 80%; }
  .xs-w-85pct { width: 85%; }
  .xs-w-90pct { width: 90%; }
  .xs-w-95pct { width: 95%; }
}

/* --- s (≤ 640px) --- */
@media (max-width: 640px) {
  .s-w-0 { width: 0; }
  .s-w-auto { width: auto; }
  .s-w-full { width: 100%; }
  .s-w-5pct { width: 5%; }
  .s-w-10pct { width: 10%; }
  .s-w-15pct { width: 15%; }
  .s-w-20pct { width: 20%; }
  .s-w-25pct { width: 25%; }
  .s-w-30pct { width: 30%; }
  .s-w-35pct { width: 35%; }
  .s-w-40pct { width: 40%; }
  .s-w-45pct { width: 45%; }
  .s-w-50pct { width: 50%; }
  .s-w-55pct { width: 55%; }
  .s-w-60pct { width: 60%; }
  .s-w-65pct { width: 65%; }
  .s-w-70pct { width: 70%; }
  .s-w-75pct { width: 75%; }
  .s-w-80pct { width: 80%; }
  .s-w-85pct { width: 85%; }
  .s-w-90pct { width: 90%; }
  .s-w-95pct { width: 95%; }
}

/* --- sm (≤ 768px) --- */
@media (max-width: 768px) {
  .sm-w-0 { width: 0; }
  .sm-w-auto { width: auto; }
  .sm-w-full { width: 100%; }
  .sm-w-5pct { width: 5%; }
  .sm-w-10pct { width: 10%; }
  .sm-w-15pct { width: 15%; }
  .sm-w-20pct { width: 20%; }
  .sm-w-25pct { width: 25%; }
  .sm-w-30pct { width: 30%; }
  .sm-w-35pct { width: 35%; }
  .sm-w-40pct { width: 40%; }
  .sm-w-45pct { width: 45%; }
  .sm-w-50pct { width: 50%; }
  .sm-w-55pct { width: 55%; }
  .sm-w-60pct { width: 60%; }
  .sm-w-65pct { width: 65%; }
  .sm-w-70pct { width: 70%; }
  .sm-w-75pct { width: 75%; }
  .sm-w-80pct { width: 80%; }
  .sm-w-85pct { width: 85%; }
  .sm-w-90pct { width: 90%; }
  .sm-w-95pct { width: 95%; }
}

/* --- md (≤ 1024px) --- */
@media (max-width: 1024px) {
  .md-w-0 { width: 0; }
  .md-w-auto { width: auto; }
  .md-w-full { width: 100%; }
  .md-w-5pct { width: 5%; }
  .md-w-10pct { width: 10%; }
  .md-w-15pct { width: 15%; }
  .md-w-20pct { width: 20%; }
  .md-w-25pct { width: 25%; }
  .md-w-30pct { width: 30%; }
  .md-w-35pct { width: 35%; }
  .md-w-40pct { width: 40%; }
  .md-w-45pct { width: 45%; }
  .md-w-50pct { width: 50%; }
  .md-w-55pct { width: 55%; }
  .md-w-60pct { width: 60%; }
  .md-w-65pct { width: 65%; }
  .md-w-70pct { width: 70%; }
  .md-w-75pct { width: 75%; }
  .md-w-80pct { width: 80%; }
  .md-w-85pct { width: 85%; }
  .md-w-90pct { width: 90%; }
  .md-w-95pct { width: 95%; }
}

/* --- lg (≤ 1280px) --- */
@media (max-width: 1280px) {
  .lg-w-0 { width: 0; }
  .lg-w-auto { width: auto; }
  .lg-w-full { width: 100%; }
  .lg-w-5pct { width: 5%; }
  .lg-w-10pct { width: 10%; }
  .lg-w-15pct { width: 15%; }
  .lg-w-20pct { width: 20%; }
  .lg-w-25pct { width: 25%; }
  .lg-w-30pct { width: 30%; }
  .lg-w-35pct { width: 35%; }
  .lg-w-40pct { width: 40%; }
  .lg-w-45pct { width: 45%; }
  .lg-w-50pct { width: 50%; }
  .lg-w-55pct { width: 55%; }
  .lg-w-60pct { width: 60%; }
  .lg-w-65pct { width: 65%; }
  .lg-w-70pct { width: 70%; }
  .lg-w-75pct { width: 75%; }
  .lg-w-80pct { width: 80%; }
  .lg-w-85pct { width: 85%; }
  .lg-w-90pct { width: 90%; }
  .lg-w-95pct { width: 95%; }
}

/* --- xl (≤ 1440px) --- */
@media (max-width: 1440px) {
  .xl-w-0 { width: 0; }
  .xl-w-auto { width: auto; }
  .xl-w-full { width: 100%; }
  .xl-w-5pct { width: 5%; }
  .xl-w-10pct { width: 10%; }
  .xl-w-15pct { width: 15%; }
  .xl-w-20pct { width: 20%; }
  .xl-w-25pct { width: 25%; }
  .xl-w-30pct { width: 30%; }
  .xl-w-35pct { width: 35%; }
  .xl-w-40pct { width: 40%; }
  .xl-w-45pct { width: 45%; }
  .xl-w-50pct { width: 50%; }
  .xl-w-55pct { width: 55%; }
  .xl-w-60pct { width: 60%; }
  .xl-w-65pct { width: 65%; }
  .xl-w-70pct { width: 70%; }
  .xl-w-75pct { width: 75%; }
  .xl-w-80pct { width: 80%; }
  .xl-w-85pct { width: 85%; }
  .xl-w-90pct { width: 90%; }
  .xl-w-95pct { width: 95%; }
}