@charset "UTF-8";
/* -------------------------------------------------------------
   Bootstrap 5 Spacing Utilities (Custom Breakpoints)
   Breakpoints:
     - xs: applies to all (no prefix)
     - sm: ≥768px
     - md: ≥992px
     - lg: ≥1200px
   Includes:
     - margin (m, mt, mb, ms, me, mx, my)
     - padding (p, pt, pb, ps, pe, px, py)
     - gap utilities (gap, row-gap, column-gap)
     - sizes 0–5 + auto for margin
   NO negative margins
-------------------------------------------------------------- */

/* ===========================
   SPACING SCALE (Bootstrap)
=========================== */
:root {
  --sp-0: 0;
  --sp-1: .25rem;
  --sp-2: .5rem;
  --sp-3: 1rem;
  --sp-4: 1.5rem;
  --sp-5: 3rem;
}

/* ===========================
   BASE (XS: applies to all)
=========================== */

/* ---- MARGIN (all sides) ---- */
.m-0 { margin: var(--sp-0) !important; }
.m-1 { margin: var(--sp-1) !important; }
.m-2 { margin: var(--sp-2) !important; }
.m-3 { margin: var(--sp-3) !important; }
.m-4 { margin: var(--sp-4) !important; }
.m-5 { margin: var(--sp-5) !important; }
.m-auto { margin: auto !important; }

/* margin-top */
.mt-0 { margin-top: var(--sp-0) !important; }
.mt-1 { margin-top: var(--sp-1) !important; }
.mt-2 { margin-top: var(--sp-2) !important; }
.mt-3 { margin-top: var(--sp-3) !important; }
.mt-4 { margin-top: var(--sp-4) !important; }
.mt-5 { margin-top: var(--sp-5) !important; }
.mt-auto { margin-top: auto !important; }

/* margin-bottom */
.mb-0 { margin-bottom: var(--sp-0) !important; }
.mb-1 { margin-bottom: var(--sp-1) !important; }
.mb-2 { margin-bottom: var(--sp-2) !important; }
.mb-3 { margin-bottom: var(--sp-3) !important; }
.mb-4 { margin-bottom: var(--sp-4) !important; }
.mb-5 { margin-bottom: var(--sp-5) !important; }
.mb-auto { margin-bottom: auto !important; }

/* margin-start (left) */
.ms-0 { margin-left: var(--sp-0) !important; }
.ms-1 { margin-left: var(--sp-1) !important; }
.ms-2 { margin-left: var(--sp-2) !important; }
.ms-3 { margin-left: var(--sp-3) !important; }
.ms-4 { margin-left: var(--sp-4) !important; }
.ms-5 { margin-left: var(--sp-5) !important; }
.ms-auto { margin-left: auto !important; }

/* margin-end (right) */
.me-0 { margin-right: var(--sp-0) !important; }
.me-1 { margin-right: var(--sp-1) !important; }
.me-2 { margin-right: var(--sp-2) !important; }
.me-3 { margin-right: var(--sp-3) !important; }
.me-4 { margin-right: var(--sp-4) !important; }
.me-5 { margin-right: var(--sp-5) !important; }
.me-auto { margin-right: auto !important; }

/* margin-x */
.mx-0 { margin-left: var(--sp-0) !important; margin-right: var(--sp-0) !important; }
.mx-1 { margin-left: var(--sp-1) !important; margin-right: var(--sp-1) !important; }
.mx-2 { margin-left: var(--sp-2) !important; margin-right: var(--sp-2) !important; }
.mx-3 { margin-left: var(--sp-3) !important; margin-right: var(--sp-3) !important; }
.mx-4 { margin-left: var(--sp-4) !important; margin-right: var(--sp-4) !important; }
.mx-5 { margin-left: var(--sp-5) !important; margin-right: var(--sp-5) !important; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }

/* margin-y */
.my-0 { margin-top: var(--sp-0) !important; margin-bottom: var(--sp-0) !important; }
.my-1 { margin-top: var(--sp-1) !important; margin-bottom: var(--sp-1) !important; }
.my-2 { margin-top: var(--sp-2) !important; margin-bottom: var(--sp-2) !important; }
.my-3 { margin-top: var(--sp-3) !important; margin-bottom: var(--sp-3) !important; }
.my-4 { margin-top: var(--sp-4) !important; margin-bottom: var(--sp-4) !important; }
.my-5 { margin-top: var(--sp-5) !important; margin-bottom: var(--sp-5) !important; }
.my-auto { margin-top: auto !important; margin-bottom: auto !important; }

/* ---- PADDING (all sides) ---- */
.p-0 { padding: var(--sp-0) !important; }
.p-1 { padding: var(--sp-1) !important; }
.p-2 { padding: var(--sp-2) !important; }
.p-3 { padding: var(--sp-3) !important; }
.p-4 { padding: var(--sp-4) !important; }
.p-5 { padding: var(--sp-5) !important; }

/* padding-top */
.pt-0 { padding-top: var(--sp-0) !important; }
.pt-1 { padding-top: var(--sp-1) !important; }
.pt-2 { padding-top: var(--sp-2) !important; }
.pt-3 { padding-top: var(--sp-3) !important; }
.pt-4 { padding-top: var(--sp-4) !important; }
.pt-5 { padding-top: var(--sp-5) !important; }

/* padding-bottom */
.pb-0 { padding-bottom: var(--sp-0) !important; }
.pb-1 { padding-bottom: var(--sp-1) !important; }
.pb-2 { padding-bottom: var(--sp-2) !important; }
.pb-3 { padding-bottom: var(--sp-3) !important; }
.pb-4 { padding-bottom: var(--sp-4) !important; }
.pb-5 { padding-bottom: var(--sp-5) !important; }

/* padding-start (left) */
.ps-0 { padding-left: var(--sp-0) !important; }
.ps-1 { padding-left: var(--sp-1) !important; }
.ps-2 { padding-left: var(--sp-2) !important; }
.ps-3 { padding-left: var(--sp-3) !important; }
.ps-4 { padding-left: var(--sp-4) !important; }
.ps-5 { padding-left: var(--sp-5) !important; }

/* padding-end (right) */
.pe-0 { padding-right: var(--sp-0) !important; }
.pe-1 { padding-right: var(--sp-1) !important; }
.pe-2 { padding-right: var(--sp-2) !important; }
.pe-3 { padding-right: var(--sp-3) !important; }
.pe-4 { padding-right: var(--sp-4) !important; }
.pe-5 { padding-right: var(--sp-5) !important; }

/* padding-x */
.px-0 { padding-left: var(--sp-0) !important; padding-right: var(--sp-0) !important; }
.px-1 { padding-left: var(--sp-1) !important; padding-right: var(--sp-1) !important; }
.px-2 { padding-left: var(--sp-2) !important; padding-right: var(--sp-2) !important; }
.px-3 { padding-left: var(--sp-3) !important; padding-right: var(--sp-3) !important; }
.px-4 { padding-left: var(--sp-4) !important; padding-right: var(--sp-4) !important; }
.px-5 { padding-left: var(--sp-5) !important; padding-right: var(--sp-5) !important; }

/* padding-y */
.py-0 { padding-top: var(--sp-0) !important; padding-bottom: var(--sp-0) !important; }
.py-1 { padding-top: var(--sp-1) !important; padding-bottom: var(--sp-1) !important; }
.py-2 { padding-top: var(--sp-2) !important; padding-bottom: var(--sp-2) !important; }
.py-3 { padding-top: var(--sp-3) !important; padding-bottom: var(--sp-3) !important; }
.py-4 { padding-top: var(--sp-4) !important; padding-bottom: var(--sp-4) !important; }
.py-5 { padding-top: var(--sp-5) !important; padding-bottom: var(--sp-5) !important; }

/* ---- GAP utilities ---- */
.gap-0 { gap: var(--sp-0) !important; }
.gap-1 { gap: var(--sp-1) !important; }
.gap-2 { gap: var(--sp-2) !important; }
.gap-3 { gap: var(--sp-3) !important; }
.gap-4 { gap: var(--sp-4) !important; }
.gap-5 { gap: var(--sp-5) !important; }

/* row-gap */
.row-gap-0 { row-gap: var(--sp-0) !important; }
.row-gap-1 { row-gap: var(--sp-1) !important; }
.row-gap-2 { row-gap: var(--sp-2) !important; }
.row-gap-3 { row-gap: var(--sp-3) !important; }
.row-gap-4 { row-gap: var(--sp-4) !important; }
.row-gap-5 { row-gap: var(--sp-5) !important; }

/* column-gap */
.column-gap-0 { column-gap: var(--sp-0) !important; }
.column-gap-1 { column-gap: var(--sp-1) !important; }
.column-gap-2 { column-gap: var(--sp-2) !important; }
.column-gap-3 { column-gap: var(--sp-3) !important; }
.column-gap-4 { column-gap: var(--sp-4) !important; }
.column-gap-5 { column-gap: var(--sp-5) !important; }


/* ===========================
   SM BREAKPOINT (≥768px)
=========================== */
@media (min-width: 768px) {

  /* margin */
  .m-sm-0 { margin: var(--sp-0) !important; }
  .m-sm-1 { margin: var(--sp-1) !important; }
  .m-sm-2 { margin: var(--sp-2) !important; }
  .m-sm-3 { margin: var(--sp-3) !important; }
  .m-sm-4 { margin: var(--sp-4) !important; }
  .m-sm-5 { margin: var(--sp-5) !important; }
  .m-sm-auto { margin: auto !important; }

  .mt-sm-0 { margin-top: var(--sp-0) !important; }
  .mt-sm-1 { margin-top: var(--sp-1) !important; }
  .mt-sm-2 { margin-top: var(--sp-2) !important; }
  .mt-sm-3 { margin-top: var(--sp-3) !important; }
  .mt-sm-4 { margin-top: var(--sp-4) !important; }
  .mt-sm-5 { margin-top: var(--sp-5) !important; }
  .mt-sm-auto { margin-top: auto !important; }

  .mb-sm-0 { margin-bottom: var(--sp-0) !important; }
  .mb-sm-1 { margin-bottom: var(--sp-1) !important; }
  .mb-sm-2 { margin-bottom: var(--sp-2) !important; }
  .mb-sm-3 { margin-bottom: var(--sp-3) !important; }
  .mb-sm-4 { margin-bottom: var(--sp-4) !important; }
  .mb-sm-5 { margin-bottom: var(--sp-5) !important; }
  .mb-sm-auto { margin-bottom: auto !important; }

  .ms-sm-0 { margin-left: var(--sp-0) !important; }
  .ms-sm-1 { margin-left: var(--sp-1) !important; }
  .ms-sm-2 { margin-left: var(--sp-2) !important; }
  .ms-sm-3 { margin-left: var(--sp-3) !important; }
  .ms-sm-4 { margin-left: var(--sp-4) !important; }
  .ms-sm-5 { margin-left: var(--sp-5) !important; }
  .ms-sm-auto { margin-left: auto !important; }

  .me-sm-0 { margin-right: var(--sp-0) !important; }
  .me-sm-1 { margin-right: var(--sp-1) !important; }
  .me-sm-2 { margin-right: var(--sp-2) !important; }
  .me-sm-3 { margin-right: var(--sp-3) !important; }
  .me-sm-4 { margin-right: var(--sp-4) !important; }
  .me-sm-5 { margin-right: var(--sp-5) !important; }
  .me-sm-auto { margin-right: auto !important; }

  .mx-sm-0 { margin-left: var(--sp-0) !important; margin-right: var(--sp-0) !important; }
  .mx-sm-1 { margin-left: var(--sp-1) !important; margin-right: var(--sp-1) !important; }
  .mx-sm-2 { margin-left: var(--sp-2) !important; margin-right: var(--sp-2) !important; }
  .mx-sm-3 { margin-left: var(--sp-3) !important; margin-right: var(--sp-3) !important; }
  .mx-sm-4 { margin-left: var(--sp-4) !important; margin-right: var(--sp-4) !important; }
  .mx-sm-5 { margin-left: var(--sp-5) !important; margin-right: var(--sp-5) !important; }
  .mx-sm-auto { margin-left: auto !important; margin-right: auto !important; }

  .my-sm-0 { margin-top: var(--sp-0) !important; margin-bottom: var(--sp-0) !important; }
  .my-sm-1 { margin-top: var(--sp-1) !important; margin-bottom: var(--sp-1) !important; }
  .my-sm-2 { margin-top: var(--sp-2) !important; margin-bottom: var(--sp-2) !important; }
  .my-sm-3 { margin-top: var(--sp-3) !important; margin-bottom: var(--sp-3) !important; }
  .my-sm-4 { margin-top: var(--sp-4) !important; margin-bottom: var(--sp-4) !important; }
  .my-sm-5 { margin-top: var(--sp-5) !important; margin-bottom: var(--sp-5) !important; }
  .my-sm-auto { margin-top: auto !important; margin-bottom: auto !important; }

  /* padding */
  .p-sm-0 { padding: var(--sp-0) !important; }
  .p-sm-1 { padding: var(--sp-1) !important; }
  .p-sm-2 { padding: var(--sp-2) !important; }
  .p-sm-3 { padding: var(--sp-3) !important; }
  .p-sm-4 { padding: var(--sp-4) !important; }
  .p-sm-5 { padding: var(--sp-5) !important; }

  .pt-sm-0 { padding-top: var(--sp-0) !important; }
  .pt-sm-1 { padding-top: var(--sp-1) !important; }
  .pt-sm-2 { padding-top: var(--sp-2) !important; }
  .pt-sm-3 { padding-top: var(--sp-3) !important; }
  .pt-sm-4 { padding-top: var(--sp-4) !important; }
  .pt-sm-5 { padding-top: var(--sp-5) !important; }

  .pb-sm-0 { padding-bottom: var(--sp-0) !important; }
  .pb-sm-1 { padding-bottom: var(--sp-1) !important; }
  .pb-sm-2 { padding-bottom: var(--sp-2) !important; }
  .pb-sm-3 { padding-bottom: var(--sp-3) !important; }
  .pb-sm-4 { padding-bottom: var(--sp-4) !important; }
  .pb-sm-5 { padding-bottom: var(--sp-5) !important; }

  .ps-sm-0 { padding-left: var(--sp-0) !important; }
  .ps-sm-1 { padding-left: var(--sp-1) !important; }
  .ps-sm-2 { padding-left: var(--sp-2) !important; }
  .ps-sm-3 { padding-left: var(--sp-3) !important; }
  .ps-sm-4 { padding-left: var(--sp-4) !important; }
  .ps-sm-5 { padding-left: var(--sp-5) !important; }

  .pe-sm-0 { padding-right: var(--sp-0) !important; }
  .pe-sm-1 { padding-right: var(--sp-1) !important; }
  .pe-sm-2 { padding-right: var(--sp-2) !important; }
  .pe-sm-3 { padding-right: var(--sp-3) !important; }
  .pe-sm-4 { padding-right: var(--sp-4) !important; }
  .pe-sm-5 { padding-right: var(--sp-5) !important; }

  .px-sm-0 { padding-left: var(--sp-0) !important; padding-right: var(--sp-0) !important; }
  .px-sm-1 { padding-left: var(--sp-1) !important; padding-right: var(--sp-1) !important; }
  .px-sm-2 { padding-left: var(--sp-2) !important; padding-right: var(--sp-2) !important; }
  .px-sm-3 { padding-left: var(--sp-3) !important; padding-right: var(--sp-3) !important; }
  .px-sm-4 { padding-left: var(--sp-4) !important; padding-right: var(--sp-4) !important; }
  .px-sm-5 { padding-left: var(--sp-5) !important; padding-right: var(--sp-5) !important; }

  .py-sm-0 { padding-top: var(--sp-0) !important; padding-bottom: var(--sp-0) !important; }
  .py-sm-1 { padding-top: var(--sp-1) !important; padding-bottom: var(--sp-1) !important; }
  .py-sm-2 { padding-top: var(--sp-2) !important; padding-bottom: var(--sp-2) !important; }
  .py-sm-3 { padding-top: var(--sp-3) !important; padding-bottom: var(--sp-3) !important; }
  .py-sm-4 { padding-top: var(--sp-4) !important; padding-bottom: var(--sp-4) !important; }
  .py-sm-5 { padding-top: var(--sp-5) !important; padding-bottom: var(--sp-5) !important; }

  /* Gap utilities */
  .gap-sm-0 { gap: var(--sp-0) !important; }
  .gap-sm-1 { gap: var(--sp-1) !important; }
  .gap-sm-2 { gap: var(--sp-2) !important; }
  .gap-sm-3 { gap: var(--sp-3) !important; }
  .gap-sm-4 { gap: var(--sp-4) !important; }
  .gap-sm-5 { gap: var(--sp-5) !important; }

  .row-gap-sm-0 { row-gap: var(--sp-0) !important; }
  .row-gap-sm-1 { row-gap: var(--sp-1) !important; }
  .row-gap-sm-2 { row-gap: var(--sp-2) !important; }
  .row-gap-sm-3 { row-gap: var(--sp-3) !important; }
  .row-gap-sm-4 { row-gap: var(--sp-4) !important; }
  .row-gap-sm-5 { row-gap: var(--sp-5) !important; }

  .column-gap-sm-0 { column-gap: var(--sp-0) !important; }
  .column-gap-sm-1 { column-gap: var(--sp-1) !important; }
  .column-gap-sm-2 { column-gap: var(--sp-2) !important; }
  .column-gap-sm-3 { column-gap: var(--sp-3) !important; }
  .column-gap-sm-4 { column-gap: var(--sp-4) !important; }
  .column-gap-sm-5 { column-gap: var(--sp-5) !important; }
}


/* ===========================
   MD BREAKPOINT (≥992px)
=========================== */
@media (min-width: 992px) {

  .m-md-0 { margin: var(--sp-0) !important; }
  .m-md-1 { margin: var(--sp-1) !important; }
  .m-md-2 { margin: var(--sp-2) !important; }
  .m-md-3 { margin: var(--sp-3) !important; }
  .m-md-4 { margin: var(--sp-4) !important; }
  .m-md-5 { margin: var(--sp-5) !important; }
  .m-md-auto { margin: auto !important; }

  .mt-md-0 { margin-top: var(--sp-0) !important; }
  .mt-md-1 { margin-top: var(--sp-1) !important; }
  .mt-md-2 { margin-top: var(--sp-2) !important; }
  .mt-md-3 { margin-top: var(--sp-3) !important; }
  .mt-md-4 { margin-top: var(--sp-4) !important; }
  .mt-md-5 { margin-top: var(--sp-5) !important; }
  .mt-md-auto { margin-top: auto !important; }

  .mb-md-0 { margin-bottom: var(--sp-0) !important; }
  .mb-md-1 { margin-bottom: var(--sp-1) !important; }
  .mb-md-2 { margin-bottom: var(--sp-2) !important; }
  .mb-md-3 { margin-bottom: var(--sp-3) !important; }
  .mb-md-4 { margin-bottom: var(--sp-4) !important; }
  .mb-md-5 { margin-bottom: var(--sp-5) !important; }
  .mb-md-auto { margin-bottom: auto !important; }

  .ms-md-0 { margin-left: var(--sp-0) !important; }
  .ms-md-1 { margin-left: var(--sp-1) !important; }
  .ms-md-2 { margin-left: var(--sp-2) !important; }
  .ms-md-3 { margin-left: var(--sp-3) !important; }
  .ms-md-4 { margin-left: var(--sp-4) !important; }
  .ms-md-5 { margin-left: var(--sp-5) !important; }
  .ms-md-auto { margin-left: auto !important; }

  .me-md-0 { margin-right: var(--sp-0) !important; }
  .me-md-1 { margin-right: var(--sp-1) !important; }
  .me-md-2 { margin-right: var(--sp-2) !important; }
  .me-md-3 { margin-right: var(--sp-3) !important; }
  .me-md-4 { margin-right: var(--sp-4) !important; }
  .me-md-5 { margin-right: var(--sp-5) !important; }
  .me-md-auto { margin-right: auto !important; }

  .mx-md-0 { margin-left: var(--sp-0) !important; margin-right: var(--sp-0) !important; }
  .mx-md-1 { margin-left: var(--sp-1) !important; margin-right: var(--sp-1) !important; }
  .mx-md-2 { margin-left: var(--sp-2) !important; margin-right: var(--sp-2) !important; }
  .mx-md-3 { margin-left: var(--sp-3) !important; margin-right: var(--sp-3) !important; }
  .mx-md-4 { margin-left: var(--sp-4) !important; margin-right: var(--sp-4) !important; }
  .mx-md-5 { margin-left: var(--sp-5) !important; margin-right: var(--sp-5) !important; }
  .mx-md-auto { margin-left: auto !important; margin-right: auto !important; }

  .my-md-0 { margin-top: var(--sp-0) !important; margin-bottom: var(--sp-0) !important; }
  .my-md-1 { margin-top: var(--sp-1) !important; margin-bottom: var(--sp-1) !important; }
  .my-md-2 { margin-top: var(--sp-2) !important; margin-bottom: var(--sp-2) !important; }
  .my-md-3 { margin-top: var(--sp-3) !important; margin-bottom: var(--sp-3) !important; }
  .my-md-4 { margin-top: var(--sp-4) !important; margin-bottom: var(--sp-4) !important; }
  .my-md-5 { margin-top: var(--sp-5) !important; margin-bottom: var(--sp-5) !important; }
  .my-md-auto { margin-top: auto !important; margin-bottom: auto !important; }

  /* padding */
  .p-md-0 { padding: var(--sp-0) !important; }
  .p-md-1 { padding: var(--sp-1) !important; }
  .p-md-2 { padding: var(--sp-2) !important; }
  .p-md-3 { padding: var(--sp-3) !important; }
  .p-md-4 { padding: var(--sp-4) !important; }
  .p-md-5 { padding: var(--sp-5) !important; }

  .pt-md-0 { padding-top: var(--sp-0) !important; }
  .pt-md-1 { padding-top: var(--sp-1) !important; }
  .pt-md-2 { padding-top: var(--sp-2) !important; }
  .pt-md-3 { padding-top: var(--sp-3) !important; }
  .pt-md-4 { padding-top: var(--sp-4) !important; }
  .pt-md-5 { padding-top: var(--sp-5) !important; }

  .pb-md-0 { padding-bottom: var(--sp-0) !important; }
  .pb-md-1 { padding-bottom: var(--sp-1) !important; }
  .pb-md-2 { padding-bottom: var(--sp-2) !important; }
  .pb-md-3 { padding-bottom: var(--sp-3) !important; }
  .pb-md-4 { padding-bottom: var(--sp-4) !important; }
  .pb-md-5 { padding-bottom: var(--sp-5) !important; }

  .ps-md-0 { padding-left: var(--sp-0) !important; }
  .ps-md-1 { padding-left: var(--sp-1) !important; }
  .ps-md-2 { padding-left: var(--sp-2) !important; }
  .ps-md-3 { padding-left: var(--sp-3) !important; }
  .ps-md-4 { padding-left: var(--sp-4) !important; }
  .ps-md-5 { padding-left: var(--sp-5) !important; }

  .pe-md-0 { padding-right: var(--sp-0) !important; }
  .pe-md-1 { padding-right: var(--sp-1) !important; }
  .pe-md-2 { padding-right: var(--sp-2) !important; }
  .pe-md-3 { padding-right: var(--sp-3) !important; }
  .pe-md-4 { padding-right: var(--sp-4) !important; }
  .pe-md-5 { padding-right: var(--sp-5) !important; }

  .px-md-0 { padding-left: var(--sp-0) !important; padding-right: var(--sp-0) !important; }
  .px-md-1 { padding-left: var(--sp-1) !important; padding-right: var(--sp-1) !important; }
  .px-md-2 { padding-left: var(--sp-2) !important; padding-right: var(--sp-2) !important; }
  .px-md-3 { padding-left: var(--sp-3) !important; padding-right: var(--sp-3) !important; }
  .px-md-4 { padding-left: var(--sp-4) !important; padding-right: var(--sp-4) !important; }
  .px-md-5 { padding-left: var(--sp-5) !important; padding-right: var(--sp-5) !important; }

  .py-md-0 { padding-top: var(--sp-0) !important; padding-bottom: var(--sp-0) !important; }
  .py-md-1 { padding-top: var(--sp-1) !important; padding-bottom: var(--sp-1) !important; }
  .py-md-2 { padding-top: var(--sp-2) !important; padding-bottom: var(--sp-2) !important; }
  .py-md-3 { padding-top: var(--sp-3) !important; padding-bottom: var(--sp-3) !important; }
  .py-md-4 { padding-top: var(--sp-4) !important; padding-bottom: var(--sp-4) !important; }
  .py-md-5 { padding-top: var(--sp-5) !important; padding-bottom: var(--sp-5) !important; }

  /* Gap */
  .gap-md-0 { gap: var(--sp-0) !important; }
  .gap-md-1 { gap: var(--sp-1) !important; }
  .gap-md-2 { gap: var(--sp-2) !important; }
  .gap-md-3 { gap: var(--sp-3) !important; }
  .gap-md-4 { gap: var(--sp-4) !important; }
  .gap-md-5 { gap: var(--sp-5) !important; }

  .row-gap-md-0 { row-gap: var(--sp-0) !important; }
  .row-gap-md-1 { row-gap: var(--sp-1) !important; }
  .row-gap-md-2 { row-gap: var(--sp-2) !important; }
  .row-gap-md-3 { row-gap: var(--sp-3) !important; }
  .row-gap-md-4 { row-gap: var(--sp-4) !important; }
  .row-gap-md-5 { row-gap: var(--sp-5) !important; }

  .column-gap-md-0 { column-gap: var(--sp-0) !important; }
  .column-gap-md-1 { column-gap: var(--sp-1) !important; }
  .column-gap-md-2 { column-gap: var(--sp-2) !important; }
  .column-gap-md-3 { column-gap: var(--sp-3) !important; }
  .column-gap-md-4 { column-gap: var(--sp-4) !important; }
  .column-gap-md-5 { column-gap: var(--sp-5) !important; }
}


/* ===========================
   LG BREAKPOINT (≥1200px)
=========================== */
@media (min-width: 1200px) {

  .m-lg-0 { margin: var(--sp-0) !important; }
  .m-lg-1 { margin: var(--sp-1) !important; }
  .m-lg-2 { margin: var(--sp-2) !important; }
  .m-lg-3 { margin: var(--sp-3) !important; }
  .m-lg-4 { margin: var(--sp-4) !important; }
  .m-lg-5 { margin: var(--sp-5) !important; }
  .m-lg-auto { margin: auto !important; }

  .mt-lg-0 { margin-top: var(--sp-0) !important; }
  .mt-lg-1 { margin-top: var(--sp-1) !important; }
  .mt-lg-2 { margin-top: var(--sp-2) !important; }
  .mt-lg-3 { margin-top: var(--sp-3) !important; }
  .mt-lg-4 { margin-top: var(--sp-4) !important; }
  .mt-lg-5 { margin-top: var(--sp-5) !important; }
  .mt-lg-auto { margin-top: auto !important; }

  .mb-lg-0 { margin-bottom: var(--sp-0) !important; }
  .mb-lg-1 { margin-bottom: var(--sp-1) !important; }
  .mb-lg-2 { margin-bottom: var(--sp-2) !important; }
  .mb-lg-3 { margin-bottom: var(--sp-3) !important; }
  .mb-lg-4 { margin-bottom: var(--sp-4) !important; }
  .mb-lg-5 { margin-bottom: var(--sp-5) !important; }
  .mb-lg-auto { margin-bottom: auto !important; }

  .ms-lg-0 { margin-left: var(--sp-0) !important; }
  .ms-lg-1 { margin-left: var(--sp-1) !important; }
  .ms-lg-2 { margin-left: var(--sp-2) !important; }
  .ms-lg-3 { margin-left: var(--sp-3) !important; }
  .ms-lg-4 { margin-left: var(--sp-4) !important; }
  .ms-lg-5 { margin-left: var(--sp-5) !important; }
  .ms-lg-auto { margin-left: auto !important; }

  .me-lg-0 { margin-right: var(--sp-0) !important; }
  .me-lg-1 { margin-right: var(--sp-1) !important; }
  .me-lg-2 { margin-right: var(--sp-2) !important; }
  .me-lg-3 { margin-right: var(--sp-3) !important; }
  .me-lg-4 { margin-right: var(--sp-4) !important; }
  .me-lg-5 { margin-right: var(--sp-5) !important; }
  .me-lg-auto { margin-right: auto !important; }

  .mx-lg-0 { margin-left: var(--sp-0) !important; margin-right: var(--sp-0) !important; }
  .mx-lg-1 { margin-left: var(--sp-1) !important; margin-right: var(--sp-1) !important; }
  .mx-lg-2 { margin-left: var(--sp-2) !important; margin-right: var(--sp-2) !important; }
  .mx-lg-3 { margin-left: var(--sp-3) !important; margin-right: var(--sp-3) !important; }
  .mx-lg-4 { margin-left: var(--sp-4) !important; margin-right: var(--sp-4) !important; }
  .mx-lg-5 { margin-left: var(--sp-5) !important; margin-right: var(--sp-5) !important; }
  .mx-lg-auto { margin-left: auto !important; margin-right: auto !important; }

  .my-lg-0 { margin-top: var(--sp-0) !important; margin-bottom: var(--sp-0) !important; }
  .my-lg-1 { margin-top: var(--sp-1) !important; margin-bottom: var(--sp-1) !important; }
  .my-lg-2 { margin-top: var(--sp-2) !important; margin-bottom: var(--sp-2) !important; }
  .my-lg-3 { margin-top: var(--sp-3) !important; margin-bottom: var(--sp-3) !important; }
  .my-lg-4 { margin-top: var(--sp-4) !important; margin-bottom: var(--sp-4) !important; }
  .my-lg-5 { margin-top: var(--sp-5) !important; margin-bottom: var(--sp-5) !important; }
  .my-lg-auto { margin-top: auto !important; margin-bottom: auto !important; }

  /* padding */
  .p-lg-0 { padding: var(--sp-0) !important; }
  .p-lg-1 { padding: var(--sp-1) !important; }
  .p-lg-2 { padding: var(--sp-2) !important; }
  .p-lg-3 { padding: var(--sp-3) !important; }
  .p-lg-4 { padding: var(--sp-4) !important; }
  .p-lg-5 { padding: var(--sp-5) !important; }

  .pt-lg-0 { padding-top: var(--sp-0) !important; }
  .pt-lg-1 { padding-top: var(--sp-1) !important; }
  .pt-lg-2 { padding-top: var(--sp-2) !important; }
  .pt-lg-3 { padding-top: var(--sp-3) !important; }
  .pt-lg-4 { padding-top: var(--sp-4) !important; }
  .pt-lg-5 { padding-top: var(--sp-5) !important; }

  .pb-lg-0 { padding-bottom: var(--sp-0) !important; }
  .pb-lg-1 { padding-bottom: var(--sp-1) !important; }
  .pb-lg-2 { padding-bottom: var(--sp-2) !important; }
  .pb-lg-3 { padding-bottom: var(--sp-3) !important; }
  .pb-lg-4 { padding-bottom: var(--sp-4) !important; }
  .pb-lg-5 { padding-bottom: var(--sp-5) !important; }

  .ps-lg-0 { padding-left: var(--sp-0) !important; }
  .ps-lg-1 { padding-left: var(--sp-1) !important; }
  .ps-lg-2 { padding-left: var(--sp-2) !important; }
  .ps-lg-3 { padding-left: var(--sp-3) !important; }
  .ps-lg-4 { padding-left: var(--sp-4) !important; }
  .ps-lg-5 { padding-left: var(--sp-5) !important; }

  .pe-lg-0 { padding-right: var(--sp-0) !important; }
  .pe-lg-1 { padding-right: var(--sp-1) !important; }
  .pe-lg-2 { padding-right: var(--sp-2) !important; }
  .pe-lg-3 { padding-right: var(--sp-3) !important; }
  .pe-lg-4 { padding-right: var(--sp-4) !important; }
  .pe-lg-5 { padding-right: var(--sp-5) !important; }

  .px-lg-0 { padding-left: var(--sp-0) !important; padding-right: var(--sp-0) !important; }
  .px-lg-1 { padding-left: var(--sp-1) !important; padding-right: var(--sp-1) !important; }
  .px-lg-2 { padding-left: var(--sp-2) !important; padding-right: var(--sp-2) !important; }
  .px-lg-3 { padding-left: var(--sp-3) !important; padding-right: var(--sp-3) !important; }
  .px-lg-4 { padding-left: var(--sp-4) !important; padding-right: var(--sp-4) !important; }
  .px-lg-5 { padding-left: var(--sp-5) !important; padding-right: var(--sp-5) !important; }

  .py-lg-0 { padding-top: var(--sp-0) !important; padding-bottom: var(--sp-0) !important; }
  .py-lg-1 { padding-top: var(--sp-1) !important; padding-bottom: var(--sp-1) !important; }
  .py-lg-2 { padding-top: var(--sp-2) !important; padding-bottom: var(--sp-2) !important; }
  .py-lg-3 { padding-top: var(--sp-3) !important; padding-bottom: var(--sp-3) !important; }
  .py-lg-4 { padding-top: var(--sp-4) !important; padding-bottom: var(--sp-4) !important; }
  .py-lg-5 { padding-top: var(--sp-5) !important; padding-bottom: var(--sp-5) !important; }

  /* gap */
  .gap-lg-0 { gap: var(--sp-0) !important; }
  .gap-lg-1 { gap: var(--sp-1) !important; }
  .gap-lg-2 { gap: var(--sp-2) !important; }
  .gap-lg-3 { gap: var(--sp-3) !important; }
  .gap-lg-4 { gap: var(--sp-4) !important; }
  .gap-lg-5 { gap: var(--sp-5) !important; }

  .row-gap-lg-0 { row-gap: var(--sp-0) !important; }
  .row-gap-lg-1 { row-gap: var(--sp-1) !important; }
  .row-gap-lg-2 { row-gap: var(--sp-2) !important; }
  .row-gap-lg-3 { row-gap: var(--sp-3) !important; }
  .row-gap-lg-4 { row-gap: var(--sp-4) !important; }
  .row-gap-lg-5 { row-gap: var(--sp-5) !important; }

  .column-gap-lg-0 { column-gap: var(--sp-0) !important; }
  .column-gap-lg-1 { column-gap: var(--sp-1) !important; }
  .column-gap-lg-2 { column-gap: var(--sp-2) !important; }
  .column-gap-lg-3 { column-gap: var(--sp-3) !important; }
  .column-gap-lg-4 { column-gap: var(--sp-4) !important; }
  .column-gap-lg-5 { column-gap: var(--sp-5) !important; }
}