/* src/normalize.css */
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
@layer reset {
  html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
  }

  body {
    margin: 0;
  }

  main {
    display: block;
  }

  h1 {
    font-size: 2em;
    margin: .67em 0;
  }

  hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible;
  }

  pre {
    font-family: monospace, monospace;
    font-size: 1em;
  }

  a {
    background-color: #0000;
  }

  abbr[title] {
    border-bottom: none;
    text-decoration: underline;
    text-decoration: underline dotted;
  }

  b, strong {
    font-weight: bolder;
  }

  code, kbd, samp {
    font-family: monospace, monospace;
    font-size: 1em;
  }

  small {
    font-size: 80%;
  }

  sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }

  sub {
    bottom: -.25em;
  }

  sup {
    top: -.5em;
  }

  img {
    border-style: none;
  }

  button, input, optgroup, select, textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0;
  }

  button, input {
    overflow: visible;
  }

  button, select {
    text-transform: none;
  }

  button, [type="button"], [type="reset"], [type="submit"] {
    -webkit-appearance: button;
  }

  button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner {
    border-style: none;
    padding: 0;
  }

  button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring {
    outline: 1px dotted buttontext;
  }

  fieldset {
    padding: .35em .75em .625em;
  }

  legend {
    box-sizing: border-box;
    color: inherit;
    display: table;
    max-width: 100%;
    padding: 0;
    white-space: normal;
  }

  progress {
    vertical-align: baseline;
  }

  textarea {
    overflow: auto;
  }

  [type="checkbox"], [type="radio"] {
    box-sizing: border-box;
    padding: 0;
  }

  [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button {
    height: auto;
  }

  [type="search"] {
    -webkit-appearance: textfield;
    outline-offset: -2px;
  }

  [type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
  }

  ::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit;
  }

  details {
    display: block;
  }

  summary {
    display: list-item;
  }

  template {
    display: none;
  }

  [hidden] {
    display: none;
  }
}

/* src/gradients.css */
.gradient-1 {
  background: linear-gradient(var(--gradient-degree), var(--gradient-color-1), var(--gradient-color-2));
}

.gradient-2 {
  background: linear-gradient(var(--gradient-degree), var(--gradient-color-1) var(--gradient-stop), var(--gradient-color-2) var(--gradient-stop));
}

.gradient-3 {
  background: repeating-linear-gradient(var(--gradient-degree), transparent 0px, transparent var(--gradient-stripe-width), var(--gradient-color-1) var(--gradient-stripe-width), var(--gradient-color-1) calc(var(--gradient-stripe-width)  + var(--gradient-stripe-width-2)));
}

.gradient-4 {
  background: repeating-radial-gradient(circle, transparent 0px, transparent var(--gradient-stripe-width), var(--gradient-color-1) var(--gradient-stripe-width), var(--gradient-color-1) calc(var(--gradient-stripe-width)  + var(--gradient-stripe-width-2)));
}

/* src/variables.css */
@layer reset, base;

@layer base {
  html {
    container-type: inline-size;
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-heading);
    margin-block-start: 0;
    margin-block-end: 0;
    font-weight: 500;
  }

  h1 {
    font-size: 2rem;
  }

  h2 {
    font-size: 1.8rem;
  }

  h3 {
    font-size: 1.6rem;
  }

  h4 {
    font-size: 1.4rem;
  }

  h5 {
    font-size: 1.2rem;
  }

  h6 {
    color: var(--gray-4);
    font-size: 1.1rem;
  }

  p {
    line-height: 1.5rem;
  }

  form label {
    display: block;
    margin-top: calc(var(--spacing) * 2);
    margin-bottom: calc(var(--spacing) * 2);
    font-size: var(--size-0);
    line-height: var(--size-1);
  }

  form input[type="text"], form input[type="email"], form input[type="url"] {
    border-radius: calc(.625 * var(--border-radius));
    padding: calc(var(--spacing) * .5) calc(var(--spacing));
    border: 1px solid var(--gray-9);
    font-size: var(--font-size-2);
    width: 100%;
    margin-top: var(--spacing);
    box-shadow: var(--input-shadow);
    line-height: 22px;
  }

  button {
    border-radius: calc(.625 * var(--border-radius));
    background-color: var(--accent);
    border: none;
    font-size: var(--font-size-2);
    padding: calc(var(--spacing) * .5) calc(var(--spacing) * 1.5);
    border: 1px solid #0000;
    line-height: 22px;
    color: var(--gray-10);
    font-weight: 500;
    box-shadow: inset 0 .75px 0 1px #fff3;
  }

  button:hover {
    background-color: color-mix(in srgb, var(--accent), var(--foreground) var(--dim-2));
  }

  body {
    font-family: var(--font-family-body);
  }
}

@layer theme {
  :root {
    --background: #ccc;
    --foreground: #fff;
    --text: #000;
    --accent: #252525;
    --alternate: #eee;
    --info: #01f;
    --warning: #f90;
    --success: #0f0;
    --danger: red;
    --link: #00f;
    --contrast: #333;
    --input-shadow: 0px 1px 2px #00000017;
  }

  body {
    color: var(--text);
  }

  a:any-link {
    color: var(--link);
  }
}

:root {
  --spacing: 8px;
  --radius: 4px;
  --border-radius: calc(var(--radius) * 4);
  --dim-target: var(--background);
  --dim-0: 3.5%;
  --dim-1: 15.6%;
  --dim-2: 21.6%;
  --dim-3: 38.7%;
  --dim-4: 45.7%;
  --dim-5: 51.8%;
  --dim-6: 63.8%;
  --dim-7: 70.0%;
  --dim-8: 81.9%;
  --dim-9: 94%;
  --black: #000;
  --white: #fff;
  --gray-0: #101010;
  --gray-1: #171717;
  --gray-2: #2f2f2f;
  --gray-3: #464646;
  --gray-4: #5e5e5e;
  --gray-5: #757575;
  --gray-6: #8c8c8c;
  --gray-7: #a3a3a3;
  --gray-8: #bababa;
  --gray-9: #d1d1d1;
  --gray-10: #e8e8e8;
  --gray-11: #fff;
  --slate-gray-0: #09090b;
  --slate-gray-1: #1d1d22;
  --slate-gray-2: #313138;
  --slate-gray-3: #45444f;
  --slate-gray-4: #595866;
  --slate-gray-5: #6d6c7d;
  --slate-gray-6: #838292;
  --slate-gray-7: #9a9aa7;
  --slate-gray-8: #b2b1bb;
  --slate-gray-9: #c9c9d0;
  --slate-gray-10: #e1e0e4;
  --slate-gray-11: #f8f8f9;
  --blue-1: #071e3f;
  --blue-2: #0c3166;
  --blue-3: #10448d;
  --blue-4: #1556b4;
  --blue-5: #1969db;
  --blue-6: #317fed;
  --blue-7: #5797f0;
  --blue-8: #7daef4;
  --blue-9: #a3c6f7;
  --blue-10: #c9ddfa;
  --blue-11: #eff5fe;
  --indigo-0: #080614;
  --indigo-1: #19143f;
  --indigo-2: #2a216a;
  --indigo-3: #3a2e95;
  --indigo-4: #4b3bc0;
  --indigo-5: #5c49eb;
  --indigo-6: #725fff;
  --indigo-7: #8c7cff;
  --indigo-8: #a69aff;
  --indigo-9: #c0b7ff;
  --indigo-10: #dad5ff;
  --indigo-11: #f4f3ff;
  --violet-0: #110517;
  --violet-1: #2e0d3e;
  --violet-2: #4b1465;
  --violet-3: #681c8c;
  --violet-4: #8424b3;
  --violet-5: #a12cda;
  --violet-6: #b543ec;
  --violet-7: #c366f0;
  --violet-8: #d089f3;
  --violet-9: #deabf7;
  --violet-10: #eccefa;
  --violet-11: #f9f0fe;
  --magenta-0: #13040f;
  --magenta-1: #350a2c;
  --magenta-2: #581148;
  --magenta-3: #7b1765;
  --magenta-4: #9e1e82;
  --magenta-5: #c1249e;
  --magenta-6: #d43cb2;
  --magenta-7: #dc61c1;
  --magenta-8: #e485cf;
  --magenta-9: #eca9dd;
  --magenta-10: #f4ceec;
  --magenta-11: #fcf2fa;
  --red-0: #120205;
  --red-1: #39050f;
  --red-2: #5f0819;
  --red-3: #860b24;
  --red-4: #ac0e2e;
  --red-5: #d31138;
  --red-6: #e7284e;
  --red-7: #ec506f;
  --red-8: #f07790;
  --red-9: #f49fb0;
  --red-10: #f9c7d1;
  --red-11: #fdeef1;
  --red-orange-0: #190b05;
  --red-orange-1: #3d1307;
  --red-orange-2: #601b0a;
  --red-orange-3: #84240c;
  --red-orange-4: #a72c0e;
  --red-orange-5: #cb3411;
  --red-orange-6: #ee3c13;
  --red-orange-7: #fe562f;
  --red-orange-8: #fe7d5e;
  --red-orange-9: #ffa48e;
  --red-orange-10: #ffccbe;
  --red-orange-11: #fff3ee;
  --orange-0: #150d04;
  --orange-1: #2e1c08;
  --orange-2: #472a0c;
  --orange-3: #603910;
  --orange-4: #794714;
  --orange-5: #a65d13;
  --orange-6: #d37413;
  --orange-7: #ff8a14;
  --orange-8: #ffa54a;
  --orange-9: #ffc081;
  --orange-10: #ffdab7;
  --orange-11: #fff5ed;
  --gold-0: #140e05;
  --gold-1: #2c1f0a;
  --gold-2: #432f0e;
  --gold-3: #5b4013;
  --gold-4: #725118;
  --gold-5: #946818;
  --gold-6: #d4950d;
  --gold-7: #eeb028;
  --gold-8: #f2c259;
  --gold-9: #f7d38a;
  --gold-10: #fbe5bc;
  --gold-11: #fff5e9;
  --yellow-0: #111006;
  --yellow-1: #252405;
  --yellow-2: #3a3804;
  --yellow-3: #4e4d03;
  --yellow-4: #636101;
  --yellow-5: #777500;
  --yellow-6: #ccc500;
  --yellow-7: #fcf433;
  --yellow-8: #fdf67a;
  --yellow-9: #fdf89b;
  --yellow-10: #fef9bb;
  --yellow-11: #fefadb;
  --green-0: #091108;
  --green-1: #0f2611;
  --green-2: #153c1a;
  --green-3: #1b5122;
  --green-4: #21662b;
  --green-5: #25833a;
  --green-6: #26b056;
  --green-7: #35d272;
  --green-8: #63dd90;
  --green-9: #90e8ae;
  --green-10: #bdf3cc;
  --green-11: #eafeea;
  --teal-0: #07100c;
  --teal-1: #0c231a;
  --teal-2: #113628;
  --teal-3: #164936;
  --teal-4: #1b5b45;
  --teal-5: #177f63;
  --teal-6: #12a282;
  --teal-7: #2abb9b;
  --teal-8: #5acab1;
  --teal-9: #8bdac7;
  --teal-10: #bbe9dc;
  --teal-11: #ecf8f2;
  --cyan-0: #0a1211;
  --cyan-1: #102425;
  --cyan-2: #153639;
  --cyan-3: #1b484c;
  --cyan-4: #215a60;
  --cyan-5: #247981;
  --cyan-6: #24a9b6;
  --cyan-7: #28d6e6;
  --cyan-8: #57e0ec;
  --cyan-9: #85eaf2;
  --cyan-10: #b4f5f9;
  --cyan-11: #e2ffff;
  --transparent: #0000;
  --color-red-50: oklch(97.1% .013 17.38);
  --color-red-300: oklch(80.8% .114 19.571);
  --color-red-400: oklch(70.4% .191 22.216);
  --color-red-500: oklch(63.7% .237 25.331);
  --color-red-600: oklch(57.7% .245 27.325);
  --color-red-700: oklch(50.5% .213 27.518);
  --color-red-800: oklch(44.4% .177 26.899);
  --color-red-900: oklch(39.6% .141 25.723);
  --color-orange-50: oklch(98% .016 73.684);
  --color-orange-100: oklch(95.4% .038 75.164);
  --color-orange-300: oklch(83.7% .128 66.29);
  --color-orange-400: oklch(75% .183 55.934);
  --color-orange-500: oklch(70.5% .213 47.604);
  --color-orange-600: oklch(64.6% .222 41.116);
  --color-orange-700: oklch(55.3% .195 38.402);
  --color-orange-800: oklch(47% .157 37.304);
  --color-orange-900: oklch(40.8% .123 38.172);
  --color-amber-50: oklch(98.7% .022 95.277);
  --color-amber-100: oklch(96.2% .059 95.617);
  --color-amber-200: oklch(92.4% .12 95.746);
  --color-amber-300: oklch(87.9% .169 91.605);
  --color-amber-400: oklch(82.8% .189 84.429);
  --color-amber-500: oklch(76.9% .188 70.08);
  --color-amber-600: oklch(66.6% .179 58.318);
  --color-amber-700: oklch(55.5% .163 48.998);
  --color-amber-800: oklch(47.3% .137 46.201);
  --color-amber-900: oklch(41.4% .112 45.904);
  --color-amber-950: oklch(27.9% .077 45.635);
  --color-yellow-50: oklch(98.7% .026 102.212);
  --color-yellow-300: oklch(90.5% .182 98.111);
  --color-yellow-400: oklch(85.2% .199 91.936);
  --color-yellow-500: oklch(79.5% .184 86.047);
  --color-yellow-600: oklch(68.1% .162 75.834);
  --color-yellow-700: oklch(55.4% .135 66.442);
  --color-yellow-800: oklch(47.6% .114 61.907);
  --color-yellow-900: oklch(42.1% .095 57.708);
  --color-lime-50: oklch(98.6% .031 120.757);
  --color-lime-400: oklch(84.1% .238 128.85);
  --color-lime-500: oklch(76.8% .233 130.85);
  --color-lime-600: oklch(64.8% .2 131.684);
  --color-lime-900: oklch(40.5% .101 131.063);
  --color-green-50: oklch(98.2% .018 155.826);
  --color-green-100: oklch(96.2% .044 156.743);
  --color-green-300: oklch(87.1% .15 154.449);
  --color-green-400: oklch(79.2% .209 151.711);
  --color-green-500: oklch(72.3% .219 149.579);
  --color-green-600: oklch(62.7% .194 149.214);
  --color-green-700: oklch(52.7% .154 150.069);
  --color-green-800: oklch(44.8% .119 151.328);
  --color-green-900: oklch(39.3% .095 152.535);
  --color-green-950: oklch(26.6% .065 152.934);
  --color-emerald-500: oklch(69.6% .17 162.48);
  --color-teal-50: oklch(98.4% .014 180.72);
  --color-teal-300: oklch(85.5% .138 181.071);
  --color-teal-400: oklch(77.7% .152 181.912);
  --color-teal-500: oklch(70.4% .14 182.503);
  --color-teal-600: oklch(60% .118 184.704);
  --color-teal-700: oklch(51.1% .096 186.391);
  --color-teal-800: oklch(43.7% .078 188.216);
  --color-teal-900: oklch(38.6% .063 188.416);
  --color-cyan-900: oklch(39.8% .07 227.392);
  --color-sky-300: oklch(82.8% .111 230.318);
  --color-sky-500: oklch(68.5% .169 237.323);
  --color-blue-50: oklch(97% .014 254.604);
  --color-blue-100: oklch(93.2% .032 255.585);
  --color-blue-300: oklch(80.9% .105 251.813);
  --color-blue-400: oklch(70.7% .165 254.624);
  --color-blue-500: oklch(62.3% .214 259.815);
  --color-blue-600: oklch(54.6% .245 262.881);
  --color-blue-700: oklch(48.8% .243 264.376);
  --color-blue-800: oklch(42.4% .199 265.638);
  --color-blue-900: oklch(37.9% .146 265.522);
  --color-blue-950: oklch(28.2% .091 267.935);
  --color-violet-50: oklch(96.9% .016 293.756);
  --color-violet-300: oklch(81.1% .111 293.571);
  --color-violet-400: oklch(70.2% .183 293.541);
  --color-violet-500: oklch(60.6% .25 292.717);
  --color-violet-600: oklch(54.1% .281 293.009);
  --color-violet-700: oklch(49.1% .27 292.581);
  --color-violet-800: oklch(43.2% .232 292.759);
  --color-violet-900: oklch(38% .189 293.745);
  --color-purple-50: oklch(97.7% .014 308.299);
  --color-purple-300: oklch(82.7% .119 306.383);
  --color-purple-400: oklch(71.4% .203 305.504);
  --color-purple-500: oklch(62.7% .265 303.9);
  --color-purple-600: oklch(55.8% .288 302.321);
  --color-purple-700: oklch(49.6% .265 301.924);
  --color-purple-800: oklch(43.8% .218 303.724);
  --color-purple-900: oklch(38.1% .176 304.987);
  --color-pink-400: oklch(71.8% .202 349.761);
  --color-pink-500: oklch(65.6% .241 354.308);
  --color-pink-600: oklch(59.2% .249 .584);
  --color-rose-50: oklch(96.9% .015 12.422);
  --color-rose-300: oklch(81% .117 11.638);
  --color-rose-400: oklch(71.2% .194 13.428);
  --color-rose-500: oklch(64.5% .246 16.439);
  --color-rose-600: oklch(58.6% .253 17.585);
  --color-rose-700: oklch(51.4% .222 16.935);
  --color-rose-800: oklch(45.5% .188 13.697);
  --color-rose-900: oklch(41% .159 10.272);
  --color-slate-50: oklch(98.4% .003 247.858);
  --color-slate-100: oklch(96.8% .007 247.896);
  --color-slate-200: oklch(92.9% .013 255.508);
  --color-slate-400: oklch(70.4% .04 256.788);
  --color-slate-500: oklch(55.4% .046 257.417);
  --color-slate-800: oklch(27.9% .041 260.031);
  --color-slate-900: oklch(20.8% .042 265.755);
  --color-slate-950: oklch(12.9% .042 264.695);
  --color-gray-50: oklch(98.5% .002 247.839);
  --color-gray-100: oklch(96.7% .003 264.542);
  --color-gray-200: oklch(92.8% .006 264.531);
  --color-gray-400: oklch(70.7% .022 261.325);
  --color-gray-500: oklch(55.1% .027 264.364);
  --color-gray-800: oklch(27.8% .033 256.848);
  --color-gray-900: oklch(21% .034 264.665);
  --color-gray-950: oklch(13% .028 261.692);
  --color-zinc-50: oklch(98.5% 0 0);
  --color-zinc-100: oklch(96.7% .001 286.375);
  --color-zinc-200: oklch(92% .004 286.32);
  --color-zinc-400: oklch(70.5% .015 286.067);
  --color-zinc-500: oklch(55.2% .016 285.938);
  --color-zinc-800: oklch(27.4% .006 286.033);
  --color-zinc-900: oklch(21% .006 285.885);
  --color-zinc-950: oklch(14.1% .005 285.823);
  --color-neutral-50: oklch(98.5% 0 0);
  --color-neutral-100: oklch(97% 0 0);
  --color-neutral-200: oklch(92.2% 0 0);
  --color-neutral-300: oklch(87% 0 0);
  --color-neutral-400: oklch(70.8% 0 0);
  --color-neutral-500: oklch(55.6% 0 0);
  --color-neutral-600: oklch(43.9% 0 0);
  --color-neutral-700: oklch(37.1% 0 0);
  --color-neutral-800: oklch(26.9% 0 0);
  --color-neutral-900: oklch(20.5% 0 0);
  --color-neutral-950: oklch(14.5% 0 0);
  --color-stone-50: oklch(98.5% .001 106.423);
  --color-stone-100: oklch(97% .001 106.424);
  --color-stone-200: oklch(92.3% .003 48.717);
  --color-stone-300: oklch(86.9% .005 56.366);
  --color-stone-400: oklch(70.9% .01 56.259);
  --color-stone-500: oklch(55.3% .013 58.071);
  --color-stone-600: oklch(44.4% .011 73.639);
  --color-stone-700: oklch(37.4% .01 67.558);
  --color-stone-800: oklch(26.8% .007 34.298);
  --color-stone-900: oklch(21.6% .006 56.043);
  --color-stone-950: oklch(14.7% .004 49.25);
  --degrees-1: 0;
  --degrees-2: 45deg;
  --degrees-3: 90deg;
  --degrees-4: 135deg;
  --degrees-5: 180deg;
  --degrees-6: 225deg;
  --degrees-7: 270deg;
  --degrees-8: 315deg;
  --font-size-1: .75rem;
  --font-size-2: .875rem;
  --font-size-3: 1rem;
  --font-size-4: 1.25rem;
  --font-size-5: 1.5rem;
  --font-size-6: 1.75rem;
  --font-size-7: 2rem;
  --font-size-8: 2.25rem;
  --font-size-9: 2.5rem;
  --font-size-10: 3rem;
  --font-size-11: 4rem;
  --font-size-12: 6rem;
  --measure-narrow: 45ch;
  --measure: 66ch;
  --measure-wide: 80ch;
  --border-width-0: 0;
  --border-width-1: 1px;
  --border-width-2: 2px;
  --border-width-3: 4px;
  --border-width-4: 8px;
  --border-width-5: 16px;
  --border-width: var(--border-width-1, 1px);
  --border-color: var(--gray-5, gray);
  --line-height-solid: 1;
  --line-height-heading: 1.25;
  --line-height-body: 1.5;
  --letter-spacing-tracked: .1em;
  --letter-spacing-tight: -.05em;
  --letter-spacing-large: .25em;
  --font-family-heading: Inter, -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
  --font-family-body: Inter, -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
  --font-family-mono: Inconsolata, Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
  --size-0: .875rem;
  --size-1: 1rem;
  --size-2: 2rem;
  --size-3: 3rem;
  --size-4: 4rem;
  --size-5: 8rem;
  --size-6: 16rem;
  --size-7: 32rem;
  --size-8: 64rem;
  --shadow-color: 0 0 0;
  --shadow-color-invert: 255 255 255;
  --shadow-border-width: 1px;
  --shadow-opacity: .25;
  --opacity-0: 0;
  --opacity-1: .025;
  --opacity-2: .05;
  --opacity-3: .1;
  --opacity-4: .2;
  --opacity-5: .3;
  --opacity-6: .4;
  --opacity-7: .5;
  --opacity-8: .6;
  --opacity-9: .7;
  --opacity-10: .8;
  --opacity-11: .9;
  --opacity-12: 1;
  --duration-125: .125s;
  --duration-200: .2s;
  --duration-250: .25s;
  --duration-300: .3s;
  --duration-350: .35s;
  --duration-400: .4s;
  --duration-450: .45s;
  --duration-500: .5s;
  --ease-cubic: cubic-bezier(.543, 1.086, .5, -.383);
  --ease: ease;
  --ease-out: ease-out;
  --ease-in-out: ease-in-out;
  --ease-linear: linear;
}

@supports (color: color(display-p3 1 1 1)) {
  :root :root {
    --blue-0: color(display-p3 0 .07 .25);
    --blue-1: color(display-p3 0 .09 .32);
    --blue-2: color(display-p3 0 .11 .42);
    --blue-3: color(display-p3 0 .15 .53);
    --blue-4: color(display-p3 0 .16 .7);
    --blue-5: color(display-p3 0 .22 .88);
    --blue-6: color(display-p3 .06 .37 1);
    --blue-7: color(display-p3 .38 .59 1);
    --blue-8: color(display-p3 .66 .79 1);
    --blue-9: color(display-p3 .79 .86 .99);
    --blue-10: color(display-p3 .87 .92 .99);
    --blue-11: color(display-p3 .92 .95 1);
    --indigo-0: color(display-p3 .06 .03 .21);
    --indigo-1: color(display-p3 .09 .07 .26);
    --indigo-2: color(display-p3 .15 .11 .42);
    --indigo-3: color(display-p3 .18 .14 .57);
    --indigo-4: color(display-p3 .2 .18 .75);
    --indigo-5: color(display-p3 .26 .22 1);
    --indigo-6: color(display-p3 .28 .28 1);
    --indigo-7: color(display-p3 .47 .49 1);
    --indigo-8: color(display-p3 .67 .68 1);
    --indigo-9: color(display-p3 .81 .81 .98);
    --indigo-10: color(display-p3 .87 .92 .99);
    --indigo-11: color(display-p3 .92 .95 1);
  }
}

/* src/dim.css */
.dim-background {
  --dim-target: var(--background);
}

.dim-foreground {
  --dim-target: var(--foreground);
}

.dim-text {
  --dim-target: var(--text);
}

.dim-accent {
  --dim-target: var(--accent);
}

.dim-alternate {
  --dim-target: var(--alternate);
}

.dim-info {
  --dim-target: var(--info);
}

.dim-warning {
  --dim-target: var(--warning);
}

.dim-success {
  --dim-target: var(--success);
}

.dim-danger {
  --dim-target: var(--danger);
}

.dim-link {
  --dim-target: var(--link);
}

.dim-contrast {
  --dim-target: var(--contrast);
}

.dim-1-background {
  --dim-target: var(--background);
}

/* src/color.css */
.white {
  color: #fff;
}

.white-dim-0 {
  color: color-mix(in srgb, white, var(--dim-target) var(--dim-0));
}

.white-dim-1 {
  color: color-mix(in srgb, white, var(--dim-target) var(--dim-1));
}

.white-dim-2 {
  color: color-mix(in srgb, white, var(--dim-target) var(--dim-2));
}

.white-dim-3 {
  color: color-mix(in srgb, white, var(--dim-target) var(--dim-3));
}

.white-dim-4 {
  color: color-mix(in srgb, white, var(--dim-target) var(--dim-4));
}

.white-dim-5 {
  color: color-mix(in srgb, white, var(--dim-target) var(--dim-5));
}

.white-dim-6 {
  color: color-mix(in srgb, white, var(--dim-target) var(--dim-6));
}

.white-dim-7 {
  color: color-mix(in srgb, white, var(--dim-target) var(--dim-7));
}

.white-dim-8 {
  color: color-mix(in srgb, white, var(--dim-target) var(--dim-8));
}

.white-dim-9 {
  color: color-mix(in srgb, white, var(--dim-target) var(--dim-9));
}

.white-hover:hover {
  color: #fff;
}

.white-dim-0-hover:hover {
  color: color-mix(in srgb, white, var(--dim-target) var(--dim-0));
}

.white-dim-1-hover:hover {
  color: color-mix(in srgb, white, var(--dim-target) var(--dim-1));
}

.white-dim-2-hover:hover {
  color: color-mix(in srgb, white, var(--dim-target) var(--dim-2));
}

.white-dim-3-hover:hover {
  color: color-mix(in srgb, white, var(--dim-target) var(--dim-3));
}

.white-dim-4-hover:hover {
  color: color-mix(in srgb, white, var(--dim-target) var(--dim-4));
}

.white-dim-5-hover:hover {
  color: color-mix(in srgb, white, var(--dim-target) var(--dim-5));
}

.white-dim-6-hover:hover {
  color: color-mix(in srgb, white, var(--dim-target) var(--dim-6));
}

.white-dim-7-hover:hover {
  color: color-mix(in srgb, white, var(--dim-target) var(--dim-7));
}

.white-dim-8-hover:hover {
  color: color-mix(in srgb, white, var(--dim-target) var(--dim-8));
}

.white-dim-9-hover:hover {
  color: color-mix(in srgb, white, var(--dim-target) var(--dim-9));
}

.black {
  color: #000;
}

.black-dim-0 {
  color: color-mix(in srgb, black, var(--dim-target) var(--dim-0));
}

.black-dim-1 {
  color: color-mix(in srgb, black, var(--dim-target) var(--dim-1));
}

.black-dim-2 {
  color: color-mix(in srgb, black, var(--dim-target) var(--dim-2));
}

.black-dim-3 {
  color: color-mix(in srgb, black, var(--dim-target) var(--dim-3));
}

.black-dim-4 {
  color: color-mix(in srgb, black, var(--dim-target) var(--dim-4));
}

.black-dim-5 {
  color: color-mix(in srgb, black, var(--dim-target) var(--dim-5));
}

.black-dim-6 {
  color: color-mix(in srgb, black, var(--dim-target) var(--dim-6));
}

.black-dim-7 {
  color: color-mix(in srgb, black, var(--dim-target) var(--dim-7));
}

.black-dim-8 {
  color: color-mix(in srgb, black, var(--dim-target) var(--dim-8));
}

.black-dim-9 {
  color: color-mix(in srgb, black, var(--dim-target) var(--dim-9));
}

.black-hover:hover {
  color: #000;
}

.black-dim-0-hover:hover {
  color: color-mix(in srgb, black, var(--dim-target) var(--dim-0));
}

.black-dim-1-hover:hover {
  color: color-mix(in srgb, black, var(--dim-target) var(--dim-1));
}

.black-dim-2-hover:hover {
  color: color-mix(in srgb, black, var(--dim-target) var(--dim-2));
}

.black-dim-3-hover:hover {
  color: color-mix(in srgb, black, var(--dim-target) var(--dim-3));
}

.black-dim-4-hover:hover {
  color: color-mix(in srgb, black, var(--dim-target) var(--dim-4));
}

.black-dim-5-hover:hover {
  color: color-mix(in srgb, black, var(--dim-target) var(--dim-5));
}

.black-dim-6-hover:hover {
  color: color-mix(in srgb, black, var(--dim-target) var(--dim-6));
}

.black-dim-7-hover:hover {
  color: color-mix(in srgb, black, var(--dim-target) var(--dim-7));
}

.black-dim-8-hover:hover {
  color: color-mix(in srgb, black, var(--dim-target) var(--dim-8));
}

.black-dim-9-hover:hover {
  color: color-mix(in srgb, black, var(--dim-target) var(--dim-9));
}

.text {
  color: var(--text);
}

.text-dim-0 {
  color: color-mix(in srgb, var(--text), var(--dim-target) var(--dim-0));
}

.text-dim-1 {
  color: color-mix(in srgb, var(--text), var(--dim-target) var(--dim-1));
}

.text-dim-2 {
  color: color-mix(in srgb, var(--text), var(--dim-target) var(--dim-2));
}

.text-dim-3 {
  color: color-mix(in srgb, var(--text), var(--dim-target) var(--dim-3));
}

.text-dim-4 {
  color: color-mix(in srgb, var(--text), var(--dim-target) var(--dim-4));
}

.text-dim-5 {
  color: color-mix(in srgb, var(--text), var(--dim-target) var(--dim-5));
}

.text-dim-6 {
  color: color-mix(in srgb, var(--text), var(--dim-target) var(--dim-6));
}

.text-dim-7 {
  color: color-mix(in srgb, var(--text), var(--dim-target) var(--dim-7));
}

.text-dim-8 {
  color: color-mix(in srgb, var(--text), var(--dim-target) var(--dim-8));
}

.text-dim-9 {
  color: color-mix(in srgb, var(--text), var(--dim-target) var(--dim-9));
}

.text-hover:hover {
  color: var(--text);
}

.text-dim-0-hover:hover {
  color: color-mix(in srgb, var(--text), var(--dim-target) var(--dim-0));
}

.text-dim-1-hover:hover {
  color: color-mix(in srgb, var(--text), var(--dim-target) var(--dim-1));
}

.text-dim-2-hover:hover {
  color: color-mix(in srgb, var(--text), var(--dim-target) var(--dim-2));
}

.text-dim-3-hover:hover {
  color: color-mix(in srgb, var(--text), var(--dim-target) var(--dim-3));
}

.text-dim-4-hover:hover {
  color: color-mix(in srgb, var(--text), var(--dim-target) var(--dim-4));
}

.text-dim-5-hover:hover {
  color: color-mix(in srgb, var(--text), var(--dim-target) var(--dim-5));
}

.text-dim-6-hover:hover {
  color: color-mix(in srgb, var(--text), var(--dim-target) var(--dim-6));
}

.text-dim-7-hover:hover {
  color: color-mix(in srgb, var(--text), var(--dim-target) var(--dim-7));
}

.text-dim-8-hover:hover {
  color: color-mix(in srgb, var(--text), var(--dim-target) var(--dim-8));
}

.text-dim-9-hover:hover {
  color: color-mix(in srgb, var(--text), var(--dim-target) var(--dim-9));
}

.contrast {
  color: var(--contrast);
}

.contrast-dim-0 {
  color: color-mix(in srgb, var(--contrast), var(--dim-target) var(--dim-0));
}

.contrast-dim-1 {
  color: color-mix(in srgb, var(--contrast), var(--dim-target) var(--dim-1));
}

.contrast-dim-2 {
  color: color-mix(in srgb, var(--contrast), var(--dim-target) var(--dim-2));
}

.contrast-dim-3 {
  color: color-mix(in srgb, var(--contrast), var(--dim-target) var(--dim-3));
}

.contrast-dim-4 {
  color: color-mix(in srgb, var(--contrast), var(--dim-target) var(--dim-4));
}

.contrast-dim-5 {
  color: color-mix(in srgb, var(--contrast), var(--dim-target) var(--dim-5));
}

.contrast-dim-6 {
  color: color-mix(in srgb, var(--contrast), var(--dim-target) var(--dim-6));
}

.contrast-dim-7 {
  color: color-mix(in srgb, var(--contrast), var(--dim-target) var(--dim-7));
}

.contrast-dim-8 {
  color: color-mix(in srgb, var(--contrast), var(--dim-target) var(--dim-8));
}

.contrast-dim-9 {
  color: color-mix(in srgb, var(--contrast), var(--dim-target) var(--dim-9));
}

.contrast-hover:hover {
  color: var(--contrast);
}

.contrast-dim-0-hover:hover {
  color: color-mix(in srgb, var(--contrast), var(--dim-target) var(--dim-0));
}

.contrast-dim-1-hover:hover {
  color: color-mix(in srgb, var(--contrast), var(--dim-target) var(--dim-1));
}

.contrast-dim-2-hover:hover {
  color: color-mix(in srgb, var(--contrast), var(--dim-target) var(--dim-2));
}

.contrast-dim-3-hover:hover {
  color: color-mix(in srgb, var(--contrast), var(--dim-target) var(--dim-3));
}

.contrast-dim-4-hover:hover {
  color: color-mix(in srgb, var(--contrast), var(--dim-target) var(--dim-4));
}

.contrast-dim-5-hover:hover {
  color: color-mix(in srgb, var(--contrast), var(--dim-target) var(--dim-5));
}

.contrast-dim-6-hover:hover {
  color: color-mix(in srgb, var(--contrast), var(--dim-target) var(--dim-6));
}

.contrast-dim-7-hover:hover {
  color: color-mix(in srgb, var(--contrast), var(--dim-target) var(--dim-7));
}

.contrast-dim-8-hover:hover {
  color: color-mix(in srgb, var(--contrast), var(--dim-target) var(--dim-8));
}

.contrast-dim-9-hover:hover {
  color: color-mix(in srgb, var(--contrast), var(--dim-target) var(--dim-9));
}

.background {
  color: var(--background);
}

.background-dim-0 {
  color: color-mix(in srgb, var(--background), var(--dim-target) var(--dim-0));
}

.background-dim-1 {
  color: color-mix(in srgb, var(--background), var(--dim-target) var(--dim-1));
}

.background-dim-2 {
  color: color-mix(in srgb, var(--background), var(--dim-target) var(--dim-2));
}

.background-dim-3 {
  color: color-mix(in srgb, var(--background), var(--dim-target) var(--dim-3));
}

.background-dim-4 {
  color: color-mix(in srgb, var(--background), var(--dim-target) var(--dim-4));
}

.background-dim-5 {
  color: color-mix(in srgb, var(--background), var(--dim-target) var(--dim-5));
}

.background-dim-6 {
  color: color-mix(in srgb, var(--background), var(--dim-target) var(--dim-6));
}

.background-dim-7 {
  color: color-mix(in srgb, var(--background), var(--dim-target) var(--dim-7));
}

.background-dim-8 {
  color: color-mix(in srgb, var(--background), var(--dim-target) var(--dim-8));
}

.background-dim-9 {
  color: color-mix(in srgb, var(--background), var(--dim-target) var(--dim-9));
}

.background-hover:hover {
  color: var(--background);
}

.background-dim-0-hover:hover {
  color: color-mix(in srgb, var(--background), var(--dim-target) var(--dim-0));
}

.background-dim-1-hover:hover {
  color: color-mix(in srgb, var(--background), var(--dim-target) var(--dim-1));
}

.background-dim-2-hover:hover {
  color: color-mix(in srgb, var(--background), var(--dim-target) var(--dim-2));
}

.background-dim-3-hover:hover {
  color: color-mix(in srgb, var(--background), var(--dim-target) var(--dim-3));
}

.background-dim-4-hover:hover {
  color: color-mix(in srgb, var(--background), var(--dim-target) var(--dim-4));
}

.background-dim-5-hover:hover {
  color: color-mix(in srgb, var(--background), var(--dim-target) var(--dim-5));
}

.background-dim-6-hover:hover {
  color: color-mix(in srgb, var(--background), var(--dim-target) var(--dim-6));
}

.background-dim-7-hover:hover {
  color: color-mix(in srgb, var(--background), var(--dim-target) var(--dim-7));
}

.background-dim-8-hover:hover {
  color: color-mix(in srgb, var(--background), var(--dim-target) var(--dim-8));
}

.background-dim-9-hover:hover {
  color: color-mix(in srgb, var(--background), var(--dim-target) var(--dim-9));
}

.foreground {
  color: var(--foreground);
}

.foreground-dim-0 {
  color: color-mix(in srgb, var(--foreground), var(--dim-target) var(--dim-0));
}

.foreground-dim-1 {
  color: color-mix(in srgb, var(--foreground), var(--dim-target) var(--dim-1));
}

.foreground-dim-2 {
  color: color-mix(in srgb, var(--foreground), var(--dim-target) var(--dim-2));
}

.foreground-dim-3 {
  color: color-mix(in srgb, var(--foreground), var(--dim-target) var(--dim-3));
}

.foreground-dim-4 {
  color: color-mix(in srgb, var(--foreground), var(--dim-target) var(--dim-4));
}

.foreground-dim-5 {
  color: color-mix(in srgb, var(--foreground), var(--dim-target) var(--dim-5));
}

.foreground-dim-6 {
  color: color-mix(in srgb, var(--foreground), var(--dim-target) var(--dim-6));
}

.foreground-dim-7 {
  color: color-mix(in srgb, var(--foreground), var(--dim-target) var(--dim-7));
}

.foreground-dim-8 {
  color: color-mix(in srgb, var(--foreground), var(--dim-target) var(--dim-8));
}

.foreground-dim-9 {
  color: color-mix(in srgb, var(--foreground), var(--dim-target) var(--dim-9));
}

.foreground-hover:hover {
  color: var(--foreground);
}

.foreground-dim-0-hover:hover {
  color: color-mix(in srgb, var(--foreground), var(--dim-target) var(--dim-0));
}

.foreground-dim-1-hover:hover {
  color: color-mix(in srgb, var(--foreground), var(--dim-target) var(--dim-1));
}

.foreground-dim-2-hover:hover {
  color: color-mix(in srgb, var(--foreground), var(--dim-target) var(--dim-2));
}

.foreground-dim-3-hover:hover {
  color: color-mix(in srgb, var(--foreground), var(--dim-target) var(--dim-3));
}

.foreground-dim-4-hover:hover {
  color: color-mix(in srgb, var(--foreground), var(--dim-target) var(--dim-4));
}

.foreground-dim-5-hover:hover {
  color: color-mix(in srgb, var(--foreground), var(--dim-target) var(--dim-5));
}

.foreground-dim-6-hover:hover {
  color: color-mix(in srgb, var(--foreground), var(--dim-target) var(--dim-6));
}

.foreground-dim-7-hover:hover {
  color: color-mix(in srgb, var(--foreground), var(--dim-target) var(--dim-7));
}

.foreground-dim-8-hover:hover {
  color: color-mix(in srgb, var(--foreground), var(--dim-target) var(--dim-8));
}

.foreground-dim-9-hover:hover {
  color: color-mix(in srgb, var(--foreground), var(--dim-target) var(--dim-9));
}

.accent {
  color: var(--accent);
}

.accent-dim-0 {
  color: color-mix(in srgb, var(--accent), var(--dim-target) var(--dim-0));
}

.accent-dim-1 {
  color: color-mix(in srgb, var(--accent), var(--dim-target) var(--dim-1));
}

.accent-dim-2 {
  color: color-mix(in srgb, var(--accent), var(--dim-target) var(--dim-2));
}

.accent-dim-3 {
  color: color-mix(in srgb, var(--accent), var(--dim-target) var(--dim-3));
}

.accent-dim-4 {
  color: color-mix(in srgb, var(--accent), var(--dim-target) var(--dim-4));
}

.accent-dim-5 {
  color: color-mix(in srgb, var(--accent), var(--dim-target) var(--dim-5));
}

.accent-dim-6 {
  color: color-mix(in srgb, var(--accent), var(--dim-target) var(--dim-6));
}

.accent-dim-7 {
  color: color-mix(in srgb, var(--accent), var(--dim-target) var(--dim-7));
}

.accent-dim-8 {
  color: color-mix(in srgb, var(--accent), var(--dim-target) var(--dim-8));
}

.accent-dim-9 {
  color: color-mix(in srgb, var(--accent), var(--dim-target) var(--dim-9));
}

.accent-hover:hover {
  color: var(--accent);
}

.accent-dim-0-hover:hover {
  color: color-mix(in srgb, var(--accent), var(--dim-target) var(--dim-0));
}

.accent-dim-1-hover:hover {
  color: color-mix(in srgb, var(--accent), var(--dim-target) var(--dim-1));
}

.accent-dim-2-hover:hover {
  color: color-mix(in srgb, var(--accent), var(--dim-target) var(--dim-2));
}

.accent-dim-3-hover:hover {
  color: color-mix(in srgb, var(--accent), var(--dim-target) var(--dim-3));
}

.accent-dim-4-hover:hover {
  color: color-mix(in srgb, var(--accent), var(--dim-target) var(--dim-4));
}

.accent-dim-5-hover:hover {
  color: color-mix(in srgb, var(--accent), var(--dim-target) var(--dim-5));
}

.accent-dim-6-hover:hover {
  color: color-mix(in srgb, var(--accent), var(--dim-target) var(--dim-6));
}

.accent-dim-7-hover:hover {
  color: color-mix(in srgb, var(--accent), var(--dim-target) var(--dim-7));
}

.accent-dim-8-hover:hover {
  color: color-mix(in srgb, var(--accent), var(--dim-target) var(--dim-8));
}

.accent-dim-9-hover:hover {
  color: color-mix(in srgb, var(--accent), var(--dim-target) var(--dim-9));
}

.alternate {
  color: var(--alternate);
}

.alternate-dim-0 {
  color: color-mix(in srgb, var(--alternate), var(--dim-target) var(--dim-0));
}

.alternate-dim-1 {
  color: color-mix(in srgb, var(--alternate), var(--dim-target) var(--dim-1));
}

.alternate-dim-2 {
  color: color-mix(in srgb, var(--alternate), var(--dim-target) var(--dim-2));
}

.alternate-dim-3 {
  color: color-mix(in srgb, var(--alternate), var(--dim-target) var(--dim-3));
}

.alternate-dim-4 {
  color: color-mix(in srgb, var(--alternate), var(--dim-target) var(--dim-4));
}

.alternate-dim-5 {
  color: color-mix(in srgb, var(--alternate), var(--dim-target) var(--dim-5));
}

.alternate-dim-6 {
  color: color-mix(in srgb, var(--alternate), var(--dim-target) var(--dim-6));
}

.alternate-dim-7 {
  color: color-mix(in srgb, var(--alternate), var(--dim-target) var(--dim-7));
}

.alternate-dim-8 {
  color: color-mix(in srgb, var(--alternate), var(--dim-target) var(--dim-8));
}

.alternate-dim-9 {
  color: color-mix(in srgb, var(--alternate), var(--dim-target) var(--dim-9));
}

.alternate-hover:hover {
  color: var(--alternate);
}

.alternate-dim-0-hover:hover {
  color: color-mix(in srgb, var(--alternate), var(--dim-target) var(--dim-0));
}

.alternate-dim-1-hover:hover {
  color: color-mix(in srgb, var(--alternate), var(--dim-target) var(--dim-1));
}

.alternate-dim-2-hover:hover {
  color: color-mix(in srgb, var(--alternate), var(--dim-target) var(--dim-2));
}

.alternate-dim-3-hover:hover {
  color: color-mix(in srgb, var(--alternate), var(--dim-target) var(--dim-3));
}

.alternate-dim-4-hover:hover {
  color: color-mix(in srgb, var(--alternate), var(--dim-target) var(--dim-4));
}

.alternate-dim-5-hover:hover {
  color: color-mix(in srgb, var(--alternate), var(--dim-target) var(--dim-5));
}

.alternate-dim-6-hover:hover {
  color: color-mix(in srgb, var(--alternate), var(--dim-target) var(--dim-6));
}

.alternate-dim-7-hover:hover {
  color: color-mix(in srgb, var(--alternate), var(--dim-target) var(--dim-7));
}

.alternate-dim-8-hover:hover {
  color: color-mix(in srgb, var(--alternate), var(--dim-target) var(--dim-8));
}

.alternate-dim-9-hover:hover {
  color: color-mix(in srgb, var(--alternate), var(--dim-target) var(--dim-9));
}

.info {
  color: var(--info);
}

.info-dim-0 {
  color: color-mix(in srgb, var(--info), var(--dim-target) var(--dim-0));
}

.info-dim-1 {
  color: color-mix(in srgb, var(--info), var(--dim-target) var(--dim-1));
}

.info-dim-2 {
  color: color-mix(in srgb, var(--info), var(--dim-target) var(--dim-2));
}

.info-dim-3 {
  color: color-mix(in srgb, var(--info), var(--dim-target) var(--dim-3));
}

.info-dim-4 {
  color: color-mix(in srgb, var(--info), var(--dim-target) var(--dim-4));
}

.info-dim-5 {
  color: color-mix(in srgb, var(--info), var(--dim-target) var(--dim-5));
}

.info-dim-6 {
  color: color-mix(in srgb, var(--info), var(--dim-target) var(--dim-6));
}

.info-dim-7 {
  color: color-mix(in srgb, var(--info), var(--dim-target) var(--dim-7));
}

.info-dim-8 {
  color: color-mix(in srgb, var(--info), var(--dim-target) var(--dim-8));
}

.info-dim-9 {
  color: color-mix(in srgb, var(--info), var(--dim-target) var(--dim-9));
}

.info-hover:hover {
  color: var(--info);
}

.info-dim-0-hover:hover {
  color: color-mix(in srgb, var(--info), var(--dim-target) var(--dim-0));
}

.info-dim-1-hover:hover {
  color: color-mix(in srgb, var(--info), var(--dim-target) var(--dim-1));
}

.info-dim-2-hover:hover {
  color: color-mix(in srgb, var(--info), var(--dim-target) var(--dim-2));
}

.info-dim-3-hover:hover {
  color: color-mix(in srgb, var(--info), var(--dim-target) var(--dim-3));
}

.info-dim-4-hover:hover {
  color: color-mix(in srgb, var(--info), var(--dim-target) var(--dim-4));
}

.info-dim-5-hover:hover {
  color: color-mix(in srgb, var(--info), var(--dim-target) var(--dim-5));
}

.info-dim-6-hover:hover {
  color: color-mix(in srgb, var(--info), var(--dim-target) var(--dim-6));
}

.info-dim-7-hover:hover {
  color: color-mix(in srgb, var(--info), var(--dim-target) var(--dim-7));
}

.info-dim-8-hover:hover {
  color: color-mix(in srgb, var(--info), var(--dim-target) var(--dim-8));
}

.info-dim-9-hover:hover {
  color: color-mix(in srgb, var(--info), var(--dim-target) var(--dim-9));
}

.warning {
  color: var(--warning);
}

.warning-dim-0 {
  color: color-mix(in srgb, var(--warning), var(--dim-target) var(--dim-0));
}

.warning-dim-1 {
  color: color-mix(in srgb, var(--warning), var(--dim-target) var(--dim-1));
}

.warning-dim-2 {
  color: color-mix(in srgb, var(--warning), var(--dim-target) var(--dim-2));
}

.warning-dim-3 {
  color: color-mix(in srgb, var(--warning), var(--dim-target) var(--dim-3));
}

.warning-dim-4 {
  color: color-mix(in srgb, var(--warning), var(--dim-target) var(--dim-4));
}

.warning-dim-5 {
  color: color-mix(in srgb, var(--warning), var(--dim-target) var(--dim-5));
}

.warning-dim-6 {
  color: color-mix(in srgb, var(--warning), var(--dim-target) var(--dim-6));
}

.warning-dim-7 {
  color: color-mix(in srgb, var(--warning), var(--dim-target) var(--dim-7));
}

.warning-dim-8 {
  color: color-mix(in srgb, var(--warning), var(--dim-target) var(--dim-8));
}

.warning-dim-9 {
  color: color-mix(in srgb, var(--warning), var(--dim-target) var(--dim-9));
}

.warning-hover:hover {
  color: var(--warning);
}

.warning-dim-0-hover:hover {
  color: color-mix(in srgb, var(--warning), var(--dim-target) var(--dim-0));
}

.warning-dim-1-hover:hover {
  color: color-mix(in srgb, var(--warning), var(--dim-target) var(--dim-1));
}

.warning-dim-2-hover:hover {
  color: color-mix(in srgb, var(--warning), var(--dim-target) var(--dim-2));
}

.warning-dim-3-hover:hover {
  color: color-mix(in srgb, var(--warning), var(--dim-target) var(--dim-3));
}

.warning-dim-4-hover:hover {
  color: color-mix(in srgb, var(--warning), var(--dim-target) var(--dim-4));
}

.warning-dim-5-hover:hover {
  color: color-mix(in srgb, var(--warning), var(--dim-target) var(--dim-5));
}

.warning-dim-6-hover:hover {
  color: color-mix(in srgb, var(--warning), var(--dim-target) var(--dim-6));
}

.warning-dim-7-hover:hover {
  color: color-mix(in srgb, var(--warning), var(--dim-target) var(--dim-7));
}

.warning-dim-8-hover:hover {
  color: color-mix(in srgb, var(--warning), var(--dim-target) var(--dim-8));
}

.warning-dim-9-hover:hover {
  color: color-mix(in srgb, var(--warning), var(--dim-target) var(--dim-9));
}

.success {
  color: var(--success);
}

.success-dim-0 {
  color: color-mix(in srgb, var(--success), var(--dim-target) var(--dim-0));
}

.success-dim-1 {
  color: color-mix(in srgb, var(--success), var(--dim-target) var(--dim-1));
}

.success-dim-2 {
  color: color-mix(in srgb, var(--success), var(--dim-target) var(--dim-2));
}

.success-dim-3 {
  color: color-mix(in srgb, var(--success), var(--dim-target) var(--dim-3));
}

.success-dim-4 {
  color: color-mix(in srgb, var(--success), var(--dim-target) var(--dim-4));
}

.success-dim-5 {
  color: color-mix(in srgb, var(--success), var(--dim-target) var(--dim-5));
}

.success-dim-6 {
  color: color-mix(in srgb, var(--success), var(--dim-target) var(--dim-6));
}

.success-dim-7 {
  color: color-mix(in srgb, var(--success), var(--dim-target) var(--dim-7));
}

.success-dim-8 {
  color: color-mix(in srgb, var(--success), var(--dim-target) var(--dim-8));
}

.success-dim-9 {
  color: color-mix(in srgb, var(--success), var(--dim-target) var(--dim-9));
}

.success-hover:hover {
  color: var(--success);
}

.success-dim-0-hover:hover {
  color: color-mix(in srgb, var(--success), var(--dim-target) var(--dim-0));
}

.success-dim-1-hover:hover {
  color: color-mix(in srgb, var(--success), var(--dim-target) var(--dim-1));
}

.success-dim-2-hover:hover {
  color: color-mix(in srgb, var(--success), var(--dim-target) var(--dim-2));
}

.success-dim-3-hover:hover {
  color: color-mix(in srgb, var(--success), var(--dim-target) var(--dim-3));
}

.success-dim-4-hover:hover {
  color: color-mix(in srgb, var(--success), var(--dim-target) var(--dim-4));
}

.success-dim-5-hover:hover {
  color: color-mix(in srgb, var(--success), var(--dim-target) var(--dim-5));
}

.success-dim-6-hover:hover {
  color: color-mix(in srgb, var(--success), var(--dim-target) var(--dim-6));
}

.success-dim-7-hover:hover {
  color: color-mix(in srgb, var(--success), var(--dim-target) var(--dim-7));
}

.success-dim-8-hover:hover {
  color: color-mix(in srgb, var(--success), var(--dim-target) var(--dim-8));
}

.success-dim-9-hover:hover {
  color: color-mix(in srgb, var(--success), var(--dim-target) var(--dim-9));
}

.danger {
  color: var(--danger);
}

.danger-dim-0 {
  color: color-mix(in srgb, var(--danger), var(--dim-target) var(--dim-0));
}

.danger-dim-1 {
  color: color-mix(in srgb, var(--danger), var(--dim-target) var(--dim-1));
}

.danger-dim-2 {
  color: color-mix(in srgb, var(--danger), var(--dim-target) var(--dim-2));
}

.danger-dim-3 {
  color: color-mix(in srgb, var(--danger), var(--dim-target) var(--dim-3));
}

.danger-dim-4 {
  color: color-mix(in srgb, var(--danger), var(--dim-target) var(--dim-4));
}

.danger-dim-5 {
  color: color-mix(in srgb, var(--danger), var(--dim-target) var(--dim-5));
}

.danger-dim-6 {
  color: color-mix(in srgb, var(--danger), var(--dim-target) var(--dim-6));
}

.danger-dim-7 {
  color: color-mix(in srgb, var(--danger), var(--dim-target) var(--dim-7));
}

.danger-dim-8 {
  color: color-mix(in srgb, var(--danger), var(--dim-target) var(--dim-8));
}

.danger-dim-9 {
  color: color-mix(in srgb, var(--danger), var(--dim-target) var(--dim-9));
}

.danger-hover:hover {
  color: var(--danger);
}

.danger-dim-0-hover:hover {
  color: color-mix(in srgb, var(--danger), var(--dim-target) var(--dim-0));
}

.danger-dim-1-hover:hover {
  color: color-mix(in srgb, var(--danger), var(--dim-target) var(--dim-1));
}

.danger-dim-2-hover:hover {
  color: color-mix(in srgb, var(--danger), var(--dim-target) var(--dim-2));
}

.danger-dim-3-hover:hover {
  color: color-mix(in srgb, var(--danger), var(--dim-target) var(--dim-3));
}

.danger-dim-4-hover:hover {
  color: color-mix(in srgb, var(--danger), var(--dim-target) var(--dim-4));
}

.danger-dim-5-hover:hover {
  color: color-mix(in srgb, var(--danger), var(--dim-target) var(--dim-5));
}

.danger-dim-6-hover:hover {
  color: color-mix(in srgb, var(--danger), var(--dim-target) var(--dim-6));
}

.danger-dim-7-hover:hover {
  color: color-mix(in srgb, var(--danger), var(--dim-target) var(--dim-7));
}

.danger-dim-8-hover:hover {
  color: color-mix(in srgb, var(--danger), var(--dim-target) var(--dim-8));
}

.danger-dim-9-hover:hover {
  color: color-mix(in srgb, var(--danger), var(--dim-target) var(--dim-9));
}

.link {
  color: var(--link);
}

.link-dim-0 {
  color: color-mix(in srgb, var(--link), var(--dim-target) var(--dim-0));
}

.link-dim-1 {
  color: color-mix(in srgb, var(--link), var(--dim-target) var(--dim-1));
}

.link-dim-2 {
  color: color-mix(in srgb, var(--link), var(--dim-target) var(--dim-2));
}

.link-dim-3 {
  color: color-mix(in srgb, var(--link), var(--dim-target) var(--dim-3));
}

.link-dim-4 {
  color: color-mix(in srgb, var(--link), var(--dim-target) var(--dim-4));
}

.link-dim-5 {
  color: color-mix(in srgb, var(--link), var(--dim-target) var(--dim-5));
}

.link-dim-6 {
  color: color-mix(in srgb, var(--link), var(--dim-target) var(--dim-6));
}

.link-dim-7 {
  color: color-mix(in srgb, var(--link), var(--dim-target) var(--dim-7));
}

.link-dim-8 {
  color: color-mix(in srgb, var(--link), var(--dim-target) var(--dim-8));
}

.link-dim-9 {
  color: color-mix(in srgb, var(--link), var(--dim-target) var(--dim-9));
}

.link-hover:hover {
  color: var(--link);
}

.link-dim-0-hover:hover {
  color: color-mix(in srgb, var(--link), var(--dim-target) var(--dim-0));
}

.link-dim-1-hover:hover {
  color: color-mix(in srgb, var(--link), var(--dim-target) var(--dim-1));
}

.link-dim-2-hover:hover {
  color: color-mix(in srgb, var(--link), var(--dim-target) var(--dim-2));
}

.link-dim-3-hover:hover {
  color: color-mix(in srgb, var(--link), var(--dim-target) var(--dim-3));
}

.link-dim-4-hover:hover {
  color: color-mix(in srgb, var(--link), var(--dim-target) var(--dim-4));
}

.link-dim-5-hover:hover {
  color: color-mix(in srgb, var(--link), var(--dim-target) var(--dim-5));
}

.link-dim-6-hover:hover {
  color: color-mix(in srgb, var(--link), var(--dim-target) var(--dim-6));
}

.link-dim-7-hover:hover {
  color: color-mix(in srgb, var(--link), var(--dim-target) var(--dim-7));
}

.link-dim-8-hover:hover {
  color: color-mix(in srgb, var(--link), var(--dim-target) var(--dim-8));
}

.link-dim-9-hover:hover {
  color: color-mix(in srgb, var(--link), var(--dim-target) var(--dim-9));
}

/* src/bg.css */
.bg-transparent, .bg-transparent-hover:hover {
  background-color: #0000;
}

.bg-background {
  background-color: var(--background);
}

.bg-background-dim-0 {
  background-color: color-mix(in srgb, var(--background), var(--dim-target) var(--dim-0));
}

.bg-background-dim-1 {
  background-color: color-mix(in srgb, var(--background), var(--dim-target) var(--dim-1));
}

.bg-background-dim-2 {
  background-color: color-mix(in srgb, var(--background), var(--dim-target) var(--dim-2));
}

.bg-background-dim-3 {
  background-color: color-mix(in srgb, var(--background), var(--dim-target) var(--dim-3));
}

.bg-background-dim-4 {
  background-color: color-mix(in srgb, var(--background), var(--dim-target) var(--dim-4));
}

.bg-background-dim-5 {
  background-color: color-mix(in srgb, var(--background), var(--dim-target) var(--dim-5));
}

.bg-background-dim-6 {
  background-color: color-mix(in srgb, var(--background), var(--dim-target) var(--dim-6));
}

.bg-background-dim-7 {
  background-color: color-mix(in srgb, var(--background), var(--dim-target) var(--dim-7));
}

.bg-background-dim-8 {
  background-color: color-mix(in srgb, var(--background), var(--dim-target) var(--dim-8));
}

.bg-background-dim-9 {
  background-color: color-mix(in srgb, var(--background), var(--dim-target) var(--dim-9));
}

.bg-background-hover:hover {
  background-color: var(--background);
}

.bg-background-dim-0-hover:hover {
  background-color: color-mix(in srgb, var(--background), var(--dim-target) var(--dim-0));
}

.bg-background-dim-1-hover:hover {
  background-color: color-mix(in srgb, var(--background), var(--dim-target) var(--dim-1));
}

.bg-background-dim-2-hover:hover {
  background-color: color-mix(in srgb, var(--background), var(--dim-target) var(--dim-2));
}

.bg-background-dim-3-hover:hover {
  background-color: color-mix(in srgb, var(--background), var(--dim-target) var(--dim-3));
}

.bg-background-dim-4-hover:hover {
  background-color: color-mix(in srgb, var(--background), var(--dim-target) var(--dim-4));
}

.bg-background-dim-5-hover:hover {
  background-color: color-mix(in srgb, var(--background), var(--dim-target) var(--dim-5));
}

.bg-background-dim-6-hover:hover {
  background-color: color-mix(in srgb, var(--background), var(--dim-target) var(--dim-6));
}

.bg-background-dim-7-hover:hover {
  background-color: color-mix(in srgb, var(--background), var(--dim-target) var(--dim-7));
}

.bg-background-dim-8-hover:hover {
  background-color: color-mix(in srgb, var(--background), var(--dim-target) var(--dim-8));
}

.bg-background-dim-9-hover:hover {
  background-color: color-mix(in srgb, var(--background), var(--dim-target) var(--dim-9));
}

.bg-foreground {
  background-color: var(--foreground);
}

.bg-foreground-dim-0 {
  background-color: color-mix(in srgb, var(--foreground), var(--dim-target) var(--dim-0));
}

.bg-foreground-dim-1 {
  background-color: color-mix(in srgb, var(--foreground), var(--dim-target) var(--dim-1));
}

.bg-foreground-dim-2 {
  background-color: color-mix(in srgb, var(--foreground), var(--dim-target) var(--dim-2));
}

.bg-foreground-dim-3 {
  background-color: color-mix(in srgb, var(--foreground), var(--dim-target) var(--dim-3));
}

.bg-foreground-dim-4 {
  background-color: color-mix(in srgb, var(--foreground), var(--dim-target) var(--dim-4));
}

.bg-foreground-dim-5 {
  background-color: color-mix(in srgb, var(--foreground), var(--dim-target) var(--dim-5));
}

.bg-foreground-dim-6 {
  background-color: color-mix(in srgb, var(--foreground), var(--dim-target) var(--dim-6));
}

.bg-foreground-dim-7 {
  background-color: color-mix(in srgb, var(--foreground), var(--dim-target) var(--dim-7));
}

.bg-foreground-dim-8 {
  background-color: color-mix(in srgb, var(--foreground), var(--dim-target) var(--dim-8));
}

.bg-foreground-dim-9 {
  background-color: color-mix(in srgb, var(--foreground), var(--dim-target) var(--dim-9));
}

.bg-foreground-hover:hover {
  background-color: var(--foreground);
}

.bg-foreground-dim-0-hover:hover {
  background-color: color-mix(in srgb, var(--foreground), var(--dim-target) var(--dim-0));
}

.bg-foreground-dim-1-hover:hover {
  background-color: color-mix(in srgb, var(--foreground), var(--dim-target) var(--dim-1));
}

.bg-foreground-dim-2-hover:hover {
  background-color: color-mix(in srgb, var(--foreground), var(--dim-target) var(--dim-2));
}

.bg-foreground-dim-3-hover:hover {
  background-color: color-mix(in srgb, var(--foreground), var(--dim-target) var(--dim-3));
}

.bg-foreground-dim-4-hover:hover {
  background-color: color-mix(in srgb, var(--foreground), var(--dim-target) var(--dim-4));
}

.bg-foreground-dim-5-hover:hover {
  background-color: color-mix(in srgb, var(--foreground), var(--dim-target) var(--dim-5));
}

.bg-foreground-dim-6-hover:hover {
  background-color: color-mix(in srgb, var(--foreground), var(--dim-target) var(--dim-6));
}

.bg-foreground-dim-7-hover:hover {
  background-color: color-mix(in srgb, var(--foreground), var(--dim-target) var(--dim-7));
}

.bg-foreground-dim-8-hover:hover {
  background-color: color-mix(in srgb, var(--foreground), var(--dim-target) var(--dim-8));
}

.bg-foreground-dim-9-hover:hover {
  background-color: color-mix(in srgb, var(--foreground), var(--dim-target) var(--dim-9));
}

.bg-text {
  background-color: var(--text);
}

.bg-text-dim-0 {
  background-color: color-mix(in srgb, var(--text), var(--dim-target) var(--dim-0));
}

.bg-text-dim-1 {
  background-color: color-mix(in srgb, var(--text), var(--dim-target) var(--dim-1));
}

.bg-text-dim-2 {
  background-color: color-mix(in srgb, var(--text), var(--dim-target) var(--dim-2));
}

.bg-text-dim-3 {
  background-color: color-mix(in srgb, var(--text), var(--dim-target) var(--dim-3));
}

.bg-text-dim-4 {
  background-color: color-mix(in srgb, var(--text), var(--dim-target) var(--dim-4));
}

.bg-text-dim-5 {
  background-color: color-mix(in srgb, var(--text), var(--dim-target) var(--dim-5));
}

.bg-text-dim-6 {
  background-color: color-mix(in srgb, var(--text), var(--dim-target) var(--dim-6));
}

.bg-text-dim-7 {
  background-color: color-mix(in srgb, var(--text), var(--dim-target) var(--dim-7));
}

.bg-text-dim-8 {
  background-color: color-mix(in srgb, var(--text), var(--dim-target) var(--dim-8));
}

.bg-text-dim-9 {
  background-color: color-mix(in srgb, var(--text), var(--dim-target) var(--dim-9));
}

.bg-text-hover:hover {
  background-color: var(--text);
}

.bg-text-dim-0-hover:hover {
  background-color: color-mix(in srgb, var(--text), var(--dim-target) var(--dim-0));
}

.bg-text-dim-1-hover:hover {
  background-color: color-mix(in srgb, var(--text), var(--dim-target) var(--dim-1));
}

.bg-text-dim-2-hover:hover {
  background-color: color-mix(in srgb, var(--text), var(--dim-target) var(--dim-2));
}

.bg-text-dim-3-hover:hover {
  background-color: color-mix(in srgb, var(--text), var(--dim-target) var(--dim-3));
}

.bg-text-dim-4-hover:hover {
  background-color: color-mix(in srgb, var(--text), var(--dim-target) var(--dim-4));
}

.bg-text-dim-5-hover:hover {
  background-color: color-mix(in srgb, var(--text), var(--dim-target) var(--dim-5));
}

.bg-text-dim-6-hover:hover {
  background-color: color-mix(in srgb, var(--text), var(--dim-target) var(--dim-6));
}

.bg-text-dim-7-hover:hover {
  background-color: color-mix(in srgb, var(--text), var(--dim-target) var(--dim-7));
}

.bg-text-dim-8-hover:hover {
  background-color: color-mix(in srgb, var(--text), var(--dim-target) var(--dim-8));
}

.bg-text-dim-9-hover:hover {
  background-color: color-mix(in srgb, var(--text), var(--dim-target) var(--dim-9));
}

.bg-contrast {
  background-color: var(--contrast);
}

.bg-contrast-dim-0 {
  background-color: color-mix(in srgb, var(--contrast), var(--dim-target) var(--dim-0));
}

.bg-contrast-dim-1 {
  background-color: color-mix(in srgb, var(--contrast), var(--dim-target) var(--dim-1));
}

.bg-contrast-dim-2 {
  background-color: color-mix(in srgb, var(--contrast), var(--dim-target) var(--dim-2));
}

.bg-contrast-dim-3 {
  background-color: color-mix(in srgb, var(--contrast), var(--dim-target) var(--dim-3));
}

.bg-contrast-dim-4 {
  background-color: color-mix(in srgb, var(--contrast), var(--dim-target) var(--dim-4));
}

.bg-contrast-dim-5 {
  background-color: color-mix(in srgb, var(--contrast), var(--dim-target) var(--dim-5));
}

.bg-contrast-dim-6 {
  background-color: color-mix(in srgb, var(--contrast), var(--dim-target) var(--dim-6));
}

.bg-contrast-dim-7 {
  background-color: color-mix(in srgb, var(--contrast), var(--dim-target) var(--dim-7));
}

.bg-contrast-dim-8 {
  background-color: color-mix(in srgb, var(--contrast), var(--dim-target) var(--dim-8));
}

.bg-contrast-dim-9 {
  background-color: color-mix(in srgb, var(--contrast), var(--dim-target) var(--dim-9));
}

.bg-contrast-hover:hover {
  background-color: var(--contrast);
}

.bg-contrast-dim-0-hover:hover {
  background-color: color-mix(in srgb, var(--contrast), var(--dim-target) var(--dim-0));
}

.bg-contrast-dim-1-hover:hover {
  background-color: color-mix(in srgb, var(--contrast), var(--dim-target) var(--dim-1));
}

.bg-contrast-dim-2-hover:hover {
  background-color: color-mix(in srgb, var(--contrast), var(--dim-target) var(--dim-2));
}

.bg-contrast-dim-3-hover:hover {
  background-color: color-mix(in srgb, var(--contrast), var(--dim-target) var(--dim-3));
}

.bg-contrast-dim-4-hover:hover {
  background-color: color-mix(in srgb, var(--contrast), var(--dim-target) var(--dim-4));
}

.bg-contrast-dim-5-hover:hover {
  background-color: color-mix(in srgb, var(--contrast), var(--dim-target) var(--dim-5));
}

.bg-contrast-dim-6-hover:hover {
  background-color: color-mix(in srgb, var(--contrast), var(--dim-target) var(--dim-6));
}

.bg-contrast-dim-7-hover:hover {
  background-color: color-mix(in srgb, var(--contrast), var(--dim-target) var(--dim-7));
}

.bg-contrast-dim-8-hover:hover {
  background-color: color-mix(in srgb, var(--contrast), var(--dim-target) var(--dim-8));
}

.bg-contrast-dim-9-hover:hover {
  background-color: color-mix(in srgb, var(--contrast), var(--dim-target) var(--dim-9));
}

.bg-accent {
  background-color: var(--accent);
}

.bg-accent-dim-0 {
  background-color: color-mix(in srgb, var(--accent), var(--dim-target) var(--dim-0));
}

.bg-accent-dim-1 {
  background-color: color-mix(in srgb, var(--accent), var(--dim-target) var(--dim-1));
}

.bg-accent-dim-2 {
  background-color: color-mix(in srgb, var(--accent), var(--dim-target) var(--dim-2));
}

.bg-accent-dim-3 {
  background-color: color-mix(in srgb, var(--accent), var(--dim-target) var(--dim-3));
}

.bg-accent-dim-4 {
  background-color: color-mix(in srgb, var(--accent), var(--dim-target) var(--dim-4));
}

.bg-accent-dim-5 {
  background-color: color-mix(in srgb, var(--accent), var(--dim-target) var(--dim-5));
}

.bg-accent-dim-6 {
  background-color: color-mix(in srgb, var(--accent), var(--dim-target) var(--dim-6));
}

.bg-accent-dim-7 {
  background-color: color-mix(in srgb, var(--accent), var(--dim-target) var(--dim-7));
}

.bg-accent-dim-8 {
  background-color: color-mix(in srgb, var(--accent), var(--dim-target) var(--dim-8));
}

.bg-accent-dim-9 {
  background-color: color-mix(in srgb, var(--accent), var(--dim-target) var(--dim-9));
}

.bg-accent-hover:hover {
  background-color: var(--accent);
}

.bg-accent-dim-0-hover:hover {
  background-color: color-mix(in srgb, var(--accent), var(--dim-target) var(--dim-0));
}

.bg-accent-dim-1-hover:hover {
  background-color: color-mix(in srgb, var(--accent), var(--dim-target) var(--dim-1));
}

.bg-accent-dim-2-hover:hover {
  background-color: color-mix(in srgb, var(--accent), var(--dim-target) var(--dim-2));
}

.bg-accent-dim-3-hover:hover {
  background-color: color-mix(in srgb, var(--accent), var(--dim-target) var(--dim-3));
}

.bg-accent-dim-4-hover:hover {
  background-color: color-mix(in srgb, var(--accent), var(--dim-target) var(--dim-4));
}

.bg-accent-dim-5-hover:hover {
  background-color: color-mix(in srgb, var(--accent), var(--dim-target) var(--dim-5));
}

.bg-accent-dim-6-hover:hover {
  background-color: color-mix(in srgb, var(--accent), var(--dim-target) var(--dim-6));
}

.bg-accent-dim-7-hover:hover {
  background-color: color-mix(in srgb, var(--accent), var(--dim-target) var(--dim-7));
}

.bg-accent-dim-8-hover:hover {
  background-color: color-mix(in srgb, var(--accent), var(--dim-target) var(--dim-8));
}

.bg-accent-dim-9-hover:hover {
  background-color: color-mix(in srgb, var(--accent), var(--dim-target) var(--dim-9));
}

.bg-alternate {
  background-color: var(--alternate);
}

.bg-alternate-dim-0 {
  background-color: color-mix(in srgb, var(--alternate), var(--dim-target) var(--dim-0));
}

.bg-alternate-dim-1 {
  background-color: color-mix(in srgb, var(--alternate), var(--dim-target) var(--dim-1));
}

.bg-alternate-dim-2 {
  background-color: color-mix(in srgb, var(--alternate), var(--dim-target) var(--dim-2));
}

.bg-alternate-dim-3 {
  background-color: color-mix(in srgb, var(--alternate), var(--dim-target) var(--dim-3));
}

.bg-alternate-dim-4 {
  background-color: color-mix(in srgb, var(--alternate), var(--dim-target) var(--dim-4));
}

.bg-alternate-dim-5 {
  background-color: color-mix(in srgb, var(--alternate), var(--dim-target) var(--dim-5));
}

.bg-alternate-dim-6 {
  background-color: color-mix(in srgb, var(--alternate), var(--dim-target) var(--dim-6));
}

.bg-alternate-dim-7 {
  background-color: color-mix(in srgb, var(--alternate), var(--dim-target) var(--dim-7));
}

.bg-alternate-dim-8 {
  background-color: color-mix(in srgb, var(--alternate), var(--dim-target) var(--dim-8));
}

.bg-alternate-dim-9 {
  background-color: color-mix(in srgb, var(--alternate), var(--dim-target) var(--dim-9));
}

.bg-alternate-hover:hover {
  background-color: var(--alternate);
}

.bg-alternate-dim-0-hover:hover {
  background-color: color-mix(in srgb, var(--alternate), var(--dim-target) var(--dim-0));
}

.bg-alternate-dim-1-hover:hover {
  background-color: color-mix(in srgb, var(--alternate), var(--dim-target) var(--dim-1));
}

.bg-alternate-dim-2-hover:hover {
  background-color: color-mix(in srgb, var(--alternate), var(--dim-target) var(--dim-2));
}

.bg-alternate-dim-3-hover:hover {
  background-color: color-mix(in srgb, var(--alternate), var(--dim-target) var(--dim-3));
}

.bg-alternate-dim-4-hover:hover {
  background-color: color-mix(in srgb, var(--alternate), var(--dim-target) var(--dim-4));
}

.bg-alternate-dim-5-hover:hover {
  background-color: color-mix(in srgb, var(--alternate), var(--dim-target) var(--dim-5));
}

.bg-alternate-dim-6-hover:hover {
  background-color: color-mix(in srgb, var(--alternate), var(--dim-target) var(--dim-6));
}

.bg-alternate-dim-7-hover:hover {
  background-color: color-mix(in srgb, var(--alternate), var(--dim-target) var(--dim-7));
}

.bg-alternate-dim-8-hover:hover {
  background-color: color-mix(in srgb, var(--alternate), var(--dim-target) var(--dim-8));
}

.bg-alternate-dim-9-hover:hover {
  background-color: color-mix(in srgb, var(--alternate), var(--dim-target) var(--dim-9));
}

.bg-info {
  background-color: var(--info);
}

.bg-info-dim-0 {
  background-color: color-mix(in srgb, var(--info), var(--dim-target) var(--dim-0));
}

.bg-info-dim-1 {
  background-color: color-mix(in srgb, var(--info), var(--dim-target) var(--dim-1));
}

.bg-info-dim-2 {
  background-color: color-mix(in srgb, var(--info), var(--dim-target) var(--dim-2));
}

.bg-info-dim-3 {
  background-color: color-mix(in srgb, var(--info), var(--dim-target) var(--dim-3));
}

.bg-info-dim-4 {
  background-color: color-mix(in srgb, var(--info), var(--dim-target) var(--dim-4));
}

.bg-info-dim-5 {
  background-color: color-mix(in srgb, var(--info), var(--dim-target) var(--dim-5));
}

.bg-info-dim-6 {
  background-color: color-mix(in srgb, var(--info), var(--dim-target) var(--dim-6));
}

.bg-info-dim-7 {
  background-color: color-mix(in srgb, var(--info), var(--dim-target) var(--dim-7));
}

.bg-info-dim-8 {
  background-color: color-mix(in srgb, var(--info), var(--dim-target) var(--dim-8));
}

.bg-info-dim-9 {
  background-color: color-mix(in srgb, var(--info), var(--dim-target) var(--dim-9));
}

.bg-info-hover:hover {
  background-color: var(--info);
}

.bg-info-dim-0-hover:hover {
  background-color: color-mix(in srgb, var(--info), var(--dim-target) var(--dim-0));
}

.bg-info-dim-1-hover:hover {
  background-color: color-mix(in srgb, var(--info), var(--dim-target) var(--dim-1));
}

.bg-info-dim-2-hover:hover {
  background-color: color-mix(in srgb, var(--info), var(--dim-target) var(--dim-2));
}

.bg-info-dim-3-hover:hover {
  background-color: color-mix(in srgb, var(--info), var(--dim-target) var(--dim-3));
}

.bg-info-dim-4-hover:hover {
  background-color: color-mix(in srgb, var(--info), var(--dim-target) var(--dim-4));
}

.bg-info-dim-5-hover:hover {
  background-color: color-mix(in srgb, var(--info), var(--dim-target) var(--dim-5));
}

.bg-info-dim-6-hover:hover {
  background-color: color-mix(in srgb, var(--info), var(--dim-target) var(--dim-6));
}

.bg-info-dim-7-hover:hover {
  background-color: color-mix(in srgb, var(--info), var(--dim-target) var(--dim-7));
}

.bg-info-dim-8-hover:hover {
  background-color: color-mix(in srgb, var(--info), var(--dim-target) var(--dim-8));
}

.bg-info-dim-9-hover:hover {
  background-color: color-mix(in srgb, var(--info), var(--dim-target) var(--dim-9));
}

.bg-warning {
  background-color: var(--warning);
}

.bg-warning-dim-0 {
  background-color: color-mix(in srgb, var(--warning), var(--dim-target) var(--dim-0));
}

.bg-warning-dim-1 {
  background-color: color-mix(in srgb, var(--warning), var(--dim-target) var(--dim-1));
}

.bg-warning-dim-2 {
  background-color: color-mix(in srgb, var(--warning), var(--dim-target) var(--dim-2));
}

.bg-warning-dim-3 {
  background-color: color-mix(in srgb, var(--warning), var(--dim-target) var(--dim-3));
}

.bg-warning-dim-4 {
  background-color: color-mix(in srgb, var(--warning), var(--dim-target) var(--dim-4));
}

.bg-warning-dim-5 {
  background-color: color-mix(in srgb, var(--warning), var(--dim-target) var(--dim-5));
}

.bg-warning-dim-6 {
  background-color: color-mix(in srgb, var(--warning), var(--dim-target) var(--dim-6));
}

.bg-warning-dim-7 {
  background-color: color-mix(in srgb, var(--warning), var(--dim-target) var(--dim-7));
}

.bg-warning-dim-8 {
  background-color: color-mix(in srgb, var(--warning), var(--dim-target) var(--dim-8));
}

.bg-warning-dim-9 {
  background-color: color-mix(in srgb, var(--warning), var(--dim-target) var(--dim-9));
}

.bg-warning-hover:hover {
  background-color: var(--warning);
}

.bg-warning-dim-0-hover:hover {
  background-color: color-mix(in srgb, var(--warning), var(--dim-target) var(--dim-0));
}

.bg-warning-dim-1-hover:hover {
  background-color: color-mix(in srgb, var(--warning), var(--dim-target) var(--dim-1));
}

.bg-warning-dim-2-hover:hover {
  background-color: color-mix(in srgb, var(--warning), var(--dim-target) var(--dim-2));
}

.bg-warning-dim-3-hover:hover {
  background-color: color-mix(in srgb, var(--warning), var(--dim-target) var(--dim-3));
}

.bg-warning-dim-4-hover:hover {
  background-color: color-mix(in srgb, var(--warning), var(--dim-target) var(--dim-4));
}

.bg-warning-dim-5-hover:hover {
  background-color: color-mix(in srgb, var(--warning), var(--dim-target) var(--dim-5));
}

.bg-warning-dim-6-hover:hover {
  background-color: color-mix(in srgb, var(--warning), var(--dim-target) var(--dim-6));
}

.bg-warning-dim-7-hover:hover {
  background-color: color-mix(in srgb, var(--warning), var(--dim-target) var(--dim-7));
}

.bg-warning-dim-8-hover:hover {
  background-color: color-mix(in srgb, var(--warning), var(--dim-target) var(--dim-8));
}

.bg-warning-dim-9-hover:hover {
  background-color: color-mix(in srgb, var(--warning), var(--dim-target) var(--dim-9));
}

.bg-success {
  background-color: var(--success);
}

.bg-success-dim-0 {
  background-color: color-mix(in srgb, var(--success), var(--dim-target) var(--dim-0));
}

.bg-success-dim-1 {
  background-color: color-mix(in srgb, var(--success), var(--dim-target) var(--dim-1));
}

.bg-success-dim-2 {
  background-color: color-mix(in srgb, var(--success), var(--dim-target) var(--dim-2));
}

.bg-success-dim-3 {
  background-color: color-mix(in srgb, var(--success), var(--dim-target) var(--dim-3));
}

.bg-success-dim-4 {
  background-color: color-mix(in srgb, var(--success), var(--dim-target) var(--dim-4));
}

.bg-success-dim-5 {
  background-color: color-mix(in srgb, var(--success), var(--dim-target) var(--dim-5));
}

.bg-success-dim-6 {
  background-color: color-mix(in srgb, var(--success), var(--dim-target) var(--dim-6));
}

.bg-success-dim-7 {
  background-color: color-mix(in srgb, var(--success), var(--dim-target) var(--dim-7));
}

.bg-success-dim-8 {
  background-color: color-mix(in srgb, var(--success), var(--dim-target) var(--dim-8));
}

.bg-success-dim-9 {
  background-color: color-mix(in srgb, var(--success), var(--dim-target) var(--dim-9));
}

.bg-success-hover:hover {
  background-color: var(--success);
}

.bg-success-dim-0-hover:hover {
  background-color: color-mix(in srgb, var(--success), var(--dim-target) var(--dim-0));
}

.bg-success-dim-1-hover:hover {
  background-color: color-mix(in srgb, var(--success), var(--dim-target) var(--dim-1));
}

.bg-success-dim-2-hover:hover {
  background-color: color-mix(in srgb, var(--success), var(--dim-target) var(--dim-2));
}

.bg-success-dim-3-hover:hover {
  background-color: color-mix(in srgb, var(--success), var(--dim-target) var(--dim-3));
}

.bg-success-dim-4-hover:hover {
  background-color: color-mix(in srgb, var(--success), var(--dim-target) var(--dim-4));
}

.bg-success-dim-5-hover:hover {
  background-color: color-mix(in srgb, var(--success), var(--dim-target) var(--dim-5));
}

.bg-success-dim-6-hover:hover {
  background-color: color-mix(in srgb, var(--success), var(--dim-target) var(--dim-6));
}

.bg-success-dim-7-hover:hover {
  background-color: color-mix(in srgb, var(--success), var(--dim-target) var(--dim-7));
}

.bg-success-dim-8-hover:hover {
  background-color: color-mix(in srgb, var(--success), var(--dim-target) var(--dim-8));
}

.bg-success-dim-9-hover:hover {
  background-color: color-mix(in srgb, var(--success), var(--dim-target) var(--dim-9));
}

.bg-danger {
  background-color: var(--danger);
}

.bg-danger-dim-0 {
  background-color: color-mix(in srgb, var(--danger), var(--dim-target) var(--dim-0));
}

.bg-danger-dim-1 {
  background-color: color-mix(in srgb, var(--danger), var(--dim-target) var(--dim-1));
}

.bg-danger-dim-2 {
  background-color: color-mix(in srgb, var(--danger), var(--dim-target) var(--dim-2));
}

.bg-danger-dim-3 {
  background-color: color-mix(in srgb, var(--danger), var(--dim-target) var(--dim-3));
}

.bg-danger-dim-4 {
  background-color: color-mix(in srgb, var(--danger), var(--dim-target) var(--dim-4));
}

.bg-danger-dim-5 {
  background-color: color-mix(in srgb, var(--danger), var(--dim-target) var(--dim-5));
}

.bg-danger-dim-6 {
  background-color: color-mix(in srgb, var(--danger), var(--dim-target) var(--dim-6));
}

.bg-danger-dim-7 {
  background-color: color-mix(in srgb, var(--danger), var(--dim-target) var(--dim-7));
}

.bg-danger-dim-8 {
  background-color: color-mix(in srgb, var(--danger), var(--dim-target) var(--dim-8));
}

.bg-danger-dim-9 {
  background-color: color-mix(in srgb, var(--danger), var(--dim-target) var(--dim-9));
}

.bg-danger-hover:hover {
  background-color: var(--danger);
}

.bg-danger-dim-0-hover:hover {
  background-color: color-mix(in srgb, var(--danger), var(--dim-target) var(--dim-0));
}

.bg-danger-dim-1-hover:hover {
  background-color: color-mix(in srgb, var(--danger), var(--dim-target) var(--dim-1));
}

.bg-danger-dim-2-hover:hover {
  background-color: color-mix(in srgb, var(--danger), var(--dim-target) var(--dim-2));
}

.bg-danger-dim-3-hover:hover {
  background-color: color-mix(in srgb, var(--danger), var(--dim-target) var(--dim-3));
}

.bg-danger-dim-4-hover:hover {
  background-color: color-mix(in srgb, var(--danger), var(--dim-target) var(--dim-4));
}

.bg-danger-dim-5-hover:hover {
  background-color: color-mix(in srgb, var(--danger), var(--dim-target) var(--dim-5));
}

.bg-danger-dim-6-hover:hover {
  background-color: color-mix(in srgb, var(--danger), var(--dim-target) var(--dim-6));
}

.bg-danger-dim-7-hover:hover {
  background-color: color-mix(in srgb, var(--danger), var(--dim-target) var(--dim-7));
}

.bg-danger-dim-8-hover:hover {
  background-color: color-mix(in srgb, var(--danger), var(--dim-target) var(--dim-8));
}

.bg-danger-dim-9-hover:hover {
  background-color: color-mix(in srgb, var(--danger), var(--dim-target) var(--dim-9));
}

.bg-link {
  background-color: var(--link);
}

.bg-link-dim-0 {
  background-color: color-mix(in srgb, var(--link), var(--dim-target) var(--dim-0));
}

.bg-link-dim-1 {
  background-color: color-mix(in srgb, var(--link), var(--dim-target) var(--dim-1));
}

.bg-link-dim-2 {
  background-color: color-mix(in srgb, var(--link), var(--dim-target) var(--dim-2));
}

.bg-link-dim-3 {
  background-color: color-mix(in srgb, var(--link), var(--dim-target) var(--dim-3));
}

.bg-link-dim-4 {
  background-color: color-mix(in srgb, var(--link), var(--dim-target) var(--dim-4));
}

.bg-link-dim-5 {
  background-color: color-mix(in srgb, var(--link), var(--dim-target) var(--dim-5));
}

.bg-link-dim-6 {
  background-color: color-mix(in srgb, var(--link), var(--dim-target) var(--dim-6));
}

.bg-link-dim-7 {
  background-color: color-mix(in srgb, var(--link), var(--dim-target) var(--dim-7));
}

.bg-link-dim-8 {
  background-color: color-mix(in srgb, var(--link), var(--dim-target) var(--dim-8));
}

.bg-link-dim-9 {
  background-color: color-mix(in srgb, var(--link), var(--dim-target) var(--dim-9));
}

.bg-link-hover:hover {
  background-color: var(--link);
}

.bg-link-dim-0-hover:hover {
  background-color: color-mix(in srgb, var(--link), var(--dim-target) var(--dim-0));
}

.bg-link-dim-1-hover:hover {
  background-color: color-mix(in srgb, var(--link), var(--dim-target) var(--dim-1));
}

.bg-link-dim-2-hover:hover {
  background-color: color-mix(in srgb, var(--link), var(--dim-target) var(--dim-2));
}

.bg-link-dim-3-hover:hover {
  background-color: color-mix(in srgb, var(--link), var(--dim-target) var(--dim-3));
}

.bg-link-dim-4-hover:hover {
  background-color: color-mix(in srgb, var(--link), var(--dim-target) var(--dim-4));
}

.bg-link-dim-5-hover:hover {
  background-color: color-mix(in srgb, var(--link), var(--dim-target) var(--dim-5));
}

.bg-link-dim-6-hover:hover {
  background-color: color-mix(in srgb, var(--link), var(--dim-target) var(--dim-6));
}

.bg-link-dim-7-hover:hover {
  background-color: color-mix(in srgb, var(--link), var(--dim-target) var(--dim-7));
}

.bg-link-dim-8-hover:hover {
  background-color: color-mix(in srgb, var(--link), var(--dim-target) var(--dim-8));
}

.bg-link-dim-9-hover:hover {
  background-color: color-mix(in srgb, var(--link), var(--dim-target) var(--dim-9));
}

/* src/spacing.css */
.p-0 {
  --padding: 0;
  padding: var(--padding);
}

.p-1 {
  --padding: calc(var(--spacing) * .5);
  padding: var(--padding);
}

.p-2 {
  --padding: calc(var(--spacing) * 1);
  padding: var(--padding);
}

.p-3 {
  --padding: calc(var(--spacing) * 1.5);
  padding: var(--padding);
}

.p-4 {
  --padding: calc(var(--spacing) * 2);
  padding: var(--padding);
}

.p-5 {
  --padding: calc(var(--spacing) * 3);
  padding: var(--padding);
}

.p-6 {
  --padding: calc(var(--spacing) * 4);
  padding: var(--padding);
}

.p-7 {
  --padding: calc(var(--spacing) * 5);
  padding: var(--padding);
}

.p-8 {
  --padding: calc(var(--spacing) * 6);
  padding: var(--padding);
}

.p-9 {
  --padding: calc(var(--spacing) * 8);
  padding: var(--padding);
}

.p-10 {
  --padding: calc(var(--spacing) * 10);
  padding: var(--padding);
}

.pl-0 {
  padding-left: 0;
}

.pl-1 {
  padding-left: calc(var(--spacing) * .5);
}

.pl-2 {
  padding-left: calc(var(--spacing) * 1);
}

.pl-3 {
  padding-left: calc(var(--spacing) * 1.5);
}

.pl-4 {
  padding-left: calc(var(--spacing) * 2);
}

.pl-5 {
  padding-left: calc(var(--spacing) * 3);
}

.pl-6 {
  padding-left: calc(var(--spacing) * 4);
}

.pl-7 {
  padding-left: calc(var(--spacing) * 5);
}

.pl-8 {
  padding-left: calc(var(--spacing) * 6);
}

.pl-9 {
  padding-left: calc(var(--spacing) * 8);
}

.pl-10 {
  padding-left: calc(var(--spacing) * 10);
}

.pr-0 {
  padding-right: 0;
}

.pr-1 {
  padding-right: calc(var(--spacing) * .5);
}

.pr-2 {
  padding-right: calc(var(--spacing) * 1);
}

.pr-3 {
  padding-right: calc(var(--spacing) * 1.5);
}

.pr-4 {
  padding-right: calc(var(--spacing) * 2);
}

.pr-5 {
  padding-right: calc(var(--spacing) * 3);
}

.pr-6 {
  padding-right: calc(var(--spacing) * 4);
}

.pr-7 {
  padding-right: calc(var(--spacing) * 5);
}

.pr-8 {
  padding-right: calc(var(--spacing) * 6);
}

.pr-9 {
  padding-right: calc(var(--spacing) * 8);
}

.pr-10 {
  padding-right: calc(var(--spacing) * 10);
}

.pb-0 {
  padding-bottom: 0;
}

.pb-1 {
  padding-bottom: calc(var(--spacing) * .5);
}

.pb-2 {
  padding-bottom: calc(var(--spacing) * 1);
}

.pb-3 {
  padding-bottom: calc(var(--spacing) * 1.5);
}

.pb-4 {
  padding-bottom: calc(var(--spacing) * 2);
}

.pb-5 {
  padding-bottom: calc(var(--spacing) * 3);
}

.pb-6 {
  padding-bottom: calc(var(--spacing) * 4);
}

.pb-7 {
  padding-bottom: calc(var(--spacing) * 5);
}

.pb-8 {
  padding-bottom: calc(var(--spacing) * 6);
}

.pb-9 {
  padding-bottom: calc(var(--spacing) * 8);
}

.pb-10 {
  padding-bottom: calc(var(--spacing) * 10);
}

.pt-0 {
  padding-top: 0;
}

.pt-1 {
  padding-top: calc(var(--spacing) * .5);
}

.pt-2 {
  padding-top: calc(var(--spacing) * 1);
}

.pt-3 {
  padding-top: calc(var(--spacing) * 1.5);
}

.pt-4 {
  padding-top: calc(var(--spacing) * 2);
}

.pt-5 {
  padding-top: calc(var(--spacing) * 3);
}

.pt-6 {
  padding-top: calc(var(--spacing) * 4);
}

.pt-7 {
  padding-top: calc(var(--spacing) * 5);
}

.pt-8 {
  padding-top: calc(var(--spacing) * 6);
}

.pt-9 {
  padding-top: calc(var(--spacing) * 8);
}

.pt-10 {
  padding-top: calc(var(--spacing) * 10);
}

.py-0 {
  padding-top: 0;
  padding-bottom: 0;
}

.py-1 {
  padding-top: calc(var(--spacing) * .5);
  padding-bottom: calc(var(--spacing) * .5);
}

.py-2 {
  padding-top: calc(var(--spacing) * 1);
  padding-bottom: calc(var(--spacing) * 1);
}

.py-3 {
  padding-top: calc(var(--spacing) * 1.5);
  padding-bottom: calc(var(--spacing) * 1.5);
}

.py-4 {
  padding-top: calc(var(--spacing) * 2);
  padding-bottom: calc(var(--spacing) * 2);
}

.py-5 {
  padding-top: calc(var(--spacing) * 3);
  padding-bottom: calc(var(--spacing) * 3);
}

.py-6 {
  padding-top: calc(var(--spacing) * 4);
  padding-bottom: calc(var(--spacing) * 4);
}

.py-7 {
  padding-top: calc(var(--spacing) * 5);
  padding-bottom: calc(var(--spacing) * 5);
}

.py-8 {
  padding-top: calc(var(--spacing) * 6);
  padding-bottom: calc(var(--spacing) * 6);
}

.py-9 {
  padding-top: calc(var(--spacing) * 8);
  padding-bottom: calc(var(--spacing) * 8);
}

.py-10 {
  padding-top: calc(var(--spacing) * 10);
  padding-bottom: calc(var(--spacing) * 10);
}

.px-0 {
  padding-left: 0;
  padding-right: 0;
}

.px-1 {
  padding-left: calc(var(--spacing) * .5);
  padding-right: calc(var(--spacing) * .5);
}

.px-2 {
  padding-left: calc(var(--spacing) * 1);
  padding-right: calc(var(--spacing) * 1);
}

.px-3 {
  padding-left: calc(var(--spacing) * 1.5);
  padding-right: calc(var(--spacing) * 1.5);
}

.px-4 {
  padding-left: calc(var(--spacing) * 2);
  padding-right: calc(var(--spacing) * 2);
}

.px-5 {
  padding-left: calc(var(--spacing) * 3);
  padding-right: calc(var(--spacing) * 3);
}

.px-6 {
  padding-left: calc(var(--spacing) * 4);
  padding-right: calc(var(--spacing) * 4);
}

.px-7 {
  padding-left: calc(var(--spacing) * 5);
  padding-right: calc(var(--spacing) * 5);
}

.px-8 {
  padding-left: calc(var(--spacing) * 6);
  padding-right: calc(var(--spacing) * 6);
}

.px-9 {
  padding-left: calc(var(--spacing) * 8);
  padding-right: calc(var(--spacing) * 8);
}

.px-10 {
  padding-left: calc(var(--spacing) * 10);
  padding-right: calc(var(--spacing) * 10);
}

.m-0 {
  --margin: 0;
  margin: var(--margin);
}

.m-1 {
  --margin: calc(var(--spacing) * .5);
  margin: var(--margin);
}

.m-2 {
  --margin: calc(var(--spacing) * 1);
  margin: var(--margin);
}

.m-3 {
  --margin: calc(var(--spacing) * 1.5);
  margin: var(--margin);
}

.m-4 {
  --margin: calc(var(--spacing) * 2);
  margin: var(--margin);
}

.m-5 {
  --margin: calc(var(--spacing) * 3);
  margin: var(--margin);
}

.m-6 {
  --margin: calc(var(--spacing) * 4);
  margin: var(--margin);
}

.m-7 {
  --margin: calc(var(--spacing) * 5);
  margin: var(--margin);
}

.m-8 {
  --margin: calc(var(--spacing) * 6);
  margin: var(--margin);
}

.m-9 {
  --margin: calc(var(--spacing) * 8);
  margin: var(--margin);
}

.m-10 {
  --margin: calc(var(--spacing) * 10);
  margin: var(--margin);
}

.ml-0 {
  margin-left: 0;
}

.ml-1 {
  margin-left: calc(var(--spacing) * .5);
}

.ml-2 {
  margin-left: calc(var(--spacing) * 1);
}

.ml-3 {
  margin-left: calc(var(--spacing) * 1.5);
}

.ml-4 {
  margin-left: calc(var(--spacing) * 2);
}

.ml-5 {
  margin-left: calc(var(--spacing) * 3);
}

.ml-6 {
  margin-left: calc(var(--spacing) * 4);
}

.ml-7 {
  margin-left: calc(var(--spacing) * 5);
}

.ml-8 {
  margin-left: calc(var(--spacing) * 6);
}

.ml-9 {
  margin-left: calc(var(--spacing) * 8);
}

.ml-10 {
  margin-left: calc(var(--spacing) * 10);
}

.mr-0 {
  margin-right: 0;
}

.mr-1 {
  margin-right: calc(var(--spacing) * .5);
}

.mr-2 {
  margin-right: calc(var(--spacing) * 1);
}

.mr-3 {
  margin-right: calc(var(--spacing) * 1.5);
}

.mr-4 {
  margin-right: calc(var(--spacing) * 2);
}

.mr-5 {
  margin-right: calc(var(--spacing) * 3);
}

.mr-6 {
  margin-right: calc(var(--spacing) * 4);
}

.mr-7 {
  margin-right: calc(var(--spacing) * 5);
}

.mr-8 {
  margin-right: calc(var(--spacing) * 6);
}

.mr-9 {
  margin-right: calc(var(--spacing) * 8);
}

.mr-10 {
  margin-right: calc(var(--spacing) * 10);
}

.mb-0 {
  margin-bottom: 0;
}

.mb-1 {
  margin-bottom: calc(var(--spacing) * .5);
}

.mb-2 {
  margin-bottom: calc(var(--spacing) * 1);
}

.mb-3 {
  margin-bottom: calc(var(--spacing) * 1.5);
}

.mb-4 {
  margin-bottom: calc(var(--spacing) * 2);
}

.mb-5 {
  margin-bottom: calc(var(--spacing) * 3);
}

.mb-6 {
  margin-bottom: calc(var(--spacing) * 4);
}

.mb-7 {
  margin-bottom: calc(var(--spacing) * 5);
}

.mb-8 {
  margin-bottom: calc(var(--spacing) * 6);
}

.mb-9 {
  margin-bottom: calc(var(--spacing) * 8);
}

.mb-10 {
  margin-bottom: calc(var(--spacing) * 10);
}

.mt-0 {
  margin-top: 0;
}

.mt-1 {
  margin-top: calc(var(--spacing) * .5);
}

.mt-2 {
  margin-top: calc(var(--spacing) * 1);
}

.mt-3 {
  margin-top: calc(var(--spacing) * 1.5);
}

.mt-4 {
  margin-top: calc(var(--spacing) * 2);
}

.mt-5 {
  margin-top: calc(var(--spacing) * 3);
}

.mt-6 {
  margin-top: calc(var(--spacing) * 4);
}

.mt-7 {
  margin-top: calc(var(--spacing) * 5);
}

.mt-8 {
  margin-top: calc(var(--spacing) * 6);
}

.mt-9 {
  margin-top: calc(var(--spacing) * 8);
}

.mt-10 {
  margin-top: calc(var(--spacing) * 10);
}

.my-0 {
  margin-top: 0;
  margin-bottom: 0;
}

.my-1 {
  margin-top: calc(var(--spacing) * .5);
  margin-bottom: calc(var(--spacing) * .5);
}

.my-2 {
  margin-top: calc(var(--spacing) * 1);
  margin-bottom: calc(var(--spacing) * 1);
}

.my-3 {
  margin-top: calc(var(--spacing) * 1.5);
  margin-bottom: calc(var(--spacing) * 1.5);
}

.my-4 {
  margin-top: calc(var(--spacing) * 2);
  margin-bottom: calc(var(--spacing) * 2);
}

.my-5 {
  margin-top: calc(var(--spacing) * 3);
  margin-bottom: calc(var(--spacing) * 3);
}

.my-6 {
  margin-top: calc(var(--spacing) * 4);
  margin-bottom: calc(var(--spacing) * 4);
}

.my-7 {
  margin-top: calc(var(--spacing) * 5);
  margin-bottom: calc(var(--spacing) * 5);
}

.my-8 {
  margin-top: calc(var(--spacing) * 6);
  margin-bottom: calc(var(--spacing) * 6);
}

.my-9 {
  margin-top: calc(var(--spacing) * 8);
  margin-bottom: calc(var(--spacing) * 8);
}

.my-10 {
  margin-top: calc(var(--spacing) * 10);
  margin-bottom: calc(var(--spacing) * 10);
}

.mx-0 {
  margin-left: 0;
  margin-right: 0;
}

.mx-1 {
  margin-left: calc(var(--spacing) * .5);
  margin-right: calc(var(--spacing) * .5);
}

.mx-2 {
  margin-left: calc(var(--spacing) * 1);
  margin-right: calc(var(--spacing) * 1);
}

.mx-3 {
  margin-left: calc(var(--spacing) * 1.5);
  margin-right: calc(var(--spacing) * 1.5);
}

.mx-4 {
  margin-left: calc(var(--spacing) * 2);
  margin-right: calc(var(--spacing) * 2);
}

.mx-5 {
  margin-left: calc(var(--spacing) * 3);
  margin-right: calc(var(--spacing) * 3);
}

.mx-6 {
  margin-left: calc(var(--spacing) * 4);
  margin-right: calc(var(--spacing) * 4);
}

.mx-7 {
  margin-left: calc(var(--spacing) * 5);
  margin-right: calc(var(--spacing) * 5);
}

.mx-8 {
  margin-left: calc(var(--spacing) * 6);
  margin-right: calc(var(--spacing) * 6);
}

.mx-9 {
  margin-left: calc(var(--spacing) * 8);
  margin-right: calc(var(--spacing) * 8);
}

.mx-10 {
  margin-left: calc(var(--spacing) * 10);
  margin-right: calc(var(--spacing) * 10);
}

@media (max-width: 8rem) {
  .p-0-4xs {
    --padding: 0;
    padding: var(--padding);
  }

  .p-1-4xs {
    --padding: calc(var(--spacing) * .5);
    padding: var(--padding);
  }

  .p-2-4xs {
    --padding: calc(var(--spacing) * 1);
    padding: var(--padding);
  }

  .p-3-4xs {
    --padding: calc(var(--spacing) * 1.5);
    padding: var(--padding);
  }

  .p-4-4xs {
    --padding: calc(var(--spacing) * 2);
    padding: var(--padding);
  }

  .p-5-4xs {
    --padding: calc(var(--spacing) * 3);
    padding: var(--padding);
  }

  .p-6-4xs {
    --padding: calc(var(--spacing) * 4);
    padding: var(--padding);
  }

  .p-7-4xs {
    --padding: calc(var(--spacing) * 5);
    padding: var(--padding);
  }

  .p-8-4xs {
    --padding: calc(var(--spacing) * 6);
    padding: var(--padding);
  }

  .p-9-4xs {
    --padding: calc(var(--spacing) * 8);
    padding: var(--padding);
  }

  .p-10-4xs {
    --padding: calc(var(--spacing) * 10);
    padding: var(--padding);
  }

  .pl-0-4xs {
    padding-left: 0;
  }

  .pl-1-4xs {
    padding-left: calc(var(--spacing) * .5);
  }

  .pl-2-4xs {
    padding-left: calc(var(--spacing) * 1);
  }

  .pl-3-4xs {
    padding-left: calc(var(--spacing) * 1.5);
  }

  .pl-4-4xs {
    padding-left: calc(var(--spacing) * 2);
  }

  .pl-5-4xs {
    padding-left: calc(var(--spacing) * 3);
  }

  .pl-6-4xs {
    padding-left: calc(var(--spacing) * 4);
  }

  .pl-7-4xs {
    padding-left: calc(var(--spacing) * 5);
  }

  .pl-8-4xs {
    padding-left: calc(var(--spacing) * 6);
  }

  .pl-9-4xs {
    padding-left: calc(var(--spacing) * 8);
  }

  .pl-10-4xs {
    padding-left: calc(var(--spacing) * 10);
  }

  .pr-0-4xs {
    padding-right: 0;
  }

  .pr-1-4xs {
    padding-right: calc(var(--spacing) * .5);
  }

  .pr-2-4xs {
    padding-right: calc(var(--spacing) * 1);
  }

  .pr-3-4xs {
    padding-right: calc(var(--spacing) * 1.5);
  }

  .pr-4-4xs {
    padding-right: calc(var(--spacing) * 2);
  }

  .pr-5-4xs {
    padding-right: calc(var(--spacing) * 3);
  }

  .pr-6-4xs {
    padding-right: calc(var(--spacing) * 4);
  }

  .pr-7-4xs {
    padding-right: calc(var(--spacing) * 5);
  }

  .pr-8-4xs {
    padding-right: calc(var(--spacing) * 6);
  }

  .pr-9-4xs {
    padding-right: calc(var(--spacing) * 8);
  }

  .pr-10-4xs {
    padding-right: calc(var(--spacing) * 10);
  }

  .pb-0-4xs {
    padding-bottom: 0;
  }

  .pb-1-4xs {
    padding-bottom: calc(var(--spacing) * .5);
  }

  .pb-2-4xs {
    padding-bottom: calc(var(--spacing) * 1);
  }

  .pb-3-4xs {
    padding-bottom: calc(var(--spacing) * 1.5);
  }

  .pb-4-4xs {
    padding-bottom: calc(var(--spacing) * 2);
  }

  .pb-5-4xs {
    padding-bottom: calc(var(--spacing) * 3);
  }

  .pb-6-4xs {
    padding-bottom: calc(var(--spacing) * 4);
  }

  .pb-7-4xs {
    padding-bottom: calc(var(--spacing) * 5);
  }

  .pb-8-4xs {
    padding-bottom: calc(var(--spacing) * 6);
  }

  .pb-9-4xs {
    padding-bottom: calc(var(--spacing) * 8);
  }

  .pb-10-4xs {
    padding-bottom: calc(var(--spacing) * 10);
  }

  .pt-0-4xs {
    padding-top: 0;
  }

  .pt-1-4xs {
    padding-top: calc(var(--spacing) * .5);
  }

  .pt-2-4xs {
    padding-top: calc(var(--spacing) * 1);
  }

  .pt-3-4xs {
    padding-top: calc(var(--spacing) * 1.5);
  }

  .pt-4-4xs {
    padding-top: calc(var(--spacing) * 2);
  }

  .pt-5-4xs {
    padding-top: calc(var(--spacing) * 3);
  }

  .pt-6-4xs {
    padding-top: calc(var(--spacing) * 4);
  }

  .pt-7-4xs {
    padding-top: calc(var(--spacing) * 5);
  }

  .pt-8-4xs {
    padding-top: calc(var(--spacing) * 6);
  }

  .pt-9-4xs {
    padding-top: calc(var(--spacing) * 8);
  }

  .pt-10-4xs {
    padding-top: calc(var(--spacing) * 10);
  }

  .py-0-4xs {
    padding-top: 0;
    padding-bottom: 0;
  }

  .py-1-4xs {
    padding-top: calc(var(--spacing) * .5);
    padding-bottom: calc(var(--spacing) * .5);
  }

  .py-2-4xs {
    padding-top: calc(var(--spacing) * 1);
    padding-bottom: calc(var(--spacing) * 1);
  }

  .py-3-4xs {
    padding-top: calc(var(--spacing) * 1.5);
    padding-bottom: calc(var(--spacing) * 1.5);
  }

  .py-4-4xs {
    padding-top: calc(var(--spacing) * 2);
    padding-bottom: calc(var(--spacing) * 2);
  }

  .py-5-4xs {
    padding-top: calc(var(--spacing) * 3);
    padding-bottom: calc(var(--spacing) * 3);
  }

  .py-6-4xs {
    padding-top: calc(var(--spacing) * 4);
    padding-bottom: calc(var(--spacing) * 4);
  }

  .py-7-4xs {
    padding-top: calc(var(--spacing) * 5);
    padding-bottom: calc(var(--spacing) * 5);
  }

  .py-8-4xs {
    padding-top: calc(var(--spacing) * 6);
    padding-bottom: calc(var(--spacing) * 6);
  }

  .py-9-4xs {
    padding-top: calc(var(--spacing) * 8);
    padding-bottom: calc(var(--spacing) * 8);
  }

  .py-10-4xs {
    padding-top: calc(var(--spacing) * 10);
    padding-bottom: calc(var(--spacing) * 10);
  }

  .px-0-4xs {
    padding-left: 0;
    padding-right: 0;
  }

  .px-1-4xs {
    padding-left: calc(var(--spacing) * .5);
    padding-right: calc(var(--spacing) * .5);
  }

  .px-2-4xs {
    padding-left: calc(var(--spacing) * 1);
    padding-right: calc(var(--spacing) * 1);
  }

  .px-3-4xs {
    padding-left: calc(var(--spacing) * 1.5);
    padding-right: calc(var(--spacing) * 1.5);
  }

  .px-4-4xs {
    padding-left: calc(var(--spacing) * 2);
    padding-right: calc(var(--spacing) * 2);
  }

  .px-5-4xs {
    padding-left: calc(var(--spacing) * 3);
    padding-right: calc(var(--spacing) * 3);
  }

  .px-6-4xs {
    padding-left: calc(var(--spacing) * 4);
    padding-right: calc(var(--spacing) * 4);
  }

  .px-7-4xs {
    padding-left: calc(var(--spacing) * 5);
    padding-right: calc(var(--spacing) * 5);
  }

  .px-8-4xs {
    padding-left: calc(var(--spacing) * 6);
    padding-right: calc(var(--spacing) * 6);
  }

  .px-9-4xs {
    padding-left: calc(var(--spacing) * 8);
    padding-right: calc(var(--spacing) * 8);
  }

  .px-10-4xs {
    padding-left: calc(var(--spacing) * 10);
    padding-right: calc(var(--spacing) * 10);
  }

  .m-0-4xs {
    --margin: 0;
    margin: var(--margin);
  }

  .m-1-4xs {
    --margin: calc(var(--spacing) * .5);
    margin: var(--margin);
  }

  .m-2-4xs {
    --margin: calc(var(--spacing) * 1);
    margin: var(--margin);
  }

  .m-3-4xs {
    --margin: calc(var(--spacing) * 1.5);
    margin: var(--margin);
  }

  .m-4-4xs {
    --margin: calc(var(--spacing) * 2);
    margin: var(--margin);
  }

  .m-5-4xs {
    --margin: calc(var(--spacing) * 3);
    margin: var(--margin);
  }

  .m-6-4xs {
    --margin: calc(var(--spacing) * 4);
    margin: var(--margin);
  }

  .m-7-4xs {
    --margin: calc(var(--spacing) * 5);
    margin: var(--margin);
  }

  .m-8-4xs {
    --margin: calc(var(--spacing) * 6);
    margin: var(--margin);
  }

  .m-9-4xs {
    --margin: calc(var(--spacing) * 8);
    margin: var(--margin);
  }

  .m-10-4xs {
    --margin: calc(var(--spacing) * 10);
    margin: var(--margin);
  }

  .ml-0-4xs {
    margin-left: 0;
  }

  .ml-1-4xs {
    margin-left: calc(var(--spacing) * .5);
  }

  .ml-2-4xs {
    margin-left: calc(var(--spacing) * 1);
  }

  .ml-3-4xs {
    margin-left: calc(var(--spacing) * 1.5);
  }

  .ml-4-4xs {
    margin-left: calc(var(--spacing) * 2);
  }

  .ml-5-4xs {
    margin-left: calc(var(--spacing) * 3);
  }

  .ml-6-4xs {
    margin-left: calc(var(--spacing) * 4);
  }

  .ml-7-4xs {
    margin-left: calc(var(--spacing) * 5);
  }

  .ml-8-4xs {
    margin-left: calc(var(--spacing) * 6);
  }

  .ml-9-4xs {
    margin-left: calc(var(--spacing) * 8);
  }

  .ml-10-4xs {
    margin-left: calc(var(--spacing) * 10);
  }

  .mr-0-4xs {
    margin-right: 0;
  }

  .mr-1-4xs {
    margin-right: calc(var(--spacing) * .5);
  }

  .mr-2-4xs {
    margin-right: calc(var(--spacing) * 1);
  }

  .mr-3-4xs {
    margin-right: calc(var(--spacing) * 1.5);
  }

  .mr-4-4xs {
    margin-right: calc(var(--spacing) * 2);
  }

  .mr-5-4xs {
    margin-right: calc(var(--spacing) * 3);
  }

  .mr-6-4xs {
    margin-right: calc(var(--spacing) * 4);
  }

  .mr-7-4xs {
    margin-right: calc(var(--spacing) * 5);
  }

  .mr-8-4xs {
    margin-right: calc(var(--spacing) * 6);
  }

  .mr-9-4xs {
    margin-right: calc(var(--spacing) * 8);
  }

  .mr-10-4xs {
    margin-right: calc(var(--spacing) * 10);
  }

  .mb-0-4xs {
    margin-bottom: 0;
  }

  .mb-1-4xs {
    margin-bottom: calc(var(--spacing) * .5);
  }

  .mb-2-4xs {
    margin-bottom: calc(var(--spacing) * 1);
  }

  .mb-3-4xs {
    margin-bottom: calc(var(--spacing) * 1.5);
  }

  .mb-4-4xs {
    margin-bottom: calc(var(--spacing) * 2);
  }

  .mb-5-4xs {
    margin-bottom: calc(var(--spacing) * 3);
  }

  .mb-6-4xs {
    margin-bottom: calc(var(--spacing) * 4);
  }

  .mb-7-4xs {
    margin-bottom: calc(var(--spacing) * 5);
  }

  .mb-8-4xs {
    margin-bottom: calc(var(--spacing) * 6);
  }

  .mb-9-4xs {
    margin-bottom: calc(var(--spacing) * 8);
  }

  .mb-10-4xs {
    margin-bottom: calc(var(--spacing) * 10);
  }

  .mt-0-4xs {
    margin-top: 0;
  }

  .mt-1-4xs {
    margin-top: calc(var(--spacing) * .5);
  }

  .mt-2-4xs {
    margin-top: calc(var(--spacing) * 1);
  }

  .mt-3-4xs {
    margin-top: calc(var(--spacing) * 1.5);
  }

  .mt-4-4xs {
    margin-top: calc(var(--spacing) * 2);
  }

  .mt-5-4xs {
    margin-top: calc(var(--spacing) * 3);
  }

  .mt-6-4xs {
    margin-top: calc(var(--spacing) * 4);
  }

  .mt-7-4xs {
    margin-top: calc(var(--spacing) * 5);
  }

  .mt-8-4xs {
    margin-top: calc(var(--spacing) * 6);
  }

  .mt-9-4xs {
    margin-top: calc(var(--spacing) * 8);
  }

  .mt-10-4xs {
    margin-top: calc(var(--spacing) * 10);
  }

  .my-0-4xs {
    margin-top: 0;
    margin-bottom: 0;
  }

  .my-1-4xs {
    margin-top: calc(var(--spacing) * .5);
    margin-bottom: calc(var(--spacing) * .5);
  }

  .my-2-4xs {
    margin-top: calc(var(--spacing) * 1);
    margin-bottom: calc(var(--spacing) * 1);
  }

  .my-3-4xs {
    margin-top: calc(var(--spacing) * 1.5);
    margin-bottom: calc(var(--spacing) * 1.5);
  }

  .my-4-4xs {
    margin-top: calc(var(--spacing) * 2);
    margin-bottom: calc(var(--spacing) * 2);
  }

  .my-5-4xs {
    margin-top: calc(var(--spacing) * 3);
    margin-bottom: calc(var(--spacing) * 3);
  }

  .my-6-4xs {
    margin-top: calc(var(--spacing) * 4);
    margin-bottom: calc(var(--spacing) * 4);
  }

  .my-7-4xs {
    margin-top: calc(var(--spacing) * 5);
    margin-bottom: calc(var(--spacing) * 5);
  }

  .my-8-4xs {
    margin-top: calc(var(--spacing) * 6);
    margin-bottom: calc(var(--spacing) * 6);
  }

  .my-9-4xs {
    margin-top: calc(var(--spacing) * 8);
    margin-bottom: calc(var(--spacing) * 8);
  }

  .my-10-4xs {
    margin-top: calc(var(--spacing) * 10);
    margin-bottom: calc(var(--spacing) * 10);
  }

  .mx-0-4xs {
    margin-left: 0;
    margin-right: 0;
  }

  .mx-1-4xs {
    margin-left: calc(var(--spacing) * .5);
    margin-right: calc(var(--spacing) * .5);
  }

  .mx-2-4xs {
    margin-left: calc(var(--spacing) * 1);
    margin-right: calc(var(--spacing) * 1);
  }

  .mx-3-4xs {
    margin-left: calc(var(--spacing) * 1.5);
    margin-right: calc(var(--spacing) * 1.5);
  }

  .mx-4-4xs {
    margin-left: calc(var(--spacing) * 2);
    margin-right: calc(var(--spacing) * 2);
  }

  .mx-5-4xs {
    margin-left: calc(var(--spacing) * 3);
    margin-right: calc(var(--spacing) * 3);
  }

  .mx-6-4xs {
    margin-left: calc(var(--spacing) * 4);
    margin-right: calc(var(--spacing) * 4);
  }

  .mx-7-4xs {
    margin-left: calc(var(--spacing) * 5);
    margin-right: calc(var(--spacing) * 5);
  }

  .mx-8-4xs {
    margin-left: calc(var(--spacing) * 6);
    margin-right: calc(var(--spacing) * 6);
  }

  .mx-9-4xs {
    margin-left: calc(var(--spacing) * 8);
    margin-right: calc(var(--spacing) * 8);
  }

  .mx-10-4xs {
    margin-left: calc(var(--spacing) * 10);
    margin-right: calc(var(--spacing) * 10);
  }
}

@media (min-width: calc(8rem + .001px)) {
  .p-0-2xs {
    --padding: 0;
    padding: var(--padding);
  }

  .p-1-2xs {
    --padding: calc(var(--spacing) * .5);
    padding: var(--padding);
  }

  .p-2-2xs {
    --padding: calc(var(--spacing) * 1);
    padding: var(--padding);
  }

  .p-3-2xs {
    --padding: calc(var(--spacing) * 1.5);
    padding: var(--padding);
  }

  .p-4-2xs {
    --padding: calc(var(--spacing) * 2);
    padding: var(--padding);
  }

  .p-5-2xs {
    --padding: calc(var(--spacing) * 3);
    padding: var(--padding);
  }

  .p-6-2xs {
    --padding: calc(var(--spacing) * 4);
    padding: var(--padding);
  }

  .p-7-2xs {
    --padding: calc(var(--spacing) * 5);
    padding: var(--padding);
  }

  .p-8-2xs {
    --padding: calc(var(--spacing) * 6);
    padding: var(--padding);
  }

  .p-9-2xs {
    --padding: calc(var(--spacing) * 8);
    padding: var(--padding);
  }

  .p-10-2xs {
    --padding: calc(var(--spacing) * 10);
    padding: var(--padding);
  }

  .pl-0-2xs {
    padding-left: 0;
  }

  .pl-1-2xs {
    padding-left: calc(var(--spacing) * .5);
  }

  .pl-2-2xs {
    padding-left: calc(var(--spacing) * 1);
  }

  .pl-3-2xs {
    padding-left: calc(var(--spacing) * 1.5);
  }

  .pl-4-2xs {
    padding-left: calc(var(--spacing) * 2);
  }

  .pl-5-2xs {
    padding-left: calc(var(--spacing) * 3);
  }

  .pl-6-2xs {
    padding-left: calc(var(--spacing) * 4);
  }

  .pl-7-2xs {
    padding-left: calc(var(--spacing) * 5);
  }

  .pl-8-2xs {
    padding-left: calc(var(--spacing) * 6);
  }

  .pl-9-2xs {
    padding-left: calc(var(--spacing) * 8);
  }

  .pl-10-2xs {
    padding-left: calc(var(--spacing) * 10);
  }

  .pr-0-2xs {
    padding-right: 0;
  }

  .pr-1-2xs {
    padding-right: calc(var(--spacing) * .5);
  }

  .pr-2-2xs {
    padding-right: calc(var(--spacing) * 1);
  }

  .pr-3-2xs {
    padding-right: calc(var(--spacing) * 1.5);
  }

  .pr-4-2xs {
    padding-right: calc(var(--spacing) * 2);
  }

  .pr-5-2xs {
    padding-right: calc(var(--spacing) * 3);
  }

  .pr-6-2xs {
    padding-right: calc(var(--spacing) * 4);
  }

  .pr-7-2xs {
    padding-right: calc(var(--spacing) * 5);
  }

  .pr-8-2xs {
    padding-right: calc(var(--spacing) * 6);
  }

  .pr-9-2xs {
    padding-right: calc(var(--spacing) * 8);
  }

  .pr-10-2xs {
    padding-right: calc(var(--spacing) * 10);
  }

  .pb-0-2xs {
    padding-bottom: 0;
  }

  .pb-1-2xs {
    padding-bottom: calc(var(--spacing) * .5);
  }

  .pb-2-2xs {
    padding-bottom: calc(var(--spacing) * 1);
  }

  .pb-3-2xs {
    padding-bottom: calc(var(--spacing) * 1.5);
  }

  .pb-4-2xs {
    padding-bottom: calc(var(--spacing) * 2);
  }

  .pb-5-2xs {
    padding-bottom: calc(var(--spacing) * 3);
  }

  .pb-6-2xs {
    padding-bottom: calc(var(--spacing) * 4);
  }

  .pb-7-2xs {
    padding-bottom: calc(var(--spacing) * 5);
  }

  .pb-8-2xs {
    padding-bottom: calc(var(--spacing) * 6);
  }

  .pb-9-2xs {
    padding-bottom: calc(var(--spacing) * 8);
  }

  .pb-10-2xs {
    padding-bottom: calc(var(--spacing) * 10);
  }

  .pt-0-2xs {
    padding-top: 0;
  }

  .pt-1-2xs {
    padding-top: calc(var(--spacing) * .5);
  }

  .pt-2-2xs {
    padding-top: calc(var(--spacing) * 1);
  }

  .pt-3-2xs {
    padding-top: calc(var(--spacing) * 1.5);
  }

  .pt-4-2xs {
    padding-top: calc(var(--spacing) * 2);
  }

  .pt-5-2xs {
    padding-top: calc(var(--spacing) * 3);
  }

  .pt-6-2xs {
    padding-top: calc(var(--spacing) * 4);
  }

  .pt-7-2xs {
    padding-top: calc(var(--spacing) * 5);
  }

  .pt-8-2xs {
    padding-top: calc(var(--spacing) * 6);
  }

  .pt-9-2xs {
    padding-top: calc(var(--spacing) * 8);
  }

  .pt-10-2xs {
    padding-top: calc(var(--spacing) * 10);
  }

  .py-0-2xs {
    padding-top: 0;
    padding-bottom: 0;
  }

  .py-1-2xs {
    padding-top: calc(var(--spacing) * .5);
    padding-bottom: calc(var(--spacing) * .5);
  }

  .py-2-2xs {
    padding-top: calc(var(--spacing) * 1);
    padding-bottom: calc(var(--spacing) * 1);
  }

  .py-3-2xs {
    padding-top: calc(var(--spacing) * 1.5);
    padding-bottom: calc(var(--spacing) * 1.5);
  }

  .py-4-2xs {
    padding-top: calc(var(--spacing) * 2);
    padding-bottom: calc(var(--spacing) * 2);
  }

  .py-5-2xs {
    padding-top: calc(var(--spacing) * 3);
    padding-bottom: calc(var(--spacing) * 3);
  }

  .py-6-2xs {
    padding-top: calc(var(--spacing) * 4);
    padding-bottom: calc(var(--spacing) * 4);
  }

  .py-7-2xs {
    padding-top: calc(var(--spacing) * 5);
    padding-bottom: calc(var(--spacing) * 5);
  }

  .py-8-2xs {
    padding-top: calc(var(--spacing) * 6);
    padding-bottom: calc(var(--spacing) * 6);
  }

  .py-9-2xs {
    padding-top: calc(var(--spacing) * 8);
    padding-bottom: calc(var(--spacing) * 8);
  }

  .py-10-2xs {
    padding-top: calc(var(--spacing) * 10);
    padding-bottom: calc(var(--spacing) * 10);
  }

  .px-0-2xs {
    padding-left: 0;
    padding-right: 0;
  }

  .px-1-2xs {
    padding-left: calc(var(--spacing) * .5);
    padding-right: calc(var(--spacing) * .5);
  }

  .px-2-2xs {
    padding-left: calc(var(--spacing) * 1);
    padding-right: calc(var(--spacing) * 1);
  }

  .px-3-2xs {
    padding-left: calc(var(--spacing) * 1.5);
    padding-right: calc(var(--spacing) * 1.5);
  }

  .px-4-2xs {
    padding-left: calc(var(--spacing) * 2);
    padding-right: calc(var(--spacing) * 2);
  }

  .px-5-2xs {
    padding-left: calc(var(--spacing) * 3);
    padding-right: calc(var(--spacing) * 3);
  }

  .px-6-2xs {
    padding-left: calc(var(--spacing) * 4);
    padding-right: calc(var(--spacing) * 4);
  }

  .px-7-2xs {
    padding-left: calc(var(--spacing) * 5);
    padding-right: calc(var(--spacing) * 5);
  }

  .px-8-2xs {
    padding-left: calc(var(--spacing) * 6);
    padding-right: calc(var(--spacing) * 6);
  }

  .px-9-2xs {
    padding-left: calc(var(--spacing) * 8);
    padding-right: calc(var(--spacing) * 8);
  }

  .px-10-2xs {
    padding-left: calc(var(--spacing) * 10);
    padding-right: calc(var(--spacing) * 10);
  }

  .m-0-2xs {
    --margin: 0;
    margin: var(--margin);
  }

  .m-1-2xs {
    --margin: calc(var(--spacing) * .5);
    margin: var(--margin);
  }

  .m-2-2xs {
    --margin: calc(var(--spacing) * 1);
    margin: var(--margin);
  }

  .m-3-2xs {
    --margin: calc(var(--spacing) * 1.5);
    margin: var(--margin);
  }

  .m-4-2xs {
    --margin: calc(var(--spacing) * 2);
    margin: var(--margin);
  }

  .m-5-2xs {
    --margin: calc(var(--spacing) * 3);
    margin: var(--margin);
  }

  .m-6-2xs {
    --margin: calc(var(--spacing) * 4);
    margin: var(--margin);
  }

  .m-7-2xs {
    --margin: calc(var(--spacing) * 5);
    margin: var(--margin);
  }

  .m-8-2xs {
    --margin: calc(var(--spacing) * 6);
    margin: var(--margin);
  }

  .m-9-2xs {
    --margin: calc(var(--spacing) * 8);
    margin: var(--margin);
  }

  .m-10-2xs {
    --margin: calc(var(--spacing) * 10);
    margin: var(--margin);
  }

  .ml-0-2xs {
    margin-left: 0;
  }

  .ml-1-2xs {
    margin-left: calc(var(--spacing) * .5);
  }

  .ml-2-2xs {
    margin-left: calc(var(--spacing) * 1);
  }

  .ml-3-2xs {
    margin-left: calc(var(--spacing) * 1.5);
  }

  .ml-4-2xs {
    margin-left: calc(var(--spacing) * 2);
  }

  .ml-5-2xs {
    margin-left: calc(var(--spacing) * 3);
  }

  .ml-6-2xs {
    margin-left: calc(var(--spacing) * 4);
  }

  .ml-7-2xs {
    margin-left: calc(var(--spacing) * 5);
  }

  .ml-8-2xs {
    margin-left: calc(var(--spacing) * 6);
  }

  .ml-9-2xs {
    margin-left: calc(var(--spacing) * 8);
  }

  .ml-10-2xs {
    margin-left: calc(var(--spacing) * 10);
  }

  .mr-0-2xs {
    margin-right: 0;
  }

  .mr-1-2xs {
    margin-right: calc(var(--spacing) * .5);
  }

  .mr-2-2xs {
    margin-right: calc(var(--spacing) * 1);
  }

  .mr-3-2xs {
    margin-right: calc(var(--spacing) * 1.5);
  }

  .mr-4-2xs {
    margin-right: calc(var(--spacing) * 2);
  }

  .mr-5-2xs {
    margin-right: calc(var(--spacing) * 3);
  }

  .mr-6-2xs {
    margin-right: calc(var(--spacing) * 4);
  }

  .mr-7-2xs {
    margin-right: calc(var(--spacing) * 5);
  }

  .mr-8-2xs {
    margin-right: calc(var(--spacing) * 6);
  }

  .mr-9-2xs {
    margin-right: calc(var(--spacing) * 8);
  }

  .mr-10-2xs {
    margin-right: calc(var(--spacing) * 10);
  }

  .mb-0-2xs {
    margin-bottom: 0;
  }

  .mb-1-2xs {
    margin-bottom: calc(var(--spacing) * .5);
  }

  .mb-2-2xs {
    margin-bottom: calc(var(--spacing) * 1);
  }

  .mb-3-2xs {
    margin-bottom: calc(var(--spacing) * 1.5);
  }

  .mb-4-2xs {
    margin-bottom: calc(var(--spacing) * 2);
  }

  .mb-5-2xs {
    margin-bottom: calc(var(--spacing) * 3);
  }

  .mb-6-2xs {
    margin-bottom: calc(var(--spacing) * 4);
  }

  .mb-7-2xs {
    margin-bottom: calc(var(--spacing) * 5);
  }

  .mb-8-2xs {
    margin-bottom: calc(var(--spacing) * 6);
  }

  .mb-9-2xs {
    margin-bottom: calc(var(--spacing) * 8);
  }

  .mb-10-2xs {
    margin-bottom: calc(var(--spacing) * 10);
  }

  .mt-0-2xs {
    margin-top: 0;
  }

  .mt-1-2xs {
    margin-top: calc(var(--spacing) * .5);
  }

  .mt-2-2xs {
    margin-top: calc(var(--spacing) * 1);
  }

  .mt-3-2xs {
    margin-top: calc(var(--spacing) * 1.5);
  }

  .mt-4-2xs {
    margin-top: calc(var(--spacing) * 2);
  }

  .mt-5-2xs {
    margin-top: calc(var(--spacing) * 3);
  }

  .mt-6-2xs {
    margin-top: calc(var(--spacing) * 4);
  }

  .mt-7-2xs {
    margin-top: calc(var(--spacing) * 5);
  }

  .mt-8-2xs {
    margin-top: calc(var(--spacing) * 6);
  }

  .mt-9-2xs {
    margin-top: calc(var(--spacing) * 8);
  }

  .mt-10-2xs {
    margin-top: calc(var(--spacing) * 10);
  }

  .my-0-2xs {
    margin-top: 0;
    margin-bottom: 0;
  }

  .my-1-2xs {
    margin-top: calc(var(--spacing) * .5);
    margin-bottom: calc(var(--spacing) * .5);
  }

  .my-2-2xs {
    margin-top: calc(var(--spacing) * 1);
    margin-bottom: calc(var(--spacing) * 1);
  }

  .my-3-2xs {
    margin-top: calc(var(--spacing) * 1.5);
    margin-bottom: calc(var(--spacing) * 1.5);
  }

  .my-4-2xs {
    margin-top: calc(var(--spacing) * 2);
    margin-bottom: calc(var(--spacing) * 2);
  }

  .my-5-2xs {
    margin-top: calc(var(--spacing) * 3);
    margin-bottom: calc(var(--spacing) * 3);
  }

  .my-6-2xs {
    margin-top: calc(var(--spacing) * 4);
    margin-bottom: calc(var(--spacing) * 4);
  }

  .my-7-2xs {
    margin-top: calc(var(--spacing) * 5);
    margin-bottom: calc(var(--spacing) * 5);
  }

  .my-8-2xs {
    margin-top: calc(var(--spacing) * 6);
    margin-bottom: calc(var(--spacing) * 6);
  }

  .my-9-2xs {
    margin-top: calc(var(--spacing) * 8);
    margin-bottom: calc(var(--spacing) * 8);
  }

  .my-10-2xs {
    margin-top: calc(var(--spacing) * 10);
    margin-bottom: calc(var(--spacing) * 10);
  }

  .mx-0-2xs {
    margin-left: 0;
    margin-right: 0;
  }

  .mx-1-2xs {
    margin-left: calc(var(--spacing) * .5);
    margin-right: calc(var(--spacing) * .5);
  }

  .mx-2-2xs {
    margin-left: calc(var(--spacing) * 1);
    margin-right: calc(var(--spacing) * 1);
  }

  .mx-3-2xs {
    margin-left: calc(var(--spacing) * 1.5);
    margin-right: calc(var(--spacing) * 1.5);
  }

  .mx-4-2xs {
    margin-left: calc(var(--spacing) * 2);
    margin-right: calc(var(--spacing) * 2);
  }

  .mx-5-2xs {
    margin-left: calc(var(--spacing) * 3);
    margin-right: calc(var(--spacing) * 3);
  }

  .mx-6-2xs {
    margin-left: calc(var(--spacing) * 4);
    margin-right: calc(var(--spacing) * 4);
  }

  .mx-7-2xs {
    margin-left: calc(var(--spacing) * 5);
    margin-right: calc(var(--spacing) * 5);
  }

  .mx-8-2xs {
    margin-left: calc(var(--spacing) * 6);
    margin-right: calc(var(--spacing) * 6);
  }

  .mx-9-2xs {
    margin-left: calc(var(--spacing) * 8);
    margin-right: calc(var(--spacing) * 8);
  }

  .mx-10-2xs {
    margin-left: calc(var(--spacing) * 10);
    margin-right: calc(var(--spacing) * 10);
  }
}

@media (min-width: 20rem) {
  .p-0-xs {
    --padding: 0;
    padding: var(--padding);
  }

  .p-1-xs {
    --padding: calc(var(--spacing) * .5);
    padding: var(--padding);
  }

  .p-2-xs {
    --padding: calc(var(--spacing) * 1);
    padding: var(--padding);
  }

  .p-3-xs {
    --padding: calc(var(--spacing) * 1.5);
    padding: var(--padding);
  }

  .p-4-xs {
    --padding: calc(var(--spacing) * 2);
    padding: var(--padding);
  }

  .p-5-xs {
    --padding: calc(var(--spacing) * 3);
    padding: var(--padding);
  }

  .p-6-xs {
    --padding: calc(var(--spacing) * 4);
    padding: var(--padding);
  }

  .p-7-xs {
    --padding: calc(var(--spacing) * 5);
    padding: var(--padding);
  }

  .p-8-xs {
    --padding: calc(var(--spacing) * 6);
    padding: var(--padding);
  }

  .p-9-xs {
    --padding: calc(var(--spacing) * 8);
    padding: var(--padding);
  }

  .p-10-xs {
    --padding: calc(var(--spacing) * 10);
    padding: var(--padding);
  }

  .pl-0-xs {
    padding-left: 0;
  }

  .pl-1-xs {
    padding-left: calc(var(--spacing) * .5);
  }

  .pl-2-xs {
    padding-left: calc(var(--spacing) * 1);
  }

  .pl-3-xs {
    padding-left: calc(var(--spacing) * 1.5);
  }

  .pl-4-xs {
    padding-left: calc(var(--spacing) * 2);
  }

  .pl-5-xs {
    padding-left: calc(var(--spacing) * 3);
  }

  .pl-6-xs {
    padding-left: calc(var(--spacing) * 4);
  }

  .pl-7-xs {
    padding-left: calc(var(--spacing) * 5);
  }

  .pl-8-xs {
    padding-left: calc(var(--spacing) * 6);
  }

  .pl-9-xs {
    padding-left: calc(var(--spacing) * 8);
  }

  .pl-10-xs {
    padding-left: calc(var(--spacing) * 10);
  }

  .pr-0-xs {
    padding-right: 0;
  }

  .pr-1-xs {
    padding-right: calc(var(--spacing) * .5);
  }

  .pr-2-xs {
    padding-right: calc(var(--spacing) * 1);
  }

  .pr-3-xs {
    padding-right: calc(var(--spacing) * 1.5);
  }

  .pr-4-xs {
    padding-right: calc(var(--spacing) * 2);
  }

  .pr-5-xs {
    padding-right: calc(var(--spacing) * 3);
  }

  .pr-6-xs {
    padding-right: calc(var(--spacing) * 4);
  }

  .pr-7-xs {
    padding-right: calc(var(--spacing) * 5);
  }

  .pr-8-xs {
    padding-right: calc(var(--spacing) * 6);
  }

  .pr-9-xs {
    padding-right: calc(var(--spacing) * 8);
  }

  .pr-10-xs {
    padding-right: calc(var(--spacing) * 10);
  }

  .pb-0-xs {
    padding-bottom: 0;
  }

  .pb-1-xs {
    padding-bottom: calc(var(--spacing) * .5);
  }

  .pb-2-xs {
    padding-bottom: calc(var(--spacing) * 1);
  }

  .pb-3-xs {
    padding-bottom: calc(var(--spacing) * 1.5);
  }

  .pb-4-xs {
    padding-bottom: calc(var(--spacing) * 2);
  }

  .pb-5-xs {
    padding-bottom: calc(var(--spacing) * 3);
  }

  .pb-6-xs {
    padding-bottom: calc(var(--spacing) * 4);
  }

  .pb-7-xs {
    padding-bottom: calc(var(--spacing) * 5);
  }

  .pb-8-xs {
    padding-bottom: calc(var(--spacing) * 6);
  }

  .pb-9-xs {
    padding-bottom: calc(var(--spacing) * 8);
  }

  .pb-10-xs {
    padding-bottom: calc(var(--spacing) * 10);
  }

  .pt-0-xs {
    padding-top: 0;
  }

  .pt-1-xs {
    padding-top: calc(var(--spacing) * .5);
  }

  .pt-2-xs {
    padding-top: calc(var(--spacing) * 1);
  }

  .pt-3-xs {
    padding-top: calc(var(--spacing) * 1.5);
  }

  .pt-4-xs {
    padding-top: calc(var(--spacing) * 2);
  }

  .pt-5-xs {
    padding-top: calc(var(--spacing) * 3);
  }

  .pt-6-xs {
    padding-top: calc(var(--spacing) * 4);
  }

  .pt-7-xs {
    padding-top: calc(var(--spacing) * 5);
  }

  .pt-8-xs {
    padding-top: calc(var(--spacing) * 6);
  }

  .pt-9-xs {
    padding-top: calc(var(--spacing) * 8);
  }

  .pt-10-xs {
    padding-top: calc(var(--spacing) * 10);
  }

  .py-0-xs {
    padding-top: 0;
    padding-bottom: 0;
  }

  .py-1-xs {
    padding-top: calc(var(--spacing) * .5);
    padding-bottom: calc(var(--spacing) * .5);
  }

  .py-2-xs {
    padding-top: calc(var(--spacing) * 1);
    padding-bottom: calc(var(--spacing) * 1);
  }

  .py-3-xs {
    padding-top: calc(var(--spacing) * 1.5);
    padding-bottom: calc(var(--spacing) * 1.5);
  }

  .py-4-xs {
    padding-top: calc(var(--spacing) * 2);
    padding-bottom: calc(var(--spacing) * 2);
  }

  .py-5-xs {
    padding-top: calc(var(--spacing) * 3);
    padding-bottom: calc(var(--spacing) * 3);
  }

  .py-6-xs {
    padding-top: calc(var(--spacing) * 4);
    padding-bottom: calc(var(--spacing) * 4);
  }

  .py-7-xs {
    padding-top: calc(var(--spacing) * 5);
    padding-bottom: calc(var(--spacing) * 5);
  }

  .py-8-xs {
    padding-top: calc(var(--spacing) * 6);
    padding-bottom: calc(var(--spacing) * 6);
  }

  .py-9-xs {
    padding-top: calc(var(--spacing) * 8);
    padding-bottom: calc(var(--spacing) * 8);
  }

  .py-10-xs {
    padding-top: calc(var(--spacing) * 10);
    padding-bottom: calc(var(--spacing) * 10);
  }

  .px-0-xs {
    padding-left: 0;
    padding-right: 0;
  }

  .px-1-xs {
    padding-left: calc(var(--spacing) * .5);
    padding-right: calc(var(--spacing) * .5);
  }

  .px-2-xs {
    padding-left: calc(var(--spacing) * 1);
    padding-right: calc(var(--spacing) * 1);
  }

  .px-3-xs {
    padding-left: calc(var(--spacing) * 1.5);
    padding-right: calc(var(--spacing) * 1.5);
  }

  .px-4-xs {
    padding-left: calc(var(--spacing) * 2);
    padding-right: calc(var(--spacing) * 2);
  }

  .px-5-xs {
    padding-left: calc(var(--spacing) * 3);
    padding-right: calc(var(--spacing) * 3);
  }

  .px-6-xs {
    padding-left: calc(var(--spacing) * 4);
    padding-right: calc(var(--spacing) * 4);
  }

  .px-7-xs {
    padding-left: calc(var(--spacing) * 5);
    padding-right: calc(var(--spacing) * 5);
  }

  .px-8-xs {
    padding-left: calc(var(--spacing) * 6);
    padding-right: calc(var(--spacing) * 6);
  }

  .px-9-xs {
    padding-left: calc(var(--spacing) * 8);
    padding-right: calc(var(--spacing) * 8);
  }

  .px-10-xs {
    padding-left: calc(var(--spacing) * 10);
    padding-right: calc(var(--spacing) * 10);
  }

  .m-0-xs {
    --margin: 0;
    margin: var(--margin);
  }

  .m-1-xs {
    --margin: calc(var(--spacing) * .5);
    margin: var(--margin);
  }

  .m-2-xs {
    --margin: calc(var(--spacing) * 1);
    margin: var(--margin);
  }

  .m-3-xs {
    --margin: calc(var(--spacing) * 1.5);
    margin: var(--margin);
  }

  .m-4-xs {
    --margin: calc(var(--spacing) * 2);
    margin: var(--margin);
  }

  .m-5-xs {
    --margin: calc(var(--spacing) * 3);
    margin: var(--margin);
  }

  .m-6-xs {
    --margin: calc(var(--spacing) * 4);
    margin: var(--margin);
  }

  .m-7-xs {
    --margin: calc(var(--spacing) * 5);
    margin: var(--margin);
  }

  .m-8-xs {
    --margin: calc(var(--spacing) * 6);
    margin: var(--margin);
  }

  .m-9-xs {
    --margin: calc(var(--spacing) * 8);
    margin: var(--margin);
  }

  .m-10-xs {
    --margin: calc(var(--spacing) * 10);
    margin: var(--margin);
  }

  .ml-0-xs {
    margin-left: 0;
  }

  .ml-1-xs {
    margin-left: calc(var(--spacing) * .5);
  }

  .ml-2-xs {
    margin-left: calc(var(--spacing) * 1);
  }

  .ml-3-xs {
    margin-left: calc(var(--spacing) * 1.5);
  }

  .ml-4-xs {
    margin-left: calc(var(--spacing) * 2);
  }

  .ml-5-xs {
    margin-left: calc(var(--spacing) * 3);
  }

  .ml-6-xs {
    margin-left: calc(var(--spacing) * 4);
  }

  .ml-7-xs {
    margin-left: calc(var(--spacing) * 5);
  }

  .ml-8-xs {
    margin-left: calc(var(--spacing) * 6);
  }

  .ml-9-xs {
    margin-left: calc(var(--spacing) * 8);
  }

  .ml-10-xs {
    margin-left: calc(var(--spacing) * 10);
  }

  .mr-0-xs {
    margin-right: 0;
  }

  .mr-1-xs {
    margin-right: calc(var(--spacing) * .5);
  }

  .mr-2-xs {
    margin-right: calc(var(--spacing) * 1);
  }

  .mr-3-xs {
    margin-right: calc(var(--spacing) * 1.5);
  }

  .mr-4-xs {
    margin-right: calc(var(--spacing) * 2);
  }

  .mr-5-xs {
    margin-right: calc(var(--spacing) * 3);
  }

  .mr-6-xs {
    margin-right: calc(var(--spacing) * 4);
  }

  .mr-7-xs {
    margin-right: calc(var(--spacing) * 5);
  }

  .mr-8-xs {
    margin-right: calc(var(--spacing) * 6);
  }

  .mr-9-xs {
    margin-right: calc(var(--spacing) * 8);
  }

  .mr-10-xs {
    margin-right: calc(var(--spacing) * 10);
  }

  .mb-0-xs {
    margin-bottom: 0;
  }

  .mb-1-xs {
    margin-bottom: calc(var(--spacing) * .5);
  }

  .mb-2-xs {
    margin-bottom: calc(var(--spacing) * 1);
  }

  .mb-3-xs {
    margin-bottom: calc(var(--spacing) * 1.5);
  }

  .mb-4-xs {
    margin-bottom: calc(var(--spacing) * 2);
  }

  .mb-5-xs {
    margin-bottom: calc(var(--spacing) * 3);
  }

  .mb-6-xs {
    margin-bottom: calc(var(--spacing) * 4);
  }

  .mb-7-xs {
    margin-bottom: calc(var(--spacing) * 5);
  }

  .mb-8-xs {
    margin-bottom: calc(var(--spacing) * 6);
  }

  .mb-9-xs {
    margin-bottom: calc(var(--spacing) * 8);
  }

  .mb-10-xs {
    margin-bottom: calc(var(--spacing) * 10);
  }

  .mt-0-xs {
    margin-top: 0;
  }

  .mt-1-xs {
    margin-top: calc(var(--spacing) * .5);
  }

  .mt-2-xs {
    margin-top: calc(var(--spacing) * 1);
  }

  .mt-3-xs {
    margin-top: calc(var(--spacing) * 1.5);
  }

  .mt-4-xs {
    margin-top: calc(var(--spacing) * 2);
  }

  .mt-5-xs {
    margin-top: calc(var(--spacing) * 3);
  }

  .mt-6-xs {
    margin-top: calc(var(--spacing) * 4);
  }

  .mt-7-xs {
    margin-top: calc(var(--spacing) * 5);
  }

  .mt-8-xs {
    margin-top: calc(var(--spacing) * 6);
  }

  .mt-9-xs {
    margin-top: calc(var(--spacing) * 8);
  }

  .mt-10-xs {
    margin-top: calc(var(--spacing) * 10);
  }

  .my-0-xs {
    margin-top: 0;
    margin-bottom: 0;
  }

  .my-1-xs {
    margin-top: calc(var(--spacing) * .5);
    margin-bottom: calc(var(--spacing) * .5);
  }

  .my-2-xs {
    margin-top: calc(var(--spacing) * 1);
    margin-bottom: calc(var(--spacing) * 1);
  }

  .my-3-xs {
    margin-top: calc(var(--spacing) * 1.5);
    margin-bottom: calc(var(--spacing) * 1.5);
  }

  .my-4-xs {
    margin-top: calc(var(--spacing) * 2);
    margin-bottom: calc(var(--spacing) * 2);
  }

  .my-5-xs {
    margin-top: calc(var(--spacing) * 3);
    margin-bottom: calc(var(--spacing) * 3);
  }

  .my-6-xs {
    margin-top: calc(var(--spacing) * 4);
    margin-bottom: calc(var(--spacing) * 4);
  }

  .my-7-xs {
    margin-top: calc(var(--spacing) * 5);
    margin-bottom: calc(var(--spacing) * 5);
  }

  .my-8-xs {
    margin-top: calc(var(--spacing) * 6);
    margin-bottom: calc(var(--spacing) * 6);
  }

  .my-9-xs {
    margin-top: calc(var(--spacing) * 8);
    margin-bottom: calc(var(--spacing) * 8);
  }

  .my-10-xs {
    margin-top: calc(var(--spacing) * 10);
    margin-bottom: calc(var(--spacing) * 10);
  }

  .mx-0-xs {
    margin-left: 0;
    margin-right: 0;
  }

  .mx-1-xs {
    margin-left: calc(var(--spacing) * .5);
    margin-right: calc(var(--spacing) * .5);
  }

  .mx-2-xs {
    margin-left: calc(var(--spacing) * 1);
    margin-right: calc(var(--spacing) * 1);
  }

  .mx-3-xs {
    margin-left: calc(var(--spacing) * 1.5);
    margin-right: calc(var(--spacing) * 1.5);
  }

  .mx-4-xs {
    margin-left: calc(var(--spacing) * 2);
    margin-right: calc(var(--spacing) * 2);
  }

  .mx-5-xs {
    margin-left: calc(var(--spacing) * 3);
    margin-right: calc(var(--spacing) * 3);
  }

  .mx-6-xs {
    margin-left: calc(var(--spacing) * 4);
    margin-right: calc(var(--spacing) * 4);
  }

  .mx-7-xs {
    margin-left: calc(var(--spacing) * 5);
    margin-right: calc(var(--spacing) * 5);
  }

  .mx-8-xs {
    margin-left: calc(var(--spacing) * 6);
    margin-right: calc(var(--spacing) * 6);
  }

  .mx-9-xs {
    margin-left: calc(var(--spacing) * 8);
    margin-right: calc(var(--spacing) * 8);
  }

  .mx-10-xs {
    margin-left: calc(var(--spacing) * 10);
    margin-right: calc(var(--spacing) * 10);
  }
}

@media (min-width: 32rem) {
  .p-0-s {
    --padding: 0;
    padding: var(--padding);
  }

  .p-1-s {
    --padding: calc(var(--spacing) * .5);
    padding: var(--padding);
  }

  .p-2-s {
    --padding: calc(var(--spacing) * 1);
    padding: var(--padding);
  }

  .p-3-s {
    --padding: calc(var(--spacing) * 1.5);
    padding: var(--padding);
  }

  .p-4-s {
    --padding: calc(var(--spacing) * 2);
    padding: var(--padding);
  }

  .p-5-s {
    --padding: calc(var(--spacing) * 3);
    padding: var(--padding);
  }

  .p-6-s {
    --padding: calc(var(--spacing) * 4);
    padding: var(--padding);
  }

  .p-7-s {
    --padding: calc(var(--spacing) * 5);
    padding: var(--padding);
  }

  .p-8-s {
    --padding: calc(var(--spacing) * 6);
    padding: var(--padding);
  }

  .p-9-s {
    --padding: calc(var(--spacing) * 8);
    padding: var(--padding);
  }

  .p-10-s {
    --padding: calc(var(--spacing) * 10);
    padding: var(--padding);
  }

  .pl-0-s {
    padding-left: 0;
  }

  .pl-1-s {
    padding-left: calc(var(--spacing) * .5);
  }

  .pl-2-s {
    padding-left: calc(var(--spacing) * 1);
  }

  .pl-3-s {
    padding-left: calc(var(--spacing) * 1.5);
  }

  .pl-4-s {
    padding-left: calc(var(--spacing) * 2);
  }

  .pl-5-s {
    padding-left: calc(var(--spacing) * 3);
  }

  .pl-6-s {
    padding-left: calc(var(--spacing) * 4);
  }

  .pl-7-s {
    padding-left: calc(var(--spacing) * 5);
  }

  .pl-8-s {
    padding-left: calc(var(--spacing) * 6);
  }

  .pl-9-s {
    padding-left: calc(var(--spacing) * 8);
  }

  .pl-10-s {
    padding-left: calc(var(--spacing) * 10);
  }

  .pr-0-s {
    padding-right: 0;
  }

  .pr-1-s {
    padding-right: calc(var(--spacing) * .5);
  }

  .pr-2-s {
    padding-right: calc(var(--spacing) * 1);
  }

  .pr-3-s {
    padding-right: calc(var(--spacing) * 1.5);
  }

  .pr-4-s {
    padding-right: calc(var(--spacing) * 2);
  }

  .pr-5-s {
    padding-right: calc(var(--spacing) * 3);
  }

  .pr-6-s {
    padding-right: calc(var(--spacing) * 4);
  }

  .pr-7-s {
    padding-right: calc(var(--spacing) * 5);
  }

  .pr-8-s {
    padding-right: calc(var(--spacing) * 6);
  }

  .pr-9-s {
    padding-right: calc(var(--spacing) * 8);
  }

  .pr-10-s {
    padding-right: calc(var(--spacing) * 10);
  }

  .pb-0-s {
    padding-bottom: 0;
  }

  .pb-1-s {
    padding-bottom: calc(var(--spacing) * .5);
  }

  .pb-2-s {
    padding-bottom: calc(var(--spacing) * 1);
  }

  .pb-3-s {
    padding-bottom: calc(var(--spacing) * 1.5);
  }

  .pb-4-s {
    padding-bottom: calc(var(--spacing) * 2);
  }

  .pb-5-s {
    padding-bottom: calc(var(--spacing) * 3);
  }

  .pb-6-s {
    padding-bottom: calc(var(--spacing) * 4);
  }

  .pb-7-s {
    padding-bottom: calc(var(--spacing) * 5);
  }

  .pb-8-s {
    padding-bottom: calc(var(--spacing) * 6);
  }

  .pb-9-s {
    padding-bottom: calc(var(--spacing) * 8);
  }

  .pb-10-s {
    padding-bottom: calc(var(--spacing) * 10);
  }

  .pt-0-s {
    padding-top: 0;
  }

  .pt-1-s {
    padding-top: calc(var(--spacing) * .5);
  }

  .pt-2-s {
    padding-top: calc(var(--spacing) * 1);
  }

  .pt-3-s {
    padding-top: calc(var(--spacing) * 1.5);
  }

  .pt-4-s {
    padding-top: calc(var(--spacing) * 2);
  }

  .pt-5-s {
    padding-top: calc(var(--spacing) * 3);
  }

  .pt-6-s {
    padding-top: calc(var(--spacing) * 4);
  }

  .pt-7-s {
    padding-top: calc(var(--spacing) * 5);
  }

  .pt-8-s {
    padding-top: calc(var(--spacing) * 6);
  }

  .pt-9-s {
    padding-top: calc(var(--spacing) * 8);
  }

  .pt-10-s {
    padding-top: calc(var(--spacing) * 10);
  }

  .py-0-s {
    padding-top: 0;
    padding-bottom: 0;
  }

  .py-1-s {
    padding-top: calc(var(--spacing) * .5);
    padding-bottom: calc(var(--spacing) * .5);
  }

  .py-2-s {
    padding-top: calc(var(--spacing) * 1);
    padding-bottom: calc(var(--spacing) * 1);
  }

  .py-3-s {
    padding-top: calc(var(--spacing) * 1.5);
    padding-bottom: calc(var(--spacing) * 1.5);
  }

  .py-4-s {
    padding-top: calc(var(--spacing) * 2);
    padding-bottom: calc(var(--spacing) * 2);
  }

  .py-5-s {
    padding-top: calc(var(--spacing) * 3);
    padding-bottom: calc(var(--spacing) * 3);
  }

  .py-6-s {
    padding-top: calc(var(--spacing) * 4);
    padding-bottom: calc(var(--spacing) * 4);
  }

  .py-7-s {
    padding-top: calc(var(--spacing) * 5);
    padding-bottom: calc(var(--spacing) * 5);
  }

  .py-8-s {
    padding-top: calc(var(--spacing) * 6);
    padding-bottom: calc(var(--spacing) * 6);
  }

  .py-9-s {
    padding-top: calc(var(--spacing) * 8);
    padding-bottom: calc(var(--spacing) * 8);
  }

  .py-10-s {
    padding-top: calc(var(--spacing) * 10);
    padding-bottom: calc(var(--spacing) * 10);
  }

  .px-0-s {
    padding-left: 0;
    padding-right: 0;
  }

  .px-1-s {
    padding-left: calc(var(--spacing) * .5);
    padding-right: calc(var(--spacing) * .5);
  }

  .px-2-s {
    padding-left: calc(var(--spacing) * 1);
    padding-right: calc(var(--spacing) * 1);
  }

  .px-3-s {
    padding-left: calc(var(--spacing) * 1.5);
    padding-right: calc(var(--spacing) * 1.5);
  }

  .px-4-s {
    padding-left: calc(var(--spacing) * 2);
    padding-right: calc(var(--spacing) * 2);
  }

  .px-5-s {
    padding-left: calc(var(--spacing) * 3);
    padding-right: calc(var(--spacing) * 3);
  }

  .px-6-s {
    padding-left: calc(var(--spacing) * 4);
    padding-right: calc(var(--spacing) * 4);
  }

  .px-7-s {
    padding-left: calc(var(--spacing) * 5);
    padding-right: calc(var(--spacing) * 5);
  }

  .px-8-s {
    padding-left: calc(var(--spacing) * 6);
    padding-right: calc(var(--spacing) * 6);
  }

  .px-9-s {
    padding-left: calc(var(--spacing) * 8);
    padding-right: calc(var(--spacing) * 8);
  }

  .px-10-s {
    padding-left: calc(var(--spacing) * 10);
    padding-right: calc(var(--spacing) * 10);
  }

  .m-0-s {
    --margin: 0;
    margin: var(--margin);
  }

  .m-1-s {
    --margin: calc(var(--spacing) * .5);
    margin: var(--margin);
  }

  .m-2-s {
    --margin: calc(var(--spacing) * 1);
    margin: var(--margin);
  }

  .m-3-s {
    --margin: calc(var(--spacing) * 1.5);
    margin: var(--margin);
  }

  .m-4-s {
    --margin: calc(var(--spacing) * 2);
    margin: var(--margin);
  }

  .m-5-s {
    --margin: calc(var(--spacing) * 3);
    margin: var(--margin);
  }

  .m-6-s {
    --margin: calc(var(--spacing) * 4);
    margin: var(--margin);
  }

  .m-7-s {
    --margin: calc(var(--spacing) * 5);
    margin: var(--margin);
  }

  .m-8-s {
    --margin: calc(var(--spacing) * 6);
    margin: var(--margin);
  }

  .m-9-s {
    --margin: calc(var(--spacing) * 8);
    margin: var(--margin);
  }

  .m-10-s {
    --margin: calc(var(--spacing) * 10);
    margin: var(--margin);
  }

  .ml-0-s {
    margin-left: 0;
  }

  .ml-1-s {
    margin-left: calc(var(--spacing) * .5);
  }

  .ml-2-s {
    margin-left: calc(var(--spacing) * 1);
  }

  .ml-3-s {
    margin-left: calc(var(--spacing) * 1.5);
  }

  .ml-4-s {
    margin-left: calc(var(--spacing) * 2);
  }

  .ml-5-s {
    margin-left: calc(var(--spacing) * 3);
  }

  .ml-6-s {
    margin-left: calc(var(--spacing) * 4);
  }

  .ml-7-s {
    margin-left: calc(var(--spacing) * 5);
  }

  .ml-8-s {
    margin-left: calc(var(--spacing) * 6);
  }

  .ml-9-s {
    margin-left: calc(var(--spacing) * 8);
  }

  .ml-10-s {
    margin-left: calc(var(--spacing) * 10);
  }

  .mr-0-s {
    margin-right: 0;
  }

  .mr-1-s {
    margin-right: calc(var(--spacing) * .5);
  }

  .mr-2-s {
    margin-right: calc(var(--spacing) * 1);
  }

  .mr-3-s {
    margin-right: calc(var(--spacing) * 1.5);
  }

  .mr-4-s {
    margin-right: calc(var(--spacing) * 2);
  }

  .mr-5-s {
    margin-right: calc(var(--spacing) * 3);
  }

  .mr-6-s {
    margin-right: calc(var(--spacing) * 4);
  }

  .mr-7-s {
    margin-right: calc(var(--spacing) * 5);
  }

  .mr-8-s {
    margin-right: calc(var(--spacing) * 6);
  }

  .mr-9-s {
    margin-right: calc(var(--spacing) * 8);
  }

  .mr-10-s {
    margin-right: calc(var(--spacing) * 10);
  }

  .mb-0-s {
    margin-bottom: 0;
  }

  .mb-1-s {
    margin-bottom: calc(var(--spacing) * .5);
  }

  .mb-2-s {
    margin-bottom: calc(var(--spacing) * 1);
  }

  .mb-3-s {
    margin-bottom: calc(var(--spacing) * 1.5);
  }

  .mb-4-s {
    margin-bottom: calc(var(--spacing) * 2);
  }

  .mb-5-s {
    margin-bottom: calc(var(--spacing) * 3);
  }

  .mb-6-s {
    margin-bottom: calc(var(--spacing) * 4);
  }

  .mb-7-s {
    margin-bottom: calc(var(--spacing) * 5);
  }

  .mb-8-s {
    margin-bottom: calc(var(--spacing) * 6);
  }

  .mb-9-s {
    margin-bottom: calc(var(--spacing) * 8);
  }

  .mb-10-s {
    margin-bottom: calc(var(--spacing) * 10);
  }

  .mt-0-s {
    margin-top: 0;
  }

  .mt-1-s {
    margin-top: calc(var(--spacing) * .5);
  }

  .mt-2-s {
    margin-top: calc(var(--spacing) * 1);
  }

  .mt-3-s {
    margin-top: calc(var(--spacing) * 1.5);
  }

  .mt-4-s {
    margin-top: calc(var(--spacing) * 2);
  }

  .mt-5-s {
    margin-top: calc(var(--spacing) * 3);
  }

  .mt-6-s {
    margin-top: calc(var(--spacing) * 4);
  }

  .mt-7-s {
    margin-top: calc(var(--spacing) * 5);
  }

  .mt-8-s {
    margin-top: calc(var(--spacing) * 6);
  }

  .mt-9-s {
    margin-top: calc(var(--spacing) * 8);
  }

  .mt-10-s {
    margin-top: calc(var(--spacing) * 10);
  }

  .my-0-s {
    margin-top: 0;
    margin-bottom: 0;
  }

  .my-1-s {
    margin-top: calc(var(--spacing) * .5);
    margin-bottom: calc(var(--spacing) * .5);
  }

  .my-2-s {
    margin-top: calc(var(--spacing) * 1);
    margin-bottom: calc(var(--spacing) * 1);
  }

  .my-3-s {
    margin-top: calc(var(--spacing) * 1.5);
    margin-bottom: calc(var(--spacing) * 1.5);
  }

  .my-4-s {
    margin-top: calc(var(--spacing) * 2);
    margin-bottom: calc(var(--spacing) * 2);
  }

  .my-5-s {
    margin-top: calc(var(--spacing) * 3);
    margin-bottom: calc(var(--spacing) * 3);
  }

  .my-6-s {
    margin-top: calc(var(--spacing) * 4);
    margin-bottom: calc(var(--spacing) * 4);
  }

  .my-7-s {
    margin-top: calc(var(--spacing) * 5);
    margin-bottom: calc(var(--spacing) * 5);
  }

  .my-8-s {
    margin-top: calc(var(--spacing) * 6);
    margin-bottom: calc(var(--spacing) * 6);
  }

  .my-9-s {
    margin-top: calc(var(--spacing) * 8);
    margin-bottom: calc(var(--spacing) * 8);
  }

  .my-10-s {
    margin-top: calc(var(--spacing) * 10);
    margin-bottom: calc(var(--spacing) * 10);
  }

  .mx-0-s {
    margin-left: 0;
    margin-right: 0;
  }

  .mx-1-s {
    margin-left: calc(var(--spacing) * .5);
    margin-right: calc(var(--spacing) * .5);
  }

  .mx-2-s {
    margin-left: calc(var(--spacing) * 1);
    margin-right: calc(var(--spacing) * 1);
  }

  .mx-3-s {
    margin-left: calc(var(--spacing) * 1.5);
    margin-right: calc(var(--spacing) * 1.5);
  }

  .mx-4-s {
    margin-left: calc(var(--spacing) * 2);
    margin-right: calc(var(--spacing) * 2);
  }

  .mx-5-s {
    margin-left: calc(var(--spacing) * 3);
    margin-right: calc(var(--spacing) * 3);
  }

  .mx-6-s {
    margin-left: calc(var(--spacing) * 4);
    margin-right: calc(var(--spacing) * 4);
  }

  .mx-7-s {
    margin-left: calc(var(--spacing) * 5);
    margin-right: calc(var(--spacing) * 5);
  }

  .mx-8-s {
    margin-left: calc(var(--spacing) * 6);
    margin-right: calc(var(--spacing) * 6);
  }

  .mx-9-s {
    margin-left: calc(var(--spacing) * 8);
    margin-right: calc(var(--spacing) * 8);
  }

  .mx-10-s {
    margin-left: calc(var(--spacing) * 10);
    margin-right: calc(var(--spacing) * 10);
  }
}

@media (min-width: 48rem) {
  .p-0-m {
    --padding: 0;
    padding: var(--padding);
  }

  .p-1-m {
    --padding: calc(var(--spacing) * .5);
    padding: var(--padding);
  }

  .p-2-m {
    --padding: calc(var(--spacing) * 1);
    padding: var(--padding);
  }

  .p-3-m {
    --padding: calc(var(--spacing) * 1.5);
    padding: var(--padding);
  }

  .p-4-m {
    --padding: calc(var(--spacing) * 2);
    padding: var(--padding);
  }

  .p-5-m {
    --padding: calc(var(--spacing) * 3);
    padding: var(--padding);
  }

  .p-6-m {
    --padding: calc(var(--spacing) * 4);
    padding: var(--padding);
  }

  .p-7-m {
    --padding: calc(var(--spacing) * 5);
    padding: var(--padding);
  }

  .p-8-m {
    --padding: calc(var(--spacing) * 6);
    padding: var(--padding);
  }

  .p-9-m {
    --padding: calc(var(--spacing) * 8);
    padding: var(--padding);
  }

  .p-10-m {
    --padding: calc(var(--spacing) * 10);
    padding: var(--padding);
  }

  .pl-0-m {
    padding-left: 0;
  }

  .pl-1-m {
    padding-left: calc(var(--spacing) * .5);
  }

  .pl-2-m {
    padding-left: calc(var(--spacing) * 1);
  }

  .pl-3-m {
    padding-left: calc(var(--spacing) * 1.5);
  }

  .pl-4-m {
    padding-left: calc(var(--spacing) * 2);
  }

  .pl-5-m {
    padding-left: calc(var(--spacing) * 3);
  }

  .pl-6-m {
    padding-left: calc(var(--spacing) * 4);
  }

  .pl-7-m {
    padding-left: calc(var(--spacing) * 5);
  }

  .pl-8-m {
    padding-left: calc(var(--spacing) * 6);
  }

  .pl-9-m {
    padding-left: calc(var(--spacing) * 8);
  }

  .pl-10-m {
    padding-left: calc(var(--spacing) * 10);
  }

  .pr-0-m {
    padding-right: 0;
  }

  .pr-1-m {
    padding-right: calc(var(--spacing) * .5);
  }

  .pr-2-m {
    padding-right: calc(var(--spacing) * 1);
  }

  .pr-3-m {
    padding-right: calc(var(--spacing) * 1.5);
  }

  .pr-4-m {
    padding-right: calc(var(--spacing) * 2);
  }

  .pr-5-m {
    padding-right: calc(var(--spacing) * 3);
  }

  .pr-6-m {
    padding-right: calc(var(--spacing) * 4);
  }

  .pr-7-m {
    padding-right: calc(var(--spacing) * 5);
  }

  .pr-8-m {
    padding-right: calc(var(--spacing) * 6);
  }

  .pr-9-m {
    padding-right: calc(var(--spacing) * 8);
  }

  .pr-10-m {
    padding-right: calc(var(--spacing) * 10);
  }

  .pb-0-m {
    padding-bottom: 0;
  }

  .pb-1-m {
    padding-bottom: calc(var(--spacing) * .5);
  }

  .pb-2-m {
    padding-bottom: calc(var(--spacing) * 1);
  }

  .pb-3-m {
    padding-bottom: calc(var(--spacing) * 1.5);
  }

  .pb-4-m {
    padding-bottom: calc(var(--spacing) * 2);
  }

  .pb-5-m {
    padding-bottom: calc(var(--spacing) * 3);
  }

  .pb-6-m {
    padding-bottom: calc(var(--spacing) * 4);
  }

  .pb-7-m {
    padding-bottom: calc(var(--spacing) * 5);
  }

  .pb-8-m {
    padding-bottom: calc(var(--spacing) * 6);
  }

  .pb-9-m {
    padding-bottom: calc(var(--spacing) * 8);
  }

  .pb-10-m {
    padding-bottom: calc(var(--spacing) * 10);
  }

  .pt-0-m {
    padding-top: 0;
  }

  .pt-1-m {
    padding-top: calc(var(--spacing) * .5);
  }

  .pt-2-m {
    padding-top: calc(var(--spacing) * 1);
  }

  .pt-3-m {
    padding-top: calc(var(--spacing) * 1.5);
  }

  .pt-4-m {
    padding-top: calc(var(--spacing) * 2);
  }

  .pt-5-m {
    padding-top: calc(var(--spacing) * 3);
  }

  .pt-6-m {
    padding-top: calc(var(--spacing) * 4);
  }

  .pt-7-m {
    padding-top: calc(var(--spacing) * 5);
  }

  .pt-8-m {
    padding-top: calc(var(--spacing) * 6);
  }

  .pt-9-m {
    padding-top: calc(var(--spacing) * 8);
  }

  .pt-10-m {
    padding-top: calc(var(--spacing) * 10);
  }

  .py-0-m {
    padding-top: 0;
    padding-bottom: 0;
  }

  .py-1-m {
    padding-top: calc(var(--spacing) * .5);
    padding-bottom: calc(var(--spacing) * .5);
  }

  .py-2-m {
    padding-top: calc(var(--spacing) * 1);
    padding-bottom: calc(var(--spacing) * 1);
  }

  .py-3-m {
    padding-top: calc(var(--spacing) * 1.5);
    padding-bottom: calc(var(--spacing) * 1.5);
  }

  .py-4-m {
    padding-top: calc(var(--spacing) * 2);
    padding-bottom: calc(var(--spacing) * 2);
  }

  .py-5-m {
    padding-top: calc(var(--spacing) * 3);
    padding-bottom: calc(var(--spacing) * 3);
  }

  .py-6-m {
    padding-top: calc(var(--spacing) * 4);
    padding-bottom: calc(var(--spacing) * 4);
  }

  .py-7-m {
    padding-top: calc(var(--spacing) * 5);
    padding-bottom: calc(var(--spacing) * 5);
  }

  .py-8-m {
    padding-top: calc(var(--spacing) * 6);
    padding-bottom: calc(var(--spacing) * 6);
  }

  .py-9-m {
    padding-top: calc(var(--spacing) * 8);
    padding-bottom: calc(var(--spacing) * 8);
  }

  .py-10-m {
    padding-top: calc(var(--spacing) * 10);
    padding-bottom: calc(var(--spacing) * 10);
  }

  .px-0-m {
    padding-left: 0;
    padding-right: 0;
  }

  .px-1-m {
    padding-left: calc(var(--spacing) * .5);
    padding-right: calc(var(--spacing) * .5);
  }

  .px-2-m {
    padding-left: calc(var(--spacing) * 1);
    padding-right: calc(var(--spacing) * 1);
  }

  .px-3-m {
    padding-left: calc(var(--spacing) * 1.5);
    padding-right: calc(var(--spacing) * 1.5);
  }

  .px-4-m {
    padding-left: calc(var(--spacing) * 2);
    padding-right: calc(var(--spacing) * 2);
  }

  .px-5-m {
    padding-left: calc(var(--spacing) * 3);
    padding-right: calc(var(--spacing) * 3);
  }

  .px-6-m {
    padding-left: calc(var(--spacing) * 4);
    padding-right: calc(var(--spacing) * 4);
  }

  .px-7-m {
    padding-left: calc(var(--spacing) * 5);
    padding-right: calc(var(--spacing) * 5);
  }

  .px-8-m {
    padding-left: calc(var(--spacing) * 6);
    padding-right: calc(var(--spacing) * 6);
  }

  .px-9-m {
    padding-left: calc(var(--spacing) * 8);
    padding-right: calc(var(--spacing) * 8);
  }

  .px-10-m {
    padding-left: calc(var(--spacing) * 10);
    padding-right: calc(var(--spacing) * 10);
  }

  .m-0-m {
    --margin: 0;
    margin: var(--margin);
  }

  .m-1-m {
    --margin: calc(var(--spacing) * .5);
    margin: var(--margin);
  }

  .m-2-m {
    --margin: calc(var(--spacing) * 1);
    margin: var(--margin);
  }

  .m-3-m {
    --margin: calc(var(--spacing) * 1.5);
    margin: var(--margin);
  }

  .m-4-m {
    --margin: calc(var(--spacing) * 2);
    margin: var(--margin);
  }

  .m-5-m {
    --margin: calc(var(--spacing) * 3);
    margin: var(--margin);
  }

  .m-6-m {
    --margin: calc(var(--spacing) * 4);
    margin: var(--margin);
  }

  .m-7-m {
    --margin: calc(var(--spacing) * 5);
    margin: var(--margin);
  }

  .m-8-m {
    --margin: calc(var(--spacing) * 6);
    margin: var(--margin);
  }

  .m-9-m {
    --margin: calc(var(--spacing) * 8);
    margin: var(--margin);
  }

  .m-10-m {
    --margin: calc(var(--spacing) * 10);
    margin: var(--margin);
  }

  .ml-0-m {
    margin-left: 0;
  }

  .ml-1-m {
    margin-left: calc(var(--spacing) * .5);
  }

  .ml-2-m {
    margin-left: calc(var(--spacing) * 1);
  }

  .ml-3-m {
    margin-left: calc(var(--spacing) * 1.5);
  }

  .ml-4-m {
    margin-left: calc(var(--spacing) * 2);
  }

  .ml-5-m {
    margin-left: calc(var(--spacing) * 3);
  }

  .ml-6-m {
    margin-left: calc(var(--spacing) * 4);
  }

  .ml-7-m {
    margin-left: calc(var(--spacing) * 5);
  }

  .ml-8-m {
    margin-left: calc(var(--spacing) * 6);
  }

  .ml-9-m {
    margin-left: calc(var(--spacing) * 8);
  }

  .ml-10-m {
    margin-left: calc(var(--spacing) * 10);
  }

  .mr-0-m {
    margin-right: 0;
  }

  .mr-1-m {
    margin-right: calc(var(--spacing) * .5);
  }

  .mr-2-m {
    margin-right: calc(var(--spacing) * 1);
  }

  .mr-3-m {
    margin-right: calc(var(--spacing) * 1.5);
  }

  .mr-4-m {
    margin-right: calc(var(--spacing) * 2);
  }

  .mr-5-m {
    margin-right: calc(var(--spacing) * 3);
  }

  .mr-6-m {
    margin-right: calc(var(--spacing) * 4);
  }

  .mr-7-m {
    margin-right: calc(var(--spacing) * 5);
  }

  .mr-8-m {
    margin-right: calc(var(--spacing) * 6);
  }

  .mr-9-m {
    margin-right: calc(var(--spacing) * 8);
  }

  .mr-10-m {
    margin-right: calc(var(--spacing) * 10);
  }

  .mb-0-m {
    margin-bottom: 0;
  }

  .mb-1-m {
    margin-bottom: calc(var(--spacing) * .5);
  }

  .mb-2-m {
    margin-bottom: calc(var(--spacing) * 1);
  }

  .mb-3-m {
    margin-bottom: calc(var(--spacing) * 1.5);
  }

  .mb-4-m {
    margin-bottom: calc(var(--spacing) * 2);
  }

  .mb-5-m {
    margin-bottom: calc(var(--spacing) * 3);
  }

  .mb-6-m {
    margin-bottom: calc(var(--spacing) * 4);
  }

  .mb-7-m {
    margin-bottom: calc(var(--spacing) * 5);
  }

  .mb-8-m {
    margin-bottom: calc(var(--spacing) * 6);
  }

  .mb-9-m {
    margin-bottom: calc(var(--spacing) * 8);
  }

  .mb-10-m {
    margin-bottom: calc(var(--spacing) * 10);
  }

  .mt-0-m {
    margin-top: 0;
  }

  .mt-1-m {
    margin-top: calc(var(--spacing) * .5);
  }

  .mt-2-m {
    margin-top: calc(var(--spacing) * 1);
  }

  .mt-3-m {
    margin-top: calc(var(--spacing) * 1.5);
  }

  .mt-4-m {
    margin-top: calc(var(--spacing) * 2);
  }

  .mt-5-m {
    margin-top: calc(var(--spacing) * 3);
  }

  .mt-6-m {
    margin-top: calc(var(--spacing) * 4);
  }

  .mt-7-m {
    margin-top: calc(var(--spacing) * 5);
  }

  .mt-8-m {
    margin-top: calc(var(--spacing) * 6);
  }

  .mt-9-m {
    margin-top: calc(var(--spacing) * 8);
  }

  .mt-10-m {
    margin-top: calc(var(--spacing) * 10);
  }

  .my-0-m {
    margin-top: 0;
    margin-bottom: 0;
  }

  .my-1-m {
    margin-top: calc(var(--spacing) * .5);
    margin-bottom: calc(var(--spacing) * .5);
  }

  .my-2-m {
    margin-top: calc(var(--spacing) * 1);
    margin-bottom: calc(var(--spacing) * 1);
  }

  .my-3-m {
    margin-top: calc(var(--spacing) * 1.5);
    margin-bottom: calc(var(--spacing) * 1.5);
  }

  .my-4-m {
    margin-top: calc(var(--spacing) * 2);
    margin-bottom: calc(var(--spacing) * 2);
  }

  .my-5-m {
    margin-top: calc(var(--spacing) * 3);
    margin-bottom: calc(var(--spacing) * 3);
  }

  .my-6-m {
    margin-top: calc(var(--spacing) * 4);
    margin-bottom: calc(var(--spacing) * 4);
  }

  .my-7-m {
    margin-top: calc(var(--spacing) * 5);
    margin-bottom: calc(var(--spacing) * 5);
  }

  .my-8-m {
    margin-top: calc(var(--spacing) * 6);
    margin-bottom: calc(var(--spacing) * 6);
  }

  .my-9-m {
    margin-top: calc(var(--spacing) * 8);
    margin-bottom: calc(var(--spacing) * 8);
  }

  .my-10-m {
    margin-top: calc(var(--spacing) * 10);
    margin-bottom: calc(var(--spacing) * 10);
  }

  .mx-0-m {
    margin-left: 0;
    margin-right: 0;
  }

  .mx-1-m {
    margin-left: calc(var(--spacing) * .5);
    margin-right: calc(var(--spacing) * .5);
  }

  .mx-2-m {
    margin-left: calc(var(--spacing) * 1);
    margin-right: calc(var(--spacing) * 1);
  }

  .mx-3-m {
    margin-left: calc(var(--spacing) * 1.5);
    margin-right: calc(var(--spacing) * 1.5);
  }

  .mx-4-m {
    margin-left: calc(var(--spacing) * 2);
    margin-right: calc(var(--spacing) * 2);
  }

  .mx-5-m {
    margin-left: calc(var(--spacing) * 3);
    margin-right: calc(var(--spacing) * 3);
  }

  .mx-6-m {
    margin-left: calc(var(--spacing) * 4);
    margin-right: calc(var(--spacing) * 4);
  }

  .mx-7-m {
    margin-left: calc(var(--spacing) * 5);
    margin-right: calc(var(--spacing) * 5);
  }

  .mx-8-m {
    margin-left: calc(var(--spacing) * 6);
    margin-right: calc(var(--spacing) * 6);
  }

  .mx-9-m {
    margin-left: calc(var(--spacing) * 8);
    margin-right: calc(var(--spacing) * 8);
  }

  .mx-10-m {
    margin-left: calc(var(--spacing) * 10);
    margin-right: calc(var(--spacing) * 10);
  }
}

@media (min-width: 64rem) {
  .p-0-l {
    --padding: 0;
    padding: var(--padding);
  }

  .p-1-l {
    --padding: calc(var(--spacing) * .5);
    padding: var(--padding);
  }

  .p-2-l {
    --padding: calc(var(--spacing) * 1);
    padding: var(--padding);
  }

  .p-3-l {
    --padding: calc(var(--spacing) * 1.5);
    padding: var(--padding);
  }

  .p-4-l {
    --padding: calc(var(--spacing) * 2);
    padding: var(--padding);
  }

  .p-5-l {
    --padding: calc(var(--spacing) * 3);
    padding: var(--padding);
  }

  .p-6-l {
    --padding: calc(var(--spacing) * 4);
    padding: var(--padding);
  }

  .p-7-l {
    --padding: calc(var(--spacing) * 5);
    padding: var(--padding);
  }

  .p-8-l {
    --padding: calc(var(--spacing) * 6);
    padding: var(--padding);
  }

  .p-9-l {
    --padding: calc(var(--spacing) * 8);
    padding: var(--padding);
  }

  .p-10-l {
    --padding: calc(var(--spacing) * 10);
    padding: var(--padding);
  }

  .pl-0-l {
    padding-left: 0;
  }

  .pl-1-l {
    padding-left: calc(var(--spacing) * .5);
  }

  .pl-2-l {
    padding-left: calc(var(--spacing) * 1);
  }

  .pl-3-l {
    padding-left: calc(var(--spacing) * 1.5);
  }

  .pl-4-l {
    padding-left: calc(var(--spacing) * 2);
  }

  .pl-5-l {
    padding-left: calc(var(--spacing) * 3);
  }

  .pl-6-l {
    padding-left: calc(var(--spacing) * 4);
  }

  .pl-7-l {
    padding-left: calc(var(--spacing) * 5);
  }

  .pl-8-l {
    padding-left: calc(var(--spacing) * 6);
  }

  .pl-9-l {
    padding-left: calc(var(--spacing) * 8);
  }

  .pl-10-l {
    padding-left: calc(var(--spacing) * 10);
  }

  .pr-0-l {
    padding-right: 0;
  }

  .pr-1-l {
    padding-right: calc(var(--spacing) * .5);
  }

  .pr-2-l {
    padding-right: calc(var(--spacing) * 1);
  }

  .pr-3-l {
    padding-right: calc(var(--spacing) * 1.5);
  }

  .pr-4-l {
    padding-right: calc(var(--spacing) * 2);
  }

  .pr-5-l {
    padding-right: calc(var(--spacing) * 3);
  }

  .pr-6-l {
    padding-right: calc(var(--spacing) * 4);
  }

  .pr-7-l {
    padding-right: calc(var(--spacing) * 5);
  }

  .pr-8-l {
    padding-right: calc(var(--spacing) * 6);
  }

  .pr-9-l {
    padding-right: calc(var(--spacing) * 8);
  }

  .pr-10-l {
    padding-right: calc(var(--spacing) * 10);
  }

  .pb-0-l {
    padding-bottom: 0;
  }

  .pb-1-l {
    padding-bottom: calc(var(--spacing) * .5);
  }

  .pb-2-l {
    padding-bottom: calc(var(--spacing) * 1);
  }

  .pb-3-l {
    padding-bottom: calc(var(--spacing) * 1.5);
  }

  .pb-4-l {
    padding-bottom: calc(var(--spacing) * 2);
  }

  .pb-5-l {
    padding-bottom: calc(var(--spacing) * 3);
  }

  .pb-6-l {
    padding-bottom: calc(var(--spacing) * 4);
  }

  .pb-7-l {
    padding-bottom: calc(var(--spacing) * 5);
  }

  .pb-8-l {
    padding-bottom: calc(var(--spacing) * 6);
  }

  .pb-9-l {
    padding-bottom: calc(var(--spacing) * 8);
  }

  .pb-10-l {
    padding-bottom: calc(var(--spacing) * 10);
  }

  .pt-0-l {
    padding-top: 0;
  }

  .pt-1-l {
    padding-top: calc(var(--spacing) * .5);
  }

  .pt-2-l {
    padding-top: calc(var(--spacing) * 1);
  }

  .pt-3-l {
    padding-top: calc(var(--spacing) * 1.5);
  }

  .pt-4-l {
    padding-top: calc(var(--spacing) * 2);
  }

  .pt-5-l {
    padding-top: calc(var(--spacing) * 3);
  }

  .pt-6-l {
    padding-top: calc(var(--spacing) * 4);
  }

  .pt-7-l {
    padding-top: calc(var(--spacing) * 5);
  }

  .pt-8-l {
    padding-top: calc(var(--spacing) * 6);
  }

  .pt-9-l {
    padding-top: calc(var(--spacing) * 8);
  }

  .pt-10-l {
    padding-top: calc(var(--spacing) * 10);
  }

  .py-0-l {
    padding-top: 0;
    padding-bottom: 0;
  }

  .py-1-l {
    padding-top: calc(var(--spacing) * .5);
    padding-bottom: calc(var(--spacing) * .5);
  }

  .py-2-l {
    padding-top: calc(var(--spacing) * 1);
    padding-bottom: calc(var(--spacing) * 1);
  }

  .py-3-l {
    padding-top: calc(var(--spacing) * 1.5);
    padding-bottom: calc(var(--spacing) * 1.5);
  }

  .py-4-l {
    padding-top: calc(var(--spacing) * 2);
    padding-bottom: calc(var(--spacing) * 2);
  }

  .py-5-l {
    padding-top: calc(var(--spacing) * 3);
    padding-bottom: calc(var(--spacing) * 3);
  }

  .py-6-l {
    padding-top: calc(var(--spacing) * 4);
    padding-bottom: calc(var(--spacing) * 4);
  }

  .py-7-l {
    padding-top: calc(var(--spacing) * 5);
    padding-bottom: calc(var(--spacing) * 5);
  }

  .py-8-l {
    padding-top: calc(var(--spacing) * 6);
    padding-bottom: calc(var(--spacing) * 6);
  }

  .py-9-l {
    padding-top: calc(var(--spacing) * 8);
    padding-bottom: calc(var(--spacing) * 8);
  }

  .py-10-l {
    padding-top: calc(var(--spacing) * 10);
    padding-bottom: calc(var(--spacing) * 10);
  }

  .px-0-l {
    padding-left: 0;
    padding-right: 0;
  }

  .px-1-l {
    padding-left: calc(var(--spacing) * .5);
    padding-right: calc(var(--spacing) * .5);
  }

  .px-2-l {
    padding-left: calc(var(--spacing) * 1);
    padding-right: calc(var(--spacing) * 1);
  }

  .px-3-l {
    padding-left: calc(var(--spacing) * 1.5);
    padding-right: calc(var(--spacing) * 1.5);
  }

  .px-4-l {
    padding-left: calc(var(--spacing) * 2);
    padding-right: calc(var(--spacing) * 2);
  }

  .px-5-l {
    padding-left: calc(var(--spacing) * 3);
    padding-right: calc(var(--spacing) * 3);
  }

  .px-6-l {
    padding-left: calc(var(--spacing) * 4);
    padding-right: calc(var(--spacing) * 4);
  }

  .px-7-l {
    padding-left: calc(var(--spacing) * 5);
    padding-right: calc(var(--spacing) * 5);
  }

  .px-8-l {
    padding-left: calc(var(--spacing) * 6);
    padding-right: calc(var(--spacing) * 6);
  }

  .px-9-l {
    padding-left: calc(var(--spacing) * 8);
    padding-right: calc(var(--spacing) * 8);
  }

  .px-10-l {
    padding-left: calc(var(--spacing) * 10);
    padding-right: calc(var(--spacing) * 10);
  }

  .m-0-l {
    --margin: 0;
    margin: var(--margin);
  }

  .m-1-l {
    --margin: calc(var(--spacing) * .5);
    margin: var(--margin);
  }

  .m-2-l {
    --margin: calc(var(--spacing) * 1);
    margin: var(--margin);
  }

  .m-3-l {
    --margin: calc(var(--spacing) * 1.5);
    margin: var(--margin);
  }

  .m-4-l {
    --margin: calc(var(--spacing) * 2);
    margin: var(--margin);
  }

  .m-5-l {
    --margin: calc(var(--spacing) * 3);
    margin: var(--margin);
  }

  .m-6-l {
    --margin: calc(var(--spacing) * 4);
    margin: var(--margin);
  }

  .m-7-l {
    --margin: calc(var(--spacing) * 5);
    margin: var(--margin);
  }

  .m-8-l {
    --margin: calc(var(--spacing) * 6);
    margin: var(--margin);
  }

  .m-9-l {
    --margin: calc(var(--spacing) * 8);
    margin: var(--margin);
  }

  .m-10-l {
    --margin: calc(var(--spacing) * 10);
    margin: var(--margin);
  }

  .ml-0-l {
    margin-left: 0;
  }

  .ml-1-l {
    margin-left: calc(var(--spacing) * .5);
  }

  .ml-2-l {
    margin-left: calc(var(--spacing) * 1);
  }

  .ml-3-l {
    margin-left: calc(var(--spacing) * 1.5);
  }

  .ml-4-l {
    margin-left: calc(var(--spacing) * 2);
  }

  .ml-5-l {
    margin-left: calc(var(--spacing) * 3);
  }

  .ml-6-l {
    margin-left: calc(var(--spacing) * 4);
  }

  .ml-7-l {
    margin-left: calc(var(--spacing) * 5);
  }

  .ml-8-l {
    margin-left: calc(var(--spacing) * 6);
  }

  .ml-9-l {
    margin-left: calc(var(--spacing) * 8);
  }

  .ml-10-l {
    margin-left: calc(var(--spacing) * 10);
  }

  .mr-0-l {
    margin-right: 0;
  }

  .mr-1-l {
    margin-right: calc(var(--spacing) * .5);
  }

  .mr-2-l {
    margin-right: calc(var(--spacing) * 1);
  }

  .mr-3-l {
    margin-right: calc(var(--spacing) * 1.5);
  }

  .mr-4-l {
    margin-right: calc(var(--spacing) * 2);
  }

  .mr-5-l {
    margin-right: calc(var(--spacing) * 3);
  }

  .mr-6-l {
    margin-right: calc(var(--spacing) * 4);
  }

  .mr-7-l {
    margin-right: calc(var(--spacing) * 5);
  }

  .mr-8-l {
    margin-right: calc(var(--spacing) * 6);
  }

  .mr-9-l {
    margin-right: calc(var(--spacing) * 8);
  }

  .mr-10-l {
    margin-right: calc(var(--spacing) * 10);
  }

  .mb-0-l {
    margin-bottom: 0;
  }

  .mb-1-l {
    margin-bottom: calc(var(--spacing) * .5);
  }

  .mb-2-l {
    margin-bottom: calc(var(--spacing) * 1);
  }

  .mb-3-l {
    margin-bottom: calc(var(--spacing) * 1.5);
  }

  .mb-4-l {
    margin-bottom: calc(var(--spacing) * 2);
  }

  .mb-5-l {
    margin-bottom: calc(var(--spacing) * 3);
  }

  .mb-6-l {
    margin-bottom: calc(var(--spacing) * 4);
  }

  .mb-7-l {
    margin-bottom: calc(var(--spacing) * 5);
  }

  .mb-8-l {
    margin-bottom: calc(var(--spacing) * 6);
  }

  .mb-9-l {
    margin-bottom: calc(var(--spacing) * 8);
  }

  .mb-10-l {
    margin-bottom: calc(var(--spacing) * 10);
  }

  .mt-0-l {
    margin-top: 0;
  }

  .mt-1-l {
    margin-top: calc(var(--spacing) * .5);
  }

  .mt-2-l {
    margin-top: calc(var(--spacing) * 1);
  }

  .mt-3-l {
    margin-top: calc(var(--spacing) * 1.5);
  }

  .mt-4-l {
    margin-top: calc(var(--spacing) * 2);
  }

  .mt-5-l {
    margin-top: calc(var(--spacing) * 3);
  }

  .mt-6-l {
    margin-top: calc(var(--spacing) * 4);
  }

  .mt-7-l {
    margin-top: calc(var(--spacing) * 5);
  }

  .mt-8-l {
    margin-top: calc(var(--spacing) * 6);
  }

  .mt-9-l {
    margin-top: calc(var(--spacing) * 8);
  }

  .mt-10-l {
    margin-top: calc(var(--spacing) * 10);
  }

  .my-0-l {
    margin-top: 0;
    margin-bottom: 0;
  }

  .my-1-l {
    margin-top: calc(var(--spacing) * .5);
    margin-bottom: calc(var(--spacing) * .5);
  }

  .my-2-l {
    margin-top: calc(var(--spacing) * 1);
    margin-bottom: calc(var(--spacing) * 1);
  }

  .my-3-l {
    margin-top: calc(var(--spacing) * 1.5);
    margin-bottom: calc(var(--spacing) * 1.5);
  }

  .my-4-l {
    margin-top: calc(var(--spacing) * 2);
    margin-bottom: calc(var(--spacing) * 2);
  }

  .my-5-l {
    margin-top: calc(var(--spacing) * 3);
    margin-bottom: calc(var(--spacing) * 3);
  }

  .my-6-l {
    margin-top: calc(var(--spacing) * 4);
    margin-bottom: calc(var(--spacing) * 4);
  }

  .my-7-l {
    margin-top: calc(var(--spacing) * 5);
    margin-bottom: calc(var(--spacing) * 5);
  }

  .my-8-l {
    margin-top: calc(var(--spacing) * 6);
    margin-bottom: calc(var(--spacing) * 6);
  }

  .my-9-l {
    margin-top: calc(var(--spacing) * 8);
    margin-bottom: calc(var(--spacing) * 8);
  }

  .my-10-l {
    margin-top: calc(var(--spacing) * 10);
    margin-bottom: calc(var(--spacing) * 10);
  }

  .mx-0-l {
    margin-left: 0;
    margin-right: 0;
  }

  .mx-1-l {
    margin-left: calc(var(--spacing) * .5);
    margin-right: calc(var(--spacing) * .5);
  }

  .mx-2-l {
    margin-left: calc(var(--spacing) * 1);
    margin-right: calc(var(--spacing) * 1);
  }

  .mx-3-l {
    margin-left: calc(var(--spacing) * 1.5);
    margin-right: calc(var(--spacing) * 1.5);
  }

  .mx-4-l {
    margin-left: calc(var(--spacing) * 2);
    margin-right: calc(var(--spacing) * 2);
  }

  .mx-5-l {
    margin-left: calc(var(--spacing) * 3);
    margin-right: calc(var(--spacing) * 3);
  }

  .mx-6-l {
    margin-left: calc(var(--spacing) * 4);
    margin-right: calc(var(--spacing) * 4);
  }

  .mx-7-l {
    margin-left: calc(var(--spacing) * 5);
    margin-right: calc(var(--spacing) * 5);
  }

  .mx-8-l {
    margin-left: calc(var(--spacing) * 6);
    margin-right: calc(var(--spacing) * 6);
  }

  .mx-9-l {
    margin-left: calc(var(--spacing) * 8);
    margin-right: calc(var(--spacing) * 8);
  }

  .mx-10-l {
    margin-left: calc(var(--spacing) * 10);
    margin-right: calc(var(--spacing) * 10);
  }
}

@media (min-width: 100rem) {
  .p-0-xl {
    --padding: 0;
    padding: var(--padding);
  }

  .p-1-xl {
    --padding: calc(var(--spacing) * .5);
    padding: var(--padding);
  }

  .p-2-xl {
    --padding: calc(var(--spacing) * 1);
    padding: var(--padding);
  }

  .p-3-xl {
    --padding: calc(var(--spacing) * 1.5);
    padding: var(--padding);
  }

  .p-4-xl {
    --padding: calc(var(--spacing) * 2);
    padding: var(--padding);
  }

  .p-5-xl {
    --padding: calc(var(--spacing) * 3);
    padding: var(--padding);
  }

  .p-6-xl {
    --padding: calc(var(--spacing) * 4);
    padding: var(--padding);
  }

  .p-7-xl {
    --padding: calc(var(--spacing) * 5);
    padding: var(--padding);
  }

  .p-8-xl {
    --padding: calc(var(--spacing) * 6);
    padding: var(--padding);
  }

  .p-9-xl {
    --padding: calc(var(--spacing) * 8);
    padding: var(--padding);
  }

  .p-10-xl {
    --padding: calc(var(--spacing) * 10);
    padding: var(--padding);
  }

  .pl-0-xl {
    padding-left: 0;
  }

  .pl-1-xl {
    padding-left: calc(var(--spacing) * .5);
  }

  .pl-2-xl {
    padding-left: calc(var(--spacing) * 1);
  }

  .pl-3-xl {
    padding-left: calc(var(--spacing) * 1.5);
  }

  .pl-4-xl {
    padding-left: calc(var(--spacing) * 2);
  }

  .pl-5-xl {
    padding-left: calc(var(--spacing) * 3);
  }

  .pl-6-xl {
    padding-left: calc(var(--spacing) * 4);
  }

  .pl-7-xl {
    padding-left: calc(var(--spacing) * 5);
  }

  .pl-8-xl {
    padding-left: calc(var(--spacing) * 6);
  }

  .pl-9-xl {
    padding-left: calc(var(--spacing) * 8);
  }

  .pl-10-xl {
    padding-left: calc(var(--spacing) * 10);
  }

  .pr-0-xl {
    padding-right: 0;
  }

  .pr-1-xl {
    padding-right: calc(var(--spacing) * .5);
  }

  .pr-2-xl {
    padding-right: calc(var(--spacing) * 1);
  }

  .pr-3-xl {
    padding-right: calc(var(--spacing) * 1.5);
  }

  .pr-4-xl {
    padding-right: calc(var(--spacing) * 2);
  }

  .pr-5-xl {
    padding-right: calc(var(--spacing) * 3);
  }

  .pr-6-xl {
    padding-right: calc(var(--spacing) * 4);
  }

  .pr-7-xl {
    padding-right: calc(var(--spacing) * 5);
  }

  .pr-8-xl {
    padding-right: calc(var(--spacing) * 6);
  }

  .pr-9-xl {
    padding-right: calc(var(--spacing) * 8);
  }

  .pr-10-xl {
    padding-right: calc(var(--spacing) * 10);
  }

  .pb-0-xl {
    padding-bottom: 0;
  }

  .pb-1-xl {
    padding-bottom: calc(var(--spacing) * .5);
  }

  .pb-2-xl {
    padding-bottom: calc(var(--spacing) * 1);
  }

  .pb-3-xl {
    padding-bottom: calc(var(--spacing) * 1.5);
  }

  .pb-4-xl {
    padding-bottom: calc(var(--spacing) * 2);
  }

  .pb-5-xl {
    padding-bottom: calc(var(--spacing) * 3);
  }

  .pb-6-xl {
    padding-bottom: calc(var(--spacing) * 4);
  }

  .pb-7-xl {
    padding-bottom: calc(var(--spacing) * 5);
  }

  .pb-8-xl {
    padding-bottom: calc(var(--spacing) * 6);
  }

  .pb-9-xl {
    padding-bottom: calc(var(--spacing) * 8);
  }

  .pb-10-xl {
    padding-bottom: calc(var(--spacing) * 10);
  }

  .pt-0-xl {
    padding-top: 0;
  }

  .pt-1-xl {
    padding-top: calc(var(--spacing) * .5);
  }

  .pt-2-xl {
    padding-top: calc(var(--spacing) * 1);
  }

  .pt-3-xl {
    padding-top: calc(var(--spacing) * 1.5);
  }

  .pt-4-xl {
    padding-top: calc(var(--spacing) * 2);
  }

  .pt-5-xl {
    padding-top: calc(var(--spacing) * 3);
  }

  .pt-6-xl {
    padding-top: calc(var(--spacing) * 4);
  }

  .pt-7-xl {
    padding-top: calc(var(--spacing) * 5);
  }

  .pt-8-xl {
    padding-top: calc(var(--spacing) * 6);
  }

  .pt-9-xl {
    padding-top: calc(var(--spacing) * 8);
  }

  .pt-10-xl {
    padding-top: calc(var(--spacing) * 10);
  }

  .py-0-xl {
    padding-top: 0;
    padding-bottom: 0;
  }

  .py-1-xl {
    padding-top: calc(var(--spacing) * .5);
    padding-bottom: calc(var(--spacing) * .5);
  }

  .py-2-xl {
    padding-top: calc(var(--spacing) * 1);
    padding-bottom: calc(var(--spacing) * 1);
  }

  .py-3-xl {
    padding-top: calc(var(--spacing) * 1.5);
    padding-bottom: calc(var(--spacing) * 1.5);
  }

  .py-4-xl {
    padding-top: calc(var(--spacing) * 2);
    padding-bottom: calc(var(--spacing) * 2);
  }

  .py-5-xl {
    padding-top: calc(var(--spacing) * 3);
    padding-bottom: calc(var(--spacing) * 3);
  }

  .py-6-xl {
    padding-top: calc(var(--spacing) * 4);
    padding-bottom: calc(var(--spacing) * 4);
  }

  .py-7-xl {
    padding-top: calc(var(--spacing) * 5);
    padding-bottom: calc(var(--spacing) * 5);
  }

  .py-8-xl {
    padding-top: calc(var(--spacing) * 6);
    padding-bottom: calc(var(--spacing) * 6);
  }

  .py-9-xl {
    padding-top: calc(var(--spacing) * 8);
    padding-bottom: calc(var(--spacing) * 8);
  }

  .py-10-xl {
    padding-top: calc(var(--spacing) * 10);
    padding-bottom: calc(var(--spacing) * 10);
  }

  .px-0-xl {
    padding-left: 0;
    padding-right: 0;
  }

  .px-1-xl {
    padding-left: calc(var(--spacing) * .5);
    padding-right: calc(var(--spacing) * .5);
  }

  .px-2-xl {
    padding-left: calc(var(--spacing) * 1);
    padding-right: calc(var(--spacing) * 1);
  }

  .px-3-xl {
    padding-left: calc(var(--spacing) * 1.5);
    padding-right: calc(var(--spacing) * 1.5);
  }

  .px-4-xl {
    padding-left: calc(var(--spacing) * 2);
    padding-right: calc(var(--spacing) * 2);
  }

  .px-5-xl {
    padding-left: calc(var(--spacing) * 3);
    padding-right: calc(var(--spacing) * 3);
  }

  .px-6-xl {
    padding-left: calc(var(--spacing) * 4);
    padding-right: calc(var(--spacing) * 4);
  }

  .px-7-xl {
    padding-left: calc(var(--spacing) * 5);
    padding-right: calc(var(--spacing) * 5);
  }

  .px-8-xl {
    padding-left: calc(var(--spacing) * 6);
    padding-right: calc(var(--spacing) * 6);
  }

  .px-9-xl {
    padding-left: calc(var(--spacing) * 8);
    padding-right: calc(var(--spacing) * 8);
  }

  .px-10-xl {
    padding-left: calc(var(--spacing) * 10);
    padding-right: calc(var(--spacing) * 10);
  }

  .m-0-xl {
    --margin: 0;
    margin: var(--margin);
  }

  .m-1-xl {
    --margin: calc(var(--spacing) * .5);
    margin: var(--margin);
  }

  .m-2-xl {
    --margin: calc(var(--spacing) * 1);
    margin: var(--margin);
  }

  .m-3-xl {
    --margin: calc(var(--spacing) * 1.5);
    margin: var(--margin);
  }

  .m-4-xl {
    --margin: calc(var(--spacing) * 2);
    margin: var(--margin);
  }

  .m-5-xl {
    --margin: calc(var(--spacing) * 3);
    margin: var(--margin);
  }

  .m-6-xl {
    --margin: calc(var(--spacing) * 4);
    margin: var(--margin);
  }

  .m-7-xl {
    --margin: calc(var(--spacing) * 5);
    margin: var(--margin);
  }

  .m-8-xl {
    --margin: calc(var(--spacing) * 6);
    margin: var(--margin);
  }

  .m-9-xl {
    --margin: calc(var(--spacing) * 8);
    margin: var(--margin);
  }

  .m-10-xl {
    --margin: calc(var(--spacing) * 10);
    margin: var(--margin);
  }

  .ml-0-xl {
    margin-left: 0;
  }

  .ml-1-xl {
    margin-left: calc(var(--spacing) * .5);
  }

  .ml-2-xl {
    margin-left: calc(var(--spacing) * 1);
  }

  .ml-3-xl {
    margin-left: calc(var(--spacing) * 1.5);
  }

  .ml-4-xl {
    margin-left: calc(var(--spacing) * 2);
  }

  .ml-5-xl {
    margin-left: calc(var(--spacing) * 3);
  }

  .ml-6-xl {
    margin-left: calc(var(--spacing) * 4);
  }

  .ml-7-xl {
    margin-left: calc(var(--spacing) * 5);
  }

  .ml-8-xl {
    margin-left: calc(var(--spacing) * 6);
  }

  .ml-9-xl {
    margin-left: calc(var(--spacing) * 8);
  }

  .ml-10-xl {
    margin-left: calc(var(--spacing) * 10);
  }

  .mr-0-xl {
    margin-right: 0;
  }

  .mr-1-xl {
    margin-right: calc(var(--spacing) * .5);
  }

  .mr-2-xl {
    margin-right: calc(var(--spacing) * 1);
  }

  .mr-3-xl {
    margin-right: calc(var(--spacing) * 1.5);
  }

  .mr-4-xl {
    margin-right: calc(var(--spacing) * 2);
  }

  .mr-5-xl {
    margin-right: calc(var(--spacing) * 3);
  }

  .mr-6-xl {
    margin-right: calc(var(--spacing) * 4);
  }

  .mr-7-xl {
    margin-right: calc(var(--spacing) * 5);
  }

  .mr-8-xl {
    margin-right: calc(var(--spacing) * 6);
  }

  .mr-9-xl {
    margin-right: calc(var(--spacing) * 8);
  }

  .mr-10-xl {
    margin-right: calc(var(--spacing) * 10);
  }

  .mb-0-xl {
    margin-bottom: 0;
  }

  .mb-1-xl {
    margin-bottom: calc(var(--spacing) * .5);
  }

  .mb-2-xl {
    margin-bottom: calc(var(--spacing) * 1);
  }

  .mb-3-xl {
    margin-bottom: calc(var(--spacing) * 1.5);
  }

  .mb-4-xl {
    margin-bottom: calc(var(--spacing) * 2);
  }

  .mb-5-xl {
    margin-bottom: calc(var(--spacing) * 3);
  }

  .mb-6-xl {
    margin-bottom: calc(var(--spacing) * 4);
  }

  .mb-7-xl {
    margin-bottom: calc(var(--spacing) * 5);
  }

  .mb-8-xl {
    margin-bottom: calc(var(--spacing) * 6);
  }

  .mb-9-xl {
    margin-bottom: calc(var(--spacing) * 8);
  }

  .mb-10-xl {
    margin-bottom: calc(var(--spacing) * 10);
  }

  .mt-0-xl {
    margin-top: 0;
  }

  .mt-1-xl {
    margin-top: calc(var(--spacing) * .5);
  }

  .mt-2-xl {
    margin-top: calc(var(--spacing) * 1);
  }

  .mt-3-xl {
    margin-top: calc(var(--spacing) * 1.5);
  }

  .mt-4-xl {
    margin-top: calc(var(--spacing) * 2);
  }

  .mt-5-xl {
    margin-top: calc(var(--spacing) * 3);
  }

  .mt-6-xl {
    margin-top: calc(var(--spacing) * 4);
  }

  .mt-7-xl {
    margin-top: calc(var(--spacing) * 5);
  }

  .mt-8-xl {
    margin-top: calc(var(--spacing) * 6);
  }

  .mt-9-xl {
    margin-top: calc(var(--spacing) * 8);
  }

  .mt-10-xl {
    margin-top: calc(var(--spacing) * 10);
  }

  .my-0-xl {
    margin-top: 0;
    margin-bottom: 0;
  }

  .my-1-xl {
    margin-top: calc(var(--spacing) * .5);
    margin-bottom: calc(var(--spacing) * .5);
  }

  .my-2-xl {
    margin-top: calc(var(--spacing) * 1);
    margin-bottom: calc(var(--spacing) * 1);
  }

  .my-3-xl {
    margin-top: calc(var(--spacing) * 1.5);
    margin-bottom: calc(var(--spacing) * 1.5);
  }

  .my-4-xl {
    margin-top: calc(var(--spacing) * 2);
    margin-bottom: calc(var(--spacing) * 2);
  }

  .my-5-xl {
    margin-top: calc(var(--spacing) * 3);
    margin-bottom: calc(var(--spacing) * 3);
  }

  .my-6-xl {
    margin-top: calc(var(--spacing) * 4);
    margin-bottom: calc(var(--spacing) * 4);
  }

  .my-7-xl {
    margin-top: calc(var(--spacing) * 5);
    margin-bottom: calc(var(--spacing) * 5);
  }

  .my-8-xl {
    margin-top: calc(var(--spacing) * 6);
    margin-bottom: calc(var(--spacing) * 6);
  }

  .my-9-xl {
    margin-top: calc(var(--spacing) * 8);
    margin-bottom: calc(var(--spacing) * 8);
  }

  .my-10-xl {
    margin-top: calc(var(--spacing) * 10);
    margin-bottom: calc(var(--spacing) * 10);
  }

  .mx-0-xl {
    margin-left: 0;
    margin-right: 0;
  }

  .mx-1-xl {
    margin-left: calc(var(--spacing) * .5);
    margin-right: calc(var(--spacing) * .5);
  }

  .mx-2-xl {
    margin-left: calc(var(--spacing) * 1);
    margin-right: calc(var(--spacing) * 1);
  }

  .mx-3-xl {
    margin-left: calc(var(--spacing) * 1.5);
    margin-right: calc(var(--spacing) * 1.5);
  }

  .mx-4-xl {
    margin-left: calc(var(--spacing) * 2);
    margin-right: calc(var(--spacing) * 2);
  }

  .mx-5-xl {
    margin-left: calc(var(--spacing) * 3);
    margin-right: calc(var(--spacing) * 3);
  }

  .mx-6-xl {
    margin-left: calc(var(--spacing) * 4);
    margin-right: calc(var(--spacing) * 4);
  }

  .mx-7-xl {
    margin-left: calc(var(--spacing) * 5);
    margin-right: calc(var(--spacing) * 5);
  }

  .mx-8-xl {
    margin-left: calc(var(--spacing) * 6);
    margin-right: calc(var(--spacing) * 6);
  }

  .mx-9-xl {
    margin-left: calc(var(--spacing) * 8);
    margin-right: calc(var(--spacing) * 8);
  }

  .mx-10-xl {
    margin-left: calc(var(--spacing) * 10);
    margin-right: calc(var(--spacing) * 10);
  }
}

@media (min-width: 130rem) {
  .p-0-2xl {
    --padding: 0;
    padding: var(--padding);
  }

  .p-1-2xl {
    --padding: calc(var(--spacing) * .5);
    padding: var(--padding);
  }

  .p-2-2xl {
    --padding: calc(var(--spacing) * 1);
    padding: var(--padding);
  }

  .p-3-2xl {
    --padding: calc(var(--spacing) * 1.5);
    padding: var(--padding);
  }

  .p-4-2xl {
    --padding: calc(var(--spacing) * 2);
    padding: var(--padding);
  }

  .p-5-2xl {
    --padding: calc(var(--spacing) * 3);
    padding: var(--padding);
  }

  .p-6-2xl {
    --padding: calc(var(--spacing) * 4);
    padding: var(--padding);
  }

  .p-7-2xl {
    --padding: calc(var(--spacing) * 5);
    padding: var(--padding);
  }

  .p-8-2xl {
    --padding: calc(var(--spacing) * 6);
    padding: var(--padding);
  }

  .p-9-2xl {
    --padding: calc(var(--spacing) * 8);
    padding: var(--padding);
  }

  .p-10-2xl {
    --padding: calc(var(--spacing) * 10);
    padding: var(--padding);
  }

  .pl-0-2xl {
    padding-left: 0;
  }

  .pl-1-2xl {
    padding-left: calc(var(--spacing) * .5);
  }

  .pl-2-2xl {
    padding-left: calc(var(--spacing) * 1);
  }

  .pl-3-2xl {
    padding-left: calc(var(--spacing) * 1.5);
  }

  .pl-4-2xl {
    padding-left: calc(var(--spacing) * 2);
  }

  .pl-5-2xl {
    padding-left: calc(var(--spacing) * 3);
  }

  .pl-6-2xl {
    padding-left: calc(var(--spacing) * 4);
  }

  .pl-7-2xl {
    padding-left: calc(var(--spacing) * 5);
  }

  .pl-8-2xl {
    padding-left: calc(var(--spacing) * 6);
  }

  .pl-9-2xl {
    padding-left: calc(var(--spacing) * 8);
  }

  .pl-10-2xl {
    padding-left: calc(var(--spacing) * 10);
  }

  .pr-0-2xl {
    padding-right: 0;
  }

  .pr-1-2xl {
    padding-right: calc(var(--spacing) * .5);
  }

  .pr-2-2xl {
    padding-right: calc(var(--spacing) * 1);
  }

  .pr-3-2xl {
    padding-right: calc(var(--spacing) * 1.5);
  }

  .pr-4-2xl {
    padding-right: calc(var(--spacing) * 2);
  }

  .pr-5-2xl {
    padding-right: calc(var(--spacing) * 3);
  }

  .pr-6-2xl {
    padding-right: calc(var(--spacing) * 4);
  }

  .pr-7-2xl {
    padding-right: calc(var(--spacing) * 5);
  }

  .pr-8-2xl {
    padding-right: calc(var(--spacing) * 6);
  }

  .pr-9-2xl {
    padding-right: calc(var(--spacing) * 8);
  }

  .pr-10-2xl {
    padding-right: calc(var(--spacing) * 10);
  }

  .pb-0-2xl {
    padding-bottom: 0;
  }

  .pb-1-2xl {
    padding-bottom: calc(var(--spacing) * .5);
  }

  .pb-2-2xl {
    padding-bottom: calc(var(--spacing) * 1);
  }

  .pb-3-2xl {
    padding-bottom: calc(var(--spacing) * 1.5);
  }

  .pb-4-2xl {
    padding-bottom: calc(var(--spacing) * 2);
  }

  .pb-5-2xl {
    padding-bottom: calc(var(--spacing) * 3);
  }

  .pb-6-2xl {
    padding-bottom: calc(var(--spacing) * 4);
  }

  .pb-7-2xl {
    padding-bottom: calc(var(--spacing) * 5);
  }

  .pb-8-2xl {
    padding-bottom: calc(var(--spacing) * 6);
  }

  .pb-9-2xl {
    padding-bottom: calc(var(--spacing) * 8);
  }

  .pb-10-2xl {
    padding-bottom: calc(var(--spacing) * 10);
  }

  .pt-0-2xl {
    padding-top: 0;
  }

  .pt-1-2xl {
    padding-top: calc(var(--spacing) * .5);
  }

  .pt-2-2xl {
    padding-top: calc(var(--spacing) * 1);
  }

  .pt-3-2xl {
    padding-top: calc(var(--spacing) * 1.5);
  }

  .pt-4-2xl {
    padding-top: calc(var(--spacing) * 2);
  }

  .pt-5-2xl {
    padding-top: calc(var(--spacing) * 3);
  }

  .pt-6-2xl {
    padding-top: calc(var(--spacing) * 4);
  }

  .pt-7-2xl {
    padding-top: calc(var(--spacing) * 5);
  }

  .pt-8-2xl {
    padding-top: calc(var(--spacing) * 6);
  }

  .pt-9-2xl {
    padding-top: calc(var(--spacing) * 8);
  }

  .pt-10-2xl {
    padding-top: calc(var(--spacing) * 10);
  }

  .py-0-2xl {
    padding-top: 0;
    padding-bottom: 0;
  }

  .py-1-2xl {
    padding-top: calc(var(--spacing) * .5);
    padding-bottom: calc(var(--spacing) * .5);
  }

  .py-2-2xl {
    padding-top: calc(var(--spacing) * 1);
    padding-bottom: calc(var(--spacing) * 1);
  }

  .py-3-2xl {
    padding-top: calc(var(--spacing) * 1.5);
    padding-bottom: calc(var(--spacing) * 1.5);
  }

  .py-4-2xl {
    padding-top: calc(var(--spacing) * 2);
    padding-bottom: calc(var(--spacing) * 2);
  }

  .py-5-2xl {
    padding-top: calc(var(--spacing) * 3);
    padding-bottom: calc(var(--spacing) * 3);
  }

  .py-6-2xl {
    padding-top: calc(var(--spacing) * 4);
    padding-bottom: calc(var(--spacing) * 4);
  }

  .py-7-2xl {
    padding-top: calc(var(--spacing) * 5);
    padding-bottom: calc(var(--spacing) * 5);
  }

  .py-8-2xl {
    padding-top: calc(var(--spacing) * 6);
    padding-bottom: calc(var(--spacing) * 6);
  }

  .py-9-2xl {
    padding-top: calc(var(--spacing) * 8);
    padding-bottom: calc(var(--spacing) * 8);
  }

  .py-10-2xl {
    padding-top: calc(var(--spacing) * 10);
    padding-bottom: calc(var(--spacing) * 10);
  }

  .px-0-2xl {
    padding-left: 0;
    padding-right: 0;
  }

  .px-1-2xl {
    padding-left: calc(var(--spacing) * .5);
    padding-right: calc(var(--spacing) * .5);
  }

  .px-2-2xl {
    padding-left: calc(var(--spacing) * 1);
    padding-right: calc(var(--spacing) * 1);
  }

  .px-3-2xl {
    padding-left: calc(var(--spacing) * 1.5);
    padding-right: calc(var(--spacing) * 1.5);
  }

  .px-4-2xl {
    padding-left: calc(var(--spacing) * 2);
    padding-right: calc(var(--spacing) * 2);
  }

  .px-5-2xl {
    padding-left: calc(var(--spacing) * 3);
    padding-right: calc(var(--spacing) * 3);
  }

  .px-6-2xl {
    padding-left: calc(var(--spacing) * 4);
    padding-right: calc(var(--spacing) * 4);
  }

  .px-7-2xl {
    padding-left: calc(var(--spacing) * 5);
    padding-right: calc(var(--spacing) * 5);
  }

  .px-8-2xl {
    padding-left: calc(var(--spacing) * 6);
    padding-right: calc(var(--spacing) * 6);
  }

  .px-9-2xl {
    padding-left: calc(var(--spacing) * 8);
    padding-right: calc(var(--spacing) * 8);
  }

  .px-10-2xl {
    padding-left: calc(var(--spacing) * 10);
    padding-right: calc(var(--spacing) * 10);
  }

  .m-0-2xl {
    --margin: 0;
    margin: var(--margin);
  }

  .m-1-2xl {
    --margin: calc(var(--spacing) * .5);
    margin: var(--margin);
  }

  .m-2-2xl {
    --margin: calc(var(--spacing) * 1);
    margin: var(--margin);
  }

  .m-3-2xl {
    --margin: calc(var(--spacing) * 1.5);
    margin: var(--margin);
  }

  .m-4-2xl {
    --margin: calc(var(--spacing) * 2);
    margin: var(--margin);
  }

  .m-5-2xl {
    --margin: calc(var(--spacing) * 3);
    margin: var(--margin);
  }

  .m-6-2xl {
    --margin: calc(var(--spacing) * 4);
    margin: var(--margin);
  }

  .m-7-2xl {
    --margin: calc(var(--spacing) * 5);
    margin: var(--margin);
  }

  .m-8-2xl {
    --margin: calc(var(--spacing) * 6);
    margin: var(--margin);
  }

  .m-9-2xl {
    --margin: calc(var(--spacing) * 8);
    margin: var(--margin);
  }

  .m-10-2xl {
    --margin: calc(var(--spacing) * 10);
    margin: var(--margin);
  }

  .ml-0-2xl {
    margin-left: 0;
  }

  .ml-1-2xl {
    margin-left: calc(var(--spacing) * .5);
  }

  .ml-2-2xl {
    margin-left: calc(var(--spacing) * 1);
  }

  .ml-3-2xl {
    margin-left: calc(var(--spacing) * 1.5);
  }

  .ml-4-2xl {
    margin-left: calc(var(--spacing) * 2);
  }

  .ml-5-2xl {
    margin-left: calc(var(--spacing) * 3);
  }

  .ml-6-2xl {
    margin-left: calc(var(--spacing) * 4);
  }

  .ml-7-2xl {
    margin-left: calc(var(--spacing) * 5);
  }

  .ml-8-2xl {
    margin-left: calc(var(--spacing) * 6);
  }

  .ml-9-2xl {
    margin-left: calc(var(--spacing) * 8);
  }

  .ml-10-2xl {
    margin-left: calc(var(--spacing) * 10);
  }

  .mr-0-2xl {
    margin-right: 0;
  }

  .mr-1-2xl {
    margin-right: calc(var(--spacing) * .5);
  }

  .mr-2-2xl {
    margin-right: calc(var(--spacing) * 1);
  }

  .mr-3-2xl {
    margin-right: calc(var(--spacing) * 1.5);
  }

  .mr-4-2xl {
    margin-right: calc(var(--spacing) * 2);
  }

  .mr-5-2xl {
    margin-right: calc(var(--spacing) * 3);
  }

  .mr-6-2xl {
    margin-right: calc(var(--spacing) * 4);
  }

  .mr-7-2xl {
    margin-right: calc(var(--spacing) * 5);
  }

  .mr-8-2xl {
    margin-right: calc(var(--spacing) * 6);
  }

  .mr-9-2xl {
    margin-right: calc(var(--spacing) * 8);
  }

  .mr-10-2xl {
    margin-right: calc(var(--spacing) * 10);
  }

  .mb-0-2xl {
    margin-bottom: 0;
  }

  .mb-1-2xl {
    margin-bottom: calc(var(--spacing) * .5);
  }

  .mb-2-2xl {
    margin-bottom: calc(var(--spacing) * 1);
  }

  .mb-3-2xl {
    margin-bottom: calc(var(--spacing) * 1.5);
  }

  .mb-4-2xl {
    margin-bottom: calc(var(--spacing) * 2);
  }

  .mb-5-2xl {
    margin-bottom: calc(var(--spacing) * 3);
  }

  .mb-6-2xl {
    margin-bottom: calc(var(--spacing) * 4);
  }

  .mb-7-2xl {
    margin-bottom: calc(var(--spacing) * 5);
  }

  .mb-8-2xl {
    margin-bottom: calc(var(--spacing) * 6);
  }

  .mb-9-2xl {
    margin-bottom: calc(var(--spacing) * 8);
  }

  .mb-10-2xl {
    margin-bottom: calc(var(--spacing) * 10);
  }

  .mt-0-2xl {
    margin-top: 0;
  }

  .mt-1-2xl {
    margin-top: calc(var(--spacing) * .5);
  }

  .mt-2-2xl {
    margin-top: calc(var(--spacing) * 1);
  }

  .mt-3-2xl {
    margin-top: calc(var(--spacing) * 1.5);
  }

  .mt-4-2xl {
    margin-top: calc(var(--spacing) * 2);
  }

  .mt-5-2xl {
    margin-top: calc(var(--spacing) * 3);
  }

  .mt-6-2xl {
    margin-top: calc(var(--spacing) * 4);
  }

  .mt-7-2xl {
    margin-top: calc(var(--spacing) * 5);
  }

  .mt-8-2xl {
    margin-top: calc(var(--spacing) * 6);
  }

  .mt-9-2xl {
    margin-top: calc(var(--spacing) * 8);
  }

  .mt-10-2xl {
    margin-top: calc(var(--spacing) * 10);
  }

  .my-0-2xl {
    margin-top: 0;
    margin-bottom: 0;
  }

  .my-1-2xl {
    margin-top: calc(var(--spacing) * .5);
    margin-bottom: calc(var(--spacing) * .5);
  }

  .my-2-2xl {
    margin-top: calc(var(--spacing) * 1);
    margin-bottom: calc(var(--spacing) * 1);
  }

  .my-3-2xl {
    margin-top: calc(var(--spacing) * 1.5);
    margin-bottom: calc(var(--spacing) * 1.5);
  }

  .my-4-2xl {
    margin-top: calc(var(--spacing) * 2);
    margin-bottom: calc(var(--spacing) * 2);
  }

  .my-5-2xl {
    margin-top: calc(var(--spacing) * 3);
    margin-bottom: calc(var(--spacing) * 3);
  }

  .my-6-2xl {
    margin-top: calc(var(--spacing) * 4);
    margin-bottom: calc(var(--spacing) * 4);
  }

  .my-7-2xl {
    margin-top: calc(var(--spacing) * 5);
    margin-bottom: calc(var(--spacing) * 5);
  }

  .my-8-2xl {
    margin-top: calc(var(--spacing) * 6);
    margin-bottom: calc(var(--spacing) * 6);
  }

  .my-9-2xl {
    margin-top: calc(var(--spacing) * 8);
    margin-bottom: calc(var(--spacing) * 8);
  }

  .my-10-2xl {
    margin-top: calc(var(--spacing) * 10);
    margin-bottom: calc(var(--spacing) * 10);
  }

  .mx-0-2xl {
    margin-left: 0;
    margin-right: 0;
  }

  .mx-1-2xl {
    margin-left: calc(var(--spacing) * .5);
    margin-right: calc(var(--spacing) * .5);
  }

  .mx-2-2xl {
    margin-left: calc(var(--spacing) * 1);
    margin-right: calc(var(--spacing) * 1);
  }

  .mx-3-2xl {
    margin-left: calc(var(--spacing) * 1.5);
    margin-right: calc(var(--spacing) * 1.5);
  }

  .mx-4-2xl {
    margin-left: calc(var(--spacing) * 2);
    margin-right: calc(var(--spacing) * 2);
  }

  .mx-5-2xl {
    margin-left: calc(var(--spacing) * 3);
    margin-right: calc(var(--spacing) * 3);
  }

  .mx-6-2xl {
    margin-left: calc(var(--spacing) * 4);
    margin-right: calc(var(--spacing) * 4);
  }

  .mx-7-2xl {
    margin-left: calc(var(--spacing) * 5);
    margin-right: calc(var(--spacing) * 5);
  }

  .mx-8-2xl {
    margin-left: calc(var(--spacing) * 6);
    margin-right: calc(var(--spacing) * 6);
  }

  .mx-9-2xl {
    margin-left: calc(var(--spacing) * 8);
    margin-right: calc(var(--spacing) * 8);
  }

  .mx-10-2xl {
    margin-left: calc(var(--spacing) * 10);
    margin-right: calc(var(--spacing) * 10);
  }
}

@media (min-width: 200rem) {
  .p-0-4xl {
    --padding: 0;
    padding: var(--padding);
  }

  .p-1-4xl {
    --padding: calc(var(--spacing) * .5);
    padding: var(--padding);
  }

  .p-2-4xl {
    --padding: calc(var(--spacing) * 1);
    padding: var(--padding);
  }

  .p-3-4xl {
    --padding: calc(var(--spacing) * 1.5);
    padding: var(--padding);
  }

  .p-4-4xl {
    --padding: calc(var(--spacing) * 2);
    padding: var(--padding);
  }

  .p-5-4xl {
    --padding: calc(var(--spacing) * 3);
    padding: var(--padding);
  }

  .p-6-4xl {
    --padding: calc(var(--spacing) * 4);
    padding: var(--padding);
  }

  .p-7-4xl {
    --padding: calc(var(--spacing) * 5);
    padding: var(--padding);
  }

  .p-8-4xl {
    --padding: calc(var(--spacing) * 6);
    padding: var(--padding);
  }

  .p-9-4xl {
    --padding: calc(var(--spacing) * 8);
    padding: var(--padding);
  }

  .p-10-4xl {
    --padding: calc(var(--spacing) * 10);
    padding: var(--padding);
  }

  .pl-0-4xl {
    padding-left: 0;
  }

  .pl-1-4xl {
    padding-left: calc(var(--spacing) * .5);
  }

  .pl-2-4xl {
    padding-left: calc(var(--spacing) * 1);
  }

  .pl-3-4xl {
    padding-left: calc(var(--spacing) * 1.5);
  }

  .pl-4-4xl {
    padding-left: calc(var(--spacing) * 2);
  }

  .pl-5-4xl {
    padding-left: calc(var(--spacing) * 3);
  }

  .pl-6-4xl {
    padding-left: calc(var(--spacing) * 4);
  }

  .pl-7-4xl {
    padding-left: calc(var(--spacing) * 5);
  }

  .pl-8-4xl {
    padding-left: calc(var(--spacing) * 6);
  }

  .pl-9-4xl {
    padding-left: calc(var(--spacing) * 8);
  }

  .pl-10-4xl {
    padding-left: calc(var(--spacing) * 10);
  }

  .pr-0-4xl {
    padding-right: 0;
  }

  .pr-1-4xl {
    padding-right: calc(var(--spacing) * .5);
  }

  .pr-2-4xl {
    padding-right: calc(var(--spacing) * 1);
  }

  .pr-3-4xl {
    padding-right: calc(var(--spacing) * 1.5);
  }

  .pr-4-4xl {
    padding-right: calc(var(--spacing) * 2);
  }

  .pr-5-4xl {
    padding-right: calc(var(--spacing) * 3);
  }

  .pr-6-4xl {
    padding-right: calc(var(--spacing) * 4);
  }

  .pr-7-4xl {
    padding-right: calc(var(--spacing) * 5);
  }

  .pr-8-4xl {
    padding-right: calc(var(--spacing) * 6);
  }

  .pr-9-4xl {
    padding-right: calc(var(--spacing) * 8);
  }

  .pr-10-4xl {
    padding-right: calc(var(--spacing) * 10);
  }

  .pb-0-4xl {
    padding-bottom: 0;
  }

  .pb-1-4xl {
    padding-bottom: calc(var(--spacing) * .5);
  }

  .pb-2-4xl {
    padding-bottom: calc(var(--spacing) * 1);
  }

  .pb-3-4xl {
    padding-bottom: calc(var(--spacing) * 1.5);
  }

  .pb-4-4xl {
    padding-bottom: calc(var(--spacing) * 2);
  }

  .pb-5-4xl {
    padding-bottom: calc(var(--spacing) * 3);
  }

  .pb-6-4xl {
    padding-bottom: calc(var(--spacing) * 4);
  }

  .pb-7-4xl {
    padding-bottom: calc(var(--spacing) * 5);
  }

  .pb-8-4xl {
    padding-bottom: calc(var(--spacing) * 6);
  }

  .pb-9-4xl {
    padding-bottom: calc(var(--spacing) * 8);
  }

  .pb-10-4xl {
    padding-bottom: calc(var(--spacing) * 10);
  }

  .pt-0-4xl {
    padding-top: 0;
  }

  .pt-1-4xl {
    padding-top: calc(var(--spacing) * .5);
  }

  .pt-2-4xl {
    padding-top: calc(var(--spacing) * 1);
  }

  .pt-3-4xl {
    padding-top: calc(var(--spacing) * 1.5);
  }

  .pt-4-4xl {
    padding-top: calc(var(--spacing) * 2);
  }

  .pt-5-4xl {
    padding-top: calc(var(--spacing) * 3);
  }

  .pt-6-4xl {
    padding-top: calc(var(--spacing) * 4);
  }

  .pt-7-4xl {
    padding-top: calc(var(--spacing) * 5);
  }

  .pt-8-4xl {
    padding-top: calc(var(--spacing) * 6);
  }

  .pt-9-4xl {
    padding-top: calc(var(--spacing) * 8);
  }

  .pt-10-4xl {
    padding-top: calc(var(--spacing) * 10);
  }

  .py-0-4xl {
    padding-top: 0;
    padding-bottom: 0;
  }

  .py-1-4xl {
    padding-top: calc(var(--spacing) * .5);
    padding-bottom: calc(var(--spacing) * .5);
  }

  .py-2-4xl {
    padding-top: calc(var(--spacing) * 1);
    padding-bottom: calc(var(--spacing) * 1);
  }

  .py-3-4xl {
    padding-top: calc(var(--spacing) * 1.5);
    padding-bottom: calc(var(--spacing) * 1.5);
  }

  .py-4-4xl {
    padding-top: calc(var(--spacing) * 2);
    padding-bottom: calc(var(--spacing) * 2);
  }

  .py-5-4xl {
    padding-top: calc(var(--spacing) * 3);
    padding-bottom: calc(var(--spacing) * 3);
  }

  .py-6-4xl {
    padding-top: calc(var(--spacing) * 4);
    padding-bottom: calc(var(--spacing) * 4);
  }

  .py-7-4xl {
    padding-top: calc(var(--spacing) * 5);
    padding-bottom: calc(var(--spacing) * 5);
  }

  .py-8-4xl {
    padding-top: calc(var(--spacing) * 6);
    padding-bottom: calc(var(--spacing) * 6);
  }

  .py-9-4xl {
    padding-top: calc(var(--spacing) * 8);
    padding-bottom: calc(var(--spacing) * 8);
  }

  .py-10-4xl {
    padding-top: calc(var(--spacing) * 10);
    padding-bottom: calc(var(--spacing) * 10);
  }

  .px-0-4xl {
    padding-left: 0;
    padding-right: 0;
  }

  .px-1-4xl {
    padding-left: calc(var(--spacing) * .5);
    padding-right: calc(var(--spacing) * .5);
  }

  .px-2-4xl {
    padding-left: calc(var(--spacing) * 1);
    padding-right: calc(var(--spacing) * 1);
  }

  .px-3-4xl {
    padding-left: calc(var(--spacing) * 1.5);
    padding-right: calc(var(--spacing) * 1.5);
  }

  .px-4-4xl {
    padding-left: calc(var(--spacing) * 2);
    padding-right: calc(var(--spacing) * 2);
  }

  .px-5-4xl {
    padding-left: calc(var(--spacing) * 3);
    padding-right: calc(var(--spacing) * 3);
  }

  .px-6-4xl {
    padding-left: calc(var(--spacing) * 4);
    padding-right: calc(var(--spacing) * 4);
  }

  .px-7-4xl {
    padding-left: calc(var(--spacing) * 5);
    padding-right: calc(var(--spacing) * 5);
  }

  .px-8-4xl {
    padding-left: calc(var(--spacing) * 6);
    padding-right: calc(var(--spacing) * 6);
  }

  .px-9-4xl {
    padding-left: calc(var(--spacing) * 8);
    padding-right: calc(var(--spacing) * 8);
  }

  .px-10-4xl {
    padding-left: calc(var(--spacing) * 10);
    padding-right: calc(var(--spacing) * 10);
  }

  .m-0-4xl {
    --margin: 0;
    margin: var(--margin);
  }

  .m-1-4xl {
    --margin: calc(var(--spacing) * .5);
    margin: var(--margin);
  }

  .m-2-4xl {
    --margin: calc(var(--spacing) * 1);
    margin: var(--margin);
  }

  .m-3-4xl {
    --margin: calc(var(--spacing) * 1.5);
    margin: var(--margin);
  }

  .m-4-4xl {
    --margin: calc(var(--spacing) * 2);
    margin: var(--margin);
  }

  .m-5-4xl {
    --margin: calc(var(--spacing) * 3);
    margin: var(--margin);
  }

  .m-6-4xl {
    --margin: calc(var(--spacing) * 4);
    margin: var(--margin);
  }

  .m-7-4xl {
    --margin: calc(var(--spacing) * 5);
    margin: var(--margin);
  }

  .m-8-4xl {
    --margin: calc(var(--spacing) * 6);
    margin: var(--margin);
  }

  .m-9-4xl {
    --margin: calc(var(--spacing) * 8);
    margin: var(--margin);
  }

  .m-10-4xl {
    --margin: calc(var(--spacing) * 10);
    margin: var(--margin);
  }

  .ml-0-4xl {
    margin-left: 0;
  }

  .ml-1-4xl {
    margin-left: calc(var(--spacing) * .5);
  }

  .ml-2-4xl {
    margin-left: calc(var(--spacing) * 1);
  }

  .ml-3-4xl {
    margin-left: calc(var(--spacing) * 1.5);
  }

  .ml-4-4xl {
    margin-left: calc(var(--spacing) * 2);
  }

  .ml-5-4xl {
    margin-left: calc(var(--spacing) * 3);
  }

  .ml-6-4xl {
    margin-left: calc(var(--spacing) * 4);
  }

  .ml-7-4xl {
    margin-left: calc(var(--spacing) * 5);
  }

  .ml-8-4xl {
    margin-left: calc(var(--spacing) * 6);
  }

  .ml-9-4xl {
    margin-left: calc(var(--spacing) * 8);
  }

  .ml-10-4xl {
    margin-left: calc(var(--spacing) * 10);
  }

  .mr-0-4xl {
    margin-right: 0;
  }

  .mr-1-4xl {
    margin-right: calc(var(--spacing) * .5);
  }

  .mr-2-4xl {
    margin-right: calc(var(--spacing) * 1);
  }

  .mr-3-4xl {
    margin-right: calc(var(--spacing) * 1.5);
  }

  .mr-4-4xl {
    margin-right: calc(var(--spacing) * 2);
  }

  .mr-5-4xl {
    margin-right: calc(var(--spacing) * 3);
  }

  .mr-6-4xl {
    margin-right: calc(var(--spacing) * 4);
  }

  .mr-7-4xl {
    margin-right: calc(var(--spacing) * 5);
  }

  .mr-8-4xl {
    margin-right: calc(var(--spacing) * 6);
  }

  .mr-9-4xl {
    margin-right: calc(var(--spacing) * 8);
  }

  .mr-10-4xl {
    margin-right: calc(var(--spacing) * 10);
  }

  .mb-0-4xl {
    margin-bottom: 0;
  }

  .mb-1-4xl {
    margin-bottom: calc(var(--spacing) * .5);
  }

  .mb-2-4xl {
    margin-bottom: calc(var(--spacing) * 1);
  }

  .mb-3-4xl {
    margin-bottom: calc(var(--spacing) * 1.5);
  }

  .mb-4-4xl {
    margin-bottom: calc(var(--spacing) * 2);
  }

  .mb-5-4xl {
    margin-bottom: calc(var(--spacing) * 3);
  }

  .mb-6-4xl {
    margin-bottom: calc(var(--spacing) * 4);
  }

  .mb-7-4xl {
    margin-bottom: calc(var(--spacing) * 5);
  }

  .mb-8-4xl {
    margin-bottom: calc(var(--spacing) * 6);
  }

  .mb-9-4xl {
    margin-bottom: calc(var(--spacing) * 8);
  }

  .mb-10-4xl {
    margin-bottom: calc(var(--spacing) * 10);
  }

  .mt-0-4xl {
    margin-top: 0;
  }

  .mt-1-4xl {
    margin-top: calc(var(--spacing) * .5);
  }

  .mt-2-4xl {
    margin-top: calc(var(--spacing) * 1);
  }

  .mt-3-4xl {
    margin-top: calc(var(--spacing) * 1.5);
  }

  .mt-4-4xl {
    margin-top: calc(var(--spacing) * 2);
  }

  .mt-5-4xl {
    margin-top: calc(var(--spacing) * 3);
  }

  .mt-6-4xl {
    margin-top: calc(var(--spacing) * 4);
  }

  .mt-7-4xl {
    margin-top: calc(var(--spacing) * 5);
  }

  .mt-8-4xl {
    margin-top: calc(var(--spacing) * 6);
  }

  .mt-9-4xl {
    margin-top: calc(var(--spacing) * 8);
  }

  .mt-10-4xl {
    margin-top: calc(var(--spacing) * 10);
  }

  .my-0-4xl {
    margin-top: 0;
    margin-bottom: 0;
  }

  .my-1-4xl {
    margin-top: calc(var(--spacing) * .5);
    margin-bottom: calc(var(--spacing) * .5);
  }

  .my-2-4xl {
    margin-top: calc(var(--spacing) * 1);
    margin-bottom: calc(var(--spacing) * 1);
  }

  .my-3-4xl {
    margin-top: calc(var(--spacing) * 1.5);
    margin-bottom: calc(var(--spacing) * 1.5);
  }

  .my-4-4xl {
    margin-top: calc(var(--spacing) * 2);
    margin-bottom: calc(var(--spacing) * 2);
  }

  .my-5-4xl {
    margin-top: calc(var(--spacing) * 3);
    margin-bottom: calc(var(--spacing) * 3);
  }

  .my-6-4xl {
    margin-top: calc(var(--spacing) * 4);
    margin-bottom: calc(var(--spacing) * 4);
  }

  .my-7-4xl {
    margin-top: calc(var(--spacing) * 5);
    margin-bottom: calc(var(--spacing) * 5);
  }

  .my-8-4xl {
    margin-top: calc(var(--spacing) * 6);
    margin-bottom: calc(var(--spacing) * 6);
  }

  .my-9-4xl {
    margin-top: calc(var(--spacing) * 8);
    margin-bottom: calc(var(--spacing) * 8);
  }

  .my-10-4xl {
    margin-top: calc(var(--spacing) * 10);
    margin-bottom: calc(var(--spacing) * 10);
  }

  .mx-0-4xl {
    margin-left: 0;
    margin-right: 0;
  }

  .mx-1-4xl {
    margin-left: calc(var(--spacing) * .5);
    margin-right: calc(var(--spacing) * .5);
  }

  .mx-2-4xl {
    margin-left: calc(var(--spacing) * 1);
    margin-right: calc(var(--spacing) * 1);
  }

  .mx-3-4xl {
    margin-left: calc(var(--spacing) * 1.5);
    margin-right: calc(var(--spacing) * 1.5);
  }

  .mx-4-4xl {
    margin-left: calc(var(--spacing) * 2);
    margin-right: calc(var(--spacing) * 2);
  }

  .mx-5-4xl {
    margin-left: calc(var(--spacing) * 3);
    margin-right: calc(var(--spacing) * 3);
  }

  .mx-6-4xl {
    margin-left: calc(var(--spacing) * 4);
    margin-right: calc(var(--spacing) * 4);
  }

  .mx-7-4xl {
    margin-left: calc(var(--spacing) * 5);
    margin-right: calc(var(--spacing) * 5);
  }

  .mx-8-4xl {
    margin-left: calc(var(--spacing) * 6);
    margin-right: calc(var(--spacing) * 6);
  }

  .mx-9-4xl {
    margin-left: calc(var(--spacing) * 8);
    margin-right: calc(var(--spacing) * 8);
  }

  .mx-10-4xl {
    margin-left: calc(var(--spacing) * 10);
    margin-right: calc(var(--spacing) * 10);
  }
}

/* src/box-sizing.css */
*, *:before, *:after, .border-box, .border-box:before, .border-box:after {
  box-sizing: border-box;
}

.content-box {
  box-sizing: content-box;
}

/* src/container-type.css */
.container-size {
  container-type: size;
}

.root, .container-inline {
  container-type: inline-size;
}

.container-normal {
  container-type: normal;
}

@media (max-width: 8rem) {
  .container-size-4xs {
    container-type: size;
  }

  .container-inline-4xs {
    container-type: inline-size;
  }

  .container-normal-4xs {
    container-type: normal;
  }
}

@media (min-width: calc(8rem + .001px)) {
  .container-size-2xs {
    container-type: size;
  }

  .container-inline-2xs {
    container-type: inline-size;
  }

  .container-normal-2xs {
    container-type: normal;
  }
}

@media (min-width: 20rem) {
  .container-size-xs {
    container-type: size;
  }

  .container-inline-xs {
    container-type: inline-size;
  }

  .container-normal-xs {
    container-type: normal;
  }
}

@media (min-width: 32rem) {
  .container-size-s {
    container-type: size;
  }

  .container-inline-s {
    container-type: inline-size;
  }

  .container-normal-s {
    container-type: normal;
  }
}

@media (min-width: 48rem) {
  .container-size-m {
    container-type: size;
  }

  .container-inline-m {
    container-type: inline-size;
  }

  .container-normal-m {
    container-type: normal;
  }
}

@media (min-width: 64rem) {
  .container-size-l {
    container-type: size;
  }

  .container-inline-l {
    container-type: inline-size;
  }

  .container-normal-l {
    container-type: normal;
  }
}

@media (min-width: 100rem) {
  .container-size-xl {
    container-type: size;
  }

  .container-inline-xl {
    container-type: inline-size;
  }

  .container-normal-xl {
    container-type: normal;
  }
}

@container (--2xl) {
  .container-size-2xl {
    container-type: size;
  }

  .container-inline-2xl {
    container-type: inline-size;
  }

  .container-normal-2xl {
    container-type: normal;
  }
}

@container (--4xl) {
  .container-size-4xl {
    container-type: size;
  }

  .container-inline-4xl {
    container-type: inline-size;
  }

  .container-normal-4xl {
    container-type: normal;
  }
}

/* src/all.css */
.unset {
  all: unset;
}

.initial {
  all: initial;
}

.inherit {
  all: inherit;
}

.revert {
  all: revert;
}

/* src/aspect-ratios.css */
.aspect-ratio-16x9 {
  aspect-ratio: 16 / 9;
}

.aspect-ratio-9x16 {
  aspect-ratio: 9 / 16;
}

.aspect-ratio-4x3 {
  aspect-ratio: 4 / 3;
}

.aspect-ratio-3x4 {
  aspect-ratio: 3 / 4;
}

.aspect-ratio-6x4 {
  aspect-ratio: 6 / 4;
}

.aspect-ratio-4x6 {
  aspect-ratio: 4 / 6;
}

.aspect-ratio-8x5 {
  aspect-ratio: 8 / 5;
}

.aspect-ratio-5x8 {
  aspect-ratio: 5 / 8;
}

.aspect-ratio-7x5 {
  aspect-ratio: 7 / 5;
}

.aspect-ratio-5x7 {
  aspect-ratio: 5 / 7;
}

.aspect-ratio-square, .aspect-ratio-1x1 {
  aspect-ratio: 1;
}

@media (max-width: 8rem) {
  .aspect-ratio-16x9-4xs {
    aspect-ratio: 16 / 9;
  }

  .aspect-ratio-9x16-4xs {
    aspect-ratio: 9 / 16;
  }

  .aspect-ratio-4x3-4xs {
    aspect-ratio: 4 / 3;
  }

  .aspect-ratio-3x4-4xs {
    aspect-ratio: 3 / 4;
  }

  .aspect-ratio-6x4-4xs {
    aspect-ratio: 6 / 4;
  }

  .aspect-ratio-4x6-4xs {
    aspect-ratio: 4 / 6;
  }

  .aspect-ratio-8x5-4xs {
    aspect-ratio: 8 / 5;
  }

  .aspect-ratio-5x8-4xs {
    aspect-ratio: 5 / 8;
  }

  .aspect-ratio-7x5-4xs {
    aspect-ratio: 7 / 5;
  }

  .aspect-ratio-5x7-4xs {
    aspect-ratio: 5 / 7;
  }

  .aspect-ratio-square-4xs, .aspect-ratio-1x1-4xs {
    aspect-ratio: 1;
  }
}

@media (min-width: calc(8rem + .001px)) {
  .aspect-ratio-16x9-2xs {
    aspect-ratio: 16 / 9;
  }

  .aspect-ratio-9x16-2xs {
    aspect-ratio: 9 / 16;
  }

  .aspect-ratio-4x3-2xs {
    aspect-ratio: 4 / 3;
  }

  .aspect-ratio-3x4-2xs {
    aspect-ratio: 3 / 4;
  }

  .aspect-ratio-6x4-2xs {
    aspect-ratio: 6 / 4;
  }

  .aspect-ratio-4x6-2xs {
    aspect-ratio: 4 / 6;
  }

  .aspect-ratio-8x5-2xs {
    aspect-ratio: 8 / 5;
  }

  .aspect-ratio-5x8-2xs {
    aspect-ratio: 5 / 8;
  }

  .aspect-ratio-7x5-2xs {
    aspect-ratio: 7 / 5;
  }

  .aspect-ratio-5x7-2xs {
    aspect-ratio: 5 / 7;
  }

  .aspect-ratio-square-2xs, .aspect-ratio-1x1-2xs {
    aspect-ratio: 1;
  }
}

@media (min-width: 20rem) {
  .aspect-ratio-16x9-xs {
    aspect-ratio: 16 / 9;
  }

  .aspect-ratio-9x16-xs {
    aspect-ratio: 9 / 16;
  }

  .aspect-ratio-4x3-xs {
    aspect-ratio: 4 / 3;
  }

  .aspect-ratio-3x4-xs {
    aspect-ratio: 3 / 4;
  }

  .aspect-ratio-6x4-xs {
    aspect-ratio: 6 / 4;
  }

  .aspect-ratio-4x6-xs {
    aspect-ratio: 4 / 6;
  }

  .aspect-ratio-8x5-xs {
    aspect-ratio: 8 / 5;
  }

  .aspect-ratio-5x8-xs {
    aspect-ratio: 5 / 8;
  }

  .aspect-ratio-7x5-xs {
    aspect-ratio: 7 / 5;
  }

  .aspect-ratio-5x7-xs {
    aspect-ratio: 5 / 7;
  }

  .aspect-ratio-square-xs, .aspect-ratio-1x1-xs {
    aspect-ratio: 1;
  }
}

@media (min-width: 32rem) {
  .aspect-ratio-16x9-s {
    aspect-ratio: 16 / 9;
  }

  .aspect-ratio-9x16-s {
    aspect-ratio: 9 / 16;
  }

  .aspect-ratio-4x3-s {
    aspect-ratio: 4 / 3;
  }

  .aspect-ratio-3x4-s {
    aspect-ratio: 3 / 4;
  }

  .aspect-ratio-6x4-s {
    aspect-ratio: 6 / 4;
  }

  .aspect-ratio-4x6-s {
    aspect-ratio: 4 / 6;
  }

  .aspect-ratio-8x5-s {
    aspect-ratio: 8 / 5;
  }

  .aspect-ratio-5x8-s {
    aspect-ratio: 5 / 8;
  }

  .aspect-ratio-7x5-s {
    aspect-ratio: 7 / 5;
  }

  .aspect-ratio-5x7-s {
    aspect-ratio: 5 / 7;
  }

  .aspect-ratio-square-s, .aspect-ratio-1x1-s {
    aspect-ratio: 1;
  }
}

@media (min-width: 48rem) {
  .aspect-ratio-16x9-m {
    aspect-ratio: 16 / 9;
  }

  .aspect-ratio-9x16-m {
    aspect-ratio: 9 / 16;
  }

  .aspect-ratio-4x3-m {
    aspect-ratio: 4 / 3;
  }

  .aspect-ratio-3x4-m {
    aspect-ratio: 3 / 4;
  }

  .aspect-ratio-6x4-m {
    aspect-ratio: 6 / 4;
  }

  .aspect-ratio-4x6-m {
    aspect-ratio: 4 / 6;
  }

  .aspect-ratio-8x5-m {
    aspect-ratio: 8 / 5;
  }

  .aspect-ratio-5x8-m {
    aspect-ratio: 5 / 8;
  }

  .aspect-ratio-7x5-m {
    aspect-ratio: 7 / 5;
  }

  .aspect-ratio-5x7-m {
    aspect-ratio: 5 / 7;
  }

  .aspect-ratio-square-m, .aspect-ratio-1x1-m {
    aspect-ratio: 1;
  }
}

@media (min-width: 64rem) {
  .aspect-ratio-16x9-l {
    aspect-ratio: 16 / 9;
  }

  .aspect-ratio-9x16-l {
    aspect-ratio: 9 / 16;
  }

  .aspect-ratio-4x3-l {
    aspect-ratio: 4 / 3;
  }

  .aspect-ratio-3x4-l {
    aspect-ratio: 3 / 4;
  }

  .aspect-ratio-6x4-l {
    aspect-ratio: 6 / 4;
  }

  .aspect-ratio-4x6-l {
    aspect-ratio: 4 / 6;
  }

  .aspect-ratio-8x5-l {
    aspect-ratio: 8 / 5;
  }

  .aspect-ratio-5x8-l {
    aspect-ratio: 5 / 8;
  }

  .aspect-ratio-7x5-l {
    aspect-ratio: 7 / 5;
  }

  .aspect-ratio-5x7-l {
    aspect-ratio: 5 / 7;
  }

  .aspect-ratio-square-l, .aspect-ratio-1x1-l {
    aspect-ratio: 1;
  }
}

@media (min-width: 100rem) {
  .aspect-ratio-16x9-xl {
    aspect-ratio: 16 / 9;
  }

  .aspect-ratio-9x16-xl {
    aspect-ratio: 9 / 16;
  }

  .aspect-ratio-4x3-xl {
    aspect-ratio: 4 / 3;
  }

  .aspect-ratio-3x4-xl {
    aspect-ratio: 3 / 4;
  }

  .aspect-ratio-6x4-xl {
    aspect-ratio: 6 / 4;
  }

  .aspect-ratio-4x6-xl {
    aspect-ratio: 4 / 6;
  }

  .aspect-ratio-8x5-xl {
    aspect-ratio: 8 / 5;
  }

  .aspect-ratio-5x8-xl {
    aspect-ratio: 5 / 8;
  }

  .aspect-ratio-7x5-xl {
    aspect-ratio: 7 / 5;
  }

  .aspect-ratio-5x7-xl {
    aspect-ratio: 5 / 7;
  }

  .aspect-ratio-square-xl, .aspect-ratio-1x1-xl {
    aspect-ratio: 1;
  }
}

@container (--2xl) {
  .aspect-ratio-16x9-2xl {
    aspect-ratio: 16 / 9;
  }

  .aspect-ratio-9x16-2xl {
    aspect-ratio: 9 / 16;
  }

  .aspect-ratio-4x3-2xl {
    aspect-ratio: 4 / 3;
  }

  .aspect-ratio-3x4-2xl {
    aspect-ratio: 3 / 4;
  }

  .aspect-ratio-6x4-2xl {
    aspect-ratio: 6 / 4;
  }

  .aspect-ratio-4x6-2xl {
    aspect-ratio: 4 / 6;
  }

  .aspect-ratio-8x5-2xl {
    aspect-ratio: 8 / 5;
  }

  .aspect-ratio-5x8-2xl {
    aspect-ratio: 5 / 8;
  }

  .aspect-ratio-7x5-2xl {
    aspect-ratio: 7 / 5;
  }

  .aspect-ratio-5x7-2xl {
    aspect-ratio: 5 / 7;
  }

  .aspect-ratio-square-2xl {
    aspect-ratio: 1;
  }

  .aspect-ratio-1x1-2xl {
    aspect-ratio: 1;
  }
}

@container (--4xl) {
  .aspect-ratio-16x9-4xl {
    aspect-ratio: 16 / 9;
  }

  .aspect-ratio-9x16-4xl {
    aspect-ratio: 9 / 16;
  }

  .aspect-ratio-4x3-4xl {
    aspect-ratio: 4 / 3;
  }

  .aspect-ratio-3x4-4xl {
    aspect-ratio: 3 / 4;
  }

  .aspect-ratio-6x4-4xl {
    aspect-ratio: 6 / 4;
  }

  .aspect-ratio-4x6-4xl {
    aspect-ratio: 4 / 6;
  }

  .aspect-ratio-8x5-4xl {
    aspect-ratio: 8 / 5;
  }

  .aspect-ratio-5x8-4xl {
    aspect-ratio: 5 / 8;
  }

  .aspect-ratio-7x5-4xl {
    aspect-ratio: 7 / 5;
  }

  .aspect-ratio-5x7-4xl {
    aspect-ratio: 5 / 7;
  }

  .aspect-ratio-square-4xl {
    aspect-ratio: 1;
  }

  .aspect-ratio-1x1-4xl {
    aspect-ratio: 1;
  }
}

/* src/images.css */
img {
  display: block;
  max-width: 100%;
}

.random-image {
  background-image: url("https://source.unsplash.com/random/");
  background-size: cover;
}

.random-image-landscape {
  background-image: url("https://source.unsplash.com/random/1920x1080");
  background-size: cover;
}

.random-image-portrait {
  background-image: url("https://source.unsplash.com/random/1080x1920");
  background-size: cover;
}

/* src/background-size.css */
.cover {
  background-size: cover !important;
}

.contain {
  background-size: contain !important;
}

.bg1 {
  background-size: 4px;
}

.bg2 {
  background-size: 8px;
}

.bg3 {
  background-size: 16px;
}

.bg4 {
  background-size: 32px;
}

.bg5 {
  background-size: 64px;
}

.bg6 {
  background-size: 100%;
}

.bg7 {
  background-size: 150%;
}

.bg8 {
  background-size: 200%;
}

@media (max-width: 8rem) {
  .cover-4xs {
    background-size: cover !important;
  }

  .contain-4xs {
    background-size: contain !important;
  }

  .bg1-4xs {
    background-size: 4px;
  }

  .bg2-4xs {
    background-size: 8px;
  }

  .bg3-4xs {
    background-size: 16px;
  }

  .bg4-4xs {
    background-size: 32px;
  }

  .bg5-4xs {
    background-size: 64px;
  }

  .bg6-4xs {
    background-size: 100%;
  }

  .bg7-4xs {
    background-size: 150%;
  }

  .bg8-4xs {
    background-size: 200%;
  }
}

@media (min-width: calc(8rem + .001px)) {
  .cover-2xs {
    background-size: cover !important;
  }

  .contain-2xs {
    background-size: contain !important;
  }

  .bg1-2xs {
    background-size: 4px;
  }

  .bg2-2xs {
    background-size: 8px;
  }

  .bg3-2xs {
    background-size: 16px;
  }

  .bg4-2xs {
    background-size: 32px;
  }

  .bg5-2xs {
    background-size: 64px;
  }

  .bg6-2xs {
    background-size: 100%;
  }

  .bg7-2xs {
    background-size: 150%;
  }

  .bg8-2xs {
    background-size: 200%;
  }
}

@media (min-width: 20rem) {
  .cover-xs {
    background-size: cover !important;
  }

  .contain-xs {
    background-size: contain !important;
  }

  .bg1-xs {
    background-size: 4px;
  }

  .bg2-xs {
    background-size: 8px;
  }

  .bg3-xs {
    background-size: 16px;
  }

  .bg4-xs {
    background-size: 32px;
  }

  .bg5-xs {
    background-size: 64px;
  }

  .bg6-xs {
    background-size: 100%;
  }

  .bg7-xs {
    background-size: 150%;
  }

  .bg8-xs {
    background-size: 200%;
  }
}

@media (min-width: 32rem) {
  .cover-s {
    background-size: cover !important;
  }

  .contain-s {
    background-size: contain !important;
  }

  .bg1-s {
    background-size: 4px;
  }

  .bg2-s {
    background-size: 8px;
  }

  .bg3-s {
    background-size: 16px;
  }

  .bg4-s {
    background-size: 32px;
  }

  .bg5-s {
    background-size: 64px;
  }

  .bg6-s {
    background-size: 100%;
  }

  .bg7-s {
    background-size: 150%;
  }

  .bg8-s {
    background-size: 200%;
  }
}

@media (min-width: 48rem) {
  .cover-m {
    background-size: cover !important;
  }

  .contain-m {
    background-size: contain !important;
  }

  .bg1-m {
    background-size: 4px;
  }

  .bg2-m {
    background-size: 8px;
  }

  .bg3-m {
    background-size: 16px;
  }

  .bg4-m {
    background-size: 32px;
  }

  .bg5-m {
    background-size: 64px;
  }

  .bg6-m {
    background-size: 100%;
  }

  .bg7-m {
    background-size: 150%;
  }

  .bg8-m {
    background-size: 200%;
  }
}

@media (min-width: 64rem) {
  .cover-l {
    background-size: cover !important;
  }

  .contain-l {
    background-size: contain !important;
  }

  .bg1-l {
    background-size: 4px;
  }

  .bg2-l {
    background-size: 8px;
  }

  .bg3-l {
    background-size: 16px;
  }

  .bg4-l {
    background-size: 32px;
  }

  .bg5-l {
    background-size: 64px;
  }

  .bg6-l {
    background-size: 100%;
  }

  .bg7-l {
    background-size: 150%;
  }

  .bg8-l {
    background-size: 200%;
  }
}

@media (min-width: 100rem) {
  .cover-xl {
    background-size: cover !important;
  }

  .contain-xl {
    background-size: contain !important;
  }

  .bg1-xl {
    background-size: 4px;
  }

  .bg2-xl {
    background-size: 8px;
  }

  .bg3-xl {
    background-size: 16px;
  }

  .bg4-xl {
    background-size: 32px;
  }

  .bg5-xl {
    background-size: 64px;
  }

  .bg6-xl {
    background-size: 100%;
  }

  .bg7-xl {
    background-size: 150%;
  }

  .bg8-xl {
    background-size: 200%;
  }
}

@container (--2xl) {
  .cover-2xl {
    background-size: cover !important;
  }

  .contain-2xl {
    background-size: contain !important;
  }

  .bg1-2xl {
    background-size: 4px;
  }

  .bg2-2xl {
    background-size: 8px;
  }

  .bg3-2xl {
    background-size: 16px;
  }

  .bg4-2xl {
    background-size: 32px;
  }

  .bg5-2xl {
    background-size: 64px;
  }

  .bg6-2xl {
    background-size: 100%;
  }

  .bg7-2xl {
    background-size: 150%;
  }

  .bg8-2xl {
    background-size: 200%;
  }
}

@container (--4xl) {
  .cover-4xl {
    background-size: cover !important;
  }

  .contain-4xl {
    background-size: contain !important;
  }

  .bg1-4xl {
    background-size: 4px;
  }

  .bg2-4xl {
    background-size: 8px;
  }

  .bg3-4xl {
    background-size: 16px;
  }

  .bg4-4xl {
    background-size: 32px;
  }

  .bg5-4xl {
    background-size: 64px;
  }

  .bg6-4xl {
    background-size: 100%;
  }

  .bg7-4xl {
    background-size: 150%;
  }

  .bg8-4xl {
    background-size: 200%;
  }
}

/* src/background-position.css */
.bg-center {
  background-position: center;
  background-repeat: no-repeat;
}

.bg-top {
  background-position: top;
  background-repeat: no-repeat;
}

.bg-right {
  background-position: right center;
  background-repeat: no-repeat;
}

.bg-bottom {
  background-position: bottom;
  background-repeat: no-repeat;
}

.bg-left {
  background-position: 0;
  background-repeat: no-repeat;
}

@media (max-width: 8rem) {
  .bg-center-4xs {
    background-position: center;
    background-repeat: no-repeat;
  }

  .bg-top-4xs {
    background-position: top;
    background-repeat: no-repeat;
  }

  .bg-right-4xs {
    background-position: right center;
    background-repeat: no-repeat;
  }

  .bg-bottom-4xs {
    background-position: bottom;
    background-repeat: no-repeat;
  }

  .bg-left-4xs {
    background-position: 0;
    background-repeat: no-repeat;
  }
}

@media (min-width: calc(8rem + .001px)) {
  .bg-center-2xs {
    background-position: center;
    background-repeat: no-repeat;
  }

  .bg-top-2xs {
    background-position: top;
    background-repeat: no-repeat;
  }

  .bg-right-2xs {
    background-position: right center;
    background-repeat: no-repeat;
  }

  .bg-bottom-2xs {
    background-position: bottom;
    background-repeat: no-repeat;
  }

  .bg-left-2xs {
    background-position: 0;
    background-repeat: no-repeat;
  }
}

@media (min-width: 20rem) {
  .bg-center-xs {
    background-position: center;
    background-repeat: no-repeat;
  }

  .bg-top-xs {
    background-position: top;
    background-repeat: no-repeat;
  }

  .bg-right-xs {
    background-position: right center;
    background-repeat: no-repeat;
  }

  .bg-bottom-xs {
    background-position: bottom;
    background-repeat: no-repeat;
  }

  .bg-left-xs {
    background-position: 0;
    background-repeat: no-repeat;
  }
}

@media (min-width: 32rem) {
  .bg-center-s {
    background-position: center;
    background-repeat: no-repeat;
  }

  .bg-top-s {
    background-position: top;
    background-repeat: no-repeat;
  }

  .bg-right-s {
    background-position: right center;
    background-repeat: no-repeat;
  }

  .bg-bottom-s {
    background-position: bottom;
    background-repeat: no-repeat;
  }

  .bg-left-s {
    background-position: 0;
    background-repeat: no-repeat;
  }
}

@media (min-width: 48rem) {
  .bg-center-m {
    background-position: center;
    background-repeat: no-repeat;
  }

  .bg-top-m {
    background-position: top;
    background-repeat: no-repeat;
  }

  .bg-right-m {
    background-position: right center;
    background-repeat: no-repeat;
  }

  .bg-bottom-m {
    background-position: bottom;
    background-repeat: no-repeat;
  }

  .bg-left-m {
    background-position: 0;
    background-repeat: no-repeat;
  }
}

@media (min-width: 64rem) {
  .bg-center-l {
    background-position: center;
    background-repeat: no-repeat;
  }

  .bg-top-l {
    background-position: top;
    background-repeat: no-repeat;
  }

  .bg-right-l {
    background-position: right center;
    background-repeat: no-repeat;
  }

  .bg-bottom-l {
    background-position: bottom;
    background-repeat: no-repeat;
  }

  .bg-left-l {
    background-position: 0;
    background-repeat: no-repeat;
  }
}

@media (min-width: 100rem) {
  .bg-center-xl {
    background-position: center;
    background-repeat: no-repeat;
  }

  .bg-top-xl {
    background-position: top;
    background-repeat: no-repeat;
  }

  .bg-right-xl {
    background-position: right center;
    background-repeat: no-repeat;
  }

  .bg-bottom-xl {
    background-position: bottom;
    background-repeat: no-repeat;
  }

  .bg-left-xl {
    background-position: 0;
    background-repeat: no-repeat;
  }
}

@container (--2xl) {
  .bg-center-2xl {
    background-repeat: no-repeat;
    background-position: center;
  }

  .bg-top-2xl {
    background-repeat: no-repeat;
    background-position: top;
  }

  .bg-right-2xl {
    background-repeat: no-repeat;
    background-position: right center;
  }

  .bg-bottom-2xl {
    background-repeat: no-repeat;
    background-position: bottom;
  }

  .bg-left-2xl {
    background-repeat: no-repeat;
    background-position: 0;
  }
}

@container (--4xl) {
  .bg-center-4xl {
    background-repeat: no-repeat;
    background-position: center;
  }

  .bg-top-4xl {
    background-repeat: no-repeat;
    background-position: top;
  }

  .bg-right-4xl {
    background-repeat: no-repeat;
    background-position: right center;
  }

  .bg-bottom-4xl {
    background-repeat: no-repeat;
    background-position: bottom;
  }

  .bg-left-4xl {
    background-repeat: no-repeat;
    background-position: 0;
  }
}

/* src/outlines.css */
.outline {
  outline: var(--border-width, 1px) solid currentColor;
}

.outline-color {
  outline: var(--border-width, 1px) solid var(--border-color, gray);
}

.outline-transparent {
  outline: var(--border-width, 1px) solid transparent;
}

.outline-0 {
  outline: 0;
}

@media (max-width: 8rem) {
  .outline-4xs {
    outline: var(--border-width, 1px) solid currentColor;
  }

  .outline-color-4xs {
    outline: var(--border-width, 1px) solid var(--border-color, gray);
  }

  .outline-transparent-4xs {
    outline: var(--border-width, 1px) solid transparent;
  }

  .outline-0-4xs {
    outline: 0;
  }
}

@media (min-width: calc(8rem + .001px)) {
  .outline-2xs {
    outline: var(--border-width, 1px) solid currentColor;
  }

  .outline-color-2xs {
    outline: var(--border-width, 1px) solid var(--border-color, gray);
  }

  .outline-transparent-2xs {
    outline: var(--border-width, 1px) solid transparent;
  }

  .outline-0-2xs {
    outline: 0;
  }
}

@media (min-width: 20rem) {
  .outline-xs {
    outline: var(--border-width, 1px) solid currentColor;
  }

  .outline-color-xs {
    outline: var(--border-width, 1px) solid var(--border-color, gray);
  }

  .outline-transparent-xs {
    outline: var(--border-width, 1px) solid transparent;
  }

  .outline-0-xs {
    outline: 0;
  }
}

@media (min-width: 32rem) {
  .outline-s {
    outline: var(--border-width, 1px) solid currentColor;
  }

  .outline-color-s {
    outline: var(--border-width, 1px) solid var(--border-color, gray);
  }

  .outline-transparent-s {
    outline: var(--border-width, 1px) solid transparent;
  }

  .outline-0-s {
    outline: 0;
  }
}

@media (min-width: 48rem) {
  .outline-m {
    outline: var(--border-width, 1px) solid currentColor;
  }

  .outline-color-m {
    outline: var(--border-width, 1px) solid var(--border-color, gray);
  }

  .outline-transparent-m {
    outline: var(--border-width, 1px) solid transparent;
  }

  .outline-0-m {
    outline: 0;
  }
}

@media (min-width: 64rem) {
  .outline-l {
    outline: var(--border-width, 1px) solid currentColor;
  }

  .outline-color-l {
    outline: var(--border-width, 1px) solid var(--border-color, gray);
  }

  .outline-transparent-l {
    outline: var(--border-width, 1px) solid transparent;
  }

  .outline-0-l {
    outline: 0;
  }
}

@media (min-width: 100rem) {
  .outline-xl {
    outline: var(--border-width, 1px) solid currentColor;
  }

  .outline-color-xl {
    outline: var(--border-width, 1px) solid var(--border-color, gray);
  }

  .outline-transparent-xl {
    outline: var(--border-width, 1px) solid transparent;
  }

  .outline-0-xl {
    outline: 0;
  }
}

@media (min-width: 130rem) {
  .outline-2xl {
    outline: var(--border-width, 1px) solid currentColor;
  }

  .outline-color-2xl {
    outline: var(--border-width, 1px) solid var(--border-color, gray);
  }

  .outline-transparent-2xl {
    outline: var(--border-width, 1px) solid transparent;
  }

  .outline-0-2xl {
    outline: 0;
  }
}

@media (min-width: 200rem) {
  .outline-4xl {
    outline: var(--border-width, 1px) solid currentColor;
  }

  .outline-color-4xl {
    outline: var(--border-width, 1px) solid var(--border-color, gray);
  }

  .outline-transparent-4xl {
    outline: var(--border-width, 1px) solid transparent;
  }

  .outline-0-4xl {
    outline: 0;
  }
}

/* src/borders.css */
.b {
  border-style: solid;
  border-width: var(--border-width, 12px);
}

.bt {
  border-top-style: solid;
  border-top-width: var(--border-width, 1px);
}

.br {
  border-right-style: solid;
  border-right-width: var(--border-width, 1px);
}

.bb {
  border-bottom-style: solid;
  border-bottom-width: var(--border-width, 1px);
}

.bl {
  border-left-style: solid;
  border-left-width: var(--border-width, 1px);
}

.bn {
  border-style: none;
  border-width: 0;
}

@media (max-width: 8rem) {
  .b-4xs {
    border-style: solid;
    border-width: var(--border-width, 12px);
  }

  .bt-4xs {
    border-top-style: solid;
    border-top-width: var(--border-width, 1px);
  }

  .br-4xs {
    border-right-style: solid;
    border-right-width: var(--border-width, 1px);
  }

  .bb-4xs {
    border-bottom-style: solid;
    border-bottom-width: var(--border-width, 1px);
  }

  .bl-4xs {
    border-left-style: solid;
    border-left-width: var(--border-width, 1px);
  }

  .bn-4xs {
    border-style: none;
    border-width: 0;
  }
}

@media (min-width: calc(8rem + .001px)) {
  .b-2xs {
    border-style: solid;
    border-width: var(--border-width, 12px);
  }

  .bt-2xs {
    border-top-style: solid;
    border-top-width: var(--border-width, 1px);
  }

  .br-2xs {
    border-right-style: solid;
    border-right-width: var(--border-width, 1px);
  }

  .bb-2xs {
    border-bottom-style: solid;
    border-bottom-width: var(--border-width, 1px);
  }

  .bl-2xs {
    border-left-style: solid;
    border-left-width: var(--border-width, 1px);
  }

  .bn-2xs {
    border-style: none;
    border-width: 0;
  }
}

@media (min-width: 20rem) {
  .b-xs {
    border-style: solid;
    border-width: var(--border-width, 12px);
  }

  .bt-xs {
    border-top-style: solid;
    border-top-width: var(--border-width, 1px);
  }

  .br-xs {
    border-right-style: solid;
    border-right-width: var(--border-width, 1px);
  }

  .bb-xs {
    border-bottom-style: solid;
    border-bottom-width: var(--border-width, 1px);
  }

  .bl-xs {
    border-left-style: solid;
    border-left-width: var(--border-width, 1px);
  }

  .bn-xs {
    border-style: none;
    border-width: 0;
  }
}

@media (min-width: 32rem) {
  .b-s {
    border-style: solid;
    border-width: var(--border-width, 12px);
  }

  .bt-s {
    border-top-style: solid;
    border-top-width: var(--border-width, 1px);
  }

  .br-s {
    border-right-style: solid;
    border-right-width: var(--border-width, 1px);
  }

  .bb-s {
    border-bottom-style: solid;
    border-bottom-width: var(--border-width, 1px);
  }

  .bl-s {
    border-left-style: solid;
    border-left-width: var(--border-width, 1px);
  }

  .bn-s {
    border-style: none;
    border-width: 0;
  }
}

@media (min-width: 48rem) {
  .b-m {
    border-style: solid;
    border-width: var(--border-width, 12px);
  }

  .bt-m {
    border-top-style: solid;
    border-top-width: var(--border-width, 1px);
  }

  .br-m {
    border-right-style: solid;
    border-right-width: var(--border-width, 1px);
  }

  .bb-m {
    border-bottom-style: solid;
    border-bottom-width: var(--border-width, 1px);
  }

  .bl-m {
    border-left-style: solid;
    border-left-width: var(--border-width, 1px);
  }

  .bn-m {
    border-style: none;
    border-width: 0;
  }
}

@media (min-width: 64rem) {
  .b-l {
    border-style: solid;
    border-width: var(--border-width, 12px);
  }

  .bt-l {
    border-top-style: solid;
    border-top-width: var(--border-width, 1px);
  }

  .br-l {
    border-right-style: solid;
    border-right-width: var(--border-width, 1px);
  }

  .bb-l {
    border-bottom-style: solid;
    border-bottom-width: var(--border-width, 1px);
  }

  .bl-l {
    border-left-style: solid;
    border-left-width: var(--border-width, 1px);
  }

  .bn-l {
    border-style: none;
    border-width: 0;
  }
}

@media (min-width: 100rem) {
  .b-xl {
    border-style: solid;
    border-width: var(--border-width, 12px);
  }

  .bt-xl {
    border-top-style: solid;
    border-top-width: var(--border-width, 1px);
  }

  .br-xl {
    border-right-style: solid;
    border-right-width: var(--border-width, 1px);
  }

  .bb-xl {
    border-bottom-style: solid;
    border-bottom-width: var(--border-width, 1px);
  }

  .bl-xl {
    border-left-style: solid;
    border-left-width: var(--border-width, 1px);
  }

  .bn-xl {
    border-style: none;
    border-width: 0;
  }
}

@container (--2xl) {
  .b-2xl {
    border-style: solid;
    border-width: var(--border-width, 12px);
  }

  .bt-2xl {
    border-top-style: solid;
    border-top-width: var(--border-width, 1px);
  }

  .br-2xl {
    border-right-style: solid;
    border-right-width: var(--border-width, 1px);
  }

  .bb-2xl {
    border-bottom-style: solid;
    border-bottom-width: var(--border-width, 1px);
  }

  .bl-2xl {
    border-left-style: solid;
    border-left-width: var(--border-width, 1px);
  }

  .bn-2xl {
    border-style: none;
    border-width: 0;
  }
}

@container (--4xl) {
  .b-4xl {
    border-style: solid;
    border-width: var(--border-width, 12px);
  }

  .bt-4xl {
    border-top-style: solid;
    border-top-width: var(--border-width, 1px);
  }

  .br-4xl {
    border-right-style: solid;
    border-right-width: var(--border-width, 1px);
  }

  .bb-4xl {
    border-bottom-style: solid;
    border-bottom-width: var(--border-width, 1px);
  }

  .bl-4xl {
    border-left-style: solid;
    border-left-width: var(--border-width, 1px);
  }

  .bn-4xl {
    border-style: none;
    border-width: 0;
  }
}

/* src/border-colors.css */
.b-transparent {
  border-color: #0000;
}

.b-current {
  border-color: currentColor;
}

.b-inherit {
  border-color: inherit;
}

.b-initial {
  border-color: initial;
}

.b-unset {
  border-color: unset;
}

.b-background {
  border-color: var(--background);
}

.b-background-dim-0 {
  border-color: color-mix(in srgb, var(--background), var(--dim-target) var(--dim-0));
}

.b-background-dim-1 {
  border-color: color-mix(in srgb, var(--background), var(--dim-target) var(--dim-1));
}

.b-background-dim-2 {
  border-color: color-mix(in srgb, var(--background), var(--dim-target) var(--dim-2));
}

.b-background-dim-3 {
  border-color: color-mix(in srgb, var(--background), var(--dim-target) var(--dim-3));
}

.b-background-dim-4 {
  border-color: color-mix(in srgb, var(--background), var(--dim-target) var(--dim-4));
}

.b-background-dim-5 {
  border-color: color-mix(in srgb, var(--background), var(--dim-target) var(--dim-5));
}

.b-background-dim-6 {
  border-color: color-mix(in srgb, var(--background), var(--dim-target) var(--dim-6));
}

.b-background-dim-7 {
  border-color: color-mix(in srgb, var(--background), var(--dim-target) var(--dim-7));
}

.b-background-dim-8 {
  border-color: color-mix(in srgb, var(--background), var(--dim-target) var(--dim-8));
}

.b-background-dim-9 {
  border-color: color-mix(in srgb, var(--background), var(--dim-target) var(--dim-9));
}

.b-background-hover:hover {
  border-color: var(--background);
}

.b-background-dim-0-hover:hover {
  border-color: color-mix(in srgb, var(--background), var(--dim-target) var(--dim-0));
}

.b-background-dim-1-hover:hover {
  border-color: color-mix(in srgb, var(--background), var(--dim-target) var(--dim-1));
}

.b-background-dim-2-hover:hover {
  border-color: color-mix(in srgb, var(--background), var(--dim-target) var(--dim-2));
}

.b-background-dim-3-hover:hover {
  border-color: color-mix(in srgb, var(--background), var(--dim-target) var(--dim-3));
}

.b-background-dim-4-hover:hover {
  border-color: color-mix(in srgb, var(--background), var(--dim-target) var(--dim-4));
}

.b-background-dim-5-hover:hover {
  border-color: color-mix(in srgb, var(--background), var(--dim-target) var(--dim-5));
}

.b-background-dim-6-hover:hover {
  border-color: color-mix(in srgb, var(--background), var(--dim-target) var(--dim-6));
}

.b-background-dim-7-hover:hover {
  border-color: color-mix(in srgb, var(--background), var(--dim-target) var(--dim-7));
}

.b-background-dim-8-hover:hover {
  border-color: color-mix(in srgb, var(--background), var(--dim-target) var(--dim-8));
}

.b-background-dim-9-hover:hover {
  border-color: color-mix(in srgb, var(--background), var(--dim-target) var(--dim-9));
}

.b-foreground {
  border-color: var(--foreground);
}

.b-foreground-dim-0 {
  border-color: color-mix(in srgb, var(--foreground), var(--dim-target) var(--dim-0));
}

.b-foreground-dim-1 {
  border-color: color-mix(in srgb, var(--foreground), var(--dim-target) var(--dim-1));
}

.b-foreground-dim-2 {
  border-color: color-mix(in srgb, var(--foreground), var(--dim-target) var(--dim-2));
}

.b-foreground-dim-3 {
  border-color: color-mix(in srgb, var(--foreground), var(--dim-target) var(--dim-3));
}

.b-foreground-dim-4 {
  border-color: color-mix(in srgb, var(--foreground), var(--dim-target) var(--dim-4));
}

.b-foreground-dim-5 {
  border-color: color-mix(in srgb, var(--foreground), var(--dim-target) var(--dim-5));
}

.b-foreground-dim-6 {
  border-color: color-mix(in srgb, var(--foreground), var(--dim-target) var(--dim-6));
}

.b-foreground-dim-7 {
  border-color: color-mix(in srgb, var(--foreground), var(--dim-target) var(--dim-7));
}

.b-foreground-dim-8 {
  border-color: color-mix(in srgb, var(--foreground), var(--dim-target) var(--dim-8));
}

.b-foreground-dim-9 {
  border-color: color-mix(in srgb, var(--foreground), var(--dim-target) var(--dim-9));
}

.b-foreground-hover:hover {
  border-color: var(--foreground);
}

.b-foreground-dim-0-hover:hover {
  border-color: color-mix(in srgb, var(--foreground), var(--dim-target) var(--dim-0));
}

.b-foreground-dim-1-hover:hover {
  border-color: color-mix(in srgb, var(--foreground), var(--dim-target) var(--dim-1));
}

.b-foreground-dim-2-hover:hover {
  border-color: color-mix(in srgb, var(--foreground), var(--dim-target) var(--dim-2));
}

.b-foreground-dim-3-hover:hover {
  border-color: color-mix(in srgb, var(--foreground), var(--dim-target) var(--dim-3));
}

.b-foreground-dim-4-hover:hover {
  border-color: color-mix(in srgb, var(--foreground), var(--dim-target) var(--dim-4));
}

.b-foreground-dim-5-hover:hover {
  border-color: color-mix(in srgb, var(--foreground), var(--dim-target) var(--dim-5));
}

.b-foreground-dim-6-hover:hover {
  border-color: color-mix(in srgb, var(--foreground), var(--dim-target) var(--dim-6));
}

.b-foreground-dim-7-hover:hover {
  border-color: color-mix(in srgb, var(--foreground), var(--dim-target) var(--dim-7));
}

.b-foreground-dim-8-hover:hover {
  border-color: color-mix(in srgb, var(--foreground), var(--dim-target) var(--dim-8));
}

.b-foreground-dim-9-hover:hover {
  border-color: color-mix(in srgb, var(--foreground), var(--dim-target) var(--dim-9));
}

.b-text {
  border-color: var(--text);
}

.b-text-dim-0 {
  border-color: color-mix(in srgb, var(--text), var(--dim-target) var(--dim-0));
}

.b-text-dim-1 {
  border-color: color-mix(in srgb, var(--text), var(--dim-target) var(--dim-1));
}

.b-text-dim-2 {
  border-color: color-mix(in srgb, var(--text), var(--dim-target) var(--dim-2));
}

.b-text-dim-3 {
  border-color: color-mix(in srgb, var(--text), var(--dim-target) var(--dim-3));
}

.b-text-dim-4 {
  border-color: color-mix(in srgb, var(--text), var(--dim-target) var(--dim-4));
}

.b-text-dim-5 {
  border-color: color-mix(in srgb, var(--text), var(--dim-target) var(--dim-5));
}

.b-text-dim-6 {
  border-color: color-mix(in srgb, var(--text), var(--dim-target) var(--dim-6));
}

.b-text-dim-7 {
  border-color: color-mix(in srgb, var(--text), var(--dim-target) var(--dim-7));
}

.b-text-dim-8 {
  border-color: color-mix(in srgb, var(--text), var(--dim-target) var(--dim-8));
}

.b-text-dim-9 {
  border-color: color-mix(in srgb, var(--text), var(--dim-target) var(--dim-9));
}

.b-text-hover:hover {
  border-color: var(--text);
}

.b-text-dim-0-hover:hover {
  border-color: color-mix(in srgb, var(--text), var(--dim-target) var(--dim-0));
}

.b-text-dim-1-hover:hover {
  border-color: color-mix(in srgb, var(--text), var(--dim-target) var(--dim-1));
}

.b-text-dim-2-hover:hover {
  border-color: color-mix(in srgb, var(--text), var(--dim-target) var(--dim-2));
}

.b-text-dim-3-hover:hover {
  border-color: color-mix(in srgb, var(--text), var(--dim-target) var(--dim-3));
}

.b-text-dim-4-hover:hover {
  border-color: color-mix(in srgb, var(--text), var(--dim-target) var(--dim-4));
}

.b-text-dim-5-hover:hover {
  border-color: color-mix(in srgb, var(--text), var(--dim-target) var(--dim-5));
}

.b-text-dim-6-hover:hover {
  border-color: color-mix(in srgb, var(--text), var(--dim-target) var(--dim-6));
}

.b-text-dim-7-hover:hover {
  border-color: color-mix(in srgb, var(--text), var(--dim-target) var(--dim-7));
}

.b-text-dim-8-hover:hover {
  border-color: color-mix(in srgb, var(--text), var(--dim-target) var(--dim-8));
}

.b-text-dim-9-hover:hover {
  border-color: color-mix(in srgb, var(--text), var(--dim-target) var(--dim-9));
}

.b-contrast {
  border-color: var(--contrast);
}

.b-contrast-dim-0 {
  border-color: color-mix(in srgb, var(--contrast), var(--dim-target) var(--dim-0));
}

.b-contrast-dim-1 {
  border-color: color-mix(in srgb, var(--contrast), var(--dim-target) var(--dim-1));
}

.b-contrast-dim-2 {
  border-color: color-mix(in srgb, var(--contrast), var(--dim-target) var(--dim-2));
}

.b-contrast-dim-3 {
  border-color: color-mix(in srgb, var(--contrast), var(--dim-target) var(--dim-3));
}

.b-contrast-dim-4 {
  border-color: color-mix(in srgb, var(--contrast), var(--dim-target) var(--dim-4));
}

.b-contrast-dim-5 {
  border-color: color-mix(in srgb, var(--contrast), var(--dim-target) var(--dim-5));
}

.b-contrast-dim-6 {
  border-color: color-mix(in srgb, var(--contrast), var(--dim-target) var(--dim-6));
}

.b-contrast-dim-7 {
  border-color: color-mix(in srgb, var(--contrast), var(--dim-target) var(--dim-7));
}

.b-contrast-dim-8 {
  border-color: color-mix(in srgb, var(--contrast), var(--dim-target) var(--dim-8));
}

.b-contrast-dim-9 {
  border-color: color-mix(in srgb, var(--contrast), var(--dim-target) var(--dim-9));
}

.b-contrast-hover:hover {
  border-color: var(--contrast);
}

.b-contrast-dim-0-hover:hover {
  border-color: color-mix(in srgb, var(--contrast), var(--dim-target) var(--dim-0));
}

.b-contrast-dim-1-hover:hover {
  border-color: color-mix(in srgb, var(--contrast), var(--dim-target) var(--dim-1));
}

.b-contrast-dim-2-hover:hover {
  border-color: color-mix(in srgb, var(--contrast), var(--dim-target) var(--dim-2));
}

.b-contrast-dim-3-hover:hover {
  border-color: color-mix(in srgb, var(--contrast), var(--dim-target) var(--dim-3));
}

.b-contrast-dim-4-hover:hover {
  border-color: color-mix(in srgb, var(--contrast), var(--dim-target) var(--dim-4));
}

.b-contrast-dim-5-hover:hover {
  border-color: color-mix(in srgb, var(--contrast), var(--dim-target) var(--dim-5));
}

.b-contrast-dim-6-hover:hover {
  border-color: color-mix(in srgb, var(--contrast), var(--dim-target) var(--dim-6));
}

.b-contrast-dim-7-hover:hover {
  border-color: color-mix(in srgb, var(--contrast), var(--dim-target) var(--dim-7));
}

.b-contrast-dim-8-hover:hover {
  border-color: color-mix(in srgb, var(--contrast), var(--dim-target) var(--dim-8));
}

.b-contrast-dim-9-hover:hover {
  border-color: color-mix(in srgb, var(--contrast), var(--dim-target) var(--dim-9));
}

.b-accent-dim-0 {
  border-color: color-mix(in srgb, var(--accent), var(--dim-target) var(--dim-0));
}

.b-accent-dim-1 {
  border-color: color-mix(in srgb, var(--accent), var(--dim-target) var(--dim-1));
}

.b-accent-dim-2 {
  border-color: color-mix(in srgb, var(--accent), var(--dim-target) var(--dim-2));
}

.b-accent-dim-3 {
  border-color: color-mix(in srgb, var(--accent), var(--dim-target) var(--dim-3));
}

.b-accent-dim-4 {
  border-color: color-mix(in srgb, var(--accent), var(--dim-target) var(--dim-4));
}

.b-accent-dim-5 {
  border-color: color-mix(in srgb, var(--accent), var(--dim-target) var(--dim-5));
}

.b-accent-dim-6 {
  border-color: color-mix(in srgb, var(--accent), var(--dim-target) var(--dim-6));
}

.b-accent-dim-7 {
  border-color: color-mix(in srgb, var(--accent), var(--dim-target) var(--dim-7));
}

.b-accent-dim-8 {
  border-color: color-mix(in srgb, var(--accent), var(--dim-target) var(--dim-8));
}

.b-accent-dim-9 {
  border-color: color-mix(in srgb, var(--accent), var(--dim-target) var(--dim-9));
}

.b-accent-hover:hover {
  border-color: var(--accent);
}

.b-accent-dim-0-hover:hover {
  border-color: color-mix(in srgb, var(--accent), var(--dim-target) var(--dim-0));
}

.b-accent-dim-1-hover:hover {
  border-color: color-mix(in srgb, var(--accent), var(--dim-target) var(--dim-1));
}

.b-accent-dim-2-hover:hover {
  border-color: color-mix(in srgb, var(--accent), var(--dim-target) var(--dim-2));
}

.b-accent-dim-3-hover:hover {
  border-color: color-mix(in srgb, var(--accent), var(--dim-target) var(--dim-3));
}

.b-accent-dim-4-hover:hover {
  border-color: color-mix(in srgb, var(--accent), var(--dim-target) var(--dim-4));
}

.b-accent-dim-5-hover:hover {
  border-color: color-mix(in srgb, var(--accent), var(--dim-target) var(--dim-5));
}

.b-accent-dim-6-hover:hover {
  border-color: color-mix(in srgb, var(--accent), var(--dim-target) var(--dim-6));
}

.b-accent-dim-7-hover:hover {
  border-color: color-mix(in srgb, var(--accent), var(--dim-target) var(--dim-7));
}

.b-accent-dim-8-hover:hover {
  border-color: color-mix(in srgb, var(--accent), var(--dim-target) var(--dim-8));
}

.b-accent-dim-9-hover:hover {
  border-color: color-mix(in srgb, var(--accent), var(--dim-target) var(--dim-9));
}

.b-alternate {
  border-color: var(--alternate);
}

.b-alternate-dim-0 {
  border-color: color-mix(in srgb, var(--alternate), var(--dim-target) var(--dim-0));
}

.b-alternate-dim-1 {
  border-color: color-mix(in srgb, var(--alternate), var(--dim-target) var(--dim-1));
}

.b-alternate-dim-2 {
  border-color: color-mix(in srgb, var(--alternate), var(--dim-target) var(--dim-2));
}

.b-alternate-dim-3 {
  border-color: color-mix(in srgb, var(--alternate), var(--dim-target) var(--dim-3));
}

.b-alternate-dim-4 {
  border-color: color-mix(in srgb, var(--alternate), var(--dim-target) var(--dim-4));
}

.b-alternate-dim-5 {
  border-color: color-mix(in srgb, var(--alternate), var(--dim-target) var(--dim-5));
}

.b-alternate-dim-6 {
  border-color: color-mix(in srgb, var(--alternate), var(--dim-target) var(--dim-6));
}

.b-alternate-dim-7 {
  border-color: color-mix(in srgb, var(--alternate), var(--dim-target) var(--dim-7));
}

.b-alternate-dim-8 {
  border-color: color-mix(in srgb, var(--alternate), var(--dim-target) var(--dim-8));
}

.b-alternate-dim-9 {
  border-color: color-mix(in srgb, var(--alternate), var(--dim-target) var(--dim-9));
}

.b-alternate-hover:hover {
  border-color: var(--alternate);
}

.b-alternate-dim-0-hover:hover {
  border-color: color-mix(in srgb, var(--alternate), var(--dim-target) var(--dim-0));
}

.b-alternate-dim-1-hover:hover {
  border-color: color-mix(in srgb, var(--alternate), var(--dim-target) var(--dim-1));
}

.b-alternate-dim-2-hover:hover {
  border-color: color-mix(in srgb, var(--alternate), var(--dim-target) var(--dim-2));
}

.b-alternate-dim-3-hover:hover {
  border-color: color-mix(in srgb, var(--alternate), var(--dim-target) var(--dim-3));
}

.b-alternate-dim-4-hover:hover {
  border-color: color-mix(in srgb, var(--alternate), var(--dim-target) var(--dim-4));
}

.b-alternate-dim-5-hover:hover {
  border-color: color-mix(in srgb, var(--alternate), var(--dim-target) var(--dim-5));
}

.b-alternate-dim-6-hover:hover {
  border-color: color-mix(in srgb, var(--alternate), var(--dim-target) var(--dim-6));
}

.b-alternate-dim-7-hover:hover {
  border-color: color-mix(in srgb, var(--alternate), var(--dim-target) var(--dim-7));
}

.b-alternate-dim-8-hover:hover {
  border-color: color-mix(in srgb, var(--alternate), var(--dim-target) var(--dim-8));
}

.b-alternate-dim-9-hover:hover {
  border-color: color-mix(in srgb, var(--alternate), var(--dim-target) var(--dim-9));
}

.b-info {
  border-color: var(--info);
}

.b-info-dim-0 {
  border-color: color-mix(in srgb, var(--info), var(--dim-target) var(--dim-0));
}

.b-info-dim-1 {
  border-color: color-mix(in srgb, var(--info), var(--dim-target) var(--dim-1));
}

.b-info-dim-2 {
  border-color: color-mix(in srgb, var(--info), var(--dim-target) var(--dim-2));
}

.b-info-dim-3 {
  border-color: color-mix(in srgb, var(--info), var(--dim-target) var(--dim-3));
}

.b-info-dim-4 {
  border-color: color-mix(in srgb, var(--info), var(--dim-target) var(--dim-4));
}

.b-info-dim-5 {
  border-color: color-mix(in srgb, var(--info), var(--dim-target) var(--dim-5));
}

.b-info-dim-6 {
  border-color: color-mix(in srgb, var(--info), var(--dim-target) var(--dim-6));
}

.b-info-dim-7 {
  border-color: color-mix(in srgb, var(--info), var(--dim-target) var(--dim-7));
}

.b-info-dim-8 {
  border-color: color-mix(in srgb, var(--info), var(--dim-target) var(--dim-8));
}

.b-info-dim-9 {
  border-color: color-mix(in srgb, var(--info), var(--dim-target) var(--dim-9));
}

.b-info-hover:hover {
  border-color: var(--info);
}

.b-info-dim-0-hover:hover {
  border-color: color-mix(in srgb, var(--info), var(--dim-target) var(--dim-0));
}

.b-info-dim-1-hover:hover {
  border-color: color-mix(in srgb, var(--info), var(--dim-target) var(--dim-1));
}

.b-info-dim-2-hover:hover {
  border-color: color-mix(in srgb, var(--info), var(--dim-target) var(--dim-2));
}

.b-info-dim-3-hover:hover {
  border-color: color-mix(in srgb, var(--info), var(--dim-target) var(--dim-3));
}

.b-info-dim-4-hover:hover {
  border-color: color-mix(in srgb, var(--info), var(--dim-target) var(--dim-4));
}

.b-info-dim-5-hover:hover {
  border-color: color-mix(in srgb, var(--info), var(--dim-target) var(--dim-5));
}

.b-info-dim-6-hover:hover {
  border-color: color-mix(in srgb, var(--info), var(--dim-target) var(--dim-6));
}

.b-info-dim-7:hover {
  border-color: color-mix(in srgb, var(--info), var(--dim-target) var(--dim-7));
}

.b-info-dim-8-hover:hover {
  border-color: color-mix(in srgb, var(--info), var(--dim-target) var(--dim-8));
}

.b-info-dim-9-hover:hover {
  border-color: color-mix(in srgb, var(--info), var(--dim-target) var(--dim-9));
}

.b-warning {
  border-color: var(--warning);
}

.b-warning-dim-0 {
  border-color: color-mix(in srgb, var(--warning), var(--dim-target) var(--dim-0));
}

.b-warning-dim-1 {
  border-color: color-mix(in srgb, var(--warning), var(--dim-target) var(--dim-1));
}

.b-warning-dim-2 {
  border-color: color-mix(in srgb, var(--warning), var(--dim-target) var(--dim-2));
}

.b-warning-dim-3 {
  border-color: color-mix(in srgb, var(--warning), var(--dim-target) var(--dim-3));
}

.b-warning-dim-4 {
  border-color: color-mix(in srgb, var(--warning), var(--dim-target) var(--dim-4));
}

.b-warning-dim-5 {
  border-color: color-mix(in srgb, var(--warning), var(--dim-target) var(--dim-5));
}

.b-warning-dim-6 {
  border-color: color-mix(in srgb, var(--warning), var(--dim-target) var(--dim-6));
}

.b-warning-dim-7 {
  border-color: color-mix(in srgb, var(--warning), var(--dim-target) var(--dim-7));
}

.b-warning-dim-8 {
  border-color: color-mix(in srgb, var(--warning), var(--dim-target) var(--dim-8));
}

.b-warning-dim-9 {
  border-color: color-mix(in srgb, var(--warning), var(--dim-target) var(--dim-9));
}

.b-warning-hover:hover {
  border-color: var(--warning);
}

.b-warning-dim-0-hover:hover {
  border-color: color-mix(in srgb, var(--warning), var(--dim-target) var(--dim-0));
}

.b-warning-dim-1-hover:hover {
  border-color: color-mix(in srgb, var(--warning), var(--dim-target) var(--dim-1));
}

.b-warning-dim-2-hover:hover {
  border-color: color-mix(in srgb, var(--warning), var(--dim-target) var(--dim-2));
}

.b-warning-dim-3-hover:hover {
  border-color: color-mix(in srgb, var(--warning), var(--dim-target) var(--dim-3));
}

.b-warning-dim-4-hover:hover {
  border-color: color-mix(in srgb, var(--warning), var(--dim-target) var(--dim-4));
}

.b-warning-dim-5-hover:hover {
  border-color: color-mix(in srgb, var(--warning), var(--dim-target) var(--dim-5));
}

.b-warning-dim-6-hover:hover {
  border-color: color-mix(in srgb, var(--warning), var(--dim-target) var(--dim-6));
}

.b-warning-dim-7-hover:hover {
  border-color: color-mix(in srgb, var(--warning), var(--dim-target) var(--dim-7));
}

.b-warning-dim-8-hover:hover {
  border-color: color-mix(in srgb, var(--warning), var(--dim-target) var(--dim-8));
}

.b-warning-dim-9-hover:hover {
  border-color: color-mix(in srgb, var(--warning), var(--dim-target) var(--dim-9));
}

.b-success {
  border-color: var(--success);
}

.b-success-dim-0 {
  border-color: color-mix(in srgb, var(--success), var(--dim-target) var(--dim-0));
}

.b-success-dim-1 {
  border-color: color-mix(in srgb, var(--success), var(--dim-target) var(--dim-1));
}

.b-success-dim-2 {
  border-color: color-mix(in srgb, var(--success), var(--dim-target) var(--dim-2));
}

.b-success-dim-3 {
  border-color: color-mix(in srgb, var(--success), var(--dim-target) var(--dim-3));
}

.b-success-dim-4 {
  border-color: color-mix(in srgb, var(--success), var(--dim-target) var(--dim-4));
}

.b-success-dim-5 {
  border-color: color-mix(in srgb, var(--success), var(--dim-target) var(--dim-5));
}

.b-success-dim-6 {
  border-color: color-mix(in srgb, var(--success), var(--dim-target) var(--dim-6));
}

.b-success-dim-7 {
  border-color: color-mix(in srgb, var(--success), var(--dim-target) var(--dim-7));
}

.b-success-dim-8 {
  border-color: color-mix(in srgb, var(--success), var(--dim-target) var(--dim-8));
}

.b-success-dim-9 {
  border-color: color-mix(in srgb, var(--success), var(--dim-target) var(--dim-9));
}

.b-success-hover:hover {
  border-color: var(--success);
}

.b-success-dim-0-hover:hover {
  border-color: color-mix(in srgb, var(--success), var(--dim-target) var(--dim-0));
}

.b-success-dim-1-hover:hover {
  border-color: color-mix(in srgb, var(--success), var(--dim-target) var(--dim-1));
}

.b-success-dim-2-hover:hover {
  border-color: color-mix(in srgb, var(--success), var(--dim-target) var(--dim-2));
}

.b-success-dim-3-hover:hover {
  border-color: color-mix(in srgb, var(--success), var(--dim-target) var(--dim-3));
}

.b-success-dim-4-hover:hover {
  border-color: color-mix(in srgb, var(--success), var(--dim-target) var(--dim-4));
}

.b-success-dim-5-hover:hover {
  border-color: color-mix(in srgb, var(--success), var(--dim-target) var(--dim-5));
}

.b-success-dim-6-hover:hover {
  border-color: color-mix(in srgb, var(--success), var(--dim-target) var(--dim-6));
}

.b-success-dim-7-hover:hover {
  border-color: color-mix(in srgb, var(--success), var(--dim-target) var(--dim-7));
}

.b-success-dim-8-hover:hover {
  border-color: color-mix(in srgb, var(--success), var(--dim-target) var(--dim-8));
}

.b-success-dim-9-hover:hover {
  border-color: color-mix(in srgb, var(--success), var(--dim-target) var(--dim-9));
}

.b-danger {
  border-color: var(--danger);
}

.b-danger-dim-0 {
  border-color: color-mix(in srgb, var(--danger), var(--dim-target) var(--dim-0));
}

.b-danger-dim-1 {
  border-color: color-mix(in srgb, var(--danger), var(--dim-target) var(--dim-1));
}

.b-danger-dim-2 {
  border-color: color-mix(in srgb, var(--danger), var(--dim-target) var(--dim-2));
}

.b-danger-dim-3 {
  border-color: color-mix(in srgb, var(--danger), var(--dim-target) var(--dim-3));
}

.b-danger-dim-4 {
  border-color: color-mix(in srgb, var(--danger), var(--dim-target) var(--dim-4));
}

.b-danger-dim-5 {
  border-color: color-mix(in srgb, var(--danger), var(--dim-target) var(--dim-5));
}

.b-danger-dim-6 {
  border-color: color-mix(in srgb, var(--danger), var(--dim-target) var(--dim-6));
}

.b-danger-dim-7 {
  border-color: color-mix(in srgb, var(--danger), var(--dim-target) var(--dim-7));
}

.b-danger-dim-8 {
  border-color: color-mix(in srgb, var(--danger), var(--dim-target) var(--dim-8));
}

.b-danger-dim-9 {
  border-color: color-mix(in srgb, var(--danger), var(--dim-target) var(--dim-9));
}

.b-danger-hover:hover {
  border-color: var(--danger);
}

.b-danger-dim-0-hover:hover {
  border-color: color-mix(in srgb, var(--danger), var(--dim-target) var(--dim-0));
}

.b-danger-dim-1-hover:hover {
  border-color: color-mix(in srgb, var(--danger), var(--dim-target) var(--dim-1));
}

.b-danger-dim-2-hover:hover {
  border-color: color-mix(in srgb, var(--danger), var(--dim-target) var(--dim-2));
}

.b-danger-dim-3-hover:hover {
  border-color: color-mix(in srgb, var(--danger), var(--dim-target) var(--dim-3));
}

.b-danger-dim-4-hover:hover {
  border-color: color-mix(in srgb, var(--danger), var(--dim-target) var(--dim-4));
}

.b-danger-dim-5-hover:hover {
  border-color: color-mix(in srgb, var(--danger), var(--dim-target) var(--dim-5));
}

.b-danger-dim-6-hover:hover {
  border-color: color-mix(in srgb, var(--danger), var(--dim-target) var(--dim-6));
}

.b-danger-dim-7-hover:hover {
  border-color: color-mix(in srgb, var(--danger), var(--dim-target) var(--dim-7));
}

.b-danger-dim-8-hover:hover {
  border-color: color-mix(in srgb, var(--danger), var(--dim-target) var(--dim-8));
}

.b-danger-dim-9-hover:hover {
  border-color: color-mix(in srgb, var(--danger), var(--dim-target) var(--dim-9));
}

.b-link {
  border-color: var(--link);
}

.b-link-dim-0 {
  border-color: color-mix(in srgb, var(--link), var(--dim-target) var(--dim-0));
}

.b-link-dim-1 {
  border-color: color-mix(in srgb, var(--link), var(--dim-target) var(--dim-1));
}

.b-link-dim-2 {
  border-color: color-mix(in srgb, var(--link), var(--dim-target) var(--dim-2));
}

.b-link-dim-3 {
  border-color: color-mix(in srgb, var(--link), var(--dim-target) var(--dim-3));
}

.b-link-dim-4 {
  border-color: color-mix(in srgb, var(--link), var(--dim-target) var(--dim-4));
}

.b-link-dim-5 {
  border-color: color-mix(in srgb, var(--link), var(--dim-target) var(--dim-5));
}

.b-link-dim-6 {
  border-color: color-mix(in srgb, var(--link), var(--dim-target) var(--dim-6));
}

.b-link-dim-7 {
  border-color: color-mix(in srgb, var(--link), var(--dim-target) var(--dim-7));
}

.b-link-dim-8 {
  border-color: color-mix(in srgb, var(--link), var(--dim-target) var(--dim-8));
}

.b-link-dim-9 {
  border-color: color-mix(in srgb, var(--link), var(--dim-target) var(--dim-9));
}

.b-link-hover:hover {
  border-color: var(--link);
}

.b-link-dim-0-hover:hover {
  border-color: color-mix(in srgb, var(--link), var(--dim-target) var(--dim-0));
}

.b-link-dim-1-hover:hover {
  border-color: color-mix(in srgb, var(--link), var(--dim-target) var(--dim-1));
}

.b-link-dim-2-hover:hover {
  border-color: color-mix(in srgb, var(--link), var(--dim-target) var(--dim-2));
}

.b-link-dim-3-hover:hover {
  border-color: color-mix(in srgb, var(--link), var(--dim-target) var(--dim-3));
}

.b-link-dim-4-hover:hover {
  border-color: color-mix(in srgb, var(--link), var(--dim-target) var(--dim-4));
}

.b-link-dim-5-hover:hover {
  border-color: color-mix(in srgb, var(--link), var(--dim-target) var(--dim-5));
}

.b-link-dim-6-hover:hover {
  border-color: color-mix(in srgb, var(--link), var(--dim-target) var(--dim-6));
}

.b-link-dim-7-hover:hover {
  border-color: color-mix(in srgb, var(--link), var(--dim-target) var(--dim-7));
}

.b-link-dim-8-hover:hover {
  border-color: color-mix(in srgb, var(--link), var(--dim-target) var(--dim-8));
}

.b-link-dim-9-hover:hover {
  border-color: color-mix(in srgb, var(--link), var(--dim-target) var(--dim-9));
}

/* src/border-radius.css */
.br-0 {
  --border-radius: calc(var(--radius) * 0);
  border-radius: var(--border-radius);
}

.br-1 {
  --border-radius: calc(var(--radius) * 1);
  border-radius: var(--border-radius);
}

.br-2 {
  --border-radius: calc(var(--radius) * 2);
  border-radius: var(--border-radius);
}

.br-3 {
  --border-radius: calc(var(--radius) * 3);
  border-radius: var(--border-radius);
}

.br-4 {
  --border-radius: calc(var(--radius) * 4);
  border-radius: var(--border-radius);
}

.br-5 {
  --border-radius: calc(var(--radius) * 5);
  border-radius: var(--border-radius);
}

.br-6 {
  --border-radius: calc(var(--radius) * 6);
  border-radius: var(--border-radius);
}

.br-7 {
  --border-radius: calc(var(--radius) * 7);
  border-radius: var(--border-radius);
}

.br-8 {
  --border-radius: calc(var(--radius) * 8);
  border-radius: var(--border-radius);
}

.br-9 {
  --border-radius: calc(var(--radius) * 9);
  border-radius: var(--border-radius);
}

.br-10 {
  --border-radius: calc(var(--radius) * 10);
  border-radius: var(--border-radius);
}

.br-max {
  --border-radius: 100%;
  border-radius: var(--border-radius);
}

.br--bottom {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.br--top {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.br--right {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.br--left {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.br-inherit {
  border-radius: inherit;
}

.br-initial {
  border-radius: initial;
}

.br-unset {
  border-radius: unset;
}

@media (max-width: 8rem) {
  .br-0-4xs {
    --border-radius: calc(var(--radius) * 0);
    border-radius: var(--border-radius);
  }

  .br-1-4xs {
    --border-radius: calc(var(--radius) * 1);
    border-radius: var(--border-radius);
  }

  .br-2-4xs {
    --border-radius: calc(var(--radius) * 2);
    border-radius: var(--border-radius);
  }

  .br-3-4xs {
    --border-radius: calc(var(--radius) * 3);
    border-radius: var(--border-radius);
  }

  .br-4-4xs {
    --border-radius: calc(var(--radius) * 4);
    border-radius: var(--border-radius);
  }

  .br-5-4xs {
    --border-radius: calc(var(--radius) * 5);
    border-radius: var(--border-radius);
  }

  .br-6-4xs {
    --border-radius: calc(var(--radius) * 6);
    border-radius: var(--border-radius);
  }

  .br-7-4xs {
    --border-radius: calc(var(--radius) * 7);
    border-radius: var(--border-radius);
  }

  .br-8-4xs {
    --border-radius: calc(var(--radius) * 8);
    border-radius: var(--border-radius);
  }

  .br-9-4xs {
    --border-radius: calc(var(--radius) * 9);
    border-radius: var(--border-radius);
  }

  .br-10-4xs {
    --border-radius: calc(var(--radius) * 10);
    border-radius: var(--border-radius);
  }

  .br-max-4xs {
    --border-radius: 100%;
    border-radius: var(--border-radius);
  }

  .br--bottom-4xs {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }

  .br--top-4xs {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
  }

  .br--right-4xs {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  .br--left-4xs {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  .br-inherit-4xs {
    border-radius: inherit;
  }

  .br-initial-4xs {
    border-radius: initial;
  }

  .br-unset-4xs {
    border-radius: unset;
  }
}

@media (min-width: calc(8rem + .001px)) {
  .br-0-2xs {
    --border-radius: calc(var(--radius) * 0);
    border-radius: var(--border-radius);
  }

  .br-1-2xs {
    --border-radius: calc(var(--radius) * 1);
    border-radius: var(--border-radius);
  }

  .br-2-2xs {
    --border-radius: calc(var(--radius) * 2);
    border-radius: var(--border-radius);
  }

  .br-3-2xs {
    --border-radius: calc(var(--radius) * 3);
    border-radius: var(--border-radius);
  }

  .br-4-2xs {
    --border-radius: calc(var(--radius) * 4);
    border-radius: var(--border-radius);
  }

  .br-5-2xs {
    --border-radius: calc(var(--radius) * 5);
    border-radius: var(--border-radius);
  }

  .br-6-2xs {
    --border-radius: calc(var(--radius) * 6);
    border-radius: var(--border-radius);
  }

  .br-7-2xs {
    --border-radius: calc(var(--radius) * 7);
    border-radius: var(--border-radius);
  }

  .br-8-2xs {
    --border-radius: calc(var(--radius) * 8);
    border-radius: var(--border-radius);
  }

  .br-9-2xs {
    --border-radius: calc(var(--radius) * 9);
    border-radius: var(--border-radius);
  }

  .br-10-2xs {
    --border-radius: calc(var(--radius) * 10);
    border-radius: var(--border-radius);
  }

  .br-max-2xs {
    --border-radius: 100%;
    border-radius: var(--border-radius);
  }

  .br--bottom-2xs {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }

  .br--top-2xs {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
  }

  .br--right-2xs {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  .br--left-2xs {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  .br-inherit-2xs {
    border-radius: inherit;
  }

  .br-initial-2xs {
    border-radius: initial;
  }

  .br-unset-2xs {
    border-radius: unset;
  }
}

@media (min-width: 20rem) {
  .br-0-xs {
    --border-radius: calc(var(--radius) * 0);
    border-radius: var(--border-radius);
  }

  .br-1-xs {
    --border-radius: calc(var(--radius) * 1);
    border-radius: var(--border-radius);
  }

  .br-2-xs {
    --border-radius: calc(var(--radius) * 2);
    border-radius: var(--border-radius);
  }

  .br-3-xs {
    --border-radius: calc(var(--radius) * 3);
    border-radius: var(--border-radius);
  }

  .br-4-xs {
    --border-radius: calc(var(--radius) * 4);
    border-radius: var(--border-radius);
  }

  .br-5-xs {
    --border-radius: calc(var(--radius) * 5);
    border-radius: var(--border-radius);
  }

  .br-6-xs {
    --border-radius: calc(var(--radius) * 6);
    border-radius: var(--border-radius);
  }

  .br-7-xs {
    --border-radius: calc(var(--radius) * 7);
    border-radius: var(--border-radius);
  }

  .br-8-xs {
    --border-radius: calc(var(--radius) * 8);
    border-radius: var(--border-radius);
  }

  .br-9-xs {
    --border-radius: calc(var(--radius) * 9);
    border-radius: var(--border-radius);
  }

  .br-10-xs {
    --border-radius: calc(var(--radius) * 10);
    border-radius: var(--border-radius);
  }

  .br-max-xs {
    --border-radius: 100%;
    border-radius: var(--border-radius);
  }

  .br--bottom-xs {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }

  .br--top-xs {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
  }

  .br--right-xs {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  .br--left-xs {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  .br-inherit-xs {
    border-radius: inherit;
  }

  .br-initial-xs {
    border-radius: initial;
  }

  .br-unset-xs {
    border-radius: unset;
  }
}

@media (min-width: 32rem) {
  .br-0-s {
    --border-radius: calc(var(--radius) * 0);
    border-radius: var(--border-radius);
  }

  .br-1-s {
    --border-radius: calc(var(--radius) * 1);
    border-radius: var(--border-radius);
  }

  .br-2-s {
    --border-radius: calc(var(--radius) * 2);
    border-radius: var(--border-radius);
  }

  .br-3-s {
    --border-radius: calc(var(--radius) * 3);
    border-radius: var(--border-radius);
  }

  .br-4-s {
    --border-radius: calc(var(--radius) * 4);
    border-radius: var(--border-radius);
  }

  .br-5-s {
    --border-radius: calc(var(--radius) * 5);
    border-radius: var(--border-radius);
  }

  .br-6-s {
    --border-radius: calc(var(--radius) * 6);
    border-radius: var(--border-radius);
  }

  .br-7-s {
    --border-radius: calc(var(--radius) * 7);
    border-radius: var(--border-radius);
  }

  .br-8-s {
    --border-radius: calc(var(--radius) * 8);
    border-radius: var(--border-radius);
  }

  .br-9-s {
    --border-radius: calc(var(--radius) * 9);
    border-radius: var(--border-radius);
  }

  .br-10-s {
    --border-radius: calc(var(--radius) * 10);
    border-radius: var(--border-radius);
  }

  .br-max-s {
    --border-radius: 100%;
    border-radius: var(--border-radius);
  }

  .br--bottom-s {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }

  .br--top-s {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
  }

  .br--right-s {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  .br--left-s {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  .br-inherit-s {
    border-radius: inherit;
  }

  .br-initial-s {
    border-radius: initial;
  }

  .br-unset-s {
    border-radius: unset;
  }
}

@media (min-width: 48rem) {
  .br-0-m {
    --border-radius: calc(var(--radius) * 0);
    border-radius: var(--border-radius);
  }

  .br-1-m {
    --border-radius: calc(var(--radius) * 1);
    border-radius: var(--border-radius);
  }

  .br-2-m {
    --border-radius: calc(var(--radius) * 2);
    border-radius: var(--border-radius);
  }

  .br-3-m {
    --border-radius: calc(var(--radius) * 3);
    border-radius: var(--border-radius);
  }

  .br-4-m {
    --border-radius: calc(var(--radius) * 4);
    border-radius: var(--border-radius);
  }

  .br-5-m {
    --border-radius: calc(var(--radius) * 5);
    border-radius: var(--border-radius);
  }

  .br-6-m {
    --border-radius: calc(var(--radius) * 6);
    border-radius: var(--border-radius);
  }

  .br-7-m {
    --border-radius: calc(var(--radius) * 7);
    border-radius: var(--border-radius);
  }

  .br-8-m {
    --border-radius: calc(var(--radius) * 8);
    border-radius: var(--border-radius);
  }

  .br-9-m {
    --border-radius: calc(var(--radius) * 9);
    border-radius: var(--border-radius);
  }

  .br-10-m {
    --border-radius: calc(var(--radius) * 10);
    border-radius: var(--border-radius);
  }

  .br-max-m {
    --border-radius: 100%;
    border-radius: var(--border-radius);
  }

  .br--bottom-m {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }

  .br--top-m {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
  }

  .br--right-m {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  .br--left-m {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  .br-inherit-m {
    border-radius: inherit;
  }

  .br-initial-m {
    border-radius: initial;
  }

  .br-unset-m {
    border-radius: unset;
  }
}

@media (min-width: 64rem) {
  .br-0-l {
    --border-radius: calc(var(--radius) * 0);
    border-radius: var(--border-radius);
  }

  .br-1-l {
    --border-radius: calc(var(--radius) * 1);
    border-radius: var(--border-radius);
  }

  .br-2-l {
    --border-radius: calc(var(--radius) * 2);
    border-radius: var(--border-radius);
  }

  .br-3-l {
    --border-radius: calc(var(--radius) * 3);
    border-radius: var(--border-radius);
  }

  .br-4-l {
    --border-radius: calc(var(--radius) * 4);
    border-radius: var(--border-radius);
  }

  .br-5-l {
    --border-radius: calc(var(--radius) * 5);
    border-radius: var(--border-radius);
  }

  .br-6-l {
    --border-radius: calc(var(--radius) * 6);
    border-radius: var(--border-radius);
  }

  .br-7-l {
    --border-radius: calc(var(--radius) * 7);
    border-radius: var(--border-radius);
  }

  .br-8-l {
    --border-radius: calc(var(--radius) * 8);
    border-radius: var(--border-radius);
  }

  .br-9-l {
    --border-radius: calc(var(--radius) * 9);
    border-radius: var(--border-radius);
  }

  .br-10-l {
    --border-radius: calc(var(--radius) * 10);
    border-radius: var(--border-radius);
  }

  .br-max-l {
    --border-radius: 100%;
    border-radius: var(--border-radius);
  }

  .br--bottom-l {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }

  .br--top-l {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
  }

  .br--right-l {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  .br--left-l {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  .br-inherit-l {
    border-radius: inherit;
  }

  .br-initial-l {
    border-radius: initial;
  }

  .br-unset-l {
    border-radius: unset;
  }
}

@media (min-width: 100rem) {
  .br-0-xl {
    --border-radius: calc(var(--radius) * 0);
    border-radius: var(--border-radius);
  }

  .br-1-xl {
    --border-radius: calc(var(--radius) * 1);
    border-radius: var(--border-radius);
  }

  .br-2-xl {
    --border-radius: calc(var(--radius) * 2);
    border-radius: var(--border-radius);
  }

  .br-3-xl {
    --border-radius: calc(var(--radius) * 3);
    border-radius: var(--border-radius);
  }

  .br-4-xl {
    --border-radius: calc(var(--radius) * 4);
    border-radius: var(--border-radius);
  }

  .br-5-xl {
    --border-radius: calc(var(--radius) * 5);
    border-radius: var(--border-radius);
  }

  .br-6-xl {
    --border-radius: calc(var(--radius) * 6);
    border-radius: var(--border-radius);
  }

  .br-7-xl {
    --border-radius: calc(var(--radius) * 7);
    border-radius: var(--border-radius);
  }

  .br-8-xl {
    --border-radius: calc(var(--radius) * 8);
    border-radius: var(--border-radius);
  }

  .br-9-xl {
    --border-radius: calc(var(--radius) * 9);
    border-radius: var(--border-radius);
  }

  .br-10-xl {
    --border-radius: calc(var(--radius) * 10);
    border-radius: var(--border-radius);
  }

  .br-max-xl {
    --border-radius: 100%;
    border-radius: var(--border-radius);
  }

  .br--bottom-xl {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }

  .br--top-xl {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
  }

  .br--right-xl {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  .br--left-xl {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  .br-inherit-xl {
    border-radius: inherit;
  }

  .br-initial-xl {
    border-radius: initial;
  }

  .br-unset-xl {
    border-radius: unset;
  }
}

@container (--2xl) {
  .br-0-2xl {
    --border-radius: calc(var(--radius) * 0);
    border-radius: var(--border-radius);
  }

  .br-1-2xl {
    --border-radius: calc(var(--radius) * 1);
    border-radius: var(--border-radius);
  }

  .br-2-2xl {
    --border-radius: calc(var(--radius) * 2);
    border-radius: var(--border-radius);
  }

  .br-3-2xl {
    --border-radius: calc(var(--radius) * 3);
    border-radius: var(--border-radius);
  }

  .br-4-2xl {
    --border-radius: calc(var(--radius) * 4);
    border-radius: var(--border-radius);
  }

  .br-5-2xl {
    --border-radius: calc(var(--radius) * 5);
    border-radius: var(--border-radius);
  }

  .br-6-2xl {
    --border-radius: calc(var(--radius) * 6);
    border-radius: var(--border-radius);
  }

  .br-7-2xl {
    --border-radius: calc(var(--radius) * 7);
    border-radius: var(--border-radius);
  }

  .br-8-2xl {
    --border-radius: calc(var(--radius) * 8);
    border-radius: var(--border-radius);
  }

  .br-9-2xl {
    --border-radius: calc(var(--radius) * 9);
    border-radius: var(--border-radius);
  }

  .br-10-2xl {
    --border-radius: calc(var(--radius) * 10);
    border-radius: var(--border-radius);
  }

  .br-max-2xl {
    --border-radius: 100%;
    border-radius: var(--border-radius);
  }

  .br--bottom-2xl {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }

  .br--top-2xl {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }

  .br--right-2xl {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  .br--left-2xl {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  .br-inherit-2xl {
    border-radius: inherit;
  }

  .br-initial-2xl {
    border-radius: initial;
  }

  .br-unset-2xl {
    border-radius: unset;
  }
}

@container (--4xl) {
  .br-0-4xl {
    --border-radius: calc(var(--radius) * 0);
    border-radius: var(--border-radius);
  }

  .br-1-4xl {
    --border-radius: calc(var(--radius) * 1);
    border-radius: var(--border-radius);
  }

  .br-2-4xl {
    --border-radius: calc(var(--radius) * 2);
    border-radius: var(--border-radius);
  }

  .br-3-4xl {
    --border-radius: calc(var(--radius) * 3);
    border-radius: var(--border-radius);
  }

  .br-4-4xl {
    --border-radius: calc(var(--radius) * 4);
    border-radius: var(--border-radius);
  }

  .br-5-4xl {
    --border-radius: calc(var(--radius) * 5);
    border-radius: var(--border-radius);
  }

  .br-6-4xl {
    --border-radius: calc(var(--radius) * 6);
    border-radius: var(--border-radius);
  }

  .br-7-4xl {
    --border-radius: calc(var(--radius) * 7);
    border-radius: var(--border-radius);
  }

  .br-8-4xl {
    --border-radius: calc(var(--radius) * 8);
    border-radius: var(--border-radius);
  }

  .br-9-4xl {
    --border-radius: calc(var(--radius) * 9);
    border-radius: var(--border-radius);
  }

  .br-10-4xl {
    --border-radius: calc(var(--radius) * 10);
    border-radius: var(--border-radius);
  }

  .br-max-4xl {
    --border-radius: 100%;
    border-radius: var(--border-radius);
  }

  .br--bottom-4xl {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }

  .br--top-4xl {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }

  .br--right-4xl {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  .br--left-4xl {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  .br-inherit-4xl {
    border-radius: inherit;
  }

  .br-initial-4xl {
    border-radius: initial;
  }

  .br-unset-4xl {
    border-radius: unset;
  }
}

/* src/border-style.css */
.b-dotted {
  border-style: dotted;
}

.b-dashed {
  border-style: dashed;
}

.b-solid {
  border-style: solid;
}

.b-none {
  border-style: none;
}

@container (width >= 30em) {
  .b-dotted-s {
    border-style: dotted;
  }

  .b-dashed-s {
    border-style: dashed;
  }

  .b-solid-s {
    border-style: solid;
  }

  .b-none-s {
    border-style: none;
  }
}

@container (width >= 48em) {
  .b-dotted-m {
    border-style: dotted;
  }

  .b-dashed-m {
    border-style: dashed;
  }

  .b-solid-m {
    border-style: solid;
  }

  .b-none-m {
    border-style: none;
  }
}

@container (width >= 64em) {
  .b-dotted-l {
    border-style: dotted;
  }

  .b-dashed-l {
    border-style: dashed;
  }

  .b-solid-l {
    border-style: solid;
  }

  .b-none-l {
    border-style: none;
  }
}

/* src/border-widths.css */
.b {
  border-width: var(--border-width, 1px);
}

.b-0 {
  border-width: var(--border-width-0, 0);
}

.b-1 {
  border-width: var(--border-width-1, 1px);
}

.b-2 {
  border-width: var(--border-width-2, 2px);
}

.b-3 {
  border-width: var(--border-width-3, 4px);
}

.b-4 {
  border-width: var(--border-width-4, 8px);
}

.b-5 {
  border-width: var(--border-width-5, 16px);
}

.bt-0 {
  border-top-width: 0;
}

.br-0 {
  border-right-width: 0;
}

.bb-0 {
  border-bottom-width: 0;
}

.bl-0 {
  border-left-width: 0;
}

@media (max-width: 8rem) {
  .b-4xs {
    border-width: var(--border-width, 1px);
  }

  .b-0-4xs {
    border-width: var(--border-width-0, 0);
  }

  .b-1-4xs {
    border-width: var(--border-width-1, 1px);
  }

  .b-2-4xs {
    border-width: var(--border-width-2, 2px);
  }

  .b-3-4xs {
    border-width: var(--border-width-3, 4px);
  }

  .b-4-4xs {
    border-width: var(--border-width-4, 8px);
  }

  .b-5-4xs {
    border-width: var(--border-width-5, 16px);
  }

  .bt-0-4xs {
    border-top-width: 0;
  }

  .br-0-4xs {
    border-right-width: 0;
  }

  .bb-0-4xs {
    border-bottom-width: 0;
  }

  .bl-0-4xs {
    border-left-width: 0;
  }
}

@media (min-width: calc(8rem + .001px)) {
  .b-2xs {
    border-width: var(--border-width, 1px);
  }

  .b-0-2xs {
    border-width: var(--border-width-0, 0);
  }

  .b-1-2xs {
    border-width: var(--border-width-1, 1px);
  }

  .b-2-2xs {
    border-width: var(--border-width-2, 2px);
  }

  .b-3-2xs {
    border-width: var(--border-width-3, 4px);
  }

  .b-4-2xs {
    border-width: var(--border-width-4, 8px);
  }

  .b-5-2xs {
    border-width: var(--border-width-5, 16px);
  }

  .bt-0-2xs {
    border-top-width: 0;
  }

  .br-0-2xs {
    border-right-width: 0;
  }

  .bb-0-2xs {
    border-bottom-width: 0;
  }

  .bl-0-2xs {
    border-left-width: 0;
  }
}

@media (min-width: 20rem) {
  .b-xs {
    border-width: var(--border-width, 1px);
  }

  .b-0-xs {
    border-width: var(--border-width-0, 0);
  }

  .b-1-xs {
    border-width: var(--border-width-1, 1px);
  }

  .b-2-xs {
    border-width: var(--border-width-2, 2px);
  }

  .b-3-xs {
    border-width: var(--border-width-3, 4px);
  }

  .b-4-xs {
    border-width: var(--border-width-4, 8px);
  }

  .b-5-xs {
    border-width: var(--border-width-5, 16px);
  }

  .bt-0-xs {
    border-top-width: 0;
  }

  .br-0-xs {
    border-right-width: 0;
  }

  .bb-0-xs {
    border-bottom-width: 0;
  }

  .bl-0-xs {
    border-left-width: 0;
  }
}

@media (min-width: 32rem) {
  .b-s {
    border-width: var(--border-width, 1px);
  }

  .b-0-s {
    border-width: var(--border-width-0, 0);
  }

  .b-1-s {
    border-width: var(--border-width-1, 1px);
  }

  .b-2-s {
    border-width: var(--border-width-2, 2px);
  }

  .b-3-s {
    border-width: var(--border-width-3, 4px);
  }

  .b-4-s {
    border-width: var(--border-width-4, 8px);
  }

  .b-5-s {
    border-width: var(--border-width-5, 16px);
  }

  .bt-0-s {
    border-top-width: 0;
  }

  .br-0-s {
    border-right-width: 0;
  }

  .bb-0-s {
    border-bottom-width: 0;
  }

  .bl-0-s {
    border-left-width: 0;
  }
}

@media (min-width: 48rem) {
  .b-m {
    border-width: var(--border-width, 1px);
  }

  .b-0-m {
    border-width: var(--border-width-0, 0);
  }

  .b-1-m {
    border-width: var(--border-width-1, 1px);
  }

  .b-2-m {
    border-width: var(--border-width-2, 2px);
  }

  .b-3-m {
    border-width: var(--border-width-3, 4px);
  }

  .b-4-m {
    border-width: var(--border-width-4, 8px);
  }

  .b-5-m {
    border-width: var(--border-width-5, 16px);
  }

  .bt-0-m {
    border-top-width: 0;
  }

  .br-0-m {
    border-right-width: 0;
  }

  .bb-0-m {
    border-bottom-width: 0;
  }

  .bl-0-m {
    border-left-width: 0;
  }
}

@media (min-width: 64rem) {
  .b-l {
    border-width: var(--border-width, 1px);
  }

  .b-0-l {
    border-width: var(--border-width-0, 0);
  }

  .b-1-l {
    border-width: var(--border-width-1, 1px);
  }

  .b-2-l {
    border-width: var(--border-width-2, 2px);
  }

  .b-3-l {
    border-width: var(--border-width-3, 4px);
  }

  .b-4-l {
    border-width: var(--border-width-4, 8px);
  }

  .b-5-l {
    border-width: var(--border-width-5, 16px);
  }

  .bt-0-l {
    border-top-width: 0;
  }

  .br-0-l {
    border-right-width: 0;
  }

  .bb-0-l {
    border-bottom-width: 0;
  }

  .bl-0-l {
    border-left-width: 0;
  }
}

@media (min-width: 100rem) {
  .b-xl {
    border-width: var(--border-width, 1px);
  }

  .b-0-xl {
    border-width: var(--border-width-0, 0);
  }

  .b-1-xl {
    border-width: var(--border-width-1, 1px);
  }

  .b-2-xl {
    border-width: var(--border-width-2, 2px);
  }

  .b-3-xl {
    border-width: var(--border-width-3, 4px);
  }

  .b-4-xl {
    border-width: var(--border-width-4, 8px);
  }

  .b-5-xl {
    border-width: var(--border-width-5, 16px);
  }

  .bt-0-xl {
    border-top-width: 0;
  }

  .br-0-xl {
    border-right-width: 0;
  }

  .bb-0-xl {
    border-bottom-width: 0;
  }

  .bl-0-xl {
    border-left-width: 0;
  }
}

@container (--2xl) {
  .b-2xl {
    border-width: var(--border-width, 1px);
  }

  .b-0-2xl {
    border-width: var(--border-width-0, 0);
  }

  .b-1-2xl {
    border-width: var(--border-width-1, 1px);
  }

  .b-2-2xl {
    border-width: var(--border-width-2, 2px);
  }

  .b-3-2xl {
    border-width: var(--border-width-3, 4px);
  }

  .b-4-2xl {
    border-width: var(--border-width-4, 8px);
  }

  .b-5-2xl {
    border-width: var(--border-width-5, 16px);
  }

  .bt-0-2xl {
    border-top-width: 0;
  }

  .br-0-2xl {
    border-right-width: 0;
  }

  .bb-0-2xl {
    border-bottom-width: 0;
  }

  .bl-0-2xl {
    border-left-width: 0;
  }

  .bt-2xl {
  }

  .br-2xl {
  }

  .bb-2xl {
  }

  .bl-2xl {
  }
}

@container (--4xl) {
  .b-4xl {
    border-width: var(--border-width, 1px);
  }

  .b-0-4xl {
    border-width: var(--border-width-0, 0);
  }

  .b-1-4xl {
    border-width: var(--border-width-1, 1px);
  }

  .b-2-4xl {
    border-width: var(--border-width-2, 2px);
  }

  .b-3-4xl {
    border-width: var(--border-width-3, 4px);
  }

  .b-4-4xs {
    border-width: var(--border-width-4, 8px);
  }

  .b-5-4xl {
    border-width: var(--border-width-5, 16px);
  }

  .bt-0-4xl {
    border-top-width: 0;
  }

  .br-0-4xl {
    border-right-width: 0;
  }

  .bb-0-4xl {
    border-bottom-width: 0;
  }

  .bl-0-4xl {
    border-left-width: 0;
  }

  .bt-4xl {
  }

  .br-4xl {
  }

  .bb-4xl {
  }

  .bl-4xl {
  }
}

/* src/box-shadow.css */
.shadow {
  box-shadow: var(--shadow, inset 0 0 1px 0 rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .5)));
}

.shadow-hover:hover, .shadow-hover:focus {
  --shadow-opacity: .6;
}

.shadow-border-1 {
  box-shadow: inset 0 0 var(--shadow-border-width, 1px) 0 rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .125));
}

.shadow-border-2 {
  box-shadow: inset 0 0 var(--shadow-border-width, 1px) 0 rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .25));
}

.shadow-border-3 {
  box-shadow: inset 0 0 var(--shadow-border-width) 0 currentColor;
}

.shadow-border-4 {
  box-shadow: inset 0 0 2px 0 rgb(var(--shadow-color-light, 255 255 255) / var(--shadow-opacity, .125));
}

.shadow-border-5 {
  box-shadow: inset 0 0 2px 0 rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .125));
}

.shadow-border-6 {
  box-shadow: inset 0 0 2px;
}

.shadow-1 {
  box-shadow: 0 1px 1px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .125)), 0 2px 2px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .125)), 0 4px 4px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .125)), 0 8px 8px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .125)), 0 16px 16px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .125));
}

.shadow-2 {
  box-shadow: 0 1px 1px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .125)), 0 2px 2px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .125)), 0 4px 4px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .125)), 0 8px 8px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .125));
}

.shadow-3 {
  --shadow-opacity: .11;
  box-shadow: 0 1px 1px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .11)), 0 2px 2px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .11)), 0 4px 4px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .11)), 0 8px 8px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .11)), 0 16px 16px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .11)), 0 32px 32px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .11));
}

.shadow-4 {
  --shadow-opacity: .05;
  box-shadow: 0 1px 1px rgb(var(--shadow-color, 0 0 0) / calc(var(--shadow-opacity, .25) * 5)), 0 2px 2px rgb(var(--shadow-color, 0 0 0) / calc(var(--shadow-opacity, .2) * 4)), 0 4px 4px rgb(var(--shadow-color, 0 0 0) / calc(var(--shadow-opacity, .15) * 3)), 0 8px 8px rgb(var(--shadow-color, 0 0 0) / calc(var(--shadow-opacity, .1) * 2)), 0 16px 16px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .05));
}

.shadow-5 {
  --shadow-opacity: .08;
  box-shadow: 0 var(--shadow-y) 1px rgb(var(--shadow-color, 0 0 0) / calc(var(--shadow-opacity, .08) * 1)), 0 calc(var(--shadow-y) * 2) 2px rgb(var(--shadow-color, 0 0 0) / calc(var(--shadow-opacity, .12) * 1.5)), 0 calc(var(--shadow-y) * 4) 4px rgb(var(--shadow-color, 0 0 0) / calc(var(--shadow-opacity, .16) * 2)), 0 calc(var(--shadow-y) * 8) 8px rgb(var(--shadow-color, 0 0 0) / calc(var(--shadow-opacity, .2) * 2.5));
}

.shadow-6 {
  --shadow-opacity: .07;
  box-shadow: 0 1px 2px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .7)), 0 2px 4px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .7)), 0 4px 8px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .7)), 0 8px 16px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .7)), 0 16px 32px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .7)), 0 32px 64px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .7));
}

.shadow-7 {
  --shadow-opacity: .11;
  box-shadow: 0 1px 1px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .11)), 0 2px 2px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .11)), 0 4px 4px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .11)), 0 6px 8px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .11)), 0 8px 16px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .11));
}

.shadow-8 {
  --shadow-opacity: .09;
  box-shadow: 0 2px 1px rgb(var(--shadow-color, 0 0 0) / .09), 0 4px 2px rgb(var(--shadow-color, 0 0 0) / .09), 0 8px 4px rgb(var(--shadow-color, 0 0 0) / .09), 0 16px 8px rgb(var(--shadow-color, 0 0 0) / .09), 0 32px 16px rgb(var(--shadow-color, 0 0 0) / .09);
}

/* src/text-shadow.css */
.text-shadow-1 {
  text-shadow: rgb(var(--shadow-color)) -4px 4px 0px;
}

.text-shadow-2 {
  text-shadow: rgb(var(--shadow-color)) -8px 8px 0px;
}

.text-shadow-3 {
  text-shadow: rgb(var(--shadow-color) / var(--shadow-opacity, .5)) -8px 8px 0px;
}

.text-shadow-4 {
  text-shadow: rgba(var(--shadow-color) / var(--shadow-opacity, .5)) -4px 4px 8px;
}

.text-shadow-5 {
  text-shadow: rgb(var(--shadow-color)) 2px 0px 0px, rgb(var(--shadow-color)) 0px 2px 0px, rgb(var(--shadow-color)) -2px 0px 0px, rgb(var(--shadow-color)) 0px -2px 0px, rgb(var(--shadow-color)) -2px -2px 0px, rgb(var(--shadow-color)) 2px -2px 0px, rgb(var(--shadow-color)) 2px 2px 0px, rgb(var(--shadow-color)) -2px 2px 0px;
}

.text-shadow-6 {
  text-shadow: rgb(var(--shadow-color-invert)) 2px 0px 0px, rgb(var(--shadow-color-invert)) 0px 2px 0px, rgb(var(--shadow-color-invert)) -2px 0px 0px, rgb(var(--shadow-color-invert)) 0px -2px 0px, rgb(var(--shadow-color-invert)) -2px -2px 0px, rgb(var(--shadow-color-invert)) 2px -2px 0px, rgb(var(--shadow-color-invert)) 2px 2px 0px, rgb(var(--shadow-color-invert)) -2px 2px 0px;
}

/* src/code.css */
.pre {
  overflow: auto;
  max-width: 100%;
}

/* src/coordinates.css */
.top-0 {
  top: 0;
}

.right-0 {
  right: 0;
}

.bottom-0 {
  bottom: 0;
}

.left-0 {
  left: 0;
}

.top-1 {
  top: var(--size, 1rem);
}

.right-1 {
  right: var(--size, 1rem);
}

.bottom-1 {
  bottom: var(--size, 1rem);
}

.left-1 {
  left: var(--size, 1rem);
}

.top-2 {
  top: calc(var(--size, 1rem) * 2);
}

.right-2 {
  right: calc(var(--size, 1rem) * 2);
}

.bottom-2 {
  bottom: calc(var(--size, 1rem) * 2);
}

.left-2 {
  left: calc(var(--size, 1rem) * 2);
}

.top--1 {
  top: calc(var(--size, 1rem) * -1);
}

.right--1 {
  right: calc(var(--size, 1rem) * -1);
}

.bottom--1 {
  bottom: calc(var(--size, 1rem) * -1);
}

.left--1 {
  left: calc(var(--size, 1rem) * -1);
}

.top--2 {
  top: calc(var(--size, 1rem) * -2);
}

.right--2 {
  right: calc(var(--size, 1rem) * -2);
}

.bottom--2 {
  bottom: calc(var(--size, 1rem) * -2);
}

.left--2 {
  left: calc(var(--size, 1rem) * -2);
}

.inset-0 {
  inset: 0;
}

@media (max-width: 8rem) {
  .top-0-4xs {
    top: 0;
  }

  .right-0-4xs {
    right: 0;
  }

  .bottom-0-4xs {
    bottom: 0;
  }

  .left-0-4xs {
    left: 0;
  }

  .top-1-4xs {
    top: var(--size, 1rem);
  }

  .right-1-4xs {
    right: var(--size, 1rem);
  }

  .bottom-1-4xs {
    bottom: var(--size, 1rem);
  }

  .left-1-4xs {
    left: var(--size, 1rem);
  }

  .top-2-4xs {
    top: calc(var(--size, 1rem) * 2);
  }

  .right-2-4xs {
    right: calc(var(--size, 1rem) * 2);
  }

  .bottom-2-4xs {
    bottom: calc(var(--size, 1rem) * 2);
  }

  .left-2-4xs {
    left: calc(var(--size, 1rem) * 2);
  }

  .top--1-4xs {
    top: calc(var(--size, 1rem) * -1);
  }

  .right--1-4xs {
    right: calc(var(--size, 1rem) * -1);
  }

  .bottom--1-4xs {
    bottom: calc(var(--size, 1rem) * -1);
  }

  .left--1-4xs {
    left: calc(var(--size, 1rem) * -1);
  }

  .top--2-4xs {
    top: calc(var(--size, 1rem) * -2);
  }

  .right--2-4xs {
    right: calc(var(--size, 1rem) * -2);
  }

  .bottom--2-4xs {
    bottom: calc(var(--size, 1rem) * -2);
  }

  .left--2-4xs {
    left: calc(var(--size, 1rem) * -2);
  }

  .inset-0-4xs {
    inset: 0;
  }
}

@media (min-width: calc(8rem + .001px)) {
  .top-0-2xs {
    top: 0;
  }

  .right-0-2xs {
    right: 0;
  }

  .bottom-0-2xs {
    bottom: 0;
  }

  .left-0-2xs {
    left: 0;
  }

  .top-1-2xs {
    top: var(--size, 1rem);
  }

  .right-1-2xs {
    right: var(--size, 1rem);
  }

  .bottom-1-2xs {
    bottom: var(--size, 1rem);
  }

  .left-1-2xs {
    left: var(--size, 1rem);
  }

  .top-2-2xs {
    top: calc(var(--size, 1rem) * 2);
  }

  .right-2-2xs {
    right: calc(var(--size, 1rem) * 2);
  }

  .bottom-2-2xs {
    bottom: calc(var(--size, 1rem) * 2);
  }

  .left-2-2xs {
    left: calc(var(--size, 1rem) * 2);
  }

  .top--1-2xs {
    top: calc(var(--size, 1rem) * -1);
  }

  .right--1-2xs {
    right: calc(var(--size, 1rem) * -1);
  }

  .bottom--1-2xs {
    bottom: calc(var(--size, 1rem) * -1);
  }

  .left--1-2xs {
    left: calc(var(--size, 1rem) * -1);
  }

  .top--2-2xs {
    top: calc(var(--size, 1rem) * -2);
  }

  .right--2-2xs {
    right: calc(var(--size, 1rem) * -2);
  }

  .bottom--2-2xs {
    bottom: calc(var(--size, 1rem) * -2);
  }

  .left--2-2xs {
    left: calc(var(--size, 1rem) * -2);
  }

  .inset-0-2xs {
    inset: 0;
  }
}

@media (min-width: 20rem) {
  .top-0-xs {
    top: 0;
  }

  .right-0-xs {
    right: 0;
  }

  .bottom-0-xs {
    bottom: 0;
  }

  .left-0-xs {
    left: 0;
  }

  .top-1-xs {
    top: var(--size, 1rem);
  }

  .right-1-xs {
    right: var(--size, 1rem);
  }

  .bottom-1-xs {
    bottom: var(--size, 1rem);
  }

  .left-1-xs {
    left: var(--size, 1rem);
  }

  .top-2-xs {
    top: calc(var(--size, 1rem) * 2);
  }

  .right-2-xs {
    right: calc(var(--size, 1rem) * 2);
  }

  .bottom-2-xs {
    bottom: calc(var(--size, 1rem) * 2);
  }

  .left-2-xs {
    left: calc(var(--size, 1rem) * 2);
  }

  .top--1-xs {
    top: calc(var(--size, 1rem) * -1);
  }

  .right--1-xs {
    right: calc(var(--size, 1rem) * -1);
  }

  .bottom--1-xs {
    bottom: calc(var(--size, 1rem) * -1);
  }

  .left--1-xs {
    left: calc(var(--size, 1rem) * -1);
  }

  .top--2-xs {
    top: calc(var(--size, 1rem) * -2);
  }

  .right--2-xs {
    right: calc(var(--size, 1rem) * -2);
  }

  .bottom--2-xs {
    bottom: calc(var(--size, 1rem) * -2);
  }

  .left--2-xs {
    left: calc(var(--size, 1rem) * -2);
  }

  .inset-0-xs {
    inset: 0;
  }
}

@media (min-width: 32rem) {
  .top-0-s {
    top: 0;
  }

  .right-0-s {
    right: 0;
  }

  .bottom-0-s {
    bottom: 0;
  }

  .left-0-s {
    left: 0;
  }

  .top-1-s {
    top: var(--size, 1rem);
  }

  .right-1-s {
    right: var(--size, 1rem);
  }

  .bottom-1-s {
    bottom: var(--size, 1rem);
  }

  .left-1-s {
    left: var(--size, 1rem);
  }

  .top-2-s {
    top: calc(var(--size, 1rem) * 2);
  }

  .right-2-s {
    right: calc(var(--size, 1rem) * 2);
  }

  .bottom-2-s {
    bottom: calc(var(--size, 1rem) * 2);
  }

  .left-2-s {
    left: calc(var(--size, 1rem) * 2);
  }

  .top--1-s {
    top: calc(var(--size, 1rem) * -1);
  }

  .right--1-s {
    right: calc(var(--size, 1rem) * -1);
  }

  .bottom--1-s {
    bottom: calc(var(--size, 1rem) * -1);
  }

  .left--1-s {
    left: calc(var(--size, 1rem) * -1);
  }

  .top--2-s {
    top: calc(var(--size, 1rem) * -2);
  }

  .right--2-s {
    right: calc(var(--size, 1rem) * -2);
  }

  .bottom--2-s {
    bottom: calc(var(--size, 1rem) * -2);
  }

  .left--2-s {
    left: calc(var(--size, 1rem) * -2);
  }

  .inset-0-s {
    inset: 0;
  }
}

@media (min-width: 48rem) {
  .top-0-m {
    top: 0;
  }

  .right-0-m {
    right: 0;
  }

  .bottom-0-m {
    bottom: 0;
  }

  .left-0-m {
    left: 0;
  }

  .top-1-m {
    top: var(--size, 1rem);
  }

  .right-1-m {
    right: var(--size, 1rem);
  }

  .bottom-1-m {
    bottom: var(--size, 1rem);
  }

  .left-1-m {
    left: var(--size, 1rem);
  }

  .top-2-m {
    top: calc(var(--size, 1rem) * 2);
  }

  .right-2-m {
    right: calc(var(--size, 1rem) * 2);
  }

  .bottom-2-m {
    bottom: calc(var(--size, 1rem) * 2);
  }

  .left-2-m {
    left: calc(var(--size, 1rem) * 2);
  }

  .top--1-m {
    top: calc(var(--size, 1rem) * -1);
  }

  .right--1-m {
    right: calc(var(--size, 1rem) * -1);
  }

  .bottom--1-m {
    bottom: calc(var(--size, 1rem) * -1);
  }

  .left--1-m {
    left: calc(var(--size, 1rem) * -1);
  }

  .top--2-m {
    top: calc(var(--size, 1rem) * -2);
  }

  .right--2-m {
    right: calc(var(--size, 1rem) * -2);
  }

  .bottom--2-m {
    bottom: calc(var(--size, 1rem) * -2);
  }

  .left--2-m {
    left: calc(var(--size, 1rem) * -2);
  }

  .inset-0-m {
    inset: 0;
  }
}

@media (min-width: 64rem) {
  .top-0-l {
    top: 0;
  }

  .right-0-l {
    right: 0;
  }

  .bottom-0-l {
    bottom: 0;
  }

  .left-0-l {
    left: 0;
  }

  .top-1-l {
    top: var(--size, 1rem);
  }

  .right-1-l {
    right: var(--size, 1rem);
  }

  .bottom-1-l {
    bottom: var(--size, 1rem);
  }

  .left-1-l {
    left: var(--size, 1rem);
  }

  .top-2-l {
    top: calc(var(--size, 1rem) * 2);
  }

  .right-2-l {
    right: calc(var(--size, 1rem) * 2);
  }

  .bottom-2-l {
    bottom: calc(var(--size, 1rem) * 2);
  }

  .left-2-l {
    left: calc(var(--size, 1rem) * 2);
  }

  .top--1-l {
    top: calc(var(--size, 1rem) * -1);
  }

  .right--1-l {
    right: calc(var(--size, 1rem) * -1);
  }

  .bottom--1-l {
    bottom: calc(var(--size, 1rem) * -1);
  }

  .left--1-l {
    left: calc(var(--size, 1rem) * -1);
  }

  .top--2-l {
    top: calc(var(--size, 1rem) * -2);
  }

  .right--2-l {
    right: calc(var(--size, 1rem) * -2);
  }

  .bottom--2-l {
    bottom: calc(var(--size, 1rem) * -2);
  }

  .left--2-l {
    left: calc(var(--size, 1rem) * -2);
  }

  .inset-0-l {
    inset: 0;
  }
}

@media (min-width: 100rem) {
  .top-0-xl {
    top: 0;
  }

  .right-0-xl {
    right: 0;
  }

  .bottom-0-xl {
    bottom: 0;
  }

  .left-0-xl {
    left: 0;
  }

  .top-1-xl {
    top: var(--size, 1rem);
  }

  .right-1-xl {
    right: var(--size, 1rem);
  }

  .bottom-1-xl {
    bottom: var(--size, 1rem);
  }

  .left-1-xl {
    left: var(--size, 1rem);
  }

  .top-2-xl {
    top: calc(var(--size, 1rem) * 2);
  }

  .right-2-xl {
    right: calc(var(--size, 1rem) * 2);
  }

  .bottom-2-xl {
    bottom: calc(var(--size, 1rem) * 2);
  }

  .left-2-xl {
    left: calc(var(--size, 1rem) * 2);
  }

  .top--1-xl {
    top: calc(var(--size, 1rem) * -1);
  }

  .right--1-xl {
    right: calc(var(--size, 1rem) * -1);
  }

  .bottom--1-xl {
    bottom: calc(var(--size, 1rem) * -1);
  }

  .left--1-xl {
    left: calc(var(--size, 1rem) * -1);
  }

  .top--2-xl {
    top: calc(var(--size, 1rem) * -2);
  }

  .right--2-xl {
    right: calc(var(--size, 1rem) * -2);
  }

  .bottom--2-xl {
    bottom: calc(var(--size, 1rem) * -2);
  }

  .left--2-xl {
    left: calc(var(--size, 1rem) * -2);
  }

  .inset-0-xl {
    inset: 0;
  }
}

@container (--2xl) {
  .top-0-2xl {
    top: 0;
  }

  .right-0-2xl {
    right: 0;
  }

  .bottom-0-2xl {
    bottom: 0;
  }

  .left-0-2xl {
    left: 0;
  }

  .top-1-2xl {
    top: var(--size, 1rem);
  }

  .right-1-2xl {
    right: var(--size, 1rem);
  }

  .bottom-1-2xl {
    bottom: var(--size, 1rem);
  }

  .left-1-2xl {
    left: var(--size, 1rem);
  }

  .top-2-2xl {
    top: calc(var(--size, 1rem) * 2);
  }

  .right-2-2xl {
    right: calc(var(--size, 1rem) * 2);
  }

  .bottom-2-2xl {
    bottom: calc(var(--size, 1rem) * 2);
  }

  .left-2-2xl {
    left: calc(var(--size, 1rem) * 2);
  }

  .top--1-2xl {
    top: calc(var(--size, 1rem) * -1);
  }

  .right--1-2xl {
    right: calc(var(--size, 1rem) * -1);
  }

  .bottom--1-2xl {
    bottom: calc(var(--size, 1rem) * -1);
  }

  .left--1-2xl {
    left: calc(var(--size, 1rem) * -1);
  }

  .top--2-2xl {
    top: calc(var(--size, 1rem) * -2);
  }

  .right--2-2xl {
    right: calc(var(--size, 1rem) * -2);
  }

  .bottom--2-2xl {
    bottom: calc(var(--size, 1rem) * -2);
  }

  .left--2-2xl {
    left: calc(var(--size, 1rem) * -2);
  }

  .inset-0-2xl {
    inset: 0;
  }
}

@container (--4xl) {
  .top-0-4xl {
    top: 0;
  }

  .right-0-4xl {
    right: 0;
  }

  .bottom-0-4xl {
    bottom: 0;
  }

  .left-0-4xl {
    left: 0;
  }

  .top-1-4xl {
    top: var(--size, 1rem);
  }

  .right-1-4xl {
    right: var(--size, 1rem);
  }

  .bottom-1-4xl {
    bottom: var(--size, 1rem);
  }

  .left-1-4xl {
    left: var(--size, 1rem);
  }

  .top-2-4xl {
    top: calc(var(--size, 1rem) * 2);
  }

  .right-2-4xl {
    right: calc(var(--size, 1rem) * 2);
  }

  .bottom-2-4xl {
    bottom: calc(var(--size, 1rem) * 2);
  }

  .left-2-4xl {
    left: calc(var(--size, 1rem) * 2);
  }

  .top--1-4xl {
    top: calc(var(--size, 1rem) * -1);
  }

  .right--1-4xl {
    right: calc(var(--size, 1rem) * -1);
  }

  .bottom--1-4xl {
    bottom: calc(var(--size, 1rem) * -1);
  }

  .left--1-4xl {
    left: calc(var(--size, 1rem) * -1);
  }

  .top--2-4xl {
    top: calc(var(--size, 1rem) * -2);
  }

  .right--2-4xl {
    right: calc(var(--size, 1rem) * -2);
  }

  .bottom--2-4xl {
    bottom: calc(var(--size, 1rem) * -2);
  }

  .left--2-4xl {
    left: calc(var(--size, 1rem) * -2);
  }

  .inset-0-4xl {
    inset: 0;
  }
}

/* src/clears.css */
.cf:before, .cf:after {
  content: " ";
  display: table;
}

.cf:after {
  clear: both;
}

.cl {
  clear: left;
}

.cr {
  clear: right;
}

.cb {
  clear: both;
}

.cn {
  clear: none;
}

/* src/display.css */
.dn {
  display: none;
}

.di {
  display: inline;
}

.db {
  display: block;
}

.dib {
  display: inline-block;
}

.df, .flex {
  display: flex;
}

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

.dg, .grid {
  display: grid;
}

.dig, .inline-grid {
  display: inline-grid;
}

@media (max-width: 8rem) {
  .dn-4xs {
    display: none;
  }

  .di-4xs {
    display: inline;
  }

  .db-4xs {
    display: block;
  }

  .dib-4xs {
    display: inline-block;
  }

  .df-4xs, .flex-4xs {
    display: flex;
  }

  .dif-4xs, .inline-flex-4xs {
    display: inline-flex;
  }

  .dg-4xs, .grid-4xs {
    display: grid;
  }

  .dig-4xs, .inline-grid-4xs {
    display: inline-grid;
  }
}

@media (min-width: calc(8rem + .001px)) {
  .dn-2xs {
    display: none;
  }

  .di-2xs {
    display: inline;
  }

  .db-2xs {
    display: block;
  }

  .dib-2xs {
    display: inline-block;
  }

  .df-2xs, .flex-2xs {
    display: flex;
  }

  .dif-2xs, .inline-flex-2xs {
    display: inline-flex;
  }

  .dg-2xs, .grid-2xs {
    display: grid;
  }

  .dig-2xs, .inline-grid-2xs {
    display: inline-grid;
  }
}

@media (min-width: 20rem) {
  .dn-xs {
    display: none;
  }

  .di-xs {
    display: inline;
  }

  .db-xs {
    display: block;
  }

  .dib-xs {
    display: inline-block;
  }

  .df-xs, .flex-xs {
    display: flex;
  }

  .dif-xs, .inline-flex-xs {
    display: inline-flex;
  }

  .dg-xs, .grid-xs {
    display: grid;
  }

  .dig-xs, .inline-grid-xs {
    display: inline-grid;
  }
}

@media (min-width: 32rem) {
  .dn-s {
    display: none;
  }

  .di-s {
    display: inline;
  }

  .db-s {
    display: block;
  }

  .dib-s {
    display: inline-block;
  }

  .df-s, .flex-s {
    display: flex;
  }

  .dif-s, .inline-flex-s {
    display: inline-flex;
  }

  .dg-s, .grid-s {
    display: grid;
  }

  .dig-s, .inline-grid-s {
    display: inline-grid;
  }
}

@media (min-width: 48rem) {
  .dn-m {
    display: none;
  }

  .di-m {
    display: inline;
  }

  .db-m {
    display: block;
  }

  .dib-m {
    display: inline-block;
  }

  .df-m, .flex-m {
    display: flex;
  }

  .dif-m, .inline-flex-m {
    display: inline-flex;
  }

  .dg-m, .grid-m {
    display: grid;
  }

  .dig-m, .inline-grid-m {
    display: inline-grid;
  }
}

@media (min-width: 64rem) {
  .dn-l {
    display: none;
  }

  .di-l {
    display: inline;
  }

  .db-l {
    display: block;
  }

  .dib-l {
    display: inline-block;
  }

  .df-l, .flex-l {
    display: flex;
  }

  .dif-l, .inline-flex-l {
    display: inline-flex;
  }

  .dg-l, .grid-l {
    display: grid;
  }

  .dig-l, .inline-grid-l {
    display: inline-grid;
  }
}

@media (min-width: 100rem) {
  .dn-xl {
    display: none;
  }

  .di-xl {
    display: inline;
  }

  .db-xl {
    display: block;
  }

  .dib-xl {
    display: inline-block;
  }

  .df-xl, .flex-xl {
    display: flex;
  }

  .dif-xl, .inline-flex-xl {
    display: inline-flex;
  }

  .dg-xl, .grid-xl {
    display: grid;
  }

  .dig-xl, .inline-grid-xl {
    display: inline-grid;
  }
}

@container (--2xl) {
  .dn-2xl {
    display: none;
  }

  .di-2xl {
    display: inline;
  }

  .db-2xl {
    display: block;
  }

  .dib-2xl {
    display: inline-block;
  }

  .df-2xl {
    display: flex;
  }

  .flex-2xl {
    display: flex;
  }

  .dif-2xl {
    display: inline-flex;
  }

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

  .dg-2xl {
    display: grid;
  }

  .grid-2xl {
    display: grid;
  }

  .dig-2xl {
    display: inline-grid;
  }

  .inline-grid-2xl {
    display: inline-grid;
  }
}

@container (--4xl) {
  .dn-4xl {
    display: none;
  }

  .di-4xl {
    display: inline;
  }

  .db-4xl {
    display: block;
  }

  .dib-4xl {
    display: inline-block;
  }

  .df-4xl {
    display: flex;
  }

  .flex-4xl {
    display: flex;
  }

  .dif-4xl {
    display: inline-flex;
  }

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

  .dg-4xl {
    display: grid;
  }

  .grid-4xl {
    display: grid;
  }

  .dig-4xl {
    display: inline-grid;
  }

  .inline-grid-4xl {
    display: inline-grid;
  }
}

/* src/glass.css */
.glass1 {
  backdrop-filter: blur(20px);
  background: #fff0;
  border: 1px solid #ffffff26;
  box-shadow: 0 4px 30px #0000001a;
}

.glass2 {
  backdrop-filter: blur(20px);
  background: #ffffff0d;
  border: 1px solid #ffffff26;
  box-shadow: 0 4px 30px #0000001a;
}

.glass3 {
  backdrop-filter: blur(20px);
  background: #ffffff26;
  border: 1px solid #ffffff26;
  box-shadow: 0 4px 30px #0000001a;
}

.glass4 {
  backdrop-filter: blur(20px);
  background: #ffffff40;
  border: 1px solid #ffffff26;
  box-shadow: 0 4px 30px #0000001a;
}

.glass5 {
  backdrop-filter: blur(16px);
  background: #fff0;
  border: 1px solid #ffffff26;
  box-shadow: 0 4px 30px #0000001a;
}

.glass6 {
  backdrop-filter: blur(16px);
  background: #ffffff0d;
  border: 1px solid #ffffff26;
  box-shadow: 0 4px 30px #0000001a;
}

.glass7 {
  backdrop-filter: blur(16px);
  background: #ffffff26;
  border: 1px solid #ffffff26;
  box-shadow: 0 4px 30px #0000001a;
}

.glass8 {
  backdrop-filter: blur(16px);
  background: #ffffff40;
  border: 1px solid #ffffff26;
  box-shadow: 0 4px 30px #0000001a;
}

.glass9 {
  background: #ffffff40;
  border: 1px solid #ffffff26;
  box-shadow: 0 4px 30px #0000001a;
}

.glass10 {
  background: #fff0;
  border: 1px solid #ffffff26;
  box-shadow: 0 4px 30px #0000001a;
}

.glass1-hover:hover {
  backdrop-filter: blur(20px);
  background: #fff0;
  border: 1px solid #ffffff26;
  box-shadow: 0 4px 30px #0000001a;
}

.glass2-hover:hover {
  backdrop-filter: blur(20px);
  background: #ffffff0d;
  border: 1px solid #ffffff26;
  box-shadow: 0 4px 30px #0000001a;
}

.glass3-hover:hover {
  backdrop-filter: blur(20px);
  background: #ffffff26;
  border: 1px solid #ffffff26;
  box-shadow: 0 4px 30px #0000001a;
}

.glass4-hover:hover {
  backdrop-filter: blur(20px);
  background: #ffffff40;
  border: 1px solid #ffffff26;
  box-shadow: 0 4px 30px #0000001a;
}

.glass5-hover:hover {
  backdrop-filter: blur(16px);
  background: #fff0;
  border: 1px solid #ffffff26;
  box-shadow: 0 4px 30px #0000001a;
}

.glass6-hover:hover {
  backdrop-filter: blur(16px);
  background: #ffffff0d;
  border: 1px solid #ffffff26;
  box-shadow: 0 4px 30px #0000001a;
}

.glass7-hover:hover {
  backdrop-filter: blur(16px);
  background: #ffffff26;
  border: 1px solid #ffffff26;
  box-shadow: 0 4px 30px #0000001a;
}

.glass8-hover:hover {
  backdrop-filter: blur(16px);
  background: #ffffff40;
  border: 1px solid #ffffff26;
  box-shadow: 0 4px 30px #0000001a;
}

.glass9-hover:hover {
  background: #ffffff40;
  border: 1px solid #ffffff26;
  box-shadow: 0 4px 30px #0000001a;
}

.glass10-hover:hover {
  background: #fff0;
  border: 1px solid #ffffff26;
  box-shadow: 0 4px 30px #0000001a;
}

.glass1-focus:focus {
  backdrop-filter: blur(20px);
  background: #fff0;
  border: 1px solid #ffffff26;
  box-shadow: 0 4px 30px #0000001a;
}

.glass2-focus:focus {
  backdrop-filter: blur(20px);
  background: #ffffff0d;
  border: 1px solid #ffffff26;
  box-shadow: 0 4px 30px #0000001a;
}

.glass3-focus:focus {
  backdrop-filter: blur(20px);
  background: #ffffff26;
  border: 1px solid #ffffff26;
  box-shadow: 0 4px 30px #0000001a;
}

.glass4-focus:focus {
  backdrop-filter: blur(20px);
  background: #ffffff40;
  border: 1px solid #ffffff26;
  box-shadow: 0 4px 30px #0000001a;
}

.glass5-focus:focus {
  backdrop-filter: blur(16px);
  background: #fff0;
  border: 1px solid #ffffff26;
  box-shadow: 0 4px 30px #0000001a;
}

.glass6-focus:focus {
  backdrop-filter: blur(16px);
  background: #ffffff0d;
  border: 1px solid #ffffff26;
  box-shadow: 0 4px 30px #0000001a;
}

.glass7-focus:focus {
  backdrop-filter: blur(16px);
  background: #ffffff26;
  border: 1px solid #ffffff26;
  box-shadow: 0 4px 30px #0000001a;
}

.glass8-focus:focus {
  backdrop-filter: blur(16px);
  background: #ffffff40;
  border: 1px solid #ffffff26;
  box-shadow: 0 4px 30px #0000001a;
}

.glass9-focus:focus {
  background: #ffffff40;
  border: 1px solid #ffffff26;
  box-shadow: 0 4px 30px #0000001a;
}

.glass10-focus:focus {
  background: #fff0;
  border: 1px solid #ffffff26;
  box-shadow: 0 4px 30px #0000001a;
}

/* src/gap.css */
.gap-0 {
  gap: 0;
}

.gap-1 {
  gap: calc(var(--spacing) * 1);
}

.gap-2 {
  gap: calc(var(--spacing) * 2);
}

.gap-3 {
  gap: calc(var(--spacing) * 3);
}

.gap-4 {
  gap: calc(var(--spacing) * 4);
}

.gap-5 {
  gap: calc(var(--spacing) * 5);
}

.gap-6 {
  gap: calc(var(--spacing) * 6);
}

.gap-7 {
  gap: calc(var(--spacing) * 7);
}

.gap-8 {
  gap: calc(var(--spacing) * 8);
}

.gap-9 {
  gap: calc(var(--spacing) * 9);
}

.gap-10 {
  gap: calc(var(--spacing) * 10);
}

@media (max-width: 8rem) {
  .gap-0-4xs {
    gap: 0;
  }

  .gap-1-4xs {
    gap: calc(var(--spacing) * 1);
  }

  .gap-2-4xs {
    gap: calc(var(--spacing) * 2);
  }

  .gap-3-4xs {
    gap: calc(var(--spacing) * 3);
  }

  .gap-4-4xs {
    gap: calc(var(--spacing) * 4);
  }

  .gap-5-4xs {
    gap: calc(var(--spacing) * 5);
  }

  .gap-6-4xs {
    gap: calc(var(--spacing) * 6);
  }

  .gap-7-4xs {
    gap: calc(var(--spacing) * 7);
  }

  .gap-8-4xs {
    gap: calc(var(--spacing) * 8);
  }

  .gap-9-4xs {
    gap: calc(var(--spacing) * 9);
  }

  .gap-10-4xs {
    gap: calc(var(--spacing) * 10);
  }
}

@media (min-width: calc(8rem + .001px)) {
  .gap-0-2xs {
    gap: 0;
  }

  .gap-1-2xs {
    gap: calc(var(--spacing) * 1);
  }

  .gap-2-2xs {
    gap: calc(var(--spacing) * 2);
  }

  .gap-3-2xs {
    gap: calc(var(--spacing) * 3);
  }

  .gap-4-2xs {
    gap: calc(var(--spacing) * 4);
  }

  .gap-5-2xs {
    gap: calc(var(--spacing) * 5);
  }

  .gap-6-2xs {
    gap: calc(var(--spacing) * 6);
  }

  .gap-7-2xs {
    gap: calc(var(--spacing) * 7);
  }

  .gap-8-2xs {
    gap: calc(var(--spacing) * 8);
  }

  .gap-9-2xs {
    gap: calc(var(--spacing) * 9);
  }

  .gap-10-2xs {
    gap: calc(var(--spacing) * 10);
  }
}

@media (min-width: 20rem) {
  .gap-0-xs {
    gap: 0;
  }

  .gap-1-xs {
    gap: calc(var(--spacing) * 1);
  }

  .gap-2-xs {
    gap: calc(var(--spacing) * 2);
  }

  .gap-3-xs {
    gap: calc(var(--spacing) * 3);
  }

  .gap-4-xs {
    gap: calc(var(--spacing) * 4);
  }

  .gap-5-xs {
    gap: calc(var(--spacing) * 5);
  }

  .gap-6-xs {
    gap: calc(var(--spacing) * 6);
  }

  .gap-7-xs {
    gap: calc(var(--spacing) * 7);
  }

  .gap-8-xs {
    gap: calc(var(--spacing) * 8);
  }

  .gap-9-xs {
    gap: calc(var(--spacing) * 9);
  }

  .gap-10-xs {
    gap: calc(var(--spacing) * 10);
  }
}

@media (min-width: 32rem) {
  .gap-0-s {
    gap: 0;
  }

  .gap-1-s {
    gap: calc(var(--spacing) * 1);
  }

  .gap-2-s {
    gap: calc(var(--spacing) * 2);
  }

  .gap-3-s {
    gap: calc(var(--spacing) * 3);
  }

  .gap-4-s {
    gap: calc(var(--spacing) * 4);
  }

  .gap-5-s {
    gap: calc(var(--spacing) * 5);
  }

  .gap-6-s {
    gap: calc(var(--spacing) * 6);
  }

  .gap-7-s {
    gap: calc(var(--spacing) * 7);
  }

  .gap-8-s {
    gap: calc(var(--spacing) * 8);
  }

  .gap-9-s {
    gap: calc(var(--spacing) * 9);
  }

  .gap-10-s {
    gap: calc(var(--spacing) * 10);
  }
}

@media (min-width: 48rem) {
  .gap-0-m {
    gap: 0;
  }

  .gap-1-m {
    gap: calc(var(--spacing) * 1);
  }

  .gap-2-m {
    gap: calc(var(--spacing) * 2);
  }

  .gap-3-m {
    gap: calc(var(--spacing) * 3);
  }

  .gap-4-m {
    gap: calc(var(--spacing) * 4);
  }

  .gap-5-m {
    gap: calc(var(--spacing) * 5);
  }

  .gap-6-m {
    gap: calc(var(--spacing) * 6);
  }

  .gap-7-m {
    gap: calc(var(--spacing) * 7);
  }

  .gap-8-m {
    gap: calc(var(--spacing) * 8);
  }

  .gap-9-m {
    gap: calc(var(--spacing) * 9);
  }

  .gap-10-m {
    gap: calc(var(--spacing) * 10);
  }
}

@media (min-width: 64rem) {
  .gap-0-l {
    gap: 0;
  }

  .gap-1-l {
    gap: calc(var(--spacing) * 1);
  }

  .gap-2-l {
    gap: calc(var(--spacing) * 2);
  }

  .gap-3-l {
    gap: calc(var(--spacing) * 3);
  }

  .gap-4-l {
    gap: calc(var(--spacing) * 4);
  }

  .gap-5-l {
    gap: calc(var(--spacing) * 5);
  }

  .gap-6-l {
    gap: calc(var(--spacing) * 6);
  }

  .gap-7-l {
    gap: calc(var(--spacing) * 7);
  }

  .gap-8-l {
    gap: calc(var(--spacing) * 8);
  }

  .gap-9-l {
    gap: calc(var(--spacing) * 9);
  }

  .gap-10-l {
    gap: calc(var(--spacing) * 10);
  }
}

@media (min-width: 100rem) {
  .gap-0-xl {
    gap: 0;
  }

  .gap-1-xl {
    gap: calc(var(--spacing) * 1);
  }

  .gap-2-xl {
    gap: calc(var(--spacing) * 2);
  }

  .gap-3-xl {
    gap: calc(var(--spacing) * 3);
  }

  .gap-4-xl {
    gap: calc(var(--spacing) * 4);
  }

  .gap-5-xl {
    gap: calc(var(--spacing) * 5);
  }

  .gap-6-xl {
    gap: calc(var(--spacing) * 6);
  }

  .gap-7-xl {
    gap: calc(var(--spacing) * 7);
  }

  .gap-8-xl {
    gap: calc(var(--spacing) * 8);
  }

  .gap-9-xl {
    gap: calc(var(--spacing) * 9);
  }

  .gap-10-xl {
    gap: calc(var(--spacing) * 10);
  }
}

@media (min-width: 130rem) {
  .gap-0-2xl {
    gap: 0;
  }

  .gap-1-2xl {
    gap: calc(var(--spacing) * 1);
  }

  .gap-2-2xl {
    gap: calc(var(--spacing) * 2);
  }

  .gap-3-2xl {
    gap: calc(var(--spacing) * 3);
  }

  .gap-4-2xl {
    gap: calc(var(--spacing) * 4);
  }

  .gap-5-2xl {
    gap: calc(var(--spacing) * 5);
  }

  .gap-6-2xl {
    gap: calc(var(--spacing) * 6);
  }

  .gap-7-2xl {
    gap: calc(var(--spacing) * 7);
  }

  .gap-8-2xl {
    gap: calc(var(--spacing) * 8);
  }

  .gap-9-2xl {
    gap: calc(var(--spacing) * 9);
  }

  .gap-10-2xl {
    gap: calc(var(--spacing) * 10);
  }
}

@media (min-width: 200rem) {
  .gap-0-4xl {
    gap: 0;
  }

  .gap-1-4xl {
    gap: calc(var(--spacing) * 1);
  }

  .gap-2-4xl {
    gap: calc(var(--spacing) * 2);
  }

  .gap-3-4xl {
    gap: calc(var(--spacing) * 3);
  }

  .gap-4-4xl {
    gap: calc(var(--spacing) * 4);
  }

  .gap-5-4xl {
    gap: calc(var(--spacing) * 5);
  }

  .gap-6-4xl {
    gap: calc(var(--spacing) * 6);
  }

  .gap-7-4xl {
    gap: calc(var(--spacing) * 7);
  }

  .gap-8-4xl {
    gap: calc(var(--spacing) * 8);
  }

  .gap-9-4xl {
    gap: calc(var(--spacing) * 9);
  }

  .gap-10-4xl {
    gap: calc(var(--spacing) * 10);
  }
}

/* src/gap-column.css */
.colgap0 {
  column-gap: 0;
}

.colgap1 {
  column-gap: calc(var(--spacing) * 1);
}

.colgap2 {
  column-gap: calc(var(--spacing) * 2);
}

.colgap3 {
  column-gap: calc(var(--spacing) * 3);
}

.colgap4 {
  column-gap: calc(var(--spacing) * 4);
}

.colgap5 {
  column-gap: calc(var(--spacing) * 5);
}

.colgap6 {
  column-gap: calc(var(--spacing) * 6);
}

.colgap7 {
  column-gap: calc(var(--spacing) * 7);
}

.colgap8 {
  column-gap: calc(var(--spacing) * 8);
}

.colgap9 {
  column-gap: calc(var(--spacing) * 9);
}

.colgap10 {
  column-gap: calc(var(--spacing) * 10);
}

@media (max-width: 8rem) {
  .colgap0-4xs {
    column-gap: 0;
  }

  .colgap1-4xs {
    column-gap: calc(var(--spacing) * 1);
  }

  .colgap2-4xs {
    column-gap: calc(var(--spacing) * 2);
  }

  .colgap3-4xs {
    column-gap: calc(var(--spacing) * 3);
  }

  .colgap4-4xs {
    column-gap: calc(var(--spacing) * 4);
  }

  .colgap5-4xs {
    column-gap: calc(var(--spacing) * 5);
  }

  .colgap6-4xs {
    column-gap: calc(var(--spacing) * 6);
  }

  .colgap7-4xs {
    column-gap: calc(var(--spacing) * 7);
  }

  .colgap8-4xs {
    column-gap: calc(var(--spacing) * 8);
  }

  .colgap9-4xs {
    column-gap: calc(var(--spacing) * 9);
  }

  .colgap10-4xs {
    column-gap: calc(var(--spacing) * 10);
  }
}

@media (min-width: calc(8rem + .001px)) {
  .colgap0-2xs {
    column-gap: 0;
  }

  .colgap1-2xs {
    column-gap: calc(var(--spacing) * 1);
  }

  .colgap2-2xs {
    column-gap: calc(var(--spacing) * 2);
  }

  .colgap3-2xs {
    column-gap: calc(var(--spacing) * 3);
  }

  .colgap4-2xs {
    column-gap: calc(var(--spacing) * 4);
  }

  .colgap5-2xs {
    column-gap: calc(var(--spacing) * 5);
  }

  .colgap6-2xs {
    column-gap: calc(var(--spacing) * 6);
  }

  .colgap7-2xs {
    column-gap: calc(var(--spacing) * 7);
  }

  .colgap8-2xs {
    column-gap: calc(var(--spacing) * 8);
  }

  .colgap9-2xs {
    column-gap: calc(var(--spacing) * 9);
  }

  .colgap10-2xs {
    column-gap: calc(var(--spacing) * 10);
  }
}

@media (min-width: 20rem) {
  .colgap0-xs {
    column-gap: 0;
  }

  .colgap1-xs {
    column-gap: calc(var(--spacing) * 1);
  }

  .colgap2-xs {
    column-gap: calc(var(--spacing) * 2);
  }

  .colgap3-xs {
    column-gap: calc(var(--spacing) * 3);
  }

  .colgap4-xs {
    column-gap: calc(var(--spacing) * 4);
  }

  .colgap5-xs {
    column-gap: calc(var(--spacing) * 5);
  }

  .colgap6-xs {
    column-gap: calc(var(--spacing) * 6);
  }

  .colgap7-xs {
    column-gap: calc(var(--spacing) * 7);
  }

  .colgap8-xs {
    column-gap: calc(var(--spacing) * 8);
  }

  .colgap9-xs {
    column-gap: calc(var(--spacing) * 9);
  }

  .colgap10-xs {
    column-gap: calc(var(--spacing) * 10);
  }
}

@media (min-width: 32rem) {
  .colgap0-s {
    column-gap: 0;
  }

  .colgap1-s {
    column-gap: calc(var(--spacing) * 1);
  }

  .colgap2-s {
    column-gap: calc(var(--spacing) * 2);
  }

  .colgap3-s {
    column-gap: calc(var(--spacing) * 3);
  }

  .colgap4-s {
    column-gap: calc(var(--spacing) * 4);
  }

  .colgap5-s {
    column-gap: calc(var(--spacing) * 5);
  }

  .colgap6-s {
    column-gap: calc(var(--spacing) * 6);
  }

  .colgap7-s {
    column-gap: calc(var(--spacing) * 7);
  }

  .colgap8-s {
    column-gap: calc(var(--spacing) * 8);
  }

  .colgap9-s {
    column-gap: calc(var(--spacing) * 9);
  }

  .colgap10-s {
    column-gap: calc(var(--spacing) * 10);
  }
}

@media (min-width: 48rem) {
  .colgap0-m {
    column-gap: 0;
  }

  .colgap1-m {
    column-gap: calc(var(--spacing) * 1);
  }

  .colgap2-m {
    column-gap: calc(var(--spacing) * 2);
  }

  .colgap3-m {
    column-gap: calc(var(--spacing) * 3);
  }

  .colgap4-m {
    column-gap: calc(var(--spacing) * 4);
  }

  .colgap5-m {
    column-gap: calc(var(--spacing) * 5);
  }

  .colgap6-m {
    column-gap: calc(var(--spacing) * 6);
  }

  .colgap7-m {
    column-gap: calc(var(--spacing) * 7);
  }

  .colgap8-m {
    column-gap: calc(var(--spacing) * 8);
  }

  .colgap9-m {
    column-gap: calc(var(--spacing) * 9);
  }

  .colgap10-m {
    column-gap: calc(var(--spacing) * 10);
  }
}

@media (min-width: 64rem) {
  .colgap0-l {
    column-gap: 0;
  }

  .colgap1-l {
    column-gap: calc(var(--spacing) * 1);
  }

  .colgap2-l {
    column-gap: calc(var(--spacing) * 2);
  }

  .colgap3-l {
    column-gap: calc(var(--spacing) * 3);
  }

  .colgap4-l {
    column-gap: calc(var(--spacing) * 4);
  }

  .colgap5-l {
    column-gap: calc(var(--spacing) * 5);
  }

  .colgap6-l {
    column-gap: calc(var(--spacing) * 6);
  }

  .colgap7-l {
    column-gap: calc(var(--spacing) * 7);
  }

  .colgap8-l {
    column-gap: calc(var(--spacing) * 8);
  }

  .colgap9-l {
    column-gap: calc(var(--spacing) * 9);
  }

  .colgap10-l {
    column-gap: calc(var(--spacing) * 10);
  }
}

@media (min-width: 100rem) {
  .colgap0-xl {
    column-gap: 0;
  }

  .colgap1-xl {
    column-gap: calc(var(--spacing) * 1);
  }

  .colgap2-xl {
    column-gap: calc(var(--spacing) * 2);
  }

  .colgap3-xl {
    column-gap: calc(var(--spacing) * 3);
  }

  .colgap4-xl {
    column-gap: calc(var(--spacing) * 4);
  }

  .colgap5-xl {
    column-gap: calc(var(--spacing) * 5);
  }

  .colgap6-xl {
    column-gap: calc(var(--spacing) * 6);
  }

  .colgap7-xl {
    column-gap: calc(var(--spacing) * 7);
  }

  .colgap8-xl {
    column-gap: calc(var(--spacing) * 8);
  }

  .colgap9-xl {
    column-gap: calc(var(--spacing) * 9);
  }

  .colgap10-xl {
    column-gap: calc(var(--spacing) * 10);
  }
}

@media (min-width: 130rem) {
  .colgap0-2xl {
    column-gap: 0;
  }

  .colgap1-2xl {
    column-gap: calc(var(--spacing) * 1);
  }

  .colgap2-2xl {
    column-gap: calc(var(--spacing) * 2);
  }

  .colgap3-2xl {
    column-gap: calc(var(--spacing) * 3);
  }

  .colgap4-2xl {
    column-gap: calc(var(--spacing) * 4);
  }

  .colgap5-2xl {
    column-gap: calc(var(--spacing) * 5);
  }

  .colgap6-2xl {
    column-gap: calc(var(--spacing) * 6);
  }

  .colgap7-2xl {
    column-gap: calc(var(--spacing) * 7);
  }

  .colgap8-2xl {
    column-gap: calc(var(--spacing) * 8);
  }

  .colgap9-2xl {
    column-gap: calc(var(--spacing) * 9);
  }

  .colgap10-2xl {
    column-gap: calc(var(--spacing) * 10);
  }
}

@media (min-width: 200rem) {
  .colgap0-4xl {
    column-gap: 0;
  }

  .colgap1-4xl {
    column-gap: calc(var(--spacing) * 1);
  }

  .colgap2-4xl {
    column-gap: calc(var(--spacing) * 2);
  }

  .colgap3-4xl {
    column-gap: calc(var(--spacing) * 3);
  }

  .colgap4-4xl {
    column-gap: calc(var(--spacing) * 4);
  }

  .colgap5-4xl {
    column-gap: calc(var(--spacing) * 5);
  }

  .colgap6-4xl {
    column-gap: calc(var(--spacing) * 6);
  }

  .colgap7-4xl {
    column-gap: calc(var(--spacing) * 7);
  }

  .colgap8-4xl {
    column-gap: calc(var(--spacing) * 8);
  }

  .colgap9-4xl {
    column-gap: calc(var(--spacing) * 9);
  }

  .colgap10-4xl {
    column-gap: calc(var(--spacing) * 10);
  }
}

/* src/gap-row.css */
.rowgap0 {
  row-gap: 0;
}

.rowgap1 {
  row-gap: calc(var(--spacing) * 1);
}

.rowgap2 {
  row-gap: calc(var(--spacing) * 2);
}

.rowgap3 {
  row-gap: calc(var(--spacing) * 3);
}

.rowgap4 {
  row-gap: calc(var(--spacing) * 4);
}

.rowgap5 {
  row-gap: calc(var(--spacing) * 5);
}

.rowgap6 {
  row-gap: calc(var(--spacing) * 6);
}

.rowgap7 {
  row-gap: calc(var(--spacing) * 7);
}

.rowgap8 {
  row-gap: calc(var(--spacing) * 8);
}

.rowgap9 {
  row-gap: calc(var(--spacing) * 9);
}

.rowgap10 {
  row-gap: calc(var(--spacing) * 10);
}

@media (max-width: 8rem) {
  .rowgap0-4xs {
    row-gap: 0;
  }

  .rowgap1-4xs {
    row-gap: calc(var(--spacing) * 1);
  }

  .rowgap2-4xs {
    row-gap: calc(var(--spacing) * 2);
  }

  .rowgap3-4xs {
    row-gap: calc(var(--spacing) * 3);
  }

  .rowgap4-4xs {
    row-gap: calc(var(--spacing) * 4);
  }

  .rowgap5-4xs {
    row-gap: calc(var(--spacing) * 5);
  }

  .rowgap6-4xs {
    row-gap: calc(var(--spacing) * 6);
  }

  .rowgap7-4xs {
    row-gap: calc(var(--spacing) * 7);
  }

  .rowgap8-4xs {
    row-gap: calc(var(--spacing) * 8);
  }

  .rowgap9-4xs {
    row-gap: calc(var(--spacing) * 9);
  }

  .rowgap10-4xs {
    row-gap: calc(var(--spacing) * 10);
  }
}

@media (min-width: calc(8rem + .001px)) {
  .rowgap0-2xs {
    row-gap: 0;
  }

  .rowgap1-2xs {
    row-gap: calc(var(--spacing) * 1);
  }

  .rowgap2-2xs {
    row-gap: calc(var(--spacing) * 2);
  }

  .rowgap3-2xs {
    row-gap: calc(var(--spacing) * 3);
  }

  .rowgap4-2xs {
    row-gap: calc(var(--spacing) * 4);
  }

  .rowgap5-2xs {
    row-gap: calc(var(--spacing) * 5);
  }

  .rowgap6-2xs {
    row-gap: calc(var(--spacing) * 6);
  }

  .rowgap7-2xs {
    row-gap: calc(var(--spacing) * 7);
  }

  .rowgap8-2xs {
    row-gap: calc(var(--spacing) * 8);
  }

  .rowgap9-2xs {
    row-gap: calc(var(--spacing) * 9);
  }

  .rowgap10-2xs {
    row-gap: calc(var(--spacing) * 10);
  }
}

@media (min-width: 20rem) {
  .rowgap0-xs {
    row-gap: 0;
  }

  .rowgap1-xs {
    row-gap: calc(var(--spacing) * 1);
  }

  .rowgap2-xs {
    row-gap: calc(var(--spacing) * 2);
  }

  .rowgap3-xs {
    row-gap: calc(var(--spacing) * 3);
  }

  .rowgap4-xs {
    row-gap: calc(var(--spacing) * 4);
  }

  .rowgap5-xs {
    row-gap: calc(var(--spacing) * 5);
  }

  .rowgap6-xs {
    row-gap: calc(var(--spacing) * 6);
  }

  .rowgap7-xs {
    row-gap: calc(var(--spacing) * 7);
  }

  .rowgap8-xs {
    row-gap: calc(var(--spacing) * 8);
  }

  .rowgap9-xs {
    row-gap: calc(var(--spacing) * 9);
  }

  .rowgap10-xs {
    row-gap: calc(var(--spacing) * 10);
  }
}

@media (min-width: 32rem) {
  .rowgap0-s {
    row-gap: 0;
  }

  .rowgap1-s {
    row-gap: calc(var(--spacing) * 1);
  }

  .rowgap2-s {
    row-gap: calc(var(--spacing) * 2);
  }

  .rowgap3-s {
    row-gap: calc(var(--spacing) * 3);
  }

  .rowgap4-s {
    row-gap: calc(var(--spacing) * 4);
  }

  .rowgap5-s {
    row-gap: calc(var(--spacing) * 5);
  }

  .rowgap6-s {
    row-gap: calc(var(--spacing) * 6);
  }

  .rowgap7-s {
    row-gap: calc(var(--spacing) * 7);
  }

  .rowgap8-s {
    row-gap: calc(var(--spacing) * 8);
  }

  .rowgap9-s {
    row-gap: calc(var(--spacing) * 9);
  }

  .rowgap10-s {
    row-gap: calc(var(--spacing) * 10);
  }
}

@media (min-width: 48rem) {
  .rowgap0-m {
    row-gap: 0;
  }

  .rowgap1-m {
    row-gap: calc(var(--spacing) * 1);
  }

  .rowgap2-m {
    row-gap: calc(var(--spacing) * 2);
  }

  .rowgap3-m {
    row-gap: calc(var(--spacing) * 3);
  }

  .rowgap4-m {
    row-gap: calc(var(--spacing) * 4);
  }

  .rowgap5-m {
    row-gap: calc(var(--spacing) * 5);
  }

  .rowgap6-m {
    row-gap: calc(var(--spacing) * 6);
  }

  .rowgap7-m {
    row-gap: calc(var(--spacing) * 7);
  }

  .rowgap8-m {
    row-gap: calc(var(--spacing) * 8);
  }

  .rowgap9-m {
    row-gap: calc(var(--spacing) * 9);
  }

  .rowgap10-m {
    row-gap: calc(var(--spacing) * 10);
  }
}

@media (min-width: 64rem) {
  .rowgap0-l {
    row-gap: 0;
  }

  .rowgap1-l {
    row-gap: calc(var(--spacing) * 1);
  }

  .rowgap2-l {
    row-gap: calc(var(--spacing) * 2);
  }

  .rowgap3-l {
    row-gap: calc(var(--spacing) * 3);
  }

  .rowgap4-l {
    row-gap: calc(var(--spacing) * 4);
  }

  .rowgap5-l {
    row-gap: calc(var(--spacing) * 5);
  }

  .rowgap6-l {
    row-gap: calc(var(--spacing) * 6);
  }

  .rowgap7-l {
    row-gap: calc(var(--spacing) * 7);
  }

  .rowgap8-l {
    row-gap: calc(var(--spacing) * 8);
  }

  .rowgap9-l {
    row-gap: calc(var(--spacing) * 9);
  }

  .rowgap10-l {
    row-gap: calc(var(--spacing) * 10);
  }
}

@media (min-width: 100rem) {
  .rowgap0-xl {
    row-gap: 0;
  }

  .rowgap1-xl {
    row-gap: calc(var(--spacing) * 1);
  }

  .rowgap2-xl {
    row-gap: calc(var(--spacing) * 2);
  }

  .rowgap3-xl {
    row-gap: calc(var(--spacing) * 3);
  }

  .rowgap4-xl {
    row-gap: calc(var(--spacing) * 4);
  }

  .rowgap5-xl {
    row-gap: calc(var(--spacing) * 5);
  }

  .rowgap6-xl {
    row-gap: calc(var(--spacing) * 6);
  }

  .rowgap7-xl {
    row-gap: calc(var(--spacing) * 7);
  }

  .rowgap8-xl {
    row-gap: calc(var(--spacing) * 8);
  }

  .rowgap9-xl {
    row-gap: calc(var(--spacing) * 9);
  }

  .rowgap10-xl {
    row-gap: calc(var(--spacing) * 10);
  }
}

@media (min-width: 130rem) {
  .rowgap0-2xl {
    row-gap: 0;
  }

  .rowgap1-2xl {
    row-gap: calc(var(--spacing) * 1);
  }

  .rowgap2-2xl {
    row-gap: calc(var(--spacing) * 2);
  }

  .rowgap3-2xl {
    row-gap: calc(var(--spacing) * 3);
  }

  .rowgap4-2xl {
    row-gap: calc(var(--spacing) * 4);
  }

  .rowgap5-2xl {
    row-gap: calc(var(--spacing) * 5);
  }

  .rowgap6-2xl {
    row-gap: calc(var(--spacing) * 6);
  }

  .rowgap7-2xl {
    row-gap: calc(var(--spacing) * 7);
  }

  .rowgap8-2xl {
    row-gap: calc(var(--spacing) * 8);
  }

  .rowgap9-2xl {
    row-gap: calc(var(--spacing) * 9);
  }

  .rowgap10-2xl {
    row-gap: calc(var(--spacing) * 10);
  }
}

@media (min-width: 200rem) {
  .rowgap0-4xl {
    row-gap: 0;
  }

  .rowgap1-4xl {
    row-gap: calc(var(--spacing) * 1);
  }

  .rowgap2-4xl {
    row-gap: calc(var(--spacing) * 2);
  }

  .rowgap3-4xl {
    row-gap: calc(var(--spacing) * 3);
  }

  .rowgap4-4xl {
    row-gap: calc(var(--spacing) * 4);
  }

  .rowgap5-4xl {
    row-gap: calc(var(--spacing) * 5);
  }

  .rowgap6-4xl {
    row-gap: calc(var(--spacing) * 6);
  }

  .rowgap7-4xl {
    row-gap: calc(var(--spacing) * 7);
  }

  .rowgap8-4xl {
    row-gap: calc(var(--spacing) * 8);
  }

  .rowgap9-4xl {
    row-gap: calc(var(--spacing) * 9);
  }

  .rowgap10-4xl {
    row-gap: calc(var(--spacing) * 10);
  }
}

/* src/grid-template-columns.css */
.cols-1 {
  grid-template-columns: repeat(1, 1fr);
}

.cols-2 {
  grid-template-columns: repeat(2, 1fr);
}

.cols-3 {
  grid-template-columns: repeat(3, 1fr);
}

.cols-4 {
  grid-template-columns: repeat(4, 1fr);
}

.cols-5 {
  grid-template-columns: repeat(5, 1fr);
}

.cols-6 {
  grid-template-columns: repeat(6, 1fr);
}

.cols-7 {
  grid-template-columns: repeat(7, 1fr);
}

.cols-8 {
  grid-template-columns: repeat(8, 1fr);
}

.cols-9 {
  grid-template-columns: repeat(9, 1fr);
}

.cols-10 {
  grid-template-columns: repeat(10, 1fr);
}

.cols-11 {
  grid-template-columns: repeat(11, 1fr);
}

.cols-12 {
  grid-template-columns: repeat(12, 1fr);
}

.cols-13 {
  grid-template-columns: repeat(13, 1fr);
}

.cols-14 {
  grid-template-columns: repeat(14, 1fr);
}

.cols-15 {
  grid-template-columns: repeat(15, 1fr);
}

.cols-16 {
  grid-template-columns: repeat(16, 1fr);
}

.cols-min-32 {
  grid-template-columns: repeat(auto-fill, minmax(32px, 1fr));
}

.cols-min-64 {
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
}

.cols-min-128 {
  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
}

.cols-min-192 {
  grid-template-columns: repeat(auto-fill, minmax(192px, 1fr));
}

.cols-min-240 {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.cols-min-256 {
  grid-template-columns: repeat(auto-fill, minmax(256px, 1fr));
}

.cols-min-320 {
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}

.cols-min-480 {
  grid-template-columns: repeat(auto-fill, minmax(480px, 1fr));
}

.masonry {
  grid-template-columns: masonry;
}

.subgrid {
  grid-template-columns: subgrid;
}

.cols-none {
  grid-template-columns: none;
}

@media (max-width: 8rem) {
  .cols-1-4xs {
    grid-template-columns: repeat(1, 1fr);
  }

  .cols-2-4xs {
    grid-template-columns: repeat(2, 1fr);
  }

  .cols-3-4xs {
    grid-template-columns: repeat(3, 1fr);
  }

  .cols-4-4xs {
    grid-template-columns: repeat(4, 1fr);
  }

  .cols-5-4xs {
    grid-template-columns: repeat(5, 1fr);
  }

  .cols-6-4xs {
    grid-template-columns: repeat(6, 1fr);
  }

  .cols-7-4xs {
    grid-template-columns: repeat(7, 1fr);
  }

  .cols-8-4xs {
    grid-template-columns: repeat(8, 1fr);
  }

  .cols-9-4xs {
    grid-template-columns: repeat(9, 1fr);
  }

  .cols-10-4xs {
    grid-template-columns: repeat(10, 1fr);
  }

  .cols-11-4xs {
    grid-template-columns: repeat(11, 1fr);
  }

  .cols-12-4xs {
    grid-template-columns: repeat(12, 1fr);
  }

  .cols-13-4xs {
    grid-template-columns: repeat(13, 1fr);
  }

  .cols-14-4xs {
    grid-template-columns: repeat(14, 1fr);
  }

  .cols-15-4xs {
    grid-template-columns: repeat(15, 1fr);
  }

  .cols-16-4xs {
    grid-template-columns: repeat(16, 1fr);
  }

  .cols-min-32-4xs {
    grid-template-columns: repeat(auto-fill, minmax(32px, 1fr));
  }

  .cols-min-64-4xs {
    grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  }

  .cols-min-128-4xs {
    grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
  }

  .cols-min-192-4xs {
    grid-template-columns: repeat(auto-fill, minmax(192px, 1fr));
  }

  .cols-min-240-4xs {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  }

  .cols-min-256-4xs {
    grid-template-columns: repeat(auto-fill, minmax(256px, 1fr));
  }

  .cols-min-320-4xs {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  }

  .cols-min-480-4xs {
    grid-template-columns: repeat(auto-fill, minmax(480px, 1fr));
  }

  .masonry-4xs {
    grid-template-columns: masonry;
  }

  .subgrid-4xs {
    grid-template-columns: subgrid;
  }

  .cols-none-4xs {
    grid-template-columns: none;
  }
}

@media (min-width: calc(8rem + .001px)) {
  .cols-1-2xs {
    grid-template-columns: repeat(1, 1fr);
  }

  .cols-2-2xs {
    grid-template-columns: repeat(2, 1fr);
  }

  .cols-3-2xs {
    grid-template-columns: repeat(3, 1fr);
  }

  .cols-4-2xs {
    grid-template-columns: repeat(4, 1fr);
  }

  .cols-5-2xs {
    grid-template-columns: repeat(5, 1fr);
  }

  .cols-6-2xs {
    grid-template-columns: repeat(6, 1fr);
  }

  .cols-7-2xs {
    grid-template-columns: repeat(7, 1fr);
  }

  .cols-8-2xs {
    grid-template-columns: repeat(8, 1fr);
  }

  .cols-9-2xs {
    grid-template-columns: repeat(9, 1fr);
  }

  .cols-10-2xs {
    grid-template-columns: repeat(10, 1fr);
  }

  .cols-11-2xs {
    grid-template-columns: repeat(11, 1fr);
  }

  .cols-12-2xs {
    grid-template-columns: repeat(12, 1fr);
  }

  .cols-13-2xs {
    grid-template-columns: repeat(13, 1fr);
  }

  .cols-14-2xs {
    grid-template-columns: repeat(14, 1fr);
  }

  .cols-15-2xs {
    grid-template-columns: repeat(15, 1fr);
  }

  .cols-16-2xs {
    grid-template-columns: repeat(16, 1fr);
  }

  .cols-min-32-2xs {
    grid-template-columns: repeat(auto-fill, minmax(32px, 1fr));
  }

  .cols-min-64-2xs {
    grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  }

  .cols-min-128-2xs {
    grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
  }

  .cols-min-192-2xs {
    grid-template-columns: repeat(auto-fill, minmax(192px, 1fr));
  }

  .cols-min-240-2xs {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  }

  .cols-min-256-2xs {
    grid-template-columns: repeat(auto-fill, minmax(256px, 1fr));
  }

  .cols-min-320-2xs {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  }

  .cols-min-480-2xs {
    grid-template-columns: repeat(auto-fill, minmax(480px, 1fr));
  }

  .masonry-2xs {
    grid-template-columns: masonry;
  }

  .subgrid-2xs {
    grid-template-columns: subgrid;
  }

  .cols-none-2xs {
    grid-template-columns: none;
  }
}

@media (min-width: 20rem) {
  .cols-1-xs {
    grid-template-columns: repeat(1, 1fr);
  }

  .cols-2-xs {
    grid-template-columns: repeat(2, 1fr);
  }

  .cols-3-xs {
    grid-template-columns: repeat(3, 1fr);
  }

  .cols-4-xs {
    grid-template-columns: repeat(4, 1fr);
  }

  .cols-5-xs {
    grid-template-columns: repeat(5, 1fr);
  }

  .cols-6-xs {
    grid-template-columns: repeat(6, 1fr);
  }

  .cols-7-xs {
    grid-template-columns: repeat(7, 1fr);
  }

  .cols-8-xs {
    grid-template-columns: repeat(8, 1fr);
  }

  .cols-9-xs {
    grid-template-columns: repeat(9, 1fr);
  }

  .cols-10-xs {
    grid-template-columns: repeat(10, 1fr);
  }

  .cols-11-xs {
    grid-template-columns: repeat(11, 1fr);
  }

  .cols-12-xs {
    grid-template-columns: repeat(12, 1fr);
  }

  .cols-13-xs {
    grid-template-columns: repeat(13, 1fr);
  }

  .cols-14-xs {
    grid-template-columns: repeat(14, 1fr);
  }

  .cols-15-xs {
    grid-template-columns: repeat(15, 1fr);
  }

  .cols-16-xs {
    grid-template-columns: repeat(16, 1fr);
  }

  .cols-min-32-xs {
    grid-template-columns: repeat(auto-fill, minmax(32px, 1fr));
  }

  .cols-min-64-xs {
    grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  }

  .cols-min-128-xs {
    grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
  }

  .cols-min-192-xs {
    grid-template-columns: repeat(auto-fill, minmax(192px, 1fr));
  }

  .cols-min-240-xs {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  }

  .cols-min-256-xs {
    grid-template-columns: repeat(auto-fill, minmax(256px, 1fr));
  }

  .cols-min-320-xs {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  }

  .cols-min-480-xs {
    grid-template-columns: repeat(auto-fill, minmax(480px, 1fr));
  }

  .masonry-xs {
    grid-template-columns: masonry;
  }

  .subgrid-xs {
    grid-template-columns: subgrid;
  }

  .cols-none-xs {
    grid-template-columns: none;
  }
}

@media (min-width: 32rem) {
  .cols-1-s {
    grid-template-columns: repeat(1, 1fr);
  }

  .cols-2-s {
    grid-template-columns: repeat(2, 1fr);
  }

  .cols-3-s {
    grid-template-columns: repeat(3, 1fr);
  }

  .cols-4-s {
    grid-template-columns: repeat(4, 1fr);
  }

  .cols-5-s {
    grid-template-columns: repeat(5, 1fr);
  }

  .cols-6-s {
    grid-template-columns: repeat(6, 1fr);
  }

  .cols-7-s {
    grid-template-columns: repeat(7, 1fr);
  }

  .cols-8-s {
    grid-template-columns: repeat(8, 1fr);
  }

  .cols-9-s {
    grid-template-columns: repeat(9, 1fr);
  }

  .cols-10-s {
    grid-template-columns: repeat(10, 1fr);
  }

  .cols-11-s {
    grid-template-columns: repeat(11, 1fr);
  }

  .cols-12-s {
    grid-template-columns: repeat(12, 1fr);
  }

  .cols-13-s {
    grid-template-columns: repeat(13, 1fr);
  }

  .cols-14-s {
    grid-template-columns: repeat(14, 1fr);
  }

  .cols-15-s {
    grid-template-columns: repeat(15, 1fr);
  }

  .cols-16-s {
    grid-template-columns: repeat(16, 1fr);
  }

  .cols-min-32-s {
    grid-template-columns: repeat(auto-fill, minmax(32px, 1fr));
  }

  .cols-min-64-s {
    grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  }

  .cols-min-128-s {
    grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
  }

  .cols-min-192-s {
    grid-template-columns: repeat(auto-fill, minmax(192px, 1fr));
  }

  .cols-min-240-s {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  }

  .cols-min-256-s {
    grid-template-columns: repeat(auto-fill, minmax(256px, 1fr));
  }

  .cols-min-320-s {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  }

  .cols-min-480-s {
    grid-template-columns: repeat(auto-fill, minmax(480px, 1fr));
  }

  .masonry-s {
    grid-template-columns: masonry;
  }

  .subgrid-s {
    grid-template-columns: subgrid;
  }

  .cols-none-s {
    grid-template-columns: none;
  }
}

@media (min-width: 48rem) {
  .cols-1-m {
    grid-template-columns: repeat(1, 1fr);
  }

  .cols-2-m {
    grid-template-columns: repeat(2, 1fr);
  }

  .cols-3-m {
    grid-template-columns: repeat(3, 1fr);
  }

  .cols-4-m {
    grid-template-columns: repeat(4, 1fr);
  }

  .cols-5-m {
    grid-template-columns: repeat(5, 1fr);
  }

  .cols-6-m {
    grid-template-columns: repeat(6, 1fr);
  }

  .cols-7-m {
    grid-template-columns: repeat(7, 1fr);
  }

  .cols-8-m {
    grid-template-columns: repeat(8, 1fr);
  }

  .cols-9-m {
    grid-template-columns: repeat(9, 1fr);
  }

  .cols-10-m {
    grid-template-columns: repeat(10, 1fr);
  }

  .cols-11-m {
    grid-template-columns: repeat(11, 1fr);
  }

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

  .cols-13-m {
    grid-template-columns: repeat(13, 1fr);
  }

  .cols-14-m {
    grid-template-columns: repeat(14, 1fr);
  }

  .cols-15-m {
    grid-template-columns: repeat(15, 1fr);
  }

  .cols-16-m {
    grid-template-columns: repeat(16, 1fr);
  }

  .cols-min-32-m {
    grid-template-columns: repeat(auto-fill, minmax(32px, 1fr));
  }

  .cols-min-64-m {
    grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  }

  .cols-min-128-m {
    grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
  }

  .cols-min-192-m {
    grid-template-columns: repeat(auto-fill, minmax(192px, 1fr));
  }

  .cols-min-240-m {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  }

  .cols-min-256-m {
    grid-template-columns: repeat(auto-fill, minmax(256px, 1fr));
  }

  .cols-min-320-m {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  }

  .cols-min-480-m {
    grid-template-columns: repeat(auto-fill, minmax(480px, 1fr));
  }

  .masonry-m {
    grid-template-columns: masonry;
  }

  .subgrid-m {
    grid-template-columns: subgrid;
  }

  .cols-none-m {
    grid-template-columns: none;
  }
}

@media (min-width: 64rem) {
  .cols-1-l {
    grid-template-columns: repeat(1, 1fr);
  }

  .cols-2-l {
    grid-template-columns: repeat(2, 1fr);
  }

  .cols-3-l {
    grid-template-columns: repeat(3, 1fr);
  }

  .cols-4-l {
    grid-template-columns: repeat(4, 1fr);
  }

  .cols-5-l {
    grid-template-columns: repeat(5, 1fr);
  }

  .cols-6-l {
    grid-template-columns: repeat(6, 1fr);
  }

  .cols-7-l {
    grid-template-columns: repeat(7, 1fr);
  }

  .cols-8-l {
    grid-template-columns: repeat(8, 1fr);
  }

  .cols-9-l {
    grid-template-columns: repeat(9, 1fr);
  }

  .cols-10-l {
    grid-template-columns: repeat(10, 1fr);
  }

  .cols-11-l {
    grid-template-columns: repeat(11, 1fr);
  }

  .cols-12-l {
    grid-template-columns: repeat(12, 1fr);
  }

  .cols-13-l {
    grid-template-columns: repeat(13, 1fr);
  }

  .cols-14-l {
    grid-template-columns: repeat(14, 1fr);
  }

  .cols-15-l {
    grid-template-columns: repeat(15, 1fr);
  }

  .cols-16-l {
    grid-template-columns: repeat(16, 1fr);
  }

  .cols-min-32-l {
    grid-template-columns: repeat(auto-fill, minmax(32px, 1fr));
  }

  .cols-min-64-l {
    grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  }

  .cols-min-128-l {
    grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
  }

  .cols-min-192-l {
    grid-template-columns: repeat(auto-fill, minmax(192px, 1fr));
  }

  .cols-min-240-l {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  }

  .cols-min-256-l {
    grid-template-columns: repeat(auto-fill, minmax(256px, 1fr));
  }

  .cols-min-320-l {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  }

  .cols-min-480-l {
    grid-template-columns: repeat(auto-fill, minmax(480px, 1fr));
  }

  .masonry-l {
    grid-template-columns: masonry;
  }

  .subgrid-l {
    grid-template-columns: subgrid;
  }

  .cols-none-l {
    grid-template-columns: none;
  }
}

@media (min-width: 100rem) {
  .cols-1-xl {
    grid-template-columns: repeat(1, 1fr);
  }

  .cols-2-xl {
    grid-template-columns: repeat(2, 1fr);
  }

  .cols-3-xl {
    grid-template-columns: repeat(3, 1fr);
  }

  .cols-4-xl {
    grid-template-columns: repeat(4, 1fr);
  }

  .cols-5-xl {
    grid-template-columns: repeat(5, 1fr);
  }

  .cols-6-xl {
    grid-template-columns: repeat(6, 1fr);
  }

  .cols-7-xl {
    grid-template-columns: repeat(7, 1fr);
  }

  .cols-8-xl {
    grid-template-columns: repeat(8, 1fr);
  }

  .cols-9-xl {
    grid-template-columns: repeat(9, 1fr);
  }

  .cols-10-xl {
    grid-template-columns: repeat(10, 1fr);
  }

  .cols-11-xl {
    grid-template-columns: repeat(11, 1fr);
  }

  .cols-12-xl {
    grid-template-columns: repeat(12, 1fr);
  }

  .cols-13-xl {
    grid-template-columns: repeat(13, 1fr);
  }

  .cols-14-xl {
    grid-template-columns: repeat(14, 1fr);
  }

  .cols-15-xl {
    grid-template-columns: repeat(15, 1fr);
  }

  .cols-16-xl {
    grid-template-columns: repeat(16, 1fr);
  }

  .cols-min-32-xl {
    grid-template-columns: repeat(auto-fill, minmax(32px, 1fr));
  }

  .cols-min-64-xl {
    grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  }

  .cols-min-128-xl {
    grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
  }

  .cols-min-192-xl {
    grid-template-columns: repeat(auto-fill, minmax(192px, 1fr));
  }

  .cols-min-240-xl {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  }

  .cols-min-256-xl {
    grid-template-columns: repeat(auto-fill, minmax(256px, 1fr));
  }

  .cols-min-320-xl {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  }

  .cols-min-480-xl {
    grid-template-columns: repeat(auto-fill, minmax(480px, 1fr));
  }

  .masonry-xl {
    grid-template-columns: masonry;
  }

  .subgrid-xl {
    grid-template-columns: subgrid;
  }

  .cols-none-xl {
    grid-template-columns: none;
  }
}

@media (min-width: 130rem) {
  .cols-1-2xl {
    grid-template-columns: repeat(1, 1fr);
  }

  .cols-2-2xl {
    grid-template-columns: repeat(2, 1fr);
  }

  .cols-3-2xl {
    grid-template-columns: repeat(3, 1fr);
  }

  .cols-4-2xl {
    grid-template-columns: repeat(4, 1fr);
  }

  .cols-5-2xl {
    grid-template-columns: repeat(5, 1fr);
  }

  .cols-6-2xl {
    grid-template-columns: repeat(6, 1fr);
  }

  .cols-7-2xl {
    grid-template-columns: repeat(7, 1fr);
  }

  .cols-8-2xl {
    grid-template-columns: repeat(8, 1fr);
  }

  .cols-9-2xl {
    grid-template-columns: repeat(9, 1fr);
  }

  .cols-10-2xl {
    grid-template-columns: repeat(10, 1fr);
  }

  .cols-11-2xl {
    grid-template-columns: repeat(11, 1fr);
  }

  .cols-12-2xl {
    grid-template-columns: repeat(12, 1fr);
  }

  .cols-13-2xl {
    grid-template-columns: repeat(13, 1fr);
  }

  .cols-14-2xl {
    grid-template-columns: repeat(14, 1fr);
  }

  .cols-15-2xl {
    grid-template-columns: repeat(15, 1fr);
  }

  .cols-16-2xl {
    grid-template-columns: repeat(16, 1fr);
  }

  .cols-min-32-2xl {
    grid-template-columns: repeat(auto-fill, minmax(32px, 1fr));
  }

  .cols-min-64-2xl {
    grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  }

  .cols-min-128-2xl {
    grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
  }

  .cols-min-192-2xl {
    grid-template-columns: repeat(auto-fill, minmax(192px, 1fr));
  }

  .cols-min-240-2xl {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  }

  .cols-min-256-2xl {
    grid-template-columns: repeat(auto-fill, minmax(256px, 1fr));
  }

  .cols-min-320-2xl {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  }

  .cols-min-480-2xl {
    grid-template-columns: repeat(auto-fill, minmax(480px, 1fr));
  }

  .masonry-2xl {
    grid-template-columns: masonry;
  }

  .subgrid-2xl {
    grid-template-columns: subgrid;
  }

  .cols-none-2xl {
    grid-template-columns: none;
  }
}

@media (min-width: 200rem) {
  .cols-1-4xl {
    grid-template-columns: repeat(1, 1fr);
  }

  .cols-2-4xl {
    grid-template-columns: repeat(2, 1fr);
  }

  .cols-3-4xl {
    grid-template-columns: repeat(3, 1fr);
  }

  .cols-4-4xl {
    grid-template-columns: repeat(4, 1fr);
  }

  .cols-5-4xl {
    grid-template-columns: repeat(5, 1fr);
  }

  .cols-6-4xl {
    grid-template-columns: repeat(6, 1fr);
  }

  .cols-7-4xl {
    grid-template-columns: repeat(7, 1fr);
  }

  .cols-8-4xl {
    grid-template-columns: repeat(8, 1fr);
  }

  .cols-9-4xl {
    grid-template-columns: repeat(9, 1fr);
  }

  .cols-10-4xl {
    grid-template-columns: repeat(10, 1fr);
  }

  .cols-11-4xl {
    grid-template-columns: repeat(11, 1fr);
  }

  .cols-12-4xl {
    grid-template-columns: repeat(12, 1fr);
  }

  .cols-13-4xl {
    grid-template-columns: repeat(13, 1fr);
  }

  .cols-14-4xl {
    grid-template-columns: repeat(14, 1fr);
  }

  .cols-15-4xl {
    grid-template-columns: repeat(15, 1fr);
  }

  .cols-16-4xl {
    grid-template-columns: repeat(16, 1fr);
  }

  .cols-min-32-4xl {
    grid-template-columns: repeat(auto-fill, minmax(32px, 1fr));
  }

  .cols-min-64-4xl {
    grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  }

  .cols-min-128-4xl {
    grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
  }

  .cols-min-192-4xl {
    grid-template-columns: repeat(auto-fill, minmax(192px, 1fr));
  }

  .cols-min-240-4xl {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  }

  .cols-min-256-4xl {
    grid-template-columns: repeat(auto-fill, minmax(256px, 1fr));
  }

  .cols-min-320-4xl {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  }

  .cols-min-480-4xl {
    grid-template-columns: repeat(auto-fill, minmax(480px, 1fr));
  }

  .masonry-4xl {
    grid-template-columns: masonry;
  }

  .subgrid-4xl {
    grid-template-columns: subgrid;
  }

  .cols-none-4xl {
    grid-template-columns: none;
  }
}

/* src/grid-column.css */
.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-13 {
  grid-column: span 13 / span 13;
}

.col-14 {
  grid-column: span 14 / span 14;
}

.col-15 {
  grid-column: span 15 / span 15;
}

.col-16 {
  grid-column: span 16 / span 16;
}

.col-full {
  grid-column: 1 / -1;
}

.col-center1 {
  grid-column: 2 / -2;
}

.col-center2 {
  grid-column: 3 / -3;
}

.col-center3 {
  grid-column: 4 / -4;
}

.col-center4 {
  grid-column: 6 / -6;
}

.col-auto {
  grid-column: auto;
}

.start-1 {
  grid-column-start: 1;
}

.start-2 {
  grid-column-start: 2;
}

.start-3 {
  grid-column-start: 3;
}

.start-4 {
  grid-column-start: 4;
}

.start-5 {
  grid-column-start: 5;
}

.start-6 {
  grid-column-start: 6;
}

.start-7 {
  grid-column-start: 7;
}

.start-8 {
  grid-column-start: 8;
}

.start-9 {
  grid-column-start: 9;
}

.start-10 {
  grid-column-start: 10;
}

.start-11 {
  grid-column-start: 11;
}

.start-12 {
  grid-column-start: 12;
}

.start-13 {
  grid-column-start: 13;
}

.start-14 {
  grid-column-start: 14;
}

.start-15 {
  grid-column-start: 15;
}

.end-1 {
  grid-column-end: 1;
}

.end-2 {
  grid-column-end: 2;
}

.end-3 {
  grid-column-end: 3;
}

.end-4 {
  grid-column-end: 4;
}

.end-5 {
  grid-column-end: 5;
}

.end-6 {
  grid-column-end: 6;
}

.end-7 {
  grid-column-end: 7;
}

.end-8 {
  grid-column-end: 8;
}

.end-9 {
  grid-column-end: 9;
}

.end-10 {
  grid-column-end: 10;
}

.end-11 {
  grid-column-end: 11;
}

.end-12 {
  grid-column-end: 12;
}

.end-13 {
  grid-column-end: 13;
}

.end-14 {
  grid-column-end: 14;
}

.end-15 {
  grid-column-end: 15;
}

.end-16 {
  grid-column-end: 16;
}

@media (max-width: 8rem) {
  .col-1-4xs {
    grid-column: span 1 / span 1;
  }

  .col-2-4xs {
    grid-column: span 2 / span 2;
  }

  .col-3-4xs {
    grid-column: span 3 / span 3;
  }

  .col-4-4xs {
    grid-column: span 4 / span 4;
  }

  .col-5-4xs {
    grid-column: span 5 / span 5;
  }

  .col-6-4xs {
    grid-column: span 6 / span 6;
  }

  .col-7-4xs {
    grid-column: span 7 / span 7;
  }

  .col-8-4xs {
    grid-column: span 8 / span 8;
  }

  .col-9-4xs {
    grid-column: span 9 / span 9;
  }

  .col-10-4xs {
    grid-column: span 10 / span 10;
  }

  .col-11-4xs {
    grid-column: span 11 / span 11;
  }

  .col-12-4xs {
    grid-column: span 12 / span 12;
  }

  .col-13-4xs {
    grid-column: span 13 / span 13;
  }

  .col-14-4xs {
    grid-column: span 14 / span 14;
  }

  .col-15-4xs {
    grid-column: span 15 / span 15;
  }

  .col-16-4xs {
    grid-column: span 16 / span 16;
  }

  .col-full-4xs {
    grid-column: 1 / -1;
  }

  .col-center1-4xs {
    grid-column: 2 / -2;
  }

  .col-center2-4xs {
    grid-column: 3 / -3;
  }

  .col-center3-4xs {
    grid-column: 4 / -4;
  }

  .col-center4-4xs {
    grid-column: 6 / -6;
  }

  .col-auto-4xs {
    grid-column: auto;
  }

  .start-1-4xs {
    grid-column-start: 1;
  }

  .start-2-4xs {
    grid-column-start: 2;
  }

  .start-3-4xs {
    grid-column-start: 3;
  }

  .start-4-4xs {
    grid-column-start: 4;
  }

  .start-5-4xs {
    grid-column-start: 5;
  }

  .start-6-4xs {
    grid-column-start: 6;
  }

  .start-7-4xs {
    grid-column-start: 7;
  }

  .start-8-4xs {
    grid-column-start: 8;
  }

  .start-9-4xs {
    grid-column-start: 9;
  }

  .start-10-4xs {
    grid-column-start: 10;
  }

  .start-11-4xs {
    grid-column-start: 11;
  }

  .start-12-4xs {
    grid-column-start: 12;
  }

  .start-13-4xs {
    grid-column-start: 13;
  }

  .start-14-4xs {
    grid-column-start: 14;
  }

  .start-15-4xs {
    grid-column-start: 15;
  }

  .end-1-4xs {
    grid-column-end: 1;
  }

  .end-2-4xs {
    grid-column-end: 2;
  }

  .end-3-4xs {
    grid-column-end: 3;
  }

  .end-4-4xs {
    grid-column-end: 4;
  }

  .end-5-4xs {
    grid-column-end: 5;
  }

  .end-6-4xs {
    grid-column-end: 6;
  }

  .end-7-4xs {
    grid-column-end: 7;
  }

  .end-8-4xs {
    grid-column-end: 8;
  }

  .end-9-4xs {
    grid-column-end: 9;
  }

  .end-10-4xs {
    grid-column-end: 10;
  }

  .end-11-4xs {
    grid-column-end: 11;
  }

  .end-12-4xs {
    grid-column-end: 12;
  }

  .end-13-4xs {
    grid-column-end: 13;
  }

  .end-14-4xs {
    grid-column-end: 14;
  }

  .end-15-4xs {
    grid-column-end: 15;
  }

  .end-16-4xs {
    grid-column-end: 16;
  }
}

@media (min-width: calc(8rem + .001px)) {
  .col-1-2xs {
    grid-column: span 1 / span 1;
  }

  .col-2-2xs {
    grid-column: span 2 / span 2;
  }

  .col-3-2xs {
    grid-column: span 3 / span 3;
  }

  .col-4-2xs {
    grid-column: span 4 / span 4;
  }

  .col-5-2xs {
    grid-column: span 5 / span 5;
  }

  .col-6-2xs {
    grid-column: span 6 / span 6;
  }

  .col-7-2xs {
    grid-column: span 7 / span 7;
  }

  .col-8-2xs {
    grid-column: span 8 / span 8;
  }

  .col-9-2xs {
    grid-column: span 9 / span 9;
  }

  .col-10-2xs {
    grid-column: span 10 / span 10;
  }

  .col-11-2xs {
    grid-column: span 11 / span 11;
  }

  .col-12-2xs {
    grid-column: span 12 / span 12;
  }

  .col-13-2xs {
    grid-column: span 13 / span 13;
  }

  .col-14-2xs {
    grid-column: span 14 / span 14;
  }

  .col-15-2xs {
    grid-column: span 15 / span 15;
  }

  .col-16-2xs {
    grid-column: span 16 / span 16;
  }

  .col-full-2xs {
    grid-column: 1 / -1;
  }

  .col-center1-2xs {
    grid-column: 2 / -2;
  }

  .col-center2-2xs {
    grid-column: 3 / -3;
  }

  .col-center3-2xs {
    grid-column: 4 / -4;
  }

  .col-center4-2xs {
    grid-column: 6 / -6;
  }

  .col-auto-2xs {
    grid-column: auto;
  }

  .start-1-2xs {
    grid-column-start: 1;
  }

  .start-2-2xs {
    grid-column-start: 2;
  }

  .start-3-2xs {
    grid-column-start: 3;
  }

  .start-4-2xs {
    grid-column-start: 4;
  }

  .start-5-2xs {
    grid-column-start: 5;
  }

  .start-6-2xs {
    grid-column-start: 6;
  }

  .start-7-2xs {
    grid-column-start: 7;
  }

  .start-8-2xs {
    grid-column-start: 8;
  }

  .start-9-2xs {
    grid-column-start: 9;
  }

  .start-10-2xs {
    grid-column-start: 10;
  }

  .start-11-2xs {
    grid-column-start: 11;
  }

  .start-12-2xs {
    grid-column-start: 12;
  }

  .start-13-2xs {
    grid-column-start: 13;
  }

  .start-14-2xs {
    grid-column-start: 14;
  }

  .start-15-2xs {
    grid-column-start: 15;
  }

  .end-1-2xs {
    grid-column-end: 1;
  }

  .end-2-2xs {
    grid-column-end: 2;
  }

  .end-3-2xs {
    grid-column-end: 3;
  }

  .end-4-2xs {
    grid-column-end: 4;
  }

  .end-5-2xs {
    grid-column-end: 5;
  }

  .end-6-2xs {
    grid-column-end: 6;
  }

  .end-7-2xs {
    grid-column-end: 7;
  }

  .end-8-2xs {
    grid-column-end: 8;
  }

  .end-9-2xs {
    grid-column-end: 9;
  }

  .end-10-2xs {
    grid-column-end: 10;
  }

  .end-11-2xs {
    grid-column-end: 11;
  }

  .end-12-2xs {
    grid-column-end: 12;
  }

  .end-13-2xs {
    grid-column-end: 13;
  }

  .end-14-2xs {
    grid-column-end: 14;
  }

  .end-15-2xs {
    grid-column-end: 15;
  }

  .end-16-2xs {
    grid-column-end: 16;
  }
}

@media (min-width: 20rem) {
  .col-1-xs {
    grid-column: span 1 / span 1;
  }

  .col-2-xs {
    grid-column: span 2 / span 2;
  }

  .col-3-xs {
    grid-column: span 3 / span 3;
  }

  .col-4-xs {
    grid-column: span 4 / span 4;
  }

  .col-5-xs {
    grid-column: span 5 / span 5;
  }

  .col-6-xs {
    grid-column: span 6 / span 6;
  }

  .col-7-xs {
    grid-column: span 7 / span 7;
  }

  .col-8-xs {
    grid-column: span 8 / span 8;
  }

  .col-9-xs {
    grid-column: span 9 / span 9;
  }

  .col-10-xs {
    grid-column: span 10 / span 10;
  }

  .col-11-xs {
    grid-column: span 11 / span 11;
  }

  .col-12-xs {
    grid-column: span 12 / span 12;
  }

  .col-13-xs {
    grid-column: span 13 / span 13;
  }

  .col-14-xs {
    grid-column: span 14 / span 14;
  }

  .col-15-xs {
    grid-column: span 15 / span 15;
  }

  .col-16-xs {
    grid-column: span 16 / span 16;
  }

  .col-full-xs {
    grid-column: 1 / -1;
  }

  .col-center1-xs {
    grid-column: 2 / -2;
  }

  .col-center2-xs {
    grid-column: 3 / -3;
  }

  .col-center3-xs {
    grid-column: 4 / -4;
  }

  .col-center4-xs {
    grid-column: 6 / -6;
  }

  .col-auto-xs {
    grid-column: auto;
  }

  .start-1-xs {
    grid-column-start: 1;
  }

  .start-2-xs {
    grid-column-start: 2;
  }

  .start-3-xs {
    grid-column-start: 3;
  }

  .start-4-xs {
    grid-column-start: 4;
  }

  .start-5-xs {
    grid-column-start: 5;
  }

  .start-6-xs {
    grid-column-start: 6;
  }

  .start-7-xs {
    grid-column-start: 7;
  }

  .start-8-xs {
    grid-column-start: 8;
  }

  .start-9-xs {
    grid-column-start: 9;
  }

  .start-10-xs {
    grid-column-start: 10;
  }

  .start-11-xs {
    grid-column-start: 11;
  }

  .start-12-xs {
    grid-column-start: 12;
  }

  .start-13-xs {
    grid-column-start: 13;
  }

  .start-14-xs {
    grid-column-start: 14;
  }

  .start-15-xs {
    grid-column-start: 15;
  }

  .end-1-xs {
    grid-column-end: 1;
  }

  .end-2-xs {
    grid-column-end: 2;
  }

  .end-3-xs {
    grid-column-end: 3;
  }

  .end-4-xs {
    grid-column-end: 4;
  }

  .end-5-xs {
    grid-column-end: 5;
  }

  .end-6-xs {
    grid-column-end: 6;
  }

  .end-7-xs {
    grid-column-end: 7;
  }

  .end-8-xs {
    grid-column-end: 8;
  }

  .end-9-xs {
    grid-column-end: 9;
  }

  .end-10-xs {
    grid-column-end: 10;
  }

  .end-11-xs {
    grid-column-end: 11;
  }

  .end-12-xs {
    grid-column-end: 12;
  }

  .end-13-xs {
    grid-column-end: 13;
  }

  .end-14-xs {
    grid-column-end: 14;
  }

  .end-15-xs {
    grid-column-end: 15;
  }

  .end-16-xs {
    grid-column-end: 16;
  }
}

@media (min-width: 32rem) {
  .col-1-s {
    grid-column: span 1 / span 1;
  }

  .col-2-s {
    grid-column: span 2 / span 2;
  }

  .col-3-s {
    grid-column: span 3 / span 3;
  }

  .col-4-s {
    grid-column: span 4 / span 4;
  }

  .col-5-s {
    grid-column: span 5 / span 5;
  }

  .col-6-s {
    grid-column: span 6 / span 6;
  }

  .col-7-s {
    grid-column: span 7 / span 7;
  }

  .col-8-s {
    grid-column: span 8 / span 8;
  }

  .col-9-s {
    grid-column: span 9 / span 9;
  }

  .col-10-s {
    grid-column: span 10 / span 10;
  }

  .col-11-s {
    grid-column: span 11 / span 11;
  }

  .col-12-s {
    grid-column: span 12 / span 12;
  }

  .col-13-s {
    grid-column: span 13 / span 13;
  }

  .col-14-s {
    grid-column: span 14 / span 14;
  }

  .col-15-s {
    grid-column: span 15 / span 15;
  }

  .col-16-s {
    grid-column: span 16 / span 16;
  }

  .col-full-s {
    grid-column: 1 / -1;
  }

  .col-center1-s {
    grid-column: 2 / -2;
  }

  .col-center2-s {
    grid-column: 3 / -3;
  }

  .col-center3-s {
    grid-column: 4 / -4;
  }

  .col-center4-s {
    grid-column: 6 / -6;
  }

  .col-auto-s {
    grid-column: auto;
  }

  .start-1-s {
    grid-column-start: 1;
  }

  .start-2-s {
    grid-column-start: 2;
  }

  .start-3-s {
    grid-column-start: 3;
  }

  .start-4-s {
    grid-column-start: 4;
  }

  .start-5-s {
    grid-column-start: 5;
  }

  .start-6-s {
    grid-column-start: 6;
  }

  .start-7-s {
    grid-column-start: 7;
  }

  .start-8-s {
    grid-column-start: 8;
  }

  .start-9-s {
    grid-column-start: 9;
  }

  .start-10-s {
    grid-column-start: 10;
  }

  .start-11-s {
    grid-column-start: 11;
  }

  .start-12-s {
    grid-column-start: 12;
  }

  .start-13-s {
    grid-column-start: 13;
  }

  .start-14-s {
    grid-column-start: 14;
  }

  .start-15-s {
    grid-column-start: 15;
  }

  .end-1-s {
    grid-column-end: 1;
  }

  .end-2-s {
    grid-column-end: 2;
  }

  .end-3-s {
    grid-column-end: 3;
  }

  .end-4-s {
    grid-column-end: 4;
  }

  .end-5-s {
    grid-column-end: 5;
  }

  .end-6-s {
    grid-column-end: 6;
  }

  .end-7-s {
    grid-column-end: 7;
  }

  .end-8-s {
    grid-column-end: 8;
  }

  .end-9-s {
    grid-column-end: 9;
  }

  .end-10-s {
    grid-column-end: 10;
  }

  .end-11-s {
    grid-column-end: 11;
  }

  .end-12-s {
    grid-column-end: 12;
  }

  .end-13-s {
    grid-column-end: 13;
  }

  .end-14-s {
    grid-column-end: 14;
  }

  .end-15-s {
    grid-column-end: 15;
  }

  .end-16-s {
    grid-column-end: 16;
  }
}

@media (min-width: 48rem) {
  .col-1-m {
    grid-column: span 1 / span 1;
  }

  .col-2-m {
    grid-column: span 2 / span 2;
  }

  .col-3-m {
    grid-column: span 3 / span 3;
  }

  .col-4-m {
    grid-column: span 4 / span 4;
  }

  .col-5-m {
    grid-column: span 5 / span 5;
  }

  .col-6-m {
    grid-column: span 6 / span 6;
  }

  .col-7-m {
    grid-column: span 7 / span 7;
  }

  .col-8-m {
    grid-column: span 8 / span 8;
  }

  .col-9-m {
    grid-column: span 9 / span 9;
  }

  .col-10-m {
    grid-column: span 10 / span 10;
  }

  .col-11-m {
    grid-column: span 11 / span 11;
  }

  .col-12-m {
    grid-column: span 12 / span 12;
  }

  .col-13-m {
    grid-column: span 13 / span 13;
  }

  .col-14-m {
    grid-column: span 14 / span 14;
  }

  .col-15-m {
    grid-column: span 15 / span 15;
  }

  .col-16-m {
    grid-column: span 16 / span 16;
  }

  .col-full-m {
    grid-column: 1 / -1;
  }

  .col-center1-m {
    grid-column: 2 / -2;
  }

  .col-center2-m {
    grid-column: 3 / -3;
  }

  .col-center3-m {
    grid-column: 4 / -4;
  }

  .col-center4-m {
    grid-column: 6 / -6;
  }

  .col-auto-m {
    grid-column: auto;
  }

  .start-1-m {
    grid-column-start: 1;
  }

  .start-2-m {
    grid-column-start: 2;
  }

  .start-3-m {
    grid-column-start: 3;
  }

  .start-4-m {
    grid-column-start: 4;
  }

  .start-5-m {
    grid-column-start: 5;
  }

  .start-6-m {
    grid-column-start: 6;
  }

  .start-7-m {
    grid-column-start: 7;
  }

  .start-8-m {
    grid-column-start: 8;
  }

  .start-9-m {
    grid-column-start: 9;
  }

  .start-10-m {
    grid-column-start: 10;
  }

  .start-11-m {
    grid-column-start: 11;
  }

  .start-12-m {
    grid-column-start: 12;
  }

  .start-13-m {
    grid-column-start: 13;
  }

  .start-14-m {
    grid-column-start: 14;
  }

  .start-15-m {
    grid-column-start: 15;
  }

  .end-1-m {
    grid-column-end: 1;
  }

  .end-2-m {
    grid-column-end: 2;
  }

  .end-3-m {
    grid-column-end: 3;
  }

  .end-4-m {
    grid-column-end: 4;
  }

  .end-5-m {
    grid-column-end: 5;
  }

  .end-6-m {
    grid-column-end: 6;
  }

  .end-7-m {
    grid-column-end: 7;
  }

  .end-8-m {
    grid-column-end: 8;
  }

  .end-9-m {
    grid-column-end: 9;
  }

  .end-10-m {
    grid-column-end: 10;
  }

  .end-11-m {
    grid-column-end: 11;
  }

  .end-12-m {
    grid-column-end: 12;
  }

  .end-13-m {
    grid-column-end: 13;
  }

  .end-14-m {
    grid-column-end: 14;
  }

  .end-15-m {
    grid-column-end: 15;
  }

  .end-16-m {
    grid-column-end: 16;
  }
}

@media (min-width: 64rem) {
  .col-1-l {
    grid-column: span 1 / span 1;
  }

  .col-2-l {
    grid-column: span 2 / span 2;
  }

  .col-3-l {
    grid-column: span 3 / span 3;
  }

  .col-4-l {
    grid-column: span 4 / span 4;
  }

  .col-5-l {
    grid-column: span 5 / span 5;
  }

  .col-6-l {
    grid-column: span 6 / span 6;
  }

  .col-7-l {
    grid-column: span 7 / span 7;
  }

  .col-8-l {
    grid-column: span 8 / span 8;
  }

  .col-9-l {
    grid-column: span 9 / span 9;
  }

  .col-10-l {
    grid-column: span 10 / span 10;
  }

  .col-11-l {
    grid-column: span 11 / span 11;
  }

  .col-12-l {
    grid-column: span 12 / span 12;
  }

  .col-13-l {
    grid-column: span 13 / span 13;
  }

  .col-14-l {
    grid-column: span 14 / span 14;
  }

  .col-15-l {
    grid-column: span 15 / span 15;
  }

  .col-16-l {
    grid-column: span 16 / span 16;
  }

  .col-full-l {
    grid-column: 1 / -1;
  }

  .col-center1-l {
    grid-column: 2 / -2;
  }

  .col-center2-l {
    grid-column: 3 / -3;
  }

  .col-center3-l {
    grid-column: 4 / -4;
  }

  .col-center4-l {
    grid-column: 6 / -6;
  }

  .col-auto-l {
    grid-column: auto;
  }

  .start-1-l {
    grid-column-start: 1;
  }

  .start-2-l {
    grid-column-start: 2;
  }

  .start-3-l {
    grid-column-start: 3;
  }

  .start-4-l {
    grid-column-start: 4;
  }

  .start-5-l {
    grid-column-start: 5;
  }

  .start-6-l {
    grid-column-start: 6;
  }

  .start-7-l {
    grid-column-start: 7;
  }

  .start-8-l {
    grid-column-start: 8;
  }

  .start-9-l {
    grid-column-start: 9;
  }

  .start-10-l {
    grid-column-start: 10;
  }

  .start-11-l {
    grid-column-start: 11;
  }

  .start-12-l {
    grid-column-start: 12;
  }

  .start-13-l {
    grid-column-start: 13;
  }

  .start-14-l {
    grid-column-start: 14;
  }

  .start-15-l {
    grid-column-start: 15;
  }

  .end-1-l {
    grid-column-end: 1;
  }

  .end-2-l {
    grid-column-end: 2;
  }

  .end-3-l {
    grid-column-end: 3;
  }

  .end-4-l {
    grid-column-end: 4;
  }

  .end-5-l {
    grid-column-end: 5;
  }

  .end-6-l {
    grid-column-end: 6;
  }

  .end-7-l {
    grid-column-end: 7;
  }

  .end-8-l {
    grid-column-end: 8;
  }

  .end-9-l {
    grid-column-end: 9;
  }

  .end-10-l {
    grid-column-end: 10;
  }

  .end-11-l {
    grid-column-end: 11;
  }

  .end-12-l {
    grid-column-end: 12;
  }

  .end-13-l {
    grid-column-end: 13;
  }

  .end-14-l {
    grid-column-end: 14;
  }

  .end-15-l {
    grid-column-end: 15;
  }

  .end-16-l {
    grid-column-end: 16;
  }
}

@media (min-width: 100rem) {
  .col-1-xl {
    grid-column: span 1 / span 1;
  }

  .col-2-xl {
    grid-column: span 2 / span 2;
  }

  .col-3-xl {
    grid-column: span 3 / span 3;
  }

  .col-4-xl {
    grid-column: span 4 / span 4;
  }

  .col-5-xl {
    grid-column: span 5 / span 5;
  }

  .col-6-xl {
    grid-column: span 6 / span 6;
  }

  .col-7-xl {
    grid-column: span 7 / span 7;
  }

  .col-8-xl {
    grid-column: span 8 / span 8;
  }

  .col-9-xl {
    grid-column: span 9 / span 9;
  }

  .col-10-xl {
    grid-column: span 10 / span 10;
  }

  .col-11-xl {
    grid-column: span 11 / span 11;
  }

  .col-12-xl {
    grid-column: span 12 / span 12;
  }

  .col-13-xl {
    grid-column: span 13 / span 13;
  }

  .col-14-xl {
    grid-column: span 14 / span 14;
  }

  .col-15-xl {
    grid-column: span 15 / span 15;
  }

  .col-16-xl {
    grid-column: span 16 / span 16;
  }

  .col-full-xl {
    grid-column: 1 / -1;
  }

  .col-center1-xl {
    grid-column: 2 / -2;
  }

  .col-center2-xl {
    grid-column: 3 / -3;
  }

  .col-center3-xl {
    grid-column: 4 / -4;
  }

  .col-center4-xl {
    grid-column: 6 / -6;
  }

  .col-auto-xl {
    grid-column: auto;
  }

  .start-1-xl {
    grid-column-start: 1;
  }

  .start-2-xl {
    grid-column-start: 2;
  }

  .start-3-xl {
    grid-column-start: 3;
  }

  .start-4-xl {
    grid-column-start: 4;
  }

  .start-5-xl {
    grid-column-start: 5;
  }

  .start-6-xl {
    grid-column-start: 6;
  }

  .start-7-xl {
    grid-column-start: 7;
  }

  .start-8-xl {
    grid-column-start: 8;
  }

  .start-9-xl {
    grid-column-start: 9;
  }

  .start-10-xl {
    grid-column-start: 10;
  }

  .start-11-xl {
    grid-column-start: 11;
  }

  .start-12-xl {
    grid-column-start: 12;
  }

  .start-13-xl {
    grid-column-start: 13;
  }

  .start-14-xl {
    grid-column-start: 14;
  }

  .start-15-xl {
    grid-column-start: 15;
  }

  .end-1-xl {
    grid-column-end: 1;
  }

  .end-2-xl {
    grid-column-end: 2;
  }

  .end-3-xl {
    grid-column-end: 3;
  }

  .end-4-xl {
    grid-column-end: 4;
  }

  .end-5-xl {
    grid-column-end: 5;
  }

  .end-6-xl {
    grid-column-end: 6;
  }

  .end-7-xl {
    grid-column-end: 7;
  }

  .end-8-xl {
    grid-column-end: 8;
  }

  .end-9-xl {
    grid-column-end: 9;
  }

  .end-10-xl {
    grid-column-end: 10;
  }

  .end-11-xl {
    grid-column-end: 11;
  }

  .end-12-xl {
    grid-column-end: 12;
  }

  .end-13-xl {
    grid-column-end: 13;
  }

  .end-14-xl {
    grid-column-end: 14;
  }

  .end-15-xl {
    grid-column-end: 15;
  }

  .end-16-xl {
    grid-column-end: 16;
  }
}

@media (min-width: 130rem) {
  .col-1-2xl {
    grid-column: span 1 / span 1;
  }

  .col-2-2xl {
    grid-column: span 2 / span 2;
  }

  .col-3-2xl {
    grid-column: span 3 / span 3;
  }

  .col-4-2xl {
    grid-column: span 4 / span 4;
  }

  .col-5-2xl {
    grid-column: span 5 / span 5;
  }

  .col-6-2xl {
    grid-column: span 6 / span 6;
  }

  .col-7-2xl {
    grid-column: span 7 / span 7;
  }

  .col-8-2xl {
    grid-column: span 8 / span 8;
  }

  .col-9-2xl {
    grid-column: span 9 / span 9;
  }

  .col-10-2xl {
    grid-column: span 10 / span 10;
  }

  .col-11-2xl {
    grid-column: span 11 / span 11;
  }

  .col-12-2xl {
    grid-column: span 12 / span 12;
  }

  .col-13-2xl {
    grid-column: span 13 / span 13;
  }

  .col-14-2xl {
    grid-column: span 14 / span 14;
  }

  .col-15-2xl {
    grid-column: span 15 / span 15;
  }

  .col-16-2xl {
    grid-column: span 16 / span 16;
  }

  .col-full-2xl {
    grid-column: 1 / -1;
  }

  .col-center1-2xl {
    grid-column: 2 / -2;
  }

  .col-center2-2xl {
    grid-column: 3 / -3;
  }

  .col-center3-2xl {
    grid-column: 4 / -4;
  }

  .col-center4-2xl {
    grid-column: 6 / -6;
  }

  .col-auto-2xl {
    grid-column: auto;
  }

  .start-1-2xl {
    grid-column-start: 1;
  }

  .start-2-2xl {
    grid-column-start: 2;
  }

  .start-3-2xl {
    grid-column-start: 3;
  }

  .start-4-2xl {
    grid-column-start: 4;
  }

  .start-5-2xl {
    grid-column-start: 5;
  }

  .start-6-2xl {
    grid-column-start: 6;
  }

  .start-7-2xl {
    grid-column-start: 7;
  }

  .start-8-2xl {
    grid-column-start: 8;
  }

  .start-9-2xl {
    grid-column-start: 9;
  }

  .start-10-2xl {
    grid-column-start: 10;
  }

  .start-11-2xl {
    grid-column-start: 11;
  }

  .start-12-2xl {
    grid-column-start: 12;
  }

  .start-13-2xl {
    grid-column-start: 13;
  }

  .start-14-2xl {
    grid-column-start: 14;
  }

  .start-15-2xl {
    grid-column-start: 15;
  }

  .end-1-2xl {
    grid-column-end: 1;
  }

  .end-2-2xl {
    grid-column-end: 2;
  }

  .end-3-2xl {
    grid-column-end: 3;
  }

  .end-4-2xl {
    grid-column-end: 4;
  }

  .end-5-2xl {
    grid-column-end: 5;
  }

  .end-6-2xl {
    grid-column-end: 6;
  }

  .end-7-2xl {
    grid-column-end: 7;
  }

  .end-8-2xl {
    grid-column-end: 8;
  }

  .end-9-2xl {
    grid-column-end: 9;
  }

  .end-10-2xl {
    grid-column-end: 10;
  }

  .end-11-2xl {
    grid-column-end: 11;
  }

  .end-12-2xl {
    grid-column-end: 12;
  }

  .end-13-2xl {
    grid-column-end: 13;
  }

  .end-14-2xl {
    grid-column-end: 14;
  }

  .end-15-2xl {
    grid-column-end: 15;
  }

  .end-16-2xl {
    grid-column-end: 16;
  }
}

@media (min-width: 200rem) {
  .col-1-4xl {
    grid-column: span 1 / span 1;
  }

  .col-2-4xl {
    grid-column: span 2 / span 2;
  }

  .col-3-4xl {
    grid-column: span 3 / span 3;
  }

  .col-4-4xl {
    grid-column: span 4 / span 4;
  }

  .col-5-4xl {
    grid-column: span 5 / span 5;
  }

  .col-6-4xl {
    grid-column: span 6 / span 6;
  }

  .col-7-4xl {
    grid-column: span 7 / span 7;
  }

  .col-8-4xl {
    grid-column: span 8 / span 8;
  }

  .col-9-4xl {
    grid-column: span 9 / span 9;
  }

  .col-10-4xl {
    grid-column: span 10 / span 10;
  }

  .col-11-4xl {
    grid-column: span 11 / span 11;
  }

  .col-12-4xl {
    grid-column: span 12 / span 12;
  }

  .col-13-4xl {
    grid-column: span 13 / span 13;
  }

  .col-14-4xl {
    grid-column: span 14 / span 14;
  }

  .col-15-4xl {
    grid-column: span 15 / span 15;
  }

  .col-16-4xl {
    grid-column: span 16 / span 16;
  }

  .col-full-4xl {
    grid-column: 1 / -1;
  }

  .col-center1-4xl {
    grid-column: 2 / -2;
  }

  .col-center2-4xl {
    grid-column: 3 / -3;
  }

  .col-center3-4xl {
    grid-column: 4 / -4;
  }

  .col-center4-4xl {
    grid-column: 6 / -6;
  }

  .col-auto-4xl {
    grid-column: auto;
  }

  .start-1-4xl {
    grid-column-start: 1;
  }

  .start-2-4xl {
    grid-column-start: 2;
  }

  .start-3-4xl {
    grid-column-start: 3;
  }

  .start-4-4xl {
    grid-column-start: 4;
  }

  .start-5-4xl {
    grid-column-start: 5;
  }

  .start-6-4xl {
    grid-column-start: 6;
  }

  .start-7-4xl {
    grid-column-start: 7;
  }

  .start-8-4xl {
    grid-column-start: 8;
  }

  .start-9-4xl {
    grid-column-start: 9;
  }

  .start-10-4xl {
    grid-column-start: 10;
  }

  .start-11-4xl {
    grid-column-start: 11;
  }

  .start-12-4xl {
    grid-column-start: 12;
  }

  .start-13-4xl {
    grid-column-start: 13;
  }

  .start-14-4xl {
    grid-column-start: 14;
  }

  .start-15-4xl {
    grid-column-start: 15;
  }

  .end-1-4xl {
    grid-column-end: 1;
  }

  .end-2-4xl {
    grid-column-end: 2;
  }

  .end-3-4xl {
    grid-column-end: 3;
  }

  .end-4-4xl {
    grid-column-end: 4;
  }

  .end-5-4xl {
    grid-column-end: 5;
  }

  .end-6-4xl {
    grid-column-end: 6;
  }

  .end-7-4xl {
    grid-column-end: 7;
  }

  .end-8-4xl {
    grid-column-end: 8;
  }

  .end-9-4xl {
    grid-column-end: 9;
  }

  .end-10-4xl {
    grid-column-end: 10;
  }

  .end-11-4xl {
    grid-column-end: 11;
  }

  .end-12-4xl {
    grid-column-end: 12;
  }

  .end-13-4xl {
    grid-column-end: 13;
  }

  .end-14-4xl {
    grid-column-end: 14;
  }

  .end-15-4xl {
    grid-column-end: 15;
  }

  .end-16-4xl {
    grid-column-end: 16;
  }
}

/* src/grid-row.css */
.row-auto {
  grid-row: auto;
}

.row-start-1 {
  grid-row-start: 1;
}

.row-start-2 {
  grid-row-start: 2;
}

.row-start-3 {
  grid-row-start: 3;
}

.row-start-4 {
  grid-row-start: 4;
}

.row-start-5 {
  grid-row-start: 5;
}

.row-start-6 {
  grid-row-start: 6;
}

.row-start-7 {
  grid-row-start: 7;
}

.row-start-8 {
  grid-row-start: 8;
}

.row-start-9 {
  grid-row-start: 9;
}

.row-start-10 {
  grid-row-start: 10;
}

.row-start-11 {
  grid-row-start: 11;
}

.row-start-12 {
  grid-row-start: 12;
}

.row-start-13 {
  grid-row-start: 13;
}

.row-start-14 {
  grid-row-start: 14;
}

.row-start-15 {
  grid-row-start: 15;
}

.row-start-16 {
  grid-row-start: 16;
}

.row-end-1 {
  grid-row-end: 1;
}

.row-end-2 {
  grid-row-end: 2;
}

.row-end-3 {
  grid-row-end: 3;
}

.row-end-4 {
  grid-row-end: 4;
}

.row-end-5 {
  grid-row-end: 5;
}

.row-end-6 {
  grid-row-end: 6;
}

.row-end-7 {
  grid-row-end: 7;
}

.row-end-8 {
  grid-row-end: 8;
}

.row-end-9 {
  grid-row-end: 9;
}

.row-end-10 {
  grid-row-end: 10;
}

.row-end-11 {
  grid-row-end: 11;
}

.row-end-12 {
  grid-row-end: 12;
}

.row-end-13 {
  grid-row-end: 13;
}

.row-end-14 {
  grid-row-end: 14;
}

.row-end-15 {
  grid-row-end: 15;
}

.row-end-16 {
  grid-row-end: 16;
}

@media (max-width: 8rem) {
  .row-auto-4xs {
    grid-row: auto;
  }

  .row-start-1-4xs {
    grid-row-start: 1;
  }

  .row-start-2-4xs {
    grid-row-start: 2;
  }

  .row-start-3-4xs {
    grid-row-start: 3;
  }

  .row-start-4-4xs {
    grid-row-start: 4;
  }

  .row-start-5-4xs {
    grid-row-start: 5;
  }

  .row-start-6-4xs {
    grid-row-start: 6;
  }

  .row-start-7-4xs {
    grid-row-start: 7;
  }

  .row-start-8-4xs {
    grid-row-start: 8;
  }

  .row-start-9-4xs {
    grid-row-start: 9;
  }

  .row-start-10-4xs {
    grid-row-start: 10;
  }

  .row-start-11-4xs {
    grid-row-start: 11;
  }

  .row-start-12-4xs {
    grid-row-start: 12;
  }

  .row-start-13-4xs {
    grid-row-start: 13;
  }

  .row-start-14-4xs {
    grid-row-start: 14;
  }

  .row-start-15-4xs {
    grid-row-start: 15;
  }

  .row-start-16-4xs {
    grid-row-start: 16;
  }

  .row-end-1-4xs {
    grid-row-end: 1;
  }

  .row-end-2-4xs {
    grid-row-end: 2;
  }

  .row-end-3-4xs {
    grid-row-end: 3;
  }

  .row-end-4-4xs {
    grid-row-end: 4;
  }

  .row-end-5-4xs {
    grid-row-end: 5;
  }

  .row-end-6-4xs {
    grid-row-end: 6;
  }

  .row-end-7-4xs {
    grid-row-end: 7;
  }

  .row-end-8-4xs {
    grid-row-end: 8;
  }

  .row-end-9-4xs {
    grid-row-end: 9;
  }

  .row-end-10-4xs {
    grid-row-end: 10;
  }

  .row-end-11-4xs {
    grid-row-end: 11;
  }

  .row-end-12-4xs {
    grid-row-end: 12;
  }

  .row-end-13-4xs {
    grid-row-end: 13;
  }

  .row-end-14-4xs {
    grid-row-end: 14;
  }

  .row-end-15-4xs {
    grid-row-end: 15;
  }

  .row-end-16-4xs {
    grid-row-end: 16;
  }
}

@media (min-width: calc(8rem + .001px)) {
  .row-auto-2xs {
    grid-row: auto;
  }

  .row-start-1-2xs {
    grid-row-start: 1;
  }

  .row-start-2-2xs {
    grid-row-start: 2;
  }

  .row-start-3-2xs {
    grid-row-start: 3;
  }

  .row-start-4-2xs {
    grid-row-start: 4;
  }

  .row-start-5-2xs {
    grid-row-start: 5;
  }

  .row-start-6-2xs {
    grid-row-start: 6;
  }

  .row-start-7-2xs {
    grid-row-start: 7;
  }

  .row-start-8-2xs {
    grid-row-start: 8;
  }

  .row-start-9-2xs {
    grid-row-start: 9;
  }

  .row-start-10-2xs {
    grid-row-start: 10;
  }

  .row-start-11-2xs {
    grid-row-start: 11;
  }

  .row-start-12-2xs {
    grid-row-start: 12;
  }

  .row-start-13-2xs {
    grid-row-start: 13;
  }

  .row-start-14-2xs {
    grid-row-start: 14;
  }

  .row-start-15-2xs {
    grid-row-start: 15;
  }

  .row-start-16-2xs {
    grid-row-start: 16;
  }

  .row-end-1-2xs {
    grid-row-end: 1;
  }

  .row-end-2-2xs {
    grid-row-end: 2;
  }

  .row-end-3-2xs {
    grid-row-end: 3;
  }

  .row-end-4-2xs {
    grid-row-end: 4;
  }

  .row-end-5-2xs {
    grid-row-end: 5;
  }

  .row-end-6-2xs {
    grid-row-end: 6;
  }

  .row-end-7-2xs {
    grid-row-end: 7;
  }

  .row-end-8-2xs {
    grid-row-end: 8;
  }

  .row-end-9-2xs {
    grid-row-end: 9;
  }

  .row-end-10-2xs {
    grid-row-end: 10;
  }

  .row-end-11-2xs {
    grid-row-end: 11;
  }

  .row-end-12-2xs {
    grid-row-end: 12;
  }

  .row-end-13-2xs {
    grid-row-end: 13;
  }

  .row-end-14-2xs {
    grid-row-end: 14;
  }

  .row-end-15-2xs {
    grid-row-end: 15;
  }

  .row-end-16-2xs {
    grid-row-end: 16;
  }
}

@media (min-width: 20rem) {
  .row-auto-xs {
    grid-row: auto;
  }

  .row-start-1-xs {
    grid-row-start: 1;
  }

  .row-start-2-xs {
    grid-row-start: 2;
  }

  .row-start-3-xs {
    grid-row-start: 3;
  }

  .row-start-4-xs {
    grid-row-start: 4;
  }

  .row-start-5-xs {
    grid-row-start: 5;
  }

  .row-start-6-xs {
    grid-row-start: 6;
  }

  .row-start-7-xs {
    grid-row-start: 7;
  }

  .row-start-8-xs {
    grid-row-start: 8;
  }

  .row-start-9-xs {
    grid-row-start: 9;
  }

  .row-start-10-xs {
    grid-row-start: 10;
  }

  .row-start-11-xs {
    grid-row-start: 11;
  }

  .row-start-12-xs {
    grid-row-start: 12;
  }

  .row-start-13-xs {
    grid-row-start: 13;
  }

  .row-start-14-xs {
    grid-row-start: 14;
  }

  .row-start-15-xs {
    grid-row-start: 15;
  }

  .row-start-16-xs {
    grid-row-start: 16;
  }

  .row-end-1-xs {
    grid-row-end: 1;
  }

  .row-end-2-xs {
    grid-row-end: 2;
  }

  .row-end-3-xs {
    grid-row-end: 3;
  }

  .row-end-4-xs {
    grid-row-end: 4;
  }

  .row-end-5-xs {
    grid-row-end: 5;
  }

  .row-end-6-xs {
    grid-row-end: 6;
  }

  .row-end-7-xs {
    grid-row-end: 7;
  }

  .row-end-8-xs {
    grid-row-end: 8;
  }

  .row-end-9-xs {
    grid-row-end: 9;
  }

  .row-end-10-xs {
    grid-row-end: 10;
  }

  .row-end-11-xs {
    grid-row-end: 11;
  }

  .row-end-12-xs {
    grid-row-end: 12;
  }

  .row-end-13-xs {
    grid-row-end: 13;
  }

  .row-end-14-xs {
    grid-row-end: 14;
  }

  .row-end-15-xs {
    grid-row-end: 15;
  }

  .row-end-16-xs {
    grid-row-end: 16;
  }
}

@media (min-width: 32rem) {
  .row-auto-s {
    grid-row: auto;
  }

  .row-start-1-s {
    grid-row-start: 1;
  }

  .row-start-2-s {
    grid-row-start: 2;
  }

  .row-start-3-s {
    grid-row-start: 3;
  }

  .row-start-4-s {
    grid-row-start: 4;
  }

  .row-start-5-s {
    grid-row-start: 5;
  }

  .row-start-6-s {
    grid-row-start: 6;
  }

  .row-start-7-s {
    grid-row-start: 7;
  }

  .row-start-8-s {
    grid-row-start: 8;
  }

  .row-start-9-s {
    grid-row-start: 9;
  }

  .row-start-10-s {
    grid-row-start: 10;
  }

  .row-start-11-s {
    grid-row-start: 11;
  }

  .row-start-12-s {
    grid-row-start: 12;
  }

  .row-start-13-s {
    grid-row-start: 13;
  }

  .row-start-14-s {
    grid-row-start: 14;
  }

  .row-start-15-s {
    grid-row-start: 15;
  }

  .row-start-16-s {
    grid-row-start: 16;
  }

  .row-end-1-s {
    grid-row-end: 1;
  }

  .row-end-2-s {
    grid-row-end: 2;
  }

  .row-end-3-s {
    grid-row-end: 3;
  }

  .row-end-4-s {
    grid-row-end: 4;
  }

  .row-end-5-s {
    grid-row-end: 5;
  }

  .row-end-6-s {
    grid-row-end: 6;
  }

  .row-end-7-s {
    grid-row-end: 7;
  }

  .row-end-8-s {
    grid-row-end: 8;
  }

  .row-end-9-s {
    grid-row-end: 9;
  }

  .row-end-10-s {
    grid-row-end: 10;
  }

  .row-end-11-s {
    grid-row-end: 11;
  }

  .row-end-12-s {
    grid-row-end: 12;
  }

  .row-end-13-s {
    grid-row-end: 13;
  }

  .row-end-14-s {
    grid-row-end: 14;
  }

  .row-end-15-s {
    grid-row-end: 15;
  }

  .row-end-16-s {
    grid-row-end: 16;
  }
}

@media (min-width: 48rem) {
  .row-auto-m {
    grid-row: auto;
  }

  .row-start-1-m {
    grid-row-start: 1;
  }

  .row-start-2-m {
    grid-row-start: 2;
  }

  .row-start-3-m {
    grid-row-start: 3;
  }

  .row-start-4-m {
    grid-row-start: 4;
  }

  .row-start-5-m {
    grid-row-start: 5;
  }

  .row-start-6-m {
    grid-row-start: 6;
  }

  .row-start-7-m {
    grid-row-start: 7;
  }

  .row-start-8-m {
    grid-row-start: 8;
  }

  .row-start-9-m {
    grid-row-start: 9;
  }

  .row-start-10-m {
    grid-row-start: 10;
  }

  .row-start-11-m {
    grid-row-start: 11;
  }

  .row-start-12-m {
    grid-row-start: 12;
  }

  .row-start-13-m {
    grid-row-start: 13;
  }

  .row-start-14-m {
    grid-row-start: 14;
  }

  .row-start-15-m {
    grid-row-start: 15;
  }

  .row-start-16-m {
    grid-row-start: 16;
  }

  .row-end-1-m {
    grid-row-end: 1;
  }

  .row-end-2-m {
    grid-row-end: 2;
  }

  .row-end-3-m {
    grid-row-end: 3;
  }

  .row-end-4-m {
    grid-row-end: 4;
  }

  .row-end-5-m {
    grid-row-end: 5;
  }

  .row-end-6-m {
    grid-row-end: 6;
  }

  .row-end-7-m {
    grid-row-end: 7;
  }

  .row-end-8-m {
    grid-row-end: 8;
  }

  .row-end-9-m {
    grid-row-end: 9;
  }

  .row-end-10-m {
    grid-row-end: 10;
  }

  .row-end-11-m {
    grid-row-end: 11;
  }

  .row-end-12-m {
    grid-row-end: 12;
  }

  .row-end-13-m {
    grid-row-end: 13;
  }

  .row-end-14-m {
    grid-row-end: 14;
  }

  .row-end-15-m {
    grid-row-end: 15;
  }

  .row-end-16-m {
    grid-row-end: 16;
  }
}

@media (min-width: 64rem) {
  .row-auto-l {
    grid-row: auto;
  }

  .row-start-1-l {
    grid-row-start: 1;
  }

  .row-start-2-l {
    grid-row-start: 2;
  }

  .row-start-3-l {
    grid-row-start: 3;
  }

  .row-start-4-l {
    grid-row-start: 4;
  }

  .row-start-5-l {
    grid-row-start: 5;
  }

  .row-start-6-l {
    grid-row-start: 6;
  }

  .row-start-7-l {
    grid-row-start: 7;
  }

  .row-start-8-l {
    grid-row-start: 8;
  }

  .row-start-9-l {
    grid-row-start: 9;
  }

  .row-start-10-l {
    grid-row-start: 10;
  }

  .row-start-11-l {
    grid-row-start: 11;
  }

  .row-start-12-l {
    grid-row-start: 12;
  }

  .row-start-13-l {
    grid-row-start: 13;
  }

  .row-start-14-l {
    grid-row-start: 14;
  }

  .row-start-15-l {
    grid-row-start: 15;
  }

  .row-start-16-l {
    grid-row-start: 16;
  }

  .row-end-1-l {
    grid-row-end: 1;
  }

  .row-end-2-l {
    grid-row-end: 2;
  }

  .row-end-3-l {
    grid-row-end: 3;
  }

  .row-end-4-l {
    grid-row-end: 4;
  }

  .row-end-5-l {
    grid-row-end: 5;
  }

  .row-end-6-l {
    grid-row-end: 6;
  }

  .row-end-7-l {
    grid-row-end: 7;
  }

  .row-end-8-l {
    grid-row-end: 8;
  }

  .row-end-9-l {
    grid-row-end: 9;
  }

  .row-end-10-l {
    grid-row-end: 10;
  }

  .row-end-11-l {
    grid-row-end: 11;
  }

  .row-end-12-l {
    grid-row-end: 12;
  }

  .row-end-13-l {
    grid-row-end: 13;
  }

  .row-end-14-l {
    grid-row-end: 14;
  }

  .row-end-15-l {
    grid-row-end: 15;
  }

  .row-end-16-l {
    grid-row-end: 16;
  }
}

@media (min-width: 100rem) {
  .row-auto-xl {
    grid-row: auto;
  }

  .row-start-1-xl {
    grid-row-start: 1;
  }

  .row-start-2-xl {
    grid-row-start: 2;
  }

  .row-start-3-xl {
    grid-row-start: 3;
  }

  .row-start-4-xl {
    grid-row-start: 4;
  }

  .row-start-5-xl {
    grid-row-start: 5;
  }

  .row-start-6-xl {
    grid-row-start: 6;
  }

  .row-start-7-xl {
    grid-row-start: 7;
  }

  .row-start-8-xl {
    grid-row-start: 8;
  }

  .row-start-9-xl {
    grid-row-start: 9;
  }

  .row-start-10-xl {
    grid-row-start: 10;
  }

  .row-start-11-xl {
    grid-row-start: 11;
  }

  .row-start-12-xl {
    grid-row-start: 12;
  }

  .row-start-13-xl {
    grid-row-start: 13;
  }

  .row-start-14-xl {
    grid-row-start: 14;
  }

  .row-start-15-xl {
    grid-row-start: 15;
  }

  .row-start-16-xl {
    grid-row-start: 16;
  }

  .row-end-1-xl {
    grid-row-end: 1;
  }

  .row-end-2-xl {
    grid-row-end: 2;
  }

  .row-end-3-xl {
    grid-row-end: 3;
  }

  .row-end-4-xl {
    grid-row-end: 4;
  }

  .row-end-5-xl {
    grid-row-end: 5;
  }

  .row-end-6-xl {
    grid-row-end: 6;
  }

  .row-end-7-xl {
    grid-row-end: 7;
  }

  .row-end-8-xl {
    grid-row-end: 8;
  }

  .row-end-9-xl {
    grid-row-end: 9;
  }

  .row-end-10-xl {
    grid-row-end: 10;
  }

  .row-end-11-xl {
    grid-row-end: 11;
  }

  .row-end-12-xl {
    grid-row-end: 12;
  }

  .row-end-13-xl {
    grid-row-end: 13;
  }

  .row-end-14-xl {
    grid-row-end: 14;
  }

  .row-end-15-xl {
    grid-row-end: 15;
  }

  .row-end-16-xl {
    grid-row-end: 16;
  }
}

@media (min-width: 130rem) {
  .row-auto-2xl {
    grid-row: auto;
  }

  .row-start-1-2xl {
    grid-row-start: 1;
  }

  .row-start-2-2xl {
    grid-row-start: 2;
  }

  .row-start-3-2xl {
    grid-row-start: 3;
  }

  .row-start-4-2xl {
    grid-row-start: 4;
  }

  .row-start-5-2xl {
    grid-row-start: 5;
  }

  .row-start-6-2xl {
    grid-row-start: 6;
  }

  .row-start-7-2xl {
    grid-row-start: 7;
  }

  .row-start-8-2xl {
    grid-row-start: 8;
  }

  .row-start-9-2xl {
    grid-row-start: 9;
  }

  .row-start-10-2xl {
    grid-row-start: 10;
  }

  .row-start-11-2xl {
    grid-row-start: 11;
  }

  .row-start-12-2xl {
    grid-row-start: 12;
  }

  .row-start-13-2xl {
    grid-row-start: 13;
  }

  .row-start-14-2xl {
    grid-row-start: 14;
  }

  .row-start-15-2xl {
    grid-row-start: 15;
  }

  .row-start-16-2xl {
    grid-row-start: 16;
  }

  .row-end-1-2xl {
    grid-row-end: 1;
  }

  .row-end-2-2xl {
    grid-row-end: 2;
  }

  .row-end-3-2xl {
    grid-row-end: 3;
  }

  .row-end-4-2xl {
    grid-row-end: 4;
  }

  .row-end-5-2xl {
    grid-row-end: 5;
  }

  .row-end-6-2xl {
    grid-row-end: 6;
  }

  .row-end-7-2xl {
    grid-row-end: 7;
  }

  .row-end-8-2xl {
    grid-row-end: 8;
  }

  .row-end-9-2xl {
    grid-row-end: 9;
  }

  .row-end-10-2xl {
    grid-row-end: 10;
  }

  .row-end-11-2xl {
    grid-row-end: 11;
  }

  .row-end-12-2xl {
    grid-row-end: 12;
  }

  .row-end-13-2xl {
    grid-row-end: 13;
  }

  .row-end-14-2xl {
    grid-row-end: 14;
  }

  .row-end-15-2xl {
    grid-row-end: 15;
  }

  .row-end-16-2xl {
    grid-row-end: 16;
  }
}

@media (min-width: 200rem) {
  .row-auto-4xl {
    grid-row: auto;
  }

  .row-start-1-4xl {
    grid-row-start: 1;
  }

  .row-start-2-4xl {
    grid-row-start: 2;
  }

  .row-start-3-4xl {
    grid-row-start: 3;
  }

  .row-start-4-4xl {
    grid-row-start: 4;
  }

  .row-start-5-4xl {
    grid-row-start: 5;
  }

  .row-start-6-4xl {
    grid-row-start: 6;
  }

  .row-start-7-4xl {
    grid-row-start: 7;
  }

  .row-start-8-4xl {
    grid-row-start: 8;
  }

  .row-start-9-4xl {
    grid-row-start: 9;
  }

  .row-start-10-4xl {
    grid-row-start: 10;
  }

  .row-start-11-4xl {
    grid-row-start: 11;
  }

  .row-start-12-4xl {
    grid-row-start: 12;
  }

  .row-start-13-4xl {
    grid-row-start: 13;
  }

  .row-start-14-4xl {
    grid-row-start: 14;
  }

  .row-start-15-4xl {
    grid-row-start: 15;
  }

  .row-start-16-4xl {
    grid-row-start: 16;
  }

  .row-end-1-4xl {
    grid-row-end: 1;
  }

  .row-end-2-4xl {
    grid-row-end: 2;
  }

  .row-end-3-4xl {
    grid-row-end: 3;
  }

  .row-end-4-4xl {
    grid-row-end: 4;
  }

  .row-end-5-4xl {
    grid-row-end: 5;
  }

  .row-end-6-4xl {
    grid-row-end: 6;
  }

  .row-end-7-4xl {
    grid-row-end: 7;
  }

  .row-end-8-4xl {
    grid-row-end: 8;
  }

  .row-end-9-4xl {
    grid-row-end: 9;
  }

  .row-end-10-4xl {
    grid-row-end: 10;
  }

  .row-end-11-4xl {
    grid-row-end: 11;
  }

  .row-end-12-4xl {
    grid-row-end: 12;
  }

  .row-end-13-4xl {
    grid-row-end: 13;
  }

  .row-end-14-4xl {
    grid-row-end: 14;
  }

  .row-end-15-4xl {
    grid-row-end: 15;
  }

  .row-end-16-4xl {
    grid-row-end: 16;
  }
}

/* src/filters.css */
.filter-none {
  filter: none;
}

.blur-1 {
  filter: blur(4px);
}

.blur-2 {
  filter: blur(16px);
}

.blur-3 {
  filter: blur(96px);
}

.grayscale-1 {
  filter: grayscale(0);
}

.grayscale-2 {
  filter: grayscale(50%);
}

.grayscale-3 {
  filter: grayscale(100%);
}

.hue-rotate-0 {
  filter: hue-rotate(0deg);
}

.hue-rotate-1 {
  filter: hue-rotate(45deg);
}

.hue-rotate-2 {
  filter: hue-rotate(90deg);
}

.hue-rotate-3 {
  filter: hue-rotate(135deg);
}

.hue-rotate-4 {
  filter: hue-rotate(180deg);
}

.hue-rotate-5 {
  filter: hue-rotate(225deg);
}

.hue-rotate-6 {
  filter: hue-rotate(270deg);
}

.hue-rotate-7 {
  filter: hue-rotate(315deg);
}

.invert {
  filter: invert(100%);
}

.filter-none-hover:hover {
  filter: none;
}

.blur-1-hover:hover {
  filter: blur(4px);
}

.blur-2-hover:hover {
  filter: blur(16px);
}

.blur-3-hover:hover {
  filter: blur(96px);
}

.grayscale-1-hover:hover {
  filter: grayscale(0);
}

.grayscale-2-hover:hover {
  filter: grayscale(50%);
}

.grayscale-3-hover:hover {
  filter: grayscale(100%);
}

.hue-rotate-0-hover:hover {
  filter: hue-rotate(0deg);
}

.hue-rotate-1-hover:hover {
  filter: hue-rotate(45deg);
}

.hue-rotate-2-hover:hover {
  filter: hue-rotate(90deg);
}

.hue-rotate-3-hover:hover {
  filter: hue-rotate(135deg);
}

.hue-rotate-4-hover:hover {
  filter: hue-rotate(180deg);
}

.hue-rotate-5-hover:hover {
  filter: hue-rotate(225deg);
}

.hue-rotate-6-hover:hover {
  filter: hue-rotate(270deg);
}

.hue-rotate-7-hover:hover {
  filter: hue-rotate(315deg);
}

.invert-hover:hover {
  filter: invert(100%);
}

.blur-1-focus:focus {
  filter: blur(4px);
}

.blur-2-focus:focus {
  filter: blur(16px);
}

.blur-3-focus:focus {
  filter: blur(96px);
}

.grayscale-1-focus:focus {
  filter: grayscale(0);
}

.grayscale-2-focus:focus {
  filter: grayscale(50%);
}

.grayscale-3-focus:focus {
  filter: grayscale(100%);
}

.hue-rotate-0-focus:focus {
  filter: hue-rotate(0deg);
}

.hue-rotate-1-focus:focus {
  filter: hue-rotate(45deg);
}

.hue-rotate-2-focus:focus {
  filter: hue-rotate(90deg);
}

.hue-rotate-3-focus:focus {
  filter: hue-rotate(135deg);
}

.hue-rotate-4-focus:focus {
  filter: hue-rotate(180deg);
}

.hue-rotate-5-focus:focus {
  filter: hue-rotate(225deg);
}

.hue-rotate-6-focus:focus {
  filter: hue-rotate(270deg);
}

.hue-rotate-7-focus:focus {
  filter: hue-rotate(315deg);
}

.invert-focus:focus {
  filter: invert(100%);
}

/* src/flexbox.css */
.flex-auto {
  flex: auto;
}

.flex-none {
  flex: none;
}

.flex-grow-0 {
  flex-grow: 0;
}

.flex-grow-1 {
  flex-grow: 1;
}

.flex-shrink-0 {
  flex-shrink: 0;
}

.flex-shrink-1 {
  flex-shrink: 1;
}

@media (max-width: 8rem) {
  .flex-auto-4xs {
    flex: auto;
  }

  .flex-none-4xs {
    flex: none;
  }

  .flex-grow-0-4xs {
    flex-grow: 0;
  }

  .flex-grow-1-4xs {
    flex-grow: 1;
  }

  .flex-shrink-0-4xs {
    flex-shrink: 0;
  }

  .flex-shrink-1-4xs {
    flex-shrink: 1;
  }
}

@media (min-width: calc(8rem + .001px)) {
  .flex-auto-2xs {
    flex: auto;
  }

  .flex-none-2xs {
    flex: none;
  }

  .flex-grow-0-2xs {
    flex-grow: 0;
  }

  .flex-grow-1-2xs {
    flex-grow: 1;
  }

  .flex-shrink-0-2xs {
    flex-shrink: 0;
  }

  .flex-shrink-1-2xs {
    flex-shrink: 1;
  }
}

@media (min-width: 20rem) {
  .flex-auto-xs {
    flex: auto;
  }

  .flex-none-xs {
    flex: none;
  }

  .flex-grow-0-xs {
    flex-grow: 0;
  }

  .flex-grow-1-xs {
    flex-grow: 1;
  }

  .flex-shrink-0-xs {
    flex-shrink: 0;
  }

  .flex-shrink-1-xs {
    flex-shrink: 1;
  }
}

@media (min-width: 32rem) {
  .flex-auto-s {
    flex: auto;
  }

  .flex-none-s {
    flex: none;
  }

  .flex-grow-0-s {
    flex-grow: 0;
  }

  .flex-grow-1-s {
    flex-grow: 1;
  }

  .flex-shrink-0-s {
    flex-shrink: 0;
  }

  .flex-shrink-1-s {
    flex-shrink: 1;
  }
}

@media (min-width: 48rem) {
  .flex-auto-m {
    flex: auto;
  }

  .flex-none-m {
    flex: none;
  }

  .flex-grow-0-m {
    flex-grow: 0;
  }

  .flex-grow-1-m {
    flex-grow: 1;
  }

  .flex-shrink-0-m {
    flex-shrink: 0;
  }

  .flex-shrink-1-m {
    flex-shrink: 1;
  }
}

@media (min-width: 64rem) {
  .flex-auto-l {
    flex: auto;
  }

  .flex-none-l {
    flex: none;
  }

  .flex-grow-0-l {
    flex-grow: 0;
  }

  .flex-grow-1-l {
    flex-grow: 1;
  }

  .flex-shrink-0-l {
    flex-shrink: 0;
  }

  .flex-shrink-1-l {
    flex-shrink: 1;
  }
}

@media (min-width: 100rem) {
  .flex-auto-xl {
    flex: auto;
  }

  .flex-none-xl {
    flex: none;
  }

  .flex-grow-0-xl {
    flex-grow: 0;
  }

  .flex-grow-1-xl {
    flex-grow: 1;
  }

  .flex-shrink-0-xl {
    flex-shrink: 0;
  }

  .flex-shrink-1-xl {
    flex-shrink: 1;
  }
}

@media (min-width: 130rem) {
  .flex-auto-2xl {
    flex: auto;
  }

  .flex-none-2xl {
    flex: none;
  }

  .flex-grow-0-2xl {
    flex-grow: 0;
  }

  .flex-grow-1-2xl {
    flex-grow: 1;
  }

  .flex-shrink-0-2xl {
    flex-shrink: 0;
  }

  .flex-shrink-1-2xl {
    flex-shrink: 1;
  }
}

@media (min-width: 200rem) {
  .flex-auto-4xl {
    flex: auto;
  }

  .flex-none-4xl {
    flex: none;
  }

  .flex-grow-0-4xl {
    flex-grow: 0;
  }

  .flex-grow-1-4xl {
    flex-grow: 1;
  }

  .flex-shrink-0-4xl {
    flex-shrink: 0;
  }

  .flex-shrink-1-4xl {
    flex-shrink: 1;
  }
}

/* src/flex-direction.css */
.flex-column {
  flex-direction: column;
}

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

.flex-column-reverse {
  flex-direction: column-reverse;
}

.flex-row-reverse {
  flex-direction: row-reverse;
}

@media (max-width: 8rem) {
  .flex-column-4xs {
    flex-direction: column;
  }

  .flex-row-4xs {
    flex-direction: row;
  }

  .flex-column-reverse-4xs {
    flex-direction: column-reverse;
  }

  .flex-row-reverse-4xs {
    flex-direction: row-reverse;
  }
}

@media (min-width: calc(8rem + .001px)) {
  .flex-column-2xs {
    flex-direction: column;
  }

  .flex-row-2xs {
    flex-direction: row;
  }

  .flex-column-reverse-2xs {
    flex-direction: column-reverse;
  }

  .flex-row-reverse-2xs {
    flex-direction: row-reverse;
  }
}

@media (min-width: 20rem) {
  .flex-column-xs {
    flex-direction: column;
  }

  .flex-row-xs {
    flex-direction: row;
  }

  .flex-column-reverse-xs {
    flex-direction: column-reverse;
  }

  .flex-row-reverse-xs {
    flex-direction: row-reverse;
  }
}

@media (min-width: 32rem) {
  .flex-column-s {
    flex-direction: column;
  }

  .flex-row-s {
    flex-direction: row;
  }

  .flex-column-reverse-s {
    flex-direction: column-reverse;
  }

  .flex-row-reverse-s {
    flex-direction: row-reverse;
  }
}

@media (min-width: 48rem) {
  .flex-column-m {
    flex-direction: column;
  }

  .flex-row-m {
    flex-direction: row;
  }

  .flex-column-reverse-m {
    flex-direction: column-reverse;
  }

  .flex-row-reverse-m {
    flex-direction: row-reverse;
  }
}

@media (min-width: 64rem) {
  .flex-column-l {
    flex-direction: column;
  }

  .flex-row-l {
    flex-direction: row;
  }

  .flex-column-reverse-l {
    flex-direction: column-reverse;
  }

  .flex-row-reverse-l {
    flex-direction: row-reverse;
  }
}

@media (min-width: 100rem) {
  .flex-column-xl {
    flex-direction: column;
  }

  .flex-row-xl {
    flex-direction: row;
  }

  .flex-column-reverse-xl {
    flex-direction: column-reverse;
  }

  .flex-row-reverse-xl {
    flex-direction: row-reverse;
  }
}

@container (--2xl) {
  .flex-column-2xl {
    flex-direction: column;
  }

  .flex-row-2xl {
    flex-direction: row;
  }

  .flex-column-reverse-2xl {
    flex-direction: column-reverse;
  }

  .flex-row-reverse-2xl {
    flex-direction: row-reverse;
  }
}

@container (--4xl) {
  .flex-column-4xl {
    flex-direction: column;
  }

  .flex-row-4xl {
    flex-direction: row;
  }

  .flex-column-reverse-4xl {
    flex-direction: column-reverse;
  }

  .flex-row-reverse-4xl {
    flex-direction: row-reverse;
  }
}

/* src/flex-wrap.css */
.flex-wrap {
  flex-wrap: wrap;
}

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

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

@media (max-width: 8rem) {
  .flex-wrap-4xs {
    flex-wrap: wrap;
  }

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

  .flex-wrap-reverse-4xs {
    flex-wrap: wrap-reverse;
  }
}

@media (min-width: calc(8rem + .001px)) {
  .flex-wrap-2xs {
    flex-wrap: wrap;
  }

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

  .flex-wrap-reverse-2xs {
    flex-wrap: wrap-reverse;
  }
}

@media (min-width: 20rem) {
  .flex-wrap-xs {
    flex-wrap: wrap;
  }

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

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

@media (min-width: 32rem) {
  .flex-wrap-s {
    flex-wrap: wrap;
  }

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

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

@media (min-width: 48rem) {
  .flex-wrap-m {
    flex-wrap: wrap;
  }

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

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

@media (min-width: 64rem) {
  .flex-wrap-l {
    flex-wrap: wrap;
  }

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

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

@media (min-width: 100rem) {
  .flex-wrap-xl {
    flex-wrap: wrap;
  }

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

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

@container (--2xl) {
  .flex-wrap-2xl {
    flex-wrap: wrap;
  }

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

  .flex-wrap-reverse-2xl {
    flex-wrap: wrap-reverse;
  }
}

@container (--4xl) {
  .flex-wrap-4xl {
    flex-wrap: wrap;
  }

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

  .flex-wrap-reverse-4xl {
    flex-wrap: wrap-reverse;
  }
}

/* src/align-items.css */
.items-start {
  align-items:  flex-start;
}

.items-end {
  align-items:  flex-end;
}

.items-center {
  align-items:  center;
}

.items-baseline {
  align-items: baseline;
}

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

@media (max-width: 8rem) {
  .items-start-4xs {
    align-items:  flex-start;
  }

  .items-end-4xs {
    align-items:  flex-end;
  }

  .items-center-4xs {
    align-items:  center;
  }

  .items-baseline-4xs {
    align-items: baseline;
  }

  .items-stretch-4xs {
    align-items: stretch;
  }
}

@media (min-width: calc(8rem + .001px)) {
  .items-start-2xs {
    align-items:  flex-start;
  }

  .items-end-2xs {
    align-items:  flex-end;
  }

  .items-center-2xs {
    align-items:  center;
  }

  .items-baseline-2xs {
    align-items: baseline;
  }

  .items-stretch-2xs {
    align-items: stretch;
  }
}

@media (min-width: 20rem) {
  .items-start-xs {
    align-items:  flex-start;
  }

  .items-end-xs {
    align-items:  flex-end;
  }

  .items-center-xs {
    align-items:  center;
  }

  .items-baseline-xs {
    align-items: baseline;
  }

  .items-stretch-xs {
    align-items: stretch;
  }
}

@media (min-width: 32rem) {
  .items-start-s {
    align-items:  flex-start;
  }

  .items-end-s {
    align-items:  flex-end;
  }

  .items-center-s {
    align-items:  center;
  }

  .items-baseline-s {
    align-items: baseline;
  }

  .items-stretch-s {
    align-items: stretch;
  }
}

@media (min-width: 48rem) {
  .items-start-m {
    align-items:  flex-start;
  }

  .items-end-m {
    align-items:  flex-end;
  }

  .items-center-m {
    align-items:  center;
  }

  .items-baseline-m {
    align-items: baseline;
  }

  .items-stretch-m {
    align-items: stretch;
  }
}

@media (min-width: 64rem) {
  .items-start-l {
    align-items:  flex-start;
  }

  .items-end-l {
    align-items:  flex-end;
  }

  .items-center-l {
    align-items:  center;
  }

  .items-baseline-l {
    align-items: baseline;
  }

  .items-stretch-l {
    align-items: stretch;
  }
}

@media (min-width: 100rem) {
  .items-start-xl {
    align-items:  flex-start;
  }

  .items-end-xl {
    align-items:  flex-end;
  }

  .items-center-xl {
    align-items:  center;
  }

  .items-baseline-xl {
    align-items: baseline;
  }

  .items-stretch-xl {
    align-items: stretch;
  }
}

@media (min-width: 130rem) {
  .items-start-2xl {
    align-items:  flex-start;
  }

  .items-end-2xl {
    align-items:  flex-end;
  }

  .items-center-2xl {
    align-items:  center;
  }

  .items-baseline-2xl {
    align-items: baseline;
  }

  .items-stretch-2xl {
    align-items: stretch;
  }
}

@media (min-width: 200rem) {
  .items-start-4xl {
    align-items:  flex-start;
  }

  .items-end-4xl {
    align-items:  flex-end;
  }

  .items-center-4xl {
    align-items:  center;
  }

  .items-baseline-4xl {
    align-items: baseline;
  }

  .items-stretch-4xl {
    align-items: stretch;
  }
}

/* src/align-content.css */
.content-start {
  align-content:  flex-start;
}

.content-end {
  align-content:  flex-end;
}

.content-center {
  align-content:  center;
}

.content-between {
  align-content: space-between;
}

.content-around {
  align-content: space-around;
}

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

@media (max-width: 8rem) {
  .content-start-4xs {
    align-content:  flex-start;
  }

  .content-end-4xs {
    align-content:  flex-end;
  }

  .content-center-4xs {
    align-content:  center;
  }

  .content-between-4xs {
    align-content: space-between;
  }

  .content-around-4xs {
    align-content: space-around;
  }

  .content-stretch-4xs {
    align-content: stretch;
  }
}

@media (min-width: calc(8rem + .001px)) {
  .content-start-2xs {
    align-content:  flex-start;
  }

  .content-end-2xs {
    align-content:  flex-end;
  }

  .content-center-2xs {
    align-content:  center;
  }

  .content-between-2xs {
    align-content: space-between;
  }

  .content-around-2xs {
    align-content: space-around;
  }

  .content-stretch-2xs {
    align-content: stretch;
  }
}

@media (min-width: 20rem) {
  .content-start-xs {
    align-content:  flex-start;
  }

  .content-end-xs {
    align-content:  flex-end;
  }

  .content-center-xs {
    align-content:  center;
  }

  .content-between-xs {
    align-content: space-between;
  }

  .content-around-xs {
    align-content: space-around;
  }

  .content-stretch-xs {
    align-content: stretch;
  }
}

@media (min-width: 32rem) {
  .content-start-s {
    align-content:  flex-start;
  }

  .content-end-s {
    align-content:  flex-end;
  }

  .content-center-s {
    align-content:  center;
  }

  .content-between-s {
    align-content: space-between;
  }

  .content-around-s {
    align-content: space-around;
  }

  .content-stretch-s {
    align-content: stretch;
  }
}

@media (min-width: 48rem) {
  .content-start-m {
    align-content:  flex-start;
  }

  .content-end-m {
    align-content:  flex-end;
  }

  .content-center-m {
    align-content:  center;
  }

  .content-between-m {
    align-content: space-between;
  }

  .content-around-m {
    align-content: space-around;
  }

  .content-stretch-m {
    align-content: stretch;
  }
}

@media (min-width: 64rem) {
  .content-start-l {
    align-content:  flex-start;
  }

  .content-end-l {
    align-content:  flex-end;
  }

  .content-center-l {
    align-content:  center;
  }

  .content-between-l {
    align-content: space-between;
  }

  .content-around-l {
    align-content: space-around;
  }

  .content-stretch-l {
    align-content: stretch;
  }
}

@media (min-width: 100rem) {
  .content-start-xl {
    align-content:  flex-start;
  }

  .content-end-xl {
    align-content:  flex-end;
  }

  .content-center-xl {
    align-content:  center;
  }

  .content-between-xl {
    align-content: space-between;
  }

  .content-around-xl {
    align-content: space-around;
  }

  .content-stretch-xl {
    align-content: stretch;
  }
}

@media (min-width: 130rem) {
  .content-start-2xl {
    align-content:  flex-start;
  }

  .content-end-2xl {
    align-content:  flex-end;
  }

  .content-center-2xl {
    align-content:  center;
  }

  .content-between-2xl {
    align-content: space-between;
  }

  .content-around-2xl {
    align-content: space-around;
  }

  .content-stretch-2xl {
    align-content: stretch;
  }
}

@media (min-width: 200rem) {
  .content-start-4xl {
    align-content:  flex-start;
  }

  .content-end-4xl {
    align-content:  flex-end;
  }

  .content-center-4xl {
    align-content:  center;
  }

  .content-between-4xl {
    align-content: space-between;
  }

  .content-around-4xl {
    align-content: space-around;
  }

  .content-stretch-4xl {
    align-content: stretch;
  }
}

/* src/align-self.css */
.self-anchor-center {
  align-self: anchor-center;
}

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

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

.self-center {
  align-self:  center;
}

.self-baseline {
  align-self: baseline;
}

.self-stretch {
  align-self: stretch;
}

@media (max-width: 8rem) {
  .self-anchor-center-4xs {
    align-self: anchor-center;
  }

  .self-start-4xs {
    align-self:  flex-start;
  }

  .self-end-4xs {
    align-self:  flex-end;
  }

  .self-center-4xs {
    align-self:  center;
  }

  .self-baseline-4xs {
    align-self: baseline;
  }

  .self-stretch-4xs {
    align-self: stretch;
  }
}

@media (min-width: calc(8rem + .001px)) {
  .self-anchor-center-2xs {
    align-self: anchor-center;
  }

  .self-start-2xs {
    align-self:  flex-start;
  }

  .self-end-2xs {
    align-self:  flex-end;
  }

  .self-center-2xs {
    align-self:  center;
  }

  .self-baseline-2xs {
    align-self: baseline;
  }

  .self-stretch-2xs {
    align-self: stretch;
  }
}

@media (min-width: 20rem) {
  .self-anchor-center-xs {
    align-self: anchor-center;
  }

  .self-start-xs {
    align-self:  flex-start;
  }

  .self-end-xs {
    align-self:  flex-end;
  }

  .self-center-xs {
    align-self:  center;
  }

  .self-baseline-xs {
    align-self: baseline;
  }

  .self-stretch-xs {
    align-self: stretch;
  }
}

@media (min-width: 32rem) {
  .self-anchor-center-s {
    align-self: anchor-center;
  }

  .self-start-s {
    align-self:  flex-start;
  }

  .self-end-s {
    align-self:  flex-end;
  }

  .self-center-s {
    align-self:  center;
  }

  .self-baseline-s {
    align-self: baseline;
  }

  .self-stretch-s {
    align-self: stretch;
  }
}

@media (min-width: 48rem) {
  .self-anchor-center-m {
    align-self: anchor-center;
  }

  .self-start-m {
    align-self:  flex-start;
  }

  .self-end-m {
    align-self:  flex-end;
  }

  .self-center-m {
    align-self:  center;
  }

  .self-baseline-m {
    align-self: baseline;
  }

  .self-stretch-m {
    align-self: stretch;
  }
}

@media (min-width: 64rem) {
  .self-anchor-center-l {
    align-self: anchor-center;
  }

  .self-start-l {
    align-self:  flex-start;
  }

  .self-end-l {
    align-self:  flex-end;
  }

  .self-center-l {
    align-self:  center;
  }

  .self-baseline-l {
    align-self: baseline;
  }

  .self-stretch-l {
    align-self: stretch;
  }
}

@media (min-width: 100rem) {
  .self-anchor-center-xl {
    align-self: anchor-center;
  }

  .self-start-xl {
    align-self:  flex-start;
  }

  .self-end-xl {
    align-self:  flex-end;
  }

  .self-center-xl {
    align-self:  center;
  }

  .self-baseline-xl {
    align-self: baseline;
  }

  .self-stretch-xl {
    align-self: stretch;
  }
}

@media (min-width: 130rem) {
  .self-anchor-center-2xl {
    align-self: anchor-center;
  }

  .self-start-2xl {
    align-self:  flex-start;
  }

  .self-end-2xl {
    align-self:  flex-end;
  }

  .self-center-2xl {
    align-self:  center;
  }

  .self-baseline-2xl {
    align-self: baseline;
  }

  .self-stretch-2xl {
    align-self: stretch;
  }
}

@media (min-width: 200rem) {
  .self-anchor-center-4xl {
    align-self: anchor-center;
  }

  .self-start-4xl {
    align-self:  flex-start;
  }

  .self-end-4xl {
    align-self:  flex-end;
  }

  .self-center-4xl {
    align-self:  center;
  }

  .self-baseline-4xl {
    align-self: baseline;
  }

  .self-stretch-4xl {
    align-self: stretch;
  }
}

/* src/justify-self.css */
.justify-self-start {
  justify-self: start;
}

.justify-self-end {
  justify-self: end;
}

.justify-self-center {
  justify-self: center;
}

.justify-self-stretch {
  justify-self: stretch;
}

@media (max-width: 8rem) {
  .justify-self-start-4xs {
    justify-self: start;
  }

  .justify-self-end-4xs {
    justify-self: end;
  }

  .justify-self-center-4xs {
    justify-self: center;
  }

  .justify-self-stretch-4xs {
    justify-self: stretch;
  }
}

@media (min-width: calc(8rem + .001px)) {
  .justify-self-start-2xs {
    justify-self: start;
  }

  .justify-self-end-2xs {
    justify-self: end;
  }

  .justify-self-center-2xs {
    justify-self: center;
  }

  .justify-self-stretch-2xs {
    justify-self: stretch;
  }
}

@media (min-width: 20rem) {
  .justify-self-start-xs {
    justify-self: start;
  }

  .justify-self-end-xs {
    justify-self: end;
  }

  .justify-self-center-xs {
    justify-self: center;
  }

  .justify-self-stretch-xs {
    justify-self: stretch;
  }
}

@media (min-width: 32rem) {
  .justify-self-start-s {
    justify-self: start;
  }

  .justify-self-end-s {
    justify-self: end;
  }

  .justify-self-center-s {
    justify-self: center;
  }

  .justify-self-stretch-s {
    justify-self: stretch;
  }
}

@media (min-width: 48rem) {
  .justify-self-start-m {
    justify-self: start;
  }

  .justify-self-end-m {
    justify-self: end;
  }

  .justify-self-center-m {
    justify-self: center;
  }

  .justify-self-stretch-m {
    justify-self: stretch;
  }
}

@media (min-width: 64rem) {
  .justify-self-start-l {
    justify-self: start;
  }

  .justify-self-end-l {
    justify-self: end;
  }

  .justify-self-center-l {
    justify-self: center;
  }

  .justify-self-stretch-l {
    justify-self: stretch;
  }
}

@media (min-width: 100rem) {
  .justify-self-start-xl {
    justify-self: start;
  }

  .justify-self-end-xl {
    justify-self: end;
  }

  .justify-self-center-xl {
    justify-self: center;
  }

  .justify-self-stretch-xl {
    justify-self: stretch;
  }
}

@media (min-width: 130rem) {
  .justify-self-start-2xl {
    justify-self: start;
  }

  .justify-self-end-2xl {
    justify-self: end;
  }

  .justify-self-center-2xl {
    justify-self: center;
  }

  .justify-self-stretch-2xl {
    justify-self: stretch;
  }
}

@media (min-width: 200rem) {
  .justify-self-start-4xl {
    justify-self: start;
  }

  .justify-self-end-4xl {
    justify-self: end;
  }

  .justify-self-center-4xl {
    justify-self: center;
  }

  .justify-self-stretch-4xl {
    justify-self: stretch;
  }
}

/* src/justify-content.css */
.justify-start {
  justify-content: flex-start;
}

.justify-end {
  justify-content: flex-end;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.justify-around {
  justify-content: space-around;
}

@media (max-width: 8rem) {
  .justify-start-4xs {
    justify-content: flex-start;
  }

  .justify-end-4xs {
    justify-content: flex-end;
  }

  .justify-center-4xs {
    justify-content: center;
  }

  .justify-between-4xs {
    justify-content: space-between;
  }

  .justify-around-4xs {
    justify-content: space-around;
  }
}

@media (min-width: calc(8rem + .001px)) {
  .justify-start-2xs {
    justify-content: flex-start;
  }

  .justify-end-2xs {
    justify-content: flex-end;
  }

  .justify-center-2xs {
    justify-content: center;
  }

  .justify-between-2xs {
    justify-content: space-between;
  }

  .justify-around-2xs {
    justify-content: space-around;
  }
}

@media (min-width: 20rem) {
  .justify-start-xs {
    justify-content: flex-start;
  }

  .justify-end-xs {
    justify-content: flex-end;
  }

  .justify-center-xs {
    justify-content: center;
  }

  .justify-between-xs {
    justify-content: space-between;
  }

  .justify-around-xs {
    justify-content: space-around;
  }
}

@media (min-width: 32rem) {
  .justify-start-s {
    justify-content: flex-start;
  }

  .justify-end-s {
    justify-content: flex-end;
  }

  .justify-center-s {
    justify-content: center;
  }

  .justify-between-s {
    justify-content: space-between;
  }

  .justify-around-s {
    justify-content: space-around;
  }
}

@media (min-width: 48rem) {
  .justify-start-m {
    justify-content: flex-start;
  }

  .justify-end-m {
    justify-content: flex-end;
  }

  .justify-center-m {
    justify-content: center;
  }

  .justify-between-m {
    justify-content: space-between;
  }

  .justify-around-m {
    justify-content: space-around;
  }
}

@media (min-width: 64rem) {
  .justify-start-l {
    justify-content: flex-start;
  }

  .justify-end-l {
    justify-content: flex-end;
  }

  .justify-center-l {
    justify-content: center;
  }

  .justify-between-l {
    justify-content: space-between;
  }

  .justify-around-l {
    justify-content: space-around;
  }
}

@media (min-width: 100rem) {
  .justify-start-xl {
    justify-content: flex-start;
  }

  .justify-end-xl {
    justify-content: flex-end;
  }

  .justify-center-xl {
    justify-content: center;
  }

  .justify-between-xl {
    justify-content: space-between;
  }

  .justify-around-xl {
    justify-content: space-around;
  }
}

@media (min-width: 130rem) {
  .justify-start-2xl {
    justify-content: flex-start;
  }

  .justify-end-2xl {
    justify-content: flex-end;
  }

  .justify-center-2xl {
    justify-content: center;
  }

  .justify-between-2xl {
    justify-content: space-between;
  }

  .justify-around-2xl {
    justify-content: space-around;
  }
}

@media (min-width: 200rem) {
  .justify-start-4xl {
    justify-content: flex-start;
  }

  .justify-end-4xl {
    justify-content: flex-end;
  }

  .justify-center-4xl {
    justify-content: center;
  }

  .justify-between-4xl {
    justify-content: space-between;
  }

  .justify-around-4xl {
    justify-content: space-around;
  }
}

/* src/order.css */
.order-0 {
  order: 0;
}

.order-1 {
  order: 1;
}

.order-2 {
  order: 2;
}

.order-3 {
  order: 3;
}

.order-4 {
  order: 4;
}

.order-5 {
  order: 5;
}

.order-6 {
  order: 6;
}

.order-7 {
  order: 7;
}

.order-8 {
  order: 8;
}

.order-last {
  order: 99999;
}

@media (max-width: 8rem) {
  .order-0-4xs {
    order: 0;
  }

  .order-1-4xs {
    order: 1;
  }

  .order-2-4xs {
    order: 2;
  }

  .order-3-4xs {
    order: 3;
  }

  .order-4-4xs {
    order: 4;
  }

  .order-5-4xs {
    order: 5;
  }

  .order-6-4xs {
    order: 6;
  }

  .order-7-4xs {
    order: 7;
  }

  .order-8-4xs {
    order: 8;
  }

  .order-last-4xs {
    order: 99999;
  }
}

@media (min-width: calc(8rem + .001px)) {
  .order-0-2xs {
    order: 0;
  }

  .order-1-2xs {
    order: 1;
  }

  .order-2-2xs {
    order: 2;
  }

  .order-3-2xs {
    order: 3;
  }

  .order-4-2xs {
    order: 4;
  }

  .order-5-2xs {
    order: 5;
  }

  .order-6-2xs {
    order: 6;
  }

  .order-7-2xs {
    order: 7;
  }

  .order-8-2xs {
    order: 8;
  }

  .order-last-2xs {
    order: 99999;
  }
}

@media (min-width: 20rem) {
  .order-0-xs {
    order: 0;
  }

  .order-1-xs {
    order: 1;
  }

  .order-2-xs {
    order: 2;
  }

  .order-3-xs {
    order: 3;
  }

  .order-4-xs {
    order: 4;
  }

  .order-5-xs {
    order: 5;
  }

  .order-6-xs {
    order: 6;
  }

  .order-7-xs {
    order: 7;
  }

  .order-8-xs {
    order: 8;
  }

  .order-last-xs {
    order: 99999;
  }
}

@media (min-width: 32rem) {
  .order-0-s {
    order: 0;
  }

  .order-1-s {
    order: 1;
  }

  .order-2-s {
    order: 2;
  }

  .order-3-s {
    order: 3;
  }

  .order-4-s {
    order: 4;
  }

  .order-5-s {
    order: 5;
  }

  .order-6-s {
    order: 6;
  }

  .order-7-s {
    order: 7;
  }

  .order-8-s {
    order: 8;
  }

  .order-last-s {
    order: 99999;
  }
}

@media (min-width: 48rem) {
  .order-0-m {
    order: 0;
  }

  .order-1-m {
    order: 1;
  }

  .order-2-m {
    order: 2;
  }

  .order-3-m {
    order: 3;
  }

  .order-4-m {
    order: 4;
  }

  .order-5-m {
    order: 5;
  }

  .order-6-m {
    order: 6;
  }

  .order-7-m {
    order: 7;
  }

  .order-8-m {
    order: 8;
  }

  .order-last-m {
    order: 99999;
  }
}

@media (min-width: 64rem) {
  .order-0-l {
    order: 0;
  }

  .order-1-l {
    order: 1;
  }

  .order-2-l {
    order: 2;
  }

  .order-3-l {
    order: 3;
  }

  .order-4-l {
    order: 4;
  }

  .order-5-l {
    order: 5;
  }

  .order-6-l {
    order: 6;
  }

  .order-7-l {
    order: 7;
  }

  .order-8-l {
    order: 8;
  }

  .order-last-l {
    order: 99999;
  }
}

@media (min-width: 100rem) {
  .order-0-xl {
    order: 0;
  }

  .order-1-xl {
    order: 1;
  }

  .order-2-xl {
    order: 2;
  }

  .order-3-xl {
    order: 3;
  }

  .order-4-xl {
    order: 4;
  }

  .order-5-xl {
    order: 5;
  }

  .order-6-xl {
    order: 6;
  }

  .order-7-xl {
    order: 7;
  }

  .order-8-xl {
    order: 8;
  }

  .order-last-xl {
    order: 99999;
  }
}

@media (min-width: 130rem) {
  .order-0-2xl {
    order: 0;
  }

  .order-1-2xl {
    order: 1;
  }

  .order-2-2xl {
    order: 2;
  }

  .order-3-2xl {
    order: 3;
  }

  .order-4-2xl {
    order: 4;
  }

  .order-5-2xl {
    order: 5;
  }

  .order-6-2xl {
    order: 6;
  }

  .order-7-2xl {
    order: 7;
  }

  .order-8-2xl {
    order: 8;
  }

  .order-last-2xl {
    order: 99999;
  }
}

@media (min-width: 200rem) {
  .order-0-4xl {
    order: 0;
  }

  .order-1-4xl {
    order: 1;
  }

  .order-2-4xl {
    order: 2;
  }

  .order-3-4xl {
    order: 3;
  }

  .order-4-4xl {
    order: 4;
  }

  .order-5-4xl {
    order: 5;
  }

  .order-6-4xl {
    order: 6;
  }

  .order-7-4xl {
    order: 7;
  }

  .order-8-4xl {
    order: 8;
  }

  .order-last-4xl {
    order: 99999;
  }
}

/* src/floats.css */
.fl {
  float: left;
}

.fr {
  float: right;
}

.fn {
  float: none;
}

@media (max-width: 8rem) {
  .fl-4xs {
    float: left;
  }

  .fr-4xs {
    float: right;
  }

  .fn-4xs {
    float: none;
  }
}

@media (min-width: calc(8rem + .001px)) {
  .fl-2xs {
    float: left;
  }

  .fr-2xs {
    float: right;
  }

  .fn-2xs {
    float: none;
  }
}

@media (min-width: 20rem) {
  .fl-xs {
    float: left;
  }

  .fr-xs {
    float: right;
  }

  .fn-xs {
    float: none;
  }
}

@media (min-width: 32rem) {
  .fl-s {
    float: left;
  }

  .fr-s {
    float: right;
  }

  .fn-s {
    float: none;
  }
}

@media (min-width: 48rem) {
  .fl-m {
    float: left;
  }

  .fr-m {
    float: right;
  }

  .fn-m {
    float: none;
  }
}

@media (min-width: 64rem) {
  .fl-l {
    float: left;
  }

  .fr-l {
    float: right;
  }

  .fn-l {
    float: none;
  }
}

@media (min-width: 100rem) {
  .fl-xl {
    float: left;
  }

  .fr-xl {
    float: right;
  }

  .fn-xl {
    float: none;
  }
}

@media (min-width: 130rem) {
  .fl-2xl {
    float: left;
  }

  .fr-2xl {
    float: right;
  }

  .fn-2xl {
    float: none;
  }
}

@media (min-width: 200rem) {
  .fl-4xl {
    float: left;
  }

  .fr-4xl {
    float: right;
  }

  .fn-4xl {
    float: none;
  }
}

/* src/font-family.css */
.f-heading {
  font-family: var(--font-family-heading, sans-serif);
}

.f-body {
  font-family: var(--font-family-body, sans-serif);
}

.f-mono {
  font-family: var(--font-family-mono, monospace);
}

/* src/font-style.css */
.i {
  font-style: italic;
}

.fs-normal {
  font-style: normal;
}

/* src/font-variant.css */
.tabular-nums {
  font-variant-numeric: tabular-nums;
}

/* src/font-weight.css */
.normal, .normal-hover:hover {
  font-weight: normal;
}

.bold, .bold-hover:hover {
  font-weight: bold;
}

.fw-1, .fw-1-hover:hover {
  font-weight: 100;
}

.fw-2, .fw-2-hover:hover {
  font-weight: 200;
}

.fw-3, .fw-3-hover:hover {
  font-weight: 300;
}

.fw-4, .fw-4-hover:hover {
  font-weight: 400;
}

.fw-5, .fw-5-hover:hover {
  font-weight: 500;
}

.fw-6, .fw-6-hover:hover {
  font-weight: 600;
}

.fw-7, .fw-7-hover:hover {
  font-weight: 700;
}

.fw-8, .fw-8-hover:hover {
  font-weight: 800;
}

.fw-9, .fw-9-hover:hover {
  font-weight: 900;
}

@media (max-width: 8rem) {
  .normal-4xs, .normal-4xs-hover:hover {
    font-weight: normal;
  }

  .bold-4xs, .bold-4xs-hover:hover {
    font-weight: bold;
  }

  .fw-1-4xs, .fw-1-4xs-hover:hover {
    font-weight: 100;
  }

  .fw-2-4xs, .fw-2-4xs-hover:hover {
    font-weight: 200;
  }

  .fw-3-4xs, .fw-3-4xs-hover:hover {
    font-weight: 300;
  }

  .fw-4-4xs, .fw-4-4xs-hover:hover {
    font-weight: 400;
  }

  .fw-5-4xs, .fw-5-4xs-hover:hover {
    font-weight: 500;
  }

  .fw-6-4xs, .fw-6-4xs-hover:hover {
    font-weight: 600;
  }

  .fw-7-4xs, .fw-7-4xs-hover:hover {
    font-weight: 700;
  }

  .fw-8-4xs, .fw-8-4xs-hover:hover {
    font-weight: 800;
  }

  .fw-9-4xs, .fw-9-4xs-hover:hover {
    font-weight: 900;
  }
}

@media (min-width: calc(8rem + .001px)) {
  .normal-2xs, .normal-2xs-hover:hover {
    font-weight: normal;
  }

  .bold-2xs, .bold-2xs-hover:hover {
    font-weight: bold;
  }

  .fw-1-2xs, .fw-1-2xs-hover:hover {
    font-weight: 100;
  }

  .fw-2-2xs, .fw-2-2xs-hover:hover {
    font-weight: 200;
  }

  .fw-3-2xs, .fw-3-2xs-hover:hover {
    font-weight: 300;
  }

  .fw-4-2xs, .fw-4-2xs-hover:hover {
    font-weight: 400;
  }

  .fw-5-2xs, .fw-5-2xs-hover:hover {
    font-weight: 500;
  }

  .fw-6-2xs, .fw-6-2xs-hover:hover {
    font-weight: 600;
  }

  .fw-7-2xs, .fw-7-2xs-hover:hover {
    font-weight: 700;
  }

  .fw-8-2xs, .fw-8-2xs-hover:hover {
    font-weight: 800;
  }

  .fw-9-2xs, .fw-9-2xs-hover:hover {
    font-weight: 900;
  }
}

@media (min-width: 20rem) {
  .normal-xs, .normal-xs-hover:hover {
    font-weight: normal;
  }

  .bold-xs, .bold-xs-hover:hover {
    font-weight: bold;
  }

  .fw-1-xs, .fw-1-xs-hover:hover {
    font-weight: 100;
  }

  .fw-2-xs, .fw-2-xs-hover:hover {
    font-weight: 200;
  }

  .fw-3-xs, .fw-3-xs-hover:hover {
    font-weight: 300;
  }

  .fw-4-xs, .fw-4-xs-hover:hover {
    font-weight: 400;
  }

  .fw-5-xs, .fw-5-xs-hover:hover {
    font-weight: 500;
  }

  .fw-6-xs, .fw-6-xs-hover:hover {
    font-weight: 600;
  }

  .fw-7-xs, .fw-7-xs-hover:hover {
    font-weight: 700;
  }

  .fw-8-xs, .fw-8-xs-hover:hover {
    font-weight: 800;
  }

  .fw-9-xs, .fw-9-xs-hover:hover {
    font-weight: 900;
  }
}

@media (min-width: 32rem) {
  .normal-s, .normal-s-hover:hover {
    font-weight: normal;
  }

  .bold-s, .bold-s-hover:hover {
    font-weight: bold;
  }

  .fw-1-s, .fw-1-s-hover:hover {
    font-weight: 100;
  }

  .fw-2-s, .fw-2-s-hover:hover {
    font-weight: 200;
  }

  .fw-3-s, .fw-3-s-hover:hover {
    font-weight: 300;
  }

  .fw-4-s, .fw-4-s-hover:hover {
    font-weight: 400;
  }

  .fw-5-s, .fw-5-s-hover:hover {
    font-weight: 500;
  }

  .fw-6-s, .fw-6-s-hover:hover {
    font-weight: 600;
  }

  .fw-7-s, .fw-7-s-hover:hover {
    font-weight: 700;
  }

  .fw-8-s, .fw-8-s-hover:hover {
    font-weight: 800;
  }

  .fw-9-s, .fw-9-s-hover:hover {
    font-weight: 900;
  }
}

@media (min-width: 48rem) {
  .normal-m, .normal-m-hover:hover {
    font-weight: normal;
  }

  .bold-m, .bold-m-hover:hover {
    font-weight: bold;
  }

  .fw-1-m, .fw-1-m-hover:hover {
    font-weight: 100;
  }

  .fw-2-m, .fw-2-m-hover:hover {
    font-weight: 200;
  }

  .fw-3-m, .fw-3-m-hover:hover {
    font-weight: 300;
  }

  .fw-4-m, .fw-4-m-hover:hover {
    font-weight: 400;
  }

  .fw-5-m, .fw-5-m-hover:hover {
    font-weight: 500;
  }

  .fw-6-m, .fw-6-m-hover:hover {
    font-weight: 600;
  }

  .fw-7-m, .fw-7-m-hover:hover {
    font-weight: 700;
  }

  .fw-8-m, .fw-8-m-hover:hover {
    font-weight: 800;
  }

  .fw-9-m, .fw-9-m-hover:hover {
    font-weight: 900;
  }
}

@media (min-width: 64rem) {
  .normal-l, .normal-l-hover:hover {
    font-weight: normal;
  }

  .bold-l, .bold-l-hover:hover {
    font-weight: bold;
  }

  .fw-1-l, .fw-1-l-hover:hover {
    font-weight: 100;
  }

  .fw-2-l, .fw-2-l-hover:hover {
    font-weight: 200;
  }

  .fw-3-l, .fw-3-l-hover:hover {
    font-weight: 300;
  }

  .fw-4-l, .fw-4-l-hover:hover {
    font-weight: 400;
  }

  .fw-5-l, .fw-5-l-hover:hover {
    font-weight: 500;
  }

  .fw-6-l, .fw-6-l-hover:hover {
    font-weight: 600;
  }

  .fw-7-l, .fw-7-l-hover:hover {
    font-weight: 700;
  }

  .fw-8-l, .fw-8-l-hover:hover {
    font-weight: 800;
  }

  .fw-9-l, .fw-9-l-hover:hover {
    font-weight: 900;
  }
}

@media (min-width: 100rem) {
  .normal-xl, .normal-xl-hover:hover {
    font-weight: normal;
  }

  .bold-xl, .bold-xl-hover:hover {
    font-weight: bold;
  }

  .fw-1-xl, .fw-1-xl-hover:hover {
    font-weight: 100;
  }

  .fw-2-xl, .fw-2-xl-hover:hover {
    font-weight: 200;
  }

  .fw-3-xl, .fw-3-xl-hover:hover {
    font-weight: 300;
  }

  .fw-4-xl, .fw-4-xl-hover:hover {
    font-weight: 400;
  }

  .fw-5-xl, .fw-5-xl-hover:hover {
    font-weight: 500;
  }

  .fw-6-xl, .fw-6-xl-hover:hover {
    font-weight: 600;
  }

  .fw-7-xl, .fw-7-xl-hover:hover {
    font-weight: 700;
  }

  .fw-8-xl, .fw-8-xl-hover:hover {
    font-weight: 800;
  }

  .fw-9-xl, .fw-9-xl-hover:hover {
    font-weight: 900;
  }
}

@media (min-width: 130rem) {
  .normal-2xl, .normal-2xl-hover:hover {
    font-weight: normal;
  }

  .bold-2xl, .bold-2xl-hover:hover {
    font-weight: bold;
  }

  .fw-1-2xl, .fw-1-2xl-hover:hover {
    font-weight: 100;
  }

  .fw-2-2xl, .fw-2-2xl-hover:hover {
    font-weight: 200;
  }

  .fw-3-2xl, .fw-3-2xl-hover:hover {
    font-weight: 300;
  }

  .fw-4-2xl, .fw-4-2xl-hover:hover {
    font-weight: 400;
  }

  .fw-5-2xl, .fw-5-2xl-hover:hover {
    font-weight: 500;
  }

  .fw-6-2xl, .fw-6-2xl-hover:hover {
    font-weight: 600;
  }

  .fw-7-2xl, .fw-7-2xl-hover:hover {
    font-weight: 700;
  }

  .fw-8-2xl, .fw-8-2xl-hover:hover {
    font-weight: 800;
  }

  .fw-9-2xl, .fw-9-2xl-hover:hover {
    font-weight: 900;
  }
}

@media (min-width: 200rem) {
  .normal-4xl, .normal-4xl-hover:hover {
    font-weight: normal;
  }

  .bold-4xl, .bold-4xl-hover:hover {
    font-weight: bold;
  }

  .fw-1-4xl, .fw-1-4xl-hover:hover {
    font-weight: 100;
  }

  .fw-2-4xl, .fw-2-4xl-hover:hover {
    font-weight: 200;
  }

  .fw-3-4xl, .fw-3-4xl-hover:hover {
    font-weight: 300;
  }

  .fw-4-4xl, .fw-4-4xl-hover:hover {
    font-weight: 400;
  }

  .fw-5-4xl, .fw-5-4xl-hover:hover {
    font-weight: 500;
  }

  .fw-6-4xl, .fw-6-4xl-hover:hover {
    font-weight: 600;
  }

  .fw-7-4xl, .fw-7-4xl-hover:hover {
    font-weight: 700;
  }

  .fw-8-4xl, .fw-8-4xl-hover:hover {
    font-weight: 800;
  }

  .fw-9-4xl, .fw-9-4xl-hover:hover {
    font-weight: 900;
  }
}

/* src/forms.css */
.input-reset {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.button-reset::-moz-focus-inner {
  border: 0;
  padding: 0;
}

.input-reset::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/* src/heights.css */
.h0 {
  height: 0;
}

.h1 {
  height: var(--size-1, 1rem);
}

.h2 {
  height: var(--size-2, 2rem);
}

.h3 {
  height: var(--size-3, 3rem);
}

.h4 {
  height: var(--size-4, 4rem);
}

.h5 {
  height: var(--size-5, 8rem);
}

.h6 {
  height: var(--size-6, 16rem);
}

.h7 {
  height: var(--size-7, 32rem);
}

.h8 {
  height: var(--size-8, 64rem);
}

.h-50 {
  height: 50%;
}

.h-75 {
  height: 75%;
}

.h-100 {
  height: 100%;
}

.min-h-100 {
  min-height: 100%;
}

.vh-25 {
  height: 25vh;
}

.vh-50 {
  height: 50vh;
}

.vh-75 {
  height: 75vh;
}

.vh-100 {
  height: 100vh;
}

.min-vh-100 {
  min-height: 100vh;
}

.h-auto {
  height: auto;
}

.h-inherit {
  height: inherit;
}

.h-fit {
  height: -moz-fit-content;
  height: fit-content;
}

.h-stretch {
  height: -webkit-fill-available;
  height: -moz-available;
  height: stretch;
}

@media (max-width: 8rem) {
  .h0-4xs {
    height: 0;
  }

  .h1-4xs {
    height: var(--size-1, 1rem);
  }

  .h2-4xs {
    height: var(--size-2, 2rem);
  }

  .h3-4xs {
    height: var(--size-3, 3rem);
  }

  .h4-4xs {
    height: var(--size-4, 4rem);
  }

  .h5-4xs {
    height: var(--size-5, 8rem);
  }

  .h6-4xs {
    height: var(--size-6, 16rem);
  }

  .h7-4xs {
    height: var(--size-7, 32rem);
  }

  .h8-4xs {
    height: var(--size-8, 64rem);
  }

  .h-50-4xs {
    height: 50%;
  }

  .h-75-4xs {
    height: 75%;
  }

  .h-100-4xs {
    height: 100%;
  }

  .min-h-100-4xs {
    min-height: 100%;
  }

  .vh-25-4xs {
    height: 25vh;
  }

  .vh-50-4xs {
    height: 50vh;
  }

  .vh-75-4xs {
    height: 75vh;
  }

  .vh-100-4xs {
    height: 100vh;
  }

  .min-vh-100-4xs {
    min-height: 100vh;
  }

  .h-auto-4xs {
    height: auto;
  }

  .h-inherit-4xs {
    height: inherit;
  }

  .h-fit-4xs {
    height: -moz-fit-content;
    height: fit-content;
  }

  .h-stretch-4xs {
    height: -webkit-fill-available;
    height: -moz-available;
    height: stretch;
  }
}

@media (min-width: calc(8rem + .001px)) {
  .h0-2xs {
    height: 0;
  }

  .h1-2xs {
    height: var(--size-1, 1rem);
  }

  .h2-2xs {
    height: var(--size-2, 2rem);
  }

  .h3-2xs {
    height: var(--size-3, 3rem);
  }

  .h4-2xs {
    height: var(--size-4, 4rem);
  }

  .h5-2xs {
    height: var(--size-5, 8rem);
  }

  .h6-2xs {
    height: var(--size-6, 16rem);
  }

  .h7-2xs {
    height: var(--size-7, 32rem);
  }

  .h8-2xs {
    height: var(--size-8, 64rem);
  }

  .h-50-2xs {
    height: 50%;
  }

  .h-75-2xs {
    height: 75%;
  }

  .h-100-2xs {
    height: 100%;
  }

  .min-h-100-2xs {
    min-height: 100%;
  }

  .vh-25-2xs {
    height: 25vh;
  }

  .vh-50-2xs {
    height: 50vh;
  }

  .vh-75-2xs {
    height: 75vh;
  }

  .vh-100-2xs {
    height: 100vh;
  }

  .min-vh-100-2xs {
    min-height: 100vh;
  }

  .h-auto-2xs {
    height: auto;
  }

  .h-inherit-2xs {
    height: inherit;
  }

  .h-fit-2xs {
    height: -moz-fit-content;
    height: fit-content;
  }

  .h-stretch-2xs {
    height: -webkit-fill-available;
    height: -moz-available;
    height: stretch;
  }
}

@media (min-width: 20rem) {
  .h0-xs {
    height: 0;
  }

  .h1-xs {
    height: var(--size-1, 1rem);
  }

  .h2-xs {
    height: var(--size-2, 2rem);
  }

  .h3-xs {
    height: var(--size-3, 3rem);
  }

  .h4-xs {
    height: var(--size-4, 4rem);
  }

  .h5-xs {
    height: var(--size-5, 8rem);
  }

  .h6-xs {
    height: var(--size-6, 16rem);
  }

  .h7-xs {
    height: var(--size-7, 32rem);
  }

  .h8-xs {
    height: var(--size-8, 64rem);
  }

  .h-50-xs {
    height: 50%;
  }

  .h-75-xs {
    height: 75%;
  }

  .h-100-xs {
    height: 100%;
  }

  .min-h-100-xs {
    min-height: 100%;
  }

  .vh-25-xs {
    height: 25vh;
  }

  .vh-50-xs {
    height: 50vh;
  }

  .vh-75-xs {
    height: 75vh;
  }

  .vh-100-xs {
    height: 100vh;
  }

  .min-vh-100-xs {
    min-height: 100vh;
  }

  .h-auto-xs {
    height: auto;
  }

  .h-inherit-xs {
    height: inherit;
  }

  .h-fit-xs {
    height: -moz-fit-content;
    height: fit-content;
  }

  .h-stretch-xs {
    height: -webkit-fill-available;
    height: -moz-available;
    height: stretch;
  }
}

@media (min-width: 32rem) {
  .h0-s {
    height: 0;
  }

  .h1-s {
    height: var(--size-1, 1rem);
  }

  .h2-s {
    height: var(--size-2, 2rem);
  }

  .h3-s {
    height: var(--size-3, 3rem);
  }

  .h4-s {
    height: var(--size-4, 4rem);
  }

  .h5-s {
    height: var(--size-5, 8rem);
  }

  .h6-s {
    height: var(--size-6, 16rem);
  }

  .h7-s {
    height: var(--size-7, 32rem);
  }

  .h8-s {
    height: var(--size-8, 64rem);
  }

  .h-50-s {
    height: 50%;
  }

  .h-75-s {
    height: 75%;
  }

  .h-100-s {
    height: 100%;
  }

  .min-h-100-s {
    min-height: 100%;
  }

  .vh-25-s {
    height: 25vh;
  }

  .vh-50-s {
    height: 50vh;
  }

  .vh-75-s {
    height: 75vh;
  }

  .vh-100-s {
    height: 100vh;
  }

  .min-vh-100-s {
    min-height: 100vh;
  }

  .h-auto-s {
    height: auto;
  }

  .h-inherit-s {
    height: inherit;
  }

  .h-fit-s {
    height: -moz-fit-content;
    height: fit-content;
  }

  .h-stretch-s {
    height: -webkit-fill-available;
    height: -moz-available;
    height: stretch;
  }
}

@media (min-width: 48rem) {
  .h0-m {
    height: 0;
  }

  .h1-m {
    height: var(--size-1, 1rem);
  }

  .h2-m {
    height: var(--size-2, 2rem);
  }

  .h3-m {
    height: var(--size-3, 3rem);
  }

  .h4-m {
    height: var(--size-4, 4rem);
  }

  .h5-m {
    height: var(--size-5, 8rem);
  }

  .h6-m {
    height: var(--size-6, 16rem);
  }

  .h7-m {
    height: var(--size-7, 32rem);
  }

  .h8-m {
    height: var(--size-8, 64rem);
  }

  .h-50-m {
    height: 50%;
  }

  .h-75-m {
    height: 75%;
  }

  .h-100-m {
    height: 100%;
  }

  .min-h-100-m {
    min-height: 100%;
  }

  .vh-25-m {
    height: 25vh;
  }

  .vh-50-m {
    height: 50vh;
  }

  .vh-75-m {
    height: 75vh;
  }

  .vh-100-m {
    height: 100vh;
  }

  .min-vh-100-m {
    min-height: 100vh;
  }

  .h-auto-m {
    height: auto;
  }

  .h-inherit-m {
    height: inherit;
  }

  .h-fit-m {
    height: -moz-fit-content;
    height: fit-content;
  }

  .h-stretch-m {
    height: -webkit-fill-available;
    height: -moz-available;
    height: stretch;
  }
}

@media (min-width: 64rem) {
  .h0-l {
    height: 0;
  }

  .h1-l {
    height: var(--size-1, 1rem);
  }

  .h2-l {
    height: var(--size-2, 2rem);
  }

  .h3-l {
    height: var(--size-3, 3rem);
  }

  .h4-l {
    height: var(--size-4, 4rem);
  }

  .h5-l {
    height: var(--size-5, 8rem);
  }

  .h6-l {
    height: var(--size-6, 16rem);
  }

  .h7-l {
    height: var(--size-7, 32rem);
  }

  .h8-l {
    height: var(--size-8, 64rem);
  }

  .h-50-l {
    height: 50%;
  }

  .h-75-l {
    height: 75%;
  }

  .h-100-l {
    height: 100%;
  }

  .min-h-100-l {
    min-height: 100%;
  }

  .vh-25-l {
    height: 25vh;
  }

  .vh-50-l {
    height: 50vh;
  }

  .vh-75-l {
    height: 75vh;
  }

  .vh-100-l {
    height: 100vh;
  }

  .min-vh-100-l {
    min-height: 100vh;
  }

  .h-auto-l {
    height: auto;
  }

  .h-inherit-l {
    height: inherit;
  }

  .h-fit-l {
    height: -moz-fit-content;
    height: fit-content;
  }

  .h-stretch-l {
    height: -webkit-fill-available;
    height: -moz-available;
    height: stretch;
  }
}

@media (min-width: 100rem) {
  .h0-xl {
    height: 0;
  }

  .h1-xl {
    height: var(--size-1, 1rem);
  }

  .h2-xl {
    height: var(--size-2, 2rem);
  }

  .h3-xl {
    height: var(--size-3, 3rem);
  }

  .h4-xl {
    height: var(--size-4, 4rem);
  }

  .h5-xl {
    height: var(--size-5, 8rem);
  }

  .h6-xl {
    height: var(--size-6, 16rem);
  }

  .h7-xl {
    height: var(--size-7, 32rem);
  }

  .h8-xl {
    height: var(--size-8, 64rem);
  }

  .h-50-xl {
    height: 50%;
  }

  .h-75-xl {
    height: 75%;
  }

  .h-100-xl {
    height: 100%;
  }

  .min-h-100-xl {
    min-height: 100%;
  }

  .vh-25-xl {
    height: 25vh;
  }

  .vh-50-xl {
    height: 50vh;
  }

  .vh-75-xl {
    height: 75vh;
  }

  .vh-100-xl {
    height: 100vh;
  }

  .min-vh-100-xl {
    min-height: 100vh;
  }

  .h-auto-xl {
    height: auto;
  }

  .h-inherit-xl {
    height: inherit;
  }

  .h-fit-xl {
    height: -moz-fit-content;
    height: fit-content;
  }

  .h-stretch-xl {
    height: -webkit-fill-available;
    height: -moz-available;
    height: stretch;
  }
}

@media (min-width: 130rem) {
  .h0-2xl {
    height: 0;
  }

  .h1-2xl {
    height: var(--size-1, 1rem);
  }

  .h2-2xl {
    height: var(--size-2, 2rem);
  }

  .h3-2xl {
    height: var(--size-3, 3rem);
  }

  .h4-2xl {
    height: var(--size-4, 4rem);
  }

  .h5-2xl {
    height: var(--size-5, 8rem);
  }

  .h6-2xl {
    height: var(--size-6, 16rem);
  }

  .h7-2xl {
    height: var(--size-7, 32rem);
  }

  .h8-2xl {
    height: var(--size-8, 64rem);
  }

  .h-50-2xl {
    height: 50%;
  }

  .h-75-2xl {
    height: 75%;
  }

  .h-100-2xl {
    height: 100%;
  }

  .min-h-100-2xl {
    min-height: 100%;
  }

  .vh-25-2xl {
    height: 25vh;
  }

  .vh-50-2xl {
    height: 50vh;
  }

  .vh-75-2xl {
    height: 75vh;
  }

  .vh-100-2xl {
    height: 100vh;
  }

  .min-vh-100-2xl {
    min-height: 100vh;
  }

  .h-auto-2xl {
    height: auto;
  }

  .h-inherit-2xl {
    height: inherit;
  }

  .h-fit-2xl {
    height: -moz-fit-content;
    height: fit-content;
  }

  .h-stretch-2xl {
    height: -webkit-fill-available;
    height: -moz-available;
    height: stretch;
  }
}

@media (min-width: 200rem) {
  .h0-4xl {
    height: 0;
  }

  .h1-4xl {
    height: var(--size-1, 1rem);
  }

  .h2-4xl {
    height: var(--size-2, 2rem);
  }

  .h3-4xl {
    height: var(--size-3, 3rem);
  }

  .h4-4xl {
    height: var(--size-4, 4rem);
  }

  .h5-4xl {
    height: var(--size-5, 8rem);
  }

  .h6-4xl {
    height: var(--size-6, 16rem);
  }

  .h7-4xl {
    height: var(--size-7, 32rem);
  }

  .h8-4xl {
    height: var(--size-8, 64rem);
  }

  .h-50-4xl {
    height: 50%;
  }

  .h-75-4xl {
    height: 75%;
  }

  .h-100-4xl {
    height: 100%;
  }

  .min-h-100-4xl {
    min-height: 100%;
  }

  .vh-25-4xl {
    height: 25vh;
  }

  .vh-50-4xl {
    height: 50vh;
  }

  .vh-75-4xl {
    height: 75vh;
  }

  .vh-100-4xl {
    height: 100vh;
  }

  .min-vh-100-4xl {
    min-height: 100vh;
  }

  .h-auto-4xl {
    height: auto;
  }

  .h-inherit-4xl {
    height: inherit;
  }

  .h-fit-4xl {
    height: -moz-fit-content;
    height: fit-content;
  }

  .h-stretch-4xl {
    height: -webkit-fill-available;
    height: -moz-available;
    height: stretch;
  }
}

/* src/letter-spacing.css */
.tracked {
  letter-spacing: var(--letter-spacing-tracked, .1em);
}

.tracked-tight {
  letter-spacing: var(--letter-spacing-tight, -.05em);
}

.tracked-mega {
  letter-spacing: var(--letter-spacing-large, .25em);
}

@media (max-width: 8rem) {
  .tracked-4xs {
    letter-spacing: var(--letter-spacing-tracked, .1em);
  }

  .tracked-tight-4xs {
    letter-spacing: var(--letter-spacing-tight, -.05em);
  }

  .tracked-mega-4xs {
    letter-spacing: var(--letter-spacing-large, .25em);
  }
}

@media (min-width: calc(8rem + .001px)) {
  .tracked-2xs {
    letter-spacing: var(--letter-spacing-tracked, .1em);
  }

  .tracked-tight-2xs {
    letter-spacing: var(--letter-spacing-tight, -.05em);
  }

  .tracked-mega-2xs {
    letter-spacing: var(--letter-spacing-large, .25em);
  }
}

@media (min-width: 20rem) {
  .tracked-xs {
    letter-spacing: var(--letter-spacing-tracked, .1em);
  }

  .tracked-tight-xs {
    letter-spacing: var(--letter-spacing-tight, -.05em);
  }

  .tracked-mega-xs {
    letter-spacing: var(--letter-spacing-large, .25em);
  }
}

@media (min-width: 32rem) {
  .tracked-s {
    letter-spacing: var(--letter-spacing-tracked, .1em);
  }

  .tracked-tight-s {
    letter-spacing: var(--letter-spacing-tight, -.05em);
  }

  .tracked-mega-s {
    letter-spacing: var(--letter-spacing-large, .25em);
  }
}

@media (min-width: 48rem) {
  .tracked-m {
    letter-spacing: var(--letter-spacing-tracked, .1em);
  }

  .tracked-tight-m {
    letter-spacing: var(--letter-spacing-tight, -.05em);
  }

  .tracked-mega-m {
    letter-spacing: var(--letter-spacing-large, .25em);
  }
}

@media (min-width: 64rem) {
  .tracked-l {
    letter-spacing: var(--letter-spacing-tracked, .1em);
  }

  .tracked-tight-l {
    letter-spacing: var(--letter-spacing-tight, -.05em);
  }

  .tracked-mega-l {
    letter-spacing: var(--letter-spacing-large, .25em);
  }
}

@media (min-width: 100rem) {
  .tracked-xl {
    letter-spacing: var(--letter-spacing-tracked, .1em);
  }

  .tracked-tight-xl {
    letter-spacing: var(--letter-spacing-tight, -.05em);
  }

  .tracked-mega-xl {
    letter-spacing: var(--letter-spacing-large, .25em);
  }
}

@media (min-width: 130rem) {
  .tracked-2xl {
    letter-spacing: var(--letter-spacing-tracked, .1em);
  }

  .tracked-tight-2xl {
    letter-spacing: var(--letter-spacing-tight, -.05em);
  }

  .tracked-mega-2xl {
    letter-spacing: var(--letter-spacing-large, .25em);
  }
}

@media (min-width: 200rem) {
  .tracked-4xl {
    letter-spacing: var(--letter-spacing-tracked, .1em);
  }

  .tracked-tight-4xl {
    letter-spacing: var(--letter-spacing-tight, -.05em);
  }

  .tracked-mega-4xl {
    letter-spacing: var(--letter-spacing-large, .25em);
  }
}

/* src/line-height.css */
.lh-solid {
  line-height: var(--line-height-solid, 1);
}

.lh-title {
  line-height: var(--line-height-title, 1.25);
}

.lh-body {
  line-height: var(--line-height-body, 1.5);
}

.lh-1 {
  line-height: 1rem;
}

@media (max-width: 8rem) {
  .lh-solid-4xs {
    line-height: var(--line-height-solid, 1);
  }

  .lh-title-4xs {
    line-height: var(--line-height-title, 1.25);
  }

  .lh-body-4xs {
    line-height: var(--line-height-body, 1.5);
  }

  .lh-1-4xs {
    line-height: 1rem;
  }
}

@media (min-width: calc(8rem + .001px)) {
  .lh-solid-2xs {
    line-height: var(--line-height-solid, 1);
  }

  .lh-title-2xs {
    line-height: var(--line-height-title, 1.25);
  }

  .lh-body-2xs {
    line-height: var(--line-height-body, 1.5);
  }

  .lh-1-2xs {
    line-height: 1rem;
  }
}

@media (min-width: 20rem) {
  .lh-solid-xs {
    line-height: var(--line-height-solid, 1);
  }

  .lh-title-xs {
    line-height: var(--line-height-title, 1.25);
  }

  .lh-body-xs {
    line-height: var(--line-height-body, 1.5);
  }

  .lh-1-xs {
    line-height: 1rem;
  }
}

@media (min-width: 32rem) {
  .lh-solid-s {
    line-height: var(--line-height-solid, 1);
  }

  .lh-title-s {
    line-height: var(--line-height-title, 1.25);
  }

  .lh-body-s {
    line-height: var(--line-height-body, 1.5);
  }

  .lh-1-s {
    line-height: 1rem;
  }
}

@media (min-width: 48rem) {
  .lh-solid-m {
    line-height: var(--line-height-solid, 1);
  }

  .lh-title-m {
    line-height: var(--line-height-title, 1.25);
  }

  .lh-body-m {
    line-height: var(--line-height-body, 1.5);
  }

  .lh-1-m {
    line-height: 1rem;
  }
}

@media (min-width: 64rem) {
  .lh-solid-l {
    line-height: var(--line-height-solid, 1);
  }

  .lh-title-l {
    line-height: var(--line-height-title, 1.25);
  }

  .lh-body-l {
    line-height: var(--line-height-body, 1.5);
  }

  .lh-1-l {
    line-height: 1rem;
  }
}

@media (min-width: 100rem) {
  .lh-solid-xl {
    line-height: var(--line-height-solid, 1);
  }

  .lh-title-xl {
    line-height: var(--line-height-title, 1.25);
  }

  .lh-body-xl {
    line-height: var(--line-height-body, 1.5);
  }

  .lh-1-xl {
    line-height: 1rem;
  }
}

@media (min-width: 130rem) {
  .lh-solid-2xl {
    line-height: var(--line-height-solid, 1);
  }

  .lh-title-2xl {
    line-height: var(--line-height-title, 1.25);
  }

  .lh-body-2xl {
    line-height: var(--line-height-body, 1.5);
  }

  .lh-1-2xl {
    line-height: 1rem;
  }
}

@media (min-width: 200rem) {
  .lh-solid-4xl {
    line-height: var(--line-height-solid, 1);
  }

  .lh-title-4xl {
    line-height: var(--line-height-title, 1.25);
  }

  .lh-body-4xl {
    line-height: var(--line-height-body, 1.5);
  }

  .lh-1-4xl {
    line-height: 1rem;
  }
}

/* src/links.css */
.link {
  text-decoration: none;
  transition: all .15s ease-in;
}

.link:link, .link:visited, .link:hover, .link:active {
  transition: all .15s ease-in;
}

.link:focus {
  outline: 1px dotted;
  transition: all .15s ease-in;
}

/* src/lists.css */
.list {
  list-style-type: none;
}

/* src/max-widths.css */
.mw-100 {
  max-width: 100%;
}

.mw1 {
  max-width: 1rem;
}

.mw2 {
  max-width: 2rem;
}

.mw3 {
  max-width: 4rem;
}

.mw4 {
  max-width: 8rem;
}

.mw5 {
  max-width: 16rem;
}

.mw6 {
  max-width: 32rem;
}

.mw7 {
  max-width: 48rem;
}

.mw8 {
  max-width: 64rem;
}

.mw9 {
  max-width: 96rem;
}

.mw-none {
  max-width: none;
}

@media (max-width: 8rem) {
  .mw-100-4xs {
    max-width: 100%;
  }

  .mw1-4xs {
    max-width: 1rem;
  }

  .mw2-4xs {
    max-width: 2rem;
  }

  .mw3-4xs {
    max-width: 4rem;
  }

  .mw4-4xs {
    max-width: 8rem;
  }

  .mw5-4xs {
    max-width: 16rem;
  }

  .mw6-4xs {
    max-width: 32rem;
  }

  .mw7-4xs {
    max-width: 48rem;
  }

  .mw8-4xs {
    max-width: 64rem;
  }

  .mw9-4xs {
    max-width: 96rem;
  }

  .mw-none-4xs {
    max-width: none;
  }
}

@media (min-width: calc(8rem + .001px)) {
  .mw-100-2xs {
    max-width: 100%;
  }

  .mw1-2xs {
    max-width: 1rem;
  }

  .mw2-2xs {
    max-width: 2rem;
  }

  .mw3-2xs {
    max-width: 4rem;
  }

  .mw4-2xs {
    max-width: 8rem;
  }

  .mw5-2xs {
    max-width: 16rem;
  }

  .mw6-2xs {
    max-width: 32rem;
  }

  .mw7-2xs {
    max-width: 48rem;
  }

  .mw8-2xs {
    max-width: 64rem;
  }

  .mw9-2xs {
    max-width: 96rem;
  }

  .mw-none-2xs {
    max-width: none;
  }
}

@media (min-width: 20rem) {
  .mw-100-xs {
    max-width: 100%;
  }

  .mw1-xs {
    max-width: 1rem;
  }

  .mw2-xs {
    max-width: 2rem;
  }

  .mw3-xs {
    max-width: 4rem;
  }

  .mw4-xs {
    max-width: 8rem;
  }

  .mw5-xs {
    max-width: 16rem;
  }

  .mw6-xs {
    max-width: 32rem;
  }

  .mw7-xs {
    max-width: 48rem;
  }

  .mw8-xs {
    max-width: 64rem;
  }

  .mw9-xs {
    max-width: 96rem;
  }

  .mw-none-xs {
    max-width: none;
  }
}

@media (min-width: 32rem) {
  .mw-100-s {
    max-width: 100%;
  }

  .mw1-s {
    max-width: 1rem;
  }

  .mw2-s {
    max-width: 2rem;
  }

  .mw3-s {
    max-width: 4rem;
  }

  .mw4-s {
    max-width: 8rem;
  }

  .mw5-s {
    max-width: 16rem;
  }

  .mw6-s {
    max-width: 32rem;
  }

  .mw7-s {
    max-width: 48rem;
  }

  .mw8-s {
    max-width: 64rem;
  }

  .mw9-s {
    max-width: 96rem;
  }

  .mw-none-s {
    max-width: none;
  }
}

@media (min-width: 48rem) {
  .mw-100-m {
    max-width: 100%;
  }

  .mw1-m {
    max-width: 1rem;
  }

  .mw2-m {
    max-width: 2rem;
  }

  .mw3-m {
    max-width: 4rem;
  }

  .mw4-m {
    max-width: 8rem;
  }

  .mw5-m {
    max-width: 16rem;
  }

  .mw6-m {
    max-width: 32rem;
  }

  .mw7-m {
    max-width: 48rem;
  }

  .mw8-m {
    max-width: 64rem;
  }

  .mw9-m {
    max-width: 96rem;
  }

  .mw-none-m {
    max-width: none;
  }
}

@media (min-width: 64rem) {
  .mw-100-l {
    max-width: 100%;
  }

  .mw1-l {
    max-width: 1rem;
  }

  .mw2-l {
    max-width: 2rem;
  }

  .mw3-l {
    max-width: 4rem;
  }

  .mw4-l {
    max-width: 8rem;
  }

  .mw5-l {
    max-width: 16rem;
  }

  .mw6-l {
    max-width: 32rem;
  }

  .mw7-l {
    max-width: 48rem;
  }

  .mw8-l {
    max-width: 64rem;
  }

  .mw9-l {
    max-width: 96rem;
  }

  .mw-none-l {
    max-width: none;
  }
}

@media (min-width: 100rem) {
  .mw-100-xl {
    max-width: 100%;
  }

  .mw1-xl {
    max-width: 1rem;
  }

  .mw2-xl {
    max-width: 2rem;
  }

  .mw3-xl {
    max-width: 4rem;
  }

  .mw4-xl {
    max-width: 8rem;
  }

  .mw5-xl {
    max-width: 16rem;
  }

  .mw6-xl {
    max-width: 32rem;
  }

  .mw7-xl {
    max-width: 48rem;
  }

  .mw8-xl {
    max-width: 64rem;
  }

  .mw9-xl {
    max-width: 96rem;
  }

  .mw-none-xl {
    max-width: none;
  }
}

@media (min-width: 130rem) {
  .mw-100-2xl {
    max-width: 100%;
  }

  .mw1-2xl {
    max-width: 1rem;
  }

  .mw2-2xl {
    max-width: 2rem;
  }

  .mw3-2xl {
    max-width: 4rem;
  }

  .mw4-2xl {
    max-width: 8rem;
  }

  .mw5-2xl {
    max-width: 16rem;
  }

  .mw6-2xl {
    max-width: 32rem;
  }

  .mw7-2xl {
    max-width: 48rem;
  }

  .mw8-2xl {
    max-width: 64rem;
  }

  .mw9-2xl {
    max-width: 96rem;
  }

  .mw-none-2xl {
    max-width: none;
  }
}

@media (min-width: 200rem) {
  .mw-100-4xl {
    max-width: 100%;
  }

  .mw1-4xl {
    max-width: 1rem;
  }

  .mw2-4xl {
    max-width: 2rem;
  }

  .mw3-4xl {
    max-width: 4rem;
  }

  .mw4-4xl {
    max-width: 8rem;
  }

  .mw5-4xl {
    max-width: 16rem;
  }

  .mw6-4xl {
    max-width: 32rem;
  }

  .mw7-4xl {
    max-width: 48rem;
  }

  .mw8-4xl {
    max-width: 64rem;
  }

  .mw9-4xl {
    max-width: 96rem;
  }

  .mw-none-4xl {
    max-width: none;
  }
}

/* src/widths.css */
.w0 {
  width: 0;
}

.w1 {
  width: var(--size-1, 1rem);
}

.w2 {
  width: var(--size-2, 2rem);
}

.w3 {
  width: var(--size-3, 3rem);
}

.w4 {
  width: var(--size-4, 4rem);
}

.w5 {
  width: var(--size-5, 8rem);
}

.w6 {
  width: var(--size-6, 16rem);
}

.w7 {
  width: var(--size-7, 32rem);
}

.w8 {
  width: var(--size-8, 64rem);
}

.w-10 {
  width: 10%;
}

.w-15 {
  width: 15%;
}

.w-20 {
  width: 20%;
}

.w-25 {
  width: 25%;
}

.w-40 {
  width: 40%;
}

.w-45 {
  width: 45%;
}

.w-50 {
  width: 50%;
}

.w-60 {
  width: 60%;
}

.w-65 {
  width: 65%;
}

.w-70 {
  width: 70%;
}

.w-75 {
  width: 75%;
}

.w-80 {
  width: 80%;
}

.w-85 {
  width: 85%;
}

.w-90 {
  width: 90%;
}

.w-95 {
  width: 95%;
}

.w-100 {
  width: 100%;
}

.w-third {
  width: 33.3333%;
}

.w-two-thirds {
  width: 66.6667%;
}

.w-auto {
  width: auto;
}

.w-stretch {
  width: -webkit-fill-available;
  width: -moz-available;
  width: stretch;
}

@media (max-width: 8rem) {
  .w0-4xs {
    width: 0;
  }

  .w1-4xs {
    width: var(--size-1, 1rem);
  }

  .w2-4xs {
    width: var(--size-2, 2rem);
  }

  .w3-4xs {
    width: var(--size-3, 3rem);
  }

  .w4-4xs {
    width: var(--size-4, 4rem);
  }

  .w5-4xs {
    width: var(--size-5, 8rem);
  }

  .w6-4xs {
    width: var(--size-6, 16rem);
  }

  .w7-4xs {
    width: var(--size-7, 32rem);
  }

  .w8-4xs {
    width: var(--size-8, 64rem);
  }

  .w-10-4xs {
    width: 10%;
  }

  .w-15-4xs {
    width: 15%;
  }

  .w-20-4xs {
    width: 20%;
  }

  .w-25-4xs {
    width: 25%;
  }

  .w-40-4xs {
    width: 40%;
  }

  .w-45-4xs {
    width: 45%;
  }

  .w-50-4xs {
    width: 50%;
  }

  .w-60-4xs {
    width: 60%;
  }

  .w-65-4xs {
    width: 65%;
  }

  .w-70-4xs {
    width: 70%;
  }

  .w-75-4xs {
    width: 75%;
  }

  .w-80-4xs {
    width: 80%;
  }

  .w-85-4xs {
    width: 85%;
  }

  .w-90-4xs {
    width: 90%;
  }

  .w-95-4xs {
    width: 95%;
  }

  .w-100-4xs {
    width: 100%;
  }

  .w-third-4xs {
    width: 33.3333%;
  }

  .w-two-thirds-4xs {
    width: 66.6667%;
  }

  .w-auto-4xs {
    width: auto;
  }

  .w-stretch-4xs {
    width: -webkit-fill-available;
    width: -moz-available;
    width: stretch;
  }
}

@media (min-width: calc(8rem + .001px)) {
  .w0-2xs {
    width: 0;
  }

  .w1-2xs {
    width: var(--size-1, 1rem);
  }

  .w2-2xs {
    width: var(--size-2, 2rem);
  }

  .w3-2xs {
    width: var(--size-3, 3rem);
  }

  .w4-2xs {
    width: var(--size-4, 4rem);
  }

  .w5-2xs {
    width: var(--size-5, 8rem);
  }

  .w6-2xs {
    width: var(--size-6, 16rem);
  }

  .w7-2xs {
    width: var(--size-7, 32rem);
  }

  .w8-2xs {
    width: var(--size-8, 64rem);
  }

  .w-10-2xs {
    width: 10%;
  }

  .w-15-2xs {
    width: 15%;
  }

  .w-20-2xs {
    width: 20%;
  }

  .w-25-2xs {
    width: 25%;
  }

  .w-40-2xs {
    width: 40%;
  }

  .w-45-2xs {
    width: 45%;
  }

  .w-50-2xs {
    width: 50%;
  }

  .w-60-2xs {
    width: 60%;
  }

  .w-65-2xs {
    width: 65%;
  }

  .w-70-2xs {
    width: 70%;
  }

  .w-75-2xs {
    width: 75%;
  }

  .w-80-2xs {
    width: 80%;
  }

  .w-85-2xs {
    width: 85%;
  }

  .w-90-2xs {
    width: 90%;
  }

  .w-95-2xs {
    width: 95%;
  }

  .w-100-2xs {
    width: 100%;
  }

  .w-third-2xs {
    width: 33.3333%;
  }

  .w-two-thirds-2xs {
    width: 66.6667%;
  }

  .w-auto-2xs {
    width: auto;
  }

  .w-stretch-2xs {
    width: -webkit-fill-available;
    width: -moz-available;
    width: stretch;
  }
}

@media (min-width: 20rem) {
  .w0-xs {
    width: 0;
  }

  .w1-xs {
    width: var(--size-1, 1rem);
  }

  .w2-xs {
    width: var(--size-2, 2rem);
  }

  .w3-xs {
    width: var(--size-3, 3rem);
  }

  .w4-xs {
    width: var(--size-4, 4rem);
  }

  .w5-xs {
    width: var(--size-5, 8rem);
  }

  .w6-xs {
    width: var(--size-6, 16rem);
  }

  .w7-xs {
    width: var(--size-7, 32rem);
  }

  .w8-xs {
    width: var(--size-8, 64rem);
  }

  .w-10-xs {
    width: 10%;
  }

  .w-15-xs {
    width: 15%;
  }

  .w-20-xs {
    width: 20%;
  }

  .w-25-xs {
    width: 25%;
  }

  .w-40-xs {
    width: 40%;
  }

  .w-45-xs {
    width: 45%;
  }

  .w-50-xs {
    width: 50%;
  }

  .w-60-xs {
    width: 60%;
  }

  .w-65-xs {
    width: 65%;
  }

  .w-70-xs {
    width: 70%;
  }

  .w-75-xs {
    width: 75%;
  }

  .w-80-xs {
    width: 80%;
  }

  .w-85-xs {
    width: 85%;
  }

  .w-90-xs {
    width: 90%;
  }

  .w-95-xs {
    width: 95%;
  }

  .w-100-xs {
    width: 100%;
  }

  .w-third-xs {
    width: 33.3333%;
  }

  .w-two-thirds-xs {
    width: 66.6667%;
  }

  .w-auto-xs {
    width: auto;
  }

  .w-stretch-xs {
    width: -webkit-fill-available;
    width: -moz-available;
    width: stretch;
  }
}

@media (min-width: 32rem) {
  .w0-s {
    width: 0;
  }

  .w1-s {
    width: var(--size-1, 1rem);
  }

  .w2-s {
    width: var(--size-2, 2rem);
  }

  .w3-s {
    width: var(--size-3, 3rem);
  }

  .w4-s {
    width: var(--size-4, 4rem);
  }

  .w5-s {
    width: var(--size-5, 8rem);
  }

  .w6-s {
    width: var(--size-6, 16rem);
  }

  .w7-s {
    width: var(--size-7, 32rem);
  }

  .w8-s {
    width: var(--size-8, 64rem);
  }

  .w-10-s {
    width: 10%;
  }

  .w-15-s {
    width: 15%;
  }

  .w-20-s {
    width: 20%;
  }

  .w-25-s {
    width: 25%;
  }

  .w-40-s {
    width: 40%;
  }

  .w-45-s {
    width: 45%;
  }

  .w-50-s {
    width: 50%;
  }

  .w-60-s {
    width: 60%;
  }

  .w-65-s {
    width: 65%;
  }

  .w-70-s {
    width: 70%;
  }

  .w-75-s {
    width: 75%;
  }

  .w-80-s {
    width: 80%;
  }

  .w-85-s {
    width: 85%;
  }

  .w-90-s {
    width: 90%;
  }

  .w-95-s {
    width: 95%;
  }

  .w-100-s {
    width: 100%;
  }

  .w-third-s {
    width: 33.3333%;
  }

  .w-two-thirds-s {
    width: 66.6667%;
  }

  .w-auto-s {
    width: auto;
  }

  .w-stretch-s {
    width: -webkit-fill-available;
    width: -moz-available;
    width: stretch;
  }
}

@media (min-width: 48rem) {
  .w0-m {
    width: 0;
  }

  .w1-m {
    width: var(--size-1, 1rem);
  }

  .w2-m {
    width: var(--size-2, 2rem);
  }

  .w3-m {
    width: var(--size-3, 3rem);
  }

  .w4-m {
    width: var(--size-4, 4rem);
  }

  .w5-m {
    width: var(--size-5, 8rem);
  }

  .w6-m {
    width: var(--size-6, 16rem);
  }

  .w7-m {
    width: var(--size-7, 32rem);
  }

  .w8-m {
    width: var(--size-8, 64rem);
  }

  .w-10-m {
    width: 10%;
  }

  .w-15-m {
    width: 15%;
  }

  .w-20-m {
    width: 20%;
  }

  .w-25-m {
    width: 25%;
  }

  .w-40-m {
    width: 40%;
  }

  .w-45-m {
    width: 45%;
  }

  .w-50-m {
    width: 50%;
  }

  .w-60-m {
    width: 60%;
  }

  .w-65-m {
    width: 65%;
  }

  .w-70-m {
    width: 70%;
  }

  .w-75-m {
    width: 75%;
  }

  .w-80-m {
    width: 80%;
  }

  .w-85-m {
    width: 85%;
  }

  .w-90-m {
    width: 90%;
  }

  .w-95-m {
    width: 95%;
  }

  .w-100-m {
    width: 100%;
  }

  .w-third-m {
    width: 33.3333%;
  }

  .w-two-thirds-m {
    width: 66.6667%;
  }

  .w-auto-m {
    width: auto;
  }

  .w-stretch-m {
    width: -webkit-fill-available;
    width: -moz-available;
    width: stretch;
  }
}

@media (min-width: 64rem) {
  .w0-l {
    width: 0;
  }

  .w1-l {
    width: var(--size-1, 1rem);
  }

  .w2-l {
    width: var(--size-2, 2rem);
  }

  .w3-l {
    width: var(--size-3, 3rem);
  }

  .w4-l {
    width: var(--size-4, 4rem);
  }

  .w5-l {
    width: var(--size-5, 8rem);
  }

  .w6-l {
    width: var(--size-6, 16rem);
  }

  .w7-l {
    width: var(--size-7, 32rem);
  }

  .w8-l {
    width: var(--size-8, 64rem);
  }

  .w-10-l {
    width: 10%;
  }

  .w-15-l {
    width: 15%;
  }

  .w-20-l {
    width: 20%;
  }

  .w-25-l {
    width: 25%;
  }

  .w-40-l {
    width: 40%;
  }

  .w-45-l {
    width: 45%;
  }

  .w-50-l {
    width: 50%;
  }

  .w-60-l {
    width: 60%;
  }

  .w-65-l {
    width: 65%;
  }

  .w-70-l {
    width: 70%;
  }

  .w-75-l {
    width: 75%;
  }

  .w-80-l {
    width: 80%;
  }

  .w-85-l {
    width: 85%;
  }

  .w-90-l {
    width: 90%;
  }

  .w-95-l {
    width: 95%;
  }

  .w-100-l {
    width: 100%;
  }

  .w-third-l {
    width: 33.3333%;
  }

  .w-two-thirds-l {
    width: 66.6667%;
  }

  .w-auto-l {
    width: auto;
  }

  .w-stretch-l {
    width: -webkit-fill-available;
    width: -moz-available;
    width: stretch;
  }
}

@media (min-width: 100rem) {
  .w0-xl {
    width: 0;
  }

  .w1-xl {
    width: var(--size-1, 1rem);
  }

  .w2-xl {
    width: var(--size-2, 2rem);
  }

  .w3-xl {
    width: var(--size-3, 3rem);
  }

  .w4-xl {
    width: var(--size-4, 4rem);
  }

  .w5-xl {
    width: var(--size-5, 8rem);
  }

  .w6-xl {
    width: var(--size-6, 16rem);
  }

  .w7-xl {
    width: var(--size-7, 32rem);
  }

  .w8-xl {
    width: var(--size-8, 64rem);
  }

  .w-10-xl {
    width: 10%;
  }

  .w-15-xl {
    width: 15%;
  }

  .w-20-xl {
    width: 20%;
  }

  .w-25-xl {
    width: 25%;
  }

  .w-40-xl {
    width: 40%;
  }

  .w-45-xl {
    width: 45%;
  }

  .w-50-xl {
    width: 50%;
  }

  .w-60-xl {
    width: 60%;
  }

  .w-65-xl {
    width: 65%;
  }

  .w-70-xl {
    width: 70%;
  }

  .w-75-xl {
    width: 75%;
  }

  .w-80-xl {
    width: 80%;
  }

  .w-85-xl {
    width: 85%;
  }

  .w-90-xl {
    width: 90%;
  }

  .w-95-xl {
    width: 95%;
  }

  .w-100-xl {
    width: 100%;
  }

  .w-third-xl {
    width: 33.3333%;
  }

  .w-two-thirds-xl {
    width: 66.6667%;
  }

  .w-auto-xl {
    width: auto;
  }

  .w-stetch-xl {
    width: -webkit-fill-available;
    width: -moz-available;
    width: stretch;
  }
}

@media (min-width: 130rem) {
  .w0-2xl {
    width: 0;
  }

  .w1-2xl {
    width: var(--size-1, 1rem);
  }

  .w2-2xl {
    width: var(--size-2, 2rem);
  }

  .w3-2xl {
    width: var(--size-3, 3rem);
  }

  .w4-2xl {
    width: var(--size-4, 4rem);
  }

  .w5-2xl {
    width: var(--size-5, 8rem);
  }

  .w6-2xl {
    width: var(--size-6, 16rem);
  }

  .w7-2xl {
    width: var(--size-7, 32rem);
  }

  .w8-2xl {
    width: var(--size-8, 64rem);
  }

  .w-10-2xl {
    width: 10%;
  }

  .w-15-2xl {
    width: 15%;
  }

  .w-20-2xl {
    width: 20%;
  }

  .w-25-2xl {
    width: 25%;
  }

  .w-40-2xl {
    width: 40%;
  }

  .w-45-2xl {
    width: 45%;
  }

  .w-50-2xl {
    width: 50%;
  }

  .w-60-2xl {
    width: 60%;
  }

  .w-65-2xl {
    width: 65%;
  }

  .w-70-2xl {
    width: 70%;
  }

  .w-75-2xl {
    width: 75%;
  }

  .w-80-2xl {
    width: 80%;
  }

  .w-85-2xl {
    width: 85%;
  }

  .w-90-2xl {
    width: 90%;
  }

  .w-95-2xl {
    width: 95%;
  }

  .w-100-2xl {
    width: 100%;
  }

  .w-third-2xl {
    width: 33.3333%;
  }

  .w-two-thirds-2xl {
    width: 66.6667%;
  }

  .w-auto-2xl {
    width: auto;
  }

  .w-stretch-2xl {
    width: -webkit-fill-available;
    width: -moz-available;
    width: stretch;
  }
}

@media (min-width: 200rem) {
  .w0-4xl {
    width: 0;
  }

  .w1-4xl {
    width: var(--size-1, 1rem);
  }

  .w2-4xl {
    width: var(--size-2, 2rem);
  }

  .w3-4xl {
    width: var(--size-3, 3rem);
  }

  .w4-4xl {
    width: var(--size-4, 4rem);
  }

  .w5-4xl {
    width: var(--size-5, 8rem);
  }

  .w6-4xl {
    width: var(--size-6, 16rem);
  }

  .w7-4xl {
    width: var(--size-7, 32rem);
  }

  .w8-4xl {
    width: var(--size-8, 64rem);
  }

  .w-10-4xl {
    width: 10%;
  }

  .w-15-4xl {
    width: 15%;
  }

  .w-20-4xl {
    width: 20%;
  }

  .w-25-4xl {
    width: 25%;
  }

  .w-40-4xl {
    width: 40%;
  }

  .w-45-4xl {
    width: 45%;
  }

  .w-50-4xl {
    width: 50%;
  }

  .w-60-4xl {
    width: 60%;
  }

  .w-65-4xl {
    width: 65%;
  }

  .w-70-4xl {
    width: 70%;
  }

  .w-75-4xl {
    width: 75%;
  }

  .w-80-4xl {
    width: 80%;
  }

  .w-85-4xl {
    width: 85%;
  }

  .w-90-4xl {
    width: 90%;
  }

  .w-95-4xl {
    width: 95%;
  }

  .w-100-4xl {
    width: 100%;
  }

  .w-third-4xl {
    width: 33.3333%;
  }

  .w-two-thirds-4xl {
    width: 66.6667%;
  }

  .w-auto-4xl {
    width: auto;
  }

  .w-stretch-4xl {
    width: -webkit-fill-available;
    width: -moz-available;
    width: stretch;
  }
}

/* src/overflow.css */
.overflow-visible {
  overflow: visible;
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-scroll {
  overflow: scroll;
}

.overflow-auto {
  overflow: auto;
}

.overflow-x-visible {
  overflow-x: visible;
}

.overflow-x-hidden {
  overflow-x: hidden;
}

.overflow-x-scroll {
  overflow-x: scroll;
}

.overflow-x-auto {
  overflow-x: auto;
}

.overflow-y-visible {
  overflow-y: visible;
}

.overflow-y-hidden {
  overflow-y: hidden;
}

.overflow-y-scroll {
  overflow-y: scroll;
}

.overflow-y-auto {
  overflow-y: auto;
}

@media (max-width: 8rem) {
  .overflow-visible-4xs {
    overflow: visible;
  }

  .overflow-hidden-4xs {
    overflow: hidden;
  }

  .overflow-scroll-4xs {
    overflow: scroll;
  }

  .overflow-auto-4xs {
    overflow: auto;
  }

  .overflow-x-visible-4xs {
    overflow-x: visible;
  }

  .overflow-x-hidden-4xs {
    overflow-x: hidden;
  }

  .overflow-x-scroll-4xs {
    overflow-x: scroll;
  }

  .overflow-x-auto-4xs {
    overflow-x: auto;
  }

  .overflow-y-visible-4xs {
    overflow-y: visible;
  }

  .overflow-y-hidden-4xs {
    overflow-y: hidden;
  }

  .overflow-y-scroll-4xs {
    overflow-y: scroll;
  }

  .overflow-y-auto-4xs {
    overflow-y: auto;
  }
}

@media (min-width: calc(8rem + .001px)) {
  .overflow-visible-2xs {
    overflow: visible;
  }

  .overflow-hidden-2xs {
    overflow: hidden;
  }

  .overflow-scroll-2xs {
    overflow: scroll;
  }

  .overflow-auto-2xs {
    overflow: auto;
  }

  .overflow-x-visible-2xs {
    overflow-x: visible;
  }

  .overflow-x-hidden-2xs {
    overflow-x: hidden;
  }

  .overflow-x-scroll-2xs {
    overflow-x: scroll;
  }

  .overflow-x-auto-2xs {
    overflow-x: auto;
  }

  .overflow-y-visible-2xs {
    overflow-y: visible;
  }

  .overflow-y-hidden-2xs {
    overflow-y: hidden;
  }

  .overflow-y-scroll-2xs {
    overflow-y: scroll;
  }

  .overflow-y-auto-2xs {
    overflow-y: auto;
  }
}

@media (min-width: 20rem) {
  .overflow-visible-xs {
    overflow: visible;
  }

  .overflow-hidden-xs {
    overflow: hidden;
  }

  .overflow-scroll-xs {
    overflow: scroll;
  }

  .overflow-auto-xs {
    overflow: auto;
  }

  .overflow-x-visible-xs {
    overflow-x: visible;
  }

  .overflow-x-hidden-xs {
    overflow-x: hidden;
  }

  .overflow-x-scroll-xs {
    overflow-x: scroll;
  }

  .overflow-x-auto-xs {
    overflow-x: auto;
  }

  .overflow-y-visible-xs {
    overflow-y: visible;
  }

  .overflow-y-hidden-xs {
    overflow-y: hidden;
  }

  .overflow-y-scroll-xs {
    overflow-y: scroll;
  }

  .overflow-y-auto-xs {
    overflow-y: auto;
  }
}

@media (min-width: 32rem) {
  .overflow-visible-s {
    overflow: visible;
  }

  .overflow-hidden-s {
    overflow: hidden;
  }

  .overflow-scroll-s {
    overflow: scroll;
  }

  .overflow-auto-s {
    overflow: auto;
  }

  .overflow-x-visible-s {
    overflow-x: visible;
  }

  .overflow-x-hidden-s {
    overflow-x: hidden;
  }

  .overflow-x-scroll-s {
    overflow-x: scroll;
  }

  .overflow-x-auto-s {
    overflow-x: auto;
  }

  .overflow-y-visible-s {
    overflow-y: visible;
  }

  .overflow-y-hidden-s {
    overflow-y: hidden;
  }

  .overflow-y-scroll-s {
    overflow-y: scroll;
  }

  .overflow-y-auto-s {
    overflow-y: auto;
  }
}

@media (min-width: 48rem) {
  .overflow-visible-m {
    overflow: visible;
  }

  .overflow-hidden-m {
    overflow: hidden;
  }

  .overflow-scroll-m {
    overflow: scroll;
  }

  .overflow-auto-m {
    overflow: auto;
  }

  .overflow-x-visible-m {
    overflow-x: visible;
  }

  .overflow-x-hidden-m {
    overflow-x: hidden;
  }

  .overflow-x-scroll-m {
    overflow-x: scroll;
  }

  .overflow-x-auto-m {
    overflow-x: auto;
  }

  .overflow-y-visible-m {
    overflow-y: visible;
  }

  .overflow-y-hidden-m {
    overflow-y: hidden;
  }

  .overflow-y-scroll-m {
    overflow-y: scroll;
  }

  .overflow-y-auto-m {
    overflow-y: auto;
  }
}

@media (min-width: 64rem) {
  .overflow-visible-l {
    overflow: visible;
  }

  .overflow-hidden-l {
    overflow: hidden;
  }

  .overflow-scroll-l {
    overflow: scroll;
  }

  .overflow-auto-l {
    overflow: auto;
  }

  .overflow-x-visible-l {
    overflow-x: visible;
  }

  .overflow-x-hidden-l {
    overflow-x: hidden;
  }

  .overflow-x-scroll-l {
    overflow-x: scroll;
  }

  .overflow-x-auto-l {
    overflow-x: auto;
  }

  .overflow-y-visible-l {
    overflow-y: visible;
  }

  .overflow-y-hidden-l {
    overflow-y: hidden;
  }

  .overflow-y-scroll-l {
    overflow-y: scroll;
  }

  .overflow-y-auto-l {
    overflow-y: auto;
  }
}

@media (min-width: 100rem) {
  .overflow-visible-xl {
    overflow: visible;
  }

  .overflow-hidden-xl {
    overflow: hidden;
  }

  .overflow-scroll-xl {
    overflow: scroll;
  }

  .overflow-auto-xl {
    overflow: auto;
  }

  .overflow-x-visible-xl {
    overflow-x: visible;
  }

  .overflow-x-hidden-xl {
    overflow-x: hidden;
  }

  .overflow-x-scroll-xl {
    overflow-x: scroll;
  }

  .overflow-x-auto-xl {
    overflow-x: auto;
  }

  .overflow-y-visible-xl {
    overflow-y: visible;
  }

  .overflow-y-hidden-xl {
    overflow-y: hidden;
  }

  .overflow-y-scroll-xl {
    overflow-y: scroll;
  }

  .overflow-y-auto-xl {
    overflow-y: auto;
  }
}

@media (min-width: 130rem) {
  .overflow-visible-2xl {
    overflow: visible;
  }

  .overflow-hidden-2xl {
    overflow: hidden;
  }

  .overflow-scroll-2xl {
    overflow: scroll;
  }

  .overflow-auto-2xl {
    overflow: auto;
  }

  .overflow-x-visible-2xl {
    overflow-x: visible;
  }

  .overflow-x-hidden-2xl {
    overflow-x: hidden;
  }

  .overflow-x-scroll-2xl {
    overflow-x: scroll;
  }

  .overflow-x-auto-2xl {
    overflow-x: auto;
  }

  .overflow-y-visible-2xl {
    overflow-y: visible;
  }

  .overflow-y-hidden-2xl {
    overflow-y: hidden;
  }

  .overflow-y-scroll-2xl {
    overflow-y: scroll;
  }

  .overflow-y-auto-2xl {
    overflow-y: auto;
  }
}

@media (min-width: 200rem) {
  .overflow-visible-4xl {
    overflow: visible;
  }

  .overflow-hidden-4xl {
    overflow: hidden;
  }

  .overflow-scroll-4xl {
    overflow: scroll;
  }

  .overflow-auto-4xl {
    overflow: auto;
  }

  .overflow-x-visible-4xl {
    overflow-x: visible;
  }

  .overflow-x-hidden-4xl {
    overflow-x: hidden;
  }

  .overflow-x-scroll-4xl {
    overflow-x: scroll;
  }

  .overflow-x-auto-4xl {
    overflow-x: auto;
  }

  .overflow-y-visible-4xl {
    overflow-y: visible;
  }

  .overflow-y-hidden-4xl {
    overflow-y: hidden;
  }

  .overflow-y-scroll-4xl {
    overflow-y: scroll;
  }

  .overflow-y-auto-4xl {
    overflow-y: auto;
  }
}

/* src/position.css */
.static {
  position: static;
}

.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.fixed {
  position: fixed;
}

.sticky {
  position: sticky;
}

@media (max-width: 8rem) {
  .static-4xs {
    position: static;
  }

  .relative-4xs {
    position: relative;
  }

  .absolute-4xs {
    position: absolute;
  }

  .fixed-4xs {
    position: fixed;
  }

  .sticky-4xs {
    position: sticky;
  }
}

@media (min-width: calc(8rem + .001px)) {
  .static-2xs {
    position: static;
  }

  .relative-2xs {
    position: relative;
  }

  .absolute-2xs {
    position: absolute;
  }

  .fixed-2xs {
    position: fixed;
  }

  .sticky-2xs {
    position: sticky;
  }
}

@media (min-width: 20rem) {
  .static-xs {
    position: static;
  }

  .relative-xs {
    position: relative;
  }

  .absolute-xs {
    position: absolute;
  }

  .fixed-xs {
    position: fixed;
  }

  .sticky-xs {
    position: sticky;
  }
}

@media (min-width: 32rem) {
  .static-s {
    position: static;
  }

  .relative-s {
    position: relative;
  }

  .absolute-s {
    position: absolute;
  }

  .fixed-s {
    position: fixed;
  }

  .sticky-s {
    position: sticky;
  }
}

@media (min-width: 48rem) {
  .static-m {
    position: static;
  }

  .relative-m {
    position: relative;
  }

  .absolute-m {
    position: absolute;
  }

  .fixed-m {
    position: fixed;
  }

  .sticky-m {
    position: sticky;
  }
}

@media (min-width: 64rem) {
  .static-l {
    position: static;
  }

  .relative-l {
    position: relative;
  }

  .absolute-l {
    position: absolute;
  }

  .fixed-l {
    position: fixed;
  }

  .sticky-l {
    position: sticky;
  }
}

@media (min-width: 100rem) {
  .static-xl {
    position: static;
  }

  .relative-xl {
    position: relative;
  }

  .absolute-xl {
    position: absolute;
  }

  .fixed-xl {
    position: fixed;
  }

  .sticky-xl {
    position: sticky;
  }
}

@media (min-width: 130rem) {
  .static-2xl {
    position: static;
  }

  .relative-2xl {
    position: relative;
  }

  .absolute-2xl {
    position: absolute;
  }

  .fixed-2xl {
    position: fixed;
  }

  .sticky-2xl {
    position: sticky;
  }
}

@media (min-width: 200rem) {
  .static-4xl {
    position: static;
  }

  .relative-4xl {
    position: relative;
  }

  .absolute-4xl {
    position: absolute;
  }

  .fixed-4xl {
    position: fixed;
  }

  .sticky-4xl {
    position: sticky;
  }
}

/* src/opacity.css */
.o12 {
  opacity: var(--opacity-12, 1);
}

.o11 {
  opacity: var(--opacity-11, .9);
}

.o10 {
  opacity: var(--opacity-10, .8);
}

.o9 {
  opacity: var(--opacity-9, .7);
}

.o8 {
  opacity: var(--opacity-8, .6);
}

.o7 {
  opacity: var(--opacity-7, .5);
}

.o6 {
  opacity: var(--opacity-6, .4);
}

.o5 {
  opacity: var(--opacity-5, .3);
}

.o4 {
  opacity: var(--opacity-4, .2);
}

.o3 {
  opacity: var(--opacity-3, .1);
}

.o2 {
  opacity: var(--opacity-2, .05);
}

.o1 {
  opacity: var(--opacity-1, .025);
}

.o0 {
  opacity: var(--opacity-0, 0);
}

.h-o12:hover {
  opacity: var(--opacity-12, 1);
}

.h-o11:hover {
  opacity: var(--opacity-11, .9);
}

.h-o10:hover {
  opacity: var(--opacity-10, .8);
}

.h-o9:hover {
  opacity: var(--opacity-9, .7);
}

.h-o8:hover {
  opacity: var(--opacity-8, .6);
}

.h-o7:hover {
  opacity: var(--opacity-7, .5);
}

.h-o6:hover {
  opacity: var(--opacity-6, .4);
}

.h-o5:hover {
  opacity: var(--opacity-5, .3);
}

.h-o4:hover {
  opacity: var(--opacity-4, .2);
}

.h-o3:hover {
  opacity: var(--opacity-3, .1);
}

.h-o2:hover {
  opacity: var(--opacity-2, .05);
}

.h-o1:hover {
  opacity: var(--opacity-1, .025);
}

.h-o0:hover {
  opacity: var(--opacity-0, 0);
}

.f-o12:focus {
  opacity: var(--opacity-12, 1);
}

.f-o11:focus {
  opacity: var(--opacity-11, .9);
}

.f-o10:focus {
  opacity: var(--opacity-10, .8);
}

.f-o9:focus {
  opacity: var(--opacity-9, .7);
}

.f-o8:focus {
  opacity: var(--opacity-8, .6);
}

.f-o7:focus {
  opacity: var(--opacity-7, .5);
}

.f-o6:focus {
  opacity: var(--opacity-6, .4);
}

.f-o5:focus {
  opacity: var(--opacity-5, .3);
}

.f-o4:focus {
  opacity: var(--opacity-4, .2);
}

.f-o3:focus {
  opacity: var(--opacity-3, .1);
}

.f-o2:focus {
  opacity: var(--opacity-2, .05);
}

.f-o1:focus {
  opacity: var(--opacity-1, .025);
}

.f-o0:focus {
  opacity: var(--opacity-0, 0);
}

/* src/rotations.css */
.rotate-45 {
  transform: rotate(45deg);
}

.rotate-90 {
  transform: rotate(90deg);
}

.rotate-135 {
  transform: rotate(135deg);
}

.rotate-180 {
  transform: rotate(180deg);
}

.rotate-225 {
  transform: rotate(225deg);
}

.rotate-270 {
  transform: rotate(270deg);
}

.rotate-315 {
  transform: rotate(315deg);
}

@media (max-width: 8rem) {
  .rotate-45-4xs {
    transform: rotate(45deg);
  }

  .rotate-90-4xs {
    transform: rotate(90deg);
  }

  .rotate-135-4xs {
    transform: rotate(135deg);
  }

  .rotate-180-4xs {
    transform: rotate(180deg);
  }

  .rotate-225-4xs {
    transform: rotate(225deg);
  }

  .rotate-270-4xs {
    transform: rotate(270deg);
  }

  .rotate-315-4xs {
    transform: rotate(315deg);
  }
}

@media (min-width: calc(8rem + .001px)) {
  .rotate-45-2xs {
    transform: rotate(45deg);
  }

  .rotate-90-2xs {
    transform: rotate(90deg);
  }

  .rotate-135-2xs {
    transform: rotate(135deg);
  }

  .rotate-180-2xs {
    transform: rotate(180deg);
  }

  .rotate-225-2xs {
    transform: rotate(225deg);
  }

  .rotate-270-2xs {
    transform: rotate(270deg);
  }

  .rotate-315-2xs {
    transform: rotate(315deg);
  }
}

@media (min-width: 20rem) {
  .rotate-45-xs {
    transform: rotate(45deg);
  }

  .rotate-90-xs {
    transform: rotate(90deg);
  }

  .rotate-135-xs {
    transform: rotate(135deg);
  }

  .rotate-180-xs {
    transform: rotate(180deg);
  }

  .rotate-225-xs {
    transform: rotate(225deg);
  }

  .rotate-270-xs {
    transform: rotate(270deg);
  }

  .rotate-315-xs {
    transform: rotate(315deg);
  }
}

@media (min-width: 32rem) {
  .rotate-45-s {
    transform: rotate(45deg);
  }

  .rotate-90-s {
    transform: rotate(90deg);
  }

  .rotate-135-s {
    transform: rotate(135deg);
  }

  .rotate-180-s {
    transform: rotate(180deg);
  }

  .rotate-225-s {
    transform: rotate(225deg);
  }

  .rotate-270-s {
    transform: rotate(270deg);
  }

  .rotate-315-s {
    transform: rotate(315deg);
  }
}

@media (min-width: 48rem) {
  .rotate-45-m {
    transform: rotate(45deg);
  }

  .rotate-90-m {
    transform: rotate(90deg);
  }

  .rotate-135-m {
    transform: rotate(135deg);
  }

  .rotate-180-m {
    transform: rotate(180deg);
  }

  .rotate-225-m {
    transform: rotate(225deg);
  }

  .rotate-270-m {
    transform: rotate(270deg);
  }

  .rotate-315-m {
    transform: rotate(315deg);
  }
}

@media (min-width: 64rem) {
  .rotate-45-l {
    transform: rotate(45deg);
  }

  .rotate-90-l {
    transform: rotate(90deg);
  }

  .rotate-135-l {
    transform: rotate(135deg);
  }

  .rotate-180-l {
    transform: rotate(180deg);
  }

  .rotate-225-l {
    transform: rotate(225deg);
  }

  .rotate-270-l {
    transform: rotate(270deg);
  }

  .rotate-315-l {
    transform: rotate(315deg);
  }
}

@media (min-width: 100rem) {
  .rotate-45-xl {
    transform: rotate(45deg);
  }

  .rotate-90-xl {
    transform: rotate(90deg);
  }

  .rotate-135-xl {
    transform: rotate(135deg);
  }

  .rotate-180-xl {
    transform: rotate(180deg);
  }

  .rotate-225-xl {
    transform: rotate(225deg);
  }

  .rotate-270-xl {
    transform: rotate(270deg);
  }

  .rotate-315-xl {
    transform: rotate(315deg);
  }
}

@media (min-width: 130rem) {
  .rotate-45-2xl {
    transform: rotate(45deg);
  }

  .rotate-90-2xl {
    transform: rotate(90deg);
  }

  .rotate-135-2xl {
    transform: rotate(135deg);
  }

  .rotate-180-2xl {
    transform: rotate(180deg);
  }

  .rotate-225-2xl {
    transform: rotate(225deg);
  }

  .rotate-270-2xl {
    transform: rotate(270deg);
  }

  .rotate-315-2xl {
    transform: rotate(315deg);
  }
}

@media (min-width: 200rem) {
  .rotate-45-4xl {
    transform: rotate(45deg);
  }

  .rotate-90-4xl {
    transform: rotate(90deg);
  }

  .rotate-135-4xl {
    transform: rotate(135deg);
  }

  .rotate-180-4xl {
    transform: rotate(180deg);
  }

  .rotate-225-4xl {
    transform: rotate(225deg);
  }

  .rotate-270-4xl {
    transform: rotate(270deg);
  }

  .rotate-315-4xl {
    transform: rotate(315deg);
  }
}

/* src/negative-margins.css */
.na1 {
  margin: calc(-1 * var(--spacing-1));
}

.na2 {
  margin: calc(-1 * var(--spacing-2));
}

.na3 {
  margin: calc(-1 * var(--spacing-3));
}

.na4 {
  margin: calc(-1 * var(--spacing-4));
}

.na5 {
  margin: calc(-1 * var(--spacing-5));
}

.na6 {
  margin: calc(-1 * var(--spacing-6));
}

.na7 {
  margin: calc(-1 * var(--spacing-7));
}

.nl1 {
  margin-left: calc(-1 * var(--spacing-1));
}

.nl2 {
  margin-left: calc(-1 * var(--spacing-2));
}

.nl3 {
  margin-left: calc(-1 * var(--spacing-3));
}

.nl4 {
  margin-left: calc(-1 * var(--spacing-4));
}

.nl5 {
  margin-left: calc(-1 * var(--spacing-5));
}

.nl6 {
  margin-left: calc(-1 * var(--spacing-6));
}

.nl7 {
  margin-left: calc(-1 * var(--spacing-7));
}

.nr1 {
  margin-right: calc(-1 * var(--spacing-1));
}

.nr2 {
  margin-right: calc(-1 * var(--spacing-2));
}

.nr3 {
  margin-right: calc(-1 * var(--spacing-3));
}

.nr4 {
  margin-right: calc(-1 * var(--spacing-4));
}

.nr5 {
  margin-right: calc(-1 * var(--spacing-5));
}

.nr6 {
  margin-right: calc(-1 * var(--spacing-6));
}

.nr7 {
  margin-right: calc(-1 * var(--spacing-7));
}

.nb1 {
  margin-bottom: calc(-1 * var(--spacing-1));
}

.nb2 {
  margin-bottom: calc(-1 * var(--spacing-2));
}

.nb3 {
  margin-bottom: calc(-1 * var(--spacing-3));
}

.nb4 {
  margin-bottom: calc(-1 * var(--spacing-4));
}

.nb5 {
  margin-bottom: calc(-1 * var(--spacing-5));
}

.nb6 {
  margin-bottom: calc(-1 * var(--spacing-6));
}

.nb7 {
  margin-bottom: calc(-1 * var(--spacing-7));
}

.nt1 {
  margin-top: calc(-1 * var(--spacing-1));
}

.nt2 {
  margin-top: calc(-1 * var(--spacing-2));
}

.nt3 {
  margin-top: calc(-1 * var(--spacing-3));
}

.nt4 {
  margin-top: calc(-1 * var(--spacing-4));
}

.nt5 {
  margin-top: calc(-1 * var(--spacing-5));
}

.nt6 {
  margin-top: calc(-1 * var(--spacing-6));
}

.nt7 {
  margin-top: calc(-1 * var(--spacing-7));
}

@media (max-width: 8rem) {
  .na1-4xs {
    margin: calc(-1 * var(--spacing-1));
  }

  .na2-4xs {
    margin: calc(-1 * var(--spacing-2));
  }

  .na3-4xs {
    margin: calc(-1 * var(--spacing-3));
  }

  .na4-4xs {
    margin: calc(-1 * var(--spacing-4));
  }

  .na5-4xs {
    margin: calc(-1 * var(--spacing-5));
  }

  .na6-4xs {
    margin: calc(-1 * var(--spacing-6));
  }

  .na7-4xs {
    margin: calc(-1 * var(--spacing-7));
  }

  .nl1-4xs {
    margin-left: calc(-1 * var(--spacing-1));
  }

  .nl2-4xs {
    margin-left: calc(-1 * var(--spacing-2));
  }

  .nl3-4xs {
    margin-left: calc(-1 * var(--spacing-3));
  }

  .nl4-4xs {
    margin-left: calc(-1 * var(--spacing-4));
  }

  .nl5-4xs {
    margin-left: calc(-1 * var(--spacing-5));
  }

  .nl6-4xs {
    margin-left: calc(-1 * var(--spacing-6));
  }

  .nl7-4xs {
    margin-left: calc(-1 * var(--spacing-7));
  }

  .nr1-4xs {
    margin-right: calc(-1 * var(--spacing-1));
  }

  .nr2-4xs {
    margin-right: calc(-1 * var(--spacing-2));
  }

  .nr3-4xs {
    margin-right: calc(-1 * var(--spacing-3));
  }

  .nr4-4xs {
    margin-right: calc(-1 * var(--spacing-4));
  }

  .nr5-4xs {
    margin-right: calc(-1 * var(--spacing-5));
  }

  .nr6-4xs {
    margin-right: calc(-1 * var(--spacing-6));
  }

  .nr7-4xs {
    margin-right: calc(-1 * var(--spacing-7));
  }

  .nb1-4xs {
    margin-bottom: calc(-1 * var(--spacing-1));
  }

  .nb2-4xs {
    margin-bottom: calc(-1 * var(--spacing-2));
  }

  .nb3-4xs {
    margin-bottom: calc(-1 * var(--spacing-3));
  }

  .nb4-4xs {
    margin-bottom: calc(-1 * var(--spacing-4));
  }

  .nb5-4xs {
    margin-bottom: calc(-1 * var(--spacing-5));
  }

  .nb6-4xs {
    margin-bottom: calc(-1 * var(--spacing-6));
  }

  .nb7-4xs {
    margin-bottom: calc(-1 * var(--spacing-7));
  }

  .nt1-4xs {
    margin-top: calc(-1 * var(--spacing-1));
  }

  .nt2-4xs {
    margin-top: calc(-1 * var(--spacing-2));
  }

  .nt3-4xs {
    margin-top: calc(-1 * var(--spacing-3));
  }

  .nt4-4xs {
    margin-top: calc(-1 * var(--spacing-4));
  }

  .nt5-4xs {
    margin-top: calc(-1 * var(--spacing-5));
  }

  .nt6-4xs {
    margin-top: calc(-1 * var(--spacing-6));
  }

  .nt7-4xs {
    margin-top: calc(-1 * var(--spacing-7));
  }
}

@media (min-width: calc(8rem + .001px)) {
  .na1-2xs {
    margin: calc(-1 * var(--spacing-1));
  }

  .na2-2xs {
    margin: calc(-1 * var(--spacing-2));
  }

  .na3-2xs {
    margin: calc(-1 * var(--spacing-3));
  }

  .na4-2xs {
    margin: calc(-1 * var(--spacing-4));
  }

  .na5-2xs {
    margin: calc(-1 * var(--spacing-5));
  }

  .na6-2xs {
    margin: calc(-1 * var(--spacing-6));
  }

  .na7-2xs {
    margin: calc(-1 * var(--spacing-7));
  }

  .nl1-2xs {
    margin-left: calc(-1 * var(--spacing-1));
  }

  .nl2-2xs {
    margin-left: calc(-1 * var(--spacing-2));
  }

  .nl3-2xs {
    margin-left: calc(-1 * var(--spacing-3));
  }

  .nl4-2xs {
    margin-left: calc(-1 * var(--spacing-4));
  }

  .nl5-2xs {
    margin-left: calc(-1 * var(--spacing-5));
  }

  .nl6-2xs {
    margin-left: calc(-1 * var(--spacing-6));
  }

  .nl7-2xs {
    margin-left: calc(-1 * var(--spacing-7));
  }

  .nr1-2xs {
    margin-right: calc(-1 * var(--spacing-1));
  }

  .nr2-2xs {
    margin-right: calc(-1 * var(--spacing-2));
  }

  .nr3-2xs {
    margin-right: calc(-1 * var(--spacing-3));
  }

  .nr4-2xs {
    margin-right: calc(-1 * var(--spacing-4));
  }

  .nr5-2xs {
    margin-right: calc(-1 * var(--spacing-5));
  }

  .nr6-2xs {
    margin-right: calc(-1 * var(--spacing-6));
  }

  .nr7-2xs {
    margin-right: calc(-1 * var(--spacing-7));
  }

  .nb1-2xs {
    margin-bottom: calc(-1 * var(--spacing-1));
  }

  .nb2-2xs {
    margin-bottom: calc(-1 * var(--spacing-2));
  }

  .nb3-2xs {
    margin-bottom: calc(-1 * var(--spacing-3));
  }

  .nb4-2xs {
    margin-bottom: calc(-1 * var(--spacing-4));
  }

  .nb5-2xs {
    margin-bottom: calc(-1 * var(--spacing-5));
  }

  .nb6-2xs {
    margin-bottom: calc(-1 * var(--spacing-6));
  }

  .nb7-2xs {
    margin-bottom: calc(-1 * var(--spacing-7));
  }

  .nt1-2xs {
    margin-top: calc(-1 * var(--spacing-1));
  }

  .nt2-2xs {
    margin-top: calc(-1 * var(--spacing-2));
  }

  .nt3-2xs {
    margin-top: calc(-1 * var(--spacing-3));
  }

  .nt4-2xs {
    margin-top: calc(-1 * var(--spacing-4));
  }

  .nt5-2xs {
    margin-top: calc(-1 * var(--spacing-5));
  }

  .nt6-2xs {
    margin-top: calc(-1 * var(--spacing-6));
  }

  .nt7-2xs {
    margin-top: calc(-1 * var(--spacing-7));
  }
}

@media (min-width: 20rem) {
  .na1-xs {
    margin: calc(-1 * var(--spacing-1));
  }

  .na2-xs {
    margin: calc(-1 * var(--spacing-2));
  }

  .na3-xs {
    margin: calc(-1 * var(--spacing-3));
  }

  .na4-xs {
    margin: calc(-1 * var(--spacing-4));
  }

  .na5-xs {
    margin: calc(-1 * var(--spacing-5));
  }

  .na6-xs {
    margin: calc(-1 * var(--spacing-6));
  }

  .na7-xs {
    margin: calc(-1 * var(--spacing-7));
  }

  .nl1-xs {
    margin-left: calc(-1 * var(--spacing-1));
  }

  .nl2-xs {
    margin-left: calc(-1 * var(--spacing-2));
  }

  .nl3-xs {
    margin-left: calc(-1 * var(--spacing-3));
  }

  .nl4-xs {
    margin-left: calc(-1 * var(--spacing-4));
  }

  .nl5-xs {
    margin-left: calc(-1 * var(--spacing-5));
  }

  .nl6-xs {
    margin-left: calc(-1 * var(--spacing-6));
  }

  .nl7-xs {
    margin-left: calc(-1 * var(--spacing-7));
  }

  .nr1-xs {
    margin-right: calc(-1 * var(--spacing-1));
  }

  .nr2-xs {
    margin-right: calc(-1 * var(--spacing-2));
  }

  .nr3-xs {
    margin-right: calc(-1 * var(--spacing-3));
  }

  .nr4-xs {
    margin-right: calc(-1 * var(--spacing-4));
  }

  .nr5-xs {
    margin-right: calc(-1 * var(--spacing-5));
  }

  .nr6-xs {
    margin-right: calc(-1 * var(--spacing-6));
  }

  .nr7-xs {
    margin-right: calc(-1 * var(--spacing-7));
  }

  .nb1-xs {
    margin-bottom: calc(-1 * var(--spacing-1));
  }

  .nb2-xs {
    margin-bottom: calc(-1 * var(--spacing-2));
  }

  .nb3-xs {
    margin-bottom: calc(-1 * var(--spacing-3));
  }

  .nb4-xs {
    margin-bottom: calc(-1 * var(--spacing-4));
  }

  .nb5-xs {
    margin-bottom: calc(-1 * var(--spacing-5));
  }

  .nb6-xs {
    margin-bottom: calc(-1 * var(--spacing-6));
  }

  .nb7-xs {
    margin-bottom: calc(-1 * var(--spacing-7));
  }

  .nt1-xs {
    margin-top: calc(-1 * var(--spacing-1));
  }

  .nt2-xs {
    margin-top: calc(-1 * var(--spacing-2));
  }

  .nt3-xs {
    margin-top: calc(-1 * var(--spacing-3));
  }

  .nt4-xs {
    margin-top: calc(-1 * var(--spacing-4));
  }

  .nt5-xs {
    margin-top: calc(-1 * var(--spacing-5));
  }

  .nt6-xs {
    margin-top: calc(-1 * var(--spacing-6));
  }

  .nt7-xs {
    margin-top: calc(-1 * var(--spacing-7));
  }
}

@media (min-width: 32rem) {
  .na1-s {
    margin: calc(-1 * var(--spacing-1));
  }

  .na2-s {
    margin: calc(-1 * var(--spacing-2));
  }

  .na3-s {
    margin: calc(-1 * var(--spacing-3));
  }

  .na4-s {
    margin: calc(-1 * var(--spacing-4));
  }

  .na5-s {
    margin: calc(-1 * var(--spacing-5));
  }

  .na6-s {
    margin: calc(-1 * var(--spacing-6));
  }

  .na7-s {
    margin: calc(-1 * var(--spacing-7));
  }

  .nl1-s {
    margin-left: calc(-1 * var(--spacing-1));
  }

  .nl2-s {
    margin-left: calc(-1 * var(--spacing-2));
  }

  .nl3-s {
    margin-left: calc(-1 * var(--spacing-3));
  }

  .nl4-s {
    margin-left: calc(-1 * var(--spacing-4));
  }

  .nl5-s {
    margin-left: calc(-1 * var(--spacing-5));
  }

  .nl6-s {
    margin-left: calc(-1 * var(--spacing-6));
  }

  .nl7-s {
    margin-left: calc(-1 * var(--spacing-7));
  }

  .nr1-s {
    margin-right: calc(-1 * var(--spacing-1));
  }

  .nr2-s {
    margin-right: calc(-1 * var(--spacing-2));
  }

  .nr3-s {
    margin-right: calc(-1 * var(--spacing-3));
  }

  .nr4-s {
    margin-right: calc(-1 * var(--spacing-4));
  }

  .nr5-s {
    margin-right: calc(-1 * var(--spacing-5));
  }

  .nr6-s {
    margin-right: calc(-1 * var(--spacing-6));
  }

  .nr7-s {
    margin-right: calc(-1 * var(--spacing-7));
  }

  .nb1-s {
    margin-bottom: calc(-1 * var(--spacing-1));
  }

  .nb2-s {
    margin-bottom: calc(-1 * var(--spacing-2));
  }

  .nb3-s {
    margin-bottom: calc(-1 * var(--spacing-3));
  }

  .nb4-s {
    margin-bottom: calc(-1 * var(--spacing-4));
  }

  .nb5-s {
    margin-bottom: calc(-1 * var(--spacing-5));
  }

  .nb6-s {
    margin-bottom: calc(-1 * var(--spacing-6));
  }

  .nb7-s {
    margin-bottom: calc(-1 * var(--spacing-7));
  }

  .nt1-s {
    margin-top: calc(-1 * var(--spacing-1));
  }

  .nt2-s {
    margin-top: calc(-1 * var(--spacing-2));
  }

  .nt3-s {
    margin-top: calc(-1 * var(--spacing-3));
  }

  .nt4-s {
    margin-top: calc(-1 * var(--spacing-4));
  }

  .nt5-s {
    margin-top: calc(-1 * var(--spacing-5));
  }

  .nt6-s {
    margin-top: calc(-1 * var(--spacing-6));
  }

  .nt7-s {
    margin-top: calc(-1 * var(--spacing-7));
  }
}

@media (min-width: 48rem) {
  .na1-m {
    margin: calc(-1 * var(--spacing-1));
  }

  .na2-m {
    margin: calc(-1 * var(--spacing-2));
  }

  .na3-m {
    margin: calc(-1 * var(--spacing-3));
  }

  .na4-m {
    margin: calc(-1 * var(--spacing-4));
  }

  .na5-m {
    margin: calc(-1 * var(--spacing-5));
  }

  .na6-m {
    margin: calc(-1 * var(--spacing-6));
  }

  .na7-m {
    margin: calc(-1 * var(--spacing-7));
  }

  .nl1-m {
    margin-left: calc(-1 * var(--spacing-1));
  }

  .nl2-m {
    margin-left: calc(-1 * var(--spacing-2));
  }

  .nl3-m {
    margin-left: calc(-1 * var(--spacing-3));
  }

  .nl4-m {
    margin-left: calc(-1 * var(--spacing-4));
  }

  .nl5-m {
    margin-left: calc(-1 * var(--spacing-5));
  }

  .nl6-m {
    margin-left: calc(-1 * var(--spacing-6));
  }

  .nl7-m {
    margin-left: calc(-1 * var(--spacing-7));
  }

  .nr1-m {
    margin-right: calc(-1 * var(--spacing-1));
  }

  .nr2-m {
    margin-right: calc(-1 * var(--spacing-2));
  }

  .nr3-m {
    margin-right: calc(-1 * var(--spacing-3));
  }

  .nr4-m {
    margin-right: calc(-1 * var(--spacing-4));
  }

  .nr5-m {
    margin-right: calc(-1 * var(--spacing-5));
  }

  .nr6-m {
    margin-right: calc(-1 * var(--spacing-6));
  }

  .nr7-m {
    margin-right: calc(-1 * var(--spacing-7));
  }

  .nb1-m {
    margin-bottom: calc(-1 * var(--spacing-1));
  }

  .nb2-m {
    margin-bottom: calc(-1 * var(--spacing-2));
  }

  .nb3-m {
    margin-bottom: calc(-1 * var(--spacing-3));
  }

  .nb4-m {
    margin-bottom: calc(-1 * var(--spacing-4));
  }

  .nb5-m {
    margin-bottom: calc(-1 * var(--spacing-5));
  }

  .nb6-m {
    margin-bottom: calc(-1 * var(--spacing-6));
  }

  .nb7-m {
    margin-bottom: calc(-1 * var(--spacing-7));
  }

  .nt1-m {
    margin-top: calc(-1 * var(--spacing-1));
  }

  .nt2-m {
    margin-top: calc(-1 * var(--spacing-2));
  }

  .nt3-m {
    margin-top: calc(-1 * var(--spacing-3));
  }

  .nt4-m {
    margin-top: calc(-1 * var(--spacing-4));
  }

  .nt5-m {
    margin-top: calc(-1 * var(--spacing-5));
  }

  .nt6-m {
    margin-top: calc(-1 * var(--spacing-6));
  }

  .nt7-m {
    margin-top: calc(-1 * var(--spacing-7));
  }
}

@media (min-width: 64rem) {
  .na1-l {
    margin: calc(-1 * var(--spacing-1));
  }

  .na2-l {
    margin: calc(-1 * var(--spacing-2));
  }

  .na3-l {
    margin: calc(-1 * var(--spacing-3));
  }

  .na4-l {
    margin: calc(-1 * var(--spacing-4));
  }

  .na5-l {
    margin: calc(-1 * var(--spacing-5));
  }

  .na6-l {
    margin: calc(-1 * var(--spacing-6));
  }

  .na7-l {
    margin: calc(-1 * var(--spacing-7));
  }

  .nl1-l {
    margin-left: calc(-1 * var(--spacing-1));
  }

  .nl2-l {
    margin-left: calc(-1 * var(--spacing-2));
  }

  .nl3-l {
    margin-left: calc(-1 * var(--spacing-3));
  }

  .nl4-l {
    margin-left: calc(-1 * var(--spacing-4));
  }

  .nl5-l {
    margin-left: calc(-1 * var(--spacing-5));
  }

  .nl6-l {
    margin-left: calc(-1 * var(--spacing-6));
  }

  .nl7-l {
    margin-left: calc(-1 * var(--spacing-7));
  }

  .nr1-l {
    margin-right: calc(-1 * var(--spacing-1));
  }

  .nr2-l {
    margin-right: calc(-1 * var(--spacing-2));
  }

  .nr3-l {
    margin-right: calc(-1 * var(--spacing-3));
  }

  .nr4-l {
    margin-right: calc(-1 * var(--spacing-4));
  }

  .nr5-l {
    margin-right: calc(-1 * var(--spacing-5));
  }

  .nr6-l {
    margin-right: calc(-1 * var(--spacing-6));
  }

  .nr7-l {
    margin-right: calc(-1 * var(--spacing-7));
  }

  .nb1-l {
    margin-bottom: calc(-1 * var(--spacing-1));
  }

  .nb2-l {
    margin-bottom: calc(-1 * var(--spacing-2));
  }

  .nb3-l {
    margin-bottom: calc(-1 * var(--spacing-3));
  }

  .nb4-l {
    margin-bottom: calc(-1 * var(--spacing-4));
  }

  .nb5-l {
    margin-bottom: calc(-1 * var(--spacing-5));
  }

  .nb6-l {
    margin-bottom: calc(-1 * var(--spacing-6));
  }

  .nb7-l {
    margin-bottom: calc(-1 * var(--spacing-7));
  }

  .nt1-l {
    margin-top: calc(-1 * var(--spacing-1));
  }

  .nt2-l {
    margin-top: calc(-1 * var(--spacing-2));
  }

  .nt3-l {
    margin-top: calc(-1 * var(--spacing-3));
  }

  .nt4-l {
    margin-top: calc(-1 * var(--spacing-4));
  }

  .nt5-l {
    margin-top: calc(-1 * var(--spacing-5));
  }

  .nt6-l {
    margin-top: calc(-1 * var(--spacing-6));
  }

  .nt7-l {
    margin-top: calc(-1 * var(--spacing-7));
  }
}

@media (min-width: 100rem) {
  .na1-xl {
    margin: calc(-1 * var(--spacing-1));
  }

  .na2-xl {
    margin: calc(-1 * var(--spacing-2));
  }

  .na3-xl {
    margin: calc(-1 * var(--spacing-3));
  }

  .na4-xl {
    margin: calc(-1 * var(--spacing-4));
  }

  .na5-xl {
    margin: calc(-1 * var(--spacing-5));
  }

  .na6-xl {
    margin: calc(-1 * var(--spacing-6));
  }

  .na7-xl {
    margin: calc(-1 * var(--spacing-7));
  }

  .nl1-xl {
    margin-left: calc(-1 * var(--spacing-1));
  }

  .nl2-xl {
    margin-left: calc(-1 * var(--spacing-2));
  }

  .nl3-xl {
    margin-left: calc(-1 * var(--spacing-3));
  }

  .nl4-xl {
    margin-left: calc(-1 * var(--spacing-4));
  }

  .nl5-xl {
    margin-left: calc(-1 * var(--spacing-5));
  }

  .nl6-xl {
    margin-left: calc(-1 * var(--spacing-6));
  }

  .nl7-xl {
    margin-left: calc(-1 * var(--spacing-7));
  }

  .nr1-xl {
    margin-right: calc(-1 * var(--spacing-1));
  }

  .nr2-xl {
    margin-right: calc(-1 * var(--spacing-2));
  }

  .nr3-xl {
    margin-right: calc(-1 * var(--spacing-3));
  }

  .nr4-xl {
    margin-right: calc(-1 * var(--spacing-4));
  }

  .nr5-xl {
    margin-right: calc(-1 * var(--spacing-5));
  }

  .nr6-xl {
    margin-right: calc(-1 * var(--spacing-6));
  }

  .nr7-xl {
    margin-right: calc(-1 * var(--spacing-7));
  }

  .nb1-xl {
    margin-bottom: calc(-1 * var(--spacing-1));
  }

  .nb2-xl {
    margin-bottom: calc(-1 * var(--spacing-2));
  }

  .nb3-xl {
    margin-bottom: calc(-1 * var(--spacing-3));
  }

  .nb4-xl {
    margin-bottom: calc(-1 * var(--spacing-4));
  }

  .nb5-xl {
    margin-bottom: calc(-1 * var(--spacing-5));
  }

  .nb6-xl {
    margin-bottom: calc(-1 * var(--spacing-6));
  }

  .nb7-xl {
    margin-bottom: calc(-1 * var(--spacing-7));
  }

  .nt1-xl {
    margin-top: calc(-1 * var(--spacing-1));
  }

  .nt2-xl {
    margin-top: calc(-1 * var(--spacing-2));
  }

  .nt3-xl {
    margin-top: calc(-1 * var(--spacing-3));
  }

  .nt4-xl {
    margin-top: calc(-1 * var(--spacing-4));
  }

  .nt5-xl {
    margin-top: calc(-1 * var(--spacing-5));
  }

  .nt6-xl {
    margin-top: calc(-1 * var(--spacing-6));
  }

  .nt7-xl {
    margin-top: calc(-1 * var(--spacing-7));
  }
}

@media (min-width: 130rem) {
  .na1-2xl {
    margin: calc(-1 * var(--spacing-1));
  }

  .na2-2xl {
    margin: calc(-1 * var(--spacing-2));
  }

  .na3-2xl {
    margin: calc(-1 * var(--spacing-3));
  }

  .na4-2xl {
    margin: calc(-1 * var(--spacing-4));
  }

  .na5-2xl {
    margin: calc(-1 * var(--spacing-5));
  }

  .na6-2xl {
    margin: calc(-1 * var(--spacing-6));
  }

  .na7-2xl {
    margin: calc(-1 * var(--spacing-7));
  }

  .nl1-2xl {
    margin-left: calc(-1 * var(--spacing-1));
  }

  .nl2-2xl {
    margin-left: calc(-1 * var(--spacing-2));
  }

  .nl3-2xl {
    margin-left: calc(-1 * var(--spacing-3));
  }

  .nl4-2xl {
    margin-left: calc(-1 * var(--spacing-4));
  }

  .nl5-2xl {
    margin-left: calc(-1 * var(--spacing-5));
  }

  .nl6-2xl {
    margin-left: calc(-1 * var(--spacing-6));
  }

  .nl7-2xl {
    margin-left: calc(-1 * var(--spacing-7));
  }

  .nr1-2xl {
    margin-right: calc(-1 * var(--spacing-1));
  }

  .nr2-2xl {
    margin-right: calc(-1 * var(--spacing-2));
  }

  .nr3-2xl {
    margin-right: calc(-1 * var(--spacing-3));
  }

  .nr4-2xl {
    margin-right: calc(-1 * var(--spacing-4));
  }

  .nr5-2xl {
    margin-right: calc(-1 * var(--spacing-5));
  }

  .nr6-2xl {
    margin-right: calc(-1 * var(--spacing-6));
  }

  .nr7-2xl {
    margin-right: calc(-1 * var(--spacing-7));
  }

  .nb1-2xl {
    margin-bottom: calc(-1 * var(--spacing-1));
  }

  .nb2-2xl {
    margin-bottom: calc(-1 * var(--spacing-2));
  }

  .nb3-2xl {
    margin-bottom: calc(-1 * var(--spacing-3));
  }

  .nb4-2xl {
    margin-bottom: calc(-1 * var(--spacing-4));
  }

  .nb5-2xl {
    margin-bottom: calc(-1 * var(--spacing-5));
  }

  .nb6-2xl {
    margin-bottom: calc(-1 * var(--spacing-6));
  }

  .nb7-2xl {
    margin-bottom: calc(-1 * var(--spacing-7));
  }

  .nt1-2xl {
    margin-top: calc(-1 * var(--spacing-1));
  }

  .nt2-2xl {
    margin-top: calc(-1 * var(--spacing-2));
  }

  .nt3-2xl {
    margin-top: calc(-1 * var(--spacing-3));
  }

  .nt4-2xl {
    margin-top: calc(-1 * var(--spacing-4));
  }

  .nt5-2xl {
    margin-top: calc(-1 * var(--spacing-5));
  }

  .nt6-2xl {
    margin-top: calc(-1 * var(--spacing-6));
  }

  .nt7-2xl {
    margin-top: calc(-1 * var(--spacing-7));
  }
}

@media (min-width: 200rem) {
  .na1-4xl {
    margin: calc(-1 * var(--spacing-1));
  }

  .na2-4xl {
    margin: calc(-1 * var(--spacing-2));
  }

  .na3-4xl {
    margin: calc(-1 * var(--spacing-3));
  }

  .na4-4xl {
    margin: calc(-1 * var(--spacing-4));
  }

  .na5-4xl {
    margin: calc(-1 * var(--spacing-5));
  }

  .na6-4xl {
    margin: calc(-1 * var(--spacing-6));
  }

  .na7-4xl {
    margin: calc(-1 * var(--spacing-7));
  }

  .nl1-4xl {
    margin-left: calc(-1 * var(--spacing-1));
  }

  .nl2-4xl {
    margin-left: calc(-1 * var(--spacing-2));
  }

  .nl3-4xl {
    margin-left: calc(-1 * var(--spacing-3));
  }

  .nl4-4xl {
    margin-left: calc(-1 * var(--spacing-4));
  }

  .nl5-4xl {
    margin-left: calc(-1 * var(--spacing-5));
  }

  .nl6-4xl {
    margin-left: calc(-1 * var(--spacing-6));
  }

  .nl7-4xl {
    margin-left: calc(-1 * var(--spacing-7));
  }

  .nr1-4xl {
    margin-right: calc(-1 * var(--spacing-1));
  }

  .nr2-4xl {
    margin-right: calc(-1 * var(--spacing-2));
  }

  .nr3-4xl {
    margin-right: calc(-1 * var(--spacing-3));
  }

  .nr4-4xl {
    margin-right: calc(-1 * var(--spacing-4));
  }

  .nr5-4xl {
    margin-right: calc(-1 * var(--spacing-5));
  }

  .nr6-4xl {
    margin-right: calc(-1 * var(--spacing-6));
  }

  .nr7-4xl {
    margin-right: calc(-1 * var(--spacing-7));
  }

  .nb1-4xl {
    margin-bottom: calc(-1 * var(--spacing-1));
  }

  .nb2-4xl {
    margin-bottom: calc(-1 * var(--spacing-2));
  }

  .nb3-4xl {
    margin-bottom: calc(-1 * var(--spacing-3));
  }

  .nb4-4xl {
    margin-bottom: calc(-1 * var(--spacing-4));
  }

  .nb5-4xl {
    margin-bottom: calc(-1 * var(--spacing-5));
  }

  .nb6-4xl {
    margin-bottom: calc(-1 * var(--spacing-6));
  }

  .nb7-4xl {
    margin-bottom: calc(-1 * var(--spacing-7));
  }

  .nt1-4xl {
    margin-top: calc(-1 * var(--spacing-1));
  }

  .nt2-4xl {
    margin-top: calc(-1 * var(--spacing-2));
  }

  .nt3-4xl {
    margin-top: calc(-1 * var(--spacing-3));
  }

  .nt4-4xl {
    margin-top: calc(-1 * var(--spacing-4));
  }

  .nt5-4xl {
    margin-top: calc(-1 * var(--spacing-5));
  }

  .nt6-4xl {
    margin-top: calc(-1 * var(--spacing-6));
  }

  .nt7-4xl {
    margin-top: calc(-1 * var(--spacing-7));
  }
}

/* src/tables.css */
.collapse {
  border-collapse: collapse;
  border-spacing: 0;
}

.striped--light:nth-child(odd) {
  background-color: var(--gray-10);
}

.striped--dark:nth-child(odd) {
  background-color: var(--gray-0);
}

/* src/text-decoration.css */
.strike {
  text-decoration: line-through;
}

.underline {
  text-decoration: underline;
}

.no-underline {
  text-decoration: none;
}

/* src/text-align.css */
.tl {
  text-align: left;
}

.tr {
  text-align: right;
}

.tc {
  text-align: center;
}

.tj {
  text-align: justify;
}

@media (max-width: 8rem) {
  .tl-4xs {
    text-align: left;
  }

  .tr-4xs {
    text-align: right;
  }

  .tc-4xs {
    text-align: center;
  }

  .tj-4xs {
    text-align: justify;
  }
}

@media (min-width: calc(8rem + .001px)) {
  .tl-2xs {
    text-align: left;
  }

  .tr-2xs {
    text-align: right;
  }

  .tc-2xs {
    text-align: center;
  }

  .tj-2xs {
    text-align: justify;
  }
}

@media (min-width: 20rem) {
  .tl-xs {
    text-align: left;
  }

  .tr-xs {
    text-align: right;
  }

  .tc-xs {
    text-align: center;
  }

  .tj-xs {
    text-align: justify;
  }
}

@media (min-width: 32rem) {
  .tl-s {
    text-align: left;
  }

  .tr-s {
    text-align: right;
  }

  .tc-s {
    text-align: center;
  }

  .tj-s {
    text-align: justify;
  }
}

@media (min-width: 48rem) {
  .tl-m {
    text-align: left;
  }

  .tr-m {
    text-align: right;
  }

  .tc-m {
    text-align: center;
  }

  .tj-m {
    text-align: justify;
  }
}

@media (min-width: 64rem) {
  .tl-l {
    text-align: left;
  }

  .tr-l {
    text-align: right;
  }

  .tc-l {
    text-align: center;
  }

  .tj-l {
    text-align: justify;
  }
}

@media (min-width: 100rem) {
  .tl-xl {
    text-align: left;
  }

  .tr-xl {
    text-align: right;
  }

  .tc-xl {
    text-align: center;
  }

  .tj-xl {
    text-align: justify;
  }
}

@media (min-width: 130rem) {
  .tl-2xl {
    text-align: left;
  }

  .tr-2xl {
    text-align: right;
  }

  .tc-2xl {
    text-align: center;
  }

  .tj-2xl {
    text-align: justify;
  }
}

@media (min-width: 200rem) {
  .tl-4xl {
    text-align: left;
  }

  .tr-4xl {
    text-align: right;
  }

  .tc-4xl {
    text-align: center;
  }

  .tj-4xl {
    text-align: justify;
  }
}

/* src/text-transform.css */
.ttc {
  text-transform: capitalize;
}

.ttl {
  text-transform: lowercase;
}

.ttu {
  text-transform: uppercase;
}

.ttn {
  text-transform: none;
}

@media (max-width: 8rem) {
  .ttc-4xs {
    text-transform: capitalize;
  }

  .ttl-4xs {
    text-transform: lowercase;
  }

  .ttu-4xs {
    text-transform: uppercase;
  }

  .ttn-4xs {
    text-transform: none;
  }
}

@media (min-width: calc(8rem + .001px)) {
  .ttc-2xs {
    text-transform: capitalize;
  }

  .ttl-2xs {
    text-transform: lowercase;
  }

  .ttu-2xs {
    text-transform: uppercase;
  }

  .ttn-2xs {
    text-transform: none;
  }
}

@media (min-width: 20rem) {
  .ttc-xs {
    text-transform: capitalize;
  }

  .ttl-xs {
    text-transform: lowercase;
  }

  .ttu-xs {
    text-transform: uppercase;
  }

  .ttn-xs {
    text-transform: none;
  }
}

@media (min-width: 32rem) {
  .ttc-s {
    text-transform: capitalize;
  }

  .ttl-s {
    text-transform: lowercase;
  }

  .ttu-s {
    text-transform: uppercase;
  }

  .ttn-s {
    text-transform: none;
  }
}

@media (min-width: 48rem) {
  .ttc-m {
    text-transform: capitalize;
  }

  .ttl-m {
    text-transform: lowercase;
  }

  .ttu-m {
    text-transform: uppercase;
  }

  .ttn-m {
    text-transform: none;
  }
}

@media (min-width: 64rem) {
  .ttc-l {
    text-transform: capitalize;
  }

  .ttl-l {
    text-transform: lowercase;
  }

  .ttu-l {
    text-transform: uppercase;
  }

  .ttn-l {
    text-transform: none;
  }
}

@media (min-width: 100rem) {
  .ttc-xl {
    text-transform: capitalize;
  }

  .ttl-xl {
    text-transform: lowercase;
  }

  .ttu-xl {
    text-transform: uppercase;
  }

  .ttn-xl {
    text-transform: none;
  }
}

@media (min-width: 130rem) {
  .ttc-2xl {
    text-transform: capitalize;
  }

  .ttl-2xl {
    text-transform: lowercase;
  }

  .ttu-2xl {
    text-transform: uppercase;
  }

  .ttn-2xl {
    text-transform: none;
  }
}

@media (min-width: 200rem) {
  .ttc-4xl {
    text-transform: capitalize;
  }

  .ttl-4xl {
    text-transform: lowercase;
  }

  .ttu-4xl {
    text-transform: uppercase;
  }

  .ttn-4xl {
    text-transform: none;
  }
}

/* src/transform.css */
.transform {
  transition-property: transform, translate, scale, rotate;
}

/* src/type-scale.css */
.f1 {
  font-size: var(--font-size-1, .75rem);
}

.f2 {
  font-size: var(--font-size-2, .875rem);
}

.f3 {
  font-size: var(--font-size-3, 1rem);
}

.f4 {
  font-size: var(--font-size-4, 1.125rem);
}

.f5 {
  font-size: var(--font-size-5, 1.25rem);
}

.f6 {
  font-size: var(--font-size-6, 1.5rem);
}

.f7 {
  font-size: var(--font-size-7, 2rem);
}

.f8 {
  font-size: var(--font-size-8, 3rem);
}

.f9 {
  font-size: var(--font-size-9, 4rem);
}

.f10 {
  font-size: var(--font-size-10, 6rem);
}

.f11 {
  font-size: var(--font-size-11, 8rem);
}

.f12 {
  font-size: var(--font-size-12, 12rem);
}

@media (max-width: 8rem) {
  .f1-4xs {
    font-size: var(--font-size-1, .75rem);
  }

  .f2-4xs {
    font-size: var(--font-size-2, .875rem);
  }

  .f3-4xs {
    font-size: var(--font-size-3, 1rem);
  }

  .f4-4xs {
    font-size: var(--font-size-4, 1.125rem);
  }

  .f5-4xs {
    font-size: var(--font-size-5, 1.25rem);
  }

  .f6-4xs {
    font-size: var(--font-size-6, 1.5rem);
  }

  .f7-4xs {
    font-size: var(--font-size-7, 2rem);
  }

  .f8-4xs {
    font-size: var(--font-size-8, 3rem);
  }

  .f9-4xs {
    font-size: var(--font-size-9, 4rem);
  }

  .f10-4xs {
    font-size: var(--font-size-10, 6rem);
  }

  .f11-4xs {
    font-size: var(--font-size-11, 8rem);
  }

  .f12-4xs {
    font-size: var(--font-size-12, 12rem);
  }
}

@media (min-width: calc(8rem + .001px)) {
  .f1-2xs {
    font-size: var(--font-size-1, .75rem);
  }

  .f2-2xs {
    font-size: var(--font-size-2, .875rem);
  }

  .f3-2xs {
    font-size: var(--font-size-3, 1rem);
  }

  .f4-2xs {
    font-size: var(--font-size-4, 1.125rem);
  }

  .f5-2xs {
    font-size: var(--font-size-5, 1.25rem);
  }

  .f6-2xs {
    font-size: var(--font-size-6, 1.5rem);
  }

  .f7-2xs {
    font-size: var(--font-size-7, 2rem);
  }

  .f8-2xs {
    font-size: var(--font-size-8, 3rem);
  }

  .f9-2xs {
    font-size: var(--font-size-9, 4rem);
  }

  .f10-2xs {
    font-size: var(--font-size-10, 6rem);
  }

  .f11-2xs {
    font-size: var(--font-size-11, 8rem);
  }

  .f12-2xs {
    font-size: var(--font-size-12, 12rem);
  }
}

@media (min-width: 20rem) {
  .f1-xs {
    font-size: var(--font-size-1, .75rem);
  }

  .f2-xs {
    font-size: var(--font-size-2, .875rem);
  }

  .f3-xs {
    font-size: var(--font-size-3, 1rem);
  }

  .f4-xs {
    font-size: var(--font-size-4, 1.125rem);
  }

  .f5-xs {
    font-size: var(--font-size-5, 1.25rem);
  }

  .f6-xs {
    font-size: var(--font-size-6, 1.5rem);
  }

  .f7-xs {
    font-size: var(--font-size-7, 2rem);
  }

  .f8-xs {
    font-size: var(--font-size-8, 3rem);
  }

  .f9-xs {
    font-size: var(--font-size-9, 4rem);
  }

  .f10-xs {
    font-size: var(--font-size-10, 6rem);
  }

  .f11-xs {
    font-size: var(--font-size-11, 8rem);
  }

  .f12-xs {
    font-size: var(--font-size-12, 12rem);
  }
}

@media (min-width: 32rem) {
  .f1-s {
    font-size: var(--font-size-1, .75rem);
  }

  .f2-s {
    font-size: var(--font-size-2, .875rem);
  }

  .f3-s {
    font-size: var(--font-size-3, 1rem);
  }

  .f4-s {
    font-size: var(--font-size-4, 1.125rem);
  }

  .f5-s {
    font-size: var(--font-size-5, 1.25rem);
  }

  .f6-s {
    font-size: var(--font-size-6, 1.5rem);
  }

  .f7-s {
    font-size: var(--font-size-7, 2rem);
  }

  .f8-s {
    font-size: var(--font-size-8, 3rem);
  }

  .f9-s {
    font-size: var(--font-size-9, 4rem);
  }

  .f10-s {
    font-size: var(--font-size-10, 6rem);
  }

  .f11-s {
    font-size: var(--font-size-11, 8rem);
  }

  .f12-s {
    font-size: var(--font-size-12, 12rem);
  }
}

@media (min-width: 48rem) {
  .f1-m {
    font-size: var(--font-size-1, .75rem);
  }

  .f2-m {
    font-size: var(--font-size-2, .875rem);
  }

  .f3-m {
    font-size: var(--font-size-3, 1rem);
  }

  .f4-m {
    font-size: var(--font-size-4, 1.125rem);
  }

  .f5-m {
    font-size: var(--font-size-5, 1.25rem);
  }

  .f6-m {
    font-size: var(--font-size-6, 1.5rem);
  }

  .f7-m {
    font-size: var(--font-size-7, 2rem);
  }

  .f8-m {
    font-size: var(--font-size-8, 3rem);
  }

  .f9-m {
    font-size: var(--font-size-9, 4rem);
  }

  .f10-m {
    font-size: var(--font-size-10, 6rem);
  }

  .f11-m {
    font-size: var(--font-size-11, 8rem);
  }

  .f12-m {
    font-size: var(--font-size-12, 12rem);
  }
}

@media (min-width: 64rem) {
  .f1-l {
    font-size: var(--font-size-1, .75rem);
  }

  .f2-l {
    font-size: var(--font-size-2, .875rem);
  }

  .f3-l {
    font-size: var(--font-size-3, 1rem);
  }

  .f4-l {
    font-size: var(--font-size-4, 1.125rem);
  }

  .f5-l {
    font-size: var(--font-size-5, 1.25rem);
  }

  .f6-l {
    font-size: var(--font-size-6, 1.5rem);
  }

  .f7-l {
    font-size: var(--font-size-7, 2rem);
  }

  .f8-l {
    font-size: var(--font-size-8, 3rem);
  }

  .f9-l {
    font-size: var(--font-size-9, 4rem);
  }

  .f10-l {
    font-size: var(--font-size-10, 6rem);
  }

  .f11-l {
    font-size: var(--font-size-11, 8rem);
  }

  .f12-l {
    font-size: var(--font-size-12, 12rem);
  }
}

@media (min-width: 100rem) {
  .f1-xl {
    font-size: var(--font-size-1, .75rem);
  }

  .f2-xl {
    font-size: var(--font-size-2, .875rem);
  }

  .f3-xl {
    font-size: var(--font-size-3, 1rem);
  }

  .f4-xl {
    font-size: var(--font-size-4, 1.125rem);
  }

  .f5-xl {
    font-size: var(--font-size-5, 1.25rem);
  }

  .f6-xl {
    font-size: var(--font-size-6, 1.5rem);
  }

  .f7-xl {
    font-size: var(--font-size-7, 2rem);
  }

  .f8-xl {
    font-size: var(--font-size-8, 3rem);
  }

  .f9-xl {
    font-size: var(--font-size-9, 4rem);
  }

  .f10-xl {
    font-size: var(--font-size-10, 6rem);
  }

  .f11-xl {
    font-size: var(--font-size-11, 8rem);
  }

  .f12-xl {
    font-size: var(--font-size-12, 12rem);
  }
}

@media (min-width: 130rem) {
  .f1-2xl {
    font-size: var(--font-size-1, .75rem);
  }

  .f2-2xl {
    font-size: var(--font-size-2, .875rem);
  }

  .f3-2xl {
    font-size: var(--font-size-3, 1rem);
  }

  .f4-2xl {
    font-size: var(--font-size-4, 1.125rem);
  }

  .f5-2xl {
    font-size: var(--font-size-5, 1.25rem);
  }

  .f6-2xl {
    font-size: var(--font-size-6, 1.5rem);
  }

  .f7-2xl {
    font-size: var(--font-size-7, 2rem);
  }

  .f8-2xl {
    font-size: var(--font-size-8, 3rem);
  }

  .f9-2xl {
    font-size: var(--font-size-9, 4rem);
  }

  .f10-2xl {
    font-size: var(--font-size-10, 6rem);
  }

  .f11-2xl {
    font-size: var(--font-size-11, 8rem);
  }

  .f12-2xl {
    font-size: var(--font-size-12, 12rem);
  }
}

@media (min-width: 200rem) {
  .f1-4xl {
    font-size: var(--font-size-1, .75rem);
  }

  .f2-4xl {
    font-size: var(--font-size-2, .875rem);
  }

  .f3-4xl {
    font-size: var(--font-size-3, 1rem);
  }

  .f4-4xl {
    font-size: var(--font-size-4, 1.125rem);
  }

  .f5-4xl {
    font-size: var(--font-size-5, 1.25rem);
  }

  .f6-4xl {
    font-size: var(--font-size-6, 1.5rem);
  }

  .f7-4xl {
    font-size: var(--font-size-7, 2rem);
  }

  .f8-4xl {
    font-size: var(--font-size-8, 3rem);
  }

  .f9-4xl {
    font-size: var(--font-size-9, 4rem);
  }

  .f10-4xl {
    font-size: var(--font-size-10, 6rem);
  }

  .f11-4xl {
    font-size: var(--font-size-11, 8rem);
  }

  .f12-4xl {
    font-size: var(--font-size-12, 12rem);
  }
}

/* src/typography.css */
.measure {
  max-width: var(--measure, 66ch);
}

.measure-wide {
  max-width: var(--measure-wide, 80ch);
}

.measure-narrow {
  max-width: var(--measure-narrow, 45ch);
}

.indent {
  text-indent: 1em;
  margin-top: 0;
  margin-bottom: 0;
}

.small-caps {
  font-variant: small-caps;
}

.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 8rem) {
  .measure-4xs {
    max-width: var(--measure, 66ch);
  }

  .measure-wide-4xs {
    max-width: var(--measure-wide, 80ch);
  }

  .measure-narrow-4xs {
    max-width: var(--measure-narrow, 45ch);
  }

  .indent-4xs {
    text-indent: 1em;
    margin-top: 0;
    margin-bottom: 0;
  }

  .small-caps-4xs {
    font-variant: small-caps;
  }

  .truncate-4xs {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

@media (min-width: calc(8rem + .001px)) {
  .measure-2xs {
    max-width: var(--measure, 66ch);
  }

  .measure-wide-2xs {
    max-width: var(--measure-wide, 80ch);
  }

  .measure-narrow-2xs {
    max-width: var(--measure-narrow, 45ch);
  }

  .indent-2xs {
    text-indent: 1em;
    margin-top: 0;
    margin-bottom: 0;
  }

  .small-caps-2xs {
    font-variant: small-caps;
  }

  .truncate-2xs {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

@media (min-width: 20rem) {
  .measure-xs {
    max-width: var(--measure, 66ch);
  }

  .measure-wide-xs {
    max-width: var(--measure-wide, 80ch);
  }

  .measure-narrow-xs {
    max-width: var(--measure-narrow, 45ch);
  }

  .indent-xs {
    text-indent: 1em;
    margin-top: 0;
    margin-bottom: 0;
  }

  .small-caps-xs {
    font-variant: small-caps;
  }

  .truncate-xs {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

@media (min-width: 32rem) {
  .measure-s {
    max-width: var(--measure, 66ch);
  }

  .measure-wide-s {
    max-width: var(--measure-wide, 80ch);
  }

  .measure-narrow-s {
    max-width: var(--measure-narrow, 45ch);
  }

  .indent-s {
    text-indent: 1em;
    margin-top: 0;
    margin-bottom: 0;
  }

  .small-caps-s {
    font-variant: small-caps;
  }

  .truncate-s {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

@media (min-width: 48rem) {
  .measure-m {
    max-width: var(--measure, 66ch);
  }

  .measure-wide-m {
    max-width: var(--measure-wide, 80ch);
  }

  .measure-narrow-m {
    max-width: var(--measure-narrow, 45ch);
  }

  .indent-m {
    text-indent: 1em;
    margin-top: 0;
    margin-bottom: 0;
  }

  .small-caps-m {
    font-variant: small-caps;
  }

  .truncate-m {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

@media (min-width: 64rem) {
  .measure-l {
    max-width: var(--measure, 66ch);
  }

  .measure-wide-l {
    max-width: var(--measure-wide, 80ch);
  }

  .measure-narrow-l {
    max-width: var(--measure-narrow, 45ch);
  }

  .indent-l {
    text-indent: 1em;
    margin-top: 0;
    margin-bottom: 0;
  }

  .small-caps-l {
    font-variant: small-caps;
  }

  .truncate-l {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

@media (min-width: 100rem) {
  .measure-xl {
    max-width: var(--measure, 66ch);
  }

  .measure-wide-xl {
    max-width: var(--measure-wide, 80ch);
  }

  .measure-narrow-xl {
    max-width: var(--measure-narrow, 45ch);
  }

  .indent-xl {
    text-indent: 1em;
    margin-top: 0;
    margin-bottom: 0;
  }

  .small-caps-xl {
    font-variant: small-caps;
  }

  .truncate-xl {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

@media (min-width: 130rem) {
  .measure-2xl {
    max-width: var(--measure, 66ch);
  }

  .measure-wide-2xl {
    max-width: var(--measure-wide, 80ch);
  }

  .measure-narrow-2xl {
    max-width: var(--measure-narrow, 45ch);
  }

  .indent-2xl {
    text-indent: 1em;
    margin-top: 0;
    margin-bottom: 0;
  }

  .small-caps-2xl {
    font-variant: small-caps;
  }

  .truncate-2xl {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

@media (min-width: 200rem) {
  .measure-4xl {
    max-width: var(--measure, 66ch);
  }

  .measure-wide-4xl {
    max-width: var(--measure-wide, 80ch);
  }

  .measure-narrow-4xl {
    max-width: var(--measure-narrow, 45ch);
  }

  .indent-4xl {
    text-indent: 1em;
    margin-top: 0;
    margin-bottom: 0;
  }

  .small-caps-4xl {
    font-variant: small-caps;
  }

  .truncate-4xl {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* src/utilities.css */
.m-center {
  margin-left: auto;
  margin-right: auto;
}

.mr-auto {
  margin-right: auto;
}

.ml-auto {
  margin-left: auto;
}

@media (max-width: 8rem) {
  .m-center-4xs {
    margin-left: auto;
    margin-right: auto;
  }

  .mr-auto-4xs {
    margin-right: auto;
  }

  .ml-auto-4xs {
    margin-left: auto;
  }
}

@media (min-width: calc(8rem + .001px)) {
  .m-center-2xs {
    margin-left: auto;
    margin-right: auto;
  }

  .mr-auto-2xs {
    margin-right: auto;
  }

  .ml-auto-2xs {
    margin-left: auto;
  }
}

@media (min-width: 20rem) {
  .m-center-xs {
    margin-left: auto;
    margin-right: auto;
  }

  .mr-auto-xs {
    margin-right: auto;
  }

  .ml-auto-xs {
    margin-left: auto;
  }
}

@media (min-width: 32rem) {
  .m-center-s {
    margin-left: auto;
    margin-right: auto;
  }

  .mr-auto-s {
    margin-right: auto;
  }

  .ml-auto-s {
    margin-left: auto;
  }
}

@media (min-width: 48rem) {
  .m-center-m {
    margin-left: auto;
    margin-right: auto;
  }

  .mr-auto-m {
    margin-right: auto;
  }

  .ml-auto-m {
    margin-left: auto;
  }
}

@media (min-width: 64rem) {
  .m-center-l {
    margin-left: auto;
    margin-right: auto;
  }

  .mr-auto-l {
    margin-right: auto;
  }

  .ml-auto-l {
    margin-left: auto;
  }
}

@media (min-width: 100rem) {
  .m-center-xl {
    margin-left: auto;
    margin-right: auto;
  }

  .mr-auto-xl {
    margin-right: auto;
  }

  .ml-auto-xl {
    margin-left: auto;
  }
}

@media (min-width: 130rem) {
  .m-center-2xl {
    margin-left: auto;
    margin-right: auto;
  }

  .mr-auto-2xl {
    margin-right: auto;
  }

  .ml-auto-2xl {
    margin-left: auto;
  }
}

@media (min-width: 200rem) {
  .m-center-4xl {
    margin-left: auto;
    margin-right: auto;
  }

  .mr-auto-4xl {
    margin-right: auto;
  }

  .ml-auto-4xl {
    margin-left: auto;
  }
}

.select-none {
  user-select: none;
}

/* src/visibility.css */
.clip {
  clip: rect(0 0 0 0);
  overflow: hidden;
  position: absolute;
  border: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
}

@media (max-width: 8rem) {
  .clip-4xs {
    clip: rect(0 0 0 0);
    overflow: hidden;
    position: absolute;
    border: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
  }
}

@media (min-width: calc(8rem + .001px)) {
  .clip-2xs {
    clip: rect(0 0 0 0);
    overflow: hidden;
    position: absolute;
    border: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
  }
}

@media (min-width: 20rem) {
  .clip-xs {
    clip: rect(0 0 0 0);
    overflow: hidden;
    position: absolute;
    border: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
  }
}

@media (min-width: 32rem) {
  .clip-s {
    clip: rect(0 0 0 0);
    overflow: hidden;
    position: absolute;
    border: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
  }
}

@media (min-width: 48rem) {
  .clip-m {
    clip: rect(0 0 0 0);
    overflow: hidden;
    position: absolute;
    border: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
  }
}

@media (min-width: 64rem) {
  .clip-l {
    clip: rect(0 0 0 0);
    overflow: hidden;
    position: absolute;
    border: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
  }
}

@media (min-width: 100rem) {
  .clip-xl {
    clip: rect(0 0 0 0);
    overflow: hidden;
    position: absolute;
    border: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
  }
}

@media (min-width: 130rem) {
  .clip-2xl {
    clip: rect(0 0 0 0);
    overflow: hidden;
    position: absolute;
    border: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
  }
}

@media (min-width: 200rem) {
  .clip-4xl {
    clip: rect(0 0 0 0);
    overflow: hidden;
    position: absolute;
    border: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
  }
}

/* src/white-space.css */
.ws-normal {
  white-space: normal;
}

.nowrap {
  white-space: nowrap;
}

.pre {
  white-space: pre;
}

@media (max-width: 8rem) {
  .ws-normal-4xs {
    white-space: normal;
  }

  .nowrap-4xs {
    white-space: nowrap;
  }

  .pre-4xs {
    white-space: pre;
  }
}

@media (min-width: calc(8rem + .001px)) {
  .ws-normal-2xs {
    white-space: normal;
  }

  .nowrap-2xs {
    white-space: nowrap;
  }

  .pre-2xs {
    white-space: pre;
  }
}

@media (min-width: 20rem) {
  .ws-normal-xs {
    white-space: normal;
  }

  .nowrap-xs {
    white-space: nowrap;
  }

  .pre-xs {
    white-space: pre;
  }
}

@media (min-width: 32rem) {
  .ws-normal-s {
    white-space: normal;
  }

  .nowrap-s {
    white-space: nowrap;
  }

  .pre-s {
    white-space: pre;
  }
}

@media (min-width: 48rem) {
  .ws-normal-m {
    white-space: normal;
  }

  .nowrap-m {
    white-space: nowrap;
  }

  .pre-m {
    white-space: pre;
  }
}

@media (min-width: 64rem) {
  .ws-normal-l {
    white-space: normal;
  }

  .nowrap-l {
    white-space: nowrap;
  }

  .pre-l {
    white-space: pre;
  }
}

@media (min-width: 100rem) {
  .ws-normal-xl {
    white-space: normal;
  }

  .nowrap-xl {
    white-space: nowrap;
  }

  .pre-xl {
    white-space: pre;
  }
}

@media (min-width: 130rem) {
  .ws-normal-2xl {
    white-space: normal;
  }

  .nowrap-2xl {
    white-space: nowrap;
  }

  .pre-2xl {
    white-space: pre;
  }
}

@media (min-width: 200rem) {
  .ws-normal-4xl {
    white-space: normal;
  }

  .nowrap-4xl {
    white-space: nowrap;
  }

  .pre-4xl {
    white-space: pre;
  }
}

/* src/vertical-align.css */
.v-baseline {
  vertical-align: baseline;
}

.v-middle {
  vertical-align: middle;
}

.v-top {
  vertical-align: top;
}

.v-bottom {
  vertical-align: bottom;
}

@media (max-width: 8rem) {
  .v-baseline-4xs {
    vertical-align: baseline;
  }

  .v-middle-4xs {
    vertical-align: middle;
  }

  .v-top-4xs {
    vertical-align: top;
  }

  .v-bottom-4xs {
    vertical-align: bottom;
  }
}

@media (min-width: calc(8rem + .001px)) {
  .v-baseline-2xs {
    vertical-align: baseline;
  }

  .v-middle-2xs {
    vertical-align: middle;
  }

  .v-top-2xs {
    vertical-align: top;
  }

  .v-bottom-2xs {
    vertical-align: bottom;
  }
}

@media (min-width: 20rem) {
  .v-baseline-xs {
    vertical-align: baseline;
  }

  .v-middle-xs {
    vertical-align: middle;
  }

  .v-top-xs {
    vertical-align: top;
  }

  .v-bottom-xs {
    vertical-align: bottom;
  }
}

@media (min-width: 32rem) {
  .v-baseline-s {
    vertical-align: baseline;
  }

  .v-middle-s {
    vertical-align: middle;
  }

  .v-top-s {
    vertical-align: top;
  }

  .v-bottom-s {
    vertical-align: bottom;
  }
}

@media (min-width: 48rem) {
  .v-baseline-m {
    vertical-align: baseline;
  }

  .v-middle-m {
    vertical-align: middle;
  }

  .v-top-m {
    vertical-align: top;
  }

  .v-bottom-m {
    vertical-align: bottom;
  }
}

@media (min-width: 64rem) {
  .v-baseline-l {
    vertical-align: baseline;
  }

  .v-middle-l {
    vertical-align: middle;
  }

  .v-top-l {
    vertical-align: top;
  }

  .v-bottom-l {
    vertical-align: bottom;
  }
}

@media (min-width: 100rem) {
  .v-baseline-xl {
    vertical-align: baseline;
  }

  .v-middle-xl {
    vertical-align: middle;
  }

  .v-top-xl {
    vertical-align: top;
  }

  .v-bottom-xl {
    vertical-align: bottom;
  }
}

@media (min-width: 130rem) {
  .v-baseline-2xl {
    vertical-align: baseline;
  }

  .v-middle-2xl {
    vertical-align: middle;
  }

  .v-top-2xl {
    vertical-align: top;
  }

  .v-bottom-2xl {
    vertical-align: bottom;
  }
}

@media (min-width: 200rem) {
  .v-baseline-4xl {
    vertical-align: baseline;
  }

  .v-middle-4xl {
    vertical-align: middle;
  }

  .v-top-4xl {
    vertical-align: top;
  }

  .v-bottom-4xl {
    vertical-align: bottom;
  }
}

/* src/hovers.css */
.dim {
  opacity: 1;
  transition: opacity .15s ease-in;
}

.dim:hover, .dim:focus {
  opacity: .5;
  transition: opacity .15s ease-in;
}

.dim:active {
  opacity: .8;
  transition: opacity .15s ease-out;
}

.glow {
  transition: opacity .15s ease-in;
}

.glow:hover, .glow:focus {
  opacity: 1;
  transition: opacity .15s ease-in;
}

.hide-child .child {
  opacity: 0;
  transition: opacity .15s ease-in;
}

.hide-child:hover .child, .hide-child:focus .child, .hide-child:active .child {
  opacity: 1;
  transition: opacity .15s ease-in;
}

.underline-hover:hover, .underline-hover:focus {
  text-decoration: underline;
}

.grow {
  -moz-osx-font-smoothing: grayscale;
  backface-visibility: hidden;
  transition: transform .25s ease-out;
  transform: translateZ(0);
}

.grow:hover, .grow:focus {
  transform: scale(1.05);
}

.grow:active {
  transform: scale(.9);
}

.grow-large {
  -moz-osx-font-smoothing: grayscale;
  backface-visibility: hidden;
  transition: transform .25s ease-in-out;
  transform: translateZ(0);
}

.grow-large:hover, .grow-large:focus {
  transform: scale(1.2);
}

.grow-large:active {
  transform: scale(.95);
}

.pointer {
  cursor: pointer;
}

.no-pointer {
  cursor: default;
}

.trans-all {
  transition: all .25s cubic-bezier(.165,.84,.44,1);
}

.trans-bg {
  transition: background-color .25s ease-in-out;
}

.trans-color {
  transition: color .25s ease-in-out;
}

.hover-filter-none:hover {
  filter: none;
}

.hover-filter-blur-none:hover {
  filter: blur(0);
}

.hover-filter-blur:hover {
  filter: blur(96px);
}

.hover-grayscale-0:hover {
  filter: grayscale(0);
}

.hover-grayscale-50:hover {
  filter: grayscale(50%);
}

.hover-grayscale-100:hover {
  filter: grayscale(100%);
}

/* src/z-index.css */
.z-0 {
  z-index: 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;
}

.z-max {
  z-index: 2147480000;
}

.z-inherit {
  z-index: inherit;
}

.z-initial {
  z-index: initial;
}

.z-unset {
  z-index: unset;
}

/* src/nested.css */
.nested-copy-line-height p, .nested-copy-line-height ul, .nested-copy-line-height ol {
  line-height: var(--line-height-body, 1.5);
}

.nested-headline-line-height h1, .nested-headline-line-height h2, .nested-headline-line-height h3, .nested-headline-line-height h4, .nested-headline-line-height h5, .nested-headline-line-height h6 {
  line-height: var(--line-height-title, 1.25);
}

.nested-list-reset ul, .nested-list-reset ol {
  list-style-type: none;
  margin-left: 0;
  padding-left: 0;
}

.nested-copy-indent p + p {
  text-indent: 1em;
  margin-top: 0;
  margin-bottom: 0;
}

.nested-copy-separator p + p {
  margin-top: 1.5em;
}

.nested-img img {
  display: block;
  width: 100%;
  max-width: 100%;
}

.nested-links a {
  color: var(--blue-5);
  transition: color .15s ease-in;
}

.nested-links a:hover, .nested-links a:focus {
  color: var(--blue-3);
  transition: color .15s ease-in;
}

/* src/debug-children.css */
.debug * {
  --debug-color: 128 0 90;
  --debug-opacity: .8;
  outline: 1px solid rbg(var(--debug-color, 128 0 90) / (--debug-opacity, .8));
}

/* src/debug-grid.css */
.debug-grid {
  --grid-size: 16px;
  --grid-color: var(--magenta-9);
  background-image: repeating-linear-gradient(0deg, var(--grid-color), var(--grid-color) 1px, transparent 1px, transparent var(--grid-size)), repeating-linear-gradient(90deg, var(--grid-color), var(--grid-color) 1px, transparent 1px, transparent var(--grid-size));
  background-size: 100% var(--grid-size);
}

/* src/index.css */