/* ============================================================
   BEFY BURGER – typography.css
   Joomla 6 · Cassiopeia (Extended) · Bootstrap 5

   Princip: 3 značkové barvy → napojené na proměnné Cassiopeie a BS,
   aby .bg-* .text-* .btn-* .badge fungovaly BEZ nových tříd.
   Vše, co níže není, řeší Bootstrap / Cassiopeia sám.
   ============================================================ */

/* ---------- 1) TOKENY ---------- */
:root{
  /* Značka (Figma: beefy red / beefy black / Beefy 02) */
  --beefy-red:   #D61224;   /* lišta, ticker, cenovka, hover odkazů   */
  --beefy-black: #1E1414;   /* pozadí stránky, tmavý text, tmavá tlačítka */
  --beefy-cream: #E6E1D2;   /* text na tmavém + krémové sekce/karty   */

  /* Fonty – rodiny řídí font-schéma šablony, tady jen fallback řetězce */
  --ff-head: var(--cassiopeia-font-family-headings, "Barriecito", system-ui, cursive);
  --ff-body: "Manrope",   system-ui, sans-serif; /* text 400, tlačítka 700   */

  /* --- Bootstrap: barvy motivu = značka (.bg-/.text-/.badge čtou *-rgb) --- */
  --bs-primary: var(--beefy-red);   --bs-primary-rgb: 214,18,36;
  --bs-dark:    var(--beefy-black); --bs-dark-rgb:    30,20,20;
  --bs-light:   var(--beefy-cream); --bs-light-rgb:   230,225,210;

  --bs-body-bg:    var(--beefy-black); --bs-body-bg-rgb:    30,20,20;
  --bs-body-color: var(--beefy-cream); --bs-body-color-rgb: 230,225,210;
  --bs-body-font-family: var(--ff-body);
  --bs-body-font-size:   1.125rem;    /* 18px  */
  --bs-body-line-height: 1.444;       /* 26/18 */

  --bs-link-color:       var(--beefy-cream); --bs-link-color-rgb:       230,225,210;
  --bs-link-hover-color: var(--beefy-red);   --bs-link-hover-color-rgb: 214,18,36;

  --bs-border-radius:    20px;   /* .rounded / karty – jednotné zaoblení bloků */

  /* --- Odstupy: jedna škála pro utility i pro moduly ---
     Plynulé (clamp): dole hodnota pro mobil, nahoře pro desktop.
     Stupně 1–5 nahrazují pevné hodnoty Bootstrapu, šestka je navíc.
     Moduly z DEER světa čtou --space-* přímo (mod_eventsplit staví
     na --space-5 vnitřní padding panelu), proto musí být deklarované. */
  --space-1: clamp( 4px, 0.5vw,  6px);   /*  4 →  6 px */
  --space-2: clamp( 8px, 1vw,   12px);   /*  8 → 12 px */
  --space-3: clamp(12px, 1.5vw, 16px);   /* 12 → 16 px */
  --space-4: clamp(16px, 2vw,   24px);   /* 16 → 24 px */
  --space-5: clamp(28px, 4vw,   48px);   /* 28 → 48 px – padding světlých panelů */
  --space-6: clamp(40px, 6vw,   72px);   /* 40 → 72 px – odsazení sekcí */

  /* Rádius karet – DEER moduly čtou --radius-card (mod_eventsplit: panel i fotka).
     Držet stejně jako --bs-border-radius, ať mají všechny bloky jeden poloměr. */
  --radius-card: 20px;

  /* --- Cassiopeia Extended: stejné hodnoty → header/footer/odkazy/tlačítka jedou samy --- */
  --body-bg:  var(--beefy-black); --body-color:  var(--beefy-cream);
  --body-font-size: 1.125rem;
  --body-line-height: 1.4444;
  --headerbg: var(--beefy-red);   --headercolor: var(--beefy-cream);
  --footerbg: var(--beefy-black); --footercolor: var(--beefy-cream);
  --link-color: var(--beefy-cream); --link-hover-color: var(--beefy-red);
  --btnbg: var(--beefy-black);    --btnbgh: #000;
  --btncolor: var(--beefy-cream); --btncolorh: var(--beefy-cream);

  /* Pozadí .bg-light / .bg-dark počítá Cassiopeia z VLASTNÍCH proměnných
     (rgba(var(--light-rgb), var(--bg-opacity)) !important), ne z --bs-*-rgb.
     Bez těchhle dvou řádků zůstane .bg-light na výchozí bílé #F9FAFB. */
  --light-rgb: 230,225,210;   /* Beefy 02  → .bg-light = rgba(230,225,210,1) */
  --dark-rgb:   30, 20, 20;   /* beefy black */
}

/* Světlá sekce = BS .bg-light + tmavý text. Jediné pravidlo pro flip barev;
   nadpisy mají color:inherit, takže se přebarví samy. */
.bg-light{ color: var(--beefy-black); }
.bg-light a:not(.btn){ color: var(--beefy-black); }

/* .rounded-4 má v Bootstrapu napevno 1rem (16px), na --bs-border-radius nesahá.
   Srovnáno na 20 px, ať sedí se zbytkem bloků. */
.rounded-4{ border-radius: 20px !important; }

/* ---------- 2) TYPOGRAFIE ---------- */
body{ font-synthesis: none; }   /* zabránit syntetickému tučnění, pokud řez chybí */

h1,h2,h3,.h1,.h2,.h3{
  font-family: var(--ff-head);
  font-weight: var(--cassiopeia-font-weight-headings, 400);
  letter-spacing: 0;
  color: inherit;        /* barvu určí sekce, ne úroveň nadpisu */
  margin-bottom: .5em;
}
/* Prostřední hodnota míchá rem a vw – nadpis pak reaguje na šířku okna
   i na uživatelské zvětšení písma. Čisté vw na zoom nereaguje. */
h1,.h1{ font-size: clamp(48px, 2.5rem  + 1.5vw,  64px); line-height: 1.125; }  /* 48 → 64 */
h2,.h2{ font-size: clamp(32px, 1.25rem + 1.75vw, 48px); line-height: 1.05;  }  /* 32 → 48 */
h3,.h3{ font-size: clamp(20px, 1rem    + 0.5vw,  24px); line-height: 1.333; }  /* 20 → 24 */

/* ---------- 3) TLAČÍTKA – Manrope 700, 12/20, uppercase, pilulka 48 px ---------- */
.btn{
  --btn-font-family: var(--ff-body);
  --btn-font-weight: 700;
  --btn-font-size: 12px;
  --btn-line-height: 20px;
  --btn-padding-y: 13px;
  --btn-padding-x: 24px;
  --btn-border-radius: 90px;
  --btn-focus-shadow-rgb: 214,18,36;
  text-transform: uppercase; letter-spacing: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px;
}
.btn .icon, .btn svg{ width: 16px; height: 16px; flex: none; fill: currentColor; }

.btn-dark{
  --btn-color: var(--beefy-cream);        --btn-bg: var(--beefy-black);        --btn-border-color: var(--beefy-black);
  --btn-hover-color: var(--beefy-cream);  --btn-hover-bg: #000;                --btn-hover-border-color: #000;
  --btn-active-color: var(--beefy-cream); --btn-active-bg: #000;               --btn-active-border-color: #000;
  --btn-disabled-color: var(--beefy-cream); --btn-disabled-bg: var(--beefy-black); --btn-disabled-border-color: var(--beefy-black);
}
.btn-primary{
  --btn-color: var(--beefy-cream);        --btn-bg: var(--beefy-red);          --btn-border-color: var(--beefy-red);
  --btn-hover-color: var(--beefy-cream);  --btn-hover-bg: #B30F1E;             --btn-hover-border-color: #B30F1E;
  --btn-active-color: var(--beefy-cream); --btn-active-bg: #B30F1E;            --btn-active-border-color: #B30F1E;
  --btn-disabled-color: var(--beefy-cream); --btn-disabled-bg: var(--beefy-red); --btn-disabled-border-color: var(--beefy-red);
}
.btn-outline-light{
  --btn-color: var(--beefy-cream);        --btn-bg: transparent;               --btn-border-color: var(--beefy-cream);
  --btn-hover-color: var(--beefy-black);  --btn-hover-bg: var(--beefy-cream);  --btn-hover-border-color: var(--beefy-cream);
  --btn-active-color: var(--beefy-black); --btn-active-bg: var(--beefy-cream); --btn-active-border-color: var(--beefy-cream);
}
/* ---------- 4) CENOVKA – BS .badge, jen tvar ----------
   <span class="badge bg-primary text-light">250 Kč</span> */
.badge{
  font-family: var(--ff-body); font-weight: 700; font-size: 14px; line-height: 20px;
  padding: 6px 12px; border-radius: 4px; text-transform: uppercase;
}

/* ---------- 5) ODSTUPY – plynulá škála na BS 5 utilitách ----------
   Bootstrap si hodnoty spacerů kompiluje napevno (.mt-3{margin-top:1rem})
   a na CSS proměnné nesahá. Aby celý web dýchal podle jedné škály,
   přepisují se tu utility stupňů 1–5 na var(--space-*) a doplňuje se
   stupeň 6, který Bootstrap vůbec nemá.

   Platí pro m/p (všechny strany i osy), gap, row-gap, column-gap
   a mřížkové gutters g/gx/gy – včetně responzivních variant
   (mt-lg-4, pb-xl-6 …) pro všech pět breakpointů.

   POŘADÍ NAČTENÍ: tenhle soubor musí jít AŽ ZA template.css (Bootstrap).
   Selektory mají stejnou specificitu i !important, takže rozhoduje pořadí.

   Změna škály = úprava --space-* v :root, nic víc.
   Negativní marginy (mt-n3) zůstávají Bootstrapí, pevné. */
.m-1{ margin: var(--space-1) !important; }
.mt-1{ margin-top: var(--space-1) !important; }
.mb-1{ margin-bottom: var(--space-1) !important; }
.ms-1{ margin-left: var(--space-1) !important; }
.me-1{ margin-right: var(--space-1) !important; }
.p-1{ padding: var(--space-1) !important; }
.pt-1{ padding-top: var(--space-1) !important; }
.pb-1{ padding-bottom: var(--space-1) !important; }
.ps-1{ padding-left: var(--space-1) !important; }
.pe-1{ padding-right: var(--space-1) !important; }
.mx-1{ margin-left: var(--space-1) !important; margin-right: var(--space-1) !important; }
.my-1{ margin-top: var(--space-1) !important; margin-bottom: var(--space-1) !important; }
.px-1{ padding-left: var(--space-1) !important; padding-right: var(--space-1) !important; }
.py-1{ padding-top: var(--space-1) !important; padding-bottom: var(--space-1) !important; }
.gap-1{ gap: var(--space-1) !important; }
.row-gap-1{ row-gap: var(--space-1) !important; }
.column-gap-1{ column-gap: var(--space-1) !important; }
.g-1{ --bs-gutter-x: var(--space-1); --bs-gutter-y: var(--space-1); }
.gx-1{ --bs-gutter-x: var(--space-1); }
.gy-1{ --bs-gutter-y: var(--space-1); }
.m-2{ margin: var(--space-2) !important; }
.mt-2{ margin-top: var(--space-2) !important; }
.mb-2{ margin-bottom: var(--space-2) !important; }
.ms-2{ margin-left: var(--space-2) !important; }
.me-2{ margin-right: var(--space-2) !important; }
.p-2{ padding: var(--space-2) !important; }
.pt-2{ padding-top: var(--space-2) !important; }
.pb-2{ padding-bottom: var(--space-2) !important; }
.ps-2{ padding-left: var(--space-2) !important; }
.pe-2{ padding-right: var(--space-2) !important; }
.mx-2{ margin-left: var(--space-2) !important; margin-right: var(--space-2) !important; }
.my-2{ margin-top: var(--space-2) !important; margin-bottom: var(--space-2) !important; }
.px-2{ padding-left: var(--space-2) !important; padding-right: var(--space-2) !important; }
.py-2{ padding-top: var(--space-2) !important; padding-bottom: var(--space-2) !important; }
.gap-2{ gap: var(--space-2) !important; }
.row-gap-2{ row-gap: var(--space-2) !important; }
.column-gap-2{ column-gap: var(--space-2) !important; }
.g-2{ --bs-gutter-x: var(--space-2); --bs-gutter-y: var(--space-2); }
.gx-2{ --bs-gutter-x: var(--space-2); }
.gy-2{ --bs-gutter-y: var(--space-2); }
.m-3{ margin: var(--space-3) !important; }
.mt-3{ margin-top: var(--space-3) !important; }
.mb-3{ margin-bottom: var(--space-3) !important; }
.ms-3{ margin-left: var(--space-3) !important; }
.me-3{ margin-right: var(--space-3) !important; }
.p-3{ padding: var(--space-3) !important; }
.pt-3{ padding-top: var(--space-3) !important; }
.pb-3{ padding-bottom: var(--space-3) !important; }
.ps-3{ padding-left: var(--space-3) !important; }
.pe-3{ padding-right: var(--space-3) !important; }
.mx-3{ margin-left: var(--space-3) !important; margin-right: var(--space-3) !important; }
.my-3{ margin-top: var(--space-3) !important; margin-bottom: var(--space-3) !important; }
.px-3{ padding-left: var(--space-3) !important; padding-right: var(--space-3) !important; }
.py-3{ padding-top: var(--space-3) !important; padding-bottom: var(--space-3) !important; }
.gap-3{ gap: var(--space-3) !important; }
.row-gap-3{ row-gap: var(--space-3) !important; }
.column-gap-3{ column-gap: var(--space-3) !important; }
.g-3{ --bs-gutter-x: var(--space-3); --bs-gutter-y: var(--space-3); }
.gx-3{ --bs-gutter-x: var(--space-3); }
.gy-3{ --bs-gutter-y: var(--space-3); }
.m-4{ margin: var(--space-4) !important; }
.mt-4{ margin-top: var(--space-4) !important; }
.mb-4{ margin-bottom: var(--space-4) !important; }
.ms-4{ margin-left: var(--space-4) !important; }
.me-4{ margin-right: var(--space-4) !important; }
.p-4{ padding: var(--space-4) !important; }
.pt-4{ padding-top: var(--space-4) !important; }
.pb-4{ padding-bottom: var(--space-4) !important; }
.ps-4{ padding-left: var(--space-4) !important; }
.pe-4{ padding-right: var(--space-4) !important; }
.mx-4{ margin-left: var(--space-4) !important; margin-right: var(--space-4) !important; }
.my-4{ margin-top: var(--space-4) !important; margin-bottom: var(--space-4) !important; }
.px-4{ padding-left: var(--space-4) !important; padding-right: var(--space-4) !important; }
.py-4{ padding-top: var(--space-4) !important; padding-bottom: var(--space-4) !important; }
.gap-4{ gap: var(--space-4) !important; }
.row-gap-4{ row-gap: var(--space-4) !important; }
.column-gap-4{ column-gap: var(--space-4) !important; }
.g-4{ --bs-gutter-x: var(--space-4); --bs-gutter-y: var(--space-4); }
.gx-4{ --bs-gutter-x: var(--space-4); }
.gy-4{ --bs-gutter-y: var(--space-4); }
.m-5{ margin: var(--space-5) !important; }
.mt-5{ margin-top: var(--space-5) !important; }
.mb-5{ margin-bottom: var(--space-5) !important; }
.ms-5{ margin-left: var(--space-5) !important; }
.me-5{ margin-right: var(--space-5) !important; }
.p-5{ padding: var(--space-5) !important; }
.pt-5{ padding-top: var(--space-5) !important; }
.pb-5{ padding-bottom: var(--space-5) !important; }
.ps-5{ padding-left: var(--space-5) !important; }
.pe-5{ padding-right: var(--space-5) !important; }
.mx-5{ margin-left: var(--space-5) !important; margin-right: var(--space-5) !important; }
.my-5{ margin-top: var(--space-5) !important; margin-bottom: var(--space-5) !important; }
.px-5{ padding-left: var(--space-5) !important; padding-right: var(--space-5) !important; }
.py-5{ padding-top: var(--space-5) !important; padding-bottom: var(--space-5) !important; }
.gap-5{ gap: var(--space-5) !important; }
.row-gap-5{ row-gap: var(--space-5) !important; }
.column-gap-5{ column-gap: var(--space-5) !important; }
.g-5{ --bs-gutter-x: var(--space-5); --bs-gutter-y: var(--space-5); }
.gx-5{ --bs-gutter-x: var(--space-5); }
.gy-5{ --bs-gutter-y: var(--space-5); }
.m-6{ margin: var(--space-6) !important; }
.mt-6{ margin-top: var(--space-6) !important; }
.mb-6{ margin-bottom: var(--space-6) !important; }
.ms-6{ margin-left: var(--space-6) !important; }
.me-6{ margin-right: var(--space-6) !important; }
.p-6{ padding: var(--space-6) !important; }
.pt-6{ padding-top: var(--space-6) !important; }
.pb-6{ padding-bottom: var(--space-6) !important; }
.ps-6{ padding-left: var(--space-6) !important; }
.pe-6{ padding-right: var(--space-6) !important; }
.mx-6{ margin-left: var(--space-6) !important; margin-right: var(--space-6) !important; }
.my-6{ margin-top: var(--space-6) !important; margin-bottom: var(--space-6) !important; }
.px-6{ padding-left: var(--space-6) !important; padding-right: var(--space-6) !important; }
.py-6{ padding-top: var(--space-6) !important; padding-bottom: var(--space-6) !important; }
.gap-6{ gap: var(--space-6) !important; }
.row-gap-6{ row-gap: var(--space-6) !important; }
.column-gap-6{ column-gap: var(--space-6) !important; }
.g-6{ --bs-gutter-x: var(--space-6); --bs-gutter-y: var(--space-6); }
.gx-6{ --bs-gutter-x: var(--space-6); }
.gy-6{ --bs-gutter-y: var(--space-6); }

@media (min-width: 576px){
  .m-sm-1{ margin: var(--space-1) !important; }
  .mt-sm-1{ margin-top: var(--space-1) !important; }
  .mb-sm-1{ margin-bottom: var(--space-1) !important; }
  .ms-sm-1{ margin-left: var(--space-1) !important; }
  .me-sm-1{ margin-right: var(--space-1) !important; }
  .p-sm-1{ padding: var(--space-1) !important; }
  .pt-sm-1{ padding-top: var(--space-1) !important; }
  .pb-sm-1{ padding-bottom: var(--space-1) !important; }
  .ps-sm-1{ padding-left: var(--space-1) !important; }
  .pe-sm-1{ padding-right: var(--space-1) !important; }
  .mx-sm-1{ margin-left: var(--space-1) !important; margin-right: var(--space-1) !important; }
  .my-sm-1{ margin-top: var(--space-1) !important; margin-bottom: var(--space-1) !important; }
  .px-sm-1{ padding-left: var(--space-1) !important; padding-right: var(--space-1) !important; }
  .py-sm-1{ padding-top: var(--space-1) !important; padding-bottom: var(--space-1) !important; }
  .gap-sm-1{ gap: var(--space-1) !important; }
  .row-gap-sm-1{ row-gap: var(--space-1) !important; }
  .column-gap-sm-1{ column-gap: var(--space-1) !important; }
  .g-sm-1{ --bs-gutter-x: var(--space-1); --bs-gutter-y: var(--space-1); }
  .gx-sm-1{ --bs-gutter-x: var(--space-1); }
  .gy-sm-1{ --bs-gutter-y: var(--space-1); }
  .m-sm-2{ margin: var(--space-2) !important; }
  .mt-sm-2{ margin-top: var(--space-2) !important; }
  .mb-sm-2{ margin-bottom: var(--space-2) !important; }
  .ms-sm-2{ margin-left: var(--space-2) !important; }
  .me-sm-2{ margin-right: var(--space-2) !important; }
  .p-sm-2{ padding: var(--space-2) !important; }
  .pt-sm-2{ padding-top: var(--space-2) !important; }
  .pb-sm-2{ padding-bottom: var(--space-2) !important; }
  .ps-sm-2{ padding-left: var(--space-2) !important; }
  .pe-sm-2{ padding-right: var(--space-2) !important; }
  .mx-sm-2{ margin-left: var(--space-2) !important; margin-right: var(--space-2) !important; }
  .my-sm-2{ margin-top: var(--space-2) !important; margin-bottom: var(--space-2) !important; }
  .px-sm-2{ padding-left: var(--space-2) !important; padding-right: var(--space-2) !important; }
  .py-sm-2{ padding-top: var(--space-2) !important; padding-bottom: var(--space-2) !important; }
  .gap-sm-2{ gap: var(--space-2) !important; }
  .row-gap-sm-2{ row-gap: var(--space-2) !important; }
  .column-gap-sm-2{ column-gap: var(--space-2) !important; }
  .g-sm-2{ --bs-gutter-x: var(--space-2); --bs-gutter-y: var(--space-2); }
  .gx-sm-2{ --bs-gutter-x: var(--space-2); }
  .gy-sm-2{ --bs-gutter-y: var(--space-2); }
  .m-sm-3{ margin: var(--space-3) !important; }
  .mt-sm-3{ margin-top: var(--space-3) !important; }
  .mb-sm-3{ margin-bottom: var(--space-3) !important; }
  .ms-sm-3{ margin-left: var(--space-3) !important; }
  .me-sm-3{ margin-right: var(--space-3) !important; }
  .p-sm-3{ padding: var(--space-3) !important; }
  .pt-sm-3{ padding-top: var(--space-3) !important; }
  .pb-sm-3{ padding-bottom: var(--space-3) !important; }
  .ps-sm-3{ padding-left: var(--space-3) !important; }
  .pe-sm-3{ padding-right: var(--space-3) !important; }
  .mx-sm-3{ margin-left: var(--space-3) !important; margin-right: var(--space-3) !important; }
  .my-sm-3{ margin-top: var(--space-3) !important; margin-bottom: var(--space-3) !important; }
  .px-sm-3{ padding-left: var(--space-3) !important; padding-right: var(--space-3) !important; }
  .py-sm-3{ padding-top: var(--space-3) !important; padding-bottom: var(--space-3) !important; }
  .gap-sm-3{ gap: var(--space-3) !important; }
  .row-gap-sm-3{ row-gap: var(--space-3) !important; }
  .column-gap-sm-3{ column-gap: var(--space-3) !important; }
  .g-sm-3{ --bs-gutter-x: var(--space-3); --bs-gutter-y: var(--space-3); }
  .gx-sm-3{ --bs-gutter-x: var(--space-3); }
  .gy-sm-3{ --bs-gutter-y: var(--space-3); }
  .m-sm-4{ margin: var(--space-4) !important; }
  .mt-sm-4{ margin-top: var(--space-4) !important; }
  .mb-sm-4{ margin-bottom: var(--space-4) !important; }
  .ms-sm-4{ margin-left: var(--space-4) !important; }
  .me-sm-4{ margin-right: var(--space-4) !important; }
  .p-sm-4{ padding: var(--space-4) !important; }
  .pt-sm-4{ padding-top: var(--space-4) !important; }
  .pb-sm-4{ padding-bottom: var(--space-4) !important; }
  .ps-sm-4{ padding-left: var(--space-4) !important; }
  .pe-sm-4{ padding-right: var(--space-4) !important; }
  .mx-sm-4{ margin-left: var(--space-4) !important; margin-right: var(--space-4) !important; }
  .my-sm-4{ margin-top: var(--space-4) !important; margin-bottom: var(--space-4) !important; }
  .px-sm-4{ padding-left: var(--space-4) !important; padding-right: var(--space-4) !important; }
  .py-sm-4{ padding-top: var(--space-4) !important; padding-bottom: var(--space-4) !important; }
  .gap-sm-4{ gap: var(--space-4) !important; }
  .row-gap-sm-4{ row-gap: var(--space-4) !important; }
  .column-gap-sm-4{ column-gap: var(--space-4) !important; }
  .g-sm-4{ --bs-gutter-x: var(--space-4); --bs-gutter-y: var(--space-4); }
  .gx-sm-4{ --bs-gutter-x: var(--space-4); }
  .gy-sm-4{ --bs-gutter-y: var(--space-4); }
  .m-sm-5{ margin: var(--space-5) !important; }
  .mt-sm-5{ margin-top: var(--space-5) !important; }
  .mb-sm-5{ margin-bottom: var(--space-5) !important; }
  .ms-sm-5{ margin-left: var(--space-5) !important; }
  .me-sm-5{ margin-right: var(--space-5) !important; }
  .p-sm-5{ padding: var(--space-5) !important; }
  .pt-sm-5{ padding-top: var(--space-5) !important; }
  .pb-sm-5{ padding-bottom: var(--space-5) !important; }
  .ps-sm-5{ padding-left: var(--space-5) !important; }
  .pe-sm-5{ padding-right: var(--space-5) !important; }
  .mx-sm-5{ margin-left: var(--space-5) !important; margin-right: var(--space-5) !important; }
  .my-sm-5{ margin-top: var(--space-5) !important; margin-bottom: var(--space-5) !important; }
  .px-sm-5{ padding-left: var(--space-5) !important; padding-right: var(--space-5) !important; }
  .py-sm-5{ padding-top: var(--space-5) !important; padding-bottom: var(--space-5) !important; }
  .gap-sm-5{ gap: var(--space-5) !important; }
  .row-gap-sm-5{ row-gap: var(--space-5) !important; }
  .column-gap-sm-5{ column-gap: var(--space-5) !important; }
  .g-sm-5{ --bs-gutter-x: var(--space-5); --bs-gutter-y: var(--space-5); }
  .gx-sm-5{ --bs-gutter-x: var(--space-5); }
  .gy-sm-5{ --bs-gutter-y: var(--space-5); }
  .m-sm-6{ margin: var(--space-6) !important; }
  .mt-sm-6{ margin-top: var(--space-6) !important; }
  .mb-sm-6{ margin-bottom: var(--space-6) !important; }
  .ms-sm-6{ margin-left: var(--space-6) !important; }
  .me-sm-6{ margin-right: var(--space-6) !important; }
  .p-sm-6{ padding: var(--space-6) !important; }
  .pt-sm-6{ padding-top: var(--space-6) !important; }
  .pb-sm-6{ padding-bottom: var(--space-6) !important; }
  .ps-sm-6{ padding-left: var(--space-6) !important; }
  .pe-sm-6{ padding-right: var(--space-6) !important; }
  .mx-sm-6{ margin-left: var(--space-6) !important; margin-right: var(--space-6) !important; }
  .my-sm-6{ margin-top: var(--space-6) !important; margin-bottom: var(--space-6) !important; }
  .px-sm-6{ padding-left: var(--space-6) !important; padding-right: var(--space-6) !important; }
  .py-sm-6{ padding-top: var(--space-6) !important; padding-bottom: var(--space-6) !important; }
  .gap-sm-6{ gap: var(--space-6) !important; }
  .row-gap-sm-6{ row-gap: var(--space-6) !important; }
  .column-gap-sm-6{ column-gap: var(--space-6) !important; }
  .g-sm-6{ --bs-gutter-x: var(--space-6); --bs-gutter-y: var(--space-6); }
  .gx-sm-6{ --bs-gutter-x: var(--space-6); }
  .gy-sm-6{ --bs-gutter-y: var(--space-6); }
}

@media (min-width: 768px){
  .m-md-1{ margin: var(--space-1) !important; }
  .mt-md-1{ margin-top: var(--space-1) !important; }
  .mb-md-1{ margin-bottom: var(--space-1) !important; }
  .ms-md-1{ margin-left: var(--space-1) !important; }
  .me-md-1{ margin-right: var(--space-1) !important; }
  .p-md-1{ padding: var(--space-1) !important; }
  .pt-md-1{ padding-top: var(--space-1) !important; }
  .pb-md-1{ padding-bottom: var(--space-1) !important; }
  .ps-md-1{ padding-left: var(--space-1) !important; }
  .pe-md-1{ padding-right: var(--space-1) !important; }
  .mx-md-1{ margin-left: var(--space-1) !important; margin-right: var(--space-1) !important; }
  .my-md-1{ margin-top: var(--space-1) !important; margin-bottom: var(--space-1) !important; }
  .px-md-1{ padding-left: var(--space-1) !important; padding-right: var(--space-1) !important; }
  .py-md-1{ padding-top: var(--space-1) !important; padding-bottom: var(--space-1) !important; }
  .gap-md-1{ gap: var(--space-1) !important; }
  .row-gap-md-1{ row-gap: var(--space-1) !important; }
  .column-gap-md-1{ column-gap: var(--space-1) !important; }
  .g-md-1{ --bs-gutter-x: var(--space-1); --bs-gutter-y: var(--space-1); }
  .gx-md-1{ --bs-gutter-x: var(--space-1); }
  .gy-md-1{ --bs-gutter-y: var(--space-1); }
  .m-md-2{ margin: var(--space-2) !important; }
  .mt-md-2{ margin-top: var(--space-2) !important; }
  .mb-md-2{ margin-bottom: var(--space-2) !important; }
  .ms-md-2{ margin-left: var(--space-2) !important; }
  .me-md-2{ margin-right: var(--space-2) !important; }
  .p-md-2{ padding: var(--space-2) !important; }
  .pt-md-2{ padding-top: var(--space-2) !important; }
  .pb-md-2{ padding-bottom: var(--space-2) !important; }
  .ps-md-2{ padding-left: var(--space-2) !important; }
  .pe-md-2{ padding-right: var(--space-2) !important; }
  .mx-md-2{ margin-left: var(--space-2) !important; margin-right: var(--space-2) !important; }
  .my-md-2{ margin-top: var(--space-2) !important; margin-bottom: var(--space-2) !important; }
  .px-md-2{ padding-left: var(--space-2) !important; padding-right: var(--space-2) !important; }
  .py-md-2{ padding-top: var(--space-2) !important; padding-bottom: var(--space-2) !important; }
  .gap-md-2{ gap: var(--space-2) !important; }
  .row-gap-md-2{ row-gap: var(--space-2) !important; }
  .column-gap-md-2{ column-gap: var(--space-2) !important; }
  .g-md-2{ --bs-gutter-x: var(--space-2); --bs-gutter-y: var(--space-2); }
  .gx-md-2{ --bs-gutter-x: var(--space-2); }
  .gy-md-2{ --bs-gutter-y: var(--space-2); }
  .m-md-3{ margin: var(--space-3) !important; }
  .mt-md-3{ margin-top: var(--space-3) !important; }
  .mb-md-3{ margin-bottom: var(--space-3) !important; }
  .ms-md-3{ margin-left: var(--space-3) !important; }
  .me-md-3{ margin-right: var(--space-3) !important; }
  .p-md-3{ padding: var(--space-3) !important; }
  .pt-md-3{ padding-top: var(--space-3) !important; }
  .pb-md-3{ padding-bottom: var(--space-3) !important; }
  .ps-md-3{ padding-left: var(--space-3) !important; }
  .pe-md-3{ padding-right: var(--space-3) !important; }
  .mx-md-3{ margin-left: var(--space-3) !important; margin-right: var(--space-3) !important; }
  .my-md-3{ margin-top: var(--space-3) !important; margin-bottom: var(--space-3) !important; }
  .px-md-3{ padding-left: var(--space-3) !important; padding-right: var(--space-3) !important; }
  .py-md-3{ padding-top: var(--space-3) !important; padding-bottom: var(--space-3) !important; }
  .gap-md-3{ gap: var(--space-3) !important; }
  .row-gap-md-3{ row-gap: var(--space-3) !important; }
  .column-gap-md-3{ column-gap: var(--space-3) !important; }
  .g-md-3{ --bs-gutter-x: var(--space-3); --bs-gutter-y: var(--space-3); }
  .gx-md-3{ --bs-gutter-x: var(--space-3); }
  .gy-md-3{ --bs-gutter-y: var(--space-3); }
  .m-md-4{ margin: var(--space-4) !important; }
  .mt-md-4{ margin-top: var(--space-4) !important; }
  .mb-md-4{ margin-bottom: var(--space-4) !important; }
  .ms-md-4{ margin-left: var(--space-4) !important; }
  .me-md-4{ margin-right: var(--space-4) !important; }
  .p-md-4{ padding: var(--space-4) !important; }
  .pt-md-4{ padding-top: var(--space-4) !important; }
  .pb-md-4{ padding-bottom: var(--space-4) !important; }
  .ps-md-4{ padding-left: var(--space-4) !important; }
  .pe-md-4{ padding-right: var(--space-4) !important; }
  .mx-md-4{ margin-left: var(--space-4) !important; margin-right: var(--space-4) !important; }
  .my-md-4{ margin-top: var(--space-4) !important; margin-bottom: var(--space-4) !important; }
  .px-md-4{ padding-left: var(--space-4) !important; padding-right: var(--space-4) !important; }
  .py-md-4{ padding-top: var(--space-4) !important; padding-bottom: var(--space-4) !important; }
  .gap-md-4{ gap: var(--space-4) !important; }
  .row-gap-md-4{ row-gap: var(--space-4) !important; }
  .column-gap-md-4{ column-gap: var(--space-4) !important; }
  .g-md-4{ --bs-gutter-x: var(--space-4); --bs-gutter-y: var(--space-4); }
  .gx-md-4{ --bs-gutter-x: var(--space-4); }
  .gy-md-4{ --bs-gutter-y: var(--space-4); }
  .m-md-5{ margin: var(--space-5) !important; }
  .mt-md-5{ margin-top: var(--space-5) !important; }
  .mb-md-5{ margin-bottom: var(--space-5) !important; }
  .ms-md-5{ margin-left: var(--space-5) !important; }
  .me-md-5{ margin-right: var(--space-5) !important; }
  .p-md-5{ padding: var(--space-5) !important; }
  .pt-md-5{ padding-top: var(--space-5) !important; }
  .pb-md-5{ padding-bottom: var(--space-5) !important; }
  .ps-md-5{ padding-left: var(--space-5) !important; }
  .pe-md-5{ padding-right: var(--space-5) !important; }
  .mx-md-5{ margin-left: var(--space-5) !important; margin-right: var(--space-5) !important; }
  .my-md-5{ margin-top: var(--space-5) !important; margin-bottom: var(--space-5) !important; }
  .px-md-5{ padding-left: var(--space-5) !important; padding-right: var(--space-5) !important; }
  .py-md-5{ padding-top: var(--space-5) !important; padding-bottom: var(--space-5) !important; }
  .gap-md-5{ gap: var(--space-5) !important; }
  .row-gap-md-5{ row-gap: var(--space-5) !important; }
  .column-gap-md-5{ column-gap: var(--space-5) !important; }
  .g-md-5{ --bs-gutter-x: var(--space-5); --bs-gutter-y: var(--space-5); }
  .gx-md-5{ --bs-gutter-x: var(--space-5); }
  .gy-md-5{ --bs-gutter-y: var(--space-5); }
  .m-md-6{ margin: var(--space-6) !important; }
  .mt-md-6{ margin-top: var(--space-6) !important; }
  .mb-md-6{ margin-bottom: var(--space-6) !important; }
  .ms-md-6{ margin-left: var(--space-6) !important; }
  .me-md-6{ margin-right: var(--space-6) !important; }
  .p-md-6{ padding: var(--space-6) !important; }
  .pt-md-6{ padding-top: var(--space-6) !important; }
  .pb-md-6{ padding-bottom: var(--space-6) !important; }
  .ps-md-6{ padding-left: var(--space-6) !important; }
  .pe-md-6{ padding-right: var(--space-6) !important; }
  .mx-md-6{ margin-left: var(--space-6) !important; margin-right: var(--space-6) !important; }
  .my-md-6{ margin-top: var(--space-6) !important; margin-bottom: var(--space-6) !important; }
  .px-md-6{ padding-left: var(--space-6) !important; padding-right: var(--space-6) !important; }
  .py-md-6{ padding-top: var(--space-6) !important; padding-bottom: var(--space-6) !important; }
  .gap-md-6{ gap: var(--space-6) !important; }
  .row-gap-md-6{ row-gap: var(--space-6) !important; }
  .column-gap-md-6{ column-gap: var(--space-6) !important; }
  .g-md-6{ --bs-gutter-x: var(--space-6); --bs-gutter-y: var(--space-6); }
  .gx-md-6{ --bs-gutter-x: var(--space-6); }
  .gy-md-6{ --bs-gutter-y: var(--space-6); }
}

@media (min-width: 992px){
  .m-lg-1{ margin: var(--space-1) !important; }
  .mt-lg-1{ margin-top: var(--space-1) !important; }
  .mb-lg-1{ margin-bottom: var(--space-1) !important; }
  .ms-lg-1{ margin-left: var(--space-1) !important; }
  .me-lg-1{ margin-right: var(--space-1) !important; }
  .p-lg-1{ padding: var(--space-1) !important; }
  .pt-lg-1{ padding-top: var(--space-1) !important; }
  .pb-lg-1{ padding-bottom: var(--space-1) !important; }
  .ps-lg-1{ padding-left: var(--space-1) !important; }
  .pe-lg-1{ padding-right: var(--space-1) !important; }
  .mx-lg-1{ margin-left: var(--space-1) !important; margin-right: var(--space-1) !important; }
  .my-lg-1{ margin-top: var(--space-1) !important; margin-bottom: var(--space-1) !important; }
  .px-lg-1{ padding-left: var(--space-1) !important; padding-right: var(--space-1) !important; }
  .py-lg-1{ padding-top: var(--space-1) !important; padding-bottom: var(--space-1) !important; }
  .gap-lg-1{ gap: var(--space-1) !important; }
  .row-gap-lg-1{ row-gap: var(--space-1) !important; }
  .column-gap-lg-1{ column-gap: var(--space-1) !important; }
  .g-lg-1{ --bs-gutter-x: var(--space-1); --bs-gutter-y: var(--space-1); }
  .gx-lg-1{ --bs-gutter-x: var(--space-1); }
  .gy-lg-1{ --bs-gutter-y: var(--space-1); }
  .m-lg-2{ margin: var(--space-2) !important; }
  .mt-lg-2{ margin-top: var(--space-2) !important; }
  .mb-lg-2{ margin-bottom: var(--space-2) !important; }
  .ms-lg-2{ margin-left: var(--space-2) !important; }
  .me-lg-2{ margin-right: var(--space-2) !important; }
  .p-lg-2{ padding: var(--space-2) !important; }
  .pt-lg-2{ padding-top: var(--space-2) !important; }
  .pb-lg-2{ padding-bottom: var(--space-2) !important; }
  .ps-lg-2{ padding-left: var(--space-2) !important; }
  .pe-lg-2{ padding-right: var(--space-2) !important; }
  .mx-lg-2{ margin-left: var(--space-2) !important; margin-right: var(--space-2) !important; }
  .my-lg-2{ margin-top: var(--space-2) !important; margin-bottom: var(--space-2) !important; }
  .px-lg-2{ padding-left: var(--space-2) !important; padding-right: var(--space-2) !important; }
  .py-lg-2{ padding-top: var(--space-2) !important; padding-bottom: var(--space-2) !important; }
  .gap-lg-2{ gap: var(--space-2) !important; }
  .row-gap-lg-2{ row-gap: var(--space-2) !important; }
  .column-gap-lg-2{ column-gap: var(--space-2) !important; }
  .g-lg-2{ --bs-gutter-x: var(--space-2); --bs-gutter-y: var(--space-2); }
  .gx-lg-2{ --bs-gutter-x: var(--space-2); }
  .gy-lg-2{ --bs-gutter-y: var(--space-2); }
  .m-lg-3{ margin: var(--space-3) !important; }
  .mt-lg-3{ margin-top: var(--space-3) !important; }
  .mb-lg-3{ margin-bottom: var(--space-3) !important; }
  .ms-lg-3{ margin-left: var(--space-3) !important; }
  .me-lg-3{ margin-right: var(--space-3) !important; }
  .p-lg-3{ padding: var(--space-3) !important; }
  .pt-lg-3{ padding-top: var(--space-3) !important; }
  .pb-lg-3{ padding-bottom: var(--space-3) !important; }
  .ps-lg-3{ padding-left: var(--space-3) !important; }
  .pe-lg-3{ padding-right: var(--space-3) !important; }
  .mx-lg-3{ margin-left: var(--space-3) !important; margin-right: var(--space-3) !important; }
  .my-lg-3{ margin-top: var(--space-3) !important; margin-bottom: var(--space-3) !important; }
  .px-lg-3{ padding-left: var(--space-3) !important; padding-right: var(--space-3) !important; }
  .py-lg-3{ padding-top: var(--space-3) !important; padding-bottom: var(--space-3) !important; }
  .gap-lg-3{ gap: var(--space-3) !important; }
  .row-gap-lg-3{ row-gap: var(--space-3) !important; }
  .column-gap-lg-3{ column-gap: var(--space-3) !important; }
  .g-lg-3{ --bs-gutter-x: var(--space-3); --bs-gutter-y: var(--space-3); }
  .gx-lg-3{ --bs-gutter-x: var(--space-3); }
  .gy-lg-3{ --bs-gutter-y: var(--space-3); }
  .m-lg-4{ margin: var(--space-4) !important; }
  .mt-lg-4{ margin-top: var(--space-4) !important; }
  .mb-lg-4{ margin-bottom: var(--space-4) !important; }
  .ms-lg-4{ margin-left: var(--space-4) !important; }
  .me-lg-4{ margin-right: var(--space-4) !important; }
  .p-lg-4{ padding: var(--space-4) !important; }
  .pt-lg-4{ padding-top: var(--space-4) !important; }
  .pb-lg-4{ padding-bottom: var(--space-4) !important; }
  .ps-lg-4{ padding-left: var(--space-4) !important; }
  .pe-lg-4{ padding-right: var(--space-4) !important; }
  .mx-lg-4{ margin-left: var(--space-4) !important; margin-right: var(--space-4) !important; }
  .my-lg-4{ margin-top: var(--space-4) !important; margin-bottom: var(--space-4) !important; }
  .px-lg-4{ padding-left: var(--space-4) !important; padding-right: var(--space-4) !important; }
  .py-lg-4{ padding-top: var(--space-4) !important; padding-bottom: var(--space-4) !important; }
  .gap-lg-4{ gap: var(--space-4) !important; }
  .row-gap-lg-4{ row-gap: var(--space-4) !important; }
  .column-gap-lg-4{ column-gap: var(--space-4) !important; }
  .g-lg-4{ --bs-gutter-x: var(--space-4); --bs-gutter-y: var(--space-4); }
  .gx-lg-4{ --bs-gutter-x: var(--space-4); }
  .gy-lg-4{ --bs-gutter-y: var(--space-4); }
  .m-lg-5{ margin: var(--space-5) !important; }
  .mt-lg-5{ margin-top: var(--space-5) !important; }
  .mb-lg-5{ margin-bottom: var(--space-5) !important; }
  .ms-lg-5{ margin-left: var(--space-5) !important; }
  .me-lg-5{ margin-right: var(--space-5) !important; }
  .p-lg-5{ padding: var(--space-5) !important; }
  .pt-lg-5{ padding-top: var(--space-5) !important; }
  .pb-lg-5{ padding-bottom: var(--space-5) !important; }
  .ps-lg-5{ padding-left: var(--space-5) !important; }
  .pe-lg-5{ padding-right: var(--space-5) !important; }
  .mx-lg-5{ margin-left: var(--space-5) !important; margin-right: var(--space-5) !important; }
  .my-lg-5{ margin-top: var(--space-5) !important; margin-bottom: var(--space-5) !important; }
  .px-lg-5{ padding-left: var(--space-5) !important; padding-right: var(--space-5) !important; }
  .py-lg-5{ padding-top: var(--space-5) !important; padding-bottom: var(--space-5) !important; }
  .gap-lg-5{ gap: var(--space-5) !important; }
  .row-gap-lg-5{ row-gap: var(--space-5) !important; }
  .column-gap-lg-5{ column-gap: var(--space-5) !important; }
  .g-lg-5{ --bs-gutter-x: var(--space-5); --bs-gutter-y: var(--space-5); }
  .gx-lg-5{ --bs-gutter-x: var(--space-5); }
  .gy-lg-5{ --bs-gutter-y: var(--space-5); }
  .m-lg-6{ margin: var(--space-6) !important; }
  .mt-lg-6{ margin-top: var(--space-6) !important; }
  .mb-lg-6{ margin-bottom: var(--space-6) !important; }
  .ms-lg-6{ margin-left: var(--space-6) !important; }
  .me-lg-6{ margin-right: var(--space-6) !important; }
  .p-lg-6{ padding: var(--space-6) !important; }
  .pt-lg-6{ padding-top: var(--space-6) !important; }
  .pb-lg-6{ padding-bottom: var(--space-6) !important; }
  .ps-lg-6{ padding-left: var(--space-6) !important; }
  .pe-lg-6{ padding-right: var(--space-6) !important; }
  .mx-lg-6{ margin-left: var(--space-6) !important; margin-right: var(--space-6) !important; }
  .my-lg-6{ margin-top: var(--space-6) !important; margin-bottom: var(--space-6) !important; }
  .px-lg-6{ padding-left: var(--space-6) !important; padding-right: var(--space-6) !important; }
  .py-lg-6{ padding-top: var(--space-6) !important; padding-bottom: var(--space-6) !important; }
  .gap-lg-6{ gap: var(--space-6) !important; }
  .row-gap-lg-6{ row-gap: var(--space-6) !important; }
  .column-gap-lg-6{ column-gap: var(--space-6) !important; }
  .g-lg-6{ --bs-gutter-x: var(--space-6); --bs-gutter-y: var(--space-6); }
  .gx-lg-6{ --bs-gutter-x: var(--space-6); }
  .gy-lg-6{ --bs-gutter-y: var(--space-6); }
}

@media (min-width: 1200px){
  .m-xl-1{ margin: var(--space-1) !important; }
  .mt-xl-1{ margin-top: var(--space-1) !important; }
  .mb-xl-1{ margin-bottom: var(--space-1) !important; }
  .ms-xl-1{ margin-left: var(--space-1) !important; }
  .me-xl-1{ margin-right: var(--space-1) !important; }
  .p-xl-1{ padding: var(--space-1) !important; }
  .pt-xl-1{ padding-top: var(--space-1) !important; }
  .pb-xl-1{ padding-bottom: var(--space-1) !important; }
  .ps-xl-1{ padding-left: var(--space-1) !important; }
  .pe-xl-1{ padding-right: var(--space-1) !important; }
  .mx-xl-1{ margin-left: var(--space-1) !important; margin-right: var(--space-1) !important; }
  .my-xl-1{ margin-top: var(--space-1) !important; margin-bottom: var(--space-1) !important; }
  .px-xl-1{ padding-left: var(--space-1) !important; padding-right: var(--space-1) !important; }
  .py-xl-1{ padding-top: var(--space-1) !important; padding-bottom: var(--space-1) !important; }
  .gap-xl-1{ gap: var(--space-1) !important; }
  .row-gap-xl-1{ row-gap: var(--space-1) !important; }
  .column-gap-xl-1{ column-gap: var(--space-1) !important; }
  .g-xl-1{ --bs-gutter-x: var(--space-1); --bs-gutter-y: var(--space-1); }
  .gx-xl-1{ --bs-gutter-x: var(--space-1); }
  .gy-xl-1{ --bs-gutter-y: var(--space-1); }
  .m-xl-2{ margin: var(--space-2) !important; }
  .mt-xl-2{ margin-top: var(--space-2) !important; }
  .mb-xl-2{ margin-bottom: var(--space-2) !important; }
  .ms-xl-2{ margin-left: var(--space-2) !important; }
  .me-xl-2{ margin-right: var(--space-2) !important; }
  .p-xl-2{ padding: var(--space-2) !important; }
  .pt-xl-2{ padding-top: var(--space-2) !important; }
  .pb-xl-2{ padding-bottom: var(--space-2) !important; }
  .ps-xl-2{ padding-left: var(--space-2) !important; }
  .pe-xl-2{ padding-right: var(--space-2) !important; }
  .mx-xl-2{ margin-left: var(--space-2) !important; margin-right: var(--space-2) !important; }
  .my-xl-2{ margin-top: var(--space-2) !important; margin-bottom: var(--space-2) !important; }
  .px-xl-2{ padding-left: var(--space-2) !important; padding-right: var(--space-2) !important; }
  .py-xl-2{ padding-top: var(--space-2) !important; padding-bottom: var(--space-2) !important; }
  .gap-xl-2{ gap: var(--space-2) !important; }
  .row-gap-xl-2{ row-gap: var(--space-2) !important; }
  .column-gap-xl-2{ column-gap: var(--space-2) !important; }
  .g-xl-2{ --bs-gutter-x: var(--space-2); --bs-gutter-y: var(--space-2); }
  .gx-xl-2{ --bs-gutter-x: var(--space-2); }
  .gy-xl-2{ --bs-gutter-y: var(--space-2); }
  .m-xl-3{ margin: var(--space-3) !important; }
  .mt-xl-3{ margin-top: var(--space-3) !important; }
  .mb-xl-3{ margin-bottom: var(--space-3) !important; }
  .ms-xl-3{ margin-left: var(--space-3) !important; }
  .me-xl-3{ margin-right: var(--space-3) !important; }
  .p-xl-3{ padding: var(--space-3) !important; }
  .pt-xl-3{ padding-top: var(--space-3) !important; }
  .pb-xl-3{ padding-bottom: var(--space-3) !important; }
  .ps-xl-3{ padding-left: var(--space-3) !important; }
  .pe-xl-3{ padding-right: var(--space-3) !important; }
  .mx-xl-3{ margin-left: var(--space-3) !important; margin-right: var(--space-3) !important; }
  .my-xl-3{ margin-top: var(--space-3) !important; margin-bottom: var(--space-3) !important; }
  .px-xl-3{ padding-left: var(--space-3) !important; padding-right: var(--space-3) !important; }
  .py-xl-3{ padding-top: var(--space-3) !important; padding-bottom: var(--space-3) !important; }
  .gap-xl-3{ gap: var(--space-3) !important; }
  .row-gap-xl-3{ row-gap: var(--space-3) !important; }
  .column-gap-xl-3{ column-gap: var(--space-3) !important; }
  .g-xl-3{ --bs-gutter-x: var(--space-3); --bs-gutter-y: var(--space-3); }
  .gx-xl-3{ --bs-gutter-x: var(--space-3); }
  .gy-xl-3{ --bs-gutter-y: var(--space-3); }
  .m-xl-4{ margin: var(--space-4) !important; }
  .mt-xl-4{ margin-top: var(--space-4) !important; }
  .mb-xl-4{ margin-bottom: var(--space-4) !important; }
  .ms-xl-4{ margin-left: var(--space-4) !important; }
  .me-xl-4{ margin-right: var(--space-4) !important; }
  .p-xl-4{ padding: var(--space-4) !important; }
  .pt-xl-4{ padding-top: var(--space-4) !important; }
  .pb-xl-4{ padding-bottom: var(--space-4) !important; }
  .ps-xl-4{ padding-left: var(--space-4) !important; }
  .pe-xl-4{ padding-right: var(--space-4) !important; }
  .mx-xl-4{ margin-left: var(--space-4) !important; margin-right: var(--space-4) !important; }
  .my-xl-4{ margin-top: var(--space-4) !important; margin-bottom: var(--space-4) !important; }
  .px-xl-4{ padding-left: var(--space-4) !important; padding-right: var(--space-4) !important; }
  .py-xl-4{ padding-top: var(--space-4) !important; padding-bottom: var(--space-4) !important; }
  .gap-xl-4{ gap: var(--space-4) !important; }
  .row-gap-xl-4{ row-gap: var(--space-4) !important; }
  .column-gap-xl-4{ column-gap: var(--space-4) !important; }
  .g-xl-4{ --bs-gutter-x: var(--space-4); --bs-gutter-y: var(--space-4); }
  .gx-xl-4{ --bs-gutter-x: var(--space-4); }
  .gy-xl-4{ --bs-gutter-y: var(--space-4); }
  .m-xl-5{ margin: var(--space-5) !important; }
  .mt-xl-5{ margin-top: var(--space-5) !important; }
  .mb-xl-5{ margin-bottom: var(--space-5) !important; }
  .ms-xl-5{ margin-left: var(--space-5) !important; }
  .me-xl-5{ margin-right: var(--space-5) !important; }
  .p-xl-5{ padding: var(--space-5) !important; }
  .pt-xl-5{ padding-top: var(--space-5) !important; }
  .pb-xl-5{ padding-bottom: var(--space-5) !important; }
  .ps-xl-5{ padding-left: var(--space-5) !important; }
  .pe-xl-5{ padding-right: var(--space-5) !important; }
  .mx-xl-5{ margin-left: var(--space-5) !important; margin-right: var(--space-5) !important; }
  .my-xl-5{ margin-top: var(--space-5) !important; margin-bottom: var(--space-5) !important; }
  .px-xl-5{ padding-left: var(--space-5) !important; padding-right: var(--space-5) !important; }
  .py-xl-5{ padding-top: var(--space-5) !important; padding-bottom: var(--space-5) !important; }
  .gap-xl-5{ gap: var(--space-5) !important; }
  .row-gap-xl-5{ row-gap: var(--space-5) !important; }
  .column-gap-xl-5{ column-gap: var(--space-5) !important; }
  .g-xl-5{ --bs-gutter-x: var(--space-5); --bs-gutter-y: var(--space-5); }
  .gx-xl-5{ --bs-gutter-x: var(--space-5); }
  .gy-xl-5{ --bs-gutter-y: var(--space-5); }
  .m-xl-6{ margin: var(--space-6) !important; }
  .mt-xl-6{ margin-top: var(--space-6) !important; }
  .mb-xl-6{ margin-bottom: var(--space-6) !important; }
  .ms-xl-6{ margin-left: var(--space-6) !important; }
  .me-xl-6{ margin-right: var(--space-6) !important; }
  .p-xl-6{ padding: var(--space-6) !important; }
  .pt-xl-6{ padding-top: var(--space-6) !important; }
  .pb-xl-6{ padding-bottom: var(--space-6) !important; }
  .ps-xl-6{ padding-left: var(--space-6) !important; }
  .pe-xl-6{ padding-right: var(--space-6) !important; }
  .mx-xl-6{ margin-left: var(--space-6) !important; margin-right: var(--space-6) !important; }
  .my-xl-6{ margin-top: var(--space-6) !important; margin-bottom: var(--space-6) !important; }
  .px-xl-6{ padding-left: var(--space-6) !important; padding-right: var(--space-6) !important; }
  .py-xl-6{ padding-top: var(--space-6) !important; padding-bottom: var(--space-6) !important; }
  .gap-xl-6{ gap: var(--space-6) !important; }
  .row-gap-xl-6{ row-gap: var(--space-6) !important; }
  .column-gap-xl-6{ column-gap: var(--space-6) !important; }
  .g-xl-6{ --bs-gutter-x: var(--space-6); --bs-gutter-y: var(--space-6); }
  .gx-xl-6{ --bs-gutter-x: var(--space-6); }
  .gy-xl-6{ --bs-gutter-y: var(--space-6); }
}

@media (min-width: 1400px){
  .m-xxl-1{ margin: var(--space-1) !important; }
  .mt-xxl-1{ margin-top: var(--space-1) !important; }
  .mb-xxl-1{ margin-bottom: var(--space-1) !important; }
  .ms-xxl-1{ margin-left: var(--space-1) !important; }
  .me-xxl-1{ margin-right: var(--space-1) !important; }
  .p-xxl-1{ padding: var(--space-1) !important; }
  .pt-xxl-1{ padding-top: var(--space-1) !important; }
  .pb-xxl-1{ padding-bottom: var(--space-1) !important; }
  .ps-xxl-1{ padding-left: var(--space-1) !important; }
  .pe-xxl-1{ padding-right: var(--space-1) !important; }
  .mx-xxl-1{ margin-left: var(--space-1) !important; margin-right: var(--space-1) !important; }
  .my-xxl-1{ margin-top: var(--space-1) !important; margin-bottom: var(--space-1) !important; }
  .px-xxl-1{ padding-left: var(--space-1) !important; padding-right: var(--space-1) !important; }
  .py-xxl-1{ padding-top: var(--space-1) !important; padding-bottom: var(--space-1) !important; }
  .gap-xxl-1{ gap: var(--space-1) !important; }
  .row-gap-xxl-1{ row-gap: var(--space-1) !important; }
  .column-gap-xxl-1{ column-gap: var(--space-1) !important; }
  .g-xxl-1{ --bs-gutter-x: var(--space-1); --bs-gutter-y: var(--space-1); }
  .gx-xxl-1{ --bs-gutter-x: var(--space-1); }
  .gy-xxl-1{ --bs-gutter-y: var(--space-1); }
  .m-xxl-2{ margin: var(--space-2) !important; }
  .mt-xxl-2{ margin-top: var(--space-2) !important; }
  .mb-xxl-2{ margin-bottom: var(--space-2) !important; }
  .ms-xxl-2{ margin-left: var(--space-2) !important; }
  .me-xxl-2{ margin-right: var(--space-2) !important; }
  .p-xxl-2{ padding: var(--space-2) !important; }
  .pt-xxl-2{ padding-top: var(--space-2) !important; }
  .pb-xxl-2{ padding-bottom: var(--space-2) !important; }
  .ps-xxl-2{ padding-left: var(--space-2) !important; }
  .pe-xxl-2{ padding-right: var(--space-2) !important; }
  .mx-xxl-2{ margin-left: var(--space-2) !important; margin-right: var(--space-2) !important; }
  .my-xxl-2{ margin-top: var(--space-2) !important; margin-bottom: var(--space-2) !important; }
  .px-xxl-2{ padding-left: var(--space-2) !important; padding-right: var(--space-2) !important; }
  .py-xxl-2{ padding-top: var(--space-2) !important; padding-bottom: var(--space-2) !important; }
  .gap-xxl-2{ gap: var(--space-2) !important; }
  .row-gap-xxl-2{ row-gap: var(--space-2) !important; }
  .column-gap-xxl-2{ column-gap: var(--space-2) !important; }
  .g-xxl-2{ --bs-gutter-x: var(--space-2); --bs-gutter-y: var(--space-2); }
  .gx-xxl-2{ --bs-gutter-x: var(--space-2); }
  .gy-xxl-2{ --bs-gutter-y: var(--space-2); }
  .m-xxl-3{ margin: var(--space-3) !important; }
  .mt-xxl-3{ margin-top: var(--space-3) !important; }
  .mb-xxl-3{ margin-bottom: var(--space-3) !important; }
  .ms-xxl-3{ margin-left: var(--space-3) !important; }
  .me-xxl-3{ margin-right: var(--space-3) !important; }
  .p-xxl-3{ padding: var(--space-3) !important; }
  .pt-xxl-3{ padding-top: var(--space-3) !important; }
  .pb-xxl-3{ padding-bottom: var(--space-3) !important; }
  .ps-xxl-3{ padding-left: var(--space-3) !important; }
  .pe-xxl-3{ padding-right: var(--space-3) !important; }
  .mx-xxl-3{ margin-left: var(--space-3) !important; margin-right: var(--space-3) !important; }
  .my-xxl-3{ margin-top: var(--space-3) !important; margin-bottom: var(--space-3) !important; }
  .px-xxl-3{ padding-left: var(--space-3) !important; padding-right: var(--space-3) !important; }
  .py-xxl-3{ padding-top: var(--space-3) !important; padding-bottom: var(--space-3) !important; }
  .gap-xxl-3{ gap: var(--space-3) !important; }
  .row-gap-xxl-3{ row-gap: var(--space-3) !important; }
  .column-gap-xxl-3{ column-gap: var(--space-3) !important; }
  .g-xxl-3{ --bs-gutter-x: var(--space-3); --bs-gutter-y: var(--space-3); }
  .gx-xxl-3{ --bs-gutter-x: var(--space-3); }
  .gy-xxl-3{ --bs-gutter-y: var(--space-3); }
  .m-xxl-4{ margin: var(--space-4) !important; }
  .mt-xxl-4{ margin-top: var(--space-4) !important; }
  .mb-xxl-4{ margin-bottom: var(--space-4) !important; }
  .ms-xxl-4{ margin-left: var(--space-4) !important; }
  .me-xxl-4{ margin-right: var(--space-4) !important; }
  .p-xxl-4{ padding: var(--space-4) !important; }
  .pt-xxl-4{ padding-top: var(--space-4) !important; }
  .pb-xxl-4{ padding-bottom: var(--space-4) !important; }
  .ps-xxl-4{ padding-left: var(--space-4) !important; }
  .pe-xxl-4{ padding-right: var(--space-4) !important; }
  .mx-xxl-4{ margin-left: var(--space-4) !important; margin-right: var(--space-4) !important; }
  .my-xxl-4{ margin-top: var(--space-4) !important; margin-bottom: var(--space-4) !important; }
  .px-xxl-4{ padding-left: var(--space-4) !important; padding-right: var(--space-4) !important; }
  .py-xxl-4{ padding-top: var(--space-4) !important; padding-bottom: var(--space-4) !important; }
  .gap-xxl-4{ gap: var(--space-4) !important; }
  .row-gap-xxl-4{ row-gap: var(--space-4) !important; }
  .column-gap-xxl-4{ column-gap: var(--space-4) !important; }
  .g-xxl-4{ --bs-gutter-x: var(--space-4); --bs-gutter-y: var(--space-4); }
  .gx-xxl-4{ --bs-gutter-x: var(--space-4); }
  .gy-xxl-4{ --bs-gutter-y: var(--space-4); }
  .m-xxl-5{ margin: var(--space-5) !important; }
  .mt-xxl-5{ margin-top: var(--space-5) !important; }
  .mb-xxl-5{ margin-bottom: var(--space-5) !important; }
  .ms-xxl-5{ margin-left: var(--space-5) !important; }
  .me-xxl-5{ margin-right: var(--space-5) !important; }
  .p-xxl-5{ padding: var(--space-5) !important; }
  .pt-xxl-5{ padding-top: var(--space-5) !important; }
  .pb-xxl-5{ padding-bottom: var(--space-5) !important; }
  .ps-xxl-5{ padding-left: var(--space-5) !important; }
  .pe-xxl-5{ padding-right: var(--space-5) !important; }
  .mx-xxl-5{ margin-left: var(--space-5) !important; margin-right: var(--space-5) !important; }
  .my-xxl-5{ margin-top: var(--space-5) !important; margin-bottom: var(--space-5) !important; }
  .px-xxl-5{ padding-left: var(--space-5) !important; padding-right: var(--space-5) !important; }
  .py-xxl-5{ padding-top: var(--space-5) !important; padding-bottom: var(--space-5) !important; }
  .gap-xxl-5{ gap: var(--space-5) !important; }
  .row-gap-xxl-5{ row-gap: var(--space-5) !important; }
  .column-gap-xxl-5{ column-gap: var(--space-5) !important; }
  .g-xxl-5{ --bs-gutter-x: var(--space-5); --bs-gutter-y: var(--space-5); }
  .gx-xxl-5{ --bs-gutter-x: var(--space-5); }
  .gy-xxl-5{ --bs-gutter-y: var(--space-5); }
  .m-xxl-6{ margin: var(--space-6) !important; }
  .mt-xxl-6{ margin-top: var(--space-6) !important; }
  .mb-xxl-6{ margin-bottom: var(--space-6) !important; }
  .ms-xxl-6{ margin-left: var(--space-6) !important; }
  .me-xxl-6{ margin-right: var(--space-6) !important; }
  .p-xxl-6{ padding: var(--space-6) !important; }
  .pt-xxl-6{ padding-top: var(--space-6) !important; }
  .pb-xxl-6{ padding-bottom: var(--space-6) !important; }
  .ps-xxl-6{ padding-left: var(--space-6) !important; }
  .pe-xxl-6{ padding-right: var(--space-6) !important; }
  .mx-xxl-6{ margin-left: var(--space-6) !important; margin-right: var(--space-6) !important; }
  .my-xxl-6{ margin-top: var(--space-6) !important; margin-bottom: var(--space-6) !important; }
  .px-xxl-6{ padding-left: var(--space-6) !important; padding-right: var(--space-6) !important; }
  .py-xxl-6{ padding-top: var(--space-6) !important; padding-bottom: var(--space-6) !important; }
  .gap-xxl-6{ gap: var(--space-6) !important; }
  .row-gap-xxl-6{ row-gap: var(--space-6) !important; }
  .column-gap-xxl-6{ column-gap: var(--space-6) !important; }
  .g-xxl-6{ --bs-gutter-x: var(--space-6); --bs-gutter-y: var(--space-6); }
  .gx-xxl-6{ --bs-gutter-x: var(--space-6); }
  .gy-xxl-6{ --bs-gutter-y: var(--space-6); }
}