*, *::after, *::before { box-sizing: inherit; }

* { font: inherit; }

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video, hr { margin: 0; padding: 0; border: 0; }

html { box-sizing: border-box; }

body { background-color: var(--color-bg, white); }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, main, form legend { display: block; }

ol, ul { list-style: none; }

blockquote, q { quotes: none; }

button, input, textarea, select { margin: 0; }

.btn, .form-control, .link, .reset { background-color: transparent; padding: 0; border: 0; border-radius: 0; color: inherit; line-height: inherit; -webkit-appearance: none; -moz-appearance: none; appearance: none; }

select.form-control::-ms-expand { display: none; }

textarea { resize: vertical; overflow: auto; vertical-align: top; }

input::-ms-clear { display: none; }

table { border-collapse: collapse; border-spacing: 0; }

img, video, svg { max-width: 100%; }

[data-theme] { background-color: var(--color-bg, white); color: var(--color-contrast-high, #313135); }

:root { --space-unit:  1em; }

:root, * { --space-xxxxs: calc(0.125 * var(--space-unit)); --space-xxxs:  calc(0.25 * var(--space-unit)); --space-xxs:   calc(0.375 * var(--space-unit)); --space-xs:    calc(0.5 * var(--space-unit)); --space-sm:    calc(0.75 * var(--space-unit)); --space-md:    calc(1.25 * var(--space-unit)); --space-lg:    calc(2 * var(--space-unit)); --space-xl:    calc(3.25 * var(--space-unit)); --space-xxl:   calc(5.25 * var(--space-unit)); --space-xxxl:  calc(8.5 * var(--space-unit)); --space-xxxxl: calc(13.75 * var(--space-unit)); --component-padding: var(--space-md); }

.container { width: calc(100% - 2*var(--component-padding)); margin-left: auto; margin-right: auto; }

.grid { --gap: 0px; --gap-x: var(--gap); --gap-y: var(--gap); --offset: var(--gap-x); display: flex; flex-wrap: wrap; }

.grid > * { flex-basis: 100%; max-width: 100%; min-width: 0; }

/* #region (fallback for older browsers) */
[class*="gap-xxxxs"], [class*="gap-xxxs"], [class*="gap-xxs"], [class*="gap-xs"], [class*="gap-sm"], [class*="gap-md"], [class*="gap-lg"], [class*="gap-xl"], [class*="gap-xxl"], [class*="gap-xxxl"], [class*="gap-xxxxl"], [class*="grid-gap-"], [class*="flex-gap-"] { margin-bottom: -0.75em; margin-left: -0.75em; }

[class*="gap-xxxxs"] > *, [class*="gap-xxxs"] > *, [class*="gap-xxs"] > *, [class*="gap-xs"] > *, [class*="gap-sm"] > *, [class*="gap-md"] > *, [class*="gap-lg"] > *, [class*="gap-xl"] > *, [class*="gap-xxl"] > *, [class*="gap-xxxl"] > *, [class*="gap-xxxxl"] > *, [class*="grid-gap-"] > *, [class*="flex-gap-"] > * { margin-bottom: 0.75em; margin-left: 0.75em; }

[class*="gap-x-xxxxs"], [class*="gap-x-xxxs"], [class*="gap-x-xxs"], [class*="gap-x-xs"], [class*="gap-x-sm"], [class*="gap-x-md"], [class*="gap-x-lg"], [class*="gap-x-xl"], [class*="gap-x-xxl"], [class*="gap-x-xxxl"], [class*="gap-x-xxxxl"] { margin-left: -0.75em; }

[class*="gap-x-xxxxs"] > *, [class*="gap-x-xxxs"] > *, [class*="gap-x-xxs"] > *, [class*="gap-x-xs"] > *, [class*="gap-x-sm"] > *, [class*="gap-x-md"] > *, [class*="gap-x-lg"] > *, [class*="gap-x-xl"] > *, [class*="gap-x-xxl"] > *, [class*="gap-x-xxxl"] > *, [class*="gap-x-xxxxl"] > * { margin-left: 0.75em; }

[class*="gap-y-xxxxs"], [class*="gap-y-xxxs"], [class*="gap-y-xxs"], [class*="gap-y-xs"], [class*="gap-y-sm"], [class*="gap-y-md"], [class*="gap-y-lg"], [class*="gap-y-xl"], [class*="gap-y-xxl"], [class*="gap-y-xxxl"], [class*="gap-y-xxxxl"] { margin-bottom: -0.75em; }

[class*="gap-y-xxxxs"] > *, [class*="gap-y-xxxs"] > *, [class*="gap-y-xxs"] > *, [class*="gap-y-xs"] > *, [class*="gap-y-sm"] > *, [class*="gap-y-md"] > *, [class*="gap-y-lg"] > *, [class*="gap-y-xl"] > *, [class*="gap-y-xxl"] > *, [class*="gap-y-xxxl"] > *, [class*="gap-y-xxxxl"] > * { margin-bottom: 0.75em; }

/* #endregion */
@supports (--css: variables) { .grid { margin-bottom: calc(-1 * var(--gap-y)); margin-left: calc(-1 * var(--gap-x)); }
  .grid > * { margin-bottom: var(--gap-y); margin-left: var(--offset); }
  .flex[class*="gap-"], .inline-flex[class*="gap-"] { margin-bottom: calc(-1 * var(--gap-y, 0)); margin-left: calc(-1 * var(--gap-x, 0)); }
  .flex[class*="gap-"] > *, .inline-flex[class*="gap-"] > * { margin-bottom: var(--gap-y, 0); margin-left: var(--gap-x, 0); }
  .gap-xxxxs, .grid-gap-xxxxs, .flex-gap-xxxxs { --gap-x: var(--space-xxxxs); --gap-y: var(--space-xxxxs); }
  .gap-xxxs, .grid-gap-xxxs, .flex-gap-xxxs { --gap-x: var(--space-xxxs); --gap-y: var(--space-xxxs); }
  .gap-xxs, .grid-gap-xxs, .flex-gap-xxs { --gap-x: var(--space-xxs); --gap-y: var(--space-xxs); }
  .gap-xs, .grid-gap-xs, .flex-gap-xs { --gap-x: var(--space-xs); --gap-y: var(--space-xs); }
  .gap-sm, .grid-gap-sm, .flex-gap-sm { --gap-x: var(--space-sm); --gap-y: var(--space-sm); }
  .gap-md, .grid-gap-md, .flex-gap-md { --gap-x: var(--space-md); --gap-y: var(--space-md); }
  .gap-lg, .grid-gap-lg, .flex-gap-lg { --gap-x: var(--space-lg); --gap-y: var(--space-lg); }
  .gap-xl, .grid-gap-xl, .flex-gap-xl { --gap-x: var(--space-xl); --gap-y: var(--space-xl); }
  .gap-xxl, .grid-gap-xxl, .flex-gap-xxl { --gap-x: var(--space-xxl); --gap-y: var(--space-xxl); }
  .gap-xxxl, .grid-gap-xxxl, .flex-gap-xxxl { --gap-x: var(--space-xxxl); --gap-y: var(--space-xxxl); }
  .gap-xxxxl, .grid-gap-xxxxl, .flex-gap-xxxxl { --gap-x: var(--space-xxxxl); --gap-y: var(--space-xxxxl); }
  .gap-x-xxxxs { --gap-x: var(--space-xxxxs); }
  .gap-x-xxxs { --gap-x: var(--space-xxxs); }
  .gap-x-xxs { --gap-x: var(--space-xxs); }
  .gap-x-xs { --gap-x: var(--space-xs); }
  .gap-x-sm { --gap-x: var(--space-sm); }
  .gap-x-md { --gap-x: var(--space-md); }
  .gap-x-lg { --gap-x: var(--space-lg); }
  .gap-x-xl { --gap-x: var(--space-xl); }
  .gap-x-xxl { --gap-x: var(--space-xxl); }
  .gap-x-xxxl { --gap-x: var(--space-xxxl); }
  .gap-x-xxxxl { --gap-x: var(--space-xxxxl); }
  .gap-y-xxxxs { --gap-y: var(--space-xxxxs); }
  .gap-y-xxxs { --gap-y: var(--space-xxxs); }
  .gap-y-xxs { --gap-y: var(--space-xxs); }
  .gap-y-xs { --gap-y: var(--space-xs); }
  .gap-y-sm { --gap-y: var(--space-sm); }
  .gap-y-md { --gap-y: var(--space-md); }
  .gap-y-lg { --gap-y: var(--space-lg); }
  .gap-y-xl { --gap-y: var(--space-xl); }
  .gap-y-xxl { --gap-y: var(--space-xxl); }
  .gap-y-xxxl { --gap-y: var(--space-xxxl); }
  .gap-y-xxxxl { --gap-y: var(--space-xxxxl); } }

.col { flex-grow: 1; flex-basis: 0; max-width: 100%; }

.col-1 { flex-basis: calc( 8.33% - 0.01px - var(--gap-x, 0.75em)); max-width: calc( 8.33% - 0.01px - var(--gap-x, 0.75em)); }

.col-2 { flex-basis: calc( 16.66% - 0.01px - var(--gap-x, 0.75em)); max-width: calc( 16.66% - 0.01px - var(--gap-x, 0.75em)); }

.col-3 { flex-basis: calc( 25% - 0.01px - var(--gap-x, 0.75em)); max-width: calc( 25% - 0.01px - var(--gap-x, 0.75em)); }

.col-4 { flex-basis: calc( 33.33% - 0.01px - var(--gap-x, 0.75em)); max-width: calc( 33.33% - 0.01px - var(--gap-x, 0.75em)); }

.col-5 { flex-basis: calc( 41.66% - 0.01px - var(--gap-x, 0.75em)); max-width: calc( 41.66% - 0.01px - var(--gap-x, 0.75em)); }

.col-6 { flex-basis: calc( 50% - 0.01px - var(--gap-x, 0.75em)); max-width: calc( 50% - 0.01px - var(--gap-x, 0.75em)); }

.col-7 { flex-basis: calc( 58.33% - 0.01px - var(--gap-x, 0.75em)); max-width: calc( 58.33% - 0.01px - var(--gap-x, 0.75em)); }

.col-8 { flex-basis: calc( 66.66% - 0.01px - var(--gap-x, 0.75em)); max-width: calc( 66.66% - 0.01px - var(--gap-x, 0.75em)); }

.col-9 { flex-basis: calc( 75% - 0.01px - var(--gap-x, 0.75em)); max-width: calc( 75% - 0.01px - var(--gap-x, 0.75em)); }

.col-10 { flex-basis: calc( 83.33% - 0.01px - var(--gap-x, 0.75em)); max-width: calc( 83.33% - 0.01px - var(--gap-x, 0.75em)); }

.col-11 { flex-basis: calc( 91.66% - 0.01px - var(--gap-x, 0.75em)); max-width: calc( 91.66% - 0.01px - var(--gap-x, 0.75em)); }

.col-12 { flex-basis: calc( 100% - 0.01px - var(--gap-x, 0.75em)); max-width: calc( 100% - 0.01px - var(--gap-x, 0.75em)); }

.col-content { flex-grow: 0; flex-basis: initial; max-width: initial; }

.offset-1 { --offset: calc(8.33% + var(--gap-x, 0.75em)); }

.offset-2 { --offset: calc(16.66% + var(--gap-x, 0.75em)); }

.offset-3 { --offset: calc(25% + var(--gap-x, 0.75em)); }

.offset-4 { --offset: calc(33.33% + var(--gap-x, 0.75em)); }

.offset-5 { --offset: calc(41.66% + var(--gap-x, 0.75em)); }

.offset-6 { --offset: calc(50% + var(--gap-x, 0.75em)); }

.offset-7 { --offset: calc(58.33% + var(--gap-x, 0.75em)); }

.offset-8 { --offset: calc(66.66% + var(--gap-x, 0.75em)); }

.offset-9 { --offset: calc(75% + var(--gap-x, 0.75em)); }

.offset-10 { --offset: calc(83.33% + var(--gap-x, 0.75em)); }

.offset-11 { --offset: calc(91.66% + var(--gap-x, 0.75em)); }

@media (min-width: 32rem) { .col\@xs { flex-grow: 1; flex-basis: 0; max-width: 100%; }
  .col-1\@xs { flex-basis: calc( 8.33% - 0.01px - var(--gap-x, 0.75em)); max-width: calc( 8.33% - 0.01px - var(--gap-x, 0.75em)); }
  .col-2\@xs { flex-basis: calc( 16.66% - 0.01px - var(--gap-x, 0.75em)); max-width: calc( 16.66% - 0.01px - var(--gap-x, 0.75em)); }
  .col-3\@xs { flex-basis: calc( 25% - 0.01px - var(--gap-x, 0.75em)); max-width: calc( 25% - 0.01px - var(--gap-x, 0.75em)); }
  .col-4\@xs { flex-basis: calc( 33.33% - 0.01px - var(--gap-x, 0.75em)); max-width: calc( 33.33% - 0.01px - var(--gap-x, 0.75em)); }
  .col-5\@xs { flex-basis: calc( 41.66% - 0.01px - var(--gap-x, 0.75em)); max-width: calc( 41.66% - 0.01px - var(--gap-x, 0.75em)); }
  .col-6\@xs { flex-basis: calc( 50% - 0.01px - var(--gap-x, 0.75em)); max-width: calc( 50% - 0.01px - var(--gap-x, 0.75em)); }
  .col-7\@xs { flex-basis: calc( 58.33% - 0.01px - var(--gap-x, 0.75em)); max-width: calc( 58.33% - 0.01px - var(--gap-x, 0.75em)); }
  .col-8\@xs { flex-basis: calc( 66.66% - 0.01px - var(--gap-x, 0.75em)); max-width: calc( 66.66% - 0.01px - var(--gap-x, 0.75em)); }
  .col-9\@xs { flex-basis: calc( 75% - 0.01px - var(--gap-x, 0.75em)); max-width: calc( 75% - 0.01px - var(--gap-x, 0.75em)); }
  .col-10\@xs { flex-basis: calc( 83.33% - 0.01px - var(--gap-x, 0.75em)); max-width: calc( 83.33% - 0.01px - var(--gap-x, 0.75em)); }
  .col-11\@xs { flex-basis: calc( 91.66% - 0.01px - var(--gap-x, 0.75em)); max-width: calc( 91.66% - 0.01px - var(--gap-x, 0.75em)); }
  .col-12\@xs { flex-basis: calc( 100% - 0.01px - var(--gap-x, 0.75em)); max-width: calc( 100% - 0.01px - var(--gap-x, 0.75em)); }
  .col-content\@xs { flex-grow: 0; flex-basis: initial; max-width: initial; }
  .offset-1\@xs { --offset: calc(8.33% + var(--gap-x, 0.75em)); }
  .offset-2\@xs { --offset: calc(16.66% + var(--gap-x, 0.75em)); }
  .offset-3\@xs { --offset: calc(25% + var(--gap-x, 0.75em)); }
  .offset-4\@xs { --offset: calc(33.33% + var(--gap-x, 0.75em)); }
  .offset-5\@xs { --offset: calc(41.66% + var(--gap-x, 0.75em)); }
  .offset-6\@xs { --offset: calc(50% + var(--gap-x, 0.75em)); }
  .offset-7\@xs { --offset: calc(58.33% + var(--gap-x, 0.75em)); }
  .offset-8\@xs { --offset: calc(66.66% + var(--gap-x, 0.75em)); }
  .offset-9\@xs { --offset: calc(75% + var(--gap-x, 0.75em)); }
  .offset-10\@xs { --offset: calc(83.33% + var(--gap-x, 0.75em)); }
  .offset-11\@xs { --offset: calc(91.66% + var(--gap-x, 0.75em)); }
  .offset-0\@xs { --offset: var(--gap-x); }
  @supports (--css: variables) { .gap-xxxxs\@xs { --gap-x: var(--space-xxxxs); --gap-y: var(--space-xxxxs); }
    .gap-xxxs\@xs { --gap-x: var(--space-xxxs); --gap-y: var(--space-xxxs); }
    .gap-xxs\@xs { --gap-x: var(--space-xxs); --gap-y: var(--space-xxs); }
    .gap-xs\@xs { --gap-x: var(--space-xs); --gap-y: var(--space-xs); }
    .gap-sm\@xs { --gap-x: var(--space-sm); --gap-y: var(--space-sm); }
    .gap-md\@xs { --gap-x: var(--space-md); --gap-y: var(--space-md); }
    .gap-lg\@xs { --gap-x: var(--space-lg); --gap-y: var(--space-lg); }
    .gap-xl\@xs { --gap-x: var(--space-xl); --gap-y: var(--space-xl); }
    .gap-xxl\@xs { --gap-x: var(--space-xxl); --gap-y: var(--space-xxl); }
    .gap-xxxl\@xs { --gap-x: var(--space-xxxl); --gap-y: var(--space-xxxl); }
    .gap-xxxxl\@xs { --gap-x: var(--space-xxxxl); --gap-y: var(--space-xxxxl); }
    .gap-0\@xs { --gap-x: 0px; --gap-y: 0px; }
    .gap-x-xxxxs\@xs { --gap-x: var(--space-xxxxs); }
    .gap-x-xxxs\@xs { --gap-x: var(--space-xxxs); }
    .gap-x-xxs\@xs { --gap-x: var(--space-xxs); }
    .gap-x-xs\@xs { --gap-x: var(--space-xs); }
    .gap-x-sm\@xs { --gap-x: var(--space-sm); }
    .gap-x-md\@xs { --gap-x: var(--space-md); }
    .gap-x-lg\@xs { --gap-x: var(--space-lg); }
    .gap-x-xl\@xs { --gap-x: var(--space-xl); }
    .gap-x-xxl\@xs { --gap-x: var(--space-xxl); }
    .gap-x-xxxl\@xs { --gap-x: var(--space-xxxl); }
    .gap-x-xxxxl\@xs { --gap-x: var(--space-xxxxl); }
    .gap-x-0\@xs { --gap-x: 0px; }
    .gap-y-xxxxs\@xs { --gap-y: var(--space-xxxxs); }
    .gap-y-xxxs\@xs { --gap-y: var(--space-xxxs); }
    .gap-y-xxs\@xs { --gap-y: var(--space-xxs); }
    .gap-y-xs\@xs { --gap-y: var(--space-xs); }
    .gap-y-sm\@xs { --gap-y: var(--space-sm); }
    .gap-y-md\@xs { --gap-y: var(--space-md); }
    .gap-y-lg\@xs { --gap-y: var(--space-lg); }
    .gap-y-xl\@xs { --gap-y: var(--space-xl); }
    .gap-y-xxl\@xs { --gap-y: var(--space-xxl); }
    .gap-y-xxxl\@xs { --gap-y: var(--space-xxxl); }
    .gap-y-xxxxl\@xs { --gap-y: var(--space-xxxxl); }
    .gap-y-0\@xs { --gap-y: 0px; } } }

@media (min-width: 48rem) { .col\@sm { flex-grow: 1; flex-basis: 0; max-width: 100%; }
  .col-1\@sm { flex-basis: calc( 8.33% - 0.01px - var(--gap-x, 0.75em)); max-width: calc( 8.33% - 0.01px - var(--gap-x, 0.75em)); }
  .col-2\@sm { flex-basis: calc( 16.66% - 0.01px - var(--gap-x, 0.75em)); max-width: calc( 16.66% - 0.01px - var(--gap-x, 0.75em)); }
  .col-3\@sm { flex-basis: calc( 25% - 0.01px - var(--gap-x, 0.75em)); max-width: calc( 25% - 0.01px - var(--gap-x, 0.75em)); }
  .col-4\@sm { flex-basis: calc( 33.33% - 0.01px - var(--gap-x, 0.75em)); max-width: calc( 33.33% - 0.01px - var(--gap-x, 0.75em)); }
  .col-5\@sm { flex-basis: calc( 41.66% - 0.01px - var(--gap-x, 0.75em)); max-width: calc( 41.66% - 0.01px - var(--gap-x, 0.75em)); }
  .col-6\@sm { flex-basis: calc( 50% - 0.01px - var(--gap-x, 0.75em)); max-width: calc( 50% - 0.01px - var(--gap-x, 0.75em)); }
  .col-7\@sm { flex-basis: calc( 58.33% - 0.01px - var(--gap-x, 0.75em)); max-width: calc( 58.33% - 0.01px - var(--gap-x, 0.75em)); }
  .col-8\@sm { flex-basis: calc( 66.66% - 0.01px - var(--gap-x, 0.75em)); max-width: calc( 66.66% - 0.01px - var(--gap-x, 0.75em)); }
  .col-9\@sm { flex-basis: calc( 75% - 0.01px - var(--gap-x, 0.75em)); max-width: calc( 75% - 0.01px - var(--gap-x, 0.75em)); }
  .col-10\@sm { flex-basis: calc( 83.33% - 0.01px - var(--gap-x, 0.75em)); max-width: calc( 83.33% - 0.01px - var(--gap-x, 0.75em)); }
  .col-11\@sm { flex-basis: calc( 91.66% - 0.01px - var(--gap-x, 0.75em)); max-width: calc( 91.66% - 0.01px - var(--gap-x, 0.75em)); }
  .col-12\@sm { flex-basis: calc( 100% - 0.01px - var(--gap-x, 0.75em)); max-width: calc( 100% - 0.01px - var(--gap-x, 0.75em)); }
  .col-content\@sm { flex-grow: 0; flex-basis: initial; max-width: initial; }
  .offset-1\@sm { --offset: calc(8.33% + var(--gap-x, 0.75em)); }
  .offset-2\@sm { --offset: calc(16.66% + var(--gap-x, 0.75em)); }
  .offset-3\@sm { --offset: calc(25% + var(--gap-x, 0.75em)); }
  .offset-4\@sm { --offset: calc(33.33% + var(--gap-x, 0.75em)); }
  .offset-5\@sm { --offset: calc(41.66% + var(--gap-x, 0.75em)); }
  .offset-6\@sm { --offset: calc(50% + var(--gap-x, 0.75em)); }
  .offset-7\@sm { --offset: calc(58.33% + var(--gap-x, 0.75em)); }
  .offset-8\@sm { --offset: calc(66.66% + var(--gap-x, 0.75em)); }
  .offset-9\@sm { --offset: calc(75% + var(--gap-x, 0.75em)); }
  .offset-10\@sm { --offset: calc(83.33% + var(--gap-x, 0.75em)); }
  .offset-11\@sm { --offset: calc(91.66% + var(--gap-x, 0.75em)); }
  .offset-0\@sm { --offset: var(--gap-x); }
  @supports (--css: variables) { .gap-xxxxs\@sm { --gap-x: var(--space-xxxxs); --gap-y: var(--space-xxxxs); }
    .gap-xxxs\@sm { --gap-x: var(--space-xxxs); --gap-y: var(--space-xxxs); }
    .gap-xxs\@sm { --gap-x: var(--space-xxs); --gap-y: var(--space-xxs); }
    .gap-xs\@sm { --gap-x: var(--space-xs); --gap-y: var(--space-xs); }
    .gap-sm\@sm { --gap-x: var(--space-sm); --gap-y: var(--space-sm); }
    .gap-md\@sm { --gap-x: var(--space-md); --gap-y: var(--space-md); }
    .gap-lg\@sm { --gap-x: var(--space-lg); --gap-y: var(--space-lg); }
    .gap-xl\@sm { --gap-x: var(--space-xl); --gap-y: var(--space-xl); }
    .gap-xxl\@sm { --gap-x: var(--space-xxl); --gap-y: var(--space-xxl); }
    .gap-xxxl\@sm { --gap-x: var(--space-xxxl); --gap-y: var(--space-xxxl); }
    .gap-xxxxl\@sm { --gap-x: var(--space-xxxxl); --gap-y: var(--space-xxxxl); }
    .gap-0\@sm { --gap-x: 0px; --gap-y: 0px; }
    .gap-x-xxxxs\@sm { --gap-x: var(--space-xxxxs); }
    .gap-x-xxxs\@sm { --gap-x: var(--space-xxxs); }
    .gap-x-xxs\@sm { --gap-x: var(--space-xxs); }
    .gap-x-xs\@sm { --gap-x: var(--space-xs); }
    .gap-x-sm\@sm { --gap-x: var(--space-sm); }
    .gap-x-md\@sm { --gap-x: var(--space-md); }
    .gap-x-lg\@sm { --gap-x: var(--space-lg); }
    .gap-x-xl\@sm { --gap-x: var(--space-xl); }
    .gap-x-xxl\@sm { --gap-x: var(--space-xxl); }
    .gap-x-xxxl\@sm { --gap-x: var(--space-xxxl); }
    .gap-x-xxxxl\@sm { --gap-x: var(--space-xxxxl); }
    .gap-x-0\@sm { --gap-x: 0px; }
    .gap-y-xxxxs\@sm { --gap-y: var(--space-xxxxs); }
    .gap-y-xxxs\@sm { --gap-y: var(--space-xxxs); }
    .gap-y-xxs\@sm { --gap-y: var(--space-xxs); }
    .gap-y-xs\@sm { --gap-y: var(--space-xs); }
    .gap-y-sm\@sm { --gap-y: var(--space-sm); }
    .gap-y-md\@sm { --gap-y: var(--space-md); }
    .gap-y-lg\@sm { --gap-y: var(--space-lg); }
    .gap-y-xl\@sm { --gap-y: var(--space-xl); }
    .gap-y-xxl\@sm { --gap-y: var(--space-xxl); }
    .gap-y-xxxl\@sm { --gap-y: var(--space-xxxl); }
    .gap-y-xxxxl\@sm { --gap-y: var(--space-xxxxl); }
    .gap-y-0\@sm { --gap-y: 0px; } } }

@media (min-width: 64rem) { .col\@md { flex-grow: 1; flex-basis: 0; max-width: 100%; }
  .col-1\@md { flex-basis: calc( 8.33% - 0.01px - var(--gap-x, 0.75em)); max-width: calc( 8.33% - 0.01px - var(--gap-x, 0.75em)); }
  .col-2\@md { flex-basis: calc( 16.66% - 0.01px - var(--gap-x, 0.75em)); max-width: calc( 16.66% - 0.01px - var(--gap-x, 0.75em)); }
  .col-3\@md { flex-basis: calc( 25% - 0.01px - var(--gap-x, 0.75em)); max-width: calc( 25% - 0.01px - var(--gap-x, 0.75em)); }
  .col-4\@md { flex-basis: calc( 33.33% - 0.01px - var(--gap-x, 0.75em)); max-width: calc( 33.33% - 0.01px - var(--gap-x, 0.75em)); }
  .col-5\@md { flex-basis: calc( 41.66% - 0.01px - var(--gap-x, 0.75em)); max-width: calc( 41.66% - 0.01px - var(--gap-x, 0.75em)); }
  .col-6\@md { flex-basis: calc( 50% - 0.01px - var(--gap-x, 0.75em)); max-width: calc( 50% - 0.01px - var(--gap-x, 0.75em)); }
  .col-7\@md { flex-basis: calc( 58.33% - 0.01px - var(--gap-x, 0.75em)); max-width: calc( 58.33% - 0.01px - var(--gap-x, 0.75em)); }
  .col-8\@md { flex-basis: calc( 66.66% - 0.01px - var(--gap-x, 0.75em)); max-width: calc( 66.66% - 0.01px - var(--gap-x, 0.75em)); }
  .col-9\@md { flex-basis: calc( 75% - 0.01px - var(--gap-x, 0.75em)); max-width: calc( 75% - 0.01px - var(--gap-x, 0.75em)); }
  .col-10\@md { flex-basis: calc( 83.33% - 0.01px - var(--gap-x, 0.75em)); max-width: calc( 83.33% - 0.01px - var(--gap-x, 0.75em)); }
  .col-11\@md { flex-basis: calc( 91.66% - 0.01px - var(--gap-x, 0.75em)); max-width: calc( 91.66% - 0.01px - var(--gap-x, 0.75em)); }
  .col-12\@md { flex-basis: calc( 100% - 0.01px - var(--gap-x, 0.75em)); max-width: calc( 100% - 0.01px - var(--gap-x, 0.75em)); }
  .col-content\@md { flex-grow: 0; flex-basis: initial; max-width: initial; }
  .offset-1\@md { --offset: calc(8.33% + var(--gap-x, 0.75em)); }
  .offset-2\@md { --offset: calc(16.66% + var(--gap-x, 0.75em)); }
  .offset-3\@md { --offset: calc(25% + var(--gap-x, 0.75em)); }
  .offset-4\@md { --offset: calc(33.33% + var(--gap-x, 0.75em)); }
  .offset-5\@md { --offset: calc(41.66% + var(--gap-x, 0.75em)); }
  .offset-6\@md { --offset: calc(50% + var(--gap-x, 0.75em)); }
  .offset-7\@md { --offset: calc(58.33% + var(--gap-x, 0.75em)); }
  .offset-8\@md { --offset: calc(66.66% + var(--gap-x, 0.75em)); }
  .offset-9\@md { --offset: calc(75% + var(--gap-x, 0.75em)); }
  .offset-10\@md { --offset: calc(83.33% + var(--gap-x, 0.75em)); }
  .offset-11\@md { --offset: calc(91.66% + var(--gap-x, 0.75em)); }
  .offset-0\@md { --offset: var(--gap-x); }
  @supports (--css: variables) { .gap-xxxxs\@md { --gap-x: var(--space-xxxxs); --gap-y: var(--space-xxxxs); }
    .gap-xxxs\@md { --gap-x: var(--space-xxxs); --gap-y: var(--space-xxxs); }
    .gap-xxs\@md { --gap-x: var(--space-xxs); --gap-y: var(--space-xxs); }
    .gap-xs\@md { --gap-x: var(--space-xs); --gap-y: var(--space-xs); }
    .gap-sm\@md { --gap-x: var(--space-sm); --gap-y: var(--space-sm); }
    .gap-md\@md { --gap-x: var(--space-md); --gap-y: var(--space-md); }
    .gap-lg\@md { --gap-x: var(--space-lg); --gap-y: var(--space-lg); }
    .gap-xl\@md { --gap-x: var(--space-xl); --gap-y: var(--space-xl); }
    .gap-xxl\@md { --gap-x: var(--space-xxl); --gap-y: var(--space-xxl); }
    .gap-xxxl\@md { --gap-x: var(--space-xxxl); --gap-y: var(--space-xxxl); }
    .gap-xxxxl\@md { --gap-x: var(--space-xxxxl); --gap-y: var(--space-xxxxl); }
    .gap-0\@md { --gap-x: 0px; --gap-y: 0px; }
    .gap-x-xxxxs\@md { --gap-x: var(--space-xxxxs); }
    .gap-x-xxxs\@md { --gap-x: var(--space-xxxs); }
    .gap-x-xxs\@md { --gap-x: var(--space-xxs); }
    .gap-x-xs\@md { --gap-x: var(--space-xs); }
    .gap-x-sm\@md { --gap-x: var(--space-sm); }
    .gap-x-md\@md { --gap-x: var(--space-md); }
    .gap-x-lg\@md { --gap-x: var(--space-lg); }
    .gap-x-xl\@md { --gap-x: var(--space-xl); }
    .gap-x-xxl\@md { --gap-x: var(--space-xxl); }
    .gap-x-xxxl\@md { --gap-x: var(--space-xxxl); }
    .gap-x-xxxxl\@md { --gap-x: var(--space-xxxxl); }
    .gap-x-0\@md { --gap-x: 0px; }
    .gap-y-xxxxs\@md { --gap-y: var(--space-xxxxs); }
    .gap-y-xxxs\@md { --gap-y: var(--space-xxxs); }
    .gap-y-xxs\@md { --gap-y: var(--space-xxs); }
    .gap-y-xs\@md { --gap-y: var(--space-xs); }
    .gap-y-sm\@md { --gap-y: var(--space-sm); }
    .gap-y-md\@md { --gap-y: var(--space-md); }
    .gap-y-lg\@md { --gap-y: var(--space-lg); }
    .gap-y-xl\@md { --gap-y: var(--space-xl); }
    .gap-y-xxl\@md { --gap-y: var(--space-xxl); }
    .gap-y-xxxl\@md { --gap-y: var(--space-xxxl); }
    .gap-y-xxxxl\@md { --gap-y: var(--space-xxxxl); }
    .gap-y-0\@md { --gap-y: 0px; } } }

@media (min-width: 80rem) { .col\@lg { flex-grow: 1; flex-basis: 0; max-width: 100%; }
  .col-1\@lg { flex-basis: calc( 8.33% - 0.01px - var(--gap-x, 0.75em)); max-width: calc( 8.33% - 0.01px - var(--gap-x, 0.75em)); }
  .col-2\@lg { flex-basis: calc( 16.66% - 0.01px - var(--gap-x, 0.75em)); max-width: calc( 16.66% - 0.01px - var(--gap-x, 0.75em)); }
  .col-3\@lg { flex-basis: calc( 25% - 0.01px - var(--gap-x, 0.75em)); max-width: calc( 25% - 0.01px - var(--gap-x, 0.75em)); }
  .col-4\@lg { flex-basis: calc( 33.33% - 0.01px - var(--gap-x, 0.75em)); max-width: calc( 33.33% - 0.01px - var(--gap-x, 0.75em)); }
  .col-5\@lg { flex-basis: calc( 41.66% - 0.01px - var(--gap-x, 0.75em)); max-width: calc( 41.66% - 0.01px - var(--gap-x, 0.75em)); }
  .col-6\@lg { flex-basis: calc( 50% - 0.01px - var(--gap-x, 0.75em)); max-width: calc( 50% - 0.01px - var(--gap-x, 0.75em)); }
  .col-7\@lg { flex-basis: calc( 58.33% - 0.01px - var(--gap-x, 0.75em)); max-width: calc( 58.33% - 0.01px - var(--gap-x, 0.75em)); }
  .col-8\@lg { flex-basis: calc( 66.66% - 0.01px - var(--gap-x, 0.75em)); max-width: calc( 66.66% - 0.01px - var(--gap-x, 0.75em)); }
  .col-9\@lg { flex-basis: calc( 75% - 0.01px - var(--gap-x, 0.75em)); max-width: calc( 75% - 0.01px - var(--gap-x, 0.75em)); }
  .col-10\@lg { flex-basis: calc( 83.33% - 0.01px - var(--gap-x, 0.75em)); max-width: calc( 83.33% - 0.01px - var(--gap-x, 0.75em)); }
  .col-11\@lg { flex-basis: calc( 91.66% - 0.01px - var(--gap-x, 0.75em)); max-width: calc( 91.66% - 0.01px - var(--gap-x, 0.75em)); }
  .col-12\@lg { flex-basis: calc( 100% - 0.01px - var(--gap-x, 0.75em)); max-width: calc( 100% - 0.01px - var(--gap-x, 0.75em)); }
  .col-content\@lg { flex-grow: 0; flex-basis: initial; max-width: initial; }
  .offset-1\@lg { --offset: calc(8.33% + var(--gap-x, 0.75em)); }
  .offset-2\@lg { --offset: calc(16.66% + var(--gap-x, 0.75em)); }
  .offset-3\@lg { --offset: calc(25% + var(--gap-x, 0.75em)); }
  .offset-4\@lg { --offset: calc(33.33% + var(--gap-x, 0.75em)); }
  .offset-5\@lg { --offset: calc(41.66% + var(--gap-x, 0.75em)); }
  .offset-6\@lg { --offset: calc(50% + var(--gap-x, 0.75em)); }
  .offset-7\@lg { --offset: calc(58.33% + var(--gap-x, 0.75em)); }
  .offset-8\@lg { --offset: calc(66.66% + var(--gap-x, 0.75em)); }
  .offset-9\@lg { --offset: calc(75% + var(--gap-x, 0.75em)); }
  .offset-10\@lg { --offset: calc(83.33% + var(--gap-x, 0.75em)); }
  .offset-11\@lg { --offset: calc(91.66% + var(--gap-x, 0.75em)); }
  .offset-0\@lg { --offset: var(--gap-x); }
  @supports (--css: variables) { .gap-xxxxs\@lg { --gap-x: var(--space-xxxxs); --gap-y: var(--space-xxxxs); }
    .gap-xxxs\@lg { --gap-x: var(--space-xxxs); --gap-y: var(--space-xxxs); }
    .gap-xxs\@lg { --gap-x: var(--space-xxs); --gap-y: var(--space-xxs); }
    .gap-xs\@lg { --gap-x: var(--space-xs); --gap-y: var(--space-xs); }
    .gap-sm\@lg { --gap-x: var(--space-sm); --gap-y: var(--space-sm); }
    .gap-md\@lg { --gap-x: var(--space-md); --gap-y: var(--space-md); }
    .gap-lg\@lg { --gap-x: var(--space-lg); --gap-y: var(--space-lg); }
    .gap-xl\@lg { --gap-x: var(--space-xl); --gap-y: var(--space-xl); }
    .gap-xxl\@lg { --gap-x: var(--space-xxl); --gap-y: var(--space-xxl); }
    .gap-xxxl\@lg { --gap-x: var(--space-xxxl); --gap-y: var(--space-xxxl); }
    .gap-xxxxl\@lg { --gap-x: var(--space-xxxxl); --gap-y: var(--space-xxxxl); }
    .gap-0\@lg { --gap-x: 0px; --gap-y: 0px; }
    .gap-x-xxxxs\@lg { --gap-x: var(--space-xxxxs); }
    .gap-x-xxxs\@lg { --gap-x: var(--space-xxxs); }
    .gap-x-xxs\@lg { --gap-x: var(--space-xxs); }
    .gap-x-xs\@lg { --gap-x: var(--space-xs); }
    .gap-x-sm\@lg { --gap-x: var(--space-sm); }
    .gap-x-md\@lg { --gap-x: var(--space-md); }
    .gap-x-lg\@lg { --gap-x: var(--space-lg); }
    .gap-x-xl\@lg { --gap-x: var(--space-xl); }
    .gap-x-xxl\@lg { --gap-x: var(--space-xxl); }
    .gap-x-xxxl\@lg { --gap-x: var(--space-xxxl); }
    .gap-x-xxxxl\@lg { --gap-x: var(--space-xxxxl); }
    .gap-x-0\@lg { --gap-x: 0px; }
    .gap-y-xxxxs\@lg { --gap-y: var(--space-xxxxs); }
    .gap-y-xxxs\@lg { --gap-y: var(--space-xxxs); }
    .gap-y-xxs\@lg { --gap-y: var(--space-xxs); }
    .gap-y-xs\@lg { --gap-y: var(--space-xs); }
    .gap-y-sm\@lg { --gap-y: var(--space-sm); }
    .gap-y-md\@lg { --gap-y: var(--space-md); }
    .gap-y-lg\@lg { --gap-y: var(--space-lg); }
    .gap-y-xl\@lg { --gap-y: var(--space-xl); }
    .gap-y-xxl\@lg { --gap-y: var(--space-xxl); }
    .gap-y-xxxl\@lg { --gap-y: var(--space-xxxl); }
    .gap-y-xxxxl\@lg { --gap-y: var(--space-xxxxl); }
    .gap-y-0\@lg { --gap-y: 0px; } } }

@media (min-width: 90rem) { .col\@xl { flex-grow: 1; flex-basis: 0; max-width: 100%; }
  .col-1\@xl { flex-basis: calc( 8.33% - 0.01px - var(--gap-x, 0.75em)); max-width: calc( 8.33% - 0.01px - var(--gap-x, 0.75em)); }
  .col-2\@xl { flex-basis: calc( 16.66% - 0.01px - var(--gap-x, 0.75em)); max-width: calc( 16.66% - 0.01px - var(--gap-x, 0.75em)); }
  .col-3\@xl { flex-basis: calc( 25% - 0.01px - var(--gap-x, 0.75em)); max-width: calc( 25% - 0.01px - var(--gap-x, 0.75em)); }
  .col-4\@xl { flex-basis: calc( 33.33% - 0.01px - var(--gap-x, 0.75em)); max-width: calc( 33.33% - 0.01px - var(--gap-x, 0.75em)); }
  .col-5\@xl { flex-basis: calc( 41.66% - 0.01px - var(--gap-x, 0.75em)); max-width: calc( 41.66% - 0.01px - var(--gap-x, 0.75em)); }
  .col-6\@xl { flex-basis: calc( 50% - 0.01px - var(--gap-x, 0.75em)); max-width: calc( 50% - 0.01px - var(--gap-x, 0.75em)); }
  .col-7\@xl { flex-basis: calc( 58.33% - 0.01px - var(--gap-x, 0.75em)); max-width: calc( 58.33% - 0.01px - var(--gap-x, 0.75em)); }
  .col-8\@xl { flex-basis: calc( 66.66% - 0.01px - var(--gap-x, 0.75em)); max-width: calc( 66.66% - 0.01px - var(--gap-x, 0.75em)); }
  .col-9\@xl { flex-basis: calc( 75% - 0.01px - var(--gap-x, 0.75em)); max-width: calc( 75% - 0.01px - var(--gap-x, 0.75em)); }
  .col-10\@xl { flex-basis: calc( 83.33% - 0.01px - var(--gap-x, 0.75em)); max-width: calc( 83.33% - 0.01px - var(--gap-x, 0.75em)); }
  .col-11\@xl { flex-basis: calc( 91.66% - 0.01px - var(--gap-x, 0.75em)); max-width: calc( 91.66% - 0.01px - var(--gap-x, 0.75em)); }
  .col-12\@xl { flex-basis: calc( 100% - 0.01px - var(--gap-x, 0.75em)); max-width: calc( 100% - 0.01px - var(--gap-x, 0.75em)); }
  .col-content\@xl { flex-grow: 0; flex-basis: initial; max-width: initial; }
  .offset-1\@xl { --offset: calc(8.33% + var(--gap-x, 0.75em)); }
  .offset-2\@xl { --offset: calc(16.66% + var(--gap-x, 0.75em)); }
  .offset-3\@xl { --offset: calc(25% + var(--gap-x, 0.75em)); }
  .offset-4\@xl { --offset: calc(33.33% + var(--gap-x, 0.75em)); }
  .offset-5\@xl { --offset: calc(41.66% + var(--gap-x, 0.75em)); }
  .offset-6\@xl { --offset: calc(50% + var(--gap-x, 0.75em)); }
  .offset-7\@xl { --offset: calc(58.33% + var(--gap-x, 0.75em)); }
  .offset-8\@xl { --offset: calc(66.66% + var(--gap-x, 0.75em)); }
  .offset-9\@xl { --offset: calc(75% + var(--gap-x, 0.75em)); }
  .offset-10\@xl { --offset: calc(83.33% + var(--gap-x, 0.75em)); }
  .offset-11\@xl { --offset: calc(91.66% + var(--gap-x, 0.75em)); }
  .offset-0\@xl { --offset: var(--gap-x); }
  @supports (--css: variables) { .gap-xxxxs\@xl { --gap-x: var(--space-xxxxs); --gap-y: var(--space-xxxxs); }
    .gap-xxxs\@xl { --gap-x: var(--space-xxxs); --gap-y: var(--space-xxxs); }
    .gap-xxs\@xl { --gap-x: var(--space-xxs); --gap-y: var(--space-xxs); }
    .gap-xs\@xl { --gap-x: var(--space-xs); --gap-y: var(--space-xs); }
    .gap-sm\@xl { --gap-x: var(--space-sm); --gap-y: var(--space-sm); }
    .gap-md\@xl { --gap-x: var(--space-md); --gap-y: var(--space-md); }
    .gap-lg\@xl { --gap-x: var(--space-lg); --gap-y: var(--space-lg); }
    .gap-xl\@xl { --gap-x: var(--space-xl); --gap-y: var(--space-xl); }
    .gap-xxl\@xl { --gap-x: var(--space-xxl); --gap-y: var(--space-xxl); }
    .gap-xxxl\@xl { --gap-x: var(--space-xxxl); --gap-y: var(--space-xxxl); }
    .gap-xxxxl\@xl { --gap-x: var(--space-xxxxl); --gap-y: var(--space-xxxxl); }
    .gap-0\@xl { --gap-x: 0px; --gap-y: 0px; }
    .gap-x-xxxxs\@xl { --gap-x: var(--space-xxxxs); }
    .gap-x-xxxs\@xl { --gap-x: var(--space-xxxs); }
    .gap-x-xxs\@xl { --gap-x: var(--space-xxs); }
    .gap-x-xs\@xl { --gap-x: var(--space-xs); }
    .gap-x-sm\@xl { --gap-x: var(--space-sm); }
    .gap-x-md\@xl { --gap-x: var(--space-md); }
    .gap-x-lg\@xl { --gap-x: var(--space-lg); }
    .gap-x-xl\@xl { --gap-x: var(--space-xl); }
    .gap-x-xxl\@xl { --gap-x: var(--space-xxl); }
    .gap-x-xxxl\@xl { --gap-x: var(--space-xxxl); }
    .gap-x-xxxxl\@xl { --gap-x: var(--space-xxxxl); }
    .gap-x-0\@xl { --gap-x: 0px; }
    .gap-y-xxxxs\@xl { --gap-y: var(--space-xxxxs); }
    .gap-y-xxxs\@xl { --gap-y: var(--space-xxxs); }
    .gap-y-xxs\@xl { --gap-y: var(--space-xxs); }
    .gap-y-xs\@xl { --gap-y: var(--space-xs); }
    .gap-y-sm\@xl { --gap-y: var(--space-sm); }
    .gap-y-md\@xl { --gap-y: var(--space-md); }
    .gap-y-lg\@xl { --gap-y: var(--space-lg); }
    .gap-y-xl\@xl { --gap-y: var(--space-xl); }
    .gap-y-xxl\@xl { --gap-y: var(--space-xxl); }
    .gap-y-xxxl\@xl { --gap-y: var(--space-xxxl); }
    .gap-y-xxxxl\@xl { --gap-y: var(--space-xxxxl); }
    .gap-y-0\@xl { --gap-y: 0px; } } }

:root { --radius-sm: calc(var(--radius, 0.25em)/2); --radius-md: var(--radius, 0.25em); --radius-lg: calc(var(--radius, 0.25em)*2); --shadow-xs:  0 0.1px 0.3px rgba(0, 0, 0, 0.06),
                  0 1px 2px rgba(0, 0, 0, 0.12); --shadow-sm:  0 0.3px 0.4px rgba(0, 0, 0, 0.025),
                  0 0.9px 1.5px rgba(0, 0, 0, 0.05), 
                  0 3.5px 6px rgba(0, 0, 0, 0.1); --shadow-md:  0 0.9px 1.5px rgba(0, 0, 0, 0.03), 
                  0 3.1px 5.5px rgba(0, 0, 0, 0.08), 
                  0 14px 25px rgba(0, 0, 0, 0.12); --shadow-lg:  0 1.2px 1.9px -1px rgba(0, 0, 0, 0.014), 
                  0 3.3px 5.3px -1px rgba(0, 0, 0, 0.038), 
                  0 8.5px 12.7px -1px rgba(0, 0, 0, 0.085), 
                  0 30px 42px -1px rgba(0, 0, 0, 0.15); --shadow-xl:  0 1.5px 2.1px -6px rgba(0, 0, 0, 0.012), 
                  0 3.6px 5.2px -6px rgba(0, 0, 0, 0.035), 
                  0 7.3px 10.6px -6px rgba(0, 0, 0, 0.07), 
                  0 16.2px 21.9px -6px rgba(0, 0, 0, 0.117), 
                  0 46px 60px -6px rgba(0, 0, 0, 0.2); --bounce: cubic-bezier(0.175, 0.885, 0.32, 1.275); --ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1); --ease-in: cubic-bezier(0.55, 0.055, 0.675, 0.19); --ease-out: cubic-bezier(0.215, 0.61, 0.355, 1); --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1); }

:root { --heading-line-height: 1.2; --body-line-height: 1.4; }

body { font-size: var(--text-base-size, 1em); font-family: var(--font-primary, sans-serif); color: var(--color-contrast-high, #313135); }

h1, h2, h3, h4 { color: var(--color-contrast-higher, #1c1c21); line-height: var(--heading-line-height, 1.2); }

h1 { font-size: var(--text-xxl, 2.074em); }

h2 { font-size: var(--text-xl, 1.728em); }

h3 { font-size: var(--text-lg, 1.44em); }

h4 { font-size: var(--text-md, 1.2em); }

small { font-size: var(--text-sm, 0.833em); }

a, .link { color: var(--color-primary, #2a6df4); text-decoration: underline; }

strong { font-weight: bold; }

s { text-decoration: line-through; }

u { text-decoration: underline; }

.text-component h1, .text-component h2, .text-component h3, .text-component h4 { line-height: calc(var(--heading-line-height) * var(--line-height-multiplier, 1)); margin-bottom: calc(var(--space-unit) * 0.25 * var(--text-vspace-multiplier, 1)); }

.text-component h2, .text-component h3, .text-component h4 { margin-top: calc(var(--space-unit) * 0.75 * var(--text-vspace-multiplier, 1)); }

.text-component p, .text-component blockquote, .text-component ul li, .text-component ol li { line-height: calc(var(--body-line-height) * var(--line-height-multiplier, 1)); }

.text-component ul, .text-component ol, .text-component p, .text-component blockquote, .text-component .text-component__block { margin-bottom: calc(var(--space-unit) * 0.75 * var(--text-vspace-multiplier, 1)); }

.text-component ul, .text-component ol { list-style-position: inside; }

.text-component ul { list-style-type: disc; }

.text-component ol { list-style-type: decimal; }

.text-component img { display: block; margin: 0 auto; }

.text-component figcaption { text-align: center; margin-top: calc(var(--space-unit) * 0.5); }

.text-component em { font-style: italic; }

.text-component hr { margin-top: calc(var(--space-unit) * var(--text-vspace-multiplier, 1)); margin-bottom: calc(var(--space-unit) * var(--text-vspace-multiplier, 1)); margin-left: auto; margin-right: auto; }

.text-component > *:first-child { margin-top: 0; }

.text-component > *:last-child { margin-bottom: 0; }

.text-component__block--full-width { width: 100vw; margin-left: calc(50% - 50vw); }

@media (min-width: 48rem) { .text-component__block--left, .text-component__block--right { width: 45%; }
  .text-component__block--left img, .text-component__block--right img { width: 100%; }
  .text-component__block--left { float: left; margin-right: calc(var(--space-unit) * 0.75 * var(--text-vspace-multiplier, 1)); }
  .text-component__block--right { float: right; margin-left: calc(var(--space-unit) * 0.75 * var(--text-vspace-multiplier, 1)); } }

@media (min-width: 90rem) { .text-component__block--outset { width: calc(100% + 10.5 * var(--space-unit)); }
  .text-component__block--outset img { width: 100%; }
  .text-component__block--outset:not(.text-component__block--right) { margin-left: calc(-5.25 * var(--space-unit)); }
  .text-component__block--left, .text-component__block--right { width: 50%; }
  .text-component__block--right.text-component__block--outset { margin-right: calc(-5.25 * var(--space-unit)); } }

:root { --icon-xxxs: 8px; --icon-xxs:  12px; --icon-xs:   16px; --icon-sm:   24px; --icon-md:   32px; --icon-lg:   48px; --icon-xl:   64px; --icon-xxl:  96px; --icon-xxxl: 128px; }

.icon { display: inline-block; color: inherit; fill: currentColor; height: 1em; width: 1em; line-height: 1; flex-shrink: 0; max-width: initial; }

.icon--xxxs { width: var(--icon-xxxs); height: var(--icon-xxxs); }

.icon--xxs { width: var(--icon-xxs); height: var(--icon-xxs); }

.icon--xs { width: var(--icon-xs); height: var(--icon-xs); }

.icon--sm { width: var(--icon-sm); height: var(--icon-sm); }

.icon--md { width: var(--icon-md); height: var(--icon-md); }

.icon--lg { width: var(--icon-lg); height: var(--icon-lg); }

.icon--xl { width: var(--icon-xl); height: var(--icon-xl); }

.icon--xxl { width: var(--icon-xxl); height: var(--icon-xxl); }

.icon--xxxl { width: var(--icon-xxxl); height: var(--icon-xxxl); }

.icon--is-spinning { -webkit-animation: icon-spin 1s infinite linear; animation: icon-spin 1s infinite linear; }

@-webkit-keyframes icon-spin { 0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); } }

@keyframes icon-spin { 0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); } }

.icon use { color: inherit; fill: currentColor; }

.btn { position: relative; display: inline-flex; justify-content: center; align-items: center; white-space: nowrap; text-decoration: none; line-height: 1; font-size: var(--btn-font-size, 1em); padding-top: var(--btn-padding-y, 0.5em); padding-bottom: var(--btn-padding-y, 0.5em); padding-left: var(--btn-padding-x, 0.75em); padding-right: var(--btn-padding-x, 0.75em); border-radius: var(--btn-radius, 0.25em); }

.btn--sm { font-size: var(--btn-font-size-sm, 0.8em); }

.btn--md { font-size: var(--btn-font-size-md, 1.2em); }

.btn--lg { font-size: var(--btn-font-size-lg, 1.4em); }

.btn--icon { padding: var(--btn-padding-y, 0.5em); }

.form-control { font-size: var(--form-control-font-size, 1em); padding-top: var(--form-control-padding-y, 0.5em); padding-bottom: var(--form-control-padding-y, 0.5em); padding-left: var(--form-control-padding-x, 0.75em); padding-right: var(--form-control-padding-x, 0.75em); border-radius: var(--form-control-radius, 0.25em); }

.form-legend { color: var(--color-contrast-higher, #1c1c21); line-height: var(--heading-line-height, 1.2); font-size: var(--text-md, 1.2em); margin-bottom: var(--space-xxs); }

.form-label { display: inline-block; }

.form__msg-error, .form-error-msg { color: var(--color-error, #e02447); font-size: var(--text-sm, 0.833em); margin-top: var(--space-xxs); position: absolute; clip: rect(1px, 1px, 1px, 1px); }

.form__msg-error--is-visible, .form-error-msg--is-visible { position: relative; clip: auto; }

.radio-list > *, .checkbox-list > * { position: relative; display: flex; align-items: baseline; }

.radio-list label, .checkbox-list label { line-height: var(--body-line-height); }

.radio-list input, .checkbox-list input { margin-right: var(--space-xxxs); flex-shrink: 0; }

:root { --zindex-header: 3; --zindex-popover: 5; --zindex-fixed-element: 10; --zindex-overlay: 15; }

:root { --display: block; }

.is-visible { display: var(--display) !important; }

.is-hidden { display: none !important; }

html:not(.js) .no-js\:is-hidden { display: none !important; }

@media print { .print\:is-hidden { display: none !important; } }

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

.flex { display: flex; }

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

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

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

.flex-column-reverse { flex-direction: column-reverse; }

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

.flex-row-reverse { flex-direction: row-reverse; }

.flex-center { justify-content: center; align-items: center; }

.flex-grow { flex-grow: 1; }

.flex-grow-0 { flex-grow: 0; }

.flex-shrink { flex-shrink: 1; }

.flex-shrink-0 { flex-shrink: 0; }

.flex-basis-0 { flex-basis: 0; }

.justify-start { justify-content: flex-start; }

.justify-end { justify-content: flex-end; }

.justify-center { justify-content: center; }

.justify-between { justify-content: space-between; }

.items-center { align-items: center; }

.items-start { align-items: flex-start; }

.items-end { align-items: flex-end; }

.items-baseline { align-items: baseline; }

.order-1 { order: 1; }

.order-2 { order: 2; }

.order-3 { order: 3; }

[class*="aspect-ratio"] { --aspect-ratio: 16/9; position: relative; height: 0; padding-bottom: calc(100%/(var(--aspect-ratio))); }

[class*="aspect-ratio"] > * { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }

.aspect-ratio-16\:9 { --aspect-ratio: 16/9; }

.aspect-ratio-4\:3 { --aspect-ratio: 4/3; }

.aspect-ratio-1\:1 { --aspect-ratio: 1/1; }

.block { display: block; }

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

.inline { display: inline; }

.space-unit-rem { --space-unit: 1rem; }

.space-unit-em { --space-unit: 1em; }

.space-unit-px { --space-unit: 16px; }

.margin-xxxxs { margin: var(--space-xxxxs); }

.margin-xxxs { margin: var(--space-xxxs); }

.margin-xxs { margin: var(--space-xxs); }

.margin-xs { margin: var(--space-xs); }

.margin-sm { margin: var(--space-sm); }

.margin-md { margin: var(--space-md); }

.margin-lg { margin: var(--space-lg); }

.margin-xl { margin: var(--space-xl); }

.margin-xxl { margin: var(--space-xxl); }

.margin-xxxl { margin: var(--space-xxxl); }

.margin-xxxxl { margin: var(--space-xxxxl); }

.margin-auto { margin: auto; }

.margin-0 { margin: 0; }

.margin-top-xxxxs { margin-top: var(--space-xxxxs); }

.margin-top-xxxs { margin-top: var(--space-xxxs); }

.margin-top-xxs { margin-top: var(--space-xxs); }

.margin-top-xs { margin-top: var(--space-xs); }

.margin-top-sm { margin-top: var(--space-sm); }

.margin-top-md { margin-top: var(--space-md); }

.margin-top-lg { margin-top: var(--space-lg); }

.margin-top-xl { margin-top: var(--space-xl); }

.margin-top-xxl { margin-top: var(--space-xxl); }

.margin-top-xxxl { margin-top: var(--space-xxxl); }

.margin-top-xxxxl { margin-top: var(--space-xxxxl); }

.margin-top-auto { margin-top: auto; }

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

.margin-bottom-xxxxs { margin-bottom: var(--space-xxxxs); }

.margin-bottom-xxxs { margin-bottom: var(--space-xxxs); }

.margin-bottom-xxs { margin-bottom: var(--space-xxs); }

.margin-bottom-xs { margin-bottom: var(--space-xs); }

.margin-bottom-sm { margin-bottom: var(--space-sm); }

.margin-bottom-md { margin-bottom: var(--space-md); }

.margin-bottom-lg { margin-bottom: var(--space-lg); }

.margin-bottom-xl { margin-bottom: var(--space-xl); }

.margin-bottom-xxl { margin-bottom: var(--space-xxl); }

.margin-bottom-xxxl { margin-bottom: var(--space-xxxl); }

.margin-bottom-xxxxl { margin-bottom: var(--space-xxxxl); }

.margin-bottom-auto { margin-bottom: auto; }

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

.margin-right-xxxxs { margin-right: var(--space-xxxxs); }

.margin-right-xxxs { margin-right: var(--space-xxxs); }

.margin-right-xxs { margin-right: var(--space-xxs); }

.margin-right-xs { margin-right: var(--space-xs); }

.margin-right-sm { margin-right: var(--space-sm); }

.margin-right-md { margin-right: var(--space-md); }

.margin-right-lg { margin-right: var(--space-lg); }

.margin-right-xl { margin-right: var(--space-xl); }

.margin-right-xxl { margin-right: var(--space-xxl); }

.margin-right-xxxl { margin-right: var(--space-xxxl); }

.margin-right-xxxxl { margin-right: var(--space-xxxxl); }

.margin-right-auto { margin-right: auto; }

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

.margin-left-xxxxs { margin-left: var(--space-xxxxs); }

.margin-left-xxxs { margin-left: var(--space-xxxs); }

.margin-left-xxs { margin-left: var(--space-xxs); }

.margin-left-xs { margin-left: var(--space-xs); }

.margin-left-sm { margin-left: var(--space-sm); }

.margin-left-md { margin-left: var(--space-md); }

.margin-left-lg { margin-left: var(--space-lg); }

.margin-left-xl { margin-left: var(--space-xl); }

.margin-left-xxl { margin-left: var(--space-xxl); }

.margin-left-xxxl { margin-left: var(--space-xxxl); }

.margin-left-xxxxl { margin-left: var(--space-xxxxl); }

.margin-left-auto { margin-left: auto; }

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

.margin-x-xxxxs { margin-left: var(--space-xxxxs); margin-right: var(--space-xxxxs); }

.margin-x-xxxs { margin-left: var(--space-xxxs); margin-right: var(--space-xxxs); }

.margin-x-xxs { margin-left: var(--space-xxs); margin-right: var(--space-xxs); }

.margin-x-xs { margin-left: var(--space-xs); margin-right: var(--space-xs); }

.margin-x-sm { margin-left: var(--space-sm); margin-right: var(--space-sm); }

.margin-x-md { margin-left: var(--space-md); margin-right: var(--space-md); }

.margin-x-lg { margin-left: var(--space-lg); margin-right: var(--space-lg); }

.margin-x-xl { margin-left: var(--space-xl); margin-right: var(--space-xl); }

.margin-x-xxl { margin-left: var(--space-xxl); margin-right: var(--space-xxl); }

.margin-x-xxxl { margin-left: var(--space-xxxl); margin-right: var(--space-xxxl); }

.margin-x-xxxxl { margin-left: var(--space-xxxxl); margin-right: var(--space-xxxxl); }

.margin-x-auto { margin-left: auto; margin-right: auto; }

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

.margin-y-xxxxs { margin-top: var(--space-xxxxs); margin-bottom: var(--space-xxxxs); }

.margin-y-xxxs { margin-top: var(--space-xxxs); margin-bottom: var(--space-xxxs); }

.margin-y-xxs { margin-top: var(--space-xxs); margin-bottom: var(--space-xxs); }

.margin-y-xs { margin-top: var(--space-xs); margin-bottom: var(--space-xs); }

.margin-y-sm { margin-top: var(--space-sm); margin-bottom: var(--space-sm); }

.margin-y-md { margin-top: var(--space-md); margin-bottom: var(--space-md); }

.margin-y-lg { margin-top: var(--space-lg); margin-bottom: var(--space-lg); }

.margin-y-xl { margin-top: var(--space-xl); margin-bottom: var(--space-xl); }

.margin-y-xxl { margin-top: var(--space-xxl); margin-bottom: var(--space-xxl); }

.margin-y-xxxl { margin-top: var(--space-xxxl); margin-bottom: var(--space-xxxl); }

.margin-y-xxxxl { margin-top: var(--space-xxxxl); margin-bottom: var(--space-xxxxl); }

.margin-y-auto { margin-top: auto; margin-bottom: auto; }

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

.padding-xxxxs { padding: var(--space-xxxxs); }

.padding-xxxs { padding: var(--space-xxxs); }

.padding-xxs { padding: var(--space-xxs); }

.padding-xs { padding: var(--space-xs); }

.padding-sm { padding: var(--space-sm); }

.padding-md { padding: var(--space-md); }

.padding-lg { padding: var(--space-lg); }

.padding-xl { padding: var(--space-xl); }

.padding-xxl { padding: var(--space-xxl); }

.padding-xxxl { padding: var(--space-xxxl); }

.padding-xxxxl { padding: var(--space-xxxxl); }

.padding-0 { padding: 0; }

.padding-component { padding: var(--component-padding); }

.padding-top-xxxxs { padding-top: var(--space-xxxxs); }

.padding-top-xxxs { padding-top: var(--space-xxxs); }

.padding-top-xxs { padding-top: var(--space-xxs); }

.padding-top-xs { padding-top: var(--space-xs); }

.padding-top-sm { padding-top: var(--space-sm); }

.padding-top-md { padding-top: var(--space-md); }

.padding-top-lg { padding-top: var(--space-lg); }

.padding-top-xl { padding-top: var(--space-xl); }

.padding-top-xxl { padding-top: var(--space-xxl); }

.padding-top-xxxl { padding-top: var(--space-xxxl); }

.padding-top-xxxxl { padding-top: var(--space-xxxxl); }

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

.padding-top-component { padding-top: var(--component-padding); }

.padding-bottom-xxxxs { padding-bottom: var(--space-xxxxs); }

.padding-bottom-xxxs { padding-bottom: var(--space-xxxs); }

.padding-bottom-xxs { padding-bottom: var(--space-xxs); }

.padding-bottom-xs { padding-bottom: var(--space-xs); }

.padding-bottom-sm { padding-bottom: var(--space-sm); }

.padding-bottom-md { padding-bottom: var(--space-md); }

.padding-bottom-lg { padding-bottom: var(--space-lg); }

.padding-bottom-xl { padding-bottom: var(--space-xl); }

.padding-bottom-xxl { padding-bottom: var(--space-xxl); }

.padding-bottom-xxxl { padding-bottom: var(--space-xxxl); }

.padding-bottom-xxxxl { padding-bottom: var(--space-xxxxl); }

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

.padding-bottom-component { padding-bottom: var(--component-padding); }

.padding-right-xxxxs { padding-right: var(--space-xxxxs); }

.padding-right-xxxs { padding-right: var(--space-xxxs); }

.padding-right-xxs { padding-right: var(--space-xxs); }

.padding-right-xs { padding-right: var(--space-xs); }

.padding-right-sm { padding-right: var(--space-sm); }

.padding-right-md { padding-right: var(--space-md); }

.padding-right-lg { padding-right: var(--space-lg); }

.padding-right-xl { padding-right: var(--space-xl); }

.padding-right-xxl { padding-right: var(--space-xxl); }

.padding-right-xxxl { padding-right: var(--space-xxxl); }

.padding-right-xxxxl { padding-right: var(--space-xxxxl); }

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

.padding-right-component { padding-right: var(--component-padding); }

.padding-left-xxxxs { padding-left: var(--space-xxxxs); }

.padding-left-xxxs { padding-left: var(--space-xxxs); }

.padding-left-xxs { padding-left: var(--space-xxs); }

.padding-left-xs { padding-left: var(--space-xs); }

.padding-left-sm { padding-left: var(--space-sm); }

.padding-left-md { padding-left: var(--space-md); }

.padding-left-lg { padding-left: var(--space-lg); }

.padding-left-xl { padding-left: var(--space-xl); }

.padding-left-xxl { padding-left: var(--space-xxl); }

.padding-left-xxxl { padding-left: var(--space-xxxl); }

.padding-left-xxxxl { padding-left: var(--space-xxxxl); }

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

.padding-left-component { padding-left: var(--component-padding); }

.padding-x-xxxxs { padding-left: var(--space-xxxxs); padding-right: var(--space-xxxxs); }

.padding-x-xxxs { padding-left: var(--space-xxxs); padding-right: var(--space-xxxs); }

.padding-x-xxs { padding-left: var(--space-xxs); padding-right: var(--space-xxs); }

.padding-x-xs { padding-left: var(--space-xs); padding-right: var(--space-xs); }

.padding-x-sm { padding-left: var(--space-sm); padding-right: var(--space-sm); }

.padding-x-md { padding-left: var(--space-md); padding-right: var(--space-md); }

.padding-x-lg { padding-left: var(--space-lg); padding-right: var(--space-lg); }

.padding-x-xl { padding-left: var(--space-xl); padding-right: var(--space-xl); }

.padding-x-xxl { padding-left: var(--space-xxl); padding-right: var(--space-xxl); }

.padding-x-xxxl { padding-left: var(--space-xxxl); padding-right: var(--space-xxxl); }

.padding-x-xxxxl { padding-left: var(--space-xxxxl); padding-right: var(--space-xxxxl); }

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

.padding-x-component { padding-left: var(--component-padding); padding-right: var(--component-padding); }

.padding-y-xxxxs { padding-top: var(--space-xxxxs); padding-bottom: var(--space-xxxxs); }

.padding-y-xxxs { padding-top: var(--space-xxxs); padding-bottom: var(--space-xxxs); }

.padding-y-xxs { padding-top: var(--space-xxs); padding-bottom: var(--space-xxs); }

.padding-y-xs { padding-top: var(--space-xs); padding-bottom: var(--space-xs); }

.padding-y-sm { padding-top: var(--space-sm); padding-bottom: var(--space-sm); }

.padding-y-md { padding-top: var(--space-md); padding-bottom: var(--space-md); }

.padding-y-lg { padding-top: var(--space-lg); padding-bottom: var(--space-lg); }

.padding-y-xl { padding-top: var(--space-xl); padding-bottom: var(--space-xl); }

.padding-y-xxl { padding-top: var(--space-xxl); padding-bottom: var(--space-xxl); }

.padding-y-xxxl { padding-top: var(--space-xxxl); padding-bottom: var(--space-xxxl); }

.padding-y-xxxxl { padding-top: var(--space-xxxxl); padding-bottom: var(--space-xxxxl); }

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

.padding-y-component { padding-top: var(--component-padding); padding-bottom: var(--component-padding); }

.align-baseline { vertical-align: baseline; }

.align-top { vertical-align: top; }

.align-middle { vertical-align: middle; }

.align-bottom { vertical-align: bottom; }

.truncate, .text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.text-replace { overflow: hidden; color: transparent; text-indent: 100%; white-space: nowrap; }

.break-word { overflow-wrap: break-word; min-width: 0; }

.text-xs { font-size: var(--text-xs, 0.694em); }

.text-sm { font-size: var(--text-sm, 0.833em); }

.text-base { font-size: var(--text-unit, 1em); }

.text-md { font-size: var(--text-md, 1.2em); }

.text-lg { font-size: var(--text-lg, 1.44em); }

.text-xl { font-size: var(--text-xl, 1.728em); }

.text-xxl { font-size: var(--text-xxl, 2.074em); }

.text-xxxl { font-size: var(--text-xxxl, 2.488em); }

.text-xxxxl { font-size: var(--text-xxxxl, 2.985em); }

.text-unit-rem, .text-unit-em, .text-unit-px { font-size: var(--text-unit); }

.text-unit-rem { --text-unit: 1rem; }

.text-unit-em { --text-unit: 1em; }

.text-unit-px { --text-unit: 16px; }

.text-uppercase { text-transform: uppercase; }

.text-capitalize { text-transform: capitalize; }

.letter-spacing-sm { letter-spacing: -0.05em; }

.letter-spacing-md { letter-spacing: 0.05em; }

.letter-spacing-lg { letter-spacing: 0.1em; }

.font-light { font-weight: 300; }

.font-normal { font-weight: 400; }

.font-medium { font-weight: 500; }

.font-semibold { font-weight: 600; }

.font-bold, .text-bold { font-weight: 700; }

.font-italic { font-style: italic; }

.font-smooth { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

.font-primary { font-family: var(--font-primary); }

.text-center { text-align: center; }

.text-left { text-align: left; }

.text-right { text-align: right; }

.text-justify { text-align: justify; }

.text-line-through { text-decoration: line-through; }

.text-underline { text-decoration: underline; }

.text-decoration-none { text-decoration: none; }

.text-shadow-xs { text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); }

.text-shadow-sm { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); }

.text-shadow-md { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.2); }

.text-shadow-lg { text-shadow: 0 1px 4px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.15), 0 4px 16px rgba(0, 0, 0, 0.2); }

.text-shadow-xl { text-shadow: 0 1px 4px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.15), 0 4px 16px rgba(0, 0, 0, 0.2), 0 6px 24px rgba(0, 0, 0, 0.25); }

.text-shadow-none { text-shadow: none; }

.v-space-xxs { --text-vspace-multiplier: 0.25 !important; }

.v-space-xs { --text-vspace-multiplier: 0.5 !important; }

.v-space-sm { --text-vspace-multiplier: 0.75 !important; }

.v-space-md { --text-vspace-multiplier: 1.25 !important; }

.v-space-lg { --text-vspace-multiplier: 1.5 !important; }

.v-space-xl { --text-vspace-multiplier: 1.75 !important; }

.v-space-xxl { --text-vspace-multiplier: 2 !important; }

.line-height-xs { --heading-line-height: 1; --body-line-height: 1.1; }

.line-height-xs:not(.text-component) { line-height: 1.1; }

.line-height-sm { --heading-line-height: 1.1; --body-line-height: 1.2; }

.line-height-sm:not(.text-component) { line-height: 1.2; }

.line-height-md { --heading-line-height: 1.15; --body-line-height: 1.4; }

.line-height-md:not(.text-component) { line-height: 1.4; }

.line-height-lg { --heading-line-height: 1.22; --body-line-height: 1.58; }

.line-height-lg:not(.text-component) { line-height: 1.58; }

.line-height-xl { --heading-line-height: 1.3; --body-line-height: 1.72; }

.line-height-xl:not(.text-component) { line-height: 1.72; }

.line-height-body { line-height: var(--body-line-height); }

.line-height-heading { line-height: var(--heading-line-height); }

.line-height-normal { line-height: normal !important; }

.line-height-1 { line-height: 1 !important; }

.ws-nowrap, .text-nowrap { white-space: nowrap; }

.cursor-pointer { cursor: pointer; }

.cursor-default { cursor: default; }

.pointer-events-auto { pointer-events: auto; }

.pointer-events-none { pointer-events: none; }

.user-select-none { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

.user-select-all { -webkit-user-select: all; -moz-user-select: all; -ms-user-select: all; user-select: all; }

[class*="color-"] { --color-o: 1; }

.color-inherit { color: inherit; }

.color-bg { color: hsla(var(--color-bg-h), var(--color-bg-s), var(--color-bg-l), var(--color-o, 1)); }

.color-contrast-lower { color: hsla(var(--color-contrast-lower-h), var(--color-contrast-lower-s), var(--color-contrast-lower-l), var(--color-o, 1)); }

.color-contrast-low { color: hsla(var(--color-contrast-low-h), var(--color-contrast-low-s), var(--color-contrast-low-l), var(--color-o, 1)); }

.color-contrast-medium { color: hsla(var(--color-contrast-medium-h), var(--color-contrast-medium-s), var(--color-contrast-medium-l), var(--color-o, 1)); }

.color-contrast-high { color: hsla(var(--color-contrast-high-h), var(--color-contrast-high-s), var(--color-contrast-high-l), var(--color-o, 1)); }

.color-contrast-higher { color: hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), var(--color-o, 1)); }

.color-primary-darker { color: hsla(var(--color-primary-darker-h), var(--color-primary-darker-s), var(--color-primary-darker-l), var(--color-o, 1)); }

.color-primary-dark { color: hsla(var(--color-primary-dark-h), var(--color-primary-dark-s), var(--color-primary-dark-l), var(--color-o, 1)); }

.color-primary { color: hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), var(--color-o, 1)); }

.color-primary-light { color: hsla(var(--color-primary-light-h), var(--color-primary-light-s), var(--color-primary-light-l), var(--color-o, 1)); }

.color-primary-lighter { color: hsla(var(--color-primary-lighter-h), var(--color-primary-lighter-s), var(--color-primary-lighter-l), var(--color-o, 1)); }

.color-accent-darker { color: hsla(var(--color-accent-darker-h), var(--color-accent-darker-s), var(--color-accent-darker-l), var(--color-o, 1)); }

.color-accent-dark { color: hsla(var(--color-accent-dark-h), var(--color-accent-dark-s), var(--color-accent-dark-l), var(--color-o, 1)); }

.color-accent { color: hsla(var(--color-accent-h), var(--color-accent-s), var(--color-accent-l), var(--color-o, 1)); }

.color-accent-light { color: hsla(var(--color-accent-light-h), var(--color-accent-light-s), var(--color-accent-light-l), var(--color-o, 1)); }

.color-accent-lighter { color: hsla(var(--color-accent-lighter-h), var(--color-accent-lighter-s), var(--color-accent-lighter-l), var(--color-o, 1)); }

.color-success-darker { color: hsla(var(--color-success-darker-h), var(--color-success-darker-s), var(--color-success-darker-l), var(--color-o, 1)); }

.color-success-dark { color: hsla(var(--color-success-dark-h), var(--color-success-dark-s), var(--color-success-dark-l), var(--color-o, 1)); }

.color-success { color: hsla(var(--color-success-h), var(--color-success-s), var(--color-success-l), var(--color-o, 1)); }

.color-success-light { color: hsla(var(--color-success-light-h), var(--color-success-light-s), var(--color-success-light-l), var(--color-o, 1)); }

.color-success-lighter { color: hsla(var(--color-success-lighter-h), var(--color-success-lighter-s), var(--color-success-lighter-l), var(--color-o, 1)); }

.color-warning-darker { color: hsla(var(--color-warning-darker-h), var(--color-warning-darker-s), var(--color-warning-darker-l), var(--color-o, 1)); }

.color-warning-dark { color: hsla(var(--color-warning-dark-h), var(--color-warning-dark-s), var(--color-warning-dark-l), var(--color-o, 1)); }

.color-warning { color: hsla(var(--color-warning-h), var(--color-warning-s), var(--color-warning-l), var(--color-o, 1)); }

.color-warning-light { color: hsla(var(--color-warning-light-h), var(--color-warning-light-s), var(--color-warning-light-l), var(--color-o, 1)); }

.color-warning-lighter { color: hsla(var(--color-warning-lighter-h), var(--color-warning-lighter-s), var(--color-warning-lighter-l), var(--color-o, 1)); }

.color-error-darker { color: hsla(var(--color-error-darker-h), var(--color-error-darker-s), var(--color-error-darker-l), var(--color-o, 1)); }

.color-error-dark { color: hsla(var(--color-error-dark-h), var(--color-error-dark-s), var(--color-error-dark-l), var(--color-o, 1)); }

.color-error { color: hsla(var(--color-error-h), var(--color-error-s), var(--color-error-l), var(--color-o, 1)); }

.color-error-light { color: hsla(var(--color-error-light-h), var(--color-error-light-s), var(--color-error-light-l), var(--color-o, 1)); }

.color-error-lighter { color: hsla(var(--color-error-lighter-h), var(--color-error-lighter-s), var(--color-error-lighter-l), var(--color-o, 1)); }

.color-white { color: hsla(var(--color-white-h), var(--color-white-s), var(--color-white-l), var(--color-o, 1)); }

.color-black { color: hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), var(--color-o, 1)); }

@supports (--css: variables) { .color-opacity-0 { --color-o: 0; }
  .color-opacity-10\% { --color-o: 0.1; }
  .color-opacity-20\% { --color-o: 0.2; }
  .color-opacity-30\% { --color-o: 0.3; }
  .color-opacity-40\% { --color-o: 0.4; }
  .color-opacity-50\% { --color-o: 0.5; }
  .color-opacity-60\% { --color-o: 0.6; }
  .color-opacity-70\% { --color-o: 0.7; }
  .color-opacity-80\% { --color-o: 0.8; }
  .color-opacity-90\% { --color-o: 0.9; } }

@supports (--css: variables) { [class*="color-gradient-"] { color: transparent !important; -webkit-background-clip: text; background-clip: text; } }

.width-xxxxs { width: var(--size-xxxxs, 0.25rem); }

.width-xxxs { width: var(--size-xxxs, 0.5rem); }

.width-xxs { width: var(--size-xxs, 0.75rem); }

.width-xs { width: var(--size-xs, 1rem); }

.width-sm { width: var(--size-sm, 1.5rem); }

.width-md { width: var(--size-md, 2rem); }

.width-lg { width: var(--size-lg, 3rem); }

.width-xl { width: var(--size-xl, 4rem); }

.width-xxl { width: var(--size-xxl, 6rem); }

.width-xxxl { width: var(--size-xxxl, 8rem); }

.width-xxxxl { width: var(--size-xxxxl, 16rem); }

.width-0 { width: 0; }

.width-10\% { width: 10%; }

.width-20\% { width: 20%; }

.width-25\% { width: 25%; }

.width-30\% { width: 30%; }

.width-33\% { width: calc(100% / 3); }

.width-40\% { width: 40%; }

.width-50\% { width: 50%; }

.width-60\% { width: 60%; }

.width-66\% { width: calc(100% / 1.5); }

.width-70\% { width: 70%; }

.width-75\% { width: 75%; }

.width-80\% { width: 80%; }

.width-90\% { width: 90%; }

.width-100\% { width: 100%; }

.width-100vw { width: 100vw; }

.width-auto { width: auto; }

.height-xxxxs { height: var(--size-xxxxs, 0.25rem); }

.height-xxxs { height: var(--size-xxxs, 0.5rem); }

.height-xxs { height: var(--size-xxs, 0.75rem); }

.height-xs { height: var(--size-xs, 1rem); }

.height-sm { height: var(--size-sm, 1.5rem); }

.height-md { height: var(--size-md, 2rem); }

.height-lg { height: var(--size-lg, 3rem); }

.height-xl { height: var(--size-xl, 4rem); }

.height-xxl { height: var(--size-xxl, 6rem); }

.height-xxxl { height: var(--size-xxxl, 8rem); }

.height-xxxxl { height: var(--size-xxxxl, 16rem); }

.height-0 { height: 0; }

.height-10\% { height: 10%; }

.height-20\% { height: 20%; }

.height-25\% { height: 25%; }

.height-30\% { height: 30%; }

.height-33\% { height: calc(100% / 3); }

.height-40\% { height: 40%; }

.height-50\% { height: 50%; }

.height-60\% { height: 60%; }

.height-66\% { height: calc(100% / 1.5); }

.height-70\% { height: 70%; }

.height-75\% { height: 75%; }

.height-80\% { height: 80%; }

.height-90\% { height: 90%; }

.height-100\% { height: 100%; }

.height-100vh { height: 100vh; }

.height-auto { height: auto; }

.min-width-0 { min-width: 0; }

.min-width-25\% { min-width: 25%; }

.min-width-33\% { min-width: calc(100% / 3); }

.min-width-50\% { min-width: 50%; }

.min-width-66\% { min-width: calc(100% / 1.5); }

.min-width-75\% { min-width: 75%; }

.min-width-100\% { min-width: 100%; }

.min-width-100vw { min-width: 100vw; }

.min-height-100\% { min-height: 100%; }

.min-height-100vh { min-height: 100vh; }

:root { --max-width-xxxxs: 20rem; --max-width-xxxs:  26rem; --max-width-xxs:   32rem; --max-width-xs:    38rem; --max-width-sm:    48rem; --max-width-md:    64rem; --max-width-lg:    80rem; --max-width-xl:    90rem; --max-width-xxl:   100rem; --max-width-xxxl:  120rem; --max-width-xxxxl: 150rem; }

.max-width-xxxxs { max-width: var(--max-width-xxxxs); }

.max-width-xxxs { max-width: var(--max-width-xxxs); }

.max-width-xxs { max-width: var(--max-width-xxs); }

.max-width-xs { max-width: var(--max-width-xs); }

.max-width-sm { max-width: var(--max-width-sm); }

.max-width-md { max-width: var(--max-width-md); }

.max-width-lg { max-width: var(--max-width-lg); }

.max-width-xl { max-width: var(--max-width-xl); }

.max-width-xxl { max-width: var(--max-width-xxl); }

.max-width-xxxl { max-width: var(--max-width-xxxl); }

.max-width-xxxxl { max-width: var(--max-width-xxxxl); }

.max-width-100\% { max-width: 100%; }

[class*="max-width-adaptive"] { max-width: 32rem; }

@media (min-width: 48rem) { .max-width-adaptive-sm, .max-width-adaptive-md, .max-width-adaptive-lg, .max-width-adaptive-xl, .max-width-adaptive { max-width: 48rem; } }

@media (min-width: 64rem) { .max-width-adaptive-md, .max-width-adaptive-lg, .max-width-adaptive-xl, .max-width-adaptive { max-width: 64rem; } }

@media (min-width: 80rem) { .max-width-adaptive-lg, .max-width-adaptive-xl, .max-width-adaptive { max-width: 80rem; } }

@media (min-width: 90rem) { .max-width-adaptive-xl { max-width: 90rem; } }

.max-height-100\% { max-height: 100%; }

.max-height-100vh { max-height: 100vh; }

.position-relative { position: relative; }

.position-absolute { position: absolute; }

.position-fixed { position: fixed; }

.position-sticky { position: -webkit-sticky; position: sticky; }

.top-0 { top: 0; }

.top-50\% { top: 50%; }

.bottom-0 { bottom: 0; }

.bottom-50\% { bottom: 50%; }

.left-0 { left: 0; }

.left-50\% { left: 50%; }

.right-0 { right: 0; }

.right-50\% { right: 50%; }

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

.z-index-header { z-index: var(--zindex-header); }

.z-index-popover { z-index: var(--zindex-popover); }

.z-index-fixed-element { z-index: var(--zindex-fixed-element); }

.z-index-overlay { z-index: var(--zindex-overlay); }

.zindex-1, .z-index-1 { z-index: 1; }

.zindex-2, .z-index-2 { z-index: 2; }

.zindex-3, .z-index-3 { z-index: 3; }

.overflow-hidden { overflow: hidden; }

.overflow-auto { overflow: auto; }

.momentum-scrolling { -webkit-overflow-scrolling: touch; }

.overscroll-contain { -ms-scroll-chaining: none; overscroll-behavior: contain; }

.opacity-0 { opacity: 0; }

.opacity-10\% { opacity: 0.1; }

.opacity-20\% { opacity: 0.2; }

.opacity-30\% { opacity: 0.3; }

.opacity-40\% { opacity: 0.4; }

.opacity-50\% { opacity: 0.5; }

.opacity-60\% { opacity: 0.6; }

.opacity-70\% { opacity: 0.7; }

.opacity-80\% { opacity: 0.8; }

.opacity-90\% { opacity: 0.9; }

.media-wrapper { position: relative; height: 0; padding-bottom: 56.25%; }

.media-wrapper > * { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }

.media-wrapper--4\:3 { padding-bottom: calc((3 / 4) * 100%); }

.media-wrapper--1\:1 { padding-bottom: calc((1 / 1) * 100%); }

.float-left { float: left; }

.float-right { float: right; }

.clearfix::after { content: ""; display: table; clear: both; }

[class*="border-"] { --border-o: 1; }

.border { border: 1px solid hsla(var(--color-contrast-low-h), var(--color-contrast-low-s), var(--color-contrast-low-l), var(--border-o, 1)); }

.border-top { border-top: 1px solid hsla(var(--color-contrast-low-h), var(--color-contrast-low-s), var(--color-contrast-low-l), var(--border-o, 1)); }

.border-bottom { border-bottom: 1px solid hsla(var(--color-contrast-low-h), var(--color-contrast-low-s), var(--color-contrast-low-l), var(--border-o, 1)); }

.border-left { border-left: 1px solid hsla(var(--color-contrast-low-h), var(--color-contrast-low-s), var(--color-contrast-low-l), var(--border-o, 1)); }

.border-right { border-right: 1px solid hsla(var(--color-contrast-low-h), var(--color-contrast-low-s), var(--color-contrast-low-l), var(--border-o, 1)); }

.border-2 { border-width: 2px; }

.border-3 { border-width: 3px; }

.border-4 { border-width: 4px; }

.border-bg { border-color: hsla(var(--color-bg-h), var(--color-bg-s), var(--color-bg-l), var(--border-o, 1)); }

.border-contrast-lower { border-color: hsla(var(--color-contrast-lower-h), var(--color-contrast-lower-s), var(--color-contrast-lower-l), var(--border-o, 1)); }

.border-contrast-low { border-color: hsla(var(--color-contrast-low-h), var(--color-contrast-low-s), var(--color-contrast-low-l), var(--border-o, 1)); }

.border-contrast-medium { border-color: hsla(var(--color-contrast-medium-h), var(--color-contrast-medium-s), var(--color-contrast-medium-l), var(--border-o, 1)); }

.border-contrast-high { border-color: hsla(var(--color-contrast-high-h), var(--color-contrast-high-s), var(--color-contrast-high-l), var(--border-o, 1)); }

.border-contrast-higher { border-color: hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), var(--border-o, 1)); }

.border-primary-darker { border-color: hsla(var(--color-primary-darker-h), var(--color-primary-darker-s), var(--color-primary-darker-l), var(--border-o, 1)); }

.border-primary-dark { border-color: hsla(var(--color-primary-dark-h), var(--color-primary-dark-s), var(--color-primary-dark-l), var(--border-o, 1)); }

.border-primary { border-color: hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), var(--border-o, 1)); }

.border-primary-light { border-color: hsla(var(--color-primary-light-h), var(--color-primary-light-s), var(--color-primary-light-l), var(--border-o, 1)); }

.border-primary-lighter { border-color: hsla(var(--color-primary-lighter-h), var(--color-primary-lighter-s), var(--color-primary-lighter-l), var(--border-o, 1)); }

.border-accent-darker { border-color: hsla(var(--color-accent-darker-h), var(--color-accent-darker-s), var(--color-accent-darker-l), var(--border-o, 1)); }

.border-accent-dark { border-color: hsla(var(--color-accent-dark-h), var(--color-accent-dark-s), var(--color-accent-dark-l), var(--border-o, 1)); }

.border-accent { border-color: hsla(var(--color-accent-h), var(--color-accent-s), var(--color-accent-l), var(--border-o, 1)); }

.border-accent-light { border-color: hsla(var(--color-accent-light-h), var(--color-accent-light-s), var(--color-accent-light-l), var(--border-o, 1)); }

.border-accent-lighter { border-color: hsla(var(--color-accent-lighter-h), var(--color-accent-lighter-s), var(--color-accent-lighter-l), var(--border-o, 1)); }

.border-success-darker { border-color: hsla(var(--color-success-darker-h), var(--color-success-darker-s), var(--color-success-darker-l), var(--border-o, 1)); }

.border-success-dark { border-color: hsla(var(--color-success-dark-h), var(--color-success-dark-s), var(--color-success-dark-l), var(--border-o, 1)); }

.border-success { border-color: hsla(var(--color-success-h), var(--color-success-s), var(--color-success-l), var(--border-o, 1)); }

.border-success-light { border-color: hsla(var(--color-success-light-h), var(--color-success-light-s), var(--color-success-light-l), var(--border-o, 1)); }

.border-success-lighter { border-color: hsla(var(--color-success-lighter-h), var(--color-success-lighter-s), var(--color-success-lighter-l), var(--border-o, 1)); }

.border-warning-darker { border-color: hsla(var(--color-warning-darker-h), var(--color-warning-darker-s), var(--color-warning-darker-l), var(--border-o, 1)); }

.border-warning-dark { border-color: hsla(var(--color-warning-dark-h), var(--color-warning-dark-s), var(--color-warning-dark-l), var(--border-o, 1)); }

.border-warning { border-color: hsla(var(--color-warning-h), var(--color-warning-s), var(--color-warning-l), var(--border-o, 1)); }

.border-warning-light { border-color: hsla(var(--color-warning-light-h), var(--color-warning-light-s), var(--color-warning-light-l), var(--border-o, 1)); }

.border-warning-lighter { border-color: hsla(var(--color-warning-lighter-h), var(--color-warning-lighter-s), var(--color-warning-lighter-l), var(--border-o, 1)); }

.border-error-darker { border-color: hsla(var(--color-error-darker-h), var(--color-error-darker-s), var(--color-error-darker-l), var(--border-o, 1)); }

.border-error-dark { border-color: hsla(var(--color-error-dark-h), var(--color-error-dark-s), var(--color-error-dark-l), var(--border-o, 1)); }

.border-error { border-color: hsla(var(--color-error-h), var(--color-error-s), var(--color-error-l), var(--border-o, 1)); }

.border-error-light { border-color: hsla(var(--color-error-light-h), var(--color-error-light-s), var(--color-error-light-l), var(--border-o, 1)); }

.border-error-lighter { border-color: hsla(var(--color-error-lighter-h), var(--color-error-lighter-s), var(--color-error-lighter-l), var(--border-o, 1)); }

.border-white { border-color: hsla(var(--color-white-h), var(--color-white-s), var(--color-white-l), var(--border-o, 1)); }

.border-black { border-color: hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), var(--border-o, 1)); }

@supports (--css: variables) { .border-opacity-0 { --border-o: 0; }
  .border-opacity-10\% { --border-o: 0.1; }
  .border-opacity-20\% { --border-o: 0.2; }
  .border-opacity-30\% { --border-o: 0.3; }
  .border-opacity-40\% { --border-o: 0.4; }
  .border-opacity-50\% { --border-o: 0.5; }
  .border-opacity-60\% { --border-o: 0.6; }
  .border-opacity-70\% { --border-o: 0.7; }
  .border-opacity-80\% { --border-o: 0.8; }
  .border-opacity-90\% { --border-o: 0.9; } }

.radius-sm { border-radius: var(--radius-sm); }

.radius-md { border-radius: var(--radius-md); }

.radius-lg { border-radius: var(--radius-lg); }

.radius-50\% { border-radius: 50%; }

.radius-full { border-radius: 50em; }

.radius-0 { border-radius: 0; }

.radius-top-left-0 { border-top-left-radius: 0; }

.radius-top-right-0 { border-top-right-radius: 0; }

.radius-bottom-right-0 { border-bottom-right-radius: 0; }

.radius-bottom-left-0 { border-bottom-left-radius: 0; }

.shadow-xs { box-shadow: var(--shadow-xs); }

.shadow-sm { box-shadow: var(--shadow-sm); }

.shadow-md { box-shadow: var(--shadow-md); }

.shadow-lg { box-shadow: var(--shadow-lg); }

.shadow-xl { box-shadow: var(--shadow-xl); }

.shadow-none { box-shadow: none; }

.bg, [class*="bg-"] { --bg-o: 1; }

.bg-transparent { background-color: transparent; }

.bg-inherit { background-color: inherit; }

.bg { background-color: hsla(var(--color-bg-h), var(--color-bg-s), var(--color-bg-l), var(--bg-o)); }

.bg-contrast-lower { background-color: hsla(var(--color-contrast-lower-h), var(--color-contrast-lower-s), var(--color-contrast-lower-l), var(--bg-o, 1)); }

.bg-contrast-low { background-color: hsla(var(--color-contrast-low-h), var(--color-contrast-low-s), var(--color-contrast-low-l), var(--bg-o, 1)); }

.bg-contrast-medium { background-color: hsla(var(--color-contrast-medium-h), var(--color-contrast-medium-s), var(--color-contrast-medium-l), var(--bg-o, 1)); }

.bg-contrast-high { background-color: hsla(var(--color-contrast-high-h), var(--color-contrast-high-s), var(--color-contrast-high-l), var(--bg-o, 1)); }

.bg-contrast-higher { background-color: hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), var(--bg-o, 1)); }

.bg-primary-darker { background-color: hsla(var(--color-primary-darker-h), var(--color-primary-darker-s), var(--color-primary-darker-l), var(--bg-o, 1)); }

.bg-primary-dark { background-color: hsla(var(--color-primary-dark-h), var(--color-primary-dark-s), var(--color-primary-dark-l), var(--bg-o, 1)); }

.bg-primary { background-color: hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), var(--bg-o, 1)); }

.bg-primary-light { background-color: hsla(var(--color-primary-light-h), var(--color-primary-light-s), var(--color-primary-light-l), var(--bg-o, 1)); }

.bg-primary-lighter { background-color: hsla(var(--color-primary-lighter-h), var(--color-primary-lighter-s), var(--color-primary-lighter-l), var(--bg-o, 1)); }

.bg-accent-darker { background-color: hsla(var(--color-accent-darker-h), var(--color-accent-darker-s), var(--color-accent-darker-l), var(--bg-o, 1)); }

.bg-accent-dark { background-color: hsla(var(--color-accent-dark-h), var(--color-accent-dark-s), var(--color-accent-dark-l), var(--bg-o, 1)); }

.bg-accent { background-color: hsla(var(--color-accent-h), var(--color-accent-s), var(--color-accent-l), var(--bg-o, 1)); }

.bg-accent-light { background-color: hsla(var(--color-accent-light-h), var(--color-accent-light-s), var(--color-accent-light-l), var(--bg-o, 1)); }

.bg-accent-lighter { background-color: hsla(var(--color-accent-lighter-h), var(--color-accent-lighter-s), var(--color-accent-lighter-l), var(--bg-o, 1)); }

.bg-success-darker { background-color: hsla(var(--color-success-darker-h), var(--color-success-darker-s), var(--color-success-darker-l), var(--bg-o, 1)); }

.bg-success-dark { background-color: hsla(var(--color-success-dark-h), var(--color-success-dark-s), var(--color-success-dark-l), var(--bg-o, 1)); }

.bg-success { background-color: hsla(var(--color-success-h), var(--color-success-s), var(--color-success-l), var(--bg-o, 1)); }

.bg-success-light { background-color: hsla(var(--color-success-light-h), var(--color-success-light-s), var(--color-success-light-l), var(--bg-o, 1)); }

.bg-success-lighter { background-color: hsla(var(--color-success-lighter-h), var(--color-success-lighter-s), var(--color-success-lighter-l), var(--bg-o, 1)); }

.bg-warning-darker { background-color: hsla(var(--color-warning-darker-h), var(--color-warning-darker-s), var(--color-warning-darker-l), var(--bg-o, 1)); }

.bg-warning-dark { background-color: hsla(var(--color-warning-dark-h), var(--color-warning-dark-s), var(--color-warning-dark-l), var(--bg-o, 1)); }

.bg-warning { background-color: hsla(var(--color-warning-h), var(--color-warning-s), var(--color-warning-l), var(--bg-o, 1)); }

.bg-warning-light { background-color: hsla(var(--color-warning-light-h), var(--color-warning-light-s), var(--color-warning-light-l), var(--bg-o, 1)); }

.bg-warning-lighter { background-color: hsla(var(--color-warning-lighter-h), var(--color-warning-lighter-s), var(--color-warning-lighter-l), var(--bg-o, 1)); }

.bg-error-darker { background-color: hsla(var(--color-error-darker-h), var(--color-error-darker-s), var(--color-error-darker-l), var(--bg-o, 1)); }

.bg-error-dark { background-color: hsla(var(--color-error-dark-h), var(--color-error-dark-s), var(--color-error-dark-l), var(--bg-o, 1)); }

.bg-error { background-color: hsla(var(--color-error-h), var(--color-error-s), var(--color-error-l), var(--bg-o, 1)); }

.bg-error-light { background-color: hsla(var(--color-error-light-h), var(--color-error-light-s), var(--color-error-light-l), var(--bg-o, 1)); }

.bg-error-lighter { background-color: hsla(var(--color-error-lighter-h), var(--color-error-lighter-s), var(--color-error-lighter-l), var(--bg-o, 1)); }

.bg-white { background-color: hsla(var(--color-white-h), var(--color-white-s), var(--color-white-l), var(--bg-o, 1)); }

.bg-black { background-color: hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), var(--bg-o, 1)); }

@supports (--css: variables) { .bg-opacity-0 { --bg-o: 0; }
  .bg-opacity-10\% { --bg-o: 0.1; }
  .bg-opacity-20\% { --bg-o: 0.2; }
  .bg-opacity-30\% { --bg-o: 0.3; }
  .bg-opacity-40\% { --bg-o: 0.4; }
  .bg-opacity-50\% { --bg-o: 0.5; }
  .bg-opacity-60\% { --bg-o: 0.6; }
  .bg-opacity-70\% { --bg-o: 0.7; }
  .bg-opacity-80\% { --bg-o: 0.8; }
  .bg-opacity-90\% { --bg-o: 0.9; } }

.bg-cover { background-size: cover; }

.bg-center { background-position: center; }

.bg-no-repeat { background-repeat: no-repeat; }

.backdrop-blur-10 { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }

.backdrop-blur-20 { -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }

.isolate { isolation: isolate; }

.blend-multiply { mix-blend-mode: multiply; }

.blend-overlay { mix-blend-mode: overlay; }

.blend-difference { mix-blend-mode: difference; }

.object-contain { -o-object-fit: contain; object-fit: contain; }

.object-cover { -o-object-fit: cover; object-fit: cover; }

.perspective-xs { perspective: 250px; }

.perspective-sm { perspective: 500px; }

.perspective-md { perspective: 1000px; }

.perspective-lg { perspective: 1500px; }

.perspective-xl { perspective: 3000px; }

.flip { transform: scale(-1); }

.flip-x { transform: scaleX(-1); }

.flip-y { transform: scaleY(-1); }

.-translate-50\% { transform: translate(-50%, -50%); }

.-translate-x-50\% { transform: translateX(-50%); }

.-translate-y-50\% { transform: translateY(-50%); }

.translate-50\% { transform: translate(50%, 50%); }

.translate-x-50\% { transform: translateX(50%); }

.translate-y-50\% { transform: translateY(50%); }

.origin-center { transform-origin: center; }

.origin-top { transform-origin: center top; }

.origin-right { transform-origin: right center; }

.origin-bottom { transform-origin: center bottom; }

.origin-left { transform-origin: left center; }

.origin-top-left { transform-origin: left top; }

.origin-top-right { transform-origin: right top; }

.origin-bottom-left { transform-origin: left bottom; }

.origin-bottom-right { transform-origin: right bottom; }

@media (min-width: 32rem) { .flex\@xs { display: flex; }
  .inline-flex\@xs { display: inline-flex; }
  .flex-wrap\@xs { flex-wrap: wrap; }
  .flex-column\@xs { flex-direction: column; }
  .flex-column-reverse\@xs { flex-direction: column-reverse; }
  .flex-row\@xs { flex-direction: row; }
  .flex-row-reverse\@xs { flex-direction: row-reverse; }
  .flex-center\@xs { justify-content: center; align-items: center; }
  .flex-grow\@xs { flex-grow: 1; }
  .flex-grow-0\@xs { flex-grow: 0; }
  .flex-shrink\@xs { flex-shrink: 1; }
  .flex-shrink-0\@xs { flex-shrink: 0; }
  .flex-basis-0\@xs { flex-basis: 0; }
  .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; }
  .items-center\@xs { align-items: center; }
  .items-start\@xs { align-items: flex-start; }
  .items-end\@xs { align-items: flex-end; }
  .items-baseline\@xs { align-items: baseline; }
  .order-1\@xs { order: 1; }
  .order-2\@xs { order: 2; }
  .order-3\@xs { order: 3; }
  .block\@xs { display: block; }
  .inline-block\@xs { display: inline-block; }
  .inline\@xs { display: inline; }
  @supports (--css: variables) { .margin-xxxxs\@xs { margin: var(--space-xxxxs); }
    .margin-xxxs\@xs { margin: var(--space-xxxs); }
    .margin-xxs\@xs { margin: var(--space-xxs); }
    .margin-xs\@xs { margin: var(--space-xs); }
    .margin-sm\@xs { margin: var(--space-sm); }
    .margin-md\@xs { margin: var(--space-md); }
    .margin-lg\@xs { margin: var(--space-lg); }
    .margin-xl\@xs { margin: var(--space-xl); }
    .margin-xxl\@xs { margin: var(--space-xxl); }
    .margin-xxxl\@xs { margin: var(--space-xxxl); }
    .margin-xxxxl\@xs { margin: var(--space-xxxxl); }
    .margin-auto\@xs { margin: auto; }
    .margin-0\@xs { margin: 0; }
    .margin-top-xxxxs\@xs { margin-top: var(--space-xxxxs); }
    .margin-top-xxxs\@xs { margin-top: var(--space-xxxs); }
    .margin-top-xxs\@xs { margin-top: var(--space-xxs); }
    .margin-top-xs\@xs { margin-top: var(--space-xs); }
    .margin-top-sm\@xs { margin-top: var(--space-sm); }
    .margin-top-md\@xs { margin-top: var(--space-md); }
    .margin-top-lg\@xs { margin-top: var(--space-lg); }
    .margin-top-xl\@xs { margin-top: var(--space-xl); }
    .margin-top-xxl\@xs { margin-top: var(--space-xxl); }
    .margin-top-xxxl\@xs { margin-top: var(--space-xxxl); }
    .margin-top-xxxxl\@xs { margin-top: var(--space-xxxxl); }
    .margin-top-auto\@xs { margin-top: auto; }
    .margin-top-0\@xs { margin-top: 0; }
    .margin-bottom-xxxxs\@xs { margin-bottom: var(--space-xxxxs); }
    .margin-bottom-xxxs\@xs { margin-bottom: var(--space-xxxs); }
    .margin-bottom-xxs\@xs { margin-bottom: var(--space-xxs); }
    .margin-bottom-xs\@xs { margin-bottom: var(--space-xs); }
    .margin-bottom-sm\@xs { margin-bottom: var(--space-sm); }
    .margin-bottom-md\@xs { margin-bottom: var(--space-md); }
    .margin-bottom-lg\@xs { margin-bottom: var(--space-lg); }
    .margin-bottom-xl\@xs { margin-bottom: var(--space-xl); }
    .margin-bottom-xxl\@xs { margin-bottom: var(--space-xxl); }
    .margin-bottom-xxxl\@xs { margin-bottom: var(--space-xxxl); }
    .margin-bottom-xxxxl\@xs { margin-bottom: var(--space-xxxxl); }
    .margin-bottom-auto\@xs { margin-bottom: auto; }
    .margin-bottom-0\@xs { margin-bottom: 0; }
    .margin-right-xxxxs\@xs { margin-right: var(--space-xxxxs); }
    .margin-right-xxxs\@xs { margin-right: var(--space-xxxs); }
    .margin-right-xxs\@xs { margin-right: var(--space-xxs); }
    .margin-right-xs\@xs { margin-right: var(--space-xs); }
    .margin-right-sm\@xs { margin-right: var(--space-sm); }
    .margin-right-md\@xs { margin-right: var(--space-md); }
    .margin-right-lg\@xs { margin-right: var(--space-lg); }
    .margin-right-xl\@xs { margin-right: var(--space-xl); }
    .margin-right-xxl\@xs { margin-right: var(--space-xxl); }
    .margin-right-xxxl\@xs { margin-right: var(--space-xxxl); }
    .margin-right-xxxxl\@xs { margin-right: var(--space-xxxxl); }
    .margin-right-auto\@xs { margin-right: auto; }
    .margin-right-0\@xs { margin-right: 0; }
    .margin-left-xxxxs\@xs { margin-left: var(--space-xxxxs); }
    .margin-left-xxxs\@xs { margin-left: var(--space-xxxs); }
    .margin-left-xxs\@xs { margin-left: var(--space-xxs); }
    .margin-left-xs\@xs { margin-left: var(--space-xs); }
    .margin-left-sm\@xs { margin-left: var(--space-sm); }
    .margin-left-md\@xs { margin-left: var(--space-md); }
    .margin-left-lg\@xs { margin-left: var(--space-lg); }
    .margin-left-xl\@xs { margin-left: var(--space-xl); }
    .margin-left-xxl\@xs { margin-left: var(--space-xxl); }
    .margin-left-xxxl\@xs { margin-left: var(--space-xxxl); }
    .margin-left-xxxxl\@xs { margin-left: var(--space-xxxxl); }
    .margin-left-auto\@xs { margin-left: auto; }
    .margin-left-0\@xs { margin-left: 0; }
    .margin-x-xxxxs\@xs { margin-left: var(--space-xxxxs); margin-right: var(--space-xxxxs); }
    .margin-x-xxxs\@xs { margin-left: var(--space-xxxs); margin-right: var(--space-xxxs); }
    .margin-x-xxs\@xs { margin-left: var(--space-xxs); margin-right: var(--space-xxs); }
    .margin-x-xs\@xs { margin-left: var(--space-xs); margin-right: var(--space-xs); }
    .margin-x-sm\@xs { margin-left: var(--space-sm); margin-right: var(--space-sm); }
    .margin-x-md\@xs { margin-left: var(--space-md); margin-right: var(--space-md); }
    .margin-x-lg\@xs { margin-left: var(--space-lg); margin-right: var(--space-lg); }
    .margin-x-xl\@xs { margin-left: var(--space-xl); margin-right: var(--space-xl); }
    .margin-x-xxl\@xs { margin-left: var(--space-xxl); margin-right: var(--space-xxl); }
    .margin-x-xxxl\@xs { margin-left: var(--space-xxxl); margin-right: var(--space-xxxl); }
    .margin-x-xxxxl\@xs { margin-left: var(--space-xxxxl); margin-right: var(--space-xxxxl); }
    .margin-x-auto\@xs { margin-left: auto; margin-right: auto; }
    .margin-x-0\@xs { margin-left: 0; margin-right: 0; }
    .margin-y-xxxxs\@xs { margin-top: var(--space-xxxxs); margin-bottom: var(--space-xxxxs); }
    .margin-y-xxxs\@xs { margin-top: var(--space-xxxs); margin-bottom: var(--space-xxxs); }
    .margin-y-xxs\@xs { margin-top: var(--space-xxs); margin-bottom: var(--space-xxs); }
    .margin-y-xs\@xs { margin-top: var(--space-xs); margin-bottom: var(--space-xs); }
    .margin-y-sm\@xs { margin-top: var(--space-sm); margin-bottom: var(--space-sm); }
    .margin-y-md\@xs { margin-top: var(--space-md); margin-bottom: var(--space-md); }
    .margin-y-lg\@xs { margin-top: var(--space-lg); margin-bottom: var(--space-lg); }
    .margin-y-xl\@xs { margin-top: var(--space-xl); margin-bottom: var(--space-xl); }
    .margin-y-xxl\@xs { margin-top: var(--space-xxl); margin-bottom: var(--space-xxl); }
    .margin-y-xxxl\@xs { margin-top: var(--space-xxxl); margin-bottom: var(--space-xxxl); }
    .margin-y-xxxxl\@xs { margin-top: var(--space-xxxxl); margin-bottom: var(--space-xxxxl); }
    .margin-y-auto\@xs { margin-top: auto; margin-bottom: auto; }
    .margin-y-0\@xs { margin-top: 0; margin-bottom: 0; } }
  @supports (--css: variables) { .padding-xxxxs\@xs { padding: var(--space-xxxxs); }
    .padding-xxxs\@xs { padding: var(--space-xxxs); }
    .padding-xxs\@xs { padding: var(--space-xxs); }
    .padding-xs\@xs { padding: var(--space-xs); }
    .padding-sm\@xs { padding: var(--space-sm); }
    .padding-md\@xs { padding: var(--space-md); }
    .padding-lg\@xs { padding: var(--space-lg); }
    .padding-xl\@xs { padding: var(--space-xl); }
    .padding-xxl\@xs { padding: var(--space-xxl); }
    .padding-xxxl\@xs { padding: var(--space-xxxl); }
    .padding-xxxxl\@xs { padding: var(--space-xxxxl); }
    .padding-0\@xs { padding: 0; }
    .padding-component\@xs { padding: var(--component-padding); }
    .padding-top-xxxxs\@xs { padding-top: var(--space-xxxxs); }
    .padding-top-xxxs\@xs { padding-top: var(--space-xxxs); }
    .padding-top-xxs\@xs { padding-top: var(--space-xxs); }
    .padding-top-xs\@xs { padding-top: var(--space-xs); }
    .padding-top-sm\@xs { padding-top: var(--space-sm); }
    .padding-top-md\@xs { padding-top: var(--space-md); }
    .padding-top-lg\@xs { padding-top: var(--space-lg); }
    .padding-top-xl\@xs { padding-top: var(--space-xl); }
    .padding-top-xxl\@xs { padding-top: var(--space-xxl); }
    .padding-top-xxxl\@xs { padding-top: var(--space-xxxl); }
    .padding-top-xxxxl\@xs { padding-top: var(--space-xxxxl); }
    .padding-top-0\@xs { padding-top: 0; }
    .padding-top-component\@xs { padding-top: var(--component-padding); }
    .padding-bottom-xxxxs\@xs { padding-bottom: var(--space-xxxxs); }
    .padding-bottom-xxxs\@xs { padding-bottom: var(--space-xxxs); }
    .padding-bottom-xxs\@xs { padding-bottom: var(--space-xxs); }
    .padding-bottom-xs\@xs { padding-bottom: var(--space-xs); }
    .padding-bottom-sm\@xs { padding-bottom: var(--space-sm); }
    .padding-bottom-md\@xs { padding-bottom: var(--space-md); }
    .padding-bottom-lg\@xs { padding-bottom: var(--space-lg); }
    .padding-bottom-xl\@xs { padding-bottom: var(--space-xl); }
    .padding-bottom-xxl\@xs { padding-bottom: var(--space-xxl); }
    .padding-bottom-xxxl\@xs { padding-bottom: var(--space-xxxl); }
    .padding-bottom-xxxxl\@xs { padding-bottom: var(--space-xxxxl); }
    .padding-bottom-0\@xs { padding-bottom: 0; }
    .padding-bottom-component\@xs { padding-bottom: var(--component-padding); }
    .padding-right-xxxxs\@xs { padding-right: var(--space-xxxxs); }
    .padding-right-xxxs\@xs { padding-right: var(--space-xxxs); }
    .padding-right-xxs\@xs { padding-right: var(--space-xxs); }
    .padding-right-xs\@xs { padding-right: var(--space-xs); }
    .padding-right-sm\@xs { padding-right: var(--space-sm); }
    .padding-right-md\@xs { padding-right: var(--space-md); }
    .padding-right-lg\@xs { padding-right: var(--space-lg); }
    .padding-right-xl\@xs { padding-right: var(--space-xl); }
    .padding-right-xxl\@xs { padding-right: var(--space-xxl); }
    .padding-right-xxxl\@xs { padding-right: var(--space-xxxl); }
    .padding-right-xxxxl\@xs { padding-right: var(--space-xxxxl); }
    .padding-right-0\@xs { padding-right: 0; }
    .padding-right-component\@xs { padding-right: var(--component-padding); }
    .padding-left-xxxxs\@xs { padding-left: var(--space-xxxxs); }
    .padding-left-xxxs\@xs { padding-left: var(--space-xxxs); }
    .padding-left-xxs\@xs { padding-left: var(--space-xxs); }
    .padding-left-xs\@xs { padding-left: var(--space-xs); }
    .padding-left-sm\@xs { padding-left: var(--space-sm); }
    .padding-left-md\@xs { padding-left: var(--space-md); }
    .padding-left-lg\@xs { padding-left: var(--space-lg); }
    .padding-left-xl\@xs { padding-left: var(--space-xl); }
    .padding-left-xxl\@xs { padding-left: var(--space-xxl); }
    .padding-left-xxxl\@xs { padding-left: var(--space-xxxl); }
    .padding-left-xxxxl\@xs { padding-left: var(--space-xxxxl); }
    .padding-left-0\@xs { padding-left: 0; }
    .padding-left-component\@xs { padding-left: var(--component-padding); }
    .padding-x-xxxxs\@xs { padding-left: var(--space-xxxxs); padding-right: var(--space-xxxxs); }
    .padding-x-xxxs\@xs { padding-left: var(--space-xxxs); padding-right: var(--space-xxxs); }
    .padding-x-xxs\@xs { padding-left: var(--space-xxs); padding-right: var(--space-xxs); }
    .padding-x-xs\@xs { padding-left: var(--space-xs); padding-right: var(--space-xs); }
    .padding-x-sm\@xs { padding-left: var(--space-sm); padding-right: var(--space-sm); }
    .padding-x-md\@xs { padding-left: var(--space-md); padding-right: var(--space-md); }
    .padding-x-lg\@xs { padding-left: var(--space-lg); padding-right: var(--space-lg); }
    .padding-x-xl\@xs { padding-left: var(--space-xl); padding-right: var(--space-xl); }
    .padding-x-xxl\@xs { padding-left: var(--space-xxl); padding-right: var(--space-xxl); }
    .padding-x-xxxl\@xs { padding-left: var(--space-xxxl); padding-right: var(--space-xxxl); }
    .padding-x-xxxxl\@xs { padding-left: var(--space-xxxxl); padding-right: var(--space-xxxxl); }
    .padding-x-0\@xs { padding-left: 0; padding-right: 0; }
    .padding-x-component\@xs { padding-left: var(--component-padding); padding-right: var(--component-padding); }
    .padding-y-xxxxs\@xs { padding-top: var(--space-xxxxs); padding-bottom: var(--space-xxxxs); }
    .padding-y-xxxs\@xs { padding-top: var(--space-xxxs); padding-bottom: var(--space-xxxs); }
    .padding-y-xxs\@xs { padding-top: var(--space-xxs); padding-bottom: var(--space-xxs); }
    .padding-y-xs\@xs { padding-top: var(--space-xs); padding-bottom: var(--space-xs); }
    .padding-y-sm\@xs { padding-top: var(--space-sm); padding-bottom: var(--space-sm); }
    .padding-y-md\@xs { padding-top: var(--space-md); padding-bottom: var(--space-md); }
    .padding-y-lg\@xs { padding-top: var(--space-lg); padding-bottom: var(--space-lg); }
    .padding-y-xl\@xs { padding-top: var(--space-xl); padding-bottom: var(--space-xl); }
    .padding-y-xxl\@xs { padding-top: var(--space-xxl); padding-bottom: var(--space-xxl); }
    .padding-y-xxxl\@xs { padding-top: var(--space-xxxl); padding-bottom: var(--space-xxxl); }
    .padding-y-xxxxl\@xs { padding-top: var(--space-xxxxl); padding-bottom: var(--space-xxxxl); }
    .padding-y-0\@xs { padding-top: 0; padding-bottom: 0; }
    .padding-y-component\@xs { padding-top: var(--component-padding); padding-bottom: var(--component-padding); } }
  .text-center\@xs { text-align: center; }
  .text-left\@xs { text-align: left; }
  .text-right\@xs { text-align: right; }
  .text-justify\@xs { text-align: justify; }
  @supports (--css: variables) { .text-xs\@xs { font-size: var(--text-xs, 0.694em); }
    .text-sm\@xs { font-size: var(--text-sm, 0.833em); }
    .text-base\@xs { font-size: var(--text-unit, 1em); }
    .text-md\@xs { font-size: var(--text-md, 1.2em); }
    .text-lg\@xs { font-size: var(--text-lg, 1.44em); }
    .text-xl\@xs { font-size: var(--text-xl, 1.728em); }
    .text-xxl\@xs { font-size: var(--text-xxl, 2.074em); }
    .text-xxxl\@xs { font-size: var(--text-xxxl, 2.488em); }
    .text-xxxxl\@xs { font-size: var(--text-xxxxl, 2.985em); } }
  @supports (--css: variables) { .width-xxxxs\@xs { width: var(--size-xxxxs, 0.25rem); }
    .width-xxxs\@xs { width: var(--size-xxxs, 0.5rem); }
    .width-xxs\@xs { width: var(--size-xxs, 0.75rem); }
    .width-xs\@xs { width: var(--size-xs, 1rem); }
    .width-sm\@xs { width: var(--size-sm, 1.5rem); }
    .width-md\@xs { width: var(--size-md, 2rem); }
    .width-lg\@xs { width: var(--size-lg, 3rem); }
    .width-xl\@xs { width: var(--size-xl, 4rem); }
    .width-xxl\@xs { width: var(--size-xxl, 6rem); }
    .width-xxxl\@xs { width: var(--size-xxxl, 8rem); }
    .width-xxxxl\@xs { width: var(--size-xxxxl, 16rem); } }
  .width-0\@xs { width: 0; }
  .width-10\%\@xs { width: 10%; }
  .width-20\%\@xs { width: 20%; }
  .width-25\%\@xs { width: 25%; }
  .width-30\%\@xs { width: 30%; }
  .width-33\%\@xs { width: calc(100% / 3); }
  .width-40\%\@xs { width: 40%; }
  .width-50\%\@xs { width: 50%; }
  .width-60\%\@xs { width: 60%; }
  .width-66\%\@xs { width: calc(100% / 1.5); }
  .width-70\%\@xs { width: 70%; }
  .width-75\%\@xs { width: 75%; }
  .width-80\%\@xs { width: 80%; }
  .width-90\%\@xs { width: 90%; }
  .width-100\%\@xs { width: 100%; }
  .width-100vw\@xs { width: 100vw; }
  .width-auto\@xs { width: auto; }
  @supports (--css: variables) { .height-xxxxs\@xs { height: var(--size-xxxxs, 0.25rem); }
    .height-xxxs\@xs { height: var(--size-xxxs, 0.5rem); }
    .height-xxs\@xs { height: var(--size-xxs, 0.75rem); }
    .height-xs\@xs { height: var(--size-xs, 1rem); }
    .height-sm\@xs { height: var(--size-sm, 1.5rem); }
    .height-md\@xs { height: var(--size-md, 2rem); }
    .height-lg\@xs { height: var(--size-lg, 3rem); }
    .height-xl\@xs { height: var(--size-xl, 4rem); }
    .height-xxl\@xs { height: var(--size-xxl, 6rem); }
    .height-xxxl\@xs { height: var(--size-xxxl, 8rem); }
    .height-xxxxl\@xs { height: var(--size-xxxxl, 16rem); } }
  .height-0\@xs { height: 0; }
  .height-10\%\@xs { height: 10%; }
  .height-20\%\@xs { height: 20%; }
  .height-25\%\@xs { height: 25%; }
  .height-30\%\@xs { height: 30%; }
  .height-33\%\@xs { height: calc(100% / 3); }
  .height-40\%\@xs { height: 40%; }
  .height-50\%\@xs { height: 50%; }
  .height-60\%\@xs { height: 60%; }
  .height-66\%\@xs { height: calc(100% / 1.5); }
  .height-70\%\@xs { height: 70%; }
  .height-75\%\@xs { height: 75%; }
  .height-80\%\@xs { height: 80%; }
  .height-90\%\@xs { height: 90%; }
  .height-100\%\@xs { height: 100%; }
  .height-100vh\@xs { height: 100vh; }
  .height-auto\@xs { height: auto; }
  .position-relative\@xs { position: relative; }
  .position-absolute\@xs { position: absolute; }
  .position-fixed\@xs { position: fixed; }
  .position-sticky\@xs { position: -webkit-sticky; position: sticky; }
  .position-static\@xs { position: static; }
  .top-0\@xs { top: 0; }
  .top-50\%\@xs { top: 50%; }
  .bottom-0\@xs { bottom: 0; }
  .bottom-50\%\@xs { bottom: 50%; }
  .left-0\@xs { left: 0; }
  .left-50\%\@xs { left: 50%; }
  .right-0\@xs { right: 0; }
  .right-50\%\@xs { right: 50%; }
  .inset-0\@xs { top: 0; right: 0; bottom: 0; left: 0; }
  .hide\@xs { display: none !important; } }

@media not all and (min-width: 32rem) { .has-margin\@xs { margin: 0 !important; }
  .has-padding\@xs { padding: 0 !important; }
  .display\@xs { display: none !important; } }

@media (min-width: 48rem) { .flex\@sm { display: flex; }
  .inline-flex\@sm { display: inline-flex; }
  .flex-wrap\@sm { flex-wrap: wrap; }
  .flex-column\@sm { flex-direction: column; }
  .flex-column-reverse\@sm { flex-direction: column-reverse; }
  .flex-row\@sm { flex-direction: row; }
  .flex-row-reverse\@sm { flex-direction: row-reverse; }
  .flex-center\@sm { justify-content: center; align-items: center; }
  .flex-grow\@sm { flex-grow: 1; }
  .flex-grow-0\@sm { flex-grow: 0; }
  .flex-shrink\@sm { flex-shrink: 1; }
  .flex-shrink-0\@sm { flex-shrink: 0; }
  .flex-basis-0\@sm { flex-basis: 0; }
  .justify-start\@sm { justify-content: flex-start; }
  .justify-end\@sm { justify-content: flex-end; }
  .justify-center\@sm { justify-content: center; }
  .justify-between\@sm { justify-content: space-between; }
  .items-center\@sm { align-items: center; }
  .items-start\@sm { align-items: flex-start; }
  .items-end\@sm { align-items: flex-end; }
  .items-baseline\@sm { align-items: baseline; }
  .order-1\@sm { order: 1; }
  .order-2\@sm { order: 2; }
  .order-3\@sm { order: 3; }
  .block\@sm { display: block; }
  .inline-block\@sm { display: inline-block; }
  .inline\@sm { display: inline; }
  @supports (--css: variables) { .margin-xxxxs\@sm { margin: var(--space-xxxxs); }
    .margin-xxxs\@sm { margin: var(--space-xxxs); }
    .margin-xxs\@sm { margin: var(--space-xxs); }
    .margin-xs\@sm { margin: var(--space-xs); }
    .margin-sm\@sm { margin: var(--space-sm); }
    .margin-md\@sm { margin: var(--space-md); }
    .margin-lg\@sm { margin: var(--space-lg); }
    .margin-xl\@sm { margin: var(--space-xl); }
    .margin-xxl\@sm { margin: var(--space-xxl); }
    .margin-xxxl\@sm { margin: var(--space-xxxl); }
    .margin-xxxxl\@sm { margin: var(--space-xxxxl); }
    .margin-auto\@sm { margin: auto; }
    .margin-0\@sm { margin: 0; }
    .margin-top-xxxxs\@sm { margin-top: var(--space-xxxxs); }
    .margin-top-xxxs\@sm { margin-top: var(--space-xxxs); }
    .margin-top-xxs\@sm { margin-top: var(--space-xxs); }
    .margin-top-xs\@sm { margin-top: var(--space-xs); }
    .margin-top-sm\@sm { margin-top: var(--space-sm); }
    .margin-top-md\@sm { margin-top: var(--space-md); }
    .margin-top-lg\@sm { margin-top: var(--space-lg); }
    .margin-top-xl\@sm { margin-top: var(--space-xl); }
    .margin-top-xxl\@sm { margin-top: var(--space-xxl); }
    .margin-top-xxxl\@sm { margin-top: var(--space-xxxl); }
    .margin-top-xxxxl\@sm { margin-top: var(--space-xxxxl); }
    .margin-top-auto\@sm { margin-top: auto; }
    .margin-top-0\@sm { margin-top: 0; }
    .margin-bottom-xxxxs\@sm { margin-bottom: var(--space-xxxxs); }
    .margin-bottom-xxxs\@sm { margin-bottom: var(--space-xxxs); }
    .margin-bottom-xxs\@sm { margin-bottom: var(--space-xxs); }
    .margin-bottom-xs\@sm { margin-bottom: var(--space-xs); }
    .margin-bottom-sm\@sm { margin-bottom: var(--space-sm); }
    .margin-bottom-md\@sm { margin-bottom: var(--space-md); }
    .margin-bottom-lg\@sm { margin-bottom: var(--space-lg); }
    .margin-bottom-xl\@sm { margin-bottom: var(--space-xl); }
    .margin-bottom-xxl\@sm { margin-bottom: var(--space-xxl); }
    .margin-bottom-xxxl\@sm { margin-bottom: var(--space-xxxl); }
    .margin-bottom-xxxxl\@sm { margin-bottom: var(--space-xxxxl); }
    .margin-bottom-auto\@sm { margin-bottom: auto; }
    .margin-bottom-0\@sm { margin-bottom: 0; }
    .margin-right-xxxxs\@sm { margin-right: var(--space-xxxxs); }
    .margin-right-xxxs\@sm { margin-right: var(--space-xxxs); }
    .margin-right-xxs\@sm { margin-right: var(--space-xxs); }
    .margin-right-xs\@sm { margin-right: var(--space-xs); }
    .margin-right-sm\@sm { margin-right: var(--space-sm); }
    .margin-right-md\@sm { margin-right: var(--space-md); }
    .margin-right-lg\@sm { margin-right: var(--space-lg); }
    .margin-right-xl\@sm { margin-right: var(--space-xl); }
    .margin-right-xxl\@sm { margin-right: var(--space-xxl); }
    .margin-right-xxxl\@sm { margin-right: var(--space-xxxl); }
    .margin-right-xxxxl\@sm { margin-right: var(--space-xxxxl); }
    .margin-right-auto\@sm { margin-right: auto; }
    .margin-right-0\@sm { margin-right: 0; }
    .margin-left-xxxxs\@sm { margin-left: var(--space-xxxxs); }
    .margin-left-xxxs\@sm { margin-left: var(--space-xxxs); }
    .margin-left-xxs\@sm { margin-left: var(--space-xxs); }
    .margin-left-xs\@sm { margin-left: var(--space-xs); }
    .margin-left-sm\@sm { margin-left: var(--space-sm); }
    .margin-left-md\@sm { margin-left: var(--space-md); }
    .margin-left-lg\@sm { margin-left: var(--space-lg); }
    .margin-left-xl\@sm { margin-left: var(--space-xl); }
    .margin-left-xxl\@sm { margin-left: var(--space-xxl); }
    .margin-left-xxxl\@sm { margin-left: var(--space-xxxl); }
    .margin-left-xxxxl\@sm { margin-left: var(--space-xxxxl); }
    .margin-left-auto\@sm { margin-left: auto; }
    .margin-left-0\@sm { margin-left: 0; }
    .margin-x-xxxxs\@sm { margin-left: var(--space-xxxxs); margin-right: var(--space-xxxxs); }
    .margin-x-xxxs\@sm { margin-left: var(--space-xxxs); margin-right: var(--space-xxxs); }
    .margin-x-xxs\@sm { margin-left: var(--space-xxs); margin-right: var(--space-xxs); }
    .margin-x-xs\@sm { margin-left: var(--space-xs); margin-right: var(--space-xs); }
    .margin-x-sm\@sm { margin-left: var(--space-sm); margin-right: var(--space-sm); }
    .margin-x-md\@sm { margin-left: var(--space-md); margin-right: var(--space-md); }
    .margin-x-lg\@sm { margin-left: var(--space-lg); margin-right: var(--space-lg); }
    .margin-x-xl\@sm { margin-left: var(--space-xl); margin-right: var(--space-xl); }
    .margin-x-xxl\@sm { margin-left: var(--space-xxl); margin-right: var(--space-xxl); }
    .margin-x-xxxl\@sm { margin-left: var(--space-xxxl); margin-right: var(--space-xxxl); }
    .margin-x-xxxxl\@sm { margin-left: var(--space-xxxxl); margin-right: var(--space-xxxxl); }
    .margin-x-auto\@sm { margin-left: auto; margin-right: auto; }
    .margin-x-0\@sm { margin-left: 0; margin-right: 0; }
    .margin-y-xxxxs\@sm { margin-top: var(--space-xxxxs); margin-bottom: var(--space-xxxxs); }
    .margin-y-xxxs\@sm { margin-top: var(--space-xxxs); margin-bottom: var(--space-xxxs); }
    .margin-y-xxs\@sm { margin-top: var(--space-xxs); margin-bottom: var(--space-xxs); }
    .margin-y-xs\@sm { margin-top: var(--space-xs); margin-bottom: var(--space-xs); }
    .margin-y-sm\@sm { margin-top: var(--space-sm); margin-bottom: var(--space-sm); }
    .margin-y-md\@sm { margin-top: var(--space-md); margin-bottom: var(--space-md); }
    .margin-y-lg\@sm { margin-top: var(--space-lg); margin-bottom: var(--space-lg); }
    .margin-y-xl\@sm { margin-top: var(--space-xl); margin-bottom: var(--space-xl); }
    .margin-y-xxl\@sm { margin-top: var(--space-xxl); margin-bottom: var(--space-xxl); }
    .margin-y-xxxl\@sm { margin-top: var(--space-xxxl); margin-bottom: var(--space-xxxl); }
    .margin-y-xxxxl\@sm { margin-top: var(--space-xxxxl); margin-bottom: var(--space-xxxxl); }
    .margin-y-auto\@sm { margin-top: auto; margin-bottom: auto; }
    .margin-y-0\@sm { margin-top: 0; margin-bottom: 0; } }
  @supports (--css: variables) { .padding-xxxxs\@sm { padding: var(--space-xxxxs); }
    .padding-xxxs\@sm { padding: var(--space-xxxs); }
    .padding-xxs\@sm { padding: var(--space-xxs); }
    .padding-xs\@sm { padding: var(--space-xs); }
    .padding-sm\@sm { padding: var(--space-sm); }
    .padding-md\@sm { padding: var(--space-md); }
    .padding-lg\@sm { padding: var(--space-lg); }
    .padding-xl\@sm { padding: var(--space-xl); }
    .padding-xxl\@sm { padding: var(--space-xxl); }
    .padding-xxxl\@sm { padding: var(--space-xxxl); }
    .padding-xxxxl\@sm { padding: var(--space-xxxxl); }
    .padding-0\@sm { padding: 0; }
    .padding-component\@sm { padding: var(--component-padding); }
    .padding-top-xxxxs\@sm { padding-top: var(--space-xxxxs); }
    .padding-top-xxxs\@sm { padding-top: var(--space-xxxs); }
    .padding-top-xxs\@sm { padding-top: var(--space-xxs); }
    .padding-top-xs\@sm { padding-top: var(--space-xs); }
    .padding-top-sm\@sm { padding-top: var(--space-sm); }
    .padding-top-md\@sm { padding-top: var(--space-md); }
    .padding-top-lg\@sm { padding-top: var(--space-lg); }
    .padding-top-xl\@sm { padding-top: var(--space-xl); }
    .padding-top-xxl\@sm { padding-top: var(--space-xxl); }
    .padding-top-xxxl\@sm { padding-top: var(--space-xxxl); }
    .padding-top-xxxxl\@sm { padding-top: var(--space-xxxxl); }
    .padding-top-0\@sm { padding-top: 0; }
    .padding-top-component\@sm { padding-top: var(--component-padding); }
    .padding-bottom-xxxxs\@sm { padding-bottom: var(--space-xxxxs); }
    .padding-bottom-xxxs\@sm { padding-bottom: var(--space-xxxs); }
    .padding-bottom-xxs\@sm { padding-bottom: var(--space-xxs); }
    .padding-bottom-xs\@sm { padding-bottom: var(--space-xs); }
    .padding-bottom-sm\@sm { padding-bottom: var(--space-sm); }
    .padding-bottom-md\@sm { padding-bottom: var(--space-md); }
    .padding-bottom-lg\@sm { padding-bottom: var(--space-lg); }
    .padding-bottom-xl\@sm { padding-bottom: var(--space-xl); }
    .padding-bottom-xxl\@sm { padding-bottom: var(--space-xxl); }
    .padding-bottom-xxxl\@sm { padding-bottom: var(--space-xxxl); }
    .padding-bottom-xxxxl\@sm { padding-bottom: var(--space-xxxxl); }
    .padding-bottom-0\@sm { padding-bottom: 0; }
    .padding-bottom-component\@sm { padding-bottom: var(--component-padding); }
    .padding-right-xxxxs\@sm { padding-right: var(--space-xxxxs); }
    .padding-right-xxxs\@sm { padding-right: var(--space-xxxs); }
    .padding-right-xxs\@sm { padding-right: var(--space-xxs); }
    .padding-right-xs\@sm { padding-right: var(--space-xs); }
    .padding-right-sm\@sm { padding-right: var(--space-sm); }
    .padding-right-md\@sm { padding-right: var(--space-md); }
    .padding-right-lg\@sm { padding-right: var(--space-lg); }
    .padding-right-xl\@sm { padding-right: var(--space-xl); }
    .padding-right-xxl\@sm { padding-right: var(--space-xxl); }
    .padding-right-xxxl\@sm { padding-right: var(--space-xxxl); }
    .padding-right-xxxxl\@sm { padding-right: var(--space-xxxxl); }
    .padding-right-0\@sm { padding-right: 0; }
    .padding-right-component\@sm { padding-right: var(--component-padding); }
    .padding-left-xxxxs\@sm { padding-left: var(--space-xxxxs); }
    .padding-left-xxxs\@sm { padding-left: var(--space-xxxs); }
    .padding-left-xxs\@sm { padding-left: var(--space-xxs); }
    .padding-left-xs\@sm { padding-left: var(--space-xs); }
    .padding-left-sm\@sm { padding-left: var(--space-sm); }
    .padding-left-md\@sm { padding-left: var(--space-md); }
    .padding-left-lg\@sm { padding-left: var(--space-lg); }
    .padding-left-xl\@sm { padding-left: var(--space-xl); }
    .padding-left-xxl\@sm { padding-left: var(--space-xxl); }
    .padding-left-xxxl\@sm { padding-left: var(--space-xxxl); }
    .padding-left-xxxxl\@sm { padding-left: var(--space-xxxxl); }
    .padding-left-0\@sm { padding-left: 0; }
    .padding-left-component\@sm { padding-left: var(--component-padding); }
    .padding-x-xxxxs\@sm { padding-left: var(--space-xxxxs); padding-right: var(--space-xxxxs); }
    .padding-x-xxxs\@sm { padding-left: var(--space-xxxs); padding-right: var(--space-xxxs); }
    .padding-x-xxs\@sm { padding-left: var(--space-xxs); padding-right: var(--space-xxs); }
    .padding-x-xs\@sm { padding-left: var(--space-xs); padding-right: var(--space-xs); }
    .padding-x-sm\@sm { padding-left: var(--space-sm); padding-right: var(--space-sm); }
    .padding-x-md\@sm { padding-left: var(--space-md); padding-right: var(--space-md); }
    .padding-x-lg\@sm { padding-left: var(--space-lg); padding-right: var(--space-lg); }
    .padding-x-xl\@sm { padding-left: var(--space-xl); padding-right: var(--space-xl); }
    .padding-x-xxl\@sm { padding-left: var(--space-xxl); padding-right: var(--space-xxl); }
    .padding-x-xxxl\@sm { padding-left: var(--space-xxxl); padding-right: var(--space-xxxl); }
    .padding-x-xxxxl\@sm { padding-left: var(--space-xxxxl); padding-right: var(--space-xxxxl); }
    .padding-x-0\@sm { padding-left: 0; padding-right: 0; }
    .padding-x-component\@sm { padding-left: var(--component-padding); padding-right: var(--component-padding); }
    .padding-y-xxxxs\@sm { padding-top: var(--space-xxxxs); padding-bottom: var(--space-xxxxs); }
    .padding-y-xxxs\@sm { padding-top: var(--space-xxxs); padding-bottom: var(--space-xxxs); }
    .padding-y-xxs\@sm { padding-top: var(--space-xxs); padding-bottom: var(--space-xxs); }
    .padding-y-xs\@sm { padding-top: var(--space-xs); padding-bottom: var(--space-xs); }
    .padding-y-sm\@sm { padding-top: var(--space-sm); padding-bottom: var(--space-sm); }
    .padding-y-md\@sm { padding-top: var(--space-md); padding-bottom: var(--space-md); }
    .padding-y-lg\@sm { padding-top: var(--space-lg); padding-bottom: var(--space-lg); }
    .padding-y-xl\@sm { padding-top: var(--space-xl); padding-bottom: var(--space-xl); }
    .padding-y-xxl\@sm { padding-top: var(--space-xxl); padding-bottom: var(--space-xxl); }
    .padding-y-xxxl\@sm { padding-top: var(--space-xxxl); padding-bottom: var(--space-xxxl); }
    .padding-y-xxxxl\@sm { padding-top: var(--space-xxxxl); padding-bottom: var(--space-xxxxl); }
    .padding-y-0\@sm { padding-top: 0; padding-bottom: 0; }
    .padding-y-component\@sm { padding-top: var(--component-padding); padding-bottom: var(--component-padding); } }
  .text-center\@sm { text-align: center; }
  .text-left\@sm { text-align: left; }
  .text-right\@sm { text-align: right; }
  .text-justify\@sm { text-align: justify; }
  @supports (--css: variables) { .text-xs\@sm { font-size: var(--text-xs, 0.694em); }
    .text-sm\@sm { font-size: var(--text-sm, 0.833em); }
    .text-base\@sm { font-size: var(--text-unit, 1em); }
    .text-md\@sm { font-size: var(--text-md, 1.2em); }
    .text-lg\@sm { font-size: var(--text-lg, 1.44em); }
    .text-xl\@sm { font-size: var(--text-xl, 1.728em); }
    .text-xxl\@sm { font-size: var(--text-xxl, 2.074em); }
    .text-xxxl\@sm { font-size: var(--text-xxxl, 2.488em); }
    .text-xxxxl\@sm { font-size: var(--text-xxxxl, 2.985em); } }
  @supports (--css: variables) { .width-xxxxs\@sm { width: var(--size-xxxxs, 0.25rem); }
    .width-xxxs\@sm { width: var(--size-xxxs, 0.5rem); }
    .width-xxs\@sm { width: var(--size-xxs, 0.75rem); }
    .width-xs\@sm { width: var(--size-xs, 1rem); }
    .width-sm\@sm { width: var(--size-sm, 1.5rem); }
    .width-md\@sm { width: var(--size-md, 2rem); }
    .width-lg\@sm { width: var(--size-lg, 3rem); }
    .width-xl\@sm { width: var(--size-xl, 4rem); }
    .width-xxl\@sm { width: var(--size-xxl, 6rem); }
    .width-xxxl\@sm { width: var(--size-xxxl, 8rem); }
    .width-xxxxl\@sm { width: var(--size-xxxxl, 16rem); } }
  .width-0\@sm { width: 0; }
  .width-10\%\@sm { width: 10%; }
  .width-20\%\@sm { width: 20%; }
  .width-25\%\@sm { width: 25%; }
  .width-30\%\@sm { width: 30%; }
  .width-33\%\@sm { width: calc(100% / 3); }
  .width-40\%\@sm { width: 40%; }
  .width-50\%\@sm { width: 50%; }
  .width-60\%\@sm { width: 60%; }
  .width-66\%\@sm { width: calc(100% / 1.5); }
  .width-70\%\@sm { width: 70%; }
  .width-75\%\@sm { width: 75%; }
  .width-80\%\@sm { width: 80%; }
  .width-90\%\@sm { width: 90%; }
  .width-100\%\@sm { width: 100%; }
  .width-100vw\@sm { width: 100vw; }
  .width-auto\@sm { width: auto; }
  @supports (--css: variables) { .height-xxxxs\@sm { height: var(--size-xxxxs, 0.25rem); }
    .height-xxxs\@sm { height: var(--size-xxxs, 0.5rem); }
    .height-xxs\@sm { height: var(--size-xxs, 0.75rem); }
    .height-xs\@sm { height: var(--size-xs, 1rem); }
    .height-sm\@sm { height: var(--size-sm, 1.5rem); }
    .height-md\@sm { height: var(--size-md, 2rem); }
    .height-lg\@sm { height: var(--size-lg, 3rem); }
    .height-xl\@sm { height: var(--size-xl, 4rem); }
    .height-xxl\@sm { height: var(--size-xxl, 6rem); }
    .height-xxxl\@sm { height: var(--size-xxxl, 8rem); }
    .height-xxxxl\@sm { height: var(--size-xxxxl, 16rem); } }
  .height-0\@sm { height: 0; }
  .height-10\%\@sm { height: 10%; }
  .height-20\%\@sm { height: 20%; }
  .height-25\%\@sm { height: 25%; }
  .height-30\%\@sm { height: 30%; }
  .height-33\%\@sm { height: calc(100% / 3); }
  .height-40\%\@sm { height: 40%; }
  .height-50\%\@sm { height: 50%; }
  .height-60\%\@sm { height: 60%; }
  .height-66\%\@sm { height: calc(100% / 1.5); }
  .height-70\%\@sm { height: 70%; }
  .height-75\%\@sm { height: 75%; }
  .height-80\%\@sm { height: 80%; }
  .height-90\%\@sm { height: 90%; }
  .height-100\%\@sm { height: 100%; }
  .height-100vh\@sm { height: 100vh; }
  .height-auto\@sm { height: auto; }
  .position-relative\@sm { position: relative; }
  .position-absolute\@sm { position: absolute; }
  .position-fixed\@sm { position: fixed; }
  .position-sticky\@sm { position: -webkit-sticky; position: sticky; }
  .position-static\@sm { position: static; }
  .top-0\@sm { top: 0; }
  .top-50\%\@sm { top: 50%; }
  .bottom-0\@sm { bottom: 0; }
  .bottom-50\%\@sm { bottom: 50%; }
  .left-0\@sm { left: 0; }
  .left-50\%\@sm { left: 50%; }
  .right-0\@sm { right: 0; }
  .right-50\%\@sm { right: 50%; }
  .inset-0\@sm { top: 0; right: 0; bottom: 0; left: 0; }
  .hide\@sm { display: none !important; } }

@media not all and (min-width: 48rem) { .has-margin\@sm { margin: 0 !important; }
  .has-padding\@sm { padding: 0 !important; }
  .display\@sm { display: none !important; } }

@media (min-width: 64rem) { .flex\@md { display: flex; }
  .inline-flex\@md { display: inline-flex; }
  .flex-wrap\@md { flex-wrap: wrap; }
  .flex-column\@md { flex-direction: column; }
  .flex-column-reverse\@md { flex-direction: column-reverse; }
  .flex-row\@md { flex-direction: row; }
  .flex-row-reverse\@md { flex-direction: row-reverse; }
  .flex-center\@md { justify-content: center; align-items: center; }
  .flex-grow\@md { flex-grow: 1; }
  .flex-grow-0\@md { flex-grow: 0; }
  .flex-shrink\@md { flex-shrink: 1; }
  .flex-shrink-0\@md { flex-shrink: 0; }
  .flex-basis-0\@md { flex-basis: 0; }
  .justify-start\@md { justify-content: flex-start; }
  .justify-end\@md { justify-content: flex-end; }
  .justify-center\@md { justify-content: center; }
  .justify-between\@md { justify-content: space-between; }
  .items-center\@md { align-items: center; }
  .items-start\@md { align-items: flex-start; }
  .items-end\@md { align-items: flex-end; }
  .items-baseline\@md { align-items: baseline; }
  .order-1\@md { order: 1; }
  .order-2\@md { order: 2; }
  .order-3\@md { order: 3; }
  .block\@md { display: block; }
  .inline-block\@md { display: inline-block; }
  .inline\@md { display: inline; }
  @supports (--css: variables) { .margin-xxxxs\@md { margin: var(--space-xxxxs); }
    .margin-xxxs\@md { margin: var(--space-xxxs); }
    .margin-xxs\@md { margin: var(--space-xxs); }
    .margin-xs\@md { margin: var(--space-xs); }
    .margin-sm\@md { margin: var(--space-sm); }
    .margin-md\@md { margin: var(--space-md); }
    .margin-lg\@md { margin: var(--space-lg); }
    .margin-xl\@md { margin: var(--space-xl); }
    .margin-xxl\@md { margin: var(--space-xxl); }
    .margin-xxxl\@md { margin: var(--space-xxxl); }
    .margin-xxxxl\@md { margin: var(--space-xxxxl); }
    .margin-auto\@md { margin: auto; }
    .margin-0\@md { margin: 0; }
    .margin-top-xxxxs\@md { margin-top: var(--space-xxxxs); }
    .margin-top-xxxs\@md { margin-top: var(--space-xxxs); }
    .margin-top-xxs\@md { margin-top: var(--space-xxs); }
    .margin-top-xs\@md { margin-top: var(--space-xs); }
    .margin-top-sm\@md { margin-top: var(--space-sm); }
    .margin-top-md\@md { margin-top: var(--space-md); }
    .margin-top-lg\@md { margin-top: var(--space-lg); }
    .margin-top-xl\@md { margin-top: var(--space-xl); }
    .margin-top-xxl\@md { margin-top: var(--space-xxl); }
    .margin-top-xxxl\@md { margin-top: var(--space-xxxl); }
    .margin-top-xxxxl\@md { margin-top: var(--space-xxxxl); }
    .margin-top-auto\@md { margin-top: auto; }
    .margin-top-0\@md { margin-top: 0; }
    .margin-bottom-xxxxs\@md { margin-bottom: var(--space-xxxxs); }
    .margin-bottom-xxxs\@md { margin-bottom: var(--space-xxxs); }
    .margin-bottom-xxs\@md { margin-bottom: var(--space-xxs); }
    .margin-bottom-xs\@md { margin-bottom: var(--space-xs); }
    .margin-bottom-sm\@md { margin-bottom: var(--space-sm); }
    .margin-bottom-md\@md { margin-bottom: var(--space-md); }
    .margin-bottom-lg\@md { margin-bottom: var(--space-lg); }
    .margin-bottom-xl\@md { margin-bottom: var(--space-xl); }
    .margin-bottom-xxl\@md { margin-bottom: var(--space-xxl); }
    .margin-bottom-xxxl\@md { margin-bottom: var(--space-xxxl); }
    .margin-bottom-xxxxl\@md { margin-bottom: var(--space-xxxxl); }
    .margin-bottom-auto\@md { margin-bottom: auto; }
    .margin-bottom-0\@md { margin-bottom: 0; }
    .margin-right-xxxxs\@md { margin-right: var(--space-xxxxs); }
    .margin-right-xxxs\@md { margin-right: var(--space-xxxs); }
    .margin-right-xxs\@md { margin-right: var(--space-xxs); }
    .margin-right-xs\@md { margin-right: var(--space-xs); }
    .margin-right-sm\@md { margin-right: var(--space-sm); }
    .margin-right-md\@md { margin-right: var(--space-md); }
    .margin-right-lg\@md { margin-right: var(--space-lg); }
    .margin-right-xl\@md { margin-right: var(--space-xl); }
    .margin-right-xxl\@md { margin-right: var(--space-xxl); }
    .margin-right-xxxl\@md { margin-right: var(--space-xxxl); }
    .margin-right-xxxxl\@md { margin-right: var(--space-xxxxl); }
    .margin-right-auto\@md { margin-right: auto; }
    .margin-right-0\@md { margin-right: 0; }
    .margin-left-xxxxs\@md { margin-left: var(--space-xxxxs); }
    .margin-left-xxxs\@md { margin-left: var(--space-xxxs); }
    .margin-left-xxs\@md { margin-left: var(--space-xxs); }
    .margin-left-xs\@md { margin-left: var(--space-xs); }
    .margin-left-sm\@md { margin-left: var(--space-sm); }
    .margin-left-md\@md { margin-left: var(--space-md); }
    .margin-left-lg\@md { margin-left: var(--space-lg); }
    .margin-left-xl\@md { margin-left: var(--space-xl); }
    .margin-left-xxl\@md { margin-left: var(--space-xxl); }
    .margin-left-xxxl\@md { margin-left: var(--space-xxxl); }
    .margin-left-xxxxl\@md { margin-left: var(--space-xxxxl); }
    .margin-left-auto\@md { margin-left: auto; }
    .margin-left-0\@md { margin-left: 0; }
    .margin-x-xxxxs\@md { margin-left: var(--space-xxxxs); margin-right: var(--space-xxxxs); }
    .margin-x-xxxs\@md { margin-left: var(--space-xxxs); margin-right: var(--space-xxxs); }
    .margin-x-xxs\@md { margin-left: var(--space-xxs); margin-right: var(--space-xxs); }
    .margin-x-xs\@md { margin-left: var(--space-xs); margin-right: var(--space-xs); }
    .margin-x-sm\@md { margin-left: var(--space-sm); margin-right: var(--space-sm); }
    .margin-x-md\@md { margin-left: var(--space-md); margin-right: var(--space-md); }
    .margin-x-lg\@md { margin-left: var(--space-lg); margin-right: var(--space-lg); }
    .margin-x-xl\@md { margin-left: var(--space-xl); margin-right: var(--space-xl); }
    .margin-x-xxl\@md { margin-left: var(--space-xxl); margin-right: var(--space-xxl); }
    .margin-x-xxxl\@md { margin-left: var(--space-xxxl); margin-right: var(--space-xxxl); }
    .margin-x-xxxxl\@md { margin-left: var(--space-xxxxl); margin-right: var(--space-xxxxl); }
    .margin-x-auto\@md { margin-left: auto; margin-right: auto; }
    .margin-x-0\@md { margin-left: 0; margin-right: 0; }
    .margin-y-xxxxs\@md { margin-top: var(--space-xxxxs); margin-bottom: var(--space-xxxxs); }
    .margin-y-xxxs\@md { margin-top: var(--space-xxxs); margin-bottom: var(--space-xxxs); }
    .margin-y-xxs\@md { margin-top: var(--space-xxs); margin-bottom: var(--space-xxs); }
    .margin-y-xs\@md { margin-top: var(--space-xs); margin-bottom: var(--space-xs); }
    .margin-y-sm\@md { margin-top: var(--space-sm); margin-bottom: var(--space-sm); }
    .margin-y-md\@md { margin-top: var(--space-md); margin-bottom: var(--space-md); }
    .margin-y-lg\@md { margin-top: var(--space-lg); margin-bottom: var(--space-lg); }
    .margin-y-xl\@md { margin-top: var(--space-xl); margin-bottom: var(--space-xl); }
    .margin-y-xxl\@md { margin-top: var(--space-xxl); margin-bottom: var(--space-xxl); }
    .margin-y-xxxl\@md { margin-top: var(--space-xxxl); margin-bottom: var(--space-xxxl); }
    .margin-y-xxxxl\@md { margin-top: var(--space-xxxxl); margin-bottom: var(--space-xxxxl); }
    .margin-y-auto\@md { margin-top: auto; margin-bottom: auto; }
    .margin-y-0\@md { margin-top: 0; margin-bottom: 0; } }
  @supports (--css: variables) { .padding-xxxxs\@md { padding: var(--space-xxxxs); }
    .padding-xxxs\@md { padding: var(--space-xxxs); }
    .padding-xxs\@md { padding: var(--space-xxs); }
    .padding-xs\@md { padding: var(--space-xs); }
    .padding-sm\@md { padding: var(--space-sm); }
    .padding-md\@md { padding: var(--space-md); }
    .padding-lg\@md { padding: var(--space-lg); }
    .padding-xl\@md { padding: var(--space-xl); }
    .padding-xxl\@md { padding: var(--space-xxl); }
    .padding-xxxl\@md { padding: var(--space-xxxl); }
    .padding-xxxxl\@md { padding: var(--space-xxxxl); }
    .padding-0\@md { padding: 0; }
    .padding-component\@md { padding: var(--component-padding); }
    .padding-top-xxxxs\@md { padding-top: var(--space-xxxxs); }
    .padding-top-xxxs\@md { padding-top: var(--space-xxxs); }
    .padding-top-xxs\@md { padding-top: var(--space-xxs); }
    .padding-top-xs\@md { padding-top: var(--space-xs); }
    .padding-top-sm\@md { padding-top: var(--space-sm); }
    .padding-top-md\@md { padding-top: var(--space-md); }
    .padding-top-lg\@md { padding-top: var(--space-lg); }
    .padding-top-xl\@md { padding-top: var(--space-xl); }
    .padding-top-xxl\@md { padding-top: var(--space-xxl); }
    .padding-top-xxxl\@md { padding-top: var(--space-xxxl); }
    .padding-top-xxxxl\@md { padding-top: var(--space-xxxxl); }
    .padding-top-0\@md { padding-top: 0; }
    .padding-top-component\@md { padding-top: var(--component-padding); }
    .padding-bottom-xxxxs\@md { padding-bottom: var(--space-xxxxs); }
    .padding-bottom-xxxs\@md { padding-bottom: var(--space-xxxs); }
    .padding-bottom-xxs\@md { padding-bottom: var(--space-xxs); }
    .padding-bottom-xs\@md { padding-bottom: var(--space-xs); }
    .padding-bottom-sm\@md { padding-bottom: var(--space-sm); }
    .padding-bottom-md\@md { padding-bottom: var(--space-md); }
    .padding-bottom-lg\@md { padding-bottom: var(--space-lg); }
    .padding-bottom-xl\@md { padding-bottom: var(--space-xl); }
    .padding-bottom-xxl\@md { padding-bottom: var(--space-xxl); }
    .padding-bottom-xxxl\@md { padding-bottom: var(--space-xxxl); }
    .padding-bottom-xxxxl\@md { padding-bottom: var(--space-xxxxl); }
    .padding-bottom-0\@md { padding-bottom: 0; }
    .padding-bottom-component\@md { padding-bottom: var(--component-padding); }
    .padding-right-xxxxs\@md { padding-right: var(--space-xxxxs); }
    .padding-right-xxxs\@md { padding-right: var(--space-xxxs); }
    .padding-right-xxs\@md { padding-right: var(--space-xxs); }
    .padding-right-xs\@md { padding-right: var(--space-xs); }
    .padding-right-sm\@md { padding-right: var(--space-sm); }
    .padding-right-md\@md { padding-right: var(--space-md); }
    .padding-right-lg\@md { padding-right: var(--space-lg); }
    .padding-right-xl\@md { padding-right: var(--space-xl); }
    .padding-right-xxl\@md { padding-right: var(--space-xxl); }
    .padding-right-xxxl\@md { padding-right: var(--space-xxxl); }
    .padding-right-xxxxl\@md { padding-right: var(--space-xxxxl); }
    .padding-right-0\@md { padding-right: 0; }
    .padding-right-component\@md { padding-right: var(--component-padding); }
    .padding-left-xxxxs\@md { padding-left: var(--space-xxxxs); }
    .padding-left-xxxs\@md { padding-left: var(--space-xxxs); }
    .padding-left-xxs\@md { padding-left: var(--space-xxs); }
    .padding-left-xs\@md { padding-left: var(--space-xs); }
    .padding-left-sm\@md { padding-left: var(--space-sm); }
    .padding-left-md\@md { padding-left: var(--space-md); }
    .padding-left-lg\@md { padding-left: var(--space-lg); }
    .padding-left-xl\@md { padding-left: var(--space-xl); }
    .padding-left-xxl\@md { padding-left: var(--space-xxl); }
    .padding-left-xxxl\@md { padding-left: var(--space-xxxl); }
    .padding-left-xxxxl\@md { padding-left: var(--space-xxxxl); }
    .padding-left-0\@md { padding-left: 0; }
    .padding-left-component\@md { padding-left: var(--component-padding); }
    .padding-x-xxxxs\@md { padding-left: var(--space-xxxxs); padding-right: var(--space-xxxxs); }
    .padding-x-xxxs\@md { padding-left: var(--space-xxxs); padding-right: var(--space-xxxs); }
    .padding-x-xxs\@md { padding-left: var(--space-xxs); padding-right: var(--space-xxs); }
    .padding-x-xs\@md { padding-left: var(--space-xs); padding-right: var(--space-xs); }
    .padding-x-sm\@md { padding-left: var(--space-sm); padding-right: var(--space-sm); }
    .padding-x-md\@md { padding-left: var(--space-md); padding-right: var(--space-md); }
    .padding-x-lg\@md { padding-left: var(--space-lg); padding-right: var(--space-lg); }
    .padding-x-xl\@md { padding-left: var(--space-xl); padding-right: var(--space-xl); }
    .padding-x-xxl\@md { padding-left: var(--space-xxl); padding-right: var(--space-xxl); }
    .padding-x-xxxl\@md { padding-left: var(--space-xxxl); padding-right: var(--space-xxxl); }
    .padding-x-xxxxl\@md { padding-left: var(--space-xxxxl); padding-right: var(--space-xxxxl); }
    .padding-x-0\@md { padding-left: 0; padding-right: 0; }
    .padding-x-component\@md { padding-left: var(--component-padding); padding-right: var(--component-padding); }
    .padding-y-xxxxs\@md { padding-top: var(--space-xxxxs); padding-bottom: var(--space-xxxxs); }
    .padding-y-xxxs\@md { padding-top: var(--space-xxxs); padding-bottom: var(--space-xxxs); }
    .padding-y-xxs\@md { padding-top: var(--space-xxs); padding-bottom: var(--space-xxs); }
    .padding-y-xs\@md { padding-top: var(--space-xs); padding-bottom: var(--space-xs); }
    .padding-y-sm\@md { padding-top: var(--space-sm); padding-bottom: var(--space-sm); }
    .padding-y-md\@md { padding-top: var(--space-md); padding-bottom: var(--space-md); }
    .padding-y-lg\@md { padding-top: var(--space-lg); padding-bottom: var(--space-lg); }
    .padding-y-xl\@md { padding-top: var(--space-xl); padding-bottom: var(--space-xl); }
    .padding-y-xxl\@md { padding-top: var(--space-xxl); padding-bottom: var(--space-xxl); }
    .padding-y-xxxl\@md { padding-top: var(--space-xxxl); padding-bottom: var(--space-xxxl); }
    .padding-y-xxxxl\@md { padding-top: var(--space-xxxxl); padding-bottom: var(--space-xxxxl); }
    .padding-y-0\@md { padding-top: 0; padding-bottom: 0; }
    .padding-y-component\@md { padding-top: var(--component-padding); padding-bottom: var(--component-padding); } }
  .text-center\@md { text-align: center; }
  .text-left\@md { text-align: left; }
  .text-right\@md { text-align: right; }
  .text-justify\@md { text-align: justify; }
  @supports (--css: variables) { .text-xs\@md { font-size: var(--text-xs, 0.694em); }
    .text-sm\@md { font-size: var(--text-sm, 0.833em); }
    .text-base\@md { font-size: var(--text-unit, 1em); }
    .text-md\@md { font-size: var(--text-md, 1.2em); }
    .text-lg\@md { font-size: var(--text-lg, 1.44em); }
    .text-xl\@md { font-size: var(--text-xl, 1.728em); }
    .text-xxl\@md { font-size: var(--text-xxl, 2.074em); }
    .text-xxxl\@md { font-size: var(--text-xxxl, 2.488em); }
    .text-xxxxl\@md { font-size: var(--text-xxxxl, 2.985em); } }
  @supports (--css: variables) { .width-xxxxs\@md { width: var(--size-xxxxs, 0.25rem); }
    .width-xxxs\@md { width: var(--size-xxxs, 0.5rem); }
    .width-xxs\@md { width: var(--size-xxs, 0.75rem); }
    .width-xs\@md { width: var(--size-xs, 1rem); }
    .width-sm\@md { width: var(--size-sm, 1.5rem); }
    .width-md\@md { width: var(--size-md, 2rem); }
    .width-lg\@md { width: var(--size-lg, 3rem); }
    .width-xl\@md { width: var(--size-xl, 4rem); }
    .width-xxl\@md { width: var(--size-xxl, 6rem); }
    .width-xxxl\@md { width: var(--size-xxxl, 8rem); }
    .width-xxxxl\@md { width: var(--size-xxxxl, 16rem); } }
  .width-0\@md { width: 0; }
  .width-10\%\@md { width: 10%; }
  .width-20\%\@md { width: 20%; }
  .width-25\%\@md { width: 25%; }
  .width-30\%\@md { width: 30%; }
  .width-33\%\@md { width: calc(100% / 3); }
  .width-40\%\@md { width: 40%; }
  .width-50\%\@md { width: 50%; }
  .width-60\%\@md { width: 60%; }
  .width-66\%\@md { width: calc(100% / 1.5); }
  .width-70\%\@md { width: 70%; }
  .width-75\%\@md { width: 75%; }
  .width-80\%\@md { width: 80%; }
  .width-90\%\@md { width: 90%; }
  .width-100\%\@md { width: 100%; }
  .width-100vw\@md { width: 100vw; }
  .width-auto\@md { width: auto; }
  @supports (--css: variables) { .height-xxxxs\@md { height: var(--size-xxxxs, 0.25rem); }
    .height-xxxs\@md { height: var(--size-xxxs, 0.5rem); }
    .height-xxs\@md { height: var(--size-xxs, 0.75rem); }
    .height-xs\@md { height: var(--size-xs, 1rem); }
    .height-sm\@md { height: var(--size-sm, 1.5rem); }
    .height-md\@md { height: var(--size-md, 2rem); }
    .height-lg\@md { height: var(--size-lg, 3rem); }
    .height-xl\@md { height: var(--size-xl, 4rem); }
    .height-xxl\@md { height: var(--size-xxl, 6rem); }
    .height-xxxl\@md { height: var(--size-xxxl, 8rem); }
    .height-xxxxl\@md { height: var(--size-xxxxl, 16rem); } }
  .height-0\@md { height: 0; }
  .height-10\%\@md { height: 10%; }
  .height-20\%\@md { height: 20%; }
  .height-25\%\@md { height: 25%; }
  .height-30\%\@md { height: 30%; }
  .height-33\%\@md { height: calc(100% / 3); }
  .height-40\%\@md { height: 40%; }
  .height-50\%\@md { height: 50%; }
  .height-60\%\@md { height: 60%; }
  .height-66\%\@md { height: calc(100% / 1.5); }
  .height-70\%\@md { height: 70%; }
  .height-75\%\@md { height: 75%; }
  .height-80\%\@md { height: 80%; }
  .height-90\%\@md { height: 90%; }
  .height-100\%\@md { height: 100%; }
  .height-100vh\@md { height: 100vh; }
  .height-auto\@md { height: auto; }
  .position-relative\@md { position: relative; }
  .position-absolute\@md { position: absolute; }
  .position-fixed\@md { position: fixed; }
  .position-sticky\@md { position: -webkit-sticky; position: sticky; }
  .position-static\@md { position: static; }
  .top-0\@md { top: 0; }
  .top-50\%\@md { top: 50%; }
  .bottom-0\@md { bottom: 0; }
  .bottom-50\%\@md { bottom: 50%; }
  .left-0\@md { left: 0; }
  .left-50\%\@md { left: 50%; }
  .right-0\@md { right: 0; }
  .right-50\%\@md { right: 50%; }
  .inset-0\@md { top: 0; right: 0; bottom: 0; left: 0; }
  .hide\@md { display: none !important; } }

@media not all and (min-width: 64rem) { .has-margin\@md { margin: 0 !important; }
  .has-padding\@md { padding: 0 !important; }
  .display\@md { display: none !important; } }

@media (min-width: 80rem) { .flex\@lg { display: flex; }
  .inline-flex\@lg { display: inline-flex; }
  .flex-wrap\@lg { flex-wrap: wrap; }
  .flex-column\@lg { flex-direction: column; }
  .flex-column-reverse\@lg { flex-direction: column-reverse; }
  .flex-row\@lg { flex-direction: row; }
  .flex-row-reverse\@lg { flex-direction: row-reverse; }
  .flex-center\@lg { justify-content: center; align-items: center; }
  .flex-grow\@lg { flex-grow: 1; }
  .flex-grow-0\@lg { flex-grow: 0; }
  .flex-shrink\@lg { flex-shrink: 1; }
  .flex-shrink-0\@lg { flex-shrink: 0; }
  .flex-basis-0\@lg { flex-basis: 0; }
  .justify-start\@lg { justify-content: flex-start; }
  .justify-end\@lg { justify-content: flex-end; }
  .justify-center\@lg { justify-content: center; }
  .justify-between\@lg { justify-content: space-between; }
  .items-center\@lg { align-items: center; }
  .items-start\@lg { align-items: flex-start; }
  .items-end\@lg { align-items: flex-end; }
  .items-baseline\@lg { align-items: baseline; }
  .order-1\@lg { order: 1; }
  .order-2\@lg { order: 2; }
  .order-3\@lg { order: 3; }
  .block\@lg { display: block; }
  .inline-block\@lg { display: inline-block; }
  .inline\@lg { display: inline; }
  @supports (--css: variables) { .margin-xxxxs\@lg { margin: var(--space-xxxxs); }
    .margin-xxxs\@lg { margin: var(--space-xxxs); }
    .margin-xxs\@lg { margin: var(--space-xxs); }
    .margin-xs\@lg { margin: var(--space-xs); }
    .margin-sm\@lg { margin: var(--space-sm); }
    .margin-md\@lg { margin: var(--space-md); }
    .margin-lg\@lg { margin: var(--space-lg); }
    .margin-xl\@lg { margin: var(--space-xl); }
    .margin-xxl\@lg { margin: var(--space-xxl); }
    .margin-xxxl\@lg { margin: var(--space-xxxl); }
    .margin-xxxxl\@lg { margin: var(--space-xxxxl); }
    .margin-auto\@lg { margin: auto; }
    .margin-0\@lg { margin: 0; }
    .margin-top-xxxxs\@lg { margin-top: var(--space-xxxxs); }
    .margin-top-xxxs\@lg { margin-top: var(--space-xxxs); }
    .margin-top-xxs\@lg { margin-top: var(--space-xxs); }
    .margin-top-xs\@lg { margin-top: var(--space-xs); }
    .margin-top-sm\@lg { margin-top: var(--space-sm); }
    .margin-top-md\@lg { margin-top: var(--space-md); }
    .margin-top-lg\@lg { margin-top: var(--space-lg); }
    .margin-top-xl\@lg { margin-top: var(--space-xl); }
    .margin-top-xxl\@lg { margin-top: var(--space-xxl); }
    .margin-top-xxxl\@lg { margin-top: var(--space-xxxl); }
    .margin-top-xxxxl\@lg { margin-top: var(--space-xxxxl); }
    .margin-top-auto\@lg { margin-top: auto; }
    .margin-top-0\@lg { margin-top: 0; }
    .margin-bottom-xxxxs\@lg { margin-bottom: var(--space-xxxxs); }
    .margin-bottom-xxxs\@lg { margin-bottom: var(--space-xxxs); }
    .margin-bottom-xxs\@lg { margin-bottom: var(--space-xxs); }
    .margin-bottom-xs\@lg { margin-bottom: var(--space-xs); }
    .margin-bottom-sm\@lg { margin-bottom: var(--space-sm); }
    .margin-bottom-md\@lg { margin-bottom: var(--space-md); }
    .margin-bottom-lg\@lg { margin-bottom: var(--space-lg); }
    .margin-bottom-xl\@lg { margin-bottom: var(--space-xl); }
    .margin-bottom-xxl\@lg { margin-bottom: var(--space-xxl); }
    .margin-bottom-xxxl\@lg { margin-bottom: var(--space-xxxl); }
    .margin-bottom-xxxxl\@lg { margin-bottom: var(--space-xxxxl); }
    .margin-bottom-auto\@lg { margin-bottom: auto; }
    .margin-bottom-0\@lg { margin-bottom: 0; }
    .margin-right-xxxxs\@lg { margin-right: var(--space-xxxxs); }
    .margin-right-xxxs\@lg { margin-right: var(--space-xxxs); }
    .margin-right-xxs\@lg { margin-right: var(--space-xxs); }
    .margin-right-xs\@lg { margin-right: var(--space-xs); }
    .margin-right-sm\@lg { margin-right: var(--space-sm); }
    .margin-right-md\@lg { margin-right: var(--space-md); }
    .margin-right-lg\@lg { margin-right: var(--space-lg); }
    .margin-right-xl\@lg { margin-right: var(--space-xl); }
    .margin-right-xxl\@lg { margin-right: var(--space-xxl); }
    .margin-right-xxxl\@lg { margin-right: var(--space-xxxl); }
    .margin-right-xxxxl\@lg { margin-right: var(--space-xxxxl); }
    .margin-right-auto\@lg { margin-right: auto; }
    .margin-right-0\@lg { margin-right: 0; }
    .margin-left-xxxxs\@lg { margin-left: var(--space-xxxxs); }
    .margin-left-xxxs\@lg { margin-left: var(--space-xxxs); }
    .margin-left-xxs\@lg { margin-left: var(--space-xxs); }
    .margin-left-xs\@lg { margin-left: var(--space-xs); }
    .margin-left-sm\@lg { margin-left: var(--space-sm); }
    .margin-left-md\@lg { margin-left: var(--space-md); }
    .margin-left-lg\@lg { margin-left: var(--space-lg); }
    .margin-left-xl\@lg { margin-left: var(--space-xl); }
    .margin-left-xxl\@lg { margin-left: var(--space-xxl); }
    .margin-left-xxxl\@lg { margin-left: var(--space-xxxl); }
    .margin-left-xxxxl\@lg { margin-left: var(--space-xxxxl); }
    .margin-left-auto\@lg { margin-left: auto; }
    .margin-left-0\@lg { margin-left: 0; }
    .margin-x-xxxxs\@lg { margin-left: var(--space-xxxxs); margin-right: var(--space-xxxxs); }
    .margin-x-xxxs\@lg { margin-left: var(--space-xxxs); margin-right: var(--space-xxxs); }
    .margin-x-xxs\@lg { margin-left: var(--space-xxs); margin-right: var(--space-xxs); }
    .margin-x-xs\@lg { margin-left: var(--space-xs); margin-right: var(--space-xs); }
    .margin-x-sm\@lg { margin-left: var(--space-sm); margin-right: var(--space-sm); }
    .margin-x-md\@lg { margin-left: var(--space-md); margin-right: var(--space-md); }
    .margin-x-lg\@lg { margin-left: var(--space-lg); margin-right: var(--space-lg); }
    .margin-x-xl\@lg { margin-left: var(--space-xl); margin-right: var(--space-xl); }
    .margin-x-xxl\@lg { margin-left: var(--space-xxl); margin-right: var(--space-xxl); }
    .margin-x-xxxl\@lg { margin-left: var(--space-xxxl); margin-right: var(--space-xxxl); }
    .margin-x-xxxxl\@lg { margin-left: var(--space-xxxxl); margin-right: var(--space-xxxxl); }
    .margin-x-auto\@lg { margin-left: auto; margin-right: auto; }
    .margin-x-0\@lg { margin-left: 0; margin-right: 0; }
    .margin-y-xxxxs\@lg { margin-top: var(--space-xxxxs); margin-bottom: var(--space-xxxxs); }
    .margin-y-xxxs\@lg { margin-top: var(--space-xxxs); margin-bottom: var(--space-xxxs); }
    .margin-y-xxs\@lg { margin-top: var(--space-xxs); margin-bottom: var(--space-xxs); }
    .margin-y-xs\@lg { margin-top: var(--space-xs); margin-bottom: var(--space-xs); }
    .margin-y-sm\@lg { margin-top: var(--space-sm); margin-bottom: var(--space-sm); }
    .margin-y-md\@lg { margin-top: var(--space-md); margin-bottom: var(--space-md); }
    .margin-y-lg\@lg { margin-top: var(--space-lg); margin-bottom: var(--space-lg); }
    .margin-y-xl\@lg { margin-top: var(--space-xl); margin-bottom: var(--space-xl); }
    .margin-y-xxl\@lg { margin-top: var(--space-xxl); margin-bottom: var(--space-xxl); }
    .margin-y-xxxl\@lg { margin-top: var(--space-xxxl); margin-bottom: var(--space-xxxl); }
    .margin-y-xxxxl\@lg { margin-top: var(--space-xxxxl); margin-bottom: var(--space-xxxxl); }
    .margin-y-auto\@lg { margin-top: auto; margin-bottom: auto; }
    .margin-y-0\@lg { margin-top: 0; margin-bottom: 0; } }
  @supports (--css: variables) { .padding-xxxxs\@lg { padding: var(--space-xxxxs); }
    .padding-xxxs\@lg { padding: var(--space-xxxs); }
    .padding-xxs\@lg { padding: var(--space-xxs); }
    .padding-xs\@lg { padding: var(--space-xs); }
    .padding-sm\@lg { padding: var(--space-sm); }
    .padding-md\@lg { padding: var(--space-md); }
    .padding-lg\@lg { padding: var(--space-lg); }
    .padding-xl\@lg { padding: var(--space-xl); }
    .padding-xxl\@lg { padding: var(--space-xxl); }
    .padding-xxxl\@lg { padding: var(--space-xxxl); }
    .padding-xxxxl\@lg { padding: var(--space-xxxxl); }
    .padding-0\@lg { padding: 0; }
    .padding-component\@lg { padding: var(--component-padding); }
    .padding-top-xxxxs\@lg { padding-top: var(--space-xxxxs); }
    .padding-top-xxxs\@lg { padding-top: var(--space-xxxs); }
    .padding-top-xxs\@lg { padding-top: var(--space-xxs); }
    .padding-top-xs\@lg { padding-top: var(--space-xs); }
    .padding-top-sm\@lg { padding-top: var(--space-sm); }
    .padding-top-md\@lg { padding-top: var(--space-md); }
    .padding-top-lg\@lg { padding-top: var(--space-lg); }
    .padding-top-xl\@lg { padding-top: var(--space-xl); }
    .padding-top-xxl\@lg { padding-top: var(--space-xxl); }
    .padding-top-xxxl\@lg { padding-top: var(--space-xxxl); }
    .padding-top-xxxxl\@lg { padding-top: var(--space-xxxxl); }
    .padding-top-0\@lg { padding-top: 0; }
    .padding-top-component\@lg { padding-top: var(--component-padding); }
    .padding-bottom-xxxxs\@lg { padding-bottom: var(--space-xxxxs); }
    .padding-bottom-xxxs\@lg { padding-bottom: var(--space-xxxs); }
    .padding-bottom-xxs\@lg { padding-bottom: var(--space-xxs); }
    .padding-bottom-xs\@lg { padding-bottom: var(--space-xs); }
    .padding-bottom-sm\@lg { padding-bottom: var(--space-sm); }
    .padding-bottom-md\@lg { padding-bottom: var(--space-md); }
    .padding-bottom-lg\@lg { padding-bottom: var(--space-lg); }
    .padding-bottom-xl\@lg { padding-bottom: var(--space-xl); }
    .padding-bottom-xxl\@lg { padding-bottom: var(--space-xxl); }
    .padding-bottom-xxxl\@lg { padding-bottom: var(--space-xxxl); }
    .padding-bottom-xxxxl\@lg { padding-bottom: var(--space-xxxxl); }
    .padding-bottom-0\@lg { padding-bottom: 0; }
    .padding-bottom-component\@lg { padding-bottom: var(--component-padding); }
    .padding-right-xxxxs\@lg { padding-right: var(--space-xxxxs); }
    .padding-right-xxxs\@lg { padding-right: var(--space-xxxs); }
    .padding-right-xxs\@lg { padding-right: var(--space-xxs); }
    .padding-right-xs\@lg { padding-right: var(--space-xs); }
    .padding-right-sm\@lg { padding-right: var(--space-sm); }
    .padding-right-md\@lg { padding-right: var(--space-md); }
    .padding-right-lg\@lg { padding-right: var(--space-lg); }
    .padding-right-xl\@lg { padding-right: var(--space-xl); }
    .padding-right-xxl\@lg { padding-right: var(--space-xxl); }
    .padding-right-xxxl\@lg { padding-right: var(--space-xxxl); }
    .padding-right-xxxxl\@lg { padding-right: var(--space-xxxxl); }
    .padding-right-0\@lg { padding-right: 0; }
    .padding-right-component\@lg { padding-right: var(--component-padding); }
    .padding-left-xxxxs\@lg { padding-left: var(--space-xxxxs); }
    .padding-left-xxxs\@lg { padding-left: var(--space-xxxs); }
    .padding-left-xxs\@lg { padding-left: var(--space-xxs); }
    .padding-left-xs\@lg { padding-left: var(--space-xs); }
    .padding-left-sm\@lg { padding-left: var(--space-sm); }
    .padding-left-md\@lg { padding-left: var(--space-md); }
    .padding-left-lg\@lg { padding-left: var(--space-lg); }
    .padding-left-xl\@lg { padding-left: var(--space-xl); }
    .padding-left-xxl\@lg { padding-left: var(--space-xxl); }
    .padding-left-xxxl\@lg { padding-left: var(--space-xxxl); }
    .padding-left-xxxxl\@lg { padding-left: var(--space-xxxxl); }
    .padding-left-0\@lg { padding-left: 0; }
    .padding-left-component\@lg { padding-left: var(--component-padding); }
    .padding-x-xxxxs\@lg { padding-left: var(--space-xxxxs); padding-right: var(--space-xxxxs); }
    .padding-x-xxxs\@lg { padding-left: var(--space-xxxs); padding-right: var(--space-xxxs); }
    .padding-x-xxs\@lg { padding-left: var(--space-xxs); padding-right: var(--space-xxs); }
    .padding-x-xs\@lg { padding-left: var(--space-xs); padding-right: var(--space-xs); }
    .padding-x-sm\@lg { padding-left: var(--space-sm); padding-right: var(--space-sm); }
    .padding-x-md\@lg { padding-left: var(--space-md); padding-right: var(--space-md); }
    .padding-x-lg\@lg { padding-left: var(--space-lg); padding-right: var(--space-lg); }
    .padding-x-xl\@lg { padding-left: var(--space-xl); padding-right: var(--space-xl); }
    .padding-x-xxl\@lg { padding-left: var(--space-xxl); padding-right: var(--space-xxl); }
    .padding-x-xxxl\@lg { padding-left: var(--space-xxxl); padding-right: var(--space-xxxl); }
    .padding-x-xxxxl\@lg { padding-left: var(--space-xxxxl); padding-right: var(--space-xxxxl); }
    .padding-x-0\@lg { padding-left: 0; padding-right: 0; }
    .padding-x-component\@lg { padding-left: var(--component-padding); padding-right: var(--component-padding); }
    .padding-y-xxxxs\@lg { padding-top: var(--space-xxxxs); padding-bottom: var(--space-xxxxs); }
    .padding-y-xxxs\@lg { padding-top: var(--space-xxxs); padding-bottom: var(--space-xxxs); }
    .padding-y-xxs\@lg { padding-top: var(--space-xxs); padding-bottom: var(--space-xxs); }
    .padding-y-xs\@lg { padding-top: var(--space-xs); padding-bottom: var(--space-xs); }
    .padding-y-sm\@lg { padding-top: var(--space-sm); padding-bottom: var(--space-sm); }
    .padding-y-md\@lg { padding-top: var(--space-md); padding-bottom: var(--space-md); }
    .padding-y-lg\@lg { padding-top: var(--space-lg); padding-bottom: var(--space-lg); }
    .padding-y-xl\@lg { padding-top: var(--space-xl); padding-bottom: var(--space-xl); }
    .padding-y-xxl\@lg { padding-top: var(--space-xxl); padding-bottom: var(--space-xxl); }
    .padding-y-xxxl\@lg { padding-top: var(--space-xxxl); padding-bottom: var(--space-xxxl); }
    .padding-y-xxxxl\@lg { padding-top: var(--space-xxxxl); padding-bottom: var(--space-xxxxl); }
    .padding-y-0\@lg { padding-top: 0; padding-bottom: 0; }
    .padding-y-component\@lg { padding-top: var(--component-padding); padding-bottom: var(--component-padding); } }
  .text-center\@lg { text-align: center; }
  .text-left\@lg { text-align: left; }
  .text-right\@lg { text-align: right; }
  .text-justify\@lg { text-align: justify; }
  @supports (--css: variables) { .text-xs\@lg { font-size: var(--text-xs, 0.694em); }
    .text-sm\@lg { font-size: var(--text-sm, 0.833em); }
    .text-base\@lg { font-size: var(--text-unit, 1em); }
    .text-md\@lg { font-size: var(--text-md, 1.2em); }
    .text-lg\@lg { font-size: var(--text-lg, 1.44em); }
    .text-xl\@lg { font-size: var(--text-xl, 1.728em); }
    .text-xxl\@lg { font-size: var(--text-xxl, 2.074em); }
    .text-xxxl\@lg { font-size: var(--text-xxxl, 2.488em); }
    .text-xxxxl\@lg { font-size: var(--text-xxxxl, 2.985em); } }
  @supports (--css: variables) { .width-xxxxs\@lg { width: var(--size-xxxxs, 0.25rem); }
    .width-xxxs\@lg { width: var(--size-xxxs, 0.5rem); }
    .width-xxs\@lg { width: var(--size-xxs, 0.75rem); }
    .width-xs\@lg { width: var(--size-xs, 1rem); }
    .width-sm\@lg { width: var(--size-sm, 1.5rem); }
    .width-md\@lg { width: var(--size-md, 2rem); }
    .width-lg\@lg { width: var(--size-lg, 3rem); }
    .width-xl\@lg { width: var(--size-xl, 4rem); }
    .width-xxl\@lg { width: var(--size-xxl, 6rem); }
    .width-xxxl\@lg { width: var(--size-xxxl, 8rem); }
    .width-xxxxl\@lg { width: var(--size-xxxxl, 16rem); } }
  .width-0\@lg { width: 0; }
  .width-10\%\@lg { width: 10%; }
  .width-20\%\@lg { width: 20%; }
  .width-25\%\@lg { width: 25%; }
  .width-30\%\@lg { width: 30%; }
  .width-33\%\@lg { width: calc(100% / 3); }
  .width-40\%\@lg { width: 40%; }
  .width-50\%\@lg { width: 50%; }
  .width-60\%\@lg { width: 60%; }
  .width-66\%\@lg { width: calc(100% / 1.5); }
  .width-70\%\@lg { width: 70%; }
  .width-75\%\@lg { width: 75%; }
  .width-80\%\@lg { width: 80%; }
  .width-90\%\@lg { width: 90%; }
  .width-100\%\@lg { width: 100%; }
  .width-100vw\@lg { width: 100vw; }
  .width-auto\@lg { width: auto; }
  @supports (--css: variables) { .height-xxxxs\@lg { height: var(--size-xxxxs, 0.25rem); }
    .height-xxxs\@lg { height: var(--size-xxxs, 0.5rem); }
    .height-xxs\@lg { height: var(--size-xxs, 0.75rem); }
    .height-xs\@lg { height: var(--size-xs, 1rem); }
    .height-sm\@lg { height: var(--size-sm, 1.5rem); }
    .height-md\@lg { height: var(--size-md, 2rem); }
    .height-lg\@lg { height: var(--size-lg, 3rem); }
    .height-xl\@lg { height: var(--size-xl, 4rem); }
    .height-xxl\@lg { height: var(--size-xxl, 6rem); }
    .height-xxxl\@lg { height: var(--size-xxxl, 8rem); }
    .height-xxxxl\@lg { height: var(--size-xxxxl, 16rem); } }
  .height-0\@lg { height: 0; }
  .height-10\%\@lg { height: 10%; }
  .height-20\%\@lg { height: 20%; }
  .height-25\%\@lg { height: 25%; }
  .height-30\%\@lg { height: 30%; }
  .height-33\%\@lg { height: calc(100% / 3); }
  .height-40\%\@lg { height: 40%; }
  .height-50\%\@lg { height: 50%; }
  .height-60\%\@lg { height: 60%; }
  .height-66\%\@lg { height: calc(100% / 1.5); }
  .height-70\%\@lg { height: 70%; }
  .height-75\%\@lg { height: 75%; }
  .height-80\%\@lg { height: 80%; }
  .height-90\%\@lg { height: 90%; }
  .height-100\%\@lg { height: 100%; }
  .height-100vh\@lg { height: 100vh; }
  .height-auto\@lg { height: auto; }
  .position-relative\@lg { position: relative; }
  .position-absolute\@lg { position: absolute; }
  .position-fixed\@lg { position: fixed; }
  .position-sticky\@lg { position: -webkit-sticky; position: sticky; }
  .position-static\@lg { position: static; }
  .top-0\@lg { top: 0; }
  .top-50\%\@lg { top: 50%; }
  .bottom-0\@lg { bottom: 0; }
  .bottom-50\%\@lg { bottom: 50%; }
  .left-0\@lg { left: 0; }
  .left-50\%\@lg { left: 50%; }
  .right-0\@lg { right: 0; }
  .right-50\%\@lg { right: 50%; }
  .inset-0\@lg { top: 0; right: 0; bottom: 0; left: 0; }
  .hide\@lg { display: none !important; } }

@media not all and (min-width: 80rem) { .has-margin\@lg { margin: 0 !important; }
  .has-padding\@lg { padding: 0 !important; }
  .display\@lg { display: none !important; } }

@media (min-width: 90rem) { .flex\@xl { display: flex; }
  .inline-flex\@xl { display: inline-flex; }
  .flex-wrap\@xl { flex-wrap: wrap; }
  .flex-column\@xl { flex-direction: column; }
  .flex-column-reverse\@xl { flex-direction: column-reverse; }
  .flex-row\@xl { flex-direction: row; }
  .flex-row-reverse\@xl { flex-direction: row-reverse; }
  .flex-center\@xl { justify-content: center; align-items: center; }
  .flex-grow\@xl { flex-grow: 1; }
  .flex-grow-0\@xl { flex-grow: 0; }
  .flex-shrink\@xl { flex-shrink: 1; }
  .flex-shrink-0\@xl { flex-shrink: 0; }
  .flex-basis-0\@xl { flex-basis: 0; }
  .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; }
  .items-center\@xl { align-items: center; }
  .items-start\@xl { align-items: flex-start; }
  .items-end\@xl { align-items: flex-end; }
  .items-baseline\@xl { align-items: baseline; }
  .order-1\@xl { order: 1; }
  .order-2\@xl { order: 2; }
  .order-3\@xl { order: 3; }
  .block\@xl { display: block; }
  .inline-block\@xl { display: inline-block; }
  .inline\@xl { display: inline; }
  @supports (--css: variables) { .margin-xxxxs\@xl { margin: var(--space-xxxxs); }
    .margin-xxxs\@xl { margin: var(--space-xxxs); }
    .margin-xxs\@xl { margin: var(--space-xxs); }
    .margin-xs\@xl { margin: var(--space-xs); }
    .margin-sm\@xl { margin: var(--space-sm); }
    .margin-md\@xl { margin: var(--space-md); }
    .margin-lg\@xl { margin: var(--space-lg); }
    .margin-xl\@xl { margin: var(--space-xl); }
    .margin-xxl\@xl { margin: var(--space-xxl); }
    .margin-xxxl\@xl { margin: var(--space-xxxl); }
    .margin-xxxxl\@xl { margin: var(--space-xxxxl); }
    .margin-auto\@xl { margin: auto; }
    .margin-0\@xl { margin: 0; }
    .margin-top-xxxxs\@xl { margin-top: var(--space-xxxxs); }
    .margin-top-xxxs\@xl { margin-top: var(--space-xxxs); }
    .margin-top-xxs\@xl { margin-top: var(--space-xxs); }
    .margin-top-xs\@xl { margin-top: var(--space-xs); }
    .margin-top-sm\@xl { margin-top: var(--space-sm); }
    .margin-top-md\@xl { margin-top: var(--space-md); }
    .margin-top-lg\@xl { margin-top: var(--space-lg); }
    .margin-top-xl\@xl { margin-top: var(--space-xl); }
    .margin-top-xxl\@xl { margin-top: var(--space-xxl); }
    .margin-top-xxxl\@xl { margin-top: var(--space-xxxl); }
    .margin-top-xxxxl\@xl { margin-top: var(--space-xxxxl); }
    .margin-top-auto\@xl { margin-top: auto; }
    .margin-top-0\@xl { margin-top: 0; }
    .margin-bottom-xxxxs\@xl { margin-bottom: var(--space-xxxxs); }
    .margin-bottom-xxxs\@xl { margin-bottom: var(--space-xxxs); }
    .margin-bottom-xxs\@xl { margin-bottom: var(--space-xxs); }
    .margin-bottom-xs\@xl { margin-bottom: var(--space-xs); }
    .margin-bottom-sm\@xl { margin-bottom: var(--space-sm); }
    .margin-bottom-md\@xl { margin-bottom: var(--space-md); }
    .margin-bottom-lg\@xl { margin-bottom: var(--space-lg); }
    .margin-bottom-xl\@xl { margin-bottom: var(--space-xl); }
    .margin-bottom-xxl\@xl { margin-bottom: var(--space-xxl); }
    .margin-bottom-xxxl\@xl { margin-bottom: var(--space-xxxl); }
    .margin-bottom-xxxxl\@xl { margin-bottom: var(--space-xxxxl); }
    .margin-bottom-auto\@xl { margin-bottom: auto; }
    .margin-bottom-0\@xl { margin-bottom: 0; }
    .margin-right-xxxxs\@xl { margin-right: var(--space-xxxxs); }
    .margin-right-xxxs\@xl { margin-right: var(--space-xxxs); }
    .margin-right-xxs\@xl { margin-right: var(--space-xxs); }
    .margin-right-xs\@xl { margin-right: var(--space-xs); }
    .margin-right-sm\@xl { margin-right: var(--space-sm); }
    .margin-right-md\@xl { margin-right: var(--space-md); }
    .margin-right-lg\@xl { margin-right: var(--space-lg); }
    .margin-right-xl\@xl { margin-right: var(--space-xl); }
    .margin-right-xxl\@xl { margin-right: var(--space-xxl); }
    .margin-right-xxxl\@xl { margin-right: var(--space-xxxl); }
    .margin-right-xxxxl\@xl { margin-right: var(--space-xxxxl); }
    .margin-right-auto\@xl { margin-right: auto; }
    .margin-right-0\@xl { margin-right: 0; }
    .margin-left-xxxxs\@xl { margin-left: var(--space-xxxxs); }
    .margin-left-xxxs\@xl { margin-left: var(--space-xxxs); }
    .margin-left-xxs\@xl { margin-left: var(--space-xxs); }
    .margin-left-xs\@xl { margin-left: var(--space-xs); }
    .margin-left-sm\@xl { margin-left: var(--space-sm); }
    .margin-left-md\@xl { margin-left: var(--space-md); }
    .margin-left-lg\@xl { margin-left: var(--space-lg); }
    .margin-left-xl\@xl { margin-left: var(--space-xl); }
    .margin-left-xxl\@xl { margin-left: var(--space-xxl); }
    .margin-left-xxxl\@xl { margin-left: var(--space-xxxl); }
    .margin-left-xxxxl\@xl { margin-left: var(--space-xxxxl); }
    .margin-left-auto\@xl { margin-left: auto; }
    .margin-left-0\@xl { margin-left: 0; }
    .margin-x-xxxxs\@xl { margin-left: var(--space-xxxxs); margin-right: var(--space-xxxxs); }
    .margin-x-xxxs\@xl { margin-left: var(--space-xxxs); margin-right: var(--space-xxxs); }
    .margin-x-xxs\@xl { margin-left: var(--space-xxs); margin-right: var(--space-xxs); }
    .margin-x-xs\@xl { margin-left: var(--space-xs); margin-right: var(--space-xs); }
    .margin-x-sm\@xl { margin-left: var(--space-sm); margin-right: var(--space-sm); }
    .margin-x-md\@xl { margin-left: var(--space-md); margin-right: var(--space-md); }
    .margin-x-lg\@xl { margin-left: var(--space-lg); margin-right: var(--space-lg); }
    .margin-x-xl\@xl { margin-left: var(--space-xl); margin-right: var(--space-xl); }
    .margin-x-xxl\@xl { margin-left: var(--space-xxl); margin-right: var(--space-xxl); }
    .margin-x-xxxl\@xl { margin-left: var(--space-xxxl); margin-right: var(--space-xxxl); }
    .margin-x-xxxxl\@xl { margin-left: var(--space-xxxxl); margin-right: var(--space-xxxxl); }
    .margin-x-auto\@xl { margin-left: auto; margin-right: auto; }
    .margin-x-0\@xl { margin-left: 0; margin-right: 0; }
    .margin-y-xxxxs\@xl { margin-top: var(--space-xxxxs); margin-bottom: var(--space-xxxxs); }
    .margin-y-xxxs\@xl { margin-top: var(--space-xxxs); margin-bottom: var(--space-xxxs); }
    .margin-y-xxs\@xl { margin-top: var(--space-xxs); margin-bottom: var(--space-xxs); }
    .margin-y-xs\@xl { margin-top: var(--space-xs); margin-bottom: var(--space-xs); }
    .margin-y-sm\@xl { margin-top: var(--space-sm); margin-bottom: var(--space-sm); }
    .margin-y-md\@xl { margin-top: var(--space-md); margin-bottom: var(--space-md); }
    .margin-y-lg\@xl { margin-top: var(--space-lg); margin-bottom: var(--space-lg); }
    .margin-y-xl\@xl { margin-top: var(--space-xl); margin-bottom: var(--space-xl); }
    .margin-y-xxl\@xl { margin-top: var(--space-xxl); margin-bottom: var(--space-xxl); }
    .margin-y-xxxl\@xl { margin-top: var(--space-xxxl); margin-bottom: var(--space-xxxl); }
    .margin-y-xxxxl\@xl { margin-top: var(--space-xxxxl); margin-bottom: var(--space-xxxxl); }
    .margin-y-auto\@xl { margin-top: auto; margin-bottom: auto; }
    .margin-y-0\@xl { margin-top: 0; margin-bottom: 0; } }
  @supports (--css: variables) { .padding-xxxxs\@xl { padding: var(--space-xxxxs); }
    .padding-xxxs\@xl { padding: var(--space-xxxs); }
    .padding-xxs\@xl { padding: var(--space-xxs); }
    .padding-xs\@xl { padding: var(--space-xs); }
    .padding-sm\@xl { padding: var(--space-sm); }
    .padding-md\@xl { padding: var(--space-md); }
    .padding-lg\@xl { padding: var(--space-lg); }
    .padding-xl\@xl { padding: var(--space-xl); }
    .padding-xxl\@xl { padding: var(--space-xxl); }
    .padding-xxxl\@xl { padding: var(--space-xxxl); }
    .padding-xxxxl\@xl { padding: var(--space-xxxxl); }
    .padding-0\@xl { padding: 0; }
    .padding-component\@xl { padding: var(--component-padding); }
    .padding-top-xxxxs\@xl { padding-top: var(--space-xxxxs); }
    .padding-top-xxxs\@xl { padding-top: var(--space-xxxs); }
    .padding-top-xxs\@xl { padding-top: var(--space-xxs); }
    .padding-top-xs\@xl { padding-top: var(--space-xs); }
    .padding-top-sm\@xl { padding-top: var(--space-sm); }
    .padding-top-md\@xl { padding-top: var(--space-md); }
    .padding-top-lg\@xl { padding-top: var(--space-lg); }
    .padding-top-xl\@xl { padding-top: var(--space-xl); }
    .padding-top-xxl\@xl { padding-top: var(--space-xxl); }
    .padding-top-xxxl\@xl { padding-top: var(--space-xxxl); }
    .padding-top-xxxxl\@xl { padding-top: var(--space-xxxxl); }
    .padding-top-0\@xl { padding-top: 0; }
    .padding-top-component\@xl { padding-top: var(--component-padding); }
    .padding-bottom-xxxxs\@xl { padding-bottom: var(--space-xxxxs); }
    .padding-bottom-xxxs\@xl { padding-bottom: var(--space-xxxs); }
    .padding-bottom-xxs\@xl { padding-bottom: var(--space-xxs); }
    .padding-bottom-xs\@xl { padding-bottom: var(--space-xs); }
    .padding-bottom-sm\@xl { padding-bottom: var(--space-sm); }
    .padding-bottom-md\@xl { padding-bottom: var(--space-md); }
    .padding-bottom-lg\@xl { padding-bottom: var(--space-lg); }
    .padding-bottom-xl\@xl { padding-bottom: var(--space-xl); }
    .padding-bottom-xxl\@xl { padding-bottom: var(--space-xxl); }
    .padding-bottom-xxxl\@xl { padding-bottom: var(--space-xxxl); }
    .padding-bottom-xxxxl\@xl { padding-bottom: var(--space-xxxxl); }
    .padding-bottom-0\@xl { padding-bottom: 0; }
    .padding-bottom-component\@xl { padding-bottom: var(--component-padding); }
    .padding-right-xxxxs\@xl { padding-right: var(--space-xxxxs); }
    .padding-right-xxxs\@xl { padding-right: var(--space-xxxs); }
    .padding-right-xxs\@xl { padding-right: var(--space-xxs); }
    .padding-right-xs\@xl { padding-right: var(--space-xs); }
    .padding-right-sm\@xl { padding-right: var(--space-sm); }
    .padding-right-md\@xl { padding-right: var(--space-md); }
    .padding-right-lg\@xl { padding-right: var(--space-lg); }
    .padding-right-xl\@xl { padding-right: var(--space-xl); }
    .padding-right-xxl\@xl { padding-right: var(--space-xxl); }
    .padding-right-xxxl\@xl { padding-right: var(--space-xxxl); }
    .padding-right-xxxxl\@xl { padding-right: var(--space-xxxxl); }
    .padding-right-0\@xl { padding-right: 0; }
    .padding-right-component\@xl { padding-right: var(--component-padding); }
    .padding-left-xxxxs\@xl { padding-left: var(--space-xxxxs); }
    .padding-left-xxxs\@xl { padding-left: var(--space-xxxs); }
    .padding-left-xxs\@xl { padding-left: var(--space-xxs); }
    .padding-left-xs\@xl { padding-left: var(--space-xs); }
    .padding-left-sm\@xl { padding-left: var(--space-sm); }
    .padding-left-md\@xl { padding-left: var(--space-md); }
    .padding-left-lg\@xl { padding-left: var(--space-lg); }
    .padding-left-xl\@xl { padding-left: var(--space-xl); }
    .padding-left-xxl\@xl { padding-left: var(--space-xxl); }
    .padding-left-xxxl\@xl { padding-left: var(--space-xxxl); }
    .padding-left-xxxxl\@xl { padding-left: var(--space-xxxxl); }
    .padding-left-0\@xl { padding-left: 0; }
    .padding-left-component\@xl { padding-left: var(--component-padding); }
    .padding-x-xxxxs\@xl { padding-left: var(--space-xxxxs); padding-right: var(--space-xxxxs); }
    .padding-x-xxxs\@xl { padding-left: var(--space-xxxs); padding-right: var(--space-xxxs); }
    .padding-x-xxs\@xl { padding-left: var(--space-xxs); padding-right: var(--space-xxs); }
    .padding-x-xs\@xl { padding-left: var(--space-xs); padding-right: var(--space-xs); }
    .padding-x-sm\@xl { padding-left: var(--space-sm); padding-right: var(--space-sm); }
    .padding-x-md\@xl { padding-left: var(--space-md); padding-right: var(--space-md); }
    .padding-x-lg\@xl { padding-left: var(--space-lg); padding-right: var(--space-lg); }
    .padding-x-xl\@xl { padding-left: var(--space-xl); padding-right: var(--space-xl); }
    .padding-x-xxl\@xl { padding-left: var(--space-xxl); padding-right: var(--space-xxl); }
    .padding-x-xxxl\@xl { padding-left: var(--space-xxxl); padding-right: var(--space-xxxl); }
    .padding-x-xxxxl\@xl { padding-left: var(--space-xxxxl); padding-right: var(--space-xxxxl); }
    .padding-x-0\@xl { padding-left: 0; padding-right: 0; }
    .padding-x-component\@xl { padding-left: var(--component-padding); padding-right: var(--component-padding); }
    .padding-y-xxxxs\@xl { padding-top: var(--space-xxxxs); padding-bottom: var(--space-xxxxs); }
    .padding-y-xxxs\@xl { padding-top: var(--space-xxxs); padding-bottom: var(--space-xxxs); }
    .padding-y-xxs\@xl { padding-top: var(--space-xxs); padding-bottom: var(--space-xxs); }
    .padding-y-xs\@xl { padding-top: var(--space-xs); padding-bottom: var(--space-xs); }
    .padding-y-sm\@xl { padding-top: var(--space-sm); padding-bottom: var(--space-sm); }
    .padding-y-md\@xl { padding-top: var(--space-md); padding-bottom: var(--space-md); }
    .padding-y-lg\@xl { padding-top: var(--space-lg); padding-bottom: var(--space-lg); }
    .padding-y-xl\@xl { padding-top: var(--space-xl); padding-bottom: var(--space-xl); }
    .padding-y-xxl\@xl { padding-top: var(--space-xxl); padding-bottom: var(--space-xxl); }
    .padding-y-xxxl\@xl { padding-top: var(--space-xxxl); padding-bottom: var(--space-xxxl); }
    .padding-y-xxxxl\@xl { padding-top: var(--space-xxxxl); padding-bottom: var(--space-xxxxl); }
    .padding-y-0\@xl { padding-top: 0; padding-bottom: 0; }
    .padding-y-component\@xl { padding-top: var(--component-padding); padding-bottom: var(--component-padding); } }
  .text-center\@xl { text-align: center; }
  .text-left\@xl { text-align: left; }
  .text-right\@xl { text-align: right; }
  .text-justify\@xl { text-align: justify; }
  @supports (--css: variables) { .text-xs\@xl { font-size: var(--text-xs, 0.694em); }
    .text-sm\@xl { font-size: var(--text-sm, 0.833em); }
    .text-base\@xl { font-size: var(--text-unit, 1em); }
    .text-md\@xl { font-size: var(--text-md, 1.2em); }
    .text-lg\@xl { font-size: var(--text-lg, 1.44em); }
    .text-xl\@xl { font-size: var(--text-xl, 1.728em); }
    .text-xxl\@xl { font-size: var(--text-xxl, 2.074em); }
    .text-xxxl\@xl { font-size: var(--text-xxxl, 2.488em); }
    .text-xxxxl\@xl { font-size: var(--text-xxxxl, 2.985em); } }
  @supports (--css: variables) { .width-xxxxs\@xl { width: var(--size-xxxxs, 0.25rem); }
    .width-xxxs\@xl { width: var(--size-xxxs, 0.5rem); }
    .width-xxs\@xl { width: var(--size-xxs, 0.75rem); }
    .width-xs\@xl { width: var(--size-xs, 1rem); }
    .width-sm\@xl { width: var(--size-sm, 1.5rem); }
    .width-md\@xl { width: var(--size-md, 2rem); }
    .width-lg\@xl { width: var(--size-lg, 3rem); }
    .width-xl\@xl { width: var(--size-xl, 4rem); }
    .width-xxl\@xl { width: var(--size-xxl, 6rem); }
    .width-xxxl\@xl { width: var(--size-xxxl, 8rem); }
    .width-xxxxl\@xl { width: var(--size-xxxxl, 16rem); } }
  .width-0\@xl { width: 0; }
  .width-10\%\@xl { width: 10%; }
  .width-20\%\@xl { width: 20%; }
  .width-25\%\@xl { width: 25%; }
  .width-30\%\@xl { width: 30%; }
  .width-33\%\@xl { width: calc(100% / 3); }
  .width-40\%\@xl { width: 40%; }
  .width-50\%\@xl { width: 50%; }
  .width-60\%\@xl { width: 60%; }
  .width-66\%\@xl { width: calc(100% / 1.5); }
  .width-70\%\@xl { width: 70%; }
  .width-75\%\@xl { width: 75%; }
  .width-80\%\@xl { width: 80%; }
  .width-90\%\@xl { width: 90%; }
  .width-100\%\@xl { width: 100%; }
  .width-100vw\@xl { width: 100vw; }
  .width-auto\@xl { width: auto; }
  @supports (--css: variables) { .height-xxxxs\@xl { height: var(--size-xxxxs, 0.25rem); }
    .height-xxxs\@xl { height: var(--size-xxxs, 0.5rem); }
    .height-xxs\@xl { height: var(--size-xxs, 0.75rem); }
    .height-xs\@xl { height: var(--size-xs, 1rem); }
    .height-sm\@xl { height: var(--size-sm, 1.5rem); }
    .height-md\@xl { height: var(--size-md, 2rem); }
    .height-lg\@xl { height: var(--size-lg, 3rem); }
    .height-xl\@xl { height: var(--size-xl, 4rem); }
    .height-xxl\@xl { height: var(--size-xxl, 6rem); }
    .height-xxxl\@xl { height: var(--size-xxxl, 8rem); }
    .height-xxxxl\@xl { height: var(--size-xxxxl, 16rem); } }
  .height-0\@xl { height: 0; }
  .height-10\%\@xl { height: 10%; }
  .height-20\%\@xl { height: 20%; }
  .height-25\%\@xl { height: 25%; }
  .height-30\%\@xl { height: 30%; }
  .height-33\%\@xl { height: calc(100% / 3); }
  .height-40\%\@xl { height: 40%; }
  .height-50\%\@xl { height: 50%; }
  .height-60\%\@xl { height: 60%; }
  .height-66\%\@xl { height: calc(100% / 1.5); }
  .height-70\%\@xl { height: 70%; }
  .height-75\%\@xl { height: 75%; }
  .height-80\%\@xl { height: 80%; }
  .height-90\%\@xl { height: 90%; }
  .height-100\%\@xl { height: 100%; }
  .height-100vh\@xl { height: 100vh; }
  .height-auto\@xl { height: auto; }
  .position-relative\@xl { position: relative; }
  .position-absolute\@xl { position: absolute; }
  .position-fixed\@xl { position: fixed; }
  .position-sticky\@xl { position: -webkit-sticky; position: sticky; }
  .position-static\@xl { position: static; }
  .top-0\@xl { top: 0; }
  .top-50\%\@xl { top: 50%; }
  .bottom-0\@xl { bottom: 0; }
  .bottom-50\%\@xl { bottom: 50%; }
  .left-0\@xl { left: 0; }
  .left-50\%\@xl { left: 50%; }
  .right-0\@xl { right: 0; }
  .right-50\%\@xl { right: 50%; }
  .inset-0\@xl { top: 0; right: 0; bottom: 0; left: 0; }
  .hide\@xl { display: none !important; } }

@media not all and (min-width: 90rem) { .has-margin\@xl { margin: 0 !important; }
  .has-padding\@xl { padding: 0 !important; }
  .display\@xl { display: none !important; } }

@font-face { font-family: "ui-sans"; font-style: normal; font-weight: 300; src: local(".SFNS-Light"), local(".SFNSText-Light"), local("Arial Regular"); }

@font-face { font-family: "ui-sans"; font-style: italic; font-weight: 300; src: local(".SFNS-LightItalic"), local(".SFNSText-LightItalic"), local("Arial Italic"); }

@font-face { font-family: "ui-sans"; font-style: normal; font-weight: 400; src: local(".SFNS-Regular"), local(".SFNSText-Regular"), local("Arial Regular"); }

@font-face { font-family: "ui-sans"; font-style: italic; font-weight: 400; src: local(".SFNS-Italic"), local(".SFNSText-Italic"), local("Arial Italic"); }

@font-face { font-family: "ui-sans"; font-style: normal; font-weight: 500; src: local(".SFNS-Medium"), local(".SFNSText-Medium"), local("Arial Regular"); }

@font-face { font-family: "ui-sans"; font-style: italic; font-weight: 500; src: local(".SFNS-MediumItalic"), local(".SFNSText-MediumItalic"), local("Arial Italic"); }

@font-face { font-family: "ui-sans"; font-style: normal; font-weight: 700; src: local(".SFNS-Bold"), local(".SFNSText-Bold"), local("Arial Bold"); }

@font-face { font-family: "ui-sans"; font-style: italic; font-weight: 700; src: local(".SFNS-BoldItalic"), local(".SFNSText-BoldItalic"), local("Arial Bold Italic"); }

:root, [data-theme="default"] { --color-primary-darker: hsl(222, 60%, 24%); --color-primary-darker-h: 222; --color-primary-darker-s: 60%; --color-primary-darker-l: 24%; --color-primary-dark: hsl(222, 64%, 34%); --color-primary-dark-h: 222; --color-primary-dark-s: 64%; --color-primary-dark-l: 34%; --color-primary: hsl(218, 73%, 50%); --color-primary-h: 218; --color-primary-s: 73%; --color-primary-l: 50%; --color-primary-light: hsl(213, 100%, 65%); --color-primary-light-h: 213; --color-primary-light-s: 100%; --color-primary-light-l: 65%; --color-primary-lighter: hsl(204, 100%, 70%); --color-primary-lighter-h: 204; --color-primary-lighter-s: 100%; --color-primary-lighter-l: 70%; --color-accent-darker: hsl(36, 80%, 36%); --color-accent-darker-h: 36; --color-accent-darker-s: 80%; --color-accent-darker-l: 36%; --color-accent-dark: hsl(39, 78%, 46%); --color-accent-dark-h: 39; --color-accent-dark-s: 78%; --color-accent-dark-l: 46%; --color-accent: hsl(42, 100%, 57%); --color-accent-h: 42; --color-accent-s: 100%; --color-accent-l: 57%; --color-accent-light: hsl(48, 100%, 55%); --color-accent-light-h: 48; --color-accent-light-s: 100%; --color-accent-light-l: 55%; --color-accent-lighter: hsl(53, 100%, 54%); --color-accent-lighter-h: 53; --color-accent-lighter-s: 100%; --color-accent-lighter-l: 54%; --color-black: hsl(240, 8%, 12%); --color-black-h: 240; --color-black-s: 8%; --color-black-l: 12%; --color-white: hsl(0, 0%, 100%); --color-white-h: 0; --color-white-s: 0%; --color-white-l: 100%; --color-warning-darker: hsl(28, 100%, 30%); --color-warning-darker-h: 28; --color-warning-darker-s: 100%; --color-warning-darker-l: 30%; --color-warning-dark: hsl(28, 100%, 40%); --color-warning-dark-h: 28; --color-warning-dark-s: 100%; --color-warning-dark-l: 40%; --color-warning: hsl(28, 100%, 50%); --color-warning-h: 28; --color-warning-s: 100%; --color-warning-l: 50%; --color-warning-light: hsl(33, 100%, 60%); --color-warning-light-h: 33; --color-warning-light-s: 100%; --color-warning-light-l: 60%; --color-warning-lighter: hsl(36, 100%, 75%); --color-warning-lighter-h: 36; --color-warning-lighter-s: 100%; --color-warning-lighter-l: 75%; --color-success-darker: hsl(120, 35%, 30%); --color-success-darker-h: 120; --color-success-darker-s: 35%; --color-success-darker-l: 30%; --color-success-dark: hsl(108, 35%, 40%); --color-success-dark-h: 108; --color-success-dark-s: 35%; --color-success-dark-l: 40%; --color-success: hsl(99, 48%, 51%); --color-success-h: 99; --color-success-s: 48%; --color-success-l: 51%; --color-success-light: hsl(90, 50%, 60%); --color-success-light-h: 90; --color-success-light-s: 50%; --color-success-light-l: 60%; --color-success-lighter: hsl(82, 65%, 70%); --color-success-lighter-h: 82; --color-success-lighter-s: 65%; --color-success-lighter-l: 70%; --color-error-darker: hsl(8, 85%, 30%); --color-error-darker-h: 8; --color-error-darker-s: 85%; --color-error-darker-l: 30%; --color-error-dark: hsl(4, 70%, 45%); --color-error-dark-h: 4; --color-error-dark-s: 70%; --color-error-dark-l: 45%; --color-error: hsl(0, 86%, 59%); --color-error-h: 0; --color-error-s: 86%; --color-error-l: 59%; --color-error-light: hsl(345, 80%, 65%); --color-error-light-h: 345; --color-error-light-s: 80%; --color-error-light-l: 65%; --color-error-lighter: hsl(350, 80%, 80%); --color-error-lighter-h: 350; --color-error-lighter-s: 80%; --color-error-lighter-l: 80%; --color-bg: hsl(0, 0%, 100%); --color-bg-h: 0; --color-bg-s: 0%; --color-bg-l: 100%; --color-contrast-lower: hsl(230, 10%, 95%); --color-contrast-lower-h: 230; --color-contrast-lower-s: 10%; --color-contrast-lower-l: 95%; --color-contrast-low: hsl(220, 15%, 85%); --color-contrast-low-h: 220; --color-contrast-low-s: 15%; --color-contrast-low-l: 85%; --color-contrast-medium: hsl(225, 10%, 55%); --color-contrast-medium-h: 225; --color-contrast-medium-s: 10%; --color-contrast-medium-l: 55%; --color-contrast-high: hsl(225, 20%, 30%); --color-contrast-high-h: 225; --color-contrast-high-s: 20%; --color-contrast-high-l: 30%; --color-contrast-higher: hsl(225, 25%, 20%); --color-contrast-higher-h: 225; --color-contrast-higher-s: 25%; --color-contrast-higher-l: 20%; --gradient-primary-stop-1: hsl(190, 100%, 40%); --gradient-primary-stop-1-h: 190; --gradient-primary-stop-1-s: 100%; --gradient-primary-stop-1-l: 40%; --gradient-primary-stop-2: hsl(210, 100%, 33%); --gradient-primary-stop-2-h: 210; --gradient-primary-stop-2-s: 100%; --gradient-primary-stop-2-l: 33%; --gradient-success-stop-1: hsl(83, 57%, 53%); --gradient-success-stop-1-h: 83; --gradient-success-stop-1-s: 57%; --gradient-success-stop-1-l: 53%; --gradient-success-stop-2: hsl(140, 50%, 40%); --gradient-success-stop-2-h: 140; --gradient-success-stop-2-s: 50%; --gradient-success-stop-2-l: 40%; --color-brand-darker: hsl(233, 57%, 37%); --color-brand-darker-h: 233; --color-brand-darker-s: 57%; --color-brand-darker-l: 37%; --color-brand-dark: hsl(174, 100%, 29%); --color-brand-dark-h: 174; --color-brand-dark-s: 100%; --color-brand-dark-l: 29%; --color-brand: hsl(122, 39%, 49%); --color-brand-h: 122; --color-brand-s: 39%; --color-brand-l: 49%; --color-brand-light: hsl(88, 50%, 53%); --color-brand-light-h: 88; --color-brand-light-s: 50%; --color-brand-light-l: 53%; --color-brand-lighter: hsl(66, 70%, 54%); --color-brand-lighter-h: 66; --color-brand-lighter-s: 70%; --color-brand-lighter-l: 54%; --color-brand-lighter: hsl(66, 70%, 54%); --color-brand-lighter-h: 66; --color-brand-lighter-s: 70%; --color-brand-lighter-l: 54%; --color-brand-primary: hsl(160, 100%, 26%); --color-brand-primary-h: 160; --color-brand-primary-s: 100%; --color-brand-primary-l: 26%; }

.color-brand-darker { color: hsla(var(--color-brand-darker-h), var(--color-brand-darker-s), var(--color-brand-darker-l), var(--bg-o, 1)); }

.color-brand-dark { color: hsla(var(--color-brand-dark-h), var(--color-brand-dark-s), var(--color-brand-dark-l), var(--bg-o, 1)); }

.color-brand { color: hsla(var(--color-brand-h), var(--color-brand-s), var(--color-brand-l), var(--bg-o, 1)); }

.color-brand-light { color: hsla(var(--color-brand-light-h), var(--color-brand-light-s), var(--color-brand-light-l), var(--bg-o, 1)); }

.color-brand-lighter { color: hsla(var(--color-brand-lighter-h), var(--color-brand-lighter-s), var(--color-brand-lighter-l), var(--bg-o, 1)); }

.color-brand-primary { color: hsla(var(--color-brand-primary-h), var(--color-brand-primary-s), var(--color-brand-primary-l), var(--bg-o, 1)); }

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

.border-brand-darker { border-color: hsla(var(--color-brand-darker-h), var(--color-brand-darker-s), var(--color-brand-darker-l), var(--bg-o, 1)); }

.border-brand-dark { border-color: hsla(var(--color-brand-dark-h), var(--color-brand-dark-s), var(--color-brand-dark-l), var(--bg-o, 1)); }

.border-brand { border-color: hsla(var(--color-brand-h), var(--color-brand-s), var(--color-brand-l), var(--bg-o, 1)); }

.border-brand-light { border-color: hsla(var(--color-brand-light-h), var(--color-brand-light-s), var(--color-brand-light-l), var(--bg-o, 1)); }

.border-brand-lighter { border-color: hsla(var(--color-brand-lighter-h), var(--color-brand-lighter-s), var(--color-brand-lighter-l), var(--bg-o, 1)); }

.bg-rainbow { max-width: 2560px; padding: 0; width: 100%; background: linear-gradient(270deg, #ee5522, #ffaa44 15.62%, #ffdd11 32.29%, #33bb44 49.48%, #00aaee 66.15%, #004499 82.81%, #662288); }

:root { --space-unit: 1.75rem; --space-xxxxs: calc(0.237 * var(--space-unit)); --space-xxxs: calc(0.316 * var(--space-unit)); --space-xxs: calc(0.422 * var(--space-unit)); --space-xs: calc(0.563 * var(--space-unit)); --space-sm: calc(0.75 * var(--space-unit)); --space-md: calc(1 * var(--space-unit)); --space-lg: calc(1.333 * var(--space-unit)); --space-xl: calc(1.777 * var(--space-unit)); --space-xxl: calc(2.369 * var(--space-unit)); --space-xxxl: calc(3.157 * var(--space-unit)); --space-xxxxl: calc(4.21 * var(--space-unit)); --component-padding: var(--space-md); }

@media (min-width: 80rem) { :root { --space-unit: 2rem; } }

.container { width: 100%; padding-left: var(--component-padding); padding-right: var(--component-padding); }

@media (min-width: 80rem) { .container { --component-padding: var(--space-lg); } }

:root { --font-heading: "Montserrat", "ui-sans", sans-serif; --font-primary: "Inter", "ui-sans", sans-serif; --font-secondary: var(--font-primary); --font-tertiary: "Fira Code VF", "Fira Code", "SFMono-Medium", "Menlo",
    "Monaco", "Consolas", "Liberation Mono", "Courier New", monospace; --text-base-size: 0.875rem; --text-scale-ratio: 1.125; --heading-line-height: 1; --body-line-height: 1.3; --text-xs: calc(
    (var(--text-base-size) / var(--text-scale-ratio)) / var(--text-scale-ratio)
  ); --text-sm: calc(var(--text-xs) * var(--text-scale-ratio)); --text-md: calc(
    var(--text-sm) * var(--text-scale-ratio) * var(--text-scale-ratio)
  ); --text-lg: calc(var(--text-md) * var(--text-scale-ratio)); --text-xl: calc(var(--text-lg) * var(--text-scale-ratio)); --text-xxl: calc(var(--text-xl) * var(--text-scale-ratio)); --text-xxxl: calc(var(--text-xxl) * var(--text-scale-ratio)); --text-xxxxl: calc(var(--text-xxxl) * var(--text-scale-ratio)); --text-axis: -10; --font-primary-capital-letter: 0.7; --font-secondary-capital-letter: 0.7; --font-tertiary-capital-letter: 0.7; --font-regular: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; }

@media (min-width: 48rem) { :root { --text-base-size: 1rem; } }

@media (min-width: 64rem) { :root { --heading-line-height: 1.2; --body-line-height: 1.4; } }

a { -webkit-text-decoration-color: currentColor; text-decoration-color: currentColor; text-decoration-thickness: 0.1em; text-decoration-skip: auto; -webkit-text-decoration-skip: auto; outline: none; color: currentColor; }

body { font-family: var(--font-primary); font-weight: 400; }

h1, h2, h3, h4 { font-family: var(--font-primary); font-weight: var(--font-bold, 700); font-feature-settings: "dlig" 0; color: inherit; }

.font-heading { font-family: var(--font-heading); }

.font-primary { font-family: var(--font-primary); }

.font-secondary { font-family: var(--font-secondary); }

.font-tertiary { font-family: var(--font-tertiary); font-feature-settings: "ss01" 0, "ss02" 1, "ss03" 1, "ss04" 1, "ss05" 1, "ss06" 1, "calt" 1, "dlig" 1, "onum" 1, "calt" 1, "kern" 1, "locl" 1; letter-spacing: -0.005em; word-spacing: 0.01em; font-weight: 450; line-height: 1.3; }

.font-thin { font-weight: 300; }

.font-normal { font-weight: var(--font-regular, 400); }

.font-medium { font-weight: var(--font-medium, 500); }

.font-semibold { font-weight: var(--font-semibold, 600); }

.font-bold { font-weight: var(--font-bold, 700); }

.font-heavy { font-weight: 800; }

.text-base { font-size: var(--text-base-size); }

.font-italic { font-style: italic; font-style: oblique 10deg; }

@media (min-width: 32rem) { .text-base\@xs { font-size: var(--text-base-size); } }

@media (min-width: 48rem) { .text-base\@sm { font-size: var(--text-base-size); } }

@media (min-width: 64rem) { .text-base\@md { font-size: var(--text-base-size); } }

@media (min-width: 80rem) { .text-base\@lg { font-size: var(--text-base-size); } }

@media (min-width: 90rem) { .text-base\@xl { font-size: var(--text-base-size); } }

code, kbd, pre, samp { font-feature-settings: "ss01" 0, "ss02" 1, "ss03" 1, "ss04" 1, "ss05" 1, "ss06" 1, "ss08" 0, "zero" 0, "calt" 1, "dlig" 1, "onum" 1, "calt" 1, "kern" 1, "locl" 1; font-weight: 500; line-height: 1.3; }

mark { background-color: hsla(var(--color-accent-lighter-h), var(--color-accent-lighter-s), var(--color-accent-lighter-l), 0.8); color: inherit; padding: 1px 3px; }

code { background-color: var(--color-contrast-lower); font-family: var(--font-tertiary); padding: 1px 3px; text-rendering: optimizeLegibility; color: #e83e8c; color: hsl(var(--color-error-light-h), var(--color-error-light-s), calc(var(--color-error-light-l) * 0.7)); border-radius: var(--radius-sm); font-size: var(--text-xs); }

small { font-size: var(--text-xs, 0.694em); letter-spacing: initial; }

i, em { font-style: italic; }

.text-component { --line-height-multiplier: 1; --text-vspace-multiplier: 1; }

.text-component blockquote { padding-left: 1em; border-left: 4px solid var(--color-contrast-low); }

.text-component hr { background: var(--color-contrast-low); height: 1px; }

.text-component figcaption { font-size: var(--text-sm); color: var(--color-contrast-medium); }

.text-component ul, .text-component li { list-style-position: outside; margin-left: 0; padding-left: 1em !important; }

.article { --body-line-height: 1.5; --text-vspace-multiplier: 1.25; }

.hljs-comment { color: lightgray; }

:root { --icon-xxxs: 8px; --icon-xxs: 12px; --icon-xs: 16px; --icon-sm: 24px; --icon-md: 32px; --icon-lg: 48px; --icon-xl: 64px; --icon-xxl: 96px; --icon-xxxl: 128px; }

:root { --btn-font-size: inherit; --btn-font-size-sm: 0.8125rem; --btn-font-size-md: 100%; --btn-font-size-lg: 1.2rem; --btn-padding-x: var(--space-sm); --btn-padding-y: var(--space-xxs); --btn-radius: 0.3rem; }

.btn { border: none; border-radius: var(--btn-radius); cursor: pointer; font-family: var(--font-primary); font-size: var(--btn-font-size); font-weight: var(--font-semibold, 600); text-decoration: none; transition: all 0.15s ease; word-spacing: 0.08em; letter-spacing: 0.01em; max-height: 40px; }

.btn:hover { box-shadow: inset 0 0 0 0 inherit; text-decoration: none; }

.btn:hover:not([class*="btn--subtle"]):not([class*="btn--primary"]):not([class*="btn--accent"]):not([class*="btn--disabled"]):not([class*="btn--sm"]) > span { text-decoration: underline; }

.btn:focus { box-shadow: inset 0 0 0 0 inherit; outline: 0 inset transparent; outline-offset: -2px; }

.btn:active:not([class~="btn--disabled"]) { transform: translateY(2px); }

.btn span { display: inline-flex; line-height: var(--line-height-multiplier, 1); align-items: center; justify-content: center; }

.btn span:hover { text-decoration: none; }

.btn.form-control { border: none; cursor: pointer; font-family: var(--font-primary); font-size: var(--btn-font-size); font-weight: 700; line-height: 0.7; text-decoration: none; transition: all 0.3s ease; word-spacing: 0.08em; padding: var(--btn-padding-y) var(--btn-padding-x); }

.btn.form-control:last-child { margin-left: -1px; }

.btn.form-control:hover { color: var(--color-brand-primary); }

.btn--primary { background-color: var(--color-brand-primary); color: var(--color-white); }

.btn--subtle { background-color: var(--color-white); box-shadow: inset 0 0 0 2px var(--color-contrast-low); color: var(--color-contrast-high); }

.btn--subtle:focus { box-shadow: inset 0 0 0 2px var(--color-contrast-medium); color: var(--color-contrast-high); }

.btn--accent { background-color: var(--color-accent-light); box-shadow: inset 0 0 0 20px hsla(var(--color-accent-darker-h), var(--color-accent-darker-s), var(--color-accent-darker-l), 0.05); color: var(--color-contrast-high); }

.btn--accent:focus { background-color: var(--color-accent); box-shadow: inset 0 0 50px hsla(var(--color-accent-darker-h), var(--color-accent-darker-s), var(--color-accent-darker-l), 0.5); color: var(--color-contrast-higher); }

.btn--disabled { background-color: var(--color-contrast-low); opacity: 0.6; cursor: not-allowed; font-size: inherit; box-shadow: none; }

.btn--sm { font-weight: var(--font-medium, 500); font-size: var(--btn-font-size-sm); --btn-padding-x: var(--space-xs); --btn-padding-y: var(--space-xxxs); --btn-radius: 0.2rem; }

.btn--sm:hover, .btn--sm:active { text-decoration: none; }

:root { --form-control-padding-x: var(--space-xxs); --form-control-padding-y: var(--space-xxs); --form-control-radius: var(--radius-md); }

.form-control { background-color: var(--color-bg); font-family: var(--font-primary); color: var(--color-contrast-higher); box-shadow: 0 1px 2px hsla(var(--color-contrast-high-h), var(--color-contrast-high-s), var(--color-contrast-high-l), 0.1), inset 0 0 0 1px var(--color-contrast-low); transition: all 0.3s ease; letter-spacing: -0.004em; }

.form-control::-ms-clear { display: none; }

.form-control::-moz-placeholder { opacity: 1; color: var(--color-contrast-medium); font-weight: 400; }

.form-control:-ms-input-placeholder { opacity: 1; color: var(--color-contrast-medium); font-weight: 400; }

.form-control::placeholder { opacity: 1; color: var(--color-contrast-medium); font-weight: 400; }

.form-control:focus { box-shadow: inset 0 0 0 2px var(--color-brand); outline: none; }

.form-control[disabled], .form-control[readonly] { background-color: var(--color-contrast-lower); }

.form-control[aria-invalid="true"] { color: var(--color-contrast-higher); border-color: hsla(var(--color-error-h), var(--color-error-s), var(--color-error-l), 0.9); }

.form-control[aria-invalid="true"]:focus { box-shadow: inset 0 0 0 2px var(--color-error); }

.form-label, .form-legend { opacity: 0.5; }

.select__icon { color: var(--color-contrast-medium); fill: var(--color-contrast-medium); }

input.parsley-error, select.parsley-error, textarea.parsley-error { color: var(--color-error-dark); box-shadow: inset 0 0 0 2px var(--color-error-dark); font-weight: 500; }

input.parsley-error:focus, select.parsley-error:focus, textarea.parsley-error:focus { box-shadow: inset 0 0 0 2px var(--color-error-dark); }

.parsley-errors-list { margin: 0; padding: 0; list-style-type: none; opacity: 0; transition: all 0.3s ease-in; -o-transition: all 0.3s ease-in; -moz-transition: all 0.3s ease-in; -webkit-transition: all 0.3s ease-in; }

.parsley-errors-list li { padding-bottom: 1rem; font-weight: 600; color: var(--color-error-dark); line-height: 0.9em; }

.parsley-errors-list li:empty { display: none; }

.parsley-errors-list.filled { opacity: 1; }

.parsley-error .checkbox + label::before, .parsley-error .radio + label::before, .parsley-error:hover .checkbox + label::before, .parsley-error:hover .radio + label::before { border-color: var(--color-error-dark) !important; }

/* --------------------------------

File#: Main Styles
Title: Markting Tweaks

-------------------------------- */
html { text-rendering: optimizeLegibility; scroll-behavior: smooth; overflow-x: hidden; letter-spacing: -0.01em; word-spacing: 0.05em; }

#page { display: flex; min-height: 100vh; flex-direction: column; position: relative; }

#page #content { flex: 1; }

:target::before { content: ""; display: block; visibility: hidden; }

cite { padding: 4px 0; text-decoration: none; background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="4px" height="2px" viewBox="0 0 4 2" %3E%3Ccircle fill="currentColor" opacity="60%" id="Oval" cx="1" cy="1" r="1" %3E%3C/circle%3E%3C/svg%3E'); background-repeat: repeat-x; background-position: 0 86%; background-size: 2px 4px; position: relative; background-color: transparent; }

.z-index-0 { z-index: -1; }

/* -------------------------------- Descr: Custom Cards -------------------------------- */
a.link-card { cursor: pointer; }

a.link-card:active { transform: translateY(2px); }

.link-card { justify-content: space-between; flex-wrap: wrap; display: flex; overflow: hidden; }

.link-card figure { min-height: 32px; min-width: 32px; fill: currentColor; }

.link-card .link-card__footer:empty, .link-card h5:empty { display: none; height: 0; }

.text-tag { font-size: 0.6875rem; line-height: 1.66667; letter-spacing: 0.075em; text-transform: uppercase; font-weight: 700; flex: 1 1 auto; color: var(--color-contrast-medium); }

.text-decor { position: relative; }

.text-decor::after { align-items: center; background: currentColor; color: currentColor; content: ""; display: flex; height: 3px; justify-content: center; width: 3em; margin: 0.5em auto -2px; }

.text-decor-left { position: relative; }

.text-decor-left::after { align-items: center; background: currentColor; color: currentColor; content: ""; display: flex; height: 3px; justify-content: center; width: 3em; margin: 0.75em 0 -2px; }

.grain { position: relative; overflow: hidden; }

.grain::before { display: block; content: ""; background: url("../png/whitenoise-144x144.png") repeat; background-size: 96px 96px; }

.pattern { position: relative; }

.pattern::before { display: block; content: ""; background: url("https://cdn.cnetcontent.com/sites/lib/wave.svg") no-repeat 50% 16rem; opacity: 0.1; }

.grain::before, .overlay, .pattern::before { min-width: 100%; min-height: 100%; position: absolute; left: 0; top: 0; }

.overlay { background-size: 100%; }

.feather { box-shadow: inset 0 0 480px 48px rgba(0, 0, 0, 0.75); }

.feather-white { box-shadow: inset 0 0 480px 48px rgba(255, 255, 255, 0.75); }

.gradient-blue { background: #273790; background: linear-gradient(40deg, #239 -50%, #63c 150%); }

.gradient-white { background: white; background: linear-gradient(40deg, rgba(255, 255, 255, 0.5) 0%, white 100%); }

.text-feather { text-shadow: 0 1px 4px white, 0 2px 8px white, 0 4px 16px white; }

.max-width-responsive { max-width: var(--max-width-xxs); }

@media (min-width: 64rem) { .media-responsive--4\:3 { padding-bottom: calc((3 / 4) * 100%); }
  [class*="device-group"] { margin-right: 0 !important; }
  .media-custom { padding-bottom: 76.25%; margin: auto -5.5rem; }
  .max-width-responsive { max-width: var(--max-width-xs); margin: auto; } }

.radius-xl { border-radius: 0.625rem; }

.arrow-up { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 4px solid black; }

.arrow-down { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid whitesmoke; align-self: center; vertical-align: middle; }

.arrow-right { width: 0; height: 0; border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-left: 4px solid green; }

.arrow-left { width: 0; height: 0; border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-right: 4px solid blue; }

/* --------------------------------

File#: _1_devices
Title: Devices
Descr: A collection of CSS tech devices
Usage: codyhouse.co/license

-------------------------------- */
:root { --dev-phone-radius: 14%; --dev-phone-img-ratio: .56; --dev-tablet-radius: 6%; --dev-tablet-img-ratio: .75; --dev-browser-radius: 1.5%; --dev-browser-img-ratio: 1.6; --dev-laptop-radius: 3%; --dev-laptop-img-ratio: 1.6; --dev-desktop-radius: 3%; --dev-desktop-img-ratio: 1.6; }

/* #region (Phone) */
.dev-phone, .dev-phone__body { position: relative; width: 100%; }

.dev-phone { z-index: 1; }

.dev-phone__body { background-color: var(--color-bg); --phone-inner-shadow: inset 0 0 .285em hsla(0, 0%, 0%, .15), inset 0 0 .1em hsla(0, 0%, 0%, .035), inset 0 0 .05em hsla(0, 0%, 0%, .005); box-shadow: var(--phone-inner-shadow); padding: 3%; z-index: 2; border-top-left-radius: var(--dev-phone-radius) calc(var(--dev-phone-radius) * var(--dev-phone-img-ratio)); border-top-right-radius: var(--dev-phone-radius) calc(var(--dev-phone-radius) * var(--dev-phone-img-ratio)); border-bottom-right-radius: var(--dev-phone-radius) calc(var(--dev-phone-radius) * var(--dev-phone-img-ratio)); border-bottom-left-radius: var(--dev-phone-radius) calc(var(--dev-phone-radius) * var(--dev-phone-img-ratio)); }

.dev-phone--dark .dev-phone__body { background-color: var(--color-black); border: 3px solid currentColor; }

.dev-phone__media { position: relative; overflow: hidden; border-top-left-radius: calc(var(--dev-phone-radius) * .85) calc(var(--dev-phone-radius) * .85 * var(--dev-phone-img-ratio)); border-top-right-radius: calc(var(--dev-phone-radius) * .85) calc(var(--dev-phone-radius) * .85 * var(--dev-phone-img-ratio)); border-bottom-left-radius: calc(var(--dev-phone-radius) * .85) calc(var(--dev-phone-radius) * .85 * var(--dev-phone-img-ratio)); border-bottom-right-radius: calc(var(--dev-phone-radius) * .85) calc(var(--dev-phone-radius) * .85 * var(--dev-phone-img-ratio)); }

.dev-phone__media img, .dev-phone__media svg, .dev-phone__media video { display: block; max-width: 100%; height: auto; }

.dev-phone__media::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.075); border-radius: inherit; pointer-events: none; }

.dev-phone--dark .dev-phone__media::after { display: none; }

.dev-phone__notch { position: absolute; z-index: 2; top: 0; width: 50%; right: 25%; height: 4%; border-radius: 0 0 .85em .85em; background-color: var(--color-bg); border: 1px solid rgba(0, 0, 0, 0.1); border-top-width: 0; }

.dev-phone--dark .dev-phone__notch { background-color: var(--color-black); border-width: 0; }

.dev-phone--landscape .dev-phone__body { padding: 1.75%; border-top-left-radius: calc(var(--dev-phone-radius) * var(--dev-phone-img-ratio)) var(--dev-phone-radius); border-top-right-radius: calc(var(--dev-phone-radius) * var(--dev-phone-img-ratio)) var(--dev-phone-radius); border-bottom-right-radius: calc(var(--dev-phone-radius) * var(--dev-phone-img-ratio)) var(--dev-phone-radius); border-bottom-left-radius: calc(var(--dev-phone-radius)*var(--dev-phone-img-ratio)) var(--dev-phone-radius); }

.dev-phone--landscape .dev-phone__media { border-top-left-radius: calc(var(--dev-phone-radius) * .85 * var(--dev-phone-img-ratio)) calc(var(--dev-phone-radius) * .85); border-top-right-radius: calc(var(--dev-phone-radius) * .85 * var(--dev-phone-img-ratio)) calc(var(--dev-phone-radius) * .85); border-bottom-left-radius: calc(var(--dev-phone-radius) * .85 * var(--dev-phone-img-ratio)) calc(var(--dev-phone-radius) * .85); border-bottom-right-radius: calc(var(--dev-phone-radius) * .85 * var(--dev-phone-img-ratio)) calc(var(--dev-phone-radius) * .85); }

.dev-phone--landscape .dev-phone__notch { right: 0; height: 56%; top: 22%; width: 4%; border-radius: .85em 0 0 .85em; border-right-width: 0; border-top-width: 1px; }

.dev-phone--front-light .dev-phone__body { box-shadow: var(--phone-inner-shadow), var(--shadow-lg); }

.dev-phone--top-light .dev-phone__shadow { position: absolute; background-color: rgba(0, 0, 0, 0.1); z-index: 1; height: 1em; width: 100%; left: 0; bottom: -.5em; border-radius: 100%; filter: blur(5px); }

.dev-phone--top-light .dev-phone__shadow::before, .dev-phone--top-light .dev-phone__shadow::after { content: ''; position: absolute; border-radius: inherit; }

.dev-phone--top-light .dev-phone__shadow::before { top: 20%; left: 10%; width: 80%; height: 40%; background-color: rgba(0, 0, 0, 0.4); }

.dev-phone--top-light .dev-phone__shadow::after { top: 20%; left: 5%; width: 90%; height: 60%; background-color: rgba(0, 0, 0, 0.15); }

/* #endregion */
/* #region (Tablet) */
.dev-tablet, .dev-tablet__body { position: relative; width: 100%; }

.dev-tablet { z-index: 1; }

.dev-tablet__body { background-color: var(--color-bg); --tablet-inner-shadow: inset 0 0 .285em hsla(0, 0%, 0%, .15), inset 0 0 .1em hsla(0, 0%, 0%, .035), inset 0 0 .05em hsla(0, 0%, 0%, .005); box-shadow: var(--tablet-inner-shadow); padding: 3%; z-index: 2; border-top-left-radius: var(--dev-tablet-radius) calc(var(--dev-tablet-radius) * var(--dev-tablet-img-ratio)); border-top-right-radius: var(--dev-tablet-radius) calc(var(--dev-tablet-radius) * var(--dev-tablet-img-ratio)); border-bottom-right-radius: var(--dev-tablet-radius) calc(var(--dev-tablet-radius) * var(--dev-tablet-img-ratio)); border-bottom-left-radius: var(--dev-tablet-radius) calc(var(--dev-tablet-radius) * var(--dev-tablet-img-ratio)); }

.dev-tablet__media { position: relative; overflow: hidden; border-top-left-radius: calc(var(--dev-tablet-radius) * .75) calc(var(--dev-tablet-radius) * .75 * var(--dev-tablet-img-ratio)); border-top-right-radius: calc(var(--dev-tablet-radius) * .75) calc(var(--dev-tablet-radius) * .75 * var(--dev-tablet-img-ratio)); border-bottom-left-radius: calc(var(--dev-tablet-radius) * .75) calc(var(--dev-tablet-radius) * .75 * var(--dev-tablet-img-ratio)); border-bottom-right-radius: calc(var(--dev-tablet-radius) * .75) calc(var(--dev-tablet-radius) * .75 * var(--dev-tablet-img-ratio)); }

.dev-tablet__media img, .dev-tablet__media svg, .dev-tablet__media video { display: block; max-width: 100%; height: auto; }

.dev-tablet__media::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.075); border-radius: inherit; pointer-events: none; }

.dev-tablet--landscape .dev-tablet__body { padding: 1.75%; border-top-left-radius: calc(var(--dev-tablet-radius) * var(--dev-tablet-img-ratio)) var(--dev-tablet-radius); border-top-right-radius: calc(var(--dev-tablet-radius) * var(--dev-tablet-img-ratio)) var(--dev-tablet-radius); border-bottom-right-radius: calc(var(--dev-tablet-radius) * var(--dev-tablet-img-ratio)) var(--dev-tablet-radius); border-bottom-left-radius: calc(var(--dev-tablet-radius)*var(--dev-tablet-img-ratio)) var(--dev-tablet-radius); }

.dev-tablet--landscape .dev-tablet__media { border-top-left-radius: calc(var(--dev-tablet-radius) * .85 * var(--dev-tablet-img-ratio)) calc(var(--dev-tablet-radius) * .85); border-top-right-radius: calc(var(--dev-tablet-radius) * .85 * var(--dev-tablet-img-ratio)) calc(var(--dev-tablet-radius) * .85); border-bottom-left-radius: calc(var(--dev-tablet-radius) * .85 * var(--dev-tablet-img-ratio)) calc(var(--dev-tablet-radius) * .85); border-bottom-right-radius: calc(var(--dev-tablet-radius) * .85 * var(--dev-tablet-img-ratio)) calc(var(--dev-tablet-radius) * .85); }

.dev-tablet--front-light .dev-tablet__body { box-shadow: var(--tablet-inner-shadow), var(--shadow-lg); }

.dev-tablet--top-light .dev-tablet__shadow { position: absolute; background-color: rgba(0, 0, 0, 0.1); z-index: 1; height: 1em; width: 100%; left: 0; bottom: -.5em; border-radius: 100%; filter: blur(5px); }

.dev-tablet--top-light .dev-tablet__shadow::before, .dev-tablet--top-light .dev-tablet__shadow::after { content: ''; position: absolute; border-radius: inherit; }

.dev-tablet--top-light .dev-tablet__shadow::before { top: 20%; left: 10%; width: 80%; height: 40%; background-color: rgba(0, 0, 0, 0.4); }

.dev-tablet--top-light .dev-tablet__shadow::after { top: 20%; left: 5%; width: 90%; height: 60%; background-color: rgba(0, 0, 0, 0.15); }

/* #endregion */
/* #region (Browser) */
.dev-browser, .dev-browser__body { position: relative; width: 100%; }

.dev-browser { z-index: 1; }

.dev-browser__body { background: var(--color-bg); padding: 3em 2em 1.5em; border-radius: .75rem; z-index: 2; }

.dev-browser__media { overflow: hidden; border-radius: var(--radius-md); }

.dev-browser__media img, .dev-browser__media svg, .dev-browser__media video { display: block; max-width: 100%; }

.dev-browser__dots { position: absolute; left: 1em; top: 1em; display: flex; }

.dev-browser__dots span { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background-color: hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 0.2); margin-right: var(--space-xxs); }

.dev-browser--top-light .dev-browser__shadow { position: absolute; background-color: rgba(0, 0, 0, 0.1); z-index: 1; height: 1em; width: 100%; left: 0; bottom: -.5em; border-radius: 100%; filter: blur(5px); }

.dev-browser--top-light .dev-browser__shadow::before, .dev-browser--top-light .dev-browser__shadow::after { content: ''; position: absolute; border-radius: inherit; }

.dev-browser--top-light .dev-browser__shadow::before { top: 20%; left: 10%; width: 80%; height: 40%; background-color: rgba(0, 0, 0, 0.4); }

.dev-browser--top-light .dev-browser__shadow::after { top: 20%; left: 5%; width: 90%; height: 60%; background-color: rgba(0, 0, 0, 0.2); }

/* #endregion */
/* #region (Laptop) */
.dev-laptop { position: relative; z-index: 1; width: 100%; }

.dev-laptop__body { width: 85%; margin: 0 auto; background-color: var(--color-black); border: 3px solid var(--color-contrast-low); border-bottom-width: 0; padding: 3% 1.5% 1.5%; border-top-left-radius: var(--dev-laptop-radius) calc(var(--dev-laptop-radius) * var(--dev-laptop-img-ratio)); border-top-right-radius: var(--dev-laptop-radius) calc(var(--dev-laptop-radius) * var(--dev-laptop-img-ratio)); z-index: 2; }

.dev-laptop__media img, .dev-laptop__media svg, .dev-laptop__media video { display: block; max-width: 100%; height: auto; }

.dev-laptop__base { position: relative; width: 100%; height: 0; padding-bottom: 3%; background: linear-gradient(hsl(var(--color-contrast-low-h), var(--color-contrast-low-s), calc(var(--color-contrast-low-l) * 1.4)), var(--color-contrast-low) 7% 55%, hsl(var(--color-contrast-low-h), var(--color-contrast-low-s), calc(var(--color-contrast-low-l) * 0.85)) 55%); border-bottom-left-radius: 10% 50%; border-bottom-right-radius: 10% 50%; z-index: 2; }

.dev-laptop__base::after { content: ''; position: absolute; top: 0; left: 40%; width: 20%; height: 35%; border-radius: 0 0 1em 1em; background-color: hsl(var(--color-contrast-low-h), var(--color-contrast-low-s), calc(var(--color-contrast-low-l) * 0.8)); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25); }

.dev-laptop__shadow { position: absolute; z-index: 1; height: 1em; width: 94%; left: 3%; bottom: -.5em; perspective: 400px; }

.dev-laptop__shadow::before, .dev-laptop__shadow::after { content: ''; position: absolute; }

.dev-laptop__shadow::before { top: 0; left: 1%; width: 98%; height: 100%; background-color: rgba(0, 0, 0, 0.25); transform: rotateX(70deg); filter: blur(8px); }

.dev-laptop__shadow::after { top: calc(44% - 1px); left: 4%; width: 92%; height: 12%; border-radius: 100%; background-color: rgba(0, 0, 0, 0.8); filter: blur(1px); }

/* #endregion */
/* #region (Desktop) */
.dev-desktop { position: relative; z-index: 1; width: 100%; }

.dev-desktop__body { position: relative; z-index: 2; width: 100%; margin: 0 auto; background-color: var(--color-black); border: 3px solid var(--color-contrast-low); padding: 4%; border-top-left-radius: var(--dev-desktop-radius) calc(var(--dev-desktop-radius) * var(--dev-desktop-img-ratio)); border-top-right-radius: var(--dev-desktop-radius) calc(var(--dev-desktop-radius) * var(--dev-desktop-img-ratio)); border-bottom-right-radius: var(--dev-desktop-radius) calc(var(--dev-desktop-radius) * var(--dev-desktop-img-ratio)); border-bottom-left-radius: var(--dev-desktop-radius) calc(var(--dev-desktop-radius) * var(--dev-desktop-img-ratio)); }

.dev-desktop__media img, .dev-desktop__media svg, .dev-desktop__media video { display: block; max-width: 100%; height: auto; }

.dev-desktop__base { position: relative; z-index: 1; width: 33%; margin: 0 auto; height: 0; padding-bottom: 15%; perspective: 180px; }

.dev-desktop__base-top { position: absolute; z-index: 3; top: -1px; left: 15%; width: 70%; height: 80%; -webkit-clip-path: polygon(3% 0%, 97% 0%, 100% 100%, 0% 100%); clip-path: polygon(3% 0%, 97% 0%, 100% 100%, 0% 100%); background: linear-gradient(hsl(var(--color-contrast-low-h), var(--color-contrast-low-s), calc(var(--color-contrast-low-l) * 0.8)), var(--color-contrast-low)); }

.dev-desktop__base-bottom { position: absolute; z-index: 2; top: calc(80% - 2px); left: 15%; width: 70%; height: 50%; border-radius: 0 0 .25em .25em; transform-origin: center top; transform: rotateX(80deg); background-color: var(--color-contrast-low); box-shadow: inset 0 -2px 0 rgba(255, 255, 255, 0.25); }

.dev-desktop__shadow { position: absolute; z-index: 1; top: calc(80% - 2px); left: 17%; width: 66%; height: 50%; border-radius: 0 0 .25em .25em; transform-origin: center top; transform: rotateX(80deg); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4), 0 4px 4px rgba(0, 0, 0, 0.15); opacity: .8; }

/* --------------------------------

File#: _2_full-screen-search
Title: Full Screen Search
Descr: A full-screen window w/ a search input element
Usage: codyhouse.co/license

-------------------------------- */
:root { --fs-search-btn-size: 1.5em; --fs-search-border-bottom-width: 2px; }

.modal--search { background-color: hsla(var(--color-bg-h), var(--color-bg-s), var(--color-bg-l), 0.95); }

.modal--search .modal__close-btn--outer { background-color: var(--color-contrast-lower); }

.modal--search .modal__close-btn--outer .icon { color: var(--color-contrast-high); }

.modal--search .modal__close-btn--outer:hover { background-color: var(--color-contrast-low); }

.full-screen-search { position: relative; font-size: var(--text-xl); background-image: linear-gradient(transparent calc(100% - var(--fs-search-border-bottom-width) * 2), var(--color-contrast-low) calc(100% - var(--fs-search-border-bottom-width) * 2), var(--color-contrast-low) calc(100% - var(--fs-search-border-bottom-width)), transparent var(--fs-search-border-bottom-width)); }

.full-screen-search__input { background: transparent; width: 100%; padding: var(--space-sm) var(--space-xs); padding-right: calc(var(--space-xs) + var(--fs-search-btn-size)); background-image: linear-gradient(transparent calc(100% - var(--fs-search-border-bottom-width) * 2), var(--color-primary) calc(100% - var(--fs-search-border-bottom-width) * 2), var(--color-primary) calc(100% - var(--fs-search-border-bottom-width)), transparent var(--fs-search-border-bottom-width)); background-size: 0% 100%; background-repeat: no-repeat; }

.full-screen-search__input:focus { outline: none; background-size: 100% 100%; }

.full-screen-search__input::-webkit-search-decoration, .full-screen-search__input::-webkit-search-cancel-button, .full-screen-search__input::-webkit-search-results-button, .full-screen-search__input::-webkit-search-results-decoration { display: none; }

.full-screen-search__btn { position: absolute; top: calc(50%); transform: translateY(-50%); right: var(--space-xs); height: var(--fs-search-btn-size); width: var(--fs-search-btn-size); background-color: var(--color-brand); border-radius: 50%; display: flex; justify-content: center; align-items: center; }

.full-screen-search__btn .icon { display: block; color: var(--color-white); font-size: 20px; transition: transform .2s; }

.full-screen-search__btn:hover .icon { transform: scale(1.1); }

@media (prefers-reduced-motion: no-preference) { .modal--search .full-screen-search__input { transition: background-size 0.4s var(--ease-out); }
  .modal--search .full-screen-search__btn { transform: translateY(-30%) scale(0.6); opacity: 0; transition: opacity 0.4s, transform 0.4s var(--ease-out); }
  .modal--search.modal--is-visible .full-screen-search__btn { transform: translateY(-50%) scale(1); opacity: 1; } }

/* --------------------------------

File#: _1_accordion
Title: Accordion
Descr: Create stacked sections of content and allow the user to expand/collapse them
Usage: codyhouse.co/license

-------------------------------- */
:root { --accordion-border-width: 1px; --accordion-border-color: var(--color-contrast-low); --accordion-icon-size: 1em; --accordion-icon-stroke-width: 2px; }

.accordion__item + .accordion__item { border-style: solid; border-color: var(--accordion-border-color); border-top-width: var(--accordion-border-width); }

.accordion__header { width: 100%; display: flex; align-items: center; justify-content: space-between; text-align: left; cursor: pointer; }

.accordion__header:active, .accordion__header:focus { background: white; }

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

.accordion__header .icon { font-size: var(--accordion-icon-size); }

.accordion__header .icon .icon__group { stroke-width: var(--accordion-icon-stroke-width); }

.accordion__icon-arrow .icon__group, .accordion__icon-arrow-v2 .icon__group, .accordion__icon-plus .icon__group { will-change: transform; transform-origin: 8px 8px; }

.accordion__icon-arrow .icon__group > *, .accordion__icon-arrow-v2 .icon__group > *, .accordion__icon-plus .icon__group > * { transform-origin: 8px 8px; }

.accordion__icon-arrow .icon__group, .accordion__icon-arrow-v2 .icon__group { transform: rotate(-90deg); }

.accordion__icon-arrow .icon__group > *, .accordion__icon-arrow-v2 .icon__group > * { stroke-dasharray: 17; transform: translateY(3px); }

.accordion__icon-arrow .icon__group > *:first-child, .accordion__icon-arrow-v2 .icon__group > *:first-child { stroke-dashoffset: 8.5; }

.accordion__icon-arrow .icon__group > *:last-child, .accordion__icon-arrow-v2 .icon__group > *:last-child { stroke-dashoffset: 8.5; }

.accordion__icon-plus .icon__group { transform: rotate(-90deg); }

.accordion__icon-plus .icon__group > *:first-child { transform: rotate(-90deg); }

.accordion__item--is-open > .accordion__header > .accordion__icon-arrow .icon__group > *:first-child { transform: translateY(-3px) rotate(-90deg); }

.accordion__item--is-open > .accordion__header > .accordion__icon-arrow .icon__group > *:last-child { transform: translateY(-3px) rotate(90deg); }

.accordion__item--is-open > .accordion__header > .accordion__icon-arrow-v2 .icon__group { transform: rotate(90deg); }

.accordion__item--is-open > .accordion__header > .accordion__icon-arrow-v2 .icon__group > *:first-child, .accordion__item--is-open > .accordion__header > .accordion__icon-arrow-v2 .icon__group *:last-child { stroke-dashoffset: 0; transform: translateY(0px); }

.accordion__item--is-open > .accordion__header > .accordion__icon-plus .icon__group { transform: rotate(0); }

.accordion__item--is-open > .accordion__header > .accordion__icon-plus .icon__group > *:first-child { transform: rotate(0); }

.js .accordion__panel { display: none; will-change: height; transform: translateZ(0px); }

.js .accordion__item--is-open > .accordion__panel { display: block; }

.accordion[data-animation='on'] .accordion__item--is-open .accordion__panel > * { -webkit-animation: accordion-entry-animation 0.4s var(--ease-out); animation: accordion-entry-animation 0.4s var(--ease-out); }

.accordion[data-animation='on'] .accordion__icon-arrow .icon__group, .accordion[data-animation='on'] .accordion__icon-arrow-v2 .icon__group, .accordion[data-animation='on'] .accordion__icon-plus .icon__group { transition: transform 0.3s var(--ease-out); }

.accordion[data-animation='on'] .accordion__icon-arrow .icon__group > *, .accordion[data-animation='on'] .accordion__icon-arrow-v2 .icon__group > *, .accordion[data-animation='on'] .accordion__icon-plus .icon__group > * { transition: transform .3s, stroke-dashoffset .3s; transition-timing-function: var(--ease-out); }

@-webkit-keyframes accordion-entry-animation { from { opacity: 0;
    transform: translateY(-10px); }
  to { opacity: 1;
    transform: translateY(0px); } }

@keyframes accordion-entry-animation { from { opacity: 0;
    transform: translateY(-10px); }
  to { opacity: 1;
    transform: translateY(0px); } }

/* --------------------------------

File#: _1_anim-menu-btn
Title: Animated Menu Button
Descr: A menu button w/ a morphing icon
Usage: codyhouse.co/license

-------------------------------- */
:root { --anim-menu-btn-size: 48px; --anim-menu-btn-transition-duration: .2s; --anim-menu-btn-icon-size: 32px; --anim-menu-btn-icon-stroke: 2px; }

.anim-menu-btn { display: flex; justify-content: center; align-items: center; width: var(--anim-menu-btn-size); height: var(--anim-menu-btn-size); }

.anim-menu-btn__icon { position: relative; display: block; font-size: var(--anim-menu-btn-icon-size); width: 1em; height: var(--anim-menu-btn-icon-stroke); color: inherit; background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; transform: scale(1); }

.anim-menu-btn__icon::before, .anim-menu-btn__icon::after { content: ''; position: absolute; top: 0; left: 0; height: 100%; width: 100%; background-image: inherit; border-radius: inherit; }

.anim-menu-btn__icon--close { background-size: 100% 100%; will-change: transform, background-size; transition-property: transform, background-size; transition-duration: var(--anim-menu-btn-transition-duration, 0.2s); }

.anim-menu-btn:active .anim-menu-btn__icon--close { transform: scale(0.9); }

.anim-menu-btn__icon--close::before, .anim-menu-btn__icon--close::after { will-change: inherit; transition: inherit; }

.anim-menu-btn__icon--close::before { transform: translateY(-0.25em) rotate(0); }

.anim-menu-btn__icon--close::after { transform: translateY(0.25em) rotate(0); }

.anim-menu-btn--state-b .anim-menu-btn__icon--close { background-size: 0% 100%; }

.anim-menu-btn--state-b .anim-menu-btn__icon--close::before { transform: translateY(0) rotate(45deg); }

.anim-menu-btn--state-b .anim-menu-btn__icon--close::after { transform: translateY(0) rotate(-45deg); }

.anim-menu-btn__icon--arrow-left, .anim-menu-btn__icon--arrow-right, .anim-menu-btn__icon--arrow-up, .anim-menu-btn__icon--arrow-down { border-radius: 50em; will-change: transform; transition-property: transform; transition-duration: var(--anim-menu-btn-transition-duration, 0.2s); }

.anim-menu-btn:active .anim-menu-btn__icon--arrow-left, .anim-menu-btn:active .anim-menu-btn__icon--arrow-right, .anim-menu-btn:active .anim-menu-btn__icon--arrow-up, .anim-menu-btn:active .anim-menu-btn__icon--arrow-down { transform: scale(0.9); }

.anim-menu-btn__icon--arrow-left::before, .anim-menu-btn__icon--arrow-left::after, .anim-menu-btn__icon--arrow-right::before, .anim-menu-btn__icon--arrow-right::after, .anim-menu-btn__icon--arrow-up::before, .anim-menu-btn__icon--arrow-up::after, .anim-menu-btn__icon--arrow-down::before, .anim-menu-btn__icon--arrow-down::after { transform-origin: calc(var(--anim-menu-btn-icon-stroke)/2) 50%; will-change: transform, width; transition-property: transform, width; transition-duration: var(--anim-menu-btn-transition-duration, 0.2s); }

.anim-menu-btn__icon--arrow-left::before, .anim-menu-btn__icon--arrow-right::before, .anim-menu-btn__icon--arrow-up::before, .anim-menu-btn__icon--arrow-down::before { transform: translateY(-0.25em) rotate(0); }

.anim-menu-btn__icon--arrow-left::after, .anim-menu-btn__icon--arrow-right::after, .anim-menu-btn__icon--arrow-up::after, .anim-menu-btn__icon--arrow-down::after { transform: translateY(0.25em) rotate(0); }

.anim-menu-btn__icon--arrow-right { transform: rotate(180deg); }

.anim-menu-btn:active .anim-menu-btn__icon--arrow-right { transform: rotate(180deg) scale(0.9); }

.anim-menu-btn--state-b .anim-menu-btn__icon--arrow-left::before, .anim-menu-btn--state-b .anim-menu-btn__icon--arrow-left::after, .anim-menu-btn--state-b .anim-menu-btn__icon--arrow-right::before, .anim-menu-btn--state-b .anim-menu-btn__icon--arrow-right::after, .anim-menu-btn--state-b .anim-menu-btn__icon--arrow-up::before, .anim-menu-btn--state-b .anim-menu-btn__icon--arrow-up::after, .anim-menu-btn--state-b .anim-menu-btn__icon--arrow-down::before, .anim-menu-btn--state-b .anim-menu-btn__icon--arrow-down::after { width: 50%; }

.anim-menu-btn--state-b .anim-menu-btn__icon--arrow-left::before, .anim-menu-btn--state-b .anim-menu-btn__icon--arrow-right::before, .anim-menu-btn--state-b .anim-menu-btn__icon--arrow-up::before, .anim-menu-btn--state-b .anim-menu-btn__icon--arrow-down::before { transform: translateY(0) rotate(-45deg); }

.anim-menu-btn--state-b .anim-menu-btn__icon--arrow-left::after, .anim-menu-btn--state-b .anim-menu-btn__icon--arrow-right::after, .anim-menu-btn--state-b .anim-menu-btn__icon--arrow-up::after, .anim-menu-btn--state-b .anim-menu-btn__icon--arrow-down::after { transform: translateY(0) rotate(45deg); }

.anim-menu-btn--state-b:active .anim-menu-btn__icon--arrow-up { transform: rotate(90deg) scale(0.9); }

.anim-menu-btn--state-b .anim-menu-btn__icon--arrow-up { transform: rotate(90deg); }

.anim-menu-btn--state-b:active .anim-menu-btn__icon--arrow-down { transform: rotate(-90deg) scale(0.9); }

.anim-menu-btn--state-b .anim-menu-btn__icon--arrow-down { transform: rotate(-90deg); }

/* --------------------------------

File#: _1_back-to-top
Title: Back to top
Descr: Component that triggers scroll-y to the top of the page
Usage: codyhouse.co/license

-------------------------------- */
:root { /* style */ --btt-icon-size: 1.25em; }

.back-to-top { position: fixed; right: var(--space-md); bottom: var(--space-md); padding: var(--space-xs); z-index: var(--zindex-fixed-element); border-radius: 50em; background-color: var(--color-brand-primary); transition: 0.3s; opacity: 0.8 .back-to-top; }

.back-to-top :hover { background-color: var(--color-brand-primary); }

.back-to-top .icon { display: block; color: var(--color-bg); width: var(--btt-icon-size); height: var(--btt-icon-size); }

.js .back-to-top { visibility: hidden; opacity: 0; }

.js .back-to-top--is-visible { visibility: visible; opacity: 1; }

/* --------------------------------

File#: _1_bg-gradients
Title: Background Gradients
Descr: Customizable background gradients
Usage: codyhouse.co/license

-------------------------------- */
.bg-gradient-1, .bg-gradient-2, .bg-gradient-3, .bg-gradient-4, .bg-gradient-5 { background-repeat: no-repeat; background-position: center; }

@media (prefers-reduced-motion: no-preference) { .bg-gradient-1[data-bg-animate='on'], .bg-gradient-2[data-bg-animate='on'], .bg-gradient-3[data-bg-animate='on'], .bg-gradient-4[data-bg-animate='on'], .bg-gradient-5[data-bg-animate='on'] { will-change: background-position; } }

.bg-gradient-1 { --bg-gradient-stop-1: var(--color-brand-light); --bg-gradient-stop-2: var(--color-brand); --bg-gradient-stop-3: var(--color-brand-dark); background-color: var(--bg-gradient-stop-1); background-image: radial-gradient(ellipse at 80% 40%, var(--bg-gradient-stop-1) 0%, transparent 40%), radial-gradient(ellipse at 60% 0%, var(--bg-gradient-stop-2) 0%, transparent 40%), radial-gradient(ellipse at 20% 10%, var(--bg-gradient-stop-3) 20%, transparent 60%), radial-gradient(ellipse at 40% 100%, var(--bg-gradient-stop-2) 0%, transparent 40%); background-size: 400% 200%; }

@media (prefers-reduced-motion: no-preference) { .bg-gradient-1[data-bg-animate='on'] { background-size: 400% 200%; background-position: 0 0; -webkit-animation: bg-gradient-anim-1 30s linear infinite; animation: bg-gradient-anim-1 30s linear infinite; } }

@-webkit-keyframes bg-gradient-anim-1 { 0%, 100% { background-position: 0 0; }
  25% { background-position: 100% 100%; }
  50% { background-position: 100% 0; }
  75% { background-position: 0 100%; } }

@keyframes bg-gradient-anim-1 { 0%, 100% { background-position: 0 0; }
  25% { background-position: 100% 100%; }
  50% { background-position: 100% 0; }
  75% { background-position: 0 100%; } }

.bg-gradient-2 { --bg-gradient-stop-1: #00CC33; --bg-gradient-stop-2: #00BB88; --bg-gradient-stop-3: #00AABB; background-color: var(--bg-gradient-stop-1); background-image: radial-gradient(ellipse at 10% 20%, var(--bg-gradient-stop-2) 0%, transparent 40%), radial-gradient(ellipse at 50% 0%, var(--bg-gradient-stop-1) 25%, transparent 75%), radial-gradient(ellipse at 100% 100%, var(--bg-gradient-stop-3) 35%, transparent 70%), radial-gradient(ellipse at 50% 100%, var(--bg-gradient-stop-1) 20%, transparent 70%); background-size: 120% 200%; }

@media (prefers-reduced-motion: no-preference) { .bg-gradient-2[data-bg-animate='on'] { background-size: 240% 400%; background-position: 0 0; -webkit-animation: bg-gradient-anim-2 30s linear infinite; animation: bg-gradient-anim-2 30s linear infinite; } }

@-webkit-keyframes bg-gradient-anim-2 { 0%, 100% { background-position: 0 0; }
  25% { background-position: 100% 100%; }
  50% { background-position: 100% 0; }
  75% { background-position: 0 100%; } }

@keyframes bg-gradient-anim-2 { 0%, 100% { background-position: 0 0; }
  25% { background-position: 100% 100%; }
  50% { background-position: 100% 0; }
  75% { background-position: 0 100%; } }

.bg-gradient-3 { --bg-gradient-stop-1: #00CC33; --bg-gradient-stop-2: #00C04B; --bg-gradient-stop-3: #00BB88; --bg-gradient-stop-4: #00AABB; background-color: var(--bg-gradient-stop-1); background-image: radial-gradient(ellipse at 25% 90%, var(--bg-gradient-stop-4) 10%, transparent 70%), radial-gradient(ellipse at 55% 90%, var(--bg-gradient-stop-2) 0%, transparent 70%), radial-gradient(ellipse at 100% 100%, var(--bg-gradient-stop-3) 5%, transparent 60%), radial-gradient(ellipse at 0% 0%, var(--bg-gradient-stop-4) 15%, transparent 50%), radial-gradient(ellipse at 100% 0%, var(--bg-gradient-stop-2) 30%, transparent 70%); background-size: 100% 140%; }

@media (prefers-reduced-motion: no-preference) { .bg-gradient-3[data-bg-animate='on'] { background-size: 200% 280%; background-position: 50% 0; -webkit-animation: bg-gradient-anim-3 30s linear infinite; animation: bg-gradient-anim-3 30s linear infinite; } }

@-webkit-keyframes bg-gradient-anim-3 { 0%, 100% { background-position: 0 0; }
  33% { background-position: 100% 0; }
  66% { background-position: 100% 100%; } }

@keyframes bg-gradient-anim-3 { 0%, 100% { background-position: 0 0; }
  33% { background-position: 100% 0; }
  66% { background-position: 100% 100%; } }

.bg-gradient-4 { --bg-gradient-stop-1: #1d1128; --bg-gradient-stop-2: hsla(257, 62%, 32%, .7); --bg-gradient-stop-3: hsla(347, 83%, 60%, .5); --bg-gradient-stop-4: hsla(175, 51%, 48%, .15); background-color: var(--bg-gradient-stop-1); background-image: radial-gradient(ellipse at 70% 0%, var(--bg-gradient-stop-2) 0%, transparent 30%), radial-gradient(circle at 90% 0%, var(--bg-gradient-stop-3) 0%, transparent 30%), radial-gradient(ellipse at 0% 0%, var(--bg-gradient-stop-4) 0%, transparent 40%), radial-gradient(circle at 30% 100%, var(--bg-gradient-stop-2) 0%, transparent 40%), radial-gradient(ellipse at 10% 100%, var(--bg-gradient-stop-3) 0%, transparent 40%), radial-gradient(ellipse at 100% 100%, var(--bg-gradient-stop-4) 0%, transparent 40%); }

@media (prefers-reduced-motion: no-preference) { .bg-gradient-4[data-bg-animate='on'] { background-size: 200% 200%; background-position: 0 0; -webkit-animation: bg-gradient-anim-4 30s linear infinite; animation: bg-gradient-anim-4 30s linear infinite; } }

@-webkit-keyframes bg-gradient-anim-4 { 0%, 100% { background-position: 0 0; }
  25% { background-position: 100% 0; }
  50% { background-position: 100% 100%; }
  75% { background-position: 0 100%; } }

@keyframes bg-gradient-anim-4 { 0%, 100% { background-position: 0 0; }
  25% { background-position: 100% 0; }
  50% { background-position: 100% 100%; }
  75% { background-position: 0 100%; } }

.bg-gradient-5 { --bg-gradient-stop-1: #e6e5f7; --bg-gradient-stop-2: hsla(333, 69%, 62%, .35); --bg-gradient-stop-3: hsla(299, 75%, 30%, .32); background-color: var(--bg-gradient-stop-1); background-image: radial-gradient(ellipse at 50% 0%, var(--bg-gradient-stop-2) 0%, transparent 30%), radial-gradient(ellipse at 100% 0%, var(--bg-gradient-stop-3) 0%, transparent 60%); background-size: 200% 100%; }

@media (prefers-reduced-motion: no-preference) { .bg-gradient-5[data-bg-animate='on'] { background-size: 400% 200%; background-position: 0 0; -webkit-animation: bg-gradient-anim-5 20s linear infinite; animation: bg-gradient-anim-5 20s linear infinite; } }

@-webkit-keyframes bg-gradient-anim-5 { 0%, 100% { background-position: 0 0; }
  40%, 60% { background-position: 100% 0; } }

@keyframes bg-gradient-anim-5 { 0%, 100% { background-position: 0 0; }
  40%, 60% { background-position: 100% 0; } }

/* --------------------------------

File#: _1_btns
Title: Buttons (Group)
Descr: Group of connected buttons
Usage: codyhouse.co/license

-------------------------------- */
:root { --btns-button-radius: 0.25em; --btns-button-padding-x: var(--space-sm); --btns-button-padding-y: var(--space-sm); }

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

.btns > * { display: inline-block; }

.btns > *:first-child, .btns *:first-child .btns__btn { border-radius: var(--btns-button-radius) 0 0 var(--btns-button-radius); }

.btns > *:last-child, .btns *:last-child .btns__btn { border-radius: 0 var(--btns-button-radius) var(--btns-button-radius) 0; }

.btns[class*="gap-xxxxs"], .btns[class*="gap-xxxs"], .btns[class*="gap-xxs"], .btns[class*="gap-xs"], .btns[class*="gap-sm"], .btns[class*="gap-md"], .btns[class*="gap-lg"], .btns[class*="gap-xl"], .btns[class*="gap-xxl"], .btns[class*="gap-xxxl"], .btns[class*="gap-xxxxl"] { flex-wrap: wrap; }

.btns[class*="gap-xxxxs"] .btns__btn, .btns[class*="gap-xxxs"] .btns__btn, .btns[class*="gap-xxs"] .btns__btn, .btns[class*="gap-xs"] .btns__btn, .btns[class*="gap-sm"] .btns__btn, .btns[class*="gap-md"] .btns__btn, .btns[class*="gap-lg"] .btns__btn, .btns[class*="gap-xl"] .btns__btn, .btns[class*="gap-xxl"] .btns__btn, .btns[class*="gap-xxxl"] .btns__btn, .btns[class*="gap-xxxxl"] .btns__btn { border-radius: var(--btns-button-radius) !important; }

.btns__btn { background-color: transparent; padding: 0; border: 0; border-radius: 0; color: inherit; line-height: inherit; -webkit-appearance: none; -moz-appearance: none; appearance: none; display: block; display: flex; justify-content: center; align-items: center; position: relative; padding: var(--space-xs) var(--space-sm); background-color: var(--color-contrast-lower); transition: .2s; cursor: pointer; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

.btns__btn:hover:not(.btns__btn--selected) { background-color: hsl(var(--color-contrast-lower-h), var(--color-contrast-lower-s), calc(var(--color-contrast-lower-l) * 0.98)); }

.btns__btn:focus { z-index: 1; outline: none; box-shadow: 0 0 0 2px hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.2); }

.btns__btn--selected, .btns--radio input[type="radio"]:checked + label, .btns--radio input[type="checkbox"]:checked + label, .btns--checkbox input[type="radio"]:checked + label, .btns--checkbox input[type="checkbox"]:checked + label { background-color: var(--color-contrast-higher); color: var(--color-bg); box-shadow: var(--shadow-sm); }

.btns__btn--disabled { opacity: 0.7; cursor: not-allowed; text-decoration: line-through; }

.btns--radio > *, .btns--checkbox > * { position: relative; }

.btns--radio input[type="radio"], .btns--radio input[type="checkbox"], .btns--checkbox input[type="radio"], .btns--checkbox input[type="checkbox"] { /* hide native buttons */ position: absolute; left: 0; top: 0; margin: 0; padding: 0; opacity: 0; height: 0; width: 0; pointer-events: none; }

.btns--radio input[type="radio"] + label, .btns--radio input[type="checkbox"] + label, .btns--checkbox input[type="radio"] + label, .btns--checkbox input[type="checkbox"] + label { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

.btns--radio input[type="radio"]:focus + label, .btns--radio input[type="checkbox"]:focus + label, .btns--checkbox input[type="radio"]:focus + label, .btns--checkbox input[type="checkbox"]:focus + label { z-index: 1; box-shadow: 0 0 0 2px hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.2); }

.btns--radio input[type="radio"]:checked + label, .btns--radio input[type="checkbox"]:checked + label, .btns--checkbox input[type="radio"]:checked + label, .btns--checkbox input[type="checkbox"]:checked + label { /* checked state */ }

.btns__btn--icon { padding: var(--btns-button-padding-x); }

.btns__btn--icon .icon { display: block; color: inherit; }

/* --------------------------------

File#: _1_code-snippet
Title: Code Snippet
Descr: A block of preformatted text, containing computer code
Usage: codyhouse.co/license

-------------------------------- */
.code-snippet { background: var(--color-contrast-higher); border-radius: var(--radius-lg); display: flex; padding: var(--space-sm); margin: 0; font-weight: var(--font-regular); }

.code-snippet code { background-color: transparent; font-size: .75rem; line-height: 1.3; display: block; padding: 0; overflow-x: auto; font-family: var(--font-tertiary); margin: calc(var(--space-xxs) * -1); border-radius: var(--radius-md); text-shadow: 0 0 1px hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0.3); font-weight: inherit; }

.code-snippet *::-moz-selection { background-color: rgba(50, 150, 205, 0.3) !important; }

.code-snippet *::selection { background-color: rgba(50, 150, 205, 0.3) !important; }

/* --------------------------------

File#: _1_dialog
Title: Dialog
Descr: Overlay informing user about tasks/decisions
Usage: codyhouse.co/license

-------------------------------- */
.dialog { position: fixed; width: 100%; height: 100%; top: 0; left: 0; display: flex; justify-content: center; align-items: center; z-index: var(--zindex-overlay); opacity: 0; visibility: hidden; }

.dialog__content { width: calc(100% - 2 * var(--space-md)); overflow: auto; padding: var(--space-md); background-color: var(--color-bg); box-shadow: var(--shadow-lg); border-radius: var(--radius-md); }

.dialog--is-visible { opacity: 1; visibility: visible; }

.dialog--sticky { align-items: flex-start; }

.dialog--sticky .dialog__content { border-top-left-radius: 0; border-top-right-radius: 0; }

.dialog[data-animation="on"] { transition: opacity 0.3s, visibility 0s 0.3s; perspective: 800; }

.dialog[data-animation="on"] .dialog__content { will-change: transform; transition: transform 0.3s var(--ease-out); transform: translateY(10%); }

.dialog[data-animation="on"].dialog--is-visible { transition: opacity 0.3s; }

.dialog[data-animation="on"].dialog--is-visible .dialog__content { transform: translateY(0); }

.dialog[data-animation="on"].dialog--sticky .dialog__content { transform: translateY(-100%); }

.dialog[data-animation="on"].dialog--sticky.dialog--is-visible { transition: none; }

.dialog[data-animation="on"].dialog--sticky.dialog--is-visible .dialog__content { transform: translateY(0); }

/* --------------------------------

File#: _1_input-group
Title: Input Group
Descr: A group of connected form elements, distributed on a single row
Usage: codyhouse.co/license

-------------------------------- */
.input-group { display: flex; }

.input-group > * + *:not(:last-child) { border-radius: 0; }

.input-group > *:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }

.input-group > *:last-child { border-top-left-radius: 0; border-bottom-left-radius: 0; }

.input-group > *:focus { position: relative; z-index: 1; }

.input-group__tag { display: inline-block; display: flex; align-items: center; padding: 0 var(--space-sm); background-color: var(--color-contrast-lower); border-radius: var(--radius-md); white-space: nowrap; color: var(--color-contrast-medium); }

/* --------------------------------

File#: _1_link-card
Title: Link Card
Descr: Link card for app UI
Usage: codyhouse.co/license

-------------------------------- */
.link-card { text-decoration: none; color: inherit; box-shadow: var(--shadow-sm); transition: 0.3s; height: 100%; }

.link-card:hover { box-shadow: var(--shadow-lg); color: currentColor; }

.link-card__footer { position: relative; overflow: hidden; height: 60px; }

.link-card__footer > * { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; transition: 0.3s; }

.link-card__footer > *:last-child { transform: translateY(100%); opacity: 0; }

.link-card:hover .link-card__footer > *:first-child { transform: translateY(-100%); opacity: 0; }

.link-card:hover .link-card__footer > *:last-child { transform: translateY(0); opacity: 1; }

/* --------------------------------

File#: _1_modal-window
Title: Modal Window
Descr: A modal dialog used to display critical information
Usage: codyhouse.co/license

-------------------------------- */
.modal { position: fixed; z-index: var(--zindex-overlay); width: 100%; height: 100%; left: 0; top: 0; opacity: 0; visibility: hidden; }

.modal:not(.modal--is-visible) { pointer-events: none; background-color: transparent; }

.modal--is-visible { opacity: 1; visibility: visible; }

.modal__content { overflow: auto; -webkit-overflow-scrolling: touch; max-height: 100%; }

.modal__close-btn { display: flex; flex-shrink: 0; border-radius: 50%; transition: .2s; }

.modal__close-btn .icon { display: block; margin: auto; }

.modal__close-btn--outer { width: 48px; height: 48px; position: fixed; top: var(--space-sm); right: var(--space-sm); z-index: var(--zindex-fixed-element); background-color: hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 0.8); }

.modal__close-btn--outer:hover { background-color: var(--color-contrast-higher); }

.modal__close-btn--outer .icon { color: var(--color-bg); }

.modal__close-btn--inner { width: 2em; height: 2em; background-color: var(--color-bg); box-shadow: var(--shadow-sm); }

.modal__close-btn--inner .icon { color: inherit; }

.modal__close-btn--inner:hover { box-shadow: var(--shadow-md); }

:root { --modal-transition-duration: 0.2s; }

@media (prefers-reduced-motion: no-preference) { .modal--animate-fade { --modal-transition-duration: 0.2s; transition: opacity var(--modal-transition-duration), background-color var(--modal-transition-duration), visibility 0s var(--modal-transition-duration); }
  .modal--animate-fade.modal--is-visible { transition: opacity var(--modal-transition-duration), background-color var(--modal-transition-duration), visibility 0s; }
  .modal--animate-scale, .modal--animate-translate-up, .modal--animate-translate-down, .modal--animate-translate-right, .modal--animate-translate-left { --modal-transition-duration: 0.2s; transition: opacity var(--modal-transition-duration), visibility 0s var(--modal-transition-duration); }
  .modal--animate-scale .modal__content, .modal--animate-translate-up .modal__content, .modal--animate-translate-down .modal__content, .modal--animate-translate-right .modal__content, .modal--animate-translate-left .modal__content { will-change: transform; transition: transform var(--modal-transition-duration) var(--ease-out); }
  .modal--animate-scale.modal--is-visible, .modal--animate-translate-up.modal--is-visible, .modal--animate-translate-down.modal--is-visible, .modal--animate-translate-right.modal--is-visible, .modal--animate-translate-left.modal--is-visible { transition: opacity var(--modal-transition-duration), visibility 0s; }
  .modal--animate-scale.modal--is-visible .modal__content, .modal--animate-translate-up.modal--is-visible .modal__content, .modal--animate-translate-down.modal--is-visible .modal__content, .modal--animate-translate-right.modal--is-visible .modal__content, .modal--animate-translate-left.modal--is-visible .modal__content { transform: scale(1); }
  .modal--animate-slide-up, .modal--animate-slide-down, .modal--animate-slide-right, .modal--animate-slide-left { --modal-transition-duration: 0.3s; transition: opacity 0s var(--modal-transition-duration), background-color var(--modal-transition-duration), visibility 0s var(--modal-transition-duration); }
  .modal--animate-slide-up .modal__content, .modal--animate-slide-down .modal__content, .modal--animate-slide-right .modal__content, .modal--animate-slide-left .modal__content { will-change: transform; transition: transform var(--modal-transition-duration) var(--ease-out); }
  .modal--animate-slide-up.modal--is-visible, .modal--animate-slide-down.modal--is-visible, .modal--animate-slide-right.modal--is-visible, .modal--animate-slide-left.modal--is-visible { transition: background-color var(--modal-transition-duration), visibility 0s; }
  .modal--animate-slide-up.modal--is-visible .modal__content, .modal--animate-slide-down.modal--is-visible .modal__content, .modal--animate-slide-right.modal--is-visible .modal__content, .modal--animate-slide-left.modal--is-visible .modal__content { transform: scale(1); }
  .modal--animate-scale .modal__content { transform: scale(0.95); }
  .modal--animate-translate-up .modal__content { transform: translateY(40px); }
  .modal--animate-translate-down .modal__content { transform: translateY(-40px); }
  .modal--animate-translate-right .modal__content { transform: translateX(-40px); }
  .modal--animate-translate-left .modal__content { transform: translateX(40px); }
  .modal--animate-slide-up .modal__content { transform: translateY(100%); }
  .modal--animate-slide-down .modal__content { transform: translateY(-100%); }
  .modal--animate-slide-right .modal__content { transform: translateX(-100%); }
  .modal--animate-slide-left .modal__content { transform: translateX(100%); } }

.modal--is-loading .modal__content { visibility: hidden; }

.modal--is-loading .modal__loader { display: flex; }

.modal__loader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; justify-content: center; align-items: center; display: none; pointer-events: none; }

/** /* -------------------------------- File#: _1_radios-checkboxes Title: Radios and Checkboxes Descr: Custom radio and checkbox buttons -------------------------------- */
:root { --checkbox-radio-size: 1.125rem; --checkbox-radio-translate-y: .15em; --checkbox-radio-gap: var(--space-xxxs); --checkbox-radio-border-width: 2px; --checkbox-radio-line-height: var(--body-line-height); --radio-marker-size: 8px; --checkbox-marker-size: 18px; --checkbox-radius: 2px; }

.radio, .checkbox { position: absolute; margin: 0 !important; padding: 0 !important; opacity: 0; height: 0; width: 0; pointer-events: none; transition: .2s; }

.radio + label, .checkbox + label { display: inline-block; display: inline-flex; align-items: baseline; line-height: var(--checkbox-radio-line-height); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: pointer; }

.radio + label::before, .checkbox + label::before { content: ''; display: inline-block; vertical-align: middle; flex-shrink: 0; width: var(--checkbox-radio-size); height: var(--checkbox-radio-size); background-color: var(--color-bg); border-width: var(--checkbox-radio-border-width); border-color: var(--color-contrast-medium); border-style: solid; margin-right: var(--checkbox-radio-gap); background-repeat: no-repeat; background-position: center; transition: transform .2s, border .2s; opacity: .5; }

.checkbox + label::before { height: 18px; width: 18px; }

.checkbox + label span { padding-left: 4px; }

.radio:not(:checked):not(:focus) + label:hover::before, .checkbox:not(:checked):not(:focus) + label:hover::before { border-color: var(--color-contrast-high); }

@supports (grid-area: auto) { .radio + label::before, .checkbox + label::before { position: relative; top: var(--checkbox-radio-translate-y); } }

.radio + label::before { border-radius: 50%; }

.checkbox + label::before { border-radius: var(--checkbox-radius); }

.radio:checked + label::before, .checkbox:checked + label::before { background-color: var(--color-brand); box-shadow: none; border-color: var(--color-brand); transition: transform .2s; opacity: 1; }

.radio:active + label::before, .checkbox:active + label::before { transform: scale(0.8); transition: transform .2s; }

.radio:checked:active + label::before, .checkbox:checked:active + label::before { transform: none; transition: none; }

.radio:checked + label::before { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg class='nc-icon-wrapper' fill='%23ffffff'%3E%3Ccircle cx='8' cy='8' r='8' fill='%23ffffff'%3E%3C/circle%3E%3C/g%3E%3C/svg%3E"); background-size: var(--radio-marker-size); }

.checkbox:checked + label::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon' viewbox='0 0 18 18'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='2' d='M2 8l4 4 8-8'/%3E%3C/svg%3E"); background-size: var(--checkbox-marker-size); background-position-y: -1px; background-position-x: -1px; }

.radio:checked:active + label::before, .checkbox:checked:active + label::before, .radio:focus + label::before, .checkbox:focus + label::before { border-color: var(--color-brand); box-shadow: 0 0 0 3px hsla(var(--color-brand-h), var(--color-brand-s), var(--color-brand-l), 0.2); opacity: 1; }

.radio--bg + label, .checkbox--bg + label { padding: var(--space-xxxxs) var(--space-xxxs); border-radius: var(--radius-md); transition: background .2s; }

.radio--bg + label:hover, .checkbox--bg + label:hover { background-color: var(--color-contrast-lower); }

.radio--bg:active + label, .checkbox--bg:active + label, .radio--bg:focus + label, .checkbox--bg:focus + label { background-color: hsla(var(--color-brand-h), var(--color-brand-s), var(--color-brand-l), 0.1); }

/* --------------------------------

File#: _1_row-table
Title: Row Oriented Table
Descr: Data tables used to organize information, with a specific layout for cases where each row is a meaningful unit
Usage: codyhouse.co/license

-------------------------------- */
.row-table { position: relative; z-index: 1; }

.row-table__cell { padding: var(--space-sm); }

.row-table__cell--th { font-weight: bold; color: var(--color-contrast-higher); }

.row-table__list { display: none; }

.row-table:not(.row-table--collapsed) { border-bottom: 2px solid var(--color-contrast-low); }

.row-table:not(.row-table--collapsed) .row-table__header .row-table__row { background-color: var(--color-bg); }

.row-table:not(.row-table--collapsed) .row-table__header .row-table__cell { position: relative; background-color: inherit; box-shadow: 0 2px 0 var(--color-contrast-low); z-index: 10; }

.row-table:not(.row-table--collapsed) .row-table__header--sticky .row-table__cell { position: -webkit-sticky; position: sticky; top: 0; }

.row-table:not(.row-table--collapsed) .row-table__body .row-table__row:nth-child(odd) { background-color: var(--color-contrast-lower); }

.row-table:not(.row-table--collapsed) .row-table__input { display: none; }

.row-table--collapsed { border-collapse: separate; border-spacing: 0 var(--space-xxs); margin-top: calc(-2 * var(--space-xxs)); }

.row-table--collapsed .row-table__header, .row-table--collapsed .row-table__cell:not(:first-child) { position: absolute; top: 0; left: 0; clip: rect(1px, 1px, 1px, 1px); -webkit-clip-path: inset(50%); clip-path: inset(50%); width: 1px; height: 1px; padding: 0; }

.row-table--collapsed .row-table__cell:first-child { position: relative; background-color: var(--color-contrast-lower); border-radius: var(--radius-md); width: 100%; }

.row-table--collapsed .row-table__th-inner { font-size: var(--text-md); display: flex; align-items: center; justify-content: space-between; }

.row-table--collapsed .row-table__th-icon { position: relative; height: 24px; width: 24px; --row-table-arrow-width: 2px; }

.row-table--collapsed .row-table__th-icon::before, .row-table--collapsed .row-table__th-icon::after { content: ''; position: absolute; top: calc(50% - 6px); width: var(--row-table-arrow-width); height: 12px; background-color: currentColor; transform-origin: 50% 100%; transition: transform .3s; }

.row-table--collapsed .row-table__th-icon::before { right: 50%; transform: translateX(50%) rotate(-45deg); }

.row-table--collapsed .row-table__th-icon::after { right: calc(50% + var(--row-table-arrow-width) / 2); transform: translateX(50%) rotate(45deg); }

.row-table--collapsed .row-table__list { margin-top: var(--space-sm); line-height: var(--body-line-height); }

.row-table--collapsed .row-table__item { display: flex; justify-content: space-between; font-weight: normal; color: var(--color-contrast-high); border-top: 1px solid var(--color-contrast-low); text-align: right; padding: var(--space-sm) 0; }

.row-table--collapsed .row-table__label { color: var(--color-contrast-higher); font-weight: bold; margin-right: var(--space-md); text-align: left; }

.row-table--collapsed .row-table__cell--show-list .row-table__th-icon::before { transform: translateX(50%) translateY(-80%) rotate(-135deg); }

.row-table--collapsed .row-table__cell--show-list .row-table__th-icon::after { transform: translateX(50%) translateY(-80%) rotate(135deg); }

.row-table--collapsed .row-table__cell--show-list .row-table__list { display: block; }

.row-table--collapsed .row-table__input { position: absolute; pointer-events: none; height: 0; width: 0; opacity: 0; padding: 0; border: 0; }

.row-table--collapsed .row-table__input:focus + .row-table__th-inner { color: var(--color-primary); }

[class*='row-table--expanded']::before { display: none; content: 'expanded'; }

@media (min-width: 32rem) { .row-table--expanded\@xs::before { content: 'merged'; } }

@media (min-width: 48rem) { .row-table--expanded\@sm::before { content: 'merged'; } }

@media (min-width: 64rem) { .row-table--expanded\@md::before { content: 'merged'; } }

@media (min-width: 80rem) { .row-table--expanded\@lg::before { content: 'merged'; } }

@media (min-width: 90rem) { .row-table--expanded\@xl::before { content: 'merged'; } }

/* --------------------------------

File#: _1_table
Title: Table
Descr: Data tables used to organize and display information in rows and columns
Usage: codyhouse.co/license

-------------------------------- */
.table:not(.table--expanded) { border-collapse: separate; border-spacing: 0 var(--space-md); margin-top: calc(-2 * var(--space-md)); }

.table:not(.table--expanded) .table__header { position: absolute; clip: rect(1px, 1px, 1px, 1px); -webkit-clip-path: inset(50%); clip-path: inset(50%); }

.table:not(.table--expanded) .table__row .table__cell:first-child { border-radius: var(--radius-md) var(--radius-md) 0 0; }

.table:not(.table--expanded) .table__row .table__cell:last-child { border-radius: 0 0 var(--radius-md) var(--radius-md); }

.table:not(.table--expanded) .table__row .table__cell:last-child::after { display: none; }

.table:not(.table--expanded) .table__cell { position: relative; display: flex; justify-content: space-between; width: 100%; text-align: right; padding: var(--space-md); background-color: var(--color-contrast-lower); }

.table:not(.table--expanded) .table__cell::after { content: ""; position: absolute; bottom: 0; left: var(--space-md); width: calc(100% - (2 * var(--space-md))); height: 1px; background-color: var(--color-contrast-low); }

.table:not(.table--expanded) .table__label { font-weight: bold; text-align: left; color: var(--color-contrast-higher); margin-right: var(--space-md); }

.table--expanded { border-bottom: 2px solid var(--color-contrast-low); }

.table--expanded .table__header .table__cell { position: relative; z-index: 10; background-color: var(--color-bg); box-shadow: 0 2px 0 var(--color-contrast-low); font-weight: bold; color: var(--color-contrast-higher); }

.table--expanded .table__body .table__row:nth-child(odd) { background-color: var(--color-contrast-lower); }

.table--expanded .table__cell { padding: var(--space-sm); }

.table--expanded .table__label { display: none; }

.table--expanded .table__header--sticky .table__cell { position: -webkit-sticky; position: sticky; top: 0; }

.js .table { opacity: 0; }

.js .table--loaded { opacity: 1; }

[class*="table--expanded"]::before { display: none; }

.table--expanded\@xs::before { content: "collapsed"; }

@media (min-width: 32rem) { .table--expanded\@xs::before { content: "expanded"; } }

.table--expanded\@sm::before { content: "collapsed"; }

@media (min-width: 48rem) { .table--expanded\@sm::before { content: "expanded"; } }

.table--expanded\@md::before { content: "collapsed"; }

@media (min-width: 64rem) { .table--expanded\@md::before { content: "expanded"; } }

.table--expanded\@lg::before { content: "collapsed"; }

@media (min-width: 80rem) { .table--expanded\@lg::before { content: "expanded"; } }

.table--expanded\@xl::before { content: "collapsed"; }

@media (min-width: 90rem) { .table--expanded\@xl::before { content: "expanded"; } }

/* --------------------------------

File#: _2_carousel
Title: Carousel
Descr: Display and cycle through a collection of items
Usage: codyhouse.co/license

-------------------------------- */
:root { --carousel-grid-gap: var(--space-xs); --carousel-item-auto-size: 260px; --carousel-transition-duration: .5s; }

.carousel { position: relative; }

.carousel__list { display: flex; flex-wrap: nowrap; will-change: transform; }

.carousel__item { flex-shrink: 0; width: var(--carousel-item-auto-size); margin-right: var(--carousel-grid-gap); margin-bottom: var(--carousel-grid-gap); }

.js .carousel__list--animating { transition-property: transform; transition-duration: var(--carousel-transition-duration); transition-timing-function: var(--ease-out); }

.js .carousel__item { opacity: 0; margin-bottom: 0; }

.js .carousel--loaded .carousel__item { opacity: 1; }

.js .carousel:not(.carousel--is-dragging) .carousel__list:not(.carousel__list--animating) .carousel__item[tabindex='-1'] > * { visibility: hidden; }

.js .carousel[data-drag='on'] .carousel__item { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

.js .carousel[data-drag='on'] .carousel__item img { pointer-events: none; }

.carousel__control { display: flex; justify-content: center; align-items: center; width: 40px; height: 40px; background-color: var(--color-bg); border-radius: 50%; z-index: 1; transition: .2s; }

.carousel__control:active { transform: translateY(1px); }

.carousel__control:hover { cursor: pointer; }

.carousel__control[disabled] { pointer-events: none; background-color: var(--color-contrast-lower); color: var(--color-contrast-low); box-shadow: none; }

.carousel__control .icon { display: block; font-size: 20px; }

.carousel__navigation { width: 100%; display: grid; grid-template-columns: repeat(auto-fit, 10px); gap: var(--space-xs); justify-content: center; align-items: center; margin-top: var(--space-sm); }

.carousel__nav-item { display: inline-block; margin: 0 var(--space-xxxs); }

@supports (grid-area: auto) { .carousel__nav-item { margin: 0; } }

.carousel__nav-item button { display: block; position: relative; font-size: 10px; height: 1em; width: 1em; border-radius: 50%; background-color: var(--color-contrast-high); opacity: .4; cursor: pointer; transition: background .3s; }

.carousel__nav-item button::before { content: ''; position: absolute; top: calc(50% - .5em); left: calc(50% - .5em); font-size: 16px; height: 1em; width: 1em; border-radius: inherit; border: 1px solid var(--color-contrast-high); opacity: 0; transform: scale(0); transition: .3s; }

.carousel__nav-item button:focus { outline: none; }

.carousel__nav-item button:focus::before { opacity: 1; transform: scale(1); }

.carousel__nav-item--selected button { opacity: 1; }

.carousel__navigation--pagination { grid-template-columns: repeat(auto-fit, minmax(24px, auto)); }

.carousel__navigation--pagination .carousel__nav-item button { width: 100%; height: auto; color: var(--color-bg); font-size: var(--text-xs); padding: var(--space-xxxs) var(--space-xxs); border-radius: var(--radius-md); text-align: center; }

.carousel__navigation--pagination .carousel__nav-item button:focus { outline: 1px solid var(--color-primary); outline-offset: 2px; }

html:not(.js) .carousel__list { overflow: auto; }

/* --------------------------------

File#: _2_device-group
Title: Device Group
Descr: A group of devices
Usage: codyhouse.co/license

-------------------------------- */
.device-group-1 { position: relative; z-index: 1; display: grid; align-items: center; grid-template-columns: repeat(10, 1fr); }

.device-group-1 > * { position: relative; grid-row: 1 / -1; }

.device-group-1 > *:nth-child(1), .device-group-1 > *:nth-child(3) { z-index: 1; }

.device-group-1 > *:nth-child(1) { grid-column: 1 / 5; }

.device-group-1 > *:nth-child(2) { z-index: 2; grid-column: 4 / 8; }

.device-group-1 > *:nth-child(3) { grid-column: 7 / 11; }

.device-group-1 .dev-phone-3d-wrapper { perspective: 1000px; }

.device-group-1 .dev-phone-3d-wrapper:first-child .dev-phone, .device-group-1 .dev-phone-3d-wrapper:last-child .dev-phone { transition: transform .5s; }

.device-group-1 .dev-phone-3d-wrapper:first-child .dev-phone { transform: rotateY(30deg); transform-origin: left center; }

.device-group-1 .dev-phone-3d-wrapper:last-child .dev-phone { transform: rotateY(-30deg); transform-origin: right center; }

.device-group-1:hover .dev-phone-3d-wrapper:first-child .dev-phone { transform: rotateY(20deg); }

.device-group-1:hover .dev-phone-3d-wrapper:last-child .dev-phone { transform: rotateY(-20deg); }

.device-group-2 { position: relative; z-index: 1; display: grid; align-items: end; grid-template-columns: repeat(12, 1fr); padding-bottom: 2.5%; }

.device-group-2 > * { position: relative; grid-row: 1 / -1; }

.device-group-2 .dev-phone { z-index: 2; grid-column: 1 / 4; bottom: -5%; }

.device-group-2 .dev-laptop { z-index: 1; grid-column: 2 / 13; }

.device-group-3 { position: relative; z-index: 1; display: grid; align-items: end; grid-template-columns: repeat(12, 1fr); padding-bottom: 3.75%; }

.device-group-3 > * { position: relative; grid-row: 1 / -1; }

.device-group-3 .dev-phone { z-index: 2; grid-column: 1 / 4; bottom: -5%; }

.device-group-3 .dev-desktop { z-index: 1; grid-column: 2 / 13; }

.device-group-4 { position: relative; z-index: 1; display: grid; align-items: end; grid-template-columns: repeat(12, 1fr); padding-bottom: 2.75%; }

.device-group-4 > * { position: relative; grid-row: 1 / -1; }

.device-group-4 .dev-phone { z-index: 2; grid-column: 1 / 3; bottom: -5%; }

.device-group-4 .dev-desktop { z-index: 1; grid-column: 2 / 10; }

.device-group-4 .dev-laptop { z-index: 2; bottom: -5%; grid-column: 6 / 13; }

/* --------------------------------

File#: _3_main-header-v2
Title: Main Header v2
Descr: Accessible website navigation w/ sub navigations
Usage: codyhouse.co/license

-------------------------------- */
:root { --header-v2-height: 80px; }

@media (min-width: 80rem) { :root { --header-v2-height: 80px; } }

.header-v2 { width: 100%; }

.header-v2, .header-v2__wrapper { position: relative; z-index: var(--zindex-header); height: var(--header-v2-height); min-height: 80px !important; }

.header-v2__container { display: flex; position: relative; height: 100%; align-items: center; justify-content: space-between; }

.header-v2__logo { flex-shrink: 0; }

.header-v2__logo a, .header-v2__logo svg { display: block; }

.header-v2__nav-control { --anim-menu-btn-size: 40px; --anim-menu-btn-icon-size: 24px; --anim-menu-btn-icon-stroke: 2px; }

.header-v2__nav { top: var(--header-v2-height); left: 0; width: 100%; padding: var(--space-sm) var(--space-md); background-color: var(--color-bg); box-shadow: var(--shadow-md); z-index: var(--zindex-popover); position: absolute; clip: rect(1px, 1px, 1px, 1px); -webkit-clip-path: inset(50%); clip-path: inset(50%); height: 0; overflow: hidden; visibility: hidden; }

.header-v2__nav--is-visible { clip: auto; -webkit-clip-path: none; clip-path: none; height: auto; max-height: calc(100vh - var(--header-v2-height) - var(--space-md)); overflow: auto; -ms-scroll-chaining: none; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; visibility: visible; }

.header-v2__nav-item .btn { width: 100%; font-size: var(--text-md); margin: var(--space-xxs) 0; }

.header-v2__nav-item--main { margin-bottom: var(--space-sm); }

.header-v2__nav-item--label { text-transform: uppercase; font-size: .6em; letter-spacing: .1em; color: var(--color-contrast-medium); padding: var(--space-xxs) 0; }

.header-v2__nav-item--divider { height: 1px; background-color: var(--color-contrast-low); margin: var(--space-md) 0; }

.header-v2__nav-item--search-btn { display: none; }

.header-v2__nav-dropdown-icon { display: none; }

.header-v2__nav-link { display: block; display: flex; align-items: center; padding: var(--space-xs) 0; text-decoration: none; }

.header-v2__nav-dropdown { padding-left: var(--space-sm); }

.header-v2__nav-list--title-desc .header-v2__nav-link { display: flex; }

.header-v2__nav-list--title-desc .header-v2__nav-link .header-v2__nav-icon { margin-right: var(--space-xs); flex-shrink: 0; }

.header-v2__nav-list--title-desc .header-v2__nav-link strong { display: block; }

.header-v2__nav-list--title-desc .header-v2__nav-link small { color: var(--color-contrast-medium); }

.header-v2__nav-list--title-desc .header-v2__nav-link:hover small { color: var(--color-contrast-high); }

.header-v2__nav-col-2 { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: var(--space-sm); }

@media (min-width: 80rem) { .header-v2[data-animation='on'] .header-v2__wrapper--is-fixed { position: fixed; top: calc(-1 * var(--header-v2-height)); left: 0; width: 100%; z-index: var(--zindex-fixed-element); transition: transform .2s; }
  .header-v2[data-animation='on'] .header-v2__wrapper--slides-down { transform: translateY(100%); box-shadow: var(--shadow-sm); }
  .header-v2__nav-control { display: none; }
  .header-v2__logo { margin-right: var(--space-sm); }
  .header-v2__nav { position: static; clip: auto; -webkit-clip-path: none; clip-path: none; height: auto; max-height: none; overflow: visible; -ms-scroll-chaining: chained; overscroll-behavior: auto; visibility: visible; padding: 0; background-color: transparent; border-radius: 0; box-shadow: none; display: flex; justify-content: space-between; }
  .header-v2__nav-list--main { display: flex; align-items: center; }
  .header-v2__nav-item { position: relative; }
  .header-v2__nav-item .btn { width: auto; font-size: 1em; margin: 0; }
  .header-v2__nav-item--main { display: inline-block; margin-bottom: 0; margin-left: var(--space-md); }
  .header-v2__nav-item--main > .header-v2__nav-link { padding: var(--space-xxs) 0; }
  .header-v2__nav-item--main.header-v2__nav-item--divider { margin-top: 0; margin-bottom: 0; margin-right: 0; width: 1px; height: 1em; }
  .header-v2__nav-list--main:last-child { border-top: none; margin-top: 0; padding-top: 0; }
  .header-v2__nav-dropdown-icon { display: block; }
  .header-v2__nav-item--search { display: none; }
  .header-v2__nav-item--search-btn { display: inline-block; }
  .header-v2__nav-item--search-btn button, .header-v2__nav-item--search-btn .icon { display: block; }
  .header-v2__nav-item--search-btn button { width: 24px; height: 24px; display: flex; justify-content: center; align-items: center; transition: opacity .2s; cursor: pointer; }
  .header-v2__nav-item--search-btn button:hover { opacity: .65; }
  .header-v2__nav-dropdown { --space-unit:  1rem; position: absolute; top: 100%; left: calc(50% - 100px); z-index: var(--zindex-popover); width: 200px; background-color: var(--color-bg); box-shadow: var(--shadow-md); padding: var(--space-xs) 0; transition: opacity .2s, visibility .2s; visibility: hidden; opacity: 0; }
  .header-v2__nav-item--main > .header-v2__nav-dropdown { font-size: .9em; }
  .header-v2__nav-dropdown .header-v2__nav-link, .header-v2__nav-dropdown .header-v2__nav-item--label { padding-left: var(--space-sm); padding-right: var(--space-sm); }
  .header-v2__nav-dropdown .header-v2__nav-link:hover, .header-v2__nav-dropdown .header-v2__nav-link--hover { background-color: var(--color-contrast-lower); }
  .header-v2__nav-dropdown .header-v2__nav-dropdown--nested { left: 100%; top: calc(var(--space-xs) * -1); }
  .header-v2__nav-dropdown .header-v2__nav-dropdown--nested-left { left: auto; right: 100%; }
  .header-v2__nav-dropdown .header-v2__nav-item--divider { margin: var(--space-xs) 0; }
  .header-v2__nav-dropdown--sm { width: 200px; left: calc(50% - 100px); }
  .header-v2__nav-dropdown--md { width: 300px; left: calc(50% - 150px); }
  .header-v2__nav-dropdown--lg { width: 480px; left: calc(50% - 240px); }
  .header-v2__nav-list--title-desc .header-v2__nav-link { padding: var(--space-sm) var(--space-md); }
  .header-v2__nav-list--is-visible, .header-v2__nav-item--has-children:hover > .header-v2__nav-dropdown { visibility: visible; opacity: 1; } }

:root, [data-theme="default"] { --carousel-grid-gap: var(--space-xxs); --carousel-item-auto-size: 144px; --header-height: 80px; --header-v2-height: 80px; --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1); --bullet-size: 0.25rem; }

/*# sourceMappingURL=landing.css.map */