/* ============================================================
   ACSS Native Bricks Framework
   Based on Automatic.css 3.3.6 – Default Values
   Generated by ACSS→Bricks Converter
   https://automaticcss.com
   ============================================================ */

:root {
  /* ── ACSS Framework Variables ── */

  /* Viewport */
  --vp-min: 36rem;
  --vp-max: 128rem;

  /* Breakpoints */
  --breakpoint-xl: 1280px;
  --breakpoint-l: 992px;
  --breakpoint-m: 768px;
  --breakpoint-s: 480px;
  --breakpoint-xs: 360px;

  /* ── Colors ── */
  /* Primary */
  --primary: #e56c70;
  --primary-hover: hsl(358, 70%, calc(66% * 1.15));
  --primary-ultra-light: hsl(358, 70%, 95%);
  --primary-light: hsl(358, 70%, 85%);
  --primary-semi-light: hsl(358, 70%, 60%);
  --primary-semi-dark: hsl(358, 70%, 40%);
  --primary-dark: hsl(358, 70%, 25%);
  --primary-ultra-dark: hsl(358, 70%, 10%);
  --primary-trans-10: rgba(229, 108, 112, 0.1);
  --primary-trans-20: rgba(229, 108, 112, 0.2);
  --primary-trans-30: rgba(229, 108, 112, 0.3);
  --primary-trans-40: rgba(229, 108, 112, 0.4);
  --primary-trans-50: rgba(229, 108, 112, 0.5);
  --primary-trans-60: rgba(229, 108, 112, 0.6);
  --primary-trans-70: rgba(229, 108, 112, 0.7);
  --primary-trans-80: rgba(229, 108, 112, 0.8);
  --primary-trans-90: rgba(229, 108, 112, 0.9);
  --primary-h: 358;
  --primary-s: 70%;
  --primary-l: 66%;
  --primary-hex: #e56c70;
  --primary-r: 229;
  --primary-g: 108;
  --primary-b: 112;

  /* Secondary */
  --secondary: #7b68ee;
  --secondary-hover: hsl(248, 76%, calc(67% * 1.15));
  --secondary-ultra-light: hsl(248, 76%, 95%);
  --secondary-light: hsl(248, 76%, 85%);
  --secondary-semi-light: hsl(248, 76%, 60%);
  --secondary-semi-dark: hsl(248, 76%, 40%);
  --secondary-dark: hsl(248, 76%, 25%);
  --secondary-ultra-dark: hsl(248, 76%, 10%);
  --secondary-trans-10: rgba(123, 104, 238, 0.1);
  --secondary-trans-20: rgba(123, 104, 238, 0.2);
  --secondary-trans-30: rgba(123, 104, 238, 0.3);
  --secondary-trans-40: rgba(123, 104, 238, 0.4);
  --secondary-trans-50: rgba(123, 104, 238, 0.5);
  --secondary-trans-60: rgba(123, 104, 238, 0.6);
  --secondary-trans-70: rgba(123, 104, 238, 0.7);
  --secondary-trans-80: rgba(123, 104, 238, 0.8);
  --secondary-trans-90: rgba(123, 104, 238, 0.9);
  --secondary-h: 248;
  --secondary-s: 76%;
  --secondary-l: 67%;
  --secondary-hex: #7b68ee;
  --secondary-r: 123;
  --secondary-g: 104;
  --secondary-b: 238;

  /* Tertiary */
  --tertiary: #3cb371;
  --tertiary-hover: hsl(146, 50%, calc(47% * 1.15));
  --tertiary-ultra-light: hsl(146, 50%, 95%);
  --tertiary-light: hsl(146, 50%, 85%);
  --tertiary-semi-light: hsl(146, 50%, 60%);
  --tertiary-semi-dark: hsl(146, 50%, 40%);
  --tertiary-dark: hsl(146, 50%, 25%);
  --tertiary-ultra-dark: hsl(146, 50%, 10%);
  --tertiary-trans-10: rgba(60, 179, 113, 0.1);
  --tertiary-trans-20: rgba(60, 179, 113, 0.2);
  --tertiary-trans-30: rgba(60, 179, 113, 0.3);
  --tertiary-trans-40: rgba(60, 179, 113, 0.4);
  --tertiary-trans-50: rgba(60, 179, 113, 0.5);
  --tertiary-trans-60: rgba(60, 179, 113, 0.6);
  --tertiary-trans-70: rgba(60, 179, 113, 0.7);
  --tertiary-trans-80: rgba(60, 179, 113, 0.8);
  --tertiary-trans-90: rgba(60, 179, 113, 0.9);
  --tertiary-h: 146;
  --tertiary-s: 50%;
  --tertiary-l: 47%;
  --tertiary-hex: #3cb371;
  --tertiary-r: 60;
  --tertiary-g: 179;
  --tertiary-b: 113;

  /* Accent */
  --accent: #f5a623;
  --accent-hover: hsl(38, 90%, calc(55% * 1.15));
  --accent-ultra-light: hsl(38, 90%, 95%);
  --accent-light: hsl(38, 90%, 85%);
  --accent-semi-light: hsl(38, 90%, 60%);
  --accent-semi-dark: hsl(38, 90%, 40%);
  --accent-dark: hsl(38, 90%, 25%);
  --accent-ultra-dark: hsl(38, 90%, 10%);
  --accent-trans-10: rgba(245, 166, 35, 0.1);
  --accent-trans-20: rgba(245, 166, 35, 0.2);
  --accent-trans-30: rgba(245, 166, 35, 0.3);
  --accent-trans-40: rgba(245, 166, 35, 0.4);
  --accent-trans-50: rgba(245, 166, 35, 0.5);
  --accent-trans-60: rgba(245, 166, 35, 0.6);
  --accent-trans-70: rgba(245, 166, 35, 0.7);
  --accent-trans-80: rgba(245, 166, 35, 0.8);
  --accent-trans-90: rgba(245, 166, 35, 0.9);
  --accent-h: 38;
  --accent-s: 90%;
  --accent-l: 55%;
  --accent-hex: #f5a623;
  --accent-r: 245;
  --accent-g: 166;
  --accent-b: 35;

  /* Base */
  --base: #1a1a2e;
  --base-hover: hsl(240, 29%, calc(14% * 1.15));
  --base-ultra-light: hsl(240, 29%, 95%);
  --base-light: hsl(240, 29%, 85%);
  --base-semi-light: hsl(240, 29%, 60%);
  --base-semi-dark: hsl(240, 29%, 40%);
  --base-dark: hsl(240, 29%, 25%);
  --base-ultra-dark: hsl(240, 29%, 10%);
  --base-trans-10: rgba(26, 26, 46, 0.1);
  --base-trans-20: rgba(26, 26, 46, 0.2);
  --base-trans-30: rgba(26, 26, 46, 0.3);
  --base-trans-40: rgba(26, 26, 46, 0.4);
  --base-trans-50: rgba(26, 26, 46, 0.5);
  --base-trans-60: rgba(26, 26, 46, 0.6);
  --base-trans-70: rgba(26, 26, 46, 0.7);
  --base-trans-80: rgba(26, 26, 46, 0.8);
  --base-trans-90: rgba(26, 26, 46, 0.9);
  --base-h: 240;
  --base-s: 29%;
  --base-l: 14%;
  --base-hex: #1a1a2e;
  --base-r: 26;
  --base-g: 26;
  --base-b: 46;

  /* Neutral */
  --neutral: #6b7280;
  --neutral-hover: hsl(220, 9%, calc(46% * 1.15));
  --neutral-ultra-light: hsl(220, 9%, 95%);
  --neutral-light: hsl(220, 9%, 85%);
  --neutral-semi-light: hsl(220, 9%, 60%);
  --neutral-semi-dark: hsl(220, 9%, 40%);
  --neutral-dark: hsl(220, 9%, 25%);
  --neutral-ultra-dark: hsl(220, 9%, 10%);
  --neutral-trans-10: rgba(107, 114, 128, 0.1);
  --neutral-trans-20: rgba(107, 114, 128, 0.2);
  --neutral-trans-30: rgba(107, 114, 128, 0.3);
  --neutral-trans-40: rgba(107, 114, 128, 0.4);
  --neutral-trans-50: rgba(107, 114, 128, 0.5);
  --neutral-trans-60: rgba(107, 114, 128, 0.6);
  --neutral-trans-70: rgba(107, 114, 128, 0.7);
  --neutral-trans-80: rgba(107, 114, 128, 0.8);
  --neutral-trans-90: rgba(107, 114, 128, 0.9);
  --neutral-h: 220;
  --neutral-s: 9%;
  --neutral-l: 46%;
  --neutral-hex: #6b7280;
  --neutral-r: 107;
  --neutral-g: 114;
  --neutral-b: 128;

  /* Danger */
  --danger: #dc2626;
  --danger-hover: hsl(0, 72%, calc(51% * 1.15));
  --danger-ultra-light: hsl(0, 72%, 95%);
  --danger-light: hsl(0, 72%, 85%);
  --danger-semi-light: hsl(0, 72%, 60%);
  --danger-semi-dark: hsl(0, 72%, 40%);
  --danger-dark: hsl(0, 72%, 25%);
  --danger-ultra-dark: hsl(0, 72%, 10%);
  --danger-trans-10: rgba(220, 38, 38, 0.1);
  --danger-trans-20: rgba(220, 38, 38, 0.2);
  --danger-trans-30: rgba(220, 38, 38, 0.3);
  --danger-trans-40: rgba(220, 38, 38, 0.4);
  --danger-trans-50: rgba(220, 38, 38, 0.5);
  --danger-trans-60: rgba(220, 38, 38, 0.6);
  --danger-trans-70: rgba(220, 38, 38, 0.7);
  --danger-trans-80: rgba(220, 38, 38, 0.8);
  --danger-trans-90: rgba(220, 38, 38, 0.9);
  --danger-h: 0;
  --danger-s: 72%;
  --danger-l: 51%;
  --danger-hex: #dc2626;
  --danger-r: 220;
  --danger-g: 38;
  --danger-b: 38;

  /* Warning */
  --warning: #d97706;
  --warning-hover: hsl(38, 92%, calc(45% * 1.15));
  --warning-ultra-light: hsl(38, 92%, 95%);
  --warning-light: hsl(38, 92%, 85%);
  --warning-semi-light: hsl(38, 92%, 60%);
  --warning-semi-dark: hsl(38, 92%, 40%);
  --warning-dark: hsl(38, 92%, 25%);
  --warning-ultra-dark: hsl(38, 92%, 10%);
  --warning-trans-10: rgba(217, 119, 6, 0.1);
  --warning-trans-20: rgba(217, 119, 6, 0.2);
  --warning-trans-30: rgba(217, 119, 6, 0.3);
  --warning-trans-40: rgba(217, 119, 6, 0.4);
  --warning-trans-50: rgba(217, 119, 6, 0.5);
  --warning-trans-60: rgba(217, 119, 6, 0.6);
  --warning-trans-70: rgba(217, 119, 6, 0.7);
  --warning-trans-80: rgba(217, 119, 6, 0.8);
  --warning-trans-90: rgba(217, 119, 6, 0.9);
  --warning-h: 38;
  --warning-s: 92%;
  --warning-l: 45%;
  --warning-hex: #d97706;
  --warning-r: 217;
  --warning-g: 119;
  --warning-b: 6;

  /* Info */
  --info: #2563eb;
  --info-hover: hsl(217, 91%, calc(60% * 1.15));
  --info-ultra-light: hsl(217, 91%, 95%);
  --info-light: hsl(217, 91%, 85%);
  --info-semi-light: hsl(217, 91%, 60%);
  --info-semi-dark: hsl(217, 91%, 40%);
  --info-dark: hsl(217, 91%, 25%);
  --info-ultra-dark: hsl(217, 91%, 10%);
  --info-trans-10: rgba(37, 99, 235, 0.1);
  --info-trans-20: rgba(37, 99, 235, 0.2);
  --info-trans-30: rgba(37, 99, 235, 0.3);
  --info-trans-40: rgba(37, 99, 235, 0.4);
  --info-trans-50: rgba(37, 99, 235, 0.5);
  --info-trans-60: rgba(37, 99, 235, 0.6);
  --info-trans-70: rgba(37, 99, 235, 0.7);
  --info-trans-80: rgba(37, 99, 235, 0.8);
  --info-trans-90: rgba(37, 99, 235, 0.9);
  --info-h: 217;
  --info-s: 91%;
  --info-l: 60%;
  --info-hex: #2563eb;
  --info-r: 37;
  --info-g: 99;
  --info-b: 235;

  /* Success */
  --success: #16a34a;
  --success-hover: hsl(142, 71%, calc(45% * 1.15));
  --success-ultra-light: hsl(142, 71%, 95%);
  --success-light: hsl(142, 71%, 85%);
  --success-semi-light: hsl(142, 71%, 60%);
  --success-semi-dark: hsl(142, 71%, 40%);
  --success-dark: hsl(142, 71%, 25%);
  --success-ultra-dark: hsl(142, 71%, 10%);
  --success-trans-10: rgba(22, 163, 74, 0.1);
  --success-trans-20: rgba(22, 163, 74, 0.2);
  --success-trans-30: rgba(22, 163, 74, 0.3);
  --success-trans-40: rgba(22, 163, 74, 0.4);
  --success-trans-50: rgba(22, 163, 74, 0.5);
  --success-trans-60: rgba(22, 163, 74, 0.6);
  --success-trans-70: rgba(22, 163, 74, 0.7);
  --success-trans-80: rgba(22, 163, 74, 0.8);
  --success-trans-90: rgba(22, 163, 74, 0.9);
  --success-h: 142;
  --success-s: 71%;
  --success-l: 45%;
  --success-hex: #16a34a;
  --success-r: 22;
  --success-g: 163;
  --success-b: 74;

  /* Black & White */
  --white: #ffffff;
  --black: #000000;
  --shade-white: #ffffff;
  --shade-black: #000000;

  /* ── Spacing ── */
  --space-xs: clamp(1.4201rem, calc(-0.0943vw + 1.4541rem), 1.3333rem);
  --space-s: clamp(1.8462rem, calc(0.1672vw + 1.7860rem), 2.0000rem);
  --space-m: clamp(2.4000rem, calc(0.6522vw + 2.1652rem), 3.0000rem);
  --space-l: clamp(3.1200rem, calc(1.5000vw + 2.5800rem), 4.5000rem);
  --space-xl: clamp(4.0560rem, calc(2.9283vw + 3.0018rem), 6.7500rem);
  --space-xxl: clamp(5.2728rem, calc(5.2741vw + 3.3741rem), 10.1250rem);

  /* Section Spacing */
  --section-space-xs: clamp(4.2604rem, calc(1.1663vw + 3.8405rem), 5.3333rem);
  --section-space-s: clamp(5.5385rem, calc(2.6756vw + 4.5753rem), 8.0000rem);
  --section-space-m: clamp(7.2000rem, calc(5.2174vw + 5.3217rem), 12.0000rem);
  --section-space-l: clamp(9.3600rem, calc(9.3913vw + 5.9791rem), 18.0000rem);
  --section-space-xl: clamp(12.1680rem, calc(16.1217vw + 6.3642rem), 27.0000rem);
  --section-space-xxl: clamp(15.8184rem, calc(26.8278vw + 6.1604rem), 40.5000rem);

  /* Gap */
  --gap-xs: clamp(1.4201rem, calc(-0.0943vw + 1.4541rem), 1.3333rem);
  --gap-s: clamp(1.8462rem, calc(0.1672vw + 1.7860rem), 2.0000rem);
  --gap-m: clamp(2.4000rem, calc(0.6522vw + 2.1652rem), 3.0000rem);
  --gap-l: clamp(3.1200rem, calc(1.5000vw + 2.5800rem), 4.5000rem);
  --gap-xl: clamp(4.0560rem, calc(2.9283vw + 3.0018rem), 6.7500rem);
  --gap-xxl: clamp(5.2728rem, calc(5.2741vw + 3.3741rem), 10.1250rem);

  /* ── Typography ── */
  --text-xs: clamp(1.1111rem, calc(-0.1066vw + 1.1495rem), 1.0130rem);
  --text-s: clamp(1.3333rem, calc(0.0185vw + 1.3267rem), 1.3503rem);
  --text-m: clamp(1.6000rem, calc(0.2174vw + 1.5217rem), 1.8000rem);
  --text-l: clamp(1.9200rem, calc(0.5211vw + 1.7324rem), 2.3994rem);
  --text-xl: clamp(2.3040rem, calc(0.9722vw + 1.9540rem), 3.1984rem);
  --text-xxl: clamp(2.7648rem, calc(1.6290vw + 2.1784rem), 4.2635rem);

  /* Headings (fluid) */
  --h6: clamp(1.1111rem, calc(-0.1066vw + 1.1495rem), 1.0130rem);
  --h5: clamp(1.3333rem, calc(0.0185vw + 1.3267rem), 1.3503rem);
  --h4: clamp(1.6000rem, calc(0.2174vw + 1.5217rem), 1.8000rem);
  --h3: clamp(1.9200rem, calc(0.5211vw + 1.7324rem), 2.3994rem);
  --h2: clamp(2.3040rem, calc(0.9722vw + 1.9540rem), 3.1984rem);
  --h1: clamp(2.7648rem, calc(1.6290vw + 2.1784rem), 4.2635rem);

  /* Container */
  --content-width: 128rem;
  --section-padding-x: clamp(2.4000rem, calc(0.6522vw + 2.1652rem), 3.0000rem);

  /* Header */
  --header-height: 0px;

  /* Borders */
  --border-width: 1px;
  --border-color: hsl(var(--neutral-h), var(--neutral-s), 80%);
  --border-radius: 0.4rem;
  --border-radius-s: 0.2rem;
  --border-radius-l: 0.8rem;
  --border-radius-xl: 1.6rem;
  --border-radius-full: 9999px;

  /* Box Shadows */
  --box-shadow-xs: 0 1px 2px rgba(0,0,0,0.05);
  --box-shadow-s:  0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
  --box-shadow-m:  0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
  --box-shadow-l:  0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
  --box-shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);

  /* Transitions */
  --transition: all 0.2s ease;
  --transition-s: all 0.1s ease;
  --transition-m: all 0.2s ease;
  --transition-l: all 0.4s ease;

  /* Z-Index */
  --z-1: 1;
  --z-2: 2;
  --z-3: 3;
  --z-4: 4;
  --z-5: 5;
  --z-999: 999;
  --z-9999: 9999;

  /* Opacity */
  --opacity-10: 0.1;
  --opacity-20: 0.2;
  --opacity-30: 0.3;
  --opacity-40: 0.4;
  --opacity-50: 0.5;
  --opacity-60: 0.6;
  --opacity-70: 0.7;
  --opacity-80: 0.8;
  --opacity-90: 0.9;

}
/* ── Base Reset & Smooth Scrolling ── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 62.5%; }
body { font-size: var(--text-m); }
img, video, svg { max-width: 100%; height: auto; display: block; }

/* ── Color Scheme ── */
.color-scheme--main, body { background-color: var(--white); color: var(--base); }
.color-scheme--dark { background-color: var(--base); color: var(--white); }
@media (prefers-color-scheme: dark) {
  .prefers-color-scheme { background-color: var(--base); color: var(--white); }
}

/* ── Typography Utility Classes ── */
.text--xs { font-size: var(--text-xs); }
.text--s { font-size: var(--text-s); }
.text--m { font-size: var(--text-m); }
.text--l { font-size: var(--text-l); }
.text--xl { font-size: var(--text-xl); }
.text--xxl { font-size: var(--text-xxl); }
.text--larger { font-size: calc(var(--text-m) * 1.5); }

.text--left { text-align: left; }
.text--center { text-align: center; }
.text--right { text-align: right; }
.text--justify { text-align: justify; }

.text--100 { font-weight: 100; }
.text--200 { font-weight: 200; }
.text--300 { font-weight: 300; }
.text--400 { font-weight: 400; }
.text--500 { font-weight: 500; }
.text--600 { font-weight: 600; }
.text--700 { font-weight: 700; }
.text--800 { font-weight: 800; }
.text--900 { font-weight: 900; }

.text--uppercase { text-transform: uppercase; }
.text--lowercase { text-transform: lowercase; }
.text--capitalize { text-transform: capitalize; }
.text--none { text-transform: none; }

.text--underline { text-decoration: underline; }
.text--no-underline { text-decoration: none; }
.text--italic { font-style: italic; }
.text--nowrap { white-space: nowrap; }
.text--break { word-break: break-word; }

.text--primary { color: var(--primary); }
.text--secondary { color: var(--secondary); }
.text--tertiary { color: var(--tertiary); }
.text--accent { color: var(--accent); }
.text--base { color: var(--base); }
.text--neutral { color: var(--neutral); }
.text--danger { color: var(--danger); }
.text--warning { color: var(--warning); }
.text--info { color: var(--info); }
.text--success { color: var(--success); }
.text--dark { color: var(--base); }
.text--dark-muted { color: var(--neutral); }
.text--light { color: var(--white); }
.text--light-muted { color: rgba(255,255,255,0.7); }

/* ── Spacing Utility Classes ── */
/* Padding */
.padding--xs { padding: var(--space-xs); }
.padding--s { padding: var(--space-s); }
.padding--m { padding: var(--space-m); }
.padding--l { padding: var(--space-l); }
.padding--xl { padding: var(--space-xl); }
.padding--xxl { padding: var(--space-xxl); }
.padding--none { padding: 0; }
.padding-top--xs { padding-top: var(--space-xs); }
.padding-top--s { padding-top: var(--space-s); }
.padding-top--m { padding-top: var(--space-m); }
.padding-top--l { padding-top: var(--space-l); }
.padding-top--xl { padding-top: var(--space-xl); }
.padding-top--xxl { padding-top: var(--space-xxl); }
.padding-top--none { padding-top: 0; }
.padding-bottom--xs { padding-bottom: var(--space-xs); }
.padding-bottom--s { padding-bottom: var(--space-s); }
.padding-bottom--m { padding-bottom: var(--space-m); }
.padding-bottom--l { padding-bottom: var(--space-l); }
.padding-bottom--xl { padding-bottom: var(--space-xl); }
.padding-bottom--xxl { padding-bottom: var(--space-xxl); }
.padding-bottom--none { padding-bottom: 0; }
.padding-left--xs { padding-left: var(--space-xs); }
.padding-left--s { padding-left: var(--space-s); }
.padding-left--m { padding-left: var(--space-m); }
.padding-left--l { padding-left: var(--space-l); }
.padding-left--xl { padding-left: var(--space-xl); }
.padding-left--xxl { padding-left: var(--space-xxl); }
.padding-left--none { padding-left: 0; }
.padding-right--xs { padding-right: var(--space-xs); }
.padding-right--s { padding-right: var(--space-s); }
.padding-right--m { padding-right: var(--space-m); }
.padding-right--l { padding-right: var(--space-l); }
.padding-right--xl { padding-right: var(--space-xl); }
.padding-right--xxl { padding-right: var(--space-xxl); }
.padding-right--none { padding-right: 0; }
.padding-x--xs { padding-inline: var(--space-xs); }
.padding-x--s { padding-inline: var(--space-s); }
.padding-x--m { padding-inline: var(--space-m); }
.padding-x--l { padding-inline: var(--space-l); }
.padding-x--xl { padding-inline: var(--space-xl); }
.padding-x--xxl { padding-inline: var(--space-xxl); }
.padding-x--none { padding-inline: 0; }
.padding-y--xs { padding-block: var(--space-xs); }
.padding-y--s { padding-block: var(--space-s); }
.padding-y--m { padding-block: var(--space-m); }
.padding-y--l { padding-block: var(--space-l); }
.padding-y--xl { padding-block: var(--space-xl); }
.padding-y--xxl { padding-block: var(--space-xxl); }
.padding-y--none { padding-block: 0; }

/* Margin */
.margin--xs { margin: var(--space-xs); }
.margin--s { margin: var(--space-s); }
.margin--m { margin: var(--space-m); }
.margin--l { margin: var(--space-l); }
.margin--xl { margin: var(--space-xl); }
.margin--xxl { margin: var(--space-xxl); }
.margin--none { margin: 0; }
.margin--auto { margin: auto; }
.margin-top--xs { margin-top: var(--space-xs); }
.margin-top--s { margin-top: var(--space-s); }
.margin-top--m { margin-top: var(--space-m); }
.margin-top--l { margin-top: var(--space-l); }
.margin-top--xl { margin-top: var(--space-xl); }
.margin-top--xxl { margin-top: var(--space-xxl); }
.margin-top--none { margin-top: 0; }
.margin-top--auto { margin-top: auto; }
.margin-bottom--xs { margin-bottom: var(--space-xs); }
.margin-bottom--s { margin-bottom: var(--space-s); }
.margin-bottom--m { margin-bottom: var(--space-m); }
.margin-bottom--l { margin-bottom: var(--space-l); }
.margin-bottom--xl { margin-bottom: var(--space-xl); }
.margin-bottom--xxl { margin-bottom: var(--space-xxl); }
.margin-bottom--none { margin-bottom: 0; }
.margin-bottom--auto { margin-bottom: auto; }
.margin-left--xs { margin-left: var(--space-xs); }
.margin-left--s { margin-left: var(--space-s); }
.margin-left--m { margin-left: var(--space-m); }
.margin-left--l { margin-left: var(--space-l); }
.margin-left--xl { margin-left: var(--space-xl); }
.margin-left--xxl { margin-left: var(--space-xxl); }
.margin-left--none { margin-left: 0; }
.margin-left--auto { margin-left: auto; }
.margin-right--xs { margin-right: var(--space-xs); }
.margin-right--s { margin-right: var(--space-s); }
.margin-right--m { margin-right: var(--space-m); }
.margin-right--l { margin-right: var(--space-l); }
.margin-right--xl { margin-right: var(--space-xl); }
.margin-right--xxl { margin-right: var(--space-xxl); }
.margin-right--none { margin-right: 0; }
.margin-right--auto { margin-right: auto; }
.margin-x--xs { margin-inline: var(--space-xs); }
.margin-x--s { margin-inline: var(--space-s); }
.margin-x--m { margin-inline: var(--space-m); }
.margin-x--l { margin-inline: var(--space-l); }
.margin-x--xl { margin-inline: var(--space-xl); }
.margin-x--xxl { margin-inline: var(--space-xxl); }
.margin-x--none { margin-inline: 0; }
.margin-x--auto { margin-inline: auto; }
.margin-y--xs { margin-block: var(--space-xs); }
.margin-y--s { margin-block: var(--space-s); }
.margin-y--m { margin-block: var(--space-m); }
.margin-y--l { margin-block: var(--space-l); }
.margin-y--xl { margin-block: var(--space-xl); }
.margin-y--xxl { margin-block: var(--space-xxl); }
.margin-y--none { margin-block: 0; }
.margin-y--auto { margin-block: auto; }

/* Gap */
.gap--xs { gap: var(--gap-xs); }
.gap--s { gap: var(--gap-s); }
.gap--m { gap: var(--gap-m); }
.gap--l { gap: var(--gap-l); }
.gap--xl { gap: var(--gap-xl); }
.gap--xxl { gap: var(--gap-xxl); }
.gap--none { gap: 0; }
.gap-x--xs { column-gap: var(--gap-xs); }
.gap-y--xs { row-gap: var(--gap-xs); }
.gap-x--s { column-gap: var(--gap-s); }
.gap-y--s { row-gap: var(--gap-s); }
.gap-x--m { column-gap: var(--gap-m); }
.gap-y--m { row-gap: var(--gap-m); }
.gap-x--l { column-gap: var(--gap-l); }
.gap-y--l { row-gap: var(--gap-l); }
.gap-x--xl { column-gap: var(--gap-xl); }
.gap-y--xl { row-gap: var(--gap-xl); }
.gap-x--xxl { column-gap: var(--gap-xxl); }
.gap-y--xxl { row-gap: var(--gap-xxl); }

/* ── Flexbox Utility Classes ── */
.flex--row.flex--row { display: flex; flex-direction: row; }
.flex--col.flex--col { display: flex; flex-direction: column; }
.flex--row-reverse.flex--row-reverse { display: flex; flex-direction: row-reverse; }
.flex--col-reverse.flex--col-reverse { display: flex; flex-direction: column-reverse; }

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

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

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

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

.stretch.stretch { align-content: stretch; align-items: stretch; justify-content: stretch; }

.flex--1 { flex: 1; }
.flex--2 { flex: 2; }
.flex--3 { flex: 3; }
.flex--4 { flex: 4; }
.flex--5 { flex: 5; }
.flex--auto { flex: 1 1 auto; }
.flex--none { flex: none; }

/* ── Grid Utility Classes ── */
.grid--xs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(var(--space-xs) * 10, 100%), 1fr)); }
.grid--s { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(var(--space-s) * 10, 100%), 1fr)); }
.grid--m { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(var(--space-m) * 10, 100%), 1fr)); }
.grid--l { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(var(--space-l) * 10, 100%), 1fr)); }
.grid--xl { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(var(--space-xl) * 10, 100%), 1fr)); }
.grid--xxl { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(var(--space-xxl) * 10, 100%), 1fr)); }

.grid--1-col { display: grid; grid-template-columns: repeat(1, 1fr); }
.grid--2-col { display: grid; grid-template-columns: repeat(2, 1fr); }
.grid--3-col { display: grid; grid-template-columns: repeat(3, 1fr); }
.grid--4-col { display: grid; grid-template-columns: repeat(4, 1fr); }
.grid--5-col { display: grid; grid-template-columns: repeat(5, 1fr); }
.grid--6-col { display: grid; grid-template-columns: repeat(6, 1fr); }
.grid--7-col { display: grid; grid-template-columns: repeat(7, 1fr); }
.grid--8-col { display: grid; grid-template-columns: repeat(8, 1fr); }
.grid--9-col { display: grid; grid-template-columns: repeat(9, 1fr); }
.grid--10-col { display: grid; grid-template-columns: repeat(10, 1fr); }
.grid--11-col { display: grid; grid-template-columns: repeat(11, 1fr); }
.grid--12-col { display: grid; grid-template-columns: repeat(12, 1fr); }

.col--1 { grid-column: span 1 / span 1; }
.col--2 { grid-column: span 2 / span 2; }
.col--3 { grid-column: span 3 / span 3; }
.col--4 { grid-column: span 4 / span 4; }
.col--5 { grid-column: span 5 / span 5; }
.col--6 { grid-column: span 6 / span 6; }
.col--7 { grid-column: span 7 / span 7; }
.col--8 { grid-column: span 8 / span 8; }
.col--9 { grid-column: span 9 / span 9; }
.col--10 { grid-column: span 10 / span 10; }
.col--11 { grid-column: span 11 / span 11; }
.col--12 { grid-column: span 12 / span 12; }
.col--full { grid-column: 1 / -1; }

.variable-grid { display: grid; grid-template-columns: repeat(var(--grid-cols, 12), 1fr); gap: var(--gap-m); }

/* ── Width & Height ── */
.width--10 { width: 10%; }
.width--20 { width: 20%; }
.width--25 { width: 25%; }
.width--30 { width: 30%; }
.width--33 { width: 33%; }
.width--40 { width: 40%; }
.width--50 { width: 50%; }
.width--60 { width: 60%; }
.width--66 { width: 66%; }
.width--70 { width: 70%; }
.width--75 { width: 75%; }
.width--80 { width: 80%; }
.width--90 { width: 90%; }
.width--100 { width: 100%; }
.width--auto { width: auto; }
.width--full { width: 100%; }
.width--screen { width: 100vw; }
.width--content { width: var(--content-width); max-width: 100%; }

.height--10 { height: 10%; }
.height--20 { height: 20%; }
.height--25 { height: 25%; }
.height--30 { height: 30%; }
.height--33 { height: 33%; }
.height--40 { height: 40%; }
.height--50 { height: 50%; }
.height--60 { height: 60%; }
.height--66 { height: 66%; }
.height--70 { height: 70%; }
.height--75 { height: 75%; }
.height--80 { height: 80%; }
.height--90 { height: 90%; }
.height--100 { height: 100%; }
.height--auto { height: auto; }
.height--full { height: 100%; }
.height--screen { height: 100vh; }

.max-width--content { max-width: var(--content-width); }
.max-width--full { max-width: 100%; }

/* ── Display & Visibility ── */
.display--block { display: block; }
.display--inline { display: inline; }
.display--inline-block { display: inline-block; }
.display--flex { display: flex; }
.display--inline-flex { display: inline-flex; }
.display--grid { display: grid; }
.display--inline-grid { display: inline-grid; }
.display--none { display: none; }
.display--contents { display: contents; }

.hidden { display: none !important; }
.invisible { visibility: hidden; }
.visible { visibility: visible; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0; }

/* ── Position ── */
.position--static { position: static; }
.position--relative { position: relative; }
.position--absolute { position: absolute; }
.position--fixed { position: fixed; }
.position--sticky { position: sticky; }

.top--0 { top: 0; }
.top--auto { top: auto; }
.bottom--0 { bottom: 0; }
.bottom--auto { bottom: auto; }
.left--0 { left: 0; }
.left--auto { left: auto; }
.right--0 { right: 0; }
.right--auto { right: auto; }
.inset--0 { inset: 0; }

.z--1 { z-index: 1; }
.z--2 { z-index: 2; }
.z--3 { z-index: 3; }
.z--4 { z-index: 4; }
.z--5 { z-index: 5; }
.z--999 { z-index: 999; }
.z--9999 { z-index: 9999; }

/* ── Backgrounds ── */
.bg--primary { background-color: var(--primary); }
.bg--primary-light { background-color: var(--primary-light); }
.bg--primary-dark { background-color: var(--primary-dark); }
.bg--primary-ultra-light { background-color: var(--primary-ultra-light); }
.bg--primary-trans-10 { background-color: var(--primary-trans-10); }
.bg--primary-trans-20 { background-color: var(--primary-trans-20); }
.bg--primary-trans-30 { background-color: var(--primary-trans-30); }
.bg--secondary { background-color: var(--secondary); }
.bg--secondary-light { background-color: var(--secondary-light); }
.bg--secondary-dark { background-color: var(--secondary-dark); }
.bg--secondary-ultra-light { background-color: var(--secondary-ultra-light); }
.bg--secondary-trans-10 { background-color: var(--secondary-trans-10); }
.bg--secondary-trans-20 { background-color: var(--secondary-trans-20); }
.bg--secondary-trans-30 { background-color: var(--secondary-trans-30); }
.bg--tertiary { background-color: var(--tertiary); }
.bg--tertiary-light { background-color: var(--tertiary-light); }
.bg--tertiary-dark { background-color: var(--tertiary-dark); }
.bg--tertiary-ultra-light { background-color: var(--tertiary-ultra-light); }
.bg--tertiary-trans-10 { background-color: var(--tertiary-trans-10); }
.bg--tertiary-trans-20 { background-color: var(--tertiary-trans-20); }
.bg--tertiary-trans-30 { background-color: var(--tertiary-trans-30); }
.bg--accent { background-color: var(--accent); }
.bg--accent-light { background-color: var(--accent-light); }
.bg--accent-dark { background-color: var(--accent-dark); }
.bg--accent-ultra-light { background-color: var(--accent-ultra-light); }
.bg--accent-trans-10 { background-color: var(--accent-trans-10); }
.bg--accent-trans-20 { background-color: var(--accent-trans-20); }
.bg--accent-trans-30 { background-color: var(--accent-trans-30); }
.bg--base { background-color: var(--base); }
.bg--base-light { background-color: var(--base-light); }
.bg--base-dark { background-color: var(--base-dark); }
.bg--base-ultra-light { background-color: var(--base-ultra-light); }
.bg--base-trans-10 { background-color: var(--base-trans-10); }
.bg--base-trans-20 { background-color: var(--base-trans-20); }
.bg--base-trans-30 { background-color: var(--base-trans-30); }
.bg--neutral { background-color: var(--neutral); }
.bg--neutral-light { background-color: var(--neutral-light); }
.bg--neutral-dark { background-color: var(--neutral-dark); }
.bg--neutral-ultra-light { background-color: var(--neutral-ultra-light); }
.bg--neutral-trans-10 { background-color: var(--neutral-trans-10); }
.bg--neutral-trans-20 { background-color: var(--neutral-trans-20); }
.bg--neutral-trans-30 { background-color: var(--neutral-trans-30); }
.bg--danger { background-color: var(--danger); }
.bg--danger-light { background-color: var(--danger-light); }
.bg--danger-dark { background-color: var(--danger-dark); }
.bg--danger-ultra-light { background-color: var(--danger-ultra-light); }
.bg--danger-trans-10 { background-color: var(--danger-trans-10); }
.bg--danger-trans-20 { background-color: var(--danger-trans-20); }
.bg--danger-trans-30 { background-color: var(--danger-trans-30); }
.bg--warning { background-color: var(--warning); }
.bg--warning-light { background-color: var(--warning-light); }
.bg--warning-dark { background-color: var(--warning-dark); }
.bg--warning-ultra-light { background-color: var(--warning-ultra-light); }
.bg--warning-trans-10 { background-color: var(--warning-trans-10); }
.bg--warning-trans-20 { background-color: var(--warning-trans-20); }
.bg--warning-trans-30 { background-color: var(--warning-trans-30); }
.bg--info { background-color: var(--info); }
.bg--info-light { background-color: var(--info-light); }
.bg--info-dark { background-color: var(--info-dark); }
.bg--info-ultra-light { background-color: var(--info-ultra-light); }
.bg--info-trans-10 { background-color: var(--info-trans-10); }
.bg--info-trans-20 { background-color: var(--info-trans-20); }
.bg--info-trans-30 { background-color: var(--info-trans-30); }
.bg--success { background-color: var(--success); }
.bg--success-light { background-color: var(--success-light); }
.bg--success-dark { background-color: var(--success-dark); }
.bg--success-ultra-light { background-color: var(--success-ultra-light); }
.bg--success-trans-10 { background-color: var(--success-trans-10); }
.bg--success-trans-20 { background-color: var(--success-trans-20); }
.bg--success-trans-30 { background-color: var(--success-trans-30); }
.bg--white { background-color: var(--white); }
.bg--black { background-color: var(--black); }
.bg--transparent { background-color: transparent; }

/* ── Borders ── */
.border { border: var(--border-width) solid var(--border-color); }
.border--none { border: none; }

.border--top { border-top: var(--border-width) solid var(--border-color); }
.border--bottom { border-bottom: var(--border-width) solid var(--border-color); }
.border--left { border-left: var(--border-width) solid var(--border-color); }
.border--right { border-right: var(--border-width) solid var(--border-color); }

.radius--s { border-radius: var(--border-radius-s); }
.radius { border-radius: var(--border-radius); }
.radius--m { border-radius: var(--border-radius); }
.radius--l { border-radius: var(--border-radius-l); }
.radius--xl { border-radius: var(--border-radius-xl); }
.radius--full { border-radius: var(--border-radius-full); }
.radius--none { border-radius: 0; }

.border--primary { border-color: var(--primary); }
.border--secondary { border-color: var(--secondary); }
.border--tertiary { border-color: var(--tertiary); }
.border--accent { border-color: var(--accent); }
.border--base { border-color: var(--base); }
.border--neutral { border-color: var(--neutral); }
.border--danger { border-color: var(--danger); }
.border--warning { border-color: var(--warning); }
.border--info { border-color: var(--info); }
.border--success { border-color: var(--success); }

/* ── Opacity ── */
.opacity--0 { opacity: 0.0; }
.opacity--10 { opacity: 0.1; }
.opacity--20 { opacity: 0.2; }
.opacity--30 { opacity: 0.3; }
.opacity--40 { opacity: 0.4; }
.opacity--50 { opacity: 0.5; }
.opacity--60 { opacity: 0.6; }
.opacity--70 { opacity: 0.7; }
.opacity--80 { opacity: 0.8; }
.opacity--90 { opacity: 0.9; }
.opacity--100 { opacity: 1.0; }

/* ── Overflow ── */
.overflow--hidden { overflow: hidden; }
.overflow-x--hidden { overflow-x: hidden; }
.overflow-y--hidden { overflow-y: hidden; }
.overflow--auto { overflow: auto; }
.overflow-x--auto { overflow-x: auto; }
.overflow-y--auto { overflow-y: auto; }
.overflow--scroll { overflow: scroll; }
.overflow-x--scroll { overflow-x: scroll; }
.overflow-y--scroll { overflow-y: scroll; }
.overflow--visible { overflow: visible; }
.overflow-x--visible { overflow-x: visible; }
.overflow-y--visible { overflow-y: visible; }
.overflow--clip { overflow: clip; }
.overflow-x--clip { overflow-x: clip; }
.overflow-y--clip { overflow-y: clip; }

/* ── Aspect Ratios ── */
.ratio--square { aspect-ratio: 1/1; }
.ratio--video { aspect-ratio: 16/9; }
.ratio--widescreen { aspect-ratio: 21/9; }
.ratio--portrait { aspect-ratio: 3/4; }
.ratio--classic { aspect-ratio: 4/3; }
.ratio--golden { aspect-ratio: 1.618/1; }
.ratio--ultrawide { aspect-ratio: 32/9; }

/* ── Sections ── */
.section { padding-block: var(--section-space-m); padding-inline: var(--section-padding-x); }
.section--xs { padding-block: var(--section-space-xs); padding-inline: var(--section-padding-x); }
.section--s { padding-block: var(--section-space-s); padding-inline: var(--section-padding-x); }
.section--m { padding-block: var(--section-space-m); padding-inline: var(--section-padding-x); }
.section--l { padding-block: var(--section-space-l); padding-inline: var(--section-padding-x); }
.section--xl { padding-block: var(--section-space-xl); padding-inline: var(--section-padding-x); }
.section--xxl { padding-block: var(--section-space-xxl); padding-inline: var(--section-padding-x); }
.section--none { padding-block: 0; }

/* ── Container ── */
.container { width: 100%; max-width: var(--content-width); margin-inline: auto; padding-inline: var(--section-padding-x); }
.container--narrow { width: 100%; max-width: calc(var(--content-width) * 0.6); margin-inline: auto; padding-inline: var(--section-padding-x); }
.container--wide { width: 100%; max-width: calc(var(--content-width) * 1.2); margin-inline: auto; padding-inline: var(--section-padding-x); }

/* ── Centering ── */
.center--all { display: flex; align-items: center; justify-content: center; }
.center--v { display: flex; align-items: center; }
.center--h { display: flex; justify-content: center; }
.center--text { text-align: center; }
.center--margin { margin-inline: auto; }
.center--absolute { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

/* ── Accessibility ── */
.skip-link { position: absolute; transform: translateY(-100%); }
.skip-link:focus { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }

/* ── Owl (Lobotomized Owl / Stack) ── */
.stack > * + * { margin-block-start: var(--space-m); }
.stack--xs > * + * { margin-block-start: var(--space-xs); }
.stack--s > * + * { margin-block-start: var(--space-s); }
.stack--m > * + * { margin-block-start: var(--space-m); }
.stack--l > * + * { margin-block-start: var(--space-l); }
.stack--xl > * + * { margin-block-start: var(--space-xl); }
.stack--xxl > * + * { margin-block-start: var(--space-xxl); }

/* ── Animation & Transition ── */
.transition { transition: var(--transition); }
.transition--s { transition: var(--transition-s); }
.transition--m { transition: var(--transition-m); }
.transition--l { transition: var(--transition-l); }
.transition--none { transition: none; }

@keyframes acss-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes acss-slide-up { from { opacity: 0; transform: translateY(2rem); } to { opacity: 1; transform: translateY(0); } }
@keyframes acss-slide-down { from { opacity: 0; transform: translateY(-2rem); } to { opacity: 1; transform: translateY(0); } }
.animate--fade-in { animation: acss-fade-in 0.3s ease forwards; }
.animate--slide-up { animation: acss-slide-up 0.4s ease forwards; }
.animate--slide-down { animation: acss-slide-down 0.4s ease forwards; }

/* ── Object Fit ── */
.object-fit--contain { object-fit: contain; }
.object-fit--cover { object-fit: cover; }
.object-fit--fill { object-fit: fill; }
.object-fit--none { object-fit: none; }
.object-fit--scale-down { object-fit: scale-down; }
.object-position--top { object-position: top; }
.object-position--bottom { object-position: bottom; }
.object-position--left { object-position: left; }
.object-position--right { object-position: right; }
.object-position--center { object-position: center; }

/* ── Cursor ── */
.cursor--pointer { cursor: pointer; }
.cursor--default { cursor: default; }
.cursor--not-allowed { cursor: not-allowed; }
.cursor--grab { cursor: grab; }
.cursor--crosshair { cursor: crosshair; }
.cursor--text { cursor: text; }

/* ── Responsive Breakpoint Classes ── */

/* Breakpoint: xl (max-width: 1280px) */
@media (max-width: 1280px) {
  .display--xl-block { display: block; }
  .display--xl-inline { display: inline; }
  .display--xl-flex { display: flex; }
  .display--xl-grid { display: grid; }
  .display--xl-none { display: none; }
  .text--xl-left { text-align: left; }
  .text--xl-center { text-align: center; }
  .text--xl-right { text-align: right; }
  .text--xl-xs { font-size: var(--text-xs); }
  .text--xl-s { font-size: var(--text-s); }
  .text--xl-m { font-size: var(--text-m); }
  .text--xl-l { font-size: var(--text-l); }
  .text--xl-xl { font-size: var(--text-xl); }
  .text--xl-xxl { font-size: var(--text-xxl); }
  .flex--row-xl.flex--row-xl { display: flex; flex-direction: row; }
  .flex--col-xl.flex--col-xl { display: flex; flex-direction: column; }
  .padding--xl-xs { padding: var(--space-xs); }
  .margin--xl-xs { margin: var(--space-xs); }
  .gap--xl-xs { gap: var(--gap-xs); }
  .padding--xl-s { padding: var(--space-s); }
  .margin--xl-s { margin: var(--space-s); }
  .gap--xl-s { gap: var(--gap-s); }
  .padding--xl-m { padding: var(--space-m); }
  .margin--xl-m { margin: var(--space-m); }
  .gap--xl-m { gap: var(--gap-m); }
  .padding--xl-l { padding: var(--space-l); }
  .margin--xl-l { margin: var(--space-l); }
  .gap--xl-l { gap: var(--gap-l); }
  .padding--xl-xl { padding: var(--space-xl); }
  .margin--xl-xl { margin: var(--space-xl); }
  .gap--xl-xl { gap: var(--gap-xl); }
  .padding--xl-xxl { padding: var(--space-xxl); }
  .margin--xl-xxl { margin: var(--space-xxl); }
  .gap--xl-xxl { gap: var(--gap-xxl); }
  .hidden--xl { display: none !important; }
  .grid--xl-1-col { grid-template-columns: repeat(1, 1fr); }
  .grid--xl-2-col { grid-template-columns: repeat(2, 1fr); }
  .grid--xl-3-col { grid-template-columns: repeat(3, 1fr); }
  .grid--xl-4-col { grid-template-columns: repeat(4, 1fr); }
  .grid--xl-5-col { grid-template-columns: repeat(5, 1fr); }
  .grid--xl-6-col { grid-template-columns: repeat(6, 1fr); }
}

/* Breakpoint: l (max-width: 992px) */
@media (max-width: 992px) {
  .display--l-block { display: block; }
  .display--l-inline { display: inline; }
  .display--l-flex { display: flex; }
  .display--l-grid { display: grid; }
  .display--l-none { display: none; }
  .text--l-left { text-align: left; }
  .text--l-center { text-align: center; }
  .text--l-right { text-align: right; }
  .text--l-xs { font-size: var(--text-xs); }
  .text--l-s { font-size: var(--text-s); }
  .text--l-m { font-size: var(--text-m); }
  .text--l-l { font-size: var(--text-l); }
  .text--l-xl { font-size: var(--text-xl); }
  .text--l-xxl { font-size: var(--text-xxl); }
  .flex--row-l.flex--row-l { display: flex; flex-direction: row; }
  .flex--col-l.flex--col-l { display: flex; flex-direction: column; }
  .padding--l-xs { padding: var(--space-xs); }
  .margin--l-xs { margin: var(--space-xs); }
  .gap--l-xs { gap: var(--gap-xs); }
  .padding--l-s { padding: var(--space-s); }
  .margin--l-s { margin: var(--space-s); }
  .gap--l-s { gap: var(--gap-s); }
  .padding--l-m { padding: var(--space-m); }
  .margin--l-m { margin: var(--space-m); }
  .gap--l-m { gap: var(--gap-m); }
  .padding--l-l { padding: var(--space-l); }
  .margin--l-l { margin: var(--space-l); }
  .gap--l-l { gap: var(--gap-l); }
  .padding--l-xl { padding: var(--space-xl); }
  .margin--l-xl { margin: var(--space-xl); }
  .gap--l-xl { gap: var(--gap-xl); }
  .padding--l-xxl { padding: var(--space-xxl); }
  .margin--l-xxl { margin: var(--space-xxl); }
  .gap--l-xxl { gap: var(--gap-xxl); }
  .hidden--l { display: none !important; }
  .grid--l-1-col { grid-template-columns: repeat(1, 1fr); }
  .grid--l-2-col { grid-template-columns: repeat(2, 1fr); }
  .grid--l-3-col { grid-template-columns: repeat(3, 1fr); }
  .grid--l-4-col { grid-template-columns: repeat(4, 1fr); }
  .grid--l-5-col { grid-template-columns: repeat(5, 1fr); }
  .grid--l-6-col { grid-template-columns: repeat(6, 1fr); }
}

/* Breakpoint: m (max-width: 768px) */
@media (max-width: 768px) {
  .display--m-block { display: block; }
  .display--m-inline { display: inline; }
  .display--m-flex { display: flex; }
  .display--m-grid { display: grid; }
  .display--m-none { display: none; }
  .text--m-left { text-align: left; }
  .text--m-center { text-align: center; }
  .text--m-right { text-align: right; }
  .text--m-xs { font-size: var(--text-xs); }
  .text--m-s { font-size: var(--text-s); }
  .text--m-m { font-size: var(--text-m); }
  .text--m-l { font-size: var(--text-l); }
  .text--m-xl { font-size: var(--text-xl); }
  .text--m-xxl { font-size: var(--text-xxl); }
  .flex--row-m.flex--row-m { display: flex; flex-direction: row; }
  .flex--col-m.flex--col-m { display: flex; flex-direction: column; }
  .padding--m-xs { padding: var(--space-xs); }
  .margin--m-xs { margin: var(--space-xs); }
  .gap--m-xs { gap: var(--gap-xs); }
  .padding--m-s { padding: var(--space-s); }
  .margin--m-s { margin: var(--space-s); }
  .gap--m-s { gap: var(--gap-s); }
  .padding--m-m { padding: var(--space-m); }
  .margin--m-m { margin: var(--space-m); }
  .gap--m-m { gap: var(--gap-m); }
  .padding--m-l { padding: var(--space-l); }
  .margin--m-l { margin: var(--space-l); }
  .gap--m-l { gap: var(--gap-l); }
  .padding--m-xl { padding: var(--space-xl); }
  .margin--m-xl { margin: var(--space-xl); }
  .gap--m-xl { gap: var(--gap-xl); }
  .padding--m-xxl { padding: var(--space-xxl); }
  .margin--m-xxl { margin: var(--space-xxl); }
  .gap--m-xxl { gap: var(--gap-xxl); }
  .hidden--m { display: none !important; }
  .grid--m-1-col { grid-template-columns: repeat(1, 1fr); }
  .grid--m-2-col { grid-template-columns: repeat(2, 1fr); }
  .grid--m-3-col { grid-template-columns: repeat(3, 1fr); }
  .grid--m-4-col { grid-template-columns: repeat(4, 1fr); }
  .grid--m-5-col { grid-template-columns: repeat(5, 1fr); }
  .grid--m-6-col { grid-template-columns: repeat(6, 1fr); }
}

/* Breakpoint: s (max-width: 480px) */
@media (max-width: 480px) {
  .display--s-block { display: block; }
  .display--s-inline { display: inline; }
  .display--s-flex { display: flex; }
  .display--s-grid { display: grid; }
  .display--s-none { display: none; }
  .text--s-left { text-align: left; }
  .text--s-center { text-align: center; }
  .text--s-right { text-align: right; }
  .text--s-xs { font-size: var(--text-xs); }
  .text--s-s { font-size: var(--text-s); }
  .text--s-m { font-size: var(--text-m); }
  .text--s-l { font-size: var(--text-l); }
  .text--s-xl { font-size: var(--text-xl); }
  .text--s-xxl { font-size: var(--text-xxl); }
  .flex--row-s.flex--row-s { display: flex; flex-direction: row; }
  .flex--col-s.flex--col-s { display: flex; flex-direction: column; }
  .padding--s-xs { padding: var(--space-xs); }
  .margin--s-xs { margin: var(--space-xs); }
  .gap--s-xs { gap: var(--gap-xs); }
  .padding--s-s { padding: var(--space-s); }
  .margin--s-s { margin: var(--space-s); }
  .gap--s-s { gap: var(--gap-s); }
  .padding--s-m { padding: var(--space-m); }
  .margin--s-m { margin: var(--space-m); }
  .gap--s-m { gap: var(--gap-m); }
  .padding--s-l { padding: var(--space-l); }
  .margin--s-l { margin: var(--space-l); }
  .gap--s-l { gap: var(--gap-l); }
  .padding--s-xl { padding: var(--space-xl); }
  .margin--s-xl { margin: var(--space-xl); }
  .gap--s-xl { gap: var(--gap-xl); }
  .padding--s-xxl { padding: var(--space-xxl); }
  .margin--s-xxl { margin: var(--space-xxl); }
  .gap--s-xxl { gap: var(--gap-xxl); }
  .hidden--s { display: none !important; }
  .grid--s-1-col { grid-template-columns: repeat(1, 1fr); }
  .grid--s-2-col { grid-template-columns: repeat(2, 1fr); }
  .grid--s-3-col { grid-template-columns: repeat(3, 1fr); }
  .grid--s-4-col { grid-template-columns: repeat(4, 1fr); }
  .grid--s-5-col { grid-template-columns: repeat(5, 1fr); }
  .grid--s-6-col { grid-template-columns: repeat(6, 1fr); }
}

/* Breakpoint: xs (max-width: 360px) */
@media (max-width: 360px) {
  .display--xs-block { display: block; }
  .display--xs-inline { display: inline; }
  .display--xs-flex { display: flex; }
  .display--xs-grid { display: grid; }
  .display--xs-none { display: none; }
  .text--xs-left { text-align: left; }
  .text--xs-center { text-align: center; }
  .text--xs-right { text-align: right; }
  .text--xs-xs { font-size: var(--text-xs); }
  .text--xs-s { font-size: var(--text-s); }
  .text--xs-m { font-size: var(--text-m); }
  .text--xs-l { font-size: var(--text-l); }
  .text--xs-xl { font-size: var(--text-xl); }
  .text--xs-xxl { font-size: var(--text-xxl); }
  .flex--row-xs.flex--row-xs { display: flex; flex-direction: row; }
  .flex--col-xs.flex--col-xs { display: flex; flex-direction: column; }
  .padding--xs-xs { padding: var(--space-xs); }
  .margin--xs-xs { margin: var(--space-xs); }
  .gap--xs-xs { gap: var(--gap-xs); }
  .padding--xs-s { padding: var(--space-s); }
  .margin--xs-s { margin: var(--space-s); }
  .gap--xs-s { gap: var(--gap-s); }
  .padding--xs-m { padding: var(--space-m); }
  .margin--xs-m { margin: var(--space-m); }
  .gap--xs-m { gap: var(--gap-m); }
  .padding--xs-l { padding: var(--space-l); }
  .margin--xs-l { margin: var(--space-l); }
  .gap--xs-l { gap: var(--gap-l); }
  .padding--xs-xl { padding: var(--space-xl); }
  .margin--xs-xl { margin: var(--space-xl); }
  .gap--xs-xl { gap: var(--gap-xl); }
  .padding--xs-xxl { padding: var(--space-xxl); }
  .margin--xs-xxl { margin: var(--space-xxl); }
  .gap--xs-xxl { gap: var(--gap-xxl); }
  .hidden--xs { display: none !important; }
  .grid--xs-1-col { grid-template-columns: repeat(1, 1fr); }
  .grid--xs-2-col { grid-template-columns: repeat(2, 1fr); }
  .grid--xs-3-col { grid-template-columns: repeat(3, 1fr); }
  .grid--xs-4-col { grid-template-columns: repeat(4, 1fr); }
  .grid--xs-5-col { grid-template-columns: repeat(5, 1fr); }
  .grid--xs-6-col { grid-template-columns: repeat(6, 1fr); }
}