/*! purgecss start ignore */
*, *::after, *::before {
    box-sizing: border-box;
}

* {
    font: inherit;
    margin: 0;
    padding: 0;
    border: 0;
}

body {
    background-color: var(--color-bg);
}
body {
    font-size: var(--text-base-size);
    font-family: var(--font-primary);
}
body {
    font-size: var(--text-base-size,1rem);
    font-family: var(--font-primary,sans-serif);
    color: var(--color-contrast-high,hsl(210deg,7%,21%));
    font-weight: var(--body-font-weight,normal);
    min-height: 100vh;
    text-rendering: optimizeSpeed;
    line-height: 1;
    display: grid;
    place-content: center;
    min-height: 90vh;
}

ol, ul, menu {
    list-style: none;
}

blockquote, q {
    quotes: none;
}

button, input, textarea, select, .link, .reset {
    background-color: transparent;
    border-radius: 0;
    color: inherit;
    line-height: inherit;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

a, .link {
    color: var(--color-primary);
}

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

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

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

[data-theme] {
    color: var(--color-contrast-high);
}

:root, [data-theme="default"] {
    /* primary */
    --color-primary-darker-hsl: 250, 84%, 38%;
    --color-primary-darker: hsl(var(--color-primary-darker-hsl));
    --color-primary-dark-hsl: 250, 84%, 46%;
    --color-primary-dark: hsl(var(--color-primary-dark-hsl));
    --color-primary-hsl: 250, 84%, 54%;
    --color-primary: hsl(var(--color-primary-hsl));
    --color-primary-light-hsl: 250, 84%, 60%;
    --color-primary-light: hsl(var(--color-primary-light-hsl));
    --color-primary-lighter-hsl: 250, 84%, 67%;
    --color-primary-lighter: hsl(var(--color-primary-lighter-hsl));
    /* accent */
    --color-accent-darker-hsl: 342, 89%, 38%;
    --color-accent-darker: hsl(var(--color-accent-darker-hsl));
    --color-accent-dark-hsl: 342, 89%, 43%;
    --color-accent-dark: hsl(var(--color-accent-dark-hsl));
    --color-accent-hsl: 342, 89%, 48%;
    --color-accent: hsl(var(--color-accent-hsl));
    --color-accent-light-hsl: 342, 89%, 56%;
    --color-accent-light: hsl(var(--color-accent-light-hsl));
    --color-accent-lighter-hsl: 342, 89%, 62%;
    --color-accent-lighter: hsl(var(--color-accent-lighter-hsl));
    /* secondary */
    --color-secondary-darker-hsl: 28, 45%, 41%;
    --color-secondary-darker: hsl(var(--color-secondary-darker-hsl));
    --color-secondary-dark-hsl: 28, 45%, 48%;
    --color-secondary-dark: hsl(var(--color-secondary-dark-hsl));
    --color-secondary-hsl: 28, 45%, 56%;
    --color-secondary: hsl(var(--color-secondary-hsl));
    --color-secondary-light-hsl: 28, 45%, 63%;
    --color-secondary-light: hsl(var(--color-secondary-light-hsl));
    --color-secondary-lighter-hsl: 28, 45%, 70%;
    --color-secondary-lighter: hsl(var(--color-secondary-lighter-hsl));
    /* black */
    --color-black-hsl: 231, 15%, 9%;
    --color-black: hsl(var(--color-black-hsl));
    /* white */
    --color-white-hsl: 0, 0%, 100%;
    --color-white: hsl(var(--color-white-hsl));
    /* warning */
    --color-warning-darker-hsl: 35, 79%, 48%;
    --color-warning-darker: hsl(var(--color-warning-darker-hsl));
    --color-warning-dark-hsl: 35, 79%, 56%;
    --color-warning-dark: hsl(var(--color-warning-dark-hsl));
    --color-warning-hsl: 35, 79%, 66%;
    --color-warning: hsl(var(--color-warning-hsl));
    --color-warning-light-hsl: 35, 79%, 74%;
    --color-warning-light: hsl(var(--color-warning-light-hsl));
    --color-warning-lighter-hsl: 35, 79%, 82%;
    --color-warning-lighter: hsl(var(--color-warning-lighter-hsl));
    /* success */
    --color-success-darker-hsl: 170, 78%, 26%;
    --color-success-darker: hsl(var(--color-success-darker-hsl));
    --color-success-dark-hsl: 170, 78%, 31%;
    --color-success-dark: hsl(var(--color-success-dark-hsl));
    --color-success-hsl: 170, 78%, 36%;
    --color-success: hsl(var(--color-success-hsl));
    --color-success-light-hsl: 170, 78%, 42%;
    --color-success-light: hsl(var(--color-success-light-hsl));
    --color-success-lighter-hsl: 170, 78%, 47%;
    --color-success-lighter: hsl(var(--color-success-lighter-hsl));
    /* error */
    --color-error-darker-hsl: 342, 89%, 38%;
    --color-error-darker: hsl(var(--color-error-darker-hsl));
    --color-error-dark-hsl: 342, 89%, 43%;
    --color-error-dark: hsl(var(--color-error-dark-hsl));
    --color-error-hsl: 342, 89%, 48%;
    --color-error: hsl(var(--color-error-hsl));
    --color-error-light-hsl: 342, 89%, 56%;
    --color-error-light: hsl(var(--color-error-light-hsl));
    --color-error-lighter-hsl: 342, 89%, 62%;
    --color-error-lighter: hsl(var(--color-error-lighter-hsl));
    /* background */
    --color-bg-darker-hsl: 240, 4%, 90%;
    --color-bg-darker: hsl(var(--color-bg-darker-hsl));
    --color-bg-dark-hsl: 240, 4%, 95%;
    --color-bg-dark: hsl(var(--color-bg-dark-hsl));
    --color-bg-hsl: 0, 0%, 100%;
    --color-bg: hsl(var(--color-bg-hsl));
    --color-bg-light-hsl: 0, 0%, 100%;
    --color-bg-light: hsl(var(--color-bg-light-hsl));
    --color-bg-lighter-hsl: 0, 0%, 100%;
    --color-bg-lighter: hsl(var(--color-bg-lighter-hsl));
    /* color contrasts */
    --color-contrast-lower-hsl: 240, 4%, 85%;
    --color-contrast-lower: hsl(var(--color-contrast-lower-hsl));
    --color-contrast-low-hsl: 240, 4%, 65%;
    --color-contrast-low: hsl(var(--color-contrast-low-hsl));
    --color-contrast-medium-hsl: 225, 4%, 47%;
    --color-contrast-medium: hsl(var(--color-contrast-medium-hsl));
    --color-contrast-high-hsl: 230, 7%, 23%;
    --color-contrast-high: hsl(var(--color-contrast-high-hsl));
    --color-contrast-higher-hsl: 230, 13%, 9%;
    --color-contrast-higher: hsl(var(--color-contrast-higher-hsl));
}

[data-theme="dark"] {
    /* primary */
    --color-primary-darker-hsl: 250, 100%, 60%;
    --color-primary-darker: hsl(var(--color-primary-darker-hsl));
    --color-primary-dark-hsl: 250, 100%, 64%;
    --color-primary-dark: hsl(var(--color-primary-dark-hsl));
    --color-primary-hsl: 250, 100%, 69%;
    --color-primary: hsl(var(--color-primary-hsl));
    --color-primary-light-hsl: 250, 100%, 72%;
    --color-primary-light: hsl(var(--color-primary-light-hsl));
    --color-primary-lighter-hsl: 250, 100%, 76%;
    --color-primary-lighter: hsl(var(--color-primary-lighter-hsl));
    /* accent */
    --color-accent-darker-hsl: 342, 92%, 41%;
    --color-accent-darker: hsl(var(--color-accent-darker-hsl));
    --color-accent-dark-hsl: 342, 92%, 47%;
    --color-accent-dark: hsl(var(--color-accent-dark-hsl));
    --color-accent-hsl: 342, 92%, 54%;
    --color-accent: hsl(var(--color-accent-hsl));
    --color-accent-light-hsl: 342, 92%, 60%;
    --color-accent-light: hsl(var(--color-accent-light-hsl));
    --color-accent-lighter-hsl: 342, 92%, 65%;
    --color-accent-lighter: hsl(var(--color-accent-lighter-hsl));
    /* secondary */
    --color-secondary-darker-hsl: 28, 45%, 41%;
    --color-secondary-darker: hsl(var(--color-secondary-darker-hsl));
    --color-secondary-dark-hsl: 28, 45%, 48%;
    --color-secondary-dark: hsl(var(--color-secondary-dark-hsl));
    --color-secondary-hsl: 28, 45%, 56%;
    --color-secondary: hsl(var(--color-secondary-hsl));
    --color-secondary-light-hsl: 28, 45%, 63%;
    --color-secondary-light: hsl(var(--color-secondary-light-hsl));
    --color-secondary-lighter-hsl: 28, 45%, 70%;
    --color-secondary-lighter: hsl(var(--color-secondary-lighter-hsl));
    /* black */
    --color-black-hsl: 230, 13%, 9%;
    --color-black: hsl(var(--color-black-hsl));
    /* white */
    --color-white-hsl: 0, 0%, 100%;
    --color-white: hsl(var(--color-white-hsl));
    /* warning */
    --color-warning-darker-hsl: 35, 79%, 48%;
    --color-warning-darker: hsl(var(--color-warning-darker-hsl));
    --color-warning-dark-hsl: 35, 79%, 56%;
    --color-warning-dark: hsl(var(--color-warning-dark-hsl));
    --color-warning-hsl: 35, 79%, 66%;
    --color-warning: hsl(var(--color-warning-hsl));
    --color-warning-light-hsl: 35, 79%, 74%;
    --color-warning-light: hsl(var(--color-warning-light-hsl));
    --color-warning-lighter-hsl: 35, 79%, 82%;
    --color-warning-lighter: hsl(var(--color-warning-lighter-hsl));
    /* success */
    --color-success-darker-hsl: 170, 78%, 26%;
    --color-success-darker: hsl(var(--color-success-darker-hsl));
    --color-success-dark-hsl: 170, 78%, 31%;
    --color-success-dark: hsl(var(--color-success-dark-hsl));
    --color-success-hsl: 170, 78%, 36%;
    --color-success: hsl(var(--color-success-hsl));
    --color-success-light-hsl: 170, 78%, 42%;
    --color-success-light: hsl(var(--color-success-light-hsl));
    --color-success-lighter-hsl: 170, 78%, 47%;
    --color-success-lighter: hsl(var(--color-success-lighter-hsl));
    /* error */
    --color-error-darker-hsl: 342, 92%, 41%;
    --color-error-darker: hsl(var(--color-error-darker-hsl));
    --color-error-dark-hsl: 342, 92%, 47%;
    --color-error-dark: hsl(var(--color-error-dark-hsl));
    --color-error-hsl: 342, 92%, 54%;
    --color-error: hsl(var(--color-error-hsl));
    --color-error-light-hsl: 342, 92%, 60%;
    --color-error-light: hsl(var(--color-error-light-hsl));
    --color-error-lighter-hsl: 342, 92%, 65%;
    --color-error-lighter: hsl(var(--color-error-lighter-hsl));
    /* background */
    --color-bg-darker-hsl: 232, 7%, 8%;
    --color-bg-darker: hsl(var(--color-bg-darker-hsl));
    --color-bg-dark-hsl: 233, 8%, 11%;
    --color-bg-dark: hsl(var(--color-bg-dark-hsl));
    --color-bg-hsl: 232, 11%, 15%;
    --color-bg: hsl(var(--color-bg-hsl));
    --color-bg-light-hsl: 233, 8%, 19%;
    --color-bg-light: hsl(var(--color-bg-light-hsl));
    --color-bg-lighter-hsl: 232, 7%, 22%;
    --color-bg-lighter: hsl(var(--color-bg-lighter-hsl));
    /* color contrasts */
    --color-contrast-lower-hsl: 240, 6%, 26%;
    --color-contrast-lower: hsl(var(--color-contrast-lower-hsl));
    --color-contrast-low-hsl: 240, 3%, 41%;
    --color-contrast-low: hsl(var(--color-contrast-low-hsl));
    --color-contrast-medium-hsl: 231, 3%, 57%;
    --color-contrast-medium: hsl(var(--color-contrast-medium-hsl));
    --color-contrast-high-hsl: 240, 5%, 82%;
    --color-contrast-high: hsl(var(--color-contrast-high-hsl));
    --color-contrast-higher-hsl: 240, 100%, 99%;
    --color-contrast-higher: hsl(var(--color-contrast-higher-hsl));
    /* font rendering */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

* {
    --space-4xs: calc(0.125 * var(--space-unit));
    /* 2px */
    --space-3xs: calc(0.25 * var(--space-unit));
    /* 4px */
    --space-2xs: calc(0.375 * var(--space-unit));
    /* 6px */
    --space-xs: calc(0.5 * var(--space-unit));
    /* 8px */
    --space-sm: calc(0.75 * var(--space-unit));
    /* 12px */
    --space-md: calc(1.25 * var(--space-unit));
    /* 20px */
    --space-lg: calc(2 * var(--space-unit));
    /* 32px */
    --space-xl: calc(3.25 * var(--space-unit));
    /* 52px */
    --space-2xl: calc(5.25 * var(--space-unit));
    /* 84px */
    --space-3xl: calc(8.5 * var(--space-unit));
    /* 136px */
    --space-4xl: calc(13.75 * var(--space-unit));
    /* 220px */
    --component-padding: var(--space-md);
}

@media (min-width: 64rem) {
    * {
        --space-4xs: calc(0.1875 * var(--space-unit));
        /* 3px */
        --space-3xs: calc(0.375 * var(--space-unit));
        /* 6px */
        --space-2xs: calc(0.5625 * var(--space-unit));
        /* 9px */
        --space-xs: calc(0.75 * var(--space-unit));
        /* 12px */
        --space-sm: calc(1.125 * var(--space-unit));
        /* 18px */
        --space-md: calc(1.875 * var(--space-unit));
        /* 30px */
        --space-lg: calc(3 * var(--space-unit));
        /* 48px */
        --space-xl: calc(4.875 * var(--space-unit));
        /* 78px */
        --space-2xl: calc(7.875 * var(--space-unit));
        /* 126px */
        --space-3xl: calc(12.75 * var(--space-unit));
        /* 204px */
        --space-4xl: calc(20.625 * var(--space-unit));
        /* 330px */
    }
}

:root {
    /* border radius */
    --radius-sm: calc(var(--radius-md)/2);
    --radius-md: 0.375em;
    --radius-lg: calc(var(--radius-md)*2);
    /* box shadow */
    --shadow-xs: 0 0.1px 0.3px hsla(var(--color-black-hsl), 0.06), 0 1px 2px hsla(var(--color-black-hsl), 0.12);
    --shadow-sm: 0 0.3px 0.4px hsla(var(--color-black-hsl), 0.025), 0 0.9px 1.5px hsla(var(--color-black-hsl), 0.05), 0 3.5px 6px hsla(var(--color-black-hsl), 0.1);
    --shadow-md: 0 0.9px 1.5px hsla(var(--color-black-hsl), 0.03), 0 3.1px 5.5px hsla(var(--color-black-hsl), 0.08), 0 14px 25px hsla(var(--color-black-hsl), 0.12);
    --shadow-lg: 0 1.2px 1.9px -1px hsla(var(--color-black-hsl), 0.014), 0 3.3px 5.3px -1px hsla(var(--color-black-hsl), 0.038), 0 8.5px 12.7px -1px hsla(var(--color-black-hsl), 0.085), 0 30px 42px -1px hsla(var(--color-black-hsl), 0.15);
    --shadow-xl: 0 1.5px 2.1px -6px hsla(var(--color-black-hsl), 0.012), 0 3.6px 5.2px -6px hsla(var(--color-black-hsl), 0.035), 0 7.3px 10.6px -6px hsla(var(--color-black-hsl), 0.07), 0 16.2px 21.9px -6px hsla(var(--color-black-hsl), 0.117), 0 46px 60px -6px hsla(var(--color-black-hsl), 0.2);
    --inner-glow: inset 0 0 0.5px 1px hsla(var(--color-white-hsl), 0.075);
    --inner-glow-top: inset 0 1px 0.5px hsla(var(--color-white-hsl), 0.075);
    /* timing functions */
    /* credits: https://github.com/ai/easings.net */
    --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);
}

.link-subtle {
    color: var(--color-contrast-medium);
    text-decoration: none;
}

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

.link-subtle-2:hover {
    text-decoration: underline;
}

@font-face {
    font-family: 'PolySans';
    src: url('../fonts/PolySans-Bulky.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-weight: 400 700;
    font-display: swap;
    font-style: oblique 0deg 10deg;
    src: url("../fonts/Inter.var.woff2?v=3.19") format("woff2");
}

@font-face {
    font-family: 'JetBrains Mono';
    src: url('../fonts/JetBrainsMono-Regular.woff2') format('woff2');
}

:root {
    /* font family */
    --font-primary: 'Inter', system-ui, sans-serif;
    --font-secondary: 'PolySans', system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
    --font-system-ui: system-ui, sans-serif;
    /* text unit */
    --text-unit: 1rem;
    /* line height */
    --heading-line-height: 1.2;
    --body-line-height: 1.4;
    /* capital letters - used with the line-height crop */
    --font-primary-capital-letter: 1;
}

* {
    /* type scale */
    --text-3xs: calc(0.5 * var(--text-unit));
    /* 8px */
    --text-2xs: calc(0.625 * var(--text-unit));
    /* 10px */
    --text-xs: calc(0.75 * var(--text-unit));
    /* 12px */
    --text-sm: calc(0.875 * var(--text-unit));
    /* 14px */
    --text-base: calc(1 * var(--text-unit));
    /* 16px */
    --text-md: calc(1.1875 * var(--text-unit));
    /* 19px */
    --text-lg: calc(1.4375 * var(--text-unit));
    /* 23px */
    --text-xl: calc(1.75 * var(--text-unit));
    /* 28px */
    --text-2xl: calc(2.0625 * var(--text-unit));
    /* 33px */
    --text-3xl: calc(2.5 * var(--text-unit));
    /* 40px */
    --text-4xl: calc(3 * var(--text-unit));
    /* 48px */
    --text-5xl: calc(3.625 * var(--text-unit));
    /* 58px */
}

@media (min-width: 64rem) {
    * {
        --text-3xs: calc(0.5 * var(--text-unit));
        /* 8px */
        --text-2xs: calc(0.625 * var(--text-unit));
        /* 10px */
        --text-xs: calc(0.75 * var(--text-unit));
        /* 12px */
        --text-sm: calc(0.875 * var(--text-unit));
        /* 14px */
        --text-base: calc(1.125 * var(--text-unit));
        /* 18px */
        --text-md: calc(1.375 * var(--text-unit));
        /* 22px */
        --text-lg: calc(1.75 * var(--text-unit));
        /* 28px */
        --text-xl: calc(2.1875 * var(--text-unit));
        /* 35px */
        --text-2xl: calc(2.75 * var(--text-unit));
        /* 44px */
        --text-3xl: calc(3.4375 * var(--text-unit));
        /* 55px */
        --text-4xl: calc(4.25 * var(--text-unit));
        /* 68px */
        --text-5xl: calc(5.3125 * var(--text-unit));
        /* 85px */
    }
}

body {
    color: var(--color-contrast-high);
    font-family: var(--font-primary);
    font-size: var(--text-base);
}

h1, h2, h3, h4 {
    color: var(--color-contrast-higher);
    line-height: var(--heading-line-height);
    font-family: var(--font-secondary);
    font-weight: 800;
}

h1 {
    font-size: var(--text-2xl);
}

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

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

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

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

/* text-component */
.text-component :where(h1, h2, h3, h4) {
    margin-top: calc(var(--space-md) * 1.0769230769);
    margin-bottom: var(--space-sm);
}

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

.text-component :where(ul, ol, p, blockquote, .text-component__block, .tbl, .text-component__img, .hljs, .modal-video-banner, .note, .media-wrapper-16\:9) {
    margin-bottom: var(--space-sm);
}

.text-component .text-component__img {
    margin-top: var(--space-md);
    margin-bottom: var(--space-md);
}

.text-component :where(ul, ol) {
    padding-left: 1.25em;
}

.text-component ul :where(ul, ol), .text-component ol :where(ul, ol) {
    padding-left: 1em;
    margin-bottom: 0;
}

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

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

.text-component ul li::marker {
    color: var(--color-contrast-lower);
}

.text-component ol li::marker {
    color: var(--color-contrast-low);
}

/* .text-component .hljs {
  max-height: 600px;
} */
.text-component img {
    margin: 0 auto;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);
}

.text-component figcaption {
    margin-top: var(--space-2xs);
    font-size: var(--text-sm);
    color: var(--color-contrast-low);
    text-align: center;
}

.text-component a:not(.btn, img, .heading-link), .link {
    text-decoration: none;
    background-image: linear-gradient(to right, currentColor 50%, hsla(var(--color-contrast-higher-hsl), 0.15) 50%);
    background-size: 200% 1px;
    background-repeat: no-repeat;
    background-position: 100% 100%;
    transition: background-position 0.2s;
}

.text-component a:hover, .link:hover {
    background-position: 0% 100%;
}

.text-component .heading-link {
    display: none;
    text-decoration: none;
    color: var(--color-contrast-low);
}

.text-component .heading-link:focus {
    color: var(--color-primary);
}

:is(h2:hover, h3:hover, h4:hover) .heading-link {
    display: inline-block;
}

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

.text-component strong {
    font-weight: bold;
}

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

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

.text-component mark {
    background-color: hsla(var(--color-accent-hsl), 0.2);
    color: inherit;
    border-radius: var(--radius-md);
    padding: 0 0.25em;
}

.text-component code {
    font-size: 0.9375rem;
    font-family: var(--font-mono);
    color: var(--color-secondary);
}

@media (min-width: 64rem) {
    .text-component code {
        font-size: 1rem;
    }
}

.text-component code::-moz-selection {
    background-color: var(--color-secondary);
    color: var(--color-bg);
}

.text-component code::selection {
    background-color: var(--color-secondary);
    color: var(--color-bg);
}

.text-component .file-path {
    color: var(--color-contrast-higher);
    font-weight: 500;
}

.text-component .file-path::before {
    content: '../';
}

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

.text-component hr {
    margin: var(--space-md) auto;
    background: var(--color-border-alpha);
    height: 1px;
}

.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: var(--space-sm);
    }

    .text-component__block--right {
        float: right;
        margin-left: var(--space-sm);
    }
}

@media (min-width: 90rem) {
    .text-component__block--outset, .text-component__img--outset {
        width: calc(100% + 12 * var(--space-unit));
    }

    :where(.text-component__block--outset, .text-component__img--outset) img {
        width: 100%;
    }

    :where(.text-component__block--outset, .text-component__img--outset):not(.text-component__block--right) {
        margin-left: calc(-6 * var(--space-unit));
    }

    .text-component__block--left, .text-component__block--right {
        width: 50%;
    }

    .text-component__block--right:is(.text-component__block--outset, .text-component__img--outset) {
        margin-right: calc(-6 * var(--space-unit));
    }
}

.article {
    /* e.g., blog posts */
    --heading-line-height: 1.2;
    --body-line-height: 1.66;
    --space-unit: 1.3rem;
}

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

/* rotate the icon infinitely */
.icon--is-spinning {
    -webkit-animation: icon-spin 1s infinite linear;
    animation: icon-spin 1s infinite linear;
}

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

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

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

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

/* SVG symbols - enable icon color corrections */
.icon use {
    color: inherit;
    fill: currentColor;
}

.btn {
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    white-space: nowrap;
    text-decoration: none;
    background: var(--color-bg-dark);
    padding: var(--space-2xs) var(--space-sm);
    border-radius: var(--radius-md);
    font-size: 1em;
    color: var(--color-contrast-higher);
    cursor: pointer;
    text-decoration: none;
    line-height: 1.2;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background 0.2s ease, box-shadow 0.2s ease, -webkit-transform 0.2s ease;
    transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, -webkit-transform 0.2s ease;
    will-change: transform;
}

.btn:focus-visible {
    /* outline: 2px solid var(--color-bg-dark); */
    /* outline-offset: 2px; */
    outline: none;
    box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-bg-dark);
}

.btn:active {
    -webkit-transform: translateY(2px);
    transform: translateY(2px);
}

/* primary */
.btn--primary {
    background: var(--color-primary);
    box-shadow: inset 0px 1px 0px hsla(var(--color-white-hsl), 0.15), 0px 1px 3px hsla(var(--color-primary-darker-hsl), 0.25), 0px 2px 6px hsla(var(--color-primary-darker-hsl), 0.1), 0px 6px 10px -2px hsla(var(--color-primary-darker-hsl), 0.25);
    color: var(--color-white);
}

.btn--primary:hover {
    background: var(--color-primary-light);
    box-shadow: inset 0px 1px 0px hsla(var(--color-white-hsl), 0.15), 0px 1px 2px hsla(var(--color-primary-darker-hsl), 0.25), 0px 1px 4px hsla(var(--color-primary-darker-hsl), 0.1), 0px 3px 6px -2px hsla(var(--color-primary-darker-hsl), 0.25);
}

.btn--primary:focus-visible {
    /* outline: 2px solid hsla(var(--color-primary-hsl), 0.35); */
    /* outline-offset: 2px; */
    box-shadow: inset 0px 1px 0px hsla(var(--color-white-hsl), 0.15), 0px 1px 2px hsla(var(--color-primary-darker-hsl), 0.25), 0px 1px 4px hsla(var(--color-primary-darker-hsl), 0.1), 0px 3px 6px -2px hsla(var(--color-primary-darker-hsl), 0.25), 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-primary);
}

/* subtle */
.btn--subtle {
    background: var(--color-bg-lighter);
    color: var(--color-contrast-higher);
    box-shadow: inset 0px 1px 0px hsla(var(--color-white-hsl), 0.1), 0px 0px 0px 1px hsla(var(--color-black-hsl), 0.02), 0px 1px 3px -1px hsla(var(--color-black-hsl), 0.2), var(--shadow-sm);
}

.btn--subtle:hover {
    background: var(--color-bg-light);
    box-shadow: inset 0px 1px 0px hsla(var(--color-white-hsl), 0.1), 0px 0px 0px 1px hsla(var(--color-black-hsl), 0.02), 0px 1px 3px -1px hsla(var(--color-black-hsl), 0.2), var(--shadow-xs);
}

.btn--subtle:focus-visible, .btn--subtle.popover-control--active, .btn--subtle[aria-expanded="true"] {
    /* outline: 2px solid hsla(var(--color-contrast-higher-hsl), 0.95); */
    /* outline-offset: 2px; */
    box-shadow: inset 0px 1px 0px hsla(var(--color-white-hsl), 0.1), 0px 0px 0px 1px hsla(var(--color-black-hsl), 0.02), 0px 1px 3px -1px hsla(var(--color-black-hsl), 0.2), var(--shadow-xs), 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-contrast-high);
}

.btn--subtle:where(.btn--sm, .btn--xs) {
    box-shadow: inset 0px 1px 0px hsla(var(--color-white-hsl), 0.1), 0 0 0 1px hsla(var(--color-black-hsl), 0.075), 0 0.1px 0.1px -1px hsla(var(--color-black-hsl), 0.101), 0 0.2px 0.4px -1px hsla(var(--color-black-hsl), 0.149), 0 1px 2px -1px hsla(var(--color-black-hsl), 0.25);
}

/* subtle-2 */
.btn--subtle-2 {
    background: hsla(var(--color-contrast-higher-hsl), 0);
    color: var(--color-contrast-higher);
}

.btn--subtle-2:hover {
    background: hsla(var(--color-contrast-higher-hsl), 0.1);
}

.btn--subtle-2:focus-visible, .btn--subtle-2.popover-control--active {
    /* outline: 2px solid hsla(var(--color-contrast-higher-hsl), 0.1); */
    /* outline-offset: 2px; */
    box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 4px hsla(var(--color-contrast-higher-hsl), 0.1);
}

/* subtle-3 */
.btn--subtle-3 {
    background: hsla(var(--color-contrast-higher-hsl), 0);
    color: var(--color-contrast-low);
    border-radius: var(--radius-sm);
    cursor: auto;
}

.btn--subtle-3:hover {
    color: var(--color-contrast-medium);
}

.btn--subtle-3:focus-visible, .btn--subtle-3.popover-control--active {
    /* outline: 2px solid currentColor; */
    box-shadow: 0 0 0 2px currentColor;
}

/* accent */
.btn--accent {
    background: var(--color-accent);
    color: var(--color-white);
    box-shadow: inset 0px 1px 0px hsla(var(--color-white-hsl), 0.15), 0px 1px 3px hsla(var(--color-accent-darker-hsl), 0.25), 0px 2px 6px hsla(var(--color-accent-darker-hsl), 0.1), 0px 6px 10px -2px hsla(var(--color-accent-darker-hsl), 0.25);
}

.btn--accent:hover {
    background: var(--color-accent-light);
    box-shadow: inset 0px 1px 0px hsla(var(--color-white-hsl), 0.15), 0px 1px 2px hsla(var(--color-accent-darker-hsl), 0.25), 0px 1px 4px hsla(var(--color-accent-darker-hsl), 0.1), 0px 3px 6px -2px hsla(var(--color-accent-darker-hsl), 0.1);
}

.btn--accent:focus-visible {
    /* outline: 2px solid hsla(var(--color-accent-hsl), 0.35); */
    /* outline-offset: 2px; */
    box-shadow: inset 0px 1px 0px hsla(var(--color-white-hsl), 0.15), 0px 1px 2px hsla(var(--color-accent-darker-hsl), 0.25), 0px 1px 4px hsla(var(--color-accent-darker-hsl), 0.1), 0px 3px 6px -2px hsla(var(--color-accent-darker-hsl), 0.1), 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-accent);
}

/* contrast */
.btn--contrast {
    background: hsla(var(--color-contrast-higher-hsl), 0.95);
    color: var(--color-bg);
    box-shadow: var(--shadow-xs);
}

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

.btn--contrast:focus-visible {
    /* outline: 2px solid hsla(var(--color-contrast-higher-hsl), 0.95); */
    /* outline-offset: 2px; */
    box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 4px hsla(var(--color-contrast-higher-hsl), 0.95);
}

/* primary subtle */
.btn--primary-subtle {
    background: hsla(var(--color-primary-hsl), 0.15);
    color: var(--color-primary);
}

.btn--primary-subtle:hover {
    background: hsla(var(--color-primary-hsl), 0.12);
}

.btn--primary-subtle:focus-visible {
    /* outline: 2px solid var(--color-primary); */
    /* outline-offset: 2px; */
    box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-primary);
}

/* accent subtle */
.btn--accent-subtle {
    background: hsla(var(--color-accent-hsl), 0.15);
    color: var(--color-accent);
}

.btn--accent-subtle:hover {
    background: hsla(var(--color-accent-hsl), 0.12);
}

.btn--accent-subtle:focus-visible {
    /* outline: 2px solid var(--color-accent); */
    /* outline-offset: 2px; */
    box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-accent);
}

/* safe */
.btn--safe {
    background: var(--color-success);
    color: var(--color-white);
    box-shadow: inset 0px 1px 0px hsla(var(--color-white-hsl), 0.15), 0px 1px 3px hsla(var(--color-success-darker-hsl), 0.25), 0px 2px 6px hsla(var(--color-success-darker-hsl), 0.1), 0px 6px 10px -2px hsla(var(--color-success-darker-hsl), 0.25);
}

.btn--safe:hover {
    box-shadow: inset 0px 1px 0px hsla(var(--color-white-hsl), 0.15), 0px 1px 2px hsla(var(--color-success-darker-hsl), 0.25), 0px 1px 4px hsla(var(--color-success-darker-hsl), 0.1), 0px 3px 6px -2px hsla(var(--color-success-darker-hsl), 0.1);
}

.btn--safe:focus-visible {
    /* outline: 2px solid hsla(var(--color-success-hsl), 0.35); */
    /* outline-offset: 2px; */
    box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-success);
}

/* feedback */
.btn--disabled, .btn[disabled], .btn[readonly] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* sizes */
.btn--sm {
    height: 28px;
    line-height: 28px;
    padding: 0 var(--space-2xs);
    font-size: var(--text-sm);
}

.btn--xs {
    height: 24px;
    line-height: 24px;
    font-size: var(--text-xs);
    padding: 0 var(--space-3xs);
}

.form-control {
    background: var(--color-bg-dark);
    box-shadow: inset 0px 0px 0px 1px var(--color-contrast-lower);
    padding: var(--space-2xs) var(--space-xs);
    border-radius: var(--radius-md);
    font-size: 1em;
    line-height: 1.2;
    transition: 0.2s;
}

.form-control::-webkit-input-placeholder {
    opacity: 1;
    color: var(--color-contrast-low);
}

.form-control::-moz-placeholder {
    opacity: 1;
    color: var(--color-contrast-low);
}

.form-control:-ms-input-placeholder {
    opacity: 1;
    color: var(--color-contrast-low);
}

.form-control::-ms-input-placeholder {
    opacity: 1;
    color: var(--color-contrast-low);
}

.form-control::placeholder {
    opacity: 1;
    color: var(--color-contrast-low);
}

.form-control:focus, .form-control:focus-within {
    background: var(--color-bg);
    box-shadow: inset 0px 0px 0px 1px hsla(var(--color-contrast-lower-hsl), 0), 0px 0px 0px 2px var(--color-primary), var(--shadow-sm);
    outline: none;
}

/* disabled */
.form-control--disabled, .form-control[disabled], .form-control[readonly] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* error */
.form-control[aria-invalid="true"], .form-control.form-control--error {
    box-shadow: inset 0px 0px 0px 1px hsla(var(--color-contrast-lower-hsl), 0), 0px 0px 0px 2px var(--color-error);
}

.form-control[aria-invalid="true"]:focus, .form-control[aria-invalid="true"]:focus-within, .form-control.form-control--error:focus, .form-control.form-control--error:focus-within {
    box-shadow: inset 0px 0px 0px 1px hsla(var(--color-contrast-lower-hsl), 0), 0px 0px 0px 2px var(--color-error), var(--shadow-sm);
}

/* legend */
.form-legend {
    font-family: var(--font-secondary);
    font-weight: 800;
    color: var(--color-contrast-higher);
    line-height: var(--heading-line-height);
    font-size: var(--text-md);
    margin-bottom: var(--space-sm);
}

/* label */
.form-label {
    color: var(--color-contrast-medium);
    display: inline-block;
    font-size: var(--text-sm);
    margin-bottom: var(--space-2xs);
}

.form-control--xs {
    font-size: var(--text-xs);
    height: 24px;
    padding: 0 var(--space-3xs);
}

textarea.form-control--xs {
    padding: var(--space-3xs);
}

:root {
    --z-index-header: 3;
    /* e.g., main header */
    --z-index-popover: 5;
    /* e.g., tooltips and dropdown */
    --z-index-fixed-element: 10;
    /* e.g., 'back to top' button */
    --z-index-overlay: 15;
    /* e.g., modals and dialogs */
}

/* #region (_1_main-header) */
:root {
    --main-header-height: 60px;
}

@media (min-width: 64rem) {
    :root {
        --main-header-height: 70px;
    }
}

.main-header {
    height: var(--main-header-height);
    width: 100%;
    z-index: var(--z-index-header);
}

.main-header__search-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.main-header__search-btn:hover {
    background-color: hsla(var(--color-contrast-higher-hsl), 0.1);
    cursor: pointer;
}

.main-header__search-btn:focus {
    outline: 2px solid hsla(var(--color-contrast-higher-hsl), 0.1);
    outline-offset: 2px;
}

.main-header__nav-link {
    color: var(--color-contrast-higher);
    text-decoration: none;
}

.main-header__nav-link:hover, .main-header__nav-link--current {
    color: var(--color-primary);
}

.main-header__nav-separator {
    background-color: hsla(var(--color-contrast-higher-hsl), 0.1);
}

@media not all and (min-width: 64rem) {
    .main-header {
        --main-header-on-scroll: 1;
        /* used in javascript to check if we need to add the on-scroll class */
    }

    .main-header--on-scroll {
        background-color: hsla(var(--color-bg-hsl), 0.95);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
    }

    .main-header__nav {
        position: absolute;
        top: 0;
        width: 100%;
        left: 0;
        background-color: var(--color-bg-light);
        box-shadow: var(--shadow-md);
        padding: calc(var(--main-header-height) + var(--space-lg)) var(--space-md) var(--space-lg);
        display: none;
    }

    .main-header--expanded .main-header__nav {
        display: block;
    }

    .main-header__overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: none;
    }

    .main-header--expanded .main-header__overlay {
        display: block;
    }

    .main-header__nav-list > *:not(:last-child):not(.main-header__nav-separator) {
        margin-bottom: var(--space-sm);
    }

    .main-header__nav-separator {
        height: 1px;
        margin: var(--space-md) 0;
    }

    .main-header__nav-link {
        font-size: var(--text-lg);
        padding: var(--space-4xs) 0;
        display: block;
    }
}

@media (min-width: 64rem) {
    .main-header__nav-link {
        font-size: 1rem;
    }

    .main-header__nav-separator {
        width: 1px;
        height: 1em;
    }

    .main-header__overlay {
        display: none !important;
    }
}

/* #endregion */
/* #region (_1_bg-abstract) */
.bg-abstract-1, .bg-abstract-2, .bg-abstract-3, .bg-hearts {
    position: relative;
    background-repeat: no-repeat;
}

.bg-abstract-1 {
    background-image: url('../img/bg-abstract-1-light.jpg');
    background-size: 200% auto;
    background-position: top center;
}

.bg-abstract-1::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100px;
    background: linear-gradient(to top, hsla(0, 0%, 100%, 1), hsla(0, 0%, 100%, 0));
}

.bg-abstract-2 {
    background-image: url('../img/bg-abstract-2-light.jpg');
    background-size: 150% auto;
    background-position: bottom center;
}

.bg-abstract-3 {
    background-image: url('../img/bg-abstract-3-light.jpg');
    background-size: 150% auto;
    background-position: top center;
}

.bg-abstract-4 {
    background-image: url('../img/ui-framework-banner-bg-dark.jpg');
    /* dark on light */
    background-size: cover;
    background-position: center;
}

.bg-hearts {
    background-image: url('../img/bg-hearts.jpg');
    background-size: 150% auto;
    background-position: top center;
}

@media (min-width: 48rem) {
    .bg-abstract-1 {
        background-size: 150% auto;
    }
}

@media (min-width: 64rem) {
    .bg-abstract-1 {
        background-size: 120% auto;
    }

    .bg-abstract-2, .bg-abstract-3, .bg-hearts {
        background-size: 102% auto;
    }

    .bg-abstract-4 {
        background-image: url('../img/ui-framework-banner-bg-dark-v2.jpg');
        /* dark on light */
    }
}

@media (min-width: 90rem) {
    .bg-abstract-1 {
        background-size: 102% auto;
    }
}

[data-theme="dark"] .bg-abstract-1 {
    background-image: url('../img/bg-abstract-1-dark.jpg');
}

[data-theme="dark"] .bg-abstract-1::after {
    background: linear-gradient(to top, hsla(var(--color-bg-hsl), 1), hsla(var(--color-bg-hsl), 0));
}

[data-theme="dark"] .bg-abstract-2 {
    background-image: url('../img/bg-abstract-2-dark.jpg');
}

[data-theme="dark"] .bg-abstract-3 {
    background-image: url('../img/bg-abstract-3-dark.jpg');
}

[data-theme="dark"] .bg-abstract-4 {
    background-image: url('../img/ui-framework-banner-bg-light.jpg');
    /* light on dark */
}

[data-theme="dark"] .bg-hearts {
    background-image: url('../img/bg-hearts-dark.jpg');
}

@media (min-width: 64rem) {
    [data-theme="dark"] .bg-abstract-4 {
        background-image: url('../img/ui-framework-banner-bg-light-v2.jpg');
        /* light on dark */
    }
}

/* #endregion */
/* #region (_1_library-comp-banner) */
.library-comp-banner {
    background-color: hsl(232, 11%, 15%);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.library-comp-banner__inner {
    position: relative;
    background-image: url('../img/ui-framework-banner-bg-dark.jpg');
    /* dark on light */
    background-size: cover;
    background-position: top center;
}

.library-comp-banner__inner::before, .library-comp-banner__inner::after {
    content: '';
    position: absolute;
    top: 0;
    height: 100%;
    width: 100px;
}

.library-comp-banner__inner::before {
    left: 0;
    background: linear-gradient(to right, hsl(232, 11%, 15%), hsla(232, 11%, 15%, 0));
}

.library-comp-banner__inner::after {
    right: 0;
    background: linear-gradient(to left, hsl(232, 11%, 15%), hsla(232, 11%, 15%, 0));
}

[data-theme="dark"] .library-comp-banner {
    background-color: hsl(250, 93%, 95%);
}

[data-theme="dark"] .library-comp-banner__inner {
    background-image: url('../img/ui-framework-banner-bg-light.jpg');
    /* dark on light */
}

[data-theme="dark"] .library-comp-banner__inner::before {
    background: linear-gradient(to right, hsl(250, 93%, 95%), hsla(250, 93%, 95%, 0));
}

[data-theme="dark"] .library-comp-banner__inner::after {
    background: linear-gradient(to left, hsl(250, 93%, 95%), hsla(250, 93%, 95%, 0));
}

/* #endregion */
/* #region (_1_btn-animated-icons) */
.btn-anim-icon-1 .icon {
    transition: -webkit-transform 0.2s;
    transition: transform 0.2s;
    transition: transform 0.2s, -webkit-transform 0.2s;
}

.btn-anim-icon-1:hover .icon {
    -webkit-transform: translateX(2px);
    transform: translateX(2px);
}

/* #endregion */
/* #region (_1_circle-loader) */
:root {
    --circle-loader-v1-size: 48px;
    --circle-loader-v1-stroke-width: 4px;
}

.circle-loader {
    position: relative;
    display: inline-block;
}

.circle-loader__label {
    position: absolute;
    clip: rect(1px, 1px, 1px, 1px);
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
}

.circle-loader--v1 {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    will-change: transform;
    -webkit-animation: circle-loader-1 0.75s infinite var(--ease-in-out);
    animation: circle-loader-1 0.75s infinite var(--ease-in-out);
}

.circle-loader--v1 .circle-loader__circle {
    width: var(--circle-loader-v1-size);
    height: var(--circle-loader-v1-size);
    border-width: var(--circle-loader-v1-stroke-width);
    border-style: solid;
    border-color: hsla(var(--color-primary-hsl), 0.2);
    border-radius: 50%;
}

.circle-loader--v1 .circle-loader__circle::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-width: inherit;
    border-style: inherit;
    border-color: transparent;
    border-top-color: var(--color-primary);
    border-radius: inherit;
}

@-webkit-keyframes circle-loader-1 {
    0% {
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    100% {
        -webkit-transform: rotate(405deg);
        transform: rotate(405deg);
    }
}

@keyframes circle-loader-1 {
    0% {
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    100% {
        -webkit-transform: rotate(405deg);
        transform: rotate(405deg);
    }
}

/* #endregion */
/* #region (_1_custom-select) */
:root {
    --select-icon-size: 16px;
    --select-icon-margin-right: var(--space-sm);
    --select-text-icon-gap: var(--space-3xs);
}

.select {
    position: relative;
}

.select__input {
    width: 100%;
    height: 100%;
    padding-right: calc(var(--select-icon-size) + var(--select-icon-margin-right) + var(--select-text-icon-gap)) !important;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.select__input::-ms-expand {
    display: none;
}

.select__icon {
    width: var(--select-icon-size);
    height: var(--select-icon-size);
    pointer-events: none;
    position: absolute;
    right: var(--select-icon-margin-right);
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

/* --custom-dropdown */
:root {
    --select-dropdown-gap: 4px;
    --select-dropdown-icon: 1em;
}

.select__button {
    /* created in JS - custom select control */
    width: 100%;
}

.select__button[aria-expanded=true] {
    /* custom select control if dropdown = visible */
}

.select__dropdown {
    /* created in JS - custom select dropdown */
    position: absolute;
    left: 0;
    top: 100%;
    min-width: 200px;
    max-height: 1px;
    /* updated in JS */
    background-color: var(--color-bg-light);
    box-shadow: var(--inner-glow), var(--shadow-sm), var(--shadow-md);
    padding: var(--space-3xs) 0;
    border-radius: var(--radius-md);
    z-index: var(--z-index-popover);
    margin-top: var(--select-dropdown-gap);
    margin-bottom: var(--select-dropdown-gap);
    overflow: auto;
    display: none;
    font-size: 1rem;
    /* transition: visibility 0s 0.2s, opacity 0.2s; */
}

.select__dropdown--right {
    /* change dropdown position based on the available space */
    right: 0;
    left: auto;
}

.select__dropdown--up {
    bottom: 100%;
    top: auto;
}

.select__button[aria-expanded=true] + .select__dropdown {
    display: block;
    /* transition: visibility 0s, opacity 0.2s; */
}

/* custom <optgroup> list - include all <option>s if no <optgroup> available  */
.select__list {
    list-style: none !important;
}

.select__list:not(:first-of-type) {
    padding-top: var(--space-2xs);
}

.select__list.is-hidden + .select__list {
    /* if previous <ul> select__list is hidden (e.g., radus presets when tailwind is selected), do not apply top padding  */
    padding-top: 0;
}

.select__list:not(:last-of-type) {
    border-bottom: 1px solid hsla(var(--color-contrast-higher-hsl), 0.09);
    padding-bottom: var(--space-2xs);
}

.select__item {
    /* single item inside .select__list */
    display: flex;
    align-items: center;
    padding: var(--space-2xs) calc(var(--space-sm) + var(--select-dropdown-icon)) var(--space-2xs) var(--space-sm);
    color: var(--color-contrast-high);
    width: 100%;
    text-align: left;
    /* truncate text */
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.select__item--optgroup {
    /* custom <optgroup> label */
    font-size: var(--text-sm);
    color: var(--color-contrast-low);
}

.select__item--option {
    /* custom <option> label */
    cursor: pointer;
    /* transition: 0.2s; */
}

.select__item--option:hover {
    background-color: hsla(var(--color-contrast-higher-hsl), 0.075);
}

.select__item--option:focus {
    outline: none;
    background-color: hsla(var(--color-primary-hsl), 0.15);
}

.select__item--option[aria-selected=true] {
    /* selected option */
    background-color: var(--color-primary);
    color: var(--color-white);
    position: relative;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.select__item--option::after {
    /* check icon next to the selected language */
    content: "";
    display: block;
    opacity: 0;
    flex-shrink: 0;
    height: var(--select-dropdown-icon);
    width: var(--select-dropdown-icon);
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
    margin-left: auto;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpolyline stroke-width='2' stroke='%23ffffff' fill='none' stroke-linecap='round' stroke-linejoin='round' points='1,9 5,13 15,3 '/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpolyline stroke-width='2' stroke='%23ffffff' fill='none' stroke-linecap='round' stroke-linejoin='round' points='1,9 5,13 15,3 '/%3E%3C/svg%3E");
    -webkit-mask-size: 1em;
    mask-size: 1em;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

.select__item--option[aria-selected=true]::after {
    opacity: 1;
}

/* .select__item--option[aria-selected=true]:focus {
  box-shadow: inset 0 0 0 2px var(--color-primary-darker);
} */
.select__item--option[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

.select--sm {
    --select-dropdown-gap: 4px;
}

.select--sm .select__item {
    padding: var(--space-3xs) calc(var(--space-xs) + var(--select-dropdown-icon)) var(--space-3xs) var(--space-xs);
    font-size: var(--text-sm);
}

.select--sm .select__dropdown {
    min-width: 160px;
}

.select--xs {
}

.select--xs .select__item {
    padding: var(--space-3xs) calc(var(--space-xs) + var(--select-dropdown-icon)) var(--space-3xs) var(--space-xs);
    font-size: var(--text-xs);
}

.select--xs .select__dropdown {
    min-width: 160px;
}

.select--xs .select__item--optgroup {
    font-size: var(--text-2xs);
}

.select--xs .select__item--option::after {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cg fill='%23ffffff'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M1 6.5l3 3 7-7'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cg fill='%23ffffff'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M1 6.5l3 3 7-7'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
}

:is(.select--sm, .select--xs) .select__label {
    overflow: hidden;
    text-overflow: ellipsis;
}

.select--label-max-width-100 .select__label {
    max-width: 100px;
}

html:not(.js) .select .icon {
    /* hide icon if JS = disabled */
    display: none;
}

/* #endregion */
/* #region (_1_popover) */
:root {
    --popover-width: 250px;
    --popover-control-gap: 4px;
    --popover-viewport-gap: 20px;
    --popover-transition-duration: 0.2s;
}

.popover {
    position: fixed;
    width: var(--popover-width);
    z-index: var(--z-index-popover, 5);
    margin-top: var(--popover-control-gap);
    margin-bottom: var(--popover-control-gap);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    visibility: hidden;
    opacity: 0;
    /* transition: visibility 0s var(--popover-transition-duration), opacity var(--popover-transition-duration); */
}

.popover--is-visible {
    visibility: visible;
    opacity: 1;
    /* transition: visibility 0s, opacity var(--popover-transition-duration); */
}

.popover__menu-link {
    display: flex;
    width: 100%;
    color: var(--color-contrast-high);
    font-size: 1rem;
    text-decoration: none;
    line-height: 1;
    padding: var(--space-2xs) var(--space-xs);
}

.popover__menu-link:hover {
    color: var(--color-contrast-higher);
    background-color: hsla(var(--color-contrast-higher-hsl), 0.05);
}

.popover__menu-link:focus-visible {
    outline: none;
    background-color: hsla(var(--color-primary-hsl), 0.1);
    color: var(--color-primary);
}

.popover__menu-separator {
    height: 1px;
    background-color: hsla(var(--color-contrast-higher-hsl), 0.09);
    margin: var(--space-3xs) 0;
}

.popover--sm {
    --popover-control-gap: 4px;
}

.popover--sm .popover__menu-link {
    font-size: var(--text-sm);
    padding: 0.375rem 0.75rem;
}

/* #endregion */
/* #region (_1_tabbed-navigation) */
.tabbed-nav {
}

:where(.tabbed-nav--border-bottom) {
    position: relative;
}

.tabbed-nav--border-bottom::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: hsla(var(--color-contrast-higher-hsl), 0.09);
}

.tabbed-nav__list {
    display: flex;
    overflow: auto;
}

.tabbed-nav__link {
    position: relative;
    display: flex;
    align-items: center;
    color: var(--color-contrast-medium);
    text-decoration: none;
    padding: var(--space-xs) var(--space-sm);
}

.tabbed-nav__link:not(.tabbed-nav__link--current):hover {
    color: var(--color-contrast-higher);
}

.tabbed-nav__link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: var(--color-primary);
    display: none;
}

.tabbed-nav__link--current {
    color: var(--color-primary);
}

.tabbed-nav__link--current::after {
    display: block;
}

@media (min-width: 64rem) {
    .tabbed-nav__link {
        font-size: 1rem;
    }
}

/* #endregion */
/* #region (_1_responsive-sidebar) */
/* mobile version only (--default) 👇 */
.sidebar:not(.sidebar--static) {
    position: fixed;
    top: 0;
    left: 0;
    z-index: var(--z-index-fixed-element, 10);
    width: 100%;
    height: 100%;
    visibility: hidden;
    transition: visibility 0s 0.3s;
}

.sidebar:not(.sidebar--static)::after {
    /* overlay layer */
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: hsla(var(--color-black-hsl), 0);
    transition: background-color 0.3s;
    z-index: 1;
}

.sidebar:not(.sidebar--static) .sidebar__panel {
    /* content */
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    max-width: 380px;
    height: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    background-color: var(--color-bg);
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    transition: box-shadow 0.3s, -webkit-transform 0.3s;
    transition: box-shadow 0.3s, transform 0.3s;
    transition: box-shadow 0.3s, transform 0.3s, -webkit-transform 0.3s;
}

.sidebar:not(.sidebar--static).sidebar--right-on-mobile .sidebar__panel {
    left: auto;
    right: 0;
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
}

.sidebar:not(.sidebar--static).sidebar--is-visible {
    visibility: visible;
    transition: none;
}

.sidebar:not(.sidebar--static).sidebar--is-visible::after {
    background-color: hsla(var(--color-black-hsl), 0.85);
}

.sidebar:not(.sidebar--static).sidebar--is-visible .sidebar__panel {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    box-shadow: var(--shadow-md);
}

/* end mobile version */
.sidebar__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}

.sidebar__close-btn {
    --size: 32px;
    width: var(--size);
    height: var(--size);
    display: flex;
    border-radius: 50%;
    background-color: var(--color-bg-light);
    box-shadow: var(--inner-glow), var(--shadow-sm);
    transition: 0.2s;
    flex-shrink: 0;
}

.sidebar__close-btn .icon {
    display: block;
    margin: auto;
}

.sidebar__close-btn:hover {
    background-color: var(--color-bg-lighter);
    box-shadow: var(--inner-glow), var(--shadow-md);
}

/* desktop version only (--static) 👇 */
.sidebar--static, html:not(.js) .sidebar {
    flex-shrink: 0;
    flex-grow: 1;
}

.sidebar--static .sidebar__header, html:not(.js) .sidebar .sidebar__header {
    display: none;
}

.sidebar--sticky-on-desktop {
    position: -webkit-sticky;
    position: sticky;
    top: var(--space-sm);
    max-height: calc(100vh - var(--space-sm));
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

/* end desktop version */
.js .sidebar, .js .sidebar-loaded\:show {
    opacity: 0;
    /* hide sidebar - or other elements using the .sidebar-loaded:show class - while it is initialized in JS */
}

.js .sidebar--loaded {
    opacity: 1;
}

/* no-js */
html:not(.js) .sidebar {
    position: static;
}

/* detect when the sidebar needs to switch from the mobile layout to a static one - used in JS */
[class*=sidebar--static]::before {
    display: none;
}

.sidebar--static::before {
    content: "static";
}

.sidebar--static\@xs::before {
    content: "mobile";
}

@media (min-width: 32rem) {
    .sidebar--static\@xs::before {
        content: "static";
    }
}

.sidebar--static\@sm::before {
    content: "mobile";
}

@media (min-width: 48rem) {
    .sidebar--static\@sm::before {
        content: "static";
    }
}

.sidebar--static\@md::before {
    content: "mobile";
}

@media (min-width: 64rem) {
    .sidebar--static\@md::before {
        content: "static";
    }
}

.sidebar--static\@lg::before {
    content: "mobile";
}

@media (min-width: 80rem) {
    .sidebar--static\@lg::before {
        content: "static";
    }
}

.sidebar--static\@xl::before {
    content: "mobile";
}

@media (min-width: 90rem) {
    .sidebar--static\@xl::before {
        content: "static";
    }
}

/* #endregion */
/* #region (_1_side-navigation) */
:root {
    --sidenav-list-item-height: 36px;
    --sidenav-list-item-padding-x: 9px;
    --sidenav-icon-size: 16px;
    --sidenav-icon-text-gap: 8px;
    --sidenav-sublist-control-size: 20px;
    --sidenav-sublist-control-icon-size: 12px;
    --sidenav-sublist-control-margin-right: 4px;
}

.sidenav__list .sidenav__list {
    display: none;
}

.sidenav__list .sidenav__list .sidenav__link {
    padding-left: calc(var(--sidenav-list-item-padding-x) + var(--sidenav-sublist-control-size) + var(--sidenav-sublist-control-margin-right) + var(--sidenav-icon-size) + var(--sidenav-icon-text-gap));
}

.sidenav__item {
    position: relative;
}

.sidenav--free .sidenav__item--pro-only {
    display: none;
}

.sidenav__item--expanded .sidenav__list {
    display: block;
}

.sidenav__item--expanded .sidenav__sublist-control .icon {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}

.sidenav__link {
    display: flex;
    height: var(--sidenav-list-item-height);
    border-radius: var(--radius-md);
    align-items: center;
    padding: 0 var(--sidenav-list-item-padding-x) 0 calc(var(--sidenav-list-item-padding-x) + var(--sidenav-sublist-control-size) + var(--sidenav-sublist-control-margin-right));
    text-decoration: none;
    font-size: var(--text-md);
    color: hsla(var(--color-contrast-high-hsl), 0.9);
    transition: 0.2s;
}

.sidenav__link:not(.sidenav__link--current):hover {
    color: var(--color-contrast-higher);
    background-color: hsla(var(--color-contrast-higher-hsl), 0.05);
}

.sidenav__link[aria-current=page], .sidenav__link--current {
    background-color: hsla(var(--color-primary-hsl), 0.1);
    color: var(--color-primary);
}

:is(.sidenav__link[aria-current=page], .sidenav__link--current) + .sidenav__sublist-control {
    color: var(--color-primary);
}

.sidenav__icon {
    width: var(--sidenav-icon-size);
    height: var(--sidenav-icon-size);
    margin-right: var(--sidenav-icon-text-gap);
}

.sidenav__text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: var(--space-2xs);
}

.sidenav__counter {
    opacity: 0.7;
    font-size: var(--text-xs);
    margin-left: auto;
}

.sidenav__sublist-control {
    display: block;
    width: var(--sidenav-sublist-control-size);
    height: var(--sidenav-sublist-control-size);
    border-radius: 50%;
    position: absolute;
    left: var(--sidenav-list-item-padding-x);
    top: calc((var(--sidenav-list-item-height) - var(--sidenav-sublist-control-size))/2);
    transition: 0.2s;
    color: hsla(var(--color-contrast-high-hsl), 0.9);
}

.sidenav__sublist-control .icon {
    display: block;
    width: var(--sidenav-sublist-control-icon-size);
    height: var(--sidenav-sublist-control-icon-size);
    margin: auto;
    transition: -webkit-transform 0.2s;
    transition: transform 0.2s;
    transition: transform 0.2s, -webkit-transform 0.2s;
}

.sidenav__sublist-control:hover {
    background-color: hsla(var(--color-contrast-higher-hsl), 0.15);
}

.sidenav__link--current + .sidenav__sublist-control:hover {
    background-color: hsla(var(--color-primary-hsl), 0.15);
}

.sidenav__label {
    padding-left: var(--sidenav-list-item-padding-x);
}

.sidenav__divider {
    width: 100%;
    height: 1px;
    background-color: var(--color-contrast-lower);
}

.sidenav--basic .sidenav__link, .sidenav--basic .sidenav__label {
    padding-left: var(--sidenav-list-item-padding-x);
}

.sidenav--minified {
    --sidenav-list-item-height: auto;
}

.sidenav--minified .sidenav__list .sidenav__list {
    display: none !important;
}

.sidenav--minified .sidenav__link, .sidenav--minified .sidenav__label {
    padding-left: var(--sidenav-list-item-padding-x);
}

.sidenav--minified .sidenav__link {
    flex-direction: column;
    padding-top: var(--space-sm);
    padding-bottom: var(--space-sm);
}

.sidenav--minified .sidenav__icon {
    margin: 0 0 var(--sidenav-icon-text-gap);
}

.sidenav--minified .sidenav__text {
    padding: 0;
}

.sidenav--minified .sidenav__counter, .sidenav--minified .sidenav__sublist-control {
    display: none;
}

@media (min-width: 64rem) {
    .sidenav__link {
        font-size: 0.9375rem;
    }
}

/* #endregion */
/* #region (_1_card) */
.card {
    position: relative;
}

.card__link {
    display: block;
    background-color: var(--color-bg-light);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);
    color: var(--color-contrast-higher);
    text-decoration: none;
    overflow: hidden;
    transition: 0.2s;
}

.card__link:hover {
    background-color: var(--color-bg-lighter);
    box-shadow: var(--shadow-sm);
}

.card__link:focus {
    outline: none;
    box-shadow: var(--shadow-sm), 0 0 0 2px var(--color-primary);
}

.card__link::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    box-shadow: var(--inner-glow);
    pointer-events: none;
}

.card__link > svg {
    width: 100%;
    height: auto;
}

.card__btn {
    position: absolute;
    right: var(--space-xs);
    bottom: 10px;
}

.card__fav-btn, .card__pro-badge, .card__new-badge {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card__fav-btn, .card__badge-group {
    position: absolute;
    top: var(--space-2xs);
}

.card__badge-group {
    left: var(--space-2xs);
}

.card__fav-btn {
    position: absolute;
    top: var(--space-2xs);
    background-color: hsla(var(--color-contrast-higher-hsl), 0.7);
    color: var(--color-bg);
    opacity: 0;
    right: var(--space-2xs);
}

.card__fav-btn:focus {
    outline: 2px solid hsla(var(--color-contrast-higher-hsl), 0.7);
    outline-offset: 2px;
}

.card:hover .card__fav-btn, .card--saved .card__fav-btn, .card__fav-btn:focus {
    opacity: 1;
}

.card__fav-btn:hover {
    background-color: hsla(var(--color-contrast-higher-hsl), 0.9);
    color: var(--color-bg);
}

.card--saved .card__fav-btn {
    background-color: hsla(var(--color-accent-hsl), 0.9);
    color: var(--color-white);
}

.card--saved .card__fav-btn:hover {
    background-color: hsla(var(--color-accent-hsl), 1);
}

.card--saved .card__fav-btn:focus {
    outline-color: var(--color-accent);
}

.card__pro-badge {
    left: var(--space-2xs);
    background-color: hsla(var(--color-accent-hsl), 0.9);
    color: var(--color-white);
}

.card:not(.card--pro) .card__pro-badge {
    display: none;
}

.comp-preview-pro .card__pro-badge {
    display: flex !important;
    /* used for the advanced search -> comp-preview-pro is added in js if the component is pro to the <li> external element */
}

.card__new-badge {
    background-color: hsla(var(--color-contrast-higher-hsl), 0.9);
    left: calc(var(--space-2xs) + 28px);
    color: var(--color-bg);
    font-size: 8px;
    font-weight: 500;
}

.card:not(.card--new) .card__new-badge {
    display: none;
}

@media (min-width: 80rem) {
    .card--component {
        max-width: 350px;
    }
}

/* #endregion */
/* #region (_1_card-2) */
.card-2 {
    background-color: var(--color-bg-light);
    box-shadow: var(--inner-glow), var(--shadow-xs);
    color: inherit;
    text-decoration: none;
    transition: 0.2s;
}

.card-2:hover {
    background-color: var(--color-bg-lighter);
    box-shadow: var(--inner-glow), var(--shadow-sm);
}

.card-2--not-for-tailwind {
    opacity: 80%;
    pointer-events: none;
}

.card-2--not-for-tailwind .icon-global {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}

/* #endregion */
/* #region (_1_modal-video-banner) */
.modal-video-banner {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    background-color: var(--color-bg-light);
    box-shadow: var(--inner-glow), var(--shadow-xs);
    padding: var(--space-xs);
    border-left: 3px solid var(--color-primary);
}

@media (min-width: 48rem) {
    .modal-video-banner {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

/* #endregion */
/* #region (_1_pro) */
.user-pro .pro\:hide, .user-logged-in .logged-in\:hide, body:not(.user-logged-in) .logged-in\:display, body:not(.user-pro) .pro\:display {
    display: none !important;
}

/* #endregion */
/* #region (_1_basic-nav-filter) */
.basic-nav-filter {
}

.basic-nav-filter__link {
    text-decoration: none;
    color: var(--color-contrast-low);
}

.basic-nav-filter__link--current, .basic-nav-filter__link:hover {
    color: var(--color-contrast-higher);
}

/* #endregion */
/* #region (_1_switch) */
:root {
    --switch-width: 54px;
    --switch-height: 28px;
    --switch-padding: 2px;
    --switch-animation-duration: 0.2s;
}

.switch {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    width: var(--switch-width);
    height: var(--switch-height);
    border-radius: 50em;
    padding: var(--switch-padding) 0;
}

.switch__input, .switch__label {
    position: absolute;
    left: 0;
    top: 0;
}

.switch__input {
    margin: 0;
    padding: 0;
    opacity: 0;
    height: 0;
    width: 0;
    pointer-events: none;
}

.switch__input:checked + .switch__label {
    background-color: var(--color-primary);
}

.switch__input:checked + .switch__label + .switch__marker {
    left: calc(100% - var(--switch-height) + var(--switch-padding));
}

.switch__input:focus + .switch__label, .switch__input:active + .switch__label {
    outline: 2px solid var(--color-contrast-high);
    outline-offset: 2px;
}

.switch__input:checked:focus + .switch__label, .switch__input:checked:active + .switch__label {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.switch__label {
    width: 100%;
    height: 100%;
    color: transparent;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: var(--color-contrast-lower);
    border-radius: inherit;
    z-index: 1;
    transition: left var(--switch-animation-duration), background-color var(--switch-animation-duration);
    overflow: hidden;
}

.switch__marker {
    position: relative;
    background-color: var(--color-white);
    width: calc(var(--switch-height) - var(--switch-padding) * 2);
    height: calc(var(--switch-height) - var(--switch-padding) * 2);
    border-radius: 50%;
    z-index: 2;
    pointer-events: none;
    box-shadow: var(--shadow-xs);
    left: var(--switch-padding);
    transition: left var(--switch-animation-duration);
    will-change: left;
}

/* #endregion */
/* #region (_1_global-animated-icons) */
/* buttons */
.icon-global-btns .icon-group :is(:nth-child(3), :nth-child(4), :nth-child(5)) {
    transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
    transition: transform 0.3s, -webkit-transform 0.3s;
}

.icon-global-btns .icon-group :nth-child(3) {
    -webkit-transform-origin: 27px 28px;
    transform-origin: 27px 28px;
}

.icon-global-btns .icon-group :is(:nth-child(4), :nth-child(5)) {
    -webkit-transform-origin: 21px 22px;
    transform-origin: 21px 22px;
}

.card-2:hover .icon-global-btns .icon-group :nth-child(3) {
    -webkit-transform: translate(-1px, -1px);
    transform: translate(-1px, -1px);
}

.card-2:hover .icon-global-btns .icon-group :is(:nth-child(4), :nth-child(5)) {
    -webkit-transform: translate(-2px, -2px);
    transform: translate(-2px, -2px);
}

/* colors */
.icon-global-colors .icon-group :is(:nth-child(3), :nth-child(4)) {
    -webkit-transform-origin: 17px 33px;
    transform-origin: 17px 33px;
    transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
    transition: transform 0.3s, -webkit-transform 0.3s;
}

.card-2:hover .icon-global-colors .icon-group :nth-child(3) {
    -webkit-transform: rotate(-4deg);
    transform: rotate(-4deg)
}

.card-2:hover .icon-global-colors .icon-group :nth-child(4) {
    -webkit-transform: rotate(-8deg);
    transform: rotate(-8deg)
}

/* forms */
.icon-global-forms .icon-group :is(:nth-child(2), :nth-child(3), :nth-child(5), :nth-child(6)) {
    transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
    transition: transform 0.3s, -webkit-transform 0.3s;
}

.icon-global-forms .icon-group :is(:nth-child(2), :nth-child(3)) {
    -webkit-transform-origin: 24px 14px;
    transform-origin: 24px 14px;
}

.icon-global-forms .icon-group :is(:nth-child(3)) {
    transition: stroke-dashoffset 0.3s, -webkit-transform 0.3s;
    transition: transform 0.3s, stroke-dashoffset 0.3s;
    transition: transform 0.3s, stroke-dashoffset 0.3s, -webkit-transform 0.3s;
    stroke-dasharray: 12;
    stroke-dashoffset: 0;
}

.icon-global-forms .icon-group :is(:nth-child(5), :nth-child(6)) {
    -webkit-transform-origin: 31px 36px;
    transform-origin: 31px 36px;
}

.card-2:hover .icon-global-forms .icon-group :is(:nth-child(2), :nth-child(3)) {
    -webkit-transform: translateY(-1px);
    transform: translateY(-1px);
}

.card-2:hover .icon-global-forms .icon-group :is(:nth-child(5), :nth-child(6)) {
    -webkit-transform: translateY(1px);
    transform: translateY(1px);
}

.card-2:hover .icon-global-forms .icon-group :is(:nth-child(3)) {
    stroke-dashoffset: 4;
}

/* shared styles */
.icon-global-shared-styles .icon-group :is(:nth-child(3), :nth-child(4)) {
    transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
    transition: transform 0.3s, -webkit-transform 0.3s;
}

.icon-global-shared-styles .icon-group :nth-child(3) {
    -webkit-transform-origin: 19px 21px;
    transform-origin: 19px 21px;
}

.icon-global-shared-styles .icon-group :nth-child(4) {
    -webkit-transform-origin: 38px 18px;
    transform-origin: 38px 18px;
}

.card-2:hover .icon-global-shared-styles .icon-group :nth-child(3) {
    -webkit-transform: translateX(-2px);
    transform: translateX(-2px);
}

.card-2:hover .icon-global-shared-styles .icon-group :nth-child(4) {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}

/* spacing */
.icon-global-spacing .icon-group :is(:nth-child(2), :nth-child(4), :nth-child(6), :nth-child(7)) {
    transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
    transition: transform 0.3s, -webkit-transform 0.3s;
}

.icon-global-spacing .icon-group :nth-child(2) {
    -webkit-transform-origin: 2px 14px;
    transform-origin: 2px 14px;
}

.icon-global-spacing .icon-group :nth-child(4) {
    -webkit-transform-origin: 2px 24px;
    transform-origin: 2px 24px;
}

.icon-global-spacing .icon-group :nth-child(6) {
    -webkit-transform-origin: 37px 12px;
    transform-origin: 37px 12px;
}

.icon-global-spacing .icon-group :nth-child(7) {
    -webkit-transform-origin: 37px 36px;
    transform-origin: 37px 36px;
}

.card-2:hover .icon-global-spacing .icon-group :nth-child(2) {
    -webkit-transform: translateY(-1px) scaleX(0.9);
    transform: translateY(-1px) scaleX(0.9);
}

.card-2:hover .icon-global-spacing .icon-group :nth-child(4) {
    -webkit-transform: translateY(1px) scaleX(1.1);
    transform: translateY(1px) scaleX(1.1);
}

.card-2:hover .icon-global-spacing .icon-group :nth-child(6) {
    -webkit-transform: translateY(-1px);
    transform: translateY(-1px);
}

.card-2:hover .icon-global-spacing .icon-group :nth-child(7) {
    -webkit-transform: translateY(1px);
    transform: translateY(1px);
}

/* typography */
.icon-global-typography .icon-group :is(:nth-child(3), :nth-child(4), :nth-child(5), :nth-child(6), :nth-child(7), :nth-child(8), :nth-child(9), :nth-child(10)) {
    transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
    transition: transform 0.3s, -webkit-transform 0.3s;
}

.icon-global-typography .icon-group :nth-child(3) {
    -webkit-transform-origin: 9px 24px;
    transform-origin: 9px 24px;
}

.icon-global-typography .icon-group :nth-child(4) {
    -webkit-transform-origin: 24px 39px;
    transform-origin: 24px 39px;
}

.icon-global-typography .icon-group :nth-child(5) {
    -webkit-transform-origin: 39px 24px;
    transform-origin: 39px 24px;
}

.icon-global-typography .icon-group :nth-child(6) {
    -webkit-transform-origin: 24px 9px;
    transform-origin: 24px 9px;
}

.icon-global-typography .icon-group :nth-child(7) {
    -webkit-transform-origin: 9px 9px;
    transform-origin: 9px 9px;
}

.icon-global-typography .icon-group :nth-child(8) {
    -webkit-transform-origin: 39px 9px;
    transform-origin: 39px 9px;
}

.icon-global-typography .icon-group :nth-child(9) {
    -webkit-transform-origin: 9px 39px;
    transform-origin: 9px 39px;
}

.icon-global-typography .icon-group :nth-child(10) {
    -webkit-transform-origin: 39px 39px;
    transform-origin: 39px 39px;
}

.card-2:hover .icon-global-typography .icon-group :nth-child(3) {
    -webkit-transform: translateX(1px);
    transform: translateX(1px);
}

.card-2:hover .icon-global-typography .icon-group :nth-child(4) {
    -webkit-transform: translateY(-1px);
    transform: translateY(-1px);
}

.card-2:hover .icon-global-typography .icon-group :nth-child(5) {
    -webkit-transform: translateX(-1px);
    transform: translateX(-1px);
}

.card-2:hover .icon-global-typography .icon-group :nth-child(6) {
    -webkit-transform: translateY(1px);
    transform: translateY(1px);
}

.card-2:hover .icon-global-typography .icon-group :nth-child(7) {
    -webkit-transform: translate(1px, 1px);
    transform: translate(1px, 1px);
}

.card-2:hover .icon-global-typography .icon-group :nth-child(8) {
    -webkit-transform: translate(-1px, 1px);
    transform: translate(-1px, 1px);
}

.card-2:hover .icon-global-typography .icon-group :nth-child(9) {
    -webkit-transform: translate(1px, -1px);
    transform: translate(1px, -1px);
}

.card-2:hover .icon-global-typography .icon-group :nth-child(10) {
    -webkit-transform: translate(-1px, -1px);
    transform: translate(-1px, -1px);
}

/* #endregion */
/* #region (_1_tooltip) */
:root {
    --tooltip-triangle-size: 8px;
}

.tooltip {
    /* tooltip element - created using js */
    position: absolute;
    z-index: var(--z-index-fixed-element);
    display: inline-block;
    padding: var(--space-2xs) var(--space-xs);
    border-radius: var(--radius-md);
    max-width: 200px;
    background-color: hsla(var(--color-contrast-higher-hsl), 0.98);
    box-shadow: var(--shadow-md);
    color: var(--color-bg);
    font-size: var(--text-sm);
    line-height: 1.4;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: opacity 0.2s, visibility 0.2s;
}

.tooltip a {
    color: inherit;
    text-decoration: underline;
}

.tooltip::before {
    /* tooltip triangle  */
    content: "";
    position: absolute;
    background-color: inherit;
    border: inherit;
    width: var(--tooltip-triangle-size);
    height: var(--tooltip-triangle-size);
    -webkit-clip-path: polygon(0% 0%, 100% 100%, 100% 100%, 0% 100%);
    clip-path: polygon(0% 0%, 100% 100%, 100% 100%, 0% 100%);
}

.tootip:not(.tooltip--sticky) {
    pointer-events: none;
}

/* size variations */
.tooltip--sm {
    max-width: 150px;
    font-size: var(--text-xs);
    padding: var(--space-4xs) var(--space-3xs);
}

.tooltip--md {
    max-width: 300px;
    padding: var(--space-xs) var(--space-sm);
}

.tooltip--lg {
    max-width: 350px;
    font-size: var(--text-base-size);
    padding: var(--space-xs) var(--space-sm);
}

/* tooltip position */
.tooltip {
    /* variable used in JS to proper place tooltip triangle */
    --tooltip-triangle-translate: 0px;
}

.tooltip--top::before, .tooltip--bottom::before {
    left: calc(50% - var(--tooltip-triangle-size) / 2);
}

.tooltip--top::before {
    bottom: calc(var(--tooltip-triangle-size) * -0.5);
    -webkit-transform: translateX(var(--tooltip-triangle-translate)) rotate(-45deg);
    transform: translateX(var(--tooltip-triangle-translate)) rotate(-45deg);
}

.tooltip--bottom::before {
    top: calc(var(--tooltip-triangle-size) * -0.5);
    -webkit-transform: translateX(var(--tooltip-triangle-translate)) rotate(135deg);
    transform: translateX(var(--tooltip-triangle-translate)) rotate(135deg);
}

.tooltip--left::before, .tooltip--right::before {
    top: calc(50% - var(--tooltip-triangle-size) / 2);
}

.tooltip--left::before {
    right: calc(var(--tooltip-triangle-size) * -0.5);
    -webkit-transform: translateX(var(--tooltip-triangle-translate)) rotate(-135deg);
    transform: translateX(var(--tooltip-triangle-translate)) rotate(-135deg);
}

.tooltip--right::before {
    left: calc(var(--tooltip-triangle-size) * -0.5);
    -webkit-transform: translateX(var(--tooltip-triangle-translate)) rotate(45deg);
    transform: translateX(var(--tooltip-triangle-translate)) rotate(45deg);
}

.tooltip--is-hidden {
    /* class used in JS to hide the tooltip element before its top/left positions are set */
    visibility: hidden;
    opacity: 0;
}

/* #endregion */
/* #region (_1_modal-window) */
.modal {
    position: fixed;
    z-index: var(--z-index-overlay, 15);
    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;
}

/* close button */
.modal__close-btn {
    display: flex;
    flex-shrink: 0;
    border-radius: 50%;
    transition: 0.2s;
}

.modal__close-btn .icon {
    display: block;
    margin: auto;
}

.modal__close-btn--outer {
    /* close button - outside the modal__content */
    width: 48px;
    height: 48px;
    position: fixed;
    top: var(--space-sm);
    right: var(--space-sm);
    z-index: var(--z-index-fixed-element, 10);
    background-color: hsla(var(--color-black-hsl), 0.9);
    transition: 0.2s;
}

.modal__close-btn--outer .icon {
    color: var(--color-white);
    /* icon color */
    transition: -webkit-transform 0.3s var(--ease-out-back);
    transition: transform 0.3s var(--ease-out-back);
    transition: transform 0.3s var(--ease-out-back), -webkit-transform 0.3s var(--ease-out-back);
}

.modal__close-btn--outer:hover {
    background-color: hsla(var(--color-black-hsl), 1);
}

.modal__close-btn--outer:hover .icon {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}

.modal__close-btn--inner {
    /* close button - inside the modal__content */
    --size: 32px;
    width: var(--size);
    height: var(--size);
    background-color: var(--color-bg-light);
    box-shadow: var(--inner-glow), var(--shadow-sm);
    transition: 0.2s;
}

.modal__close-btn--inner .icon {
    color: inherit;
    /* icon color */
}

.modal__close-btn--inner:hover {
    background-color: var(--color-bg-lighter);
    box-shadow: var(--inner-glow), var(--shadow-md);
}

/* animations */
:root {
    --modal-transition-duration: 0.2s;
    /* fallback (i.e., unless specified differently in the variations 👇) */
}

@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: .2s;
        transition: opacity var(--modal-transition-duration), background-color 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: -webkit-transform var(--modal-transition-duration) var(--ease-out);
        transition: transform var(--modal-transition-duration) var(--ease-out);
        transition: transform var(--modal-transition-duration) var(--ease-out), -webkit-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), background-color 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 {
        -webkit-transform: scale(1);
        transform: scale(1);
        /* reset all transformations */
    }

    .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: -webkit-transform var(--modal-transition-duration) var(--ease-out);
        transition: transform var(--modal-transition-duration) var(--ease-out);
        transition: transform var(--modal-transition-duration) var(--ease-out), -webkit-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 {
        -webkit-transform: scale(1);
        transform: scale(1);
        /* reset all transformations */
    }

    /* scale */
    .modal--animate-scale .modal__content {
        -webkit-transform: scale(0.95);
        transform: scale(0.95);
    }

    /* translate */
    .modal--animate-translate-up .modal__content {
        -webkit-transform: translateY(40px);
        transform: translateY(40px);
    }

    .modal--animate-translate-down .modal__content {
        -webkit-transform: translateY(-40px);
        transform: translateY(-40px);
    }

    .modal--animate-translate-right .modal__content {
        -webkit-transform: translateX(-40px);
        transform: translateX(-40px);
    }

    .modal--animate-translate-left .modal__content {
        -webkit-transform: translateX(40px);
        transform: translateX(40px);
    }

    /* slide */
    .modal--animate-slide-up .modal__content {
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
    }

    .modal--animate-slide-down .modal__content {
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%);
    }

    .modal--animate-slide-right .modal__content {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }

    .modal--animate-slide-left .modal__content {
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }
}

/* load content - optional */
.modal--is-loading .modal__content {
    visibility: hidden;
}

.modal--is-loading .modal__loader {
    display: flex;
}

.modal__loader {
    /* loader icon */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    display: none;
    pointer-events: none;
}

/* --image */
.modal-img-btn {
    position: relative;
    cursor: pointer;
}

.modal-img-btn::after {
    content: "";
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: hsla(var(--color-black-hsl), 0);
    transition: background 0.2s;
}

.modal-img-btn:hover::after {
    background-color: hsla(var(--color-black-hsl), 0.7);
}

.modal-img-btn:hover .modal-img-btn__icon-wrapper {
    opacity: 1;
}

.modal-img-btn__icon-wrapper {
    position: absolute;
    z-index: 2;
    top: calc(50% - 24px);
    left: calc(50% - 24px);
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: hsla(var(--color-black-hsl), 0.7);
    opacity: 0;
    transition: opacity 0.2s;
}

.modal-img-btn__icon-wrapper .icon {
    color: var(--color-white);
}

/* #endregion */
/* #region (_1_btn-states) */
.btn-states {
    position: relative;
}

.btn-states--state-b:not(.btn-states--preserve-width) .btn-states__content-a, .btn-states--state-c:not(.btn-states--preserve-width) .btn-states__content-a {
    display: none;
}

.btn-states:not(.btn-states--state-b) .btn-states__content-b, .btn-states:not(.btn-states--state-c) .btn-states__content-c {
    display: none;
}

/* preserve button width when switching from state A to state B */
.btn-states--preserve-width .btn-states__content-b, .btn-states--preserve-width .btn-states__content-c {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.btn-states--preserve-width.btn-states--state-b .btn-states__content-a, .btn-states--preserve-width.btn-states--state-c .btn-states__content-a {
    visibility: hidden;
}

/* #endregion */
/* #region (_1_radios-checkboxes) */
:root {
    /* radios + checkboxes */
    --checkbox-radio-size: 18px;
    --checkbox-radio-gap: var(--space-3xs);
    /* gap between button and label */
    --checkbox-radio-border-width: 1px;
    --checkbox-radio-line-height: var(--body-line-height);
    /* radios */
    --radio-marker-size: 8px;
    /* checkboxes */
    --checkbox-marker-size: 12px;
    --checkbox-radius: 4px;
}

/* hide native buttons */
.radio, .checkbox {
    position: absolute;
    padding: 0;
    margin: 0;
    margin-top: calc((1em * var(--checkbox-radio-line-height) - var(--checkbox-radio-size)) / 2);
    opacity: 0;
    height: var(--checkbox-radio-size);
    width: var(--checkbox-radio-size);
    pointer-events: none;
}

/* label */
.radio + label, .checkbox + label {
    display: inline-block;
    line-height: var(--checkbox-radio-line-height);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
    padding-left: calc(var(--checkbox-radio-size) + var(--checkbox-radio-gap));
}

/* custom inputs - basic style */
.radio + label::before, .checkbox + label::before {
    content: "";
    box-sizing: border-box;
    display: inline-block;
    position: relative;
    vertical-align: middle;
    top: -0.1em;
    margin-left: calc(-1 * (var(--checkbox-radio-size) + var(--checkbox-radio-gap)));
    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: hsla(var(--color-contrast-low-hsl), 0.65);
    border-style: solid;
    box-shadow: var(--shadow-xs);
    background-repeat: no-repeat;
    background-position: center;
    margin-right: var(--checkbox-radio-gap);
    transition: border 0.2s, -webkit-transform 0.2s;
    transition: transform 0.2s, border 0.2s;
    transition: transform 0.2s, border 0.2s, -webkit-transform 0.2s;
}

[data-theme="dark"] :is(.radio, .checkbox) + label::before {
    background-image: linear-gradient(to top, var(--color-bg-lighter), var(--color-bg-light));
    border-width: 0;
    box-shadow: inset 0 1px 0 hsla(var(--color-white-hsl), 0.1), var(--shadow-xs), var(--shadow-sm);
}

/* :hover */
.radio:not(:checked):not(:focus) + label:hover::before, .checkbox:not(:checked):not(:focus) + label:hover::before {
    border-color: hsla(var(--color-contrast-low-hsl), 1);
}

/* radio only style */
.radio + label::before {
    border-radius: 50%;
}

/* checkbox only style */
.checkbox + label::before {
    border-radius: var(--checkbox-radius);
}

/* :checked */
.radio:checked + label::before, .checkbox:checked + label::before {
    background-color: var(--color-primary);
    box-shadow: var(--shadow-xs);
    border-color: var(--color-primary);
    transition: -webkit-transform 0.2s;
    transition: transform 0.2s;
    transition: transform 0.2s, -webkit-transform 0.2s;
}

[data-theme="dark"] :is(.radio, .checkbox):checked + label::before {
    box-shadow: inset 0 1px 0 hsla(var(--color-white-hsl), 0.25), var(--shadow-xs), var(--shadow-sm);
}

/* :active */
.radio:active + label::before, .checkbox:active + label::before {
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
    transition: -webkit-transform 0.2s;
    transition: transform 0.2s;
    transition: transform 0.2s, -webkit-transform 0.2s;
}

/* :checked:active */
.radio:checked:active + label::before, .checkbox:checked:active + label::before {
    -webkit-transform: none;
    transform: none;
    transition: none;
}

/* radio button icon */
.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 button icon */
.checkbox:checked + label::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpolyline points='1 6.5 4 9.5 11 2.5' fill='none' stroke='%23FFFFFF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/svg%3E");
    background-size: var(--checkbox-marker-size);
}

/* :focus */
.radio:checked:active + label::before, .checkbox:checked:active + label::before, .radio:focus + label::before, .checkbox:focus + label::before {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px hsla(var(--color-primary-hsl), 0.2);
}

[data-theme="dark"] .checkbox:focus + label::before {
    box-shadow: inset 0 1px 0 hsla(var(--color-white-hsl), 0.1), var(--shadow-xs), var(--shadow-sm), 0 0 0 3px var(--color-bg-darker);
}

[data-theme="dark"] .checkbox:checked:focus + label::before {
    box-shadow: inset 0 1px 0 hsla(var(--color-white-hsl), 0.25), var(--shadow-xs), var(--shadow-sm), 0 0 0 3px hsla(var(--color-primary-hsl), 0.25);
}

/* --radio--bg, --checkbox--bg -> variation with background color */
.radio--bg + label, .checkbox--bg + label {
    padding: var(--space-3xs);
    padding-left: calc(var(--checkbox-radio-size) + var(--checkbox-radio-gap) + var(--space-3xs));
    border-radius: var(--radius-md);
    transition: background 0.2s;
}

.radio--bg + label:hover, .checkbox--bg + label:hover {
    background-color: hsla(var(--color-contrast-higher-hsl), 0.05);
}

[data-theme="dark"] :is(.radio--bg, .checkbox--bg) + label:hover {
    background-color: hsla(var(--color-contrast-higher-hsl), 0.04);
}

.radio--bg:active + label, .checkbox--bg:active + label, .radio--bg:focus + label, .checkbox--bg:focus + label {
    background-color: hsla(var(--color-primary-hsl), 0.1);
}

/* #endregion */
/* #region (_1_search-input) */
:root {
    --search-input-btn-width: 2.2em;
    --search-input-icon-size: 1em;
    --search-input-shortcut-margin: 0.325em;
    /* gap between the shortcut badge and the input edges */
}

.search-input {
    position: relative;
}

.search-input__input {
    width: 100%;
    height: 100%;
}

.search-input__input::-webkit-search-decoration, .search-input__input::-webkit-search-cancel-button, .search-input__input::-webkit-search-results-button, .search-input__input::-webkit-search-results-decoration {
    -webkit-appearance: none;
}

.search-input__input::-ms-clear, .search-input__input::-ms-reveal {
    display: none;
    width: 0;
    height: 0;
}

.search-input--icon-right .search-input__input {
    padding-right: var(--search-input-btn-width);
}

.search-input--icon-left .search-input__input {
    padding-left: var(--search-input-btn-width);
}

.search-input__btn {
    background-color: transparent;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: inherit;
    line-height: inherit;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: var(--search-input-btn-width);
}

.search-input__btn:active .icon {
    -webkit-transform: translateY(2px);
    transform: translateY(2px);
}

.search-input__btn .icon {
    display: block;
    --size: var(--search-input-icon-size);
    margin-left: auto;
    margin-right: auto;
    color: var(--color-contrast-low);
    /* icon color */
    transition: 0.2s;
}

.search-input--icon-left .search-input__btn {
    left: 0;
    right: auto;
    pointer-events: none;
}

.search-input__btn:focus .icon, .search-input .search-input__input:focus + .search-input__btn .icon {
    color: var(--color-primary);
    /* active icon color */
}

/* --shortcut */
.search-input__shortcut {
    position: absolute;
    right: var(--search-input-shortcut-margin);
    top: var(--search-input-shortcut-margin);
    height: calc(100% - var(--search-input-shortcut-margin)*2);
    display: flex;
    align-items: center;
    background-color: var(--color-bg);
    border: 1px solid var(--color-contrast-lower);
    border-radius: var(--radius-sm);
    --space-unit: 1em;
    padding: 0 var(--space-3xs);
    line-height: 1;
    color: var(--color-contrast-medium);
}

.search-input:focus-within .search-input__shortcut {
    display: none;
}

/* #endregion */
/* #region (_1_alert) */
.alert {
    background-color: hsla(var(--color-primary-hsl), 0.2);
    color: var(--color-contrast-higher);
    position: absolute;
    clip: rect(1px, 1px, 1px, 1px);
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
}

.alert__icon {
    color: var(--color-primary);
}

.alert__close-btn {
    display: inline-block;
    flex-shrink: 0;
    transition: 0.2s;
}

.alert__close-btn .icon {
    display: block;
    transition: -webkit-transform 0.2s;
    transition: transform 0.2s;
    transition: transform 0.2s, -webkit-transform 0.2s;
}

.alert__close-btn:hover .icon {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}

.alert--success {
    background-color: hsla(var(--color-success-hsl), 0.2);
}

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

.alert--error {
    background-color: hsla(var(--color-error-hsl), 0.2);
}

.alert--error .alert__icon {
    color: var(--color-error);
}

.alert--warning {
    background-color: hsla(var(--color-warning-hsl), 0.2);
}

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

.alert--is-visible {
    position: static;
    clip: auto;
    -webkit-clip-path: none;
    clip-path: none;
}

.alert a {
    color: inherit;
}

/* #endregion */
/* #region (_1_flash-message) */
.flash-message {
    position: fixed;
    bottom: var(--space-md);
    left: var(--space-md);
    z-index: var(--z-index-fixed-element);
    background-color: hsla(var(--color-contrast-higher-hsl), 0.9);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: var(--space-sm);
    font-size: var(--text-sm);
    color: var(--color-bg);
    line-height: 1;
}

.flash-message a {
    color: inherit;
}

.flash-message--error {
    background-color: hsla(var(--color-error-hsl), 0.95);
    color: var(--color-white);
}

/* #endregion */
/* #region (_1_footer) */
.footer {
}

/* #endregion */
/* #region (_1_card-3) */
.card-3 {
}

.card-3__figure {
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: 0.3s;
}

.card-3__figure::after {
    content: '';
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background-color: hsla(var(--color-black-hsl), 0);
    transition: .3s;
}

.card-3__figure:hover {
    box-shadow: var(--shadow-md);
}

.card-3__figure:hover::after {
    background-color: hsla(var(--color-black-hsl), 0.8);
}

.card-3__figure:hover .card-3__btn {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
}

.card-3__figure:hover .card-3__btn:nth-child(2) {
    transition-delay: 0.1s;
}

.card-3__btns {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.card-3__btn {
    padding: var(--space-xs) var(--space-sm);
    background-color: hsla(var(--color-white-hsl), 0.85);
    border-radius: var(--radius-md);
    min-width: 180px;
    opacity: 0;
    text-decoration: none;
    color: var(--color-black);
    text-align: center;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-transform: translateY(10px);
    transform: translateY(10px);
    pointer-events: auto;
    will-change: transform;
    transition: background-color 0.2s, opacity 0.3s, -webkit-transform 0.3s var(--ease-out);
    transition: background-color 0.2s, opacity 0.3s, transform 0.3s var(--ease-out);
    transition: background-color 0.2s, opacity 0.3s, transform 0.3s var(--ease-out), -webkit-transform 0.3s var(--ease-out);
}

.card-3__btn:hover {
    background-color: hsla(var(--color-white-hsl), 1);
}

.card-3__btn:nth-child(2) {
    background-color: hsla(var(--color-black-hsl), 0.9);
    color: var(--color-white);
    margin-top: var(--space-2xs);
}

.card-3__btn:nth-child(2):hover {
    background-color: hsla(var(--color-black-hsl), 1);
}

/* #endregion */
/* #region (_1_password) */
:root {
    --password-btn-width: 3em;
    --password-icon-size: 20px;
}

.password {
    position: relative;
}

.password__input {
    height: 100%;
}

.password__btn {
    background-color: transparent;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: inherit;
    line-height: inherit;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    height: 100%;
    width: var(--password-btn-width);
    justify-content: center;
    align-items: center;
    display: none;
}

.password__btn:focus {
    color: var(--color-primary);
}

.password__btn-label:last-child {
    display: none;
}

.password__btn-label .icon {
    width: var(--password-icon-size);
    height: var(--password-icon-size);
}

.password--text-is-visible .password__btn-label:first-child {
    display: none;
}

.password--text-is-visible .password__btn-label:last-child {
    display: inline-block;
}

.js .password__input {
    padding-right: calc(var(--space-sm) + var(--password-btn-width));
}

.js .password__input::-ms-reveal {
    display: none;
}

.js .password__btn {
    display: flex;
}

/* #endregion */
/* #region (_1_list) */
:root {
    --list-space-y: 0.375em;
    --list-offset: 1em;
    --list-line-height-multiplier: 1;
}

.list, .text-component .list {
    padding-left: 0;
    list-style: none;
}

.list :is(ul, ol), .text-component .list :is(ul, ol) {
    list-style: none;
    margin: 0;
    margin-top: calc((var(--list-space-y) / 2) * var(--text-space-y-multiplier, 1));
    padding-top: calc((var(--list-space-y) / 2) * var(--text-space-y-multiplier, 1));
    padding-left: var(--list-offset);
}

.list li, .text-component .list li {
    padding-bottom: calc((var(--list-space-y) / 2) * var(--text-space-y-multiplier, 1));
    margin-bottom: calc((var(--list-space-y) / 2) * var(--text-space-y-multiplier, 1));
    line-height: calc(var(--body-line-height) * var(--list-line-height-multiplier));
}

:is(.list, .list ul, .list ol, .text-component .list, text-component .list ul, .text-component .list ol) > li:last-child {
    margin-bottom: 0;
}

:is(.list:not(.list--border), .list ul, .list ol, .text-component .list:not(.list--border), .text-component .list ul, .text-component .list ol) {
    padding-bottom: 0;
}

/* ul + ol */
.list--ul, .text-component .list--ul, .list--ol, .text-component .list--ol {
    --list-offset: calc(var(--list-bullet-size) + var(--list-bullet-margin-right));
}

.list--ul ul, .list--ul ol, .text-component .list--ul ul, .text-component .list--ul ol, .list--ol ul, .list--ol ol, .text-component .list--ol ul, .text-component .list--ol ol {
    padding-left: 0;
}

@supports (--css: variables) {
    .list--ul li, .text-component .list--ul li, .list--ol li, .text-component .list--ol li {
        padding-left: var(--list-offset) !important;
    }
}

.list--ul li::before, .text-component .list--ul li::before, .list--ol li::before, .text-component .list--ol li::before {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
    position: relative;
    top: -0.1em;
}

@supports (--css: variables) {
    .list--ul li::before, .text-component .list--ul li::before, .list--ol li::before, .text-component .list--ol li::before {
        width: var(--list-bullet-size) !important;
        height: var(--list-bullet-size) !important;
        margin-left: calc(var(--list-bullet-size) * -1) !important;
        left: calc(var(--list-bullet-margin-right) * -1) !important;
    }
}

.list--ul, .text-component .list--ul {
    --list-bullet-size: 7px;
    --list-bullet-margin-right: 12px;
}

.list--ul > li, .text-component .list--ul > li {
    padding-left: 19px;
}

.list--ul > li::before, .text-component .list--ul > li::before {
    content: "";
    border-radius: 50%;
    color: var(--color-contrast-lower);
    background-color: currentColor;
    width: 7px;
    height: 7px;
    margin-left: -7px;
    left: -12px;
}

.list--ul ul li::before, .text-component .list--ul ul li::before {
    background-color: transparent;
    box-shadow: inset 0 0 0 2px currentColor;
}

.list--ol, .text-component .list--ol {
    --list-bullet-size: 26px;
    --list-bullet-margin-right: 12px;
    --list-bullet-font-size: 14px;
    counter-reset: list-items;
}

.list--ol > li, .text-component .list--ol > li {
    counter-increment: list-items;
    padding-left: 32px;
}

.list--ol ol, .text-component .list--ol ol {
    counter-reset: list-items;
}

.list--ol > li::before, .text-component .list--ol > li::before {
    content: counter(list-items);
    font-size: var(--list-bullet-font-size, 14px);
    background-color: hsla(var(--color-contrast-higher-hsl), 0.09);
    color: var(--color-contrast-high);
    line-height: 1;
    border-radius: 50%;
    width: 26px;
    height: 26px;
    margin-left: -26px;
    left: -6px;
}

.list--ol ol > li::before, .text-component .list--ol ol > li::before {
    background-color: transparent;
    box-shadow: inset 0 0 0 2px hsla(var(--color-contrast-higher-hsl), 0.09);
}

/* border */
.list--border li:not(:last-child), .text-component .list--border li:not(:last-child) {
    border-bottom: 1px solid var(--color-border-alpha);
}

.list--border ul, .list--border ol, .text-component .list--border ul, .text-component .list--border ol {
    border-top: 1px solid var(--color-border-alpha);
}

/* icons */
.list--icons, .text-component .list--icons {
    --list-bullet-size: 24px;
    --list-bullet-margin-right: 8px;
    --list-offset: calc(var(--list-bullet-size) + var(--list-bullet-margin-right));
}

.list--icons ul, .list--icons ol, .text-component .list--icons ul, .text-component .list--icons ol {
    padding-left: 32px;
}

@supports (--css: variables) {
    .list--icons ul, .list--icons ol, .text-component .list--icons ul, .text-component .list--icons ol {
        padding-left: var(--list-offset);
    }
}

.list__icon {
    position: relative;
    width: 24px;
    height: 24px;
    margin-right: 8px;
}

.list__icon:not(.top-0) {
    top: calc((1em * var(--body-line-height) - 24px) / 2);
}

@supports (--css: variables) {
    .list__icon {
        width: var(--list-bullet-size);
        height: var(--list-bullet-size);
        margin-right: var(--list-bullet-margin-right);
    }

    .list__icon:not(.top-0) {
        top: calc((1em * var(--body-line-height) * var(--list-line-height-multiplier) - var(--list-bullet-size)) / 2);
    }
}

/* #endregion */
/* #region (_1_progress-bar) */
:root {
    --progress-bar-height: 4px;
}

.progress-bar__bg {
    position: relative;
    height: var(--progress-bar-height);
    width: 100%;
    background-color: hsla(var(--color-contrast-higher), 0.1);
    flex-grow: 1;
    overflow: hidden;
}

.progress-bar__fill {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 0%;
    background-color: currentColor;
}

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

.js .progress-bar[data-animation=on]:not(.progress-bar--init) .progress-bar__fill, .js .progress-bar[data-animation=on]:not(.progress-bar--init) .progress-bar__value, .js .progress-bar--color-update:not(.progress-bar--init) .progress-bar__fill, .js .progress-bar--color-update:not(.progress-bar--init) .progress-bar__value {
    opacity: 0;
}

.progress-bar--color-update {
    --progress-bar-color-1: 30;
    --progress-bar-color-2: 65;
    --progress-bar-color-3: 100;
}

.progress-bar--color-update.progress-bar--init .progress-bar__fill {
    transition: background-color 0.3s;
}

.progress-bar--fill-color-1 .progress-bar__fill {
    background-color: var(--color-error);
}

.progress-bar--fill-color-2 .progress-bar__fill {
    background-color: var(--color-warning);
}

.progress-bar--fill-color-3 .progress-bar__fill {
    background-color: var(--color-success);
}

/* #endregion */
/* #region (_1_info-msg) */
.info-msg {
    background-color: hsla(var(--color-primary-hsl), 0.18);
    border-radius: var(--radius-md);
}

.info-msg--warning {
    background-color: hsla(var(--color-warning-hsl), 0.2);
}

.info-msg > *:last-child {
    margin-bottom: 0;
}

.info-msg a:not(.btn) {
    color: inherit;
}

/* #endregion */
/* #region (_1_note) */
.note {
    background-color: var(--color-bg-light);
    border-left: 3px solid var(--color-primary);
    box-shadow: var(--shadow-xs);
    padding: var(--space-xs);
}

.note .icon {
    color: var(--color-primary);
}

.note--warning {
    border-left-color: var(--color-warning);
}

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

.note--error {
    border-left-color: var(--color-error);
}

.note--error .icon {
    color: var(--color-error);
}

.note--success {
    border-left-color: var(--color-success);
}

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

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

.text-component .note__title {
    margin-bottom: 0;
}

/* #endregion */
/* #region (_1_table) */
.tbl {
    position: relative;
    z-index: 1;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.tbl::-webkit-scrollbar {
    height: 8px;
    width: 8px;
}

.tbl::-webkit-scrollbar-track {
    background-color: var(--color-contrast-lower);
}

.tbl::-webkit-scrollbar-thumb {
    background-color: var(--color-contrast-low);
    border-radius: 50em;
}

.tbl::-webkit-scrollbar-thumb:hover {
    background-color: var(--color-contrast-medium);
}

.tbl__table, .tbl__header {
    border-bottom: 1px solid var(--color-contrast-lower);
}

.tbl__table {
    width: 100%;
}

.tbl__header {
    background-color: hsla(var(--color-contrast-higher-hsl), 0.035);
}

.tbl__body .tbl__row {
    border-bottom: 1px solid hsla(var(--color-contrast-higher-hsl), 0.09);
    transition: 0.2s;
}

.tbl__body .tbl__row:hover {
    background-color: hsla(var(--color-contrast-higher-hsl), 0.035);
}

.tbl__body .tbl__row:last-child {
    border-bottom: none;
}

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

.tbl__cell, .tbl code {
    font-size: var(--text-sm);
}

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

.tbl__header .tbl__cell {
    color: var(--color-contrast-higher);
    font-weight: 600;
}

.tbl--code-col-2 thead th {
    width: 50%;
    /* tables with two cols */
}

/* #endregion */
/* #region (_1_blog-post) */
.blog-post {
    padding: var(--space-lg) 0;
}

.blog-post:first-child {
    padding-top: 0;
}

/* #endregion */
/* #region (_1_notice - e.g. cookie banner) */
.notice {
    position: fixed;
    width: 100%;
    pointer-events: none;
    z-index: var(--z-index-fixed-element, 10);
}

.notice__banner {
    pointer-events: auto;
    background-color: var(--color-bg-light);
    padding: var(--space-sm);
    border-radius: var(--radius-md);
    box-shadow: var(--inner-glow), var(--shadow-md);
}

.notice--warning .notice__banner {
    background-color: hsla(var(--color-warning-hsl), 0.97);
    color: var(--color-white);
}

.notice--warning a {
    color: inherit;
}

.notice__close-btn {
    --size: 32px;
    display: flex;
    width: var(--size);
    height: var(--size);
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background-color: hsla(var(--color-contrast-higher-hsl), 0.075);
    transition: 0.2s;
}

.notice__close-btn:hover {
    background-color: hsla(var(--color-contrast-higher-hsl), 0.1);
}

.notice--warning .notice__close-btn {
    background-color: hsla(var(--color-warning-darker-hsl), 0.9);
}

.notice--warning .notice__close-btn:hover {
    background-color: hsla(var(--color-warning-darker-hsl), 1);
}

.notice__close-btn .icon {
    --size: 16px;
}

.notice--hide {
    opacity: 0;
    visibility: hidden;
}

@media screen and (prefers-reduced-motion: no-preference) {
    .notice {
        transition: opacity 0.3s, visibility 0s 0.3s;
    }

    .notice__banner {
        transition: -webkit-transform 0.3s;
        transition: transform 0.3s;
        transition: transform 0.3s, -webkit-transform 0.3s;
    }

    .notice--hide .notice__banner {
        -webkit-transform: translateY(20px);
        transform: translateY(20px);
    }
}

/* #endregion */
/* #region (_1_list-filter) */
:root {
    --list-filter-height: 240px;
}

.list-filter__form {
    overflow: hidden;
}

.list-filter__search {
    position: relative;
    width: 100%;
    z-index: 1;
}

.list-filter__search::-webkit-search-decoration, .list-filter__search::-webkit-search-cancel-button, .list-filter__search::-webkit-search-results-button, .list-filter__search::-webkit-search-results-decoration {
    -webkit-appearance: none;
}

.list-filter__search::-ms-clear, .list-filter__search::-ms-reveal {
    display: none;
    width: 0;
    height: 0;
}

.list-filter__search:focus {
    outline: none;
}

.list-filter__search:focus + .list-filter__focus-marker {
    opacity: 1;
}

.list-filter__search:-moz-placeholder-shown ~ .list-filter__search-cancel-btn {
    display: none;
}

.list-filter__search:-ms-input-placeholder ~ .list-filter__search-cancel-btn {
    display: none;
}

.list-filter__search:placeholder-shown ~ .list-filter__search-cancel-btn {
    display: none;
}

.list-filter__search-cancel-btn {
    /* custom search cancel button */
    display: inline-block;
    position: absolute;
    z-index: 2;
    color: var(--color-contrast-medium);
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    cursor: pointer;
    border-radius: 50%;
}

.list-filter__search-cancel-btn:hover {
    opacity: 0.85;
}

.list-filter__focus-marker {
    display: block;
    height: 1em;
    width: 3px;
    background-color: var(--color-primary);
    position: absolute;
    left: 0;
    top: calc(50% - 0.5em);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
}

.list-filter__list-wrapper {
    position: relative;
    height: var(--list-filter-height);
}

.list-filter__list {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
}

.list-filter__item {
    display: flex;
    align-items: center;
    cursor: default;
    transition: background-color 0.2s;
}

.list-filter__item:hover {
    background-color: hsla(var(--color-contrast-higher-hsl), 0.075);
}

.list-filter__status {
    display: block;
    flex-shrink: 0;
    --size: 8px;
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
}

.list-filter__item--user-active .list-filter__status {
    background-color: var(--color-success);
}

.list-filter__item--user-active .list-filter__status::after {
    content: "user active";
    position: absolute;
    clip: rect(1px, 1px, 1px, 1px);
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
}

.list-filter__item--user-pending .list-filter__status {
    background-color: var(--color-warning);
}

.list-filter__item--user-pending .list-filter__status::after {
    content: "user pending";
    position: absolute;
    clip: rect(1px, 1px, 1px, 1px);
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
}

.list-filter__action-btn {
    display: flex;
    flex-shrink: 0;
    background-color: var(--color-bg);
    border: 1px solid hsla(var(--color-contrast-higher-hsl), 0.15);
    border-radius: 50%;
    width: 24px;
    height: 24px;
    cursor: pointer;
    transition: 0.2s;
}

.list-filter__action-btn .icon {
    margin: auto;
}

.list-filter__action-btn:hover {
    border-color: var(--color-error);
    color: var(--color-error);
}

/* #endregion */
/* #region (_1_dynamic-content) */
.dynamic-content {
    position: relative;
}

.dynamic-content__loader {
    position: absolute;
    top: 50%;
    left: 0;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    display: none;
}

.dynamic-content__loader--center {
    left: 50%;
    -webkit-transform: translateY(-50%) translateX(-50%);
    transform: translateY(-50%) translateX(-50%);
}

.dynamic-content__error {
    display: none;
}

.dynamic-content--is-loading .dynamic-content__loader {
    display: block;
}

.dynamic-content--is-loading .dynamic-content__content {
    opacity: 0.2;
}

.dynamic-content--has-error .dynamic-content__content, .dynamic-content--has-error .dynamic-content__loader {
    display: none;
}

.dynamic-content--has-error .dynamic-content__error {
    display: block;
}

/* #endregion */
/* #region (_1_project) */
.project__preview {
    position: relative;
    display: block;
    background-color: var(--color-bg-light);
    border-radius: var(--radius-md);
    box-shadow: var(--inner-glow), var(--shadow-xs);
    color: var(--color-contrast-higher);
    text-decoration: none;
    font-size: 1rem;
}

.project__overlay, .project__overlay-msg, .project__lock {
    position: absolute;
}

.project__overlay-msg, .project__lock {
    top: 50%;
    left: 50%;
    opacity: 0;
}

.project__overlay {
    top: 2px;
    right: 2px;
    bottom: 2px;
    left: 2px;
    border-radius: var(--radius-sm);
    opacity: 0;
    transition: opacity 0.3s;
}

.project__overlay-msg {
    -webkit-transform: translate(-50%, -30%);
    transform: translate(-50%, -30%);
    display: inline-block;
    padding: var(--space-sm);
    border-radius: 50em;
    line-height: 1;
    white-space: nowrap;
    transition: opacity 0.3s, -webkit-transform 0.3s;
    transition: opacity 0.3s, transform 0.3s;
    transition: opacity 0.3s, transform 0.3s, -webkit-transform 0.3s;
}

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

.project__preview:hover .project__overlay {
    opacity: 0.85;
}

.project__preview:hover .project__overlay-msg {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.project--locked .project__overlay {
    opacity: 0.85;
}

.project--locked .project__overlay-msg {
    display: none;
}

.project--locked .project__lock {
    opacity: 1;
}

/* #endregion */
/* #region (_1_slider-input) */
.app-slider-control {
    position: relative;
    display: flex;
    align-items: center;
    --slider-fill-value: 100%;
    --slider-empty-value: 0%;
}

.app-slider-control input[type=range] {
    display: block;
    -webkit-appearance: none;
    /* Hides the slider so that custom slider can be made */
    width: 100%;
    /* Specific width is required for Firefox. */
    background: transparent;
    /* Otherwise white in Chrome */
}

.app-slider-control input[type=range]:focus {
    outline: none;
}

.app-slider-control input[type=range]::-moz-focus-outer {
    border: 0;
}

.app-slider-control input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px);
    /* handle style start */
    width: 10px;
    height: 10px;
    border-radius: 10px;
    border: none;
    background-color: var(--color-white);
    box-shadow: 0 1px 1px rgba(0, 0, 0, .3), 0 1px 8px rgba(0, 0, 0, .2);
    /* handle style end */
}

.app-slider-control input[type=range]::-moz-range-thumb {
    /* handle style start */
    width: 10px;
    height: 10px;
    border-radius: 10px;
    border: none;
    background-color: var(--color-white);
    box-shadow: 0 1px 1px rgba(0, 0, 0, .3), 0 1px 8px rgba(0, 0, 0, .2);
    /* handle style end */
}

.app-slider-control input[type=range]::-ms-thumb {
    /* handle style start */
    width: 10px;
    height: 10px;
    border-radius: 10px;
    border: none;
    background-color: var(--color-white);
    box-shadow: 0 1px 1px rgba(0, 0, 0, .3), 0 1px 8px rgba(0, 0, 0, .2);
    /* handle style end */
    transform: translateY(0);
    background-color: white;
}

.app-slider-control input[type=range]::-webkit-slider-runnable-track {
    /* slider style start */
    background-color: var(--color-contrast-lower);
    height: 2px;
    border-radius: 4px;
    background-image: linear-gradient(to right, var(--color-primary) var(--slider-fill-value), var(--color-contrast-lower) var(--slider-fill-value), var(--color-contrast-lower) var(--slider-empty-value));
    /* slider style end */
}

.app-slider-control input[type=range]::-moz-range-track {
    /* slider style start */
    background-color: var(--color-contrast-lower);
    height: 2px;
    border-radius: 4px;
    background-image: linear-gradient(to right, var(--color-primary) var(--slider-fill-value), var(--color-contrast-lower) var(--slider-fill-value), var(--color-contrast-lower) var(--slider-empty-value));
    /* slider style end */
}

.app-slider-control input[type=range]::-ms-track {
    /* slider style start */
    background-color: var(--color-contrast-lower);
    height: 2px;
    border-radius: 4px;
    background-image: linear-gradient(to right, var(--color-primary) var(--slider-fill-value), var(--color-contrast-lower) var(--slider-fill-value), var(--color-contrast-lower) var(--slider-empty-value));
    /* slider style end */
    background-color: hsl(240, 1%, 60%);
}

/* #endregion */
/* #region (_1_table-of-contents) */
/* style affecting collapsed + static versions */
.toc {
}

.toc__list {
    position: relative;
}

.toc__list .toc__list .toc__link {
    padding-left: calc(var(--space-sm) * 2);
    /* offset sub nav */
}

.toc__link, .toc__label {
    padding: var(--space-3xs) var(--space-sm);
}

.toc__link {
    position: relative;
    color: var(--color-contrast-medium);
    text-decoration: none;
    line-height: 1.32;
}

.toc__link::before {
    /* left mark */
    content: "";
    width: 1px;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

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

.toc__link--selected {
    color: var(--color-primary);
}

.toc__link--selected:hover {
    color: var(--color-primary);
}

.toc__label {
    /* label style */
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: var(--text-sm);
}

.toc__control {
    /* control button */
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.toc__control-text {
    /* text inside control button */
    position: relative;
}

.toc__control-text > * {
    display: inline-block;
    transition: opacity 0.4s, -webkit-transform 0.4s var(--ease-out);
    transition: opacity 0.4s, transform 0.4s var(--ease-out);
    transition: opacity 0.4s, transform 0.4s var(--ease-out), -webkit-transform 0.4s var(--ease-out);
}

.toc__control-text > *:last-child {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    pointer-events: none;
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
}

/* arrow icon  */
.toc__icon-arrow {
}

.toc__icon-arrow .icon__group {
    will-change: transform;
    -webkit-transform-origin: 8px 8px;
    transform-origin: 8px 8px;
    transition: -webkit-transform 0.3s var(--ease-out);
    transition: transform 0.3s var(--ease-out);
    transition: transform 0.3s var(--ease-out), -webkit-transform 0.3s var(--ease-out);
}

.toc__icon-arrow .icon__group > * {
    -webkit-transform-origin: 8px 8px;
    transform-origin: 8px 8px;
    stroke-dasharray: 17;
    -webkit-transform: translateY(3px);
    transform: translateY(3px);
    transition: stroke-dashoffset 0.3s, -webkit-transform 0.3s;
    transition: transform 0.3s, stroke-dashoffset 0.3s;
    transition: transform 0.3s, stroke-dashoffset 0.3s, -webkit-transform 0.3s;
    transition-timing-function: var(--ease-out);
}

.toc__icon-arrow .icon__group > *:first-child {
    stroke-dashoffset: 10;
}

.toc__icon-arrow .icon__group > *:last-child {
    stroke-dashoffset: 10;
}

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

/* collapsed version only - mobile 👇 */
.toc:not(.toc--static) {
    border-radius: var(--radius-md);
    background-color: var(--color-bg-light);
    box-shadow: var(--inner-glow), var(--shadow-sm);
    transition: 0.3s;
}

.toc:not(.toc--static):hover {
    box-shadow: var(--inner-glow), var(--shadow-md);
}

.toc:not(.toc--static) .toc__nav {
    /* navigation */
    display: none;
    margin: var(--space-2xs) 0;
}

.toc:not(.toc--static) .toc__list {
    padding-bottom: var(--space-xs);
}

.toc:not(.toc--static) .toc__label {
    display: none;
}

.toc:not(.toc--static) .toc__link {
    display: flex;
}

.toc:not(.toc--static).toc--expanded .toc__control-text > *:first-child {
    -webkit-transform: translateY(10px);
    transform: translateY(10px);
    opacity: 0;
    pointer-events: none;
}

.toc:not(.toc--static).toc--expanded .toc__control-text > *:last-child {
    opacity: 1;
    pointer-events: auto;
    -webkit-transform: translateY(0);
    transform: translateY(0);
}

.toc:not(.toc--static).toc--expanded .toc__nav {
    display: block;
    -webkit-animation: toc-entry-animation 0.4s var(--ease-out);
    animation: toc-entry-animation 0.4s var(--ease-out);
}

.toc:not(.toc--static).toc--expanded .toc__icon-arrow .icon__group {
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

.toc:not(.toc--static).toc--expanded .toc__icon-arrow .icon__group > *:first-child, .toc:not(.toc--static).toc--expanded .toc__icon-arrow .icon__group *:last-child {
    stroke-dashoffset: 0;
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
}

/* static version only - desktop 👇 */
.toc--static {
    box-shadow: inset 1px 0 0 var(--color-border-alpha);
    /* left border */
}

.toc--static[class*=position-sticky] {
    top: var(--space-md);
    /* used if position = sticky */
    max-height: calc(100vh - var(--space-md) * 2);
    /* set max height */
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.toc--static .toc__label {
    font-size: var(--text-xs);
    font-weight: 500;
}

.toc--static .toc__link {
    display: inline-flex;
    font-size: var(--text-sm);
}

.toc--static .toc__link--selected::before {
    background-color: var(--color-primary);
}

.toc--static .toc__control {
    display: none;
    /* control - static version only */
}

.toc-content--toc-static *:target {
    -webkit-animation: toc-target 2s;
    animation: toc-target 2s;
    /* highlight section on target */
}

@-webkit-keyframes toc-target {
    0%, 50% {
        outline: 2px solid hsla(var(--color-primary-hsl), 0.5);
    }

    100% {
        outline: 2px solid hsla(var(--color-primary-hsl), 0);
    }
}

@keyframes toc-target {
    0%, 50% {
        outline: 2px solid hsla(var(--color-primary-hsl), 0.5);
    }

    100% {
        outline: 2px solid hsla(var(--color-primary-hsl), 0);
    }
}

@-webkit-keyframes toc-entry-animation {
    from {
        opacity: 0;
        -webkit-transform: translateY(-10px);
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
    }
}

@keyframes toc-entry-animation {
    from {
        opacity: 0;
        -webkit-transform: translateY(-10px);
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
    }
}

/* no-js support */
html:not(.js) .toc .toc__nav {
    display: block;
}

/* used in JS - detect when the TOC needs to switch from a collapsed to a static version */
[class*=toc--static]::before {
    display: none;
    content: "collapsed";
}

@media (min-width: 32rem) {
    .toc--static\@xs::before {
        content: "static";
    }
}

@media (min-width: 48rem) {
    .toc--static\@sm::before {
        content: "static";
    }
}

@media (min-width: 64rem) {
    .toc--static\@md::before {
        content: "static";
    }
}

@media (min-width: 80rem) {
    .toc--static\@lg::before {
        content: "static";
    }
}

@media (min-width: 90rem) {
    .toc--static\@xl::before {
        content: "static";
    }
}

/* #endregion */
/* #region (_1_tutorial-avd) */
.tutorial-avd {
    display: block;
    background-color: var(--color-contrast-higher);
    color: var(--color-bg);
    border-radius: var(--radius-md);
    text-align: center;
    text-decoration: none;
    font-size: var(--text-md);
    transition: background-color .3s !important;
}

.tutorial-avd:hover {
    background-color: var(--color-contrast-high);
    background-image: none !important;
}

/* #endregion */
/* #region (_1_app-header) */
:root {
    --app-header-height: 44px;
}

.app-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: var(--z-index-fixed-element);
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--app-header-height);
    font-size: var(--text-sm);
    box-shadow: inset 0 -1px 0 hsla(var(--color-contrast-higher-hsl), 0.135);
    padding: 0 var(--space-2xs);
}

.app-header__menu-btn.popover-control--active > *:first-child, .app-header__menu-btn > *:last-child {
    display: none;
}

.app-header__menu-btn.popover-control--active > *:last-child {
    display: block;
}

/* #endregion */
/* #region (_1_app-tabs - sub header) */
:root {
    --app-tabs-height: 28px;
}

.app-tabs {
    position: fixed;
    top: var(--app-header-height);
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    height: var(--app-tabs-height);
    background-color: var(--color-bg-dark);
    box-shadow: inset 0 -1px 0 var(--color-border-alpha);
    font-size: var(--text-sm);
}

.app-tabs__inner {
    display: flex;
    overflow: auto;
}

.app-tabs__item {
    position: relative;
    flex-shrink: 0;
}

.app-tabs__link {
    display: block;
    line-height: var(--app-tabs-height);
    padding: 0 var(--space-2xs);
    color: var(--color-contrast-low);
    text-decoration: none;
    cursor: pointer;
}

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

.app-tabs__item--selected .app-tabs__link {
    color: var(--color-contrast-higher);
}

.app-tabs__item--selected::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    height: 1px;
    width: 100%;
    background-color: var(--color-primary);
}

/* #endregion */
/* #region (_1_bookmark-btn) */
.bookmark-btn {
    display: inline-flex;
    color: var(--color-contrast-higher);
    opacity: 0.35;
}

.bookmark-btn:hover {
    opacity: 0.5;
}

.bookmark-btn.selected {
    color: var(--color-accent);
    opacity: 0.85;
}

.bookmark-btn.selected:hover {
    opacity: 1;
}

/* #endregion */
/* #region (_1_split-button) */
.split-btn > *:first-child {
    height: 100%;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.split-btn > *:last-child {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.split-btn .btn:focus {
    position: relative;
    z-index: 1;
}

.split-btn__separator {
    width: 1px;
    /* gap between buttons */
}

/* #endregion */
/* #region (_1_btns) */
:root {
    --btns-button-radius: var(--radius-md);
    --btns-button-padding-x: var(--space-sm);
    --btns-button-padding-y: var(--space-2xs);
}

.btns {
    /* button group */
}

.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:is([class^="gap-"], [class*=" gap-"]) .btns__btn {
    border-radius: var(--btns-button-radius) !important;
}

/* single button */
.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: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    padding: var(--btns-button-padding-y) var(--btns-button-padding-x);
    background-color: hsla(var(--color-contrast-higher-hsl), 0.1);
    transition: background 0.2s;
    cursor: pointer;
}

.btns__btn:hover:not(.btns__btn--selected) {
    background-color: hsla(var(--color-contrast-higher-hsl), 0.075);
}

.btns__btn:focus {
    z-index: 1;
    outline: 2px solid var(--color-contrast-higher);
    outline-offset: 2px;
}

.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 {
    /* selected style */
    background-color: var(--color-contrast-higher);
    color: var(--color-bg);
}

.btns__btn--disabled {
    opacity: 0.7;
    cursor: not-allowed;
    text-decoration: line-through;
}

/* --radio, --checkbox */
.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;
}

.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-y);
}

.btns__btn--icon .icon {
    display: block;
}

/* #endregion */
/* #region (_1_app-canvas) */
.app-canvas {
    position: fixed;
    top: var(--app-header-height);
    left: 0;
    width: 100%;
    height: calc(100% - var(--app-header-height));
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
}

.app-canvas--sidebars-visible {
    padding: 0 var(--app-sidebar-width);
}

.app-canvas__iframe {
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0;
}

.app-canvas__iframe--content-is-loaded {
    opacity: 1;
}

.app-canvas__loader {
    display: block;
    position: fixed;
    top: calc(50% - 32px);
    left: calc(50% - 32px);
    z-index: var(--z-index-fixed-element);
}

.app-canvas--tabs-is-visible {
    top: calc(var(--app-header-height) + var(--app-tabs-height));
    height: calc(100% - var(--app-header-height) - var(--app-tabs-height));
}

/* #endregion */
/* #region (_1_app-sidebar) */
:root {
    --app-sidebar-width: 260px;
}

.app-sidebar {
    position: fixed;
    top: var(--app-header-height);
    z-index: 1;
    background-color: var(--color-bg);
    height: calc(100% - var(--app-header-height));
    width: var(--app-sidebar-width);
}

.app-sidebar--hide {
    display: none;
}

.app-sidebar--tabs-is-visible {
    top: calc(var(--app-header-height) + var(--app-tabs-height));
    height: calc(100% - var(--app-header-height) - var(--app-tabs-height));
}

.app-sidebar--content {
    left: 0;
    border-right: 1px solid hsla(var(--color-contrast-higher-hsl), 0.135);
}

.app-sidebar--editor {
    right: 0;
    border-left: 1px solid hsla(var(--color-contrast-higher-hsl), 0.135);
}

.app-sidebar__inner {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    overflow: auto;
}

.app-sidebar__inner::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

.app-sidebar__inner::-webkit-scrollbar-track {
    background-color: hsla(var(--color-contrast-higher-hsl), 0.1);
}

.app-sidebar__inner::-webkit-scrollbar-thumb {
    background-color: hsla(var(--color-contrast-higher-hsl), 0.2);
    border-radius: 0;
}

.app-sidebar__inner::-webkit-scrollbar-thumb:hover {
    background-color: hsla(var(--color-contrast-higher-hsl), 0.25);
}

/* #endregion */
/* #region (_1_app-label) */
.app-label {
    color: var(--color-contrast-medium);
    font-size: var(--text-xs);
}

.app-editor-section__title:hover .app-label {
    color: var(--color-contrast-high);
}

/* #endregion */
/* #region (_1_app-content) */
.app-content-switch {
}

.app-content-switch__group {
    display: none;
}

.app-content-switch__arrow {
    transition: -webkit-transform 0.2s;
    transition: transform 0.2s;
    transition: transform 0.2s, -webkit-transform 0.2s;
}

.app-content-switch--is-open .app-content-switch__group {
    display: block;
}

.app-content-switch--is-open .app-content-switch__arrow {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}

.app-content-item {
    font-size: var(--text-sm);
}

.app-content-item:hover:not(.app-content-item--is-selected) {
    color: var(--color-contrast-higher);
}

.app-content-item:not(.app-content-item--is-editable) {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.app-content-item--is-hidden, .app-content-item--is-hidden.flex {
    display: none;
}

.app-content-item__spacer {
    display: none;
}

.app-content-children .app-content-item__spacer {
    display: block;
}

.app-content-item__cta, .app-content-children {
    display: none;
}

.app-content-item--is-editable:hover:not(.app-content-item--is-editing) .app-content-item__cta, .app-content-item--parent.app-content-item--is-editable .app-content-item__cta {
    display: flex;
}

.app-content-item__arrow {
    transition: -webkit-transform 0.2s;
    transition: transform 0.2s;
    transition: transform 0.2s, -webkit-transform 0.2s;
}

.app-content-item--show-children .app-content-item__arrow {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}

.app-content-item--show-children + .app-content-children {
    display: block;
}

.app-content-item--is-selected {
    background: hsla(var(--color-primary-hsl), 0.15);
    color: var(--color-primary);
}

.app-content-item--is-selected .app-content-item__cta .btn, .app-content-item--is-selected .icon {
    color: inherit;
}

.app-content-item__text[contenteditable]:focus {
    outline: none;
}

.app-content-item--is-editing {
    background-color: var(--color-bg);
    box-shadow: 0 0 0 2px var(--color-primary);
}

.app-content-item--is-editing .app-content-item__cta {
    display: none;
}

/* .app-content-item--is-editing .app-content-item__text {
  text-overflow: clip;
} */
/* #endregion */
/* #region (_1_app-editor) */
.app-editor-section {
    border-bottom: 1px solid var(--color-border-alpha);
}

.app-editor-section--is-hidden {
    display: none;
}

.app-editor-section__body {
    padding: 0 var(--space-3xs) var(--space-3xs);
    margin: 0 var(--space-3xs) var(--space-3xs);
}

.app-editor-section__title--hide-body ~ .app-editor-section__body {
    display: none;
}

.app-editor-section__arrow {
    transition: -webkit-transform 0.2s;
    transition: transform 0.2s;
    transition: transform 0.2s, -webkit-transform 0.2s;
}

.app-editor-section__title--hide-body .app-editor-section__arrow {
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

.app-editor-section__title:not(.app-editor-section__title--create) .app-editor-section__create-btn {
    display: none;
}

.app-editor-section__edit-indicator {
    display: none;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: var(--color-accent);
    margin-left: var(--space-3xs);
}

.app-editor-section--content-edited .app-editor-section__edit-indicator {
    display: block;
}

.app-color-picker {
}

.app-color-picker__preview {
    flex-shrink: 0;
    position: relative;
    border-radius: var(--radius-md);
    box-shadow: inset 0 0 0 1px hsla(var(--color-contrast-higher-hsl), 0.15);
    transition: -webkit-transform 0.2s;
    transition: transform 0.2s;
    transition: transform 0.2s, -webkit-transform 0.2s;
    font-size: var(--text-xs);
}

.app-color-picker__preview:active {
    -webkit-transform: translateY(2px);
    transform: translateY(2px);
}

.app-color-picker__preview:focus-within {
    outline: 2px solid var(--color-contrast-higher);
    outline-offset: 2px;
}

.app-color-picker__native {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}

.app-editor__color-preview {
    flex-shrink: 0;
    box-shadow: inset 0 0 0 1px hsla(var(--color-contrast-higher-hsl), 0.15);
    border-radius: 50%;
}

.app-editor-property {
    display: grid;
    grid-template-columns: auto 144px;
    gap: var(--space-3xs);
    align-items: center;
    justify-content: space-between;
}

.app-editor__lock-icon, .app-editor__cta-delete {
    display: none;
}

.app-editor__color-item--locked .app-editor__lock-icon {
    display: block;
}

.app-editor__color-item--removable .app-editor__cta-delete {
    display: inline-flex;
}

.app-editor-property__color-preview {
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: inset 0 0 0 1px hsla(var(--color-contrast-higher-hsl), 0.15);
    transition: -webkit-transform 0.2s;
    transition: transform 0.2s;
    transition: transform 0.2s, -webkit-transform 0.2s;
}

.app-editor-property__color-preview:focus, .app-editor-property__color-preview.popover-control--active {
    outline: 2px solid var(--color-contrast-high);
    outline-offset: 2px;
}

.app-editor-property__color-preview:active {
    -webkit-transform: translateY(2px);
    transform: translateY(2px);
}

.app-editor-property__color-preview[data-color-lb=""] {
    /* not specified */
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none' stroke='%2393989d' stroke-miterlimit='10'%3E%3Cline x1='6' y1='6' x2='14' y2='14'/%3E%3Cline x1='14' y1='6' x2='6' y2='14'/%3E%3C/svg%3E") no-repeat center center;
}

.app-editor-property__color-preview[data-color-lb="transparent"] {
    background-image: url('../../assets/img/bg-transparent-x.svg');
}

.app-editor-property__color-preview[data-color-lb="inherit"] {
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none' stroke='%2393989d' stroke-miterlimit='10'%3E%3Cline x1='10' y1='5' x2='10' y2='15'/%3E%3Cpolyline points='6 11 10 15 14 11'/%3E%3C/svg%3E") no-repeat center center;
}

.app-editor-property__color-group--disable-opacity .form-control {
    opacity: 0.5;
    pointer-events: none;
}

.app-editor-property__color-group--disable-opacity .app-slider-control {
    opacity: 0.5;
    pointer-events: none;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}

.app-editor-property:not(.app-editor-property--custom-value--is-visible) .app-editor-property__custom-value, .app-editor-section:not(.app-editor-section--content-edited) .app-editor-section__footer, .app-editor-section__hint--is-hidden, .app-editor-section__grid--is-hidden {
    display: none;
}

.app-editor-section__hint {
    font-size: var(--text-xs);
    color: var(--color-contrast-medium);
    text-align: center;
}

.app-editor-section__hint:not(.app-editor-section__hint--is-hidden) ~ .app-editor-section__labels-grid {
    display: none;
}

/* .app-editor-section__hint--is-hidden ~ .app-editor-section__labels-grid--hide {
  display: grid;
} */
/* property set to none - hide not required fields (e.g., shadow set to none -> hide input fields */
/* .app-editor-section__grid--property-off .disable-if-none,
.app-editor-section__grid--property-off ~  .app-editor-section__labels-grid .disable-if-none { 
  display: none;
} */
.app-editor-section__grid--property-off .disable-if-none {
    /* property set to none */
    opacity: 0.5;
    cursor: not-allowed;
}

.app-editor-section__grid--property-off .disable-if-none * {
    pointer-events: none;
}

/* .app-editor-section__grid--property-off .full-width-none {
  flex-basis: initial;
  max-width: initial;
  flex-grow: 1;
} */
/* app editor tabs */
.app-editor-tabs {
    padding: 0 var(--space-3xs);
    margin: 0 var(--space-3xs) var(--space-xs);
}

.app-editor-tabs__item {
    position: relative;
    padding: 4px 8px;
    cursor: default;
    font-size: var(--text-xs);
    text-align: center;
    color: var(--color-contrast-low);
}

.app-editor-tabs__item:hover {
    color: var(--color-contrast-higher);
}

.app-editor-tabs__item::after {
    /* select effect */
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100% + 1px);
    border: 1px solid var(--color-border-alpha);
    border-top-left-radius: var(--radius-md);
    border-top-right-radius: var(--radius-md);
    border-bottom-color: var(--color-bg);
    pointer-events: none;
    display: none;
}

.app-editor-tabs__item.app-editor-tabs__item--selected {
    color: var(--color-primary);
}

.app-editor-tabs__item.app-editor-tabs__item--selected::after {
    display: block;
}

.app-editor-tabs__item span::after {
    /* dot indicating property has been changed */
    content: '';
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: var(--color-primary);
    vertical-align: middle;
    margin-left: 3px;
    display: none;
}

.app-editor-tabs__item.app-editor-tabs__item--is-edited span::after {
    display: inline-block;
}

.app-editor-section__title--hide-body ~ .app-editor-tabs {
    display: none;
}

/* #endregion */
/* #region (_1_adv-grid) */
.adv-grid-1 {
    width: 100%;
    overflow: hidden;
}

.adv-grid-1__inner {
    width: 240%;
    margin-left: -70%;
}

.adv-grid-1__card {
    position: relative;
    background: var(--color-bg);
    display: block;
    border-radius: var(--radius-md);
    overflow: hidden;
    aspect-ratio: 31/17;
    transition: -webkit-transform 0.3s, -webkit-filter 0.3s;
    transition: transform 0.3s, filter 0.3s;
    transition: transform 0.3s, filter 0.3s, -webkit-transform 0.3s, -webkit-filter 0.3s;
}

.adv-grid-1__card:hover {
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
}

.adv-grid-1__card:active {
    -webkit-transform: translateY(2px);
    transform: translateY(2px);
}

@media (min-width: 48rem) {
    .adv-grid-1__inner {
        width: 160%;
        margin-left: -30%;
    }
}

@media (min-width: 90rem) {
    .adv-grid-1 {
        display: flex;
        justify-content: center;
    }

    .adv-grid-1__inner {
        width: 2304px;
        flex-shrink: 0;
        margin: 0 auto;
    }
}

/* #endregion */
/* #region (_1_reveal-effects) */
:root {
    --reveal-fx-duration: 0.6s;
    --reveal-fx-timing-function: var(--ease-out);
}

.js .reveal-fx {
    opacity: 0;
    transition: opacity, -webkit-transform var(--reveal-fx-timing-function);
    transition: opacity, transform var(--reveal-fx-timing-function);
    transition: opacity, transform var(--reveal-fx-timing-function), -webkit-transform var(--reveal-fx-timing-function);
    transition-duration: var(--reveal-fx-duration);
}

.js .reveal-fx::before {
    display: none;
    content: "reveal-fx";
}

.js .reveal-fx--translate, .js .reveal-fx--translate-up {
    -webkit-transform: translateY(50px);
    transform: translateY(50px);
}

.js .reveal-fx--translate-right {
    -webkit-transform: translateX(-50px);
    transform: translateX(-50px);
}

.js .reveal-fx--translate-left {
    -webkit-transform: translateX(50px);
    transform: translateX(50px);
}

.js .reveal-fx--translate-down {
    -webkit-transform: translateY(-50px);
    transform: translateY(-50px);
}

.js .reveal-fx--scale {
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
}

.js .reveal-fx--scale-up {
    -webkit-transform: translateY(50px) scale(0.8);
    transform: translateY(50px) scale(0.8);
}

.js .reveal-fx--scale-right {
    -webkit-transform: translateX(-50px) scale(0.8);
    transform: translateX(-50px) scale(0.8);
}

.js .reveal-fx--scale-left {
    -webkit-transform: translateX(50px) scale(0.8);
    transform: translateX(50px) scale(0.8);
}

.js .reveal-fx--scale-down {
    -webkit-transform: translateY(-50px) scale(0.8);
    transform: translateY(-50px) scale(0.8);
}

.js .reveal-fx--rotate, .js .reveal-fx--rotate-down, .js .reveal-fx--rotate-right, .js .reveal-fx--rotate-left, .js .reveal-fx--rotate-up {
    -webkit-perspective: 1000px;
    perspective: 1000px;
}

.js .reveal-fx--rotate > *, .js .reveal-fx--rotate-down > *, .js .reveal-fx--rotate-right > *, .js .reveal-fx--rotate-left > *, .js .reveal-fx--rotate-up > * {
    transition: -webkit-transform var(--reveal-fx-duration) var(--reveal-fx-timing-function);
    transition: transform var(--reveal-fx-duration) var(--reveal-fx-timing-function);
    transition: transform var(--reveal-fx-duration) var(--reveal-fx-timing-function), -webkit-transform var(--reveal-fx-duration) var(--reveal-fx-timing-function);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.js .reveal-fx--rotate > *, .js .reveal-fx--rotate-down > * {
    -webkit-transform-origin: top;
    transform-origin: top;
    -webkit-transform: rotateX(-45deg);
    transform: rotateX(-45deg);
}

.js .reveal-fx--rotate-right > * {
    -webkit-transform-origin: left center;
    transform-origin: left center;
    -webkit-transform: rotateY(45deg);
    transform: rotateY(45deg);
}

.js .reveal-fx--rotate-left > * {
    -webkit-transform-origin: right center;
    transform-origin: right center;
    -webkit-transform: rotateY(-45deg);
    transform: rotateY(-45deg);
}

.js .reveal-fx--rotate-up > * {
    -webkit-transform-origin: bottom;
    transform-origin: bottom;
    -webkit-transform: rotateX(45deg);
    transform: rotateX(45deg);
}

.js .reveal-fx--text-mask {
    overflow: hidden;
}

.js .reveal-fx--text-mask > * {
    display: inline-block;
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
    transition: -webkit-transform var(--reveal-fx-duration) var(--reveal-fx-timing-function);
    transition: transform var(--reveal-fx-duration) var(--reveal-fx-timing-function);
    transition: transform var(--reveal-fx-duration) var(--reveal-fx-timing-function), -webkit-transform var(--reveal-fx-duration) var(--reveal-fx-timing-function);
    will-change: transform;
}

.js [class*=reveal-fx--translate], .js [class*=reveal-fx--scale] {
    will-change: opacity, transform;
}

.js .reveal-fx--text-mask > *, .js [class*=reveal-fx--rotate] > * {
    will-change: transform;
}

.js .reveal-fx--clip-x > *, .js .reveal-fx--clip-y > * {
    transition: opacity, -webkit-clip-path var(--ease-out);
    transition: opacity, clip-path var(--ease-out);
    transition: opacity, clip-path var(--ease-out), -webkit-clip-path var(--ease-out);
    transition-duration: var(--reveal-fx-duration);
}

.js .reveal-fx--clip-x > * {
    -webkit-clip-path: polygon(10% 0%, 90% 0%, 90% 100%, 10% 100%);
    clip-path: polygon(10% 0%, 90% 0%, 90% 100%, 10% 100%);
}

.js .reveal-fx--clip-y > * {
    -webkit-clip-path: polygon(0% 50%, 100% 50%, 100% 100%, 0% 100%);
    clip-path: polygon(0% 50%, 100% 50%, 100% 100%, 0% 100%);
}

.js .reveal-fx--is-visible {
    opacity: 1;
}

.js .reveal-fx--is-visible[class*=reveal-fx--translate], .js .reveal-fx--is-visible[class*=reveal-fx--scale], .js .reveal-fx--is-visible[class*=reveal-fx--rotate] > *, .js .reveal-fx--is-visible.reveal-fx--text-mask > * {
    -webkit-transform: translate(0);
    transform: translate(0);
}

.js .reveal-fx--is-visible.reveal-fx--clip-x > *, .js .reveal-fx--is-visible.reveal-fx--clip-y > * {
    opacity: 1;
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}

/* #endregion */
/* #region (_1_account-select) */
.account-select {
}

.account-select__item {
    background-color: var(--color-bg-dark);
    box-shadow: inset 0 0 0.5px 1px hsla(var(--color-white-hsl), 0.075);
    padding: var(--space-sm);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: 0.2s;
}

.account-select__item:hover {
    background-color: var(--color-bg-light);
    box-shadow: inset 0 0 0.5px 1px hsla(var(--color-white-hsl), 0.075), var(--shadow-sm), var(--shadow-md);
}

.account-select__item:active {
    -webkit-transform: translateY(2px);
    transform: translateY(2px);
}

.account-select__radio {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid var(--color-contrast-lower);
    background-color: var(--color-bg);
    flex-shrink: 0;
}

.account-select__title {
    font-family: var(--font-secondary);
    font-weight: bold;
    font-size: var(--text-md);
    color: var(--color-contrast-higher);
    margin-bottom: var(--space-sm);
}

.account-select__item[aria-checked="true"] {
    background-color: var(--color-bg-light);
    box-shadow: inset 0 0 0.5px 1px hsla(var(--color-white-hsl), 0), var(--shadow-sm), var(--shadow-md), 0 0 0 2px var(--color-primary);
}

.account-select__item[aria-checked="true"] .account-select__radio {
    background: var(--color-primary);
    border-color: var(--color-primary);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cg fill='%23ffffff'%3E%3Cpath d='M10.293,1.293,4,7.586,1.707,5.293A1,1,0,0,0,.293,6.707l3,3a1,1,0,0,0,1.414,0l7-7a1,1,0,0,0-1.414-1.414Z' fill='%23ffffff'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
    background-size: 12px;
    background-position: center;
    background-repeat: no-repeat;
}

.account-select__item[aria-checked="true"] .account-select__title {
    color: var(--color-primary);
}

/* #endregion */
/* #region (_1_dark-light-display) */
html:not([data-theme="dark"]) .dark\:display, html[data-theme="dark"] .light\:display {
    display: none;
}

/* #endregion */
/* #region (_1_ios-pivot) */
.ios-pivot {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: hsla(var(--color-bg-dark-hsl), 0.9);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    z-index: var(--z-index-overlay);
    display: flex;
    justify-content: center;
    align-items: center;
}

.ios-pivot--is-hidden {
    display: none;
}

.ios-pivot__content {
    background-color: var(--color-bg-light);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    box-shadow: var(--inner-glow), var(--shadow-sm);
    max-width: 420px;
}

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

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

/* #endregion */
/* #region (_1_links-group) */
.links-group, .text-component .links-group {
    list-style: none;
    padding: 0;
    display: flex;
}

.links-group__link, .text-component .links-group__link:not(.link) {
    text-decoration: none;
    color: var(--color-contrast-higher);
    background-image: none;
    padding: var(--space-3xs) var(--space-2xs);
    border: 1px solid var(--color-contrast-lower);
    margin-left: -1px;
    transition: 0.2s;
}

.links-group__link:hover {
    background-color: hsla(var(--color-contrast-lower-hsl), 0.5);
}

.links-group__item:first-child .links-group__link {
    border-radius: var(--radius-md) 0 0 var(--radius-md);
}

.links-group__item:last-child .links-group__link {
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.links-group__link--selected, .text-component .links-group__link--selected:not(.link) {
    background-color: var(--color-contrast-higher);
    border-color: var(--color-contrast-higher);
    color: var(--color-bg);
    box-shadow: var(--shadow-xs);
}

/* #endregion */
/* #region (_2_carousel) */
:root {
    --carousel-grid-gap: var(--space-xs);
    --carousel-item-auto-size: 260px;
    --carousel-transition-duration: 0.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: -webkit-transform;
    transition-property: transform;
    transition-property: transform, -webkit-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 {
    --size: 40px;
    width: 40px;
    height: 40px;
    display: flex;
    background-color: var(--color-bg-light);
    border-radius: 50%;
    box-shadow: var(--inner-glow), var(--shadow-sm);
    z-index: 1;
    transition: 0.2s;
}

.carousel__control:active {
    -webkit-transform: translateY(1px);
    transform: translateY(1px);
}

.carousel__control:hover {
    background-color: var(--color-bg-lighter);
    box-shadow: var(--inner-glow), var(--shadow-md);
    color: var(--color-primary);
}

.carousel__control[disabled] {
    pointer-events: none;
    opacity: 0.5;
    box-shadow: none;
}

.carousel__control .icon {
    --size: 20px;
    display: block;
    margin: auto;
}

.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-3xs);
}

@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: 0.4;
    cursor: pointer;
    transition: background 0.3s;
}

.carousel__nav-item button::before {
    content: "";
    position: absolute;
    top: calc(50% - 0.5em);
    left: calc(50% - 0.5em);
    font-size: 16px;
    height: 1em;
    width: 1em;
    border-radius: inherit;
    border: 1px solid var(--color-contrast-high);
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
    transition: 3s;
}

.carousel__nav-item button:focus {
    outline: none;
}

.carousel__nav-item button:focus::before {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}

.carousel__nav-item--selected button {
    opacity: 1;
}

.carousel__navigation--pagination {
    grid-template-columns: repeat(auto-fit, 24px);
}

.carousel__navigation--pagination .carousel__nav-item button {
    width: 24px;
    height: 24px;
    color: var(--color-bg);
    font-size: 12px;
    line-height: 24px;
    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;
}

.carousel--hide-controls .carousel__navigation, .carousel--hide-controls .carousel__control {
    display: none;
}

/* #endregion */
/* #region (_2_adv-custom-select) */
.adv-select-popover {
}

.adv-select-popover.popover {
    --popover-width: 250px;
    --popover-control-gap: 4px;
    --popover-viewport-gap: 20px;
    --popover-transition-duration: 0.2s;
}

@media (min-width: 64rem) {
    .adv-select-popover.popover {
        --popover-width: 320px;
    }
}

.adv-select-popover__optgroup:not(:first-of-type) {
    padding-top: var(--space-2xs);
}

.adv-select-popover__optgroup:not(:last-of-type) {
    border-bottom: 1px solid hsla(var(--color-contrast-higher-hsl), 0.1);
    padding-bottom: var(--space-2xs);
}

.adv-select-popover__check {
    display: none;
}

.adv-select-popover__option {
    position: relative;
    cursor: pointer;
    transition: 0.2s;
}

.adv-select-popover__option:hover {
    background-color: hsla(var(--color-contrast-higher-hsl), 0.075);
}

.adv-select-popover__option:focus {
    outline: none;
    background-color: hsla(var(--color-primary-hsl), 0.15);
}

.adv-select-popover__option[aria-selected=true] {
    background-color: var(--color-primary);
    color: var(--color-white);
}

.adv-select-popover__option[aria-selected=true] .adv-select-popover__check {
    display: block;
}

.adv-select-popover__option[aria-selected=true]:focus {
    box-shadow: inset 0 0 0 2px var(--color-primary-dark);
}

/* #endregion */
/* #region (_2_autocomplete) */
:root {
    --autocomplete-dropdown-vertical-gap: 4px;
    /* gap between input and results list */
    --autocomplete-dropdown-max-height: 150px;
    --autocomplete-dropdown-scrollbar-width: 6px;
    /* custom scrollbar width - webkit browsers */
}

.autocomplete__loader {
    /* loader visible while searching */
    /* CSS variables inherited from the circle-loader component */
    --circle-loader-v1-size: 1em;
    --circle-loader-v1-stroke-width: 2px;
}

.autocomplete:not(.autocomplete--searching) .autocomplete__loader {
    /* .autocomplete--searching is used to show the loader element - added in JS */
    display: none;
}

/* results dropdown  */
.autocomplete__results {
    position: absolute;
    z-index: var(--z-index-popover, 5);
    width: 100%;
    left: 0;
    top: calc(100% + var(--autocomplete-dropdown-vertical-gap));
    -webkit-transform: translateY(4px);
    transform: translateY(4px);
    /* slide in animation */
    background-color: var(--color-bg-light);
    box-shadow: var(--inner-glow), var(--shadow-md);
    border-radius: var(--radius-md);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0s 0.3s, -webkit-transform 0.3s var(--ease-in);
    transition: opacity 0.3s, visibility 0s 0.3s, transform 0.3s var(--ease-in);
    transition: opacity 0.3s, visibility 0s 0.3s, transform 0.3s var(--ease-in), -webkit-transform 0.3s var(--ease-in);
    overflow: hidden;
}

.autocomplete--results-visible .autocomplete__results {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s, -webkit-transform 0.3s var(--ease-out);
    transition: opacity 0.3s, transform 0.3s var(--ease-out);
    transition: opacity 0.3s, transform 0.3s var(--ease-out), -webkit-transform 0.3s var(--ease-out);
    -webkit-transform: translateY(0);
    transform: translateY(0);
}

.autocomplete__list {
    max-height: var(--autocomplete-dropdown-max-height);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    /* custom scrollbar */
}

.autocomplete__list::-webkit-scrollbar {
    /* scrollbar width */
    width: var(--autocomplete-dropdown-scrollbar-width);
}

.autocomplete__list::-webkit-scrollbar-track {
    /* progress bar */
    background-color: hsla(var(--color-contrast-higher-hsl), 0.08);
    border-radius: 0;
}

.autocomplete__list::-webkit-scrollbar-thumb {
    /* handle */
    background-color: hsla(var(--color-contrast-higher-hsl), 0.12);
    border-radius: 0;
}

.autocomplete__list::-webkit-scrollbar-thumb:hover {
    background-color: hsla(var(--color-contrast-higher-hsl), 0.2);
}

/* single result item */
.autocomplete__item {
    cursor: pointer;
    transition: 0.2s;
}

.autocomplete__item:hover {
    background-color: hsla(var(--color-contrast-higher-hsl), 0.075);
}

.autocomplete__item:focus {
    outline: none;
    background-color: hsla(var(--color-primary-hsl), 0.15);
}

/* #endregion */
/* #region (_2_app-menu) */
.app-menu {
    width: 252px;
    right: var(--space-xs);
}

.app-menu__state-b {
    display: none;
}

.app-menu--state-b .app-menu__state-a {
    display: none;
}

.app-menu--state-b .app-menu__state-b {
    display: block;
}

.app-menu__color-item--is-hidden {
    display: none;
}

.app-menu__color-preview {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px hsla(var(--color-contrast-higher-hsl), 0.15);
    position: relative;
}

.app-menu__color-preview:hover {
    box-shadow: inset 0 0 0 1px hsla(var(--color-contrast-higher-hsl), 0.25);
}

.app-menu__color-preview::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-image: url('../../assets/img/bg-transparent-x.svg');
    border-radius: inherit;
    z-index: -1;
}

.app-menu__color-preview:hover + .app-menu__color-tooltip {
    display: block;
}

.app-menu__color-preview--selected {
    box-shadow: inset 0 0 0 1px hsla(var(--color-contrast-higher-hsl), 0.15), 0 0 0 2px var(--color-bg-light), 0 0 0 3px var(--color-contrast-high);
}

.app-menu__color-preview--selected:hover {
    box-shadow: inset 0 0 0 1px hsla(var(--color-contrast-higher-hsl), 0.25), 0 0 0 2px var(--color-bg-light), 0 0 0 3px var(--color-contrast-high);
}

.app-menu__color-preview--not-specified, .app-menu__color-preview--inherit::before {
    content: '';
}

.app-menu__color-preview--not-specified::before {
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none' stroke='%2393989d' stroke-miterlimit='10'%3E%3Cline x1='6' y1='6' x2='14' y2='14'/%3E%3Cline x1='14' y1='6' x2='6' y2='14'/%3E%3C/svg%3E") no-repeat center center;
}

.app-menu__color-preview--inherit::before {
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none' stroke='%2393989d' stroke-miterlimit='10'%3E%3Cline x1='10' y1='5' x2='10' y2='15'/%3E%3Cpolyline points='6 11 10 15 14 11'/%3E%3C/svg%3E") no-repeat center center;
}

.app-menu__color-tooltip {
    position: absolute;
    z-index: 2;
    bottom: -2px;
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(100%);
    transform: translateX(-50%) translateY(100%);
    background-color: hsla(var(--color-contrast-higher-hsl), 0.9);
    padding: 4px 6px;
    border-radius: var(--radius-md);
    color: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: var(--text-2xs);
    white-space: nowrap;
    display: none;
}

.app-menu__color-tooltip--right {
    right: 0px;
    left: auto;
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
}

/* #endregion */
/* #region (_2_preview-mode-slideshow) */
:root {
    --slideshow-pm-item-width: 80%;
    --slideshow-pm-item-gap: var(--space-sm);
}

@media (min-width: 64rem) {
    :root {
        --slideshow-pm-item-width: 66%;
    }
}

.slideshow-pm {
    overflow: hidden;
    padding: var(--space-md) 0;
}

.slideshow-pm__list {
    display: flex;
    flex-wrap: nowrap;
    overflow: auto;
    align-items: center;
}

.slideshow-pm__item {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-height: 280px;
    width: var(--slideshow-pm-item-width);
    flex-shrink: 0;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.slideshow-pm__item:not(:last-of-type) {
    margin-right: var(--slideshow-pm-item-gap);
}

.slideshow-pm__item:focus {
    outline: none;
}

@media (min-width: 64rem) {
    .slideshow-pm__item {
        min-height: 400px;
    }
}

@media (min-width: 80rem) {
    .slideshow-pm__item {
        min-height: 480px;
    }
}

.slideshow-pm__item--media {
    height: auto !important;
}

.slideshow-pm__item--media img, .slideshow-pm__item--media svg, .slideshow-pm__item--media video {
    display: block;
}

.slideshow-pm {
    opacity: 0;
}

.slideshow-pm--js-loaded {
    opacity: 1;
}

.slideshow-pm__content {
    position: relative;
}

.slideshow-pm__list {
    overflow: visible;
}

.slideshow-pm__list--has-transition {
    transition: -webkit-transform 0.4s;
    transition: transform 0.4s;
    transition: transform 0.4s, -webkit-transform 0.4s;
    will-change: transform;
}

.slideshow-pm__list--has-transition .slideshow-pm__item {
    transition: all 0.3s;
    will-change: transform, opacity;
}

.slideshow-pm__item {
    -webkit-transform: scale(0.95);
    transform: scale(0.95);
    opacity: 0.4;
}

.slideshow-pm__item--selected {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
}

.slideshow-pm[data-swipe=on] .slideshow-pm__content {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.slideshow-pm[data-swipe=on] .slideshow-pm__content img {
    pointer-events: none;
}

.slideshow-pm__control {
    display: none;
}

.slideshow-pm[data-swipe=on] .slideshow-pm__control {
    display: none;
}

.slideshow-pm__control {
    display: block;
    position: absolute;
    z-index: 4;
    top: 50%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0s 0.2s;
}

.slideshow-pm__control:first-of-type {
    left: calc((100% - var(--slideshow-pm-item-width)) * 0.25);
    -webkit-transform: translateY(-50%) translateX(-50%);
    transform: translateY(-50%) translateX(-50%);
}

.slideshow-pm__control:last-of-type {
    right: calc((100% - var(--slideshow-pm-item-width)) * 0.25);
    -webkit-transform: translateY(-50%) translateX(50%);
    transform: translateY(-50%) translateX(50%);
}

.slideshow-pm__control-btn {
    height: 48px;
    width: 48px;
    border-radius: 50%;
    cursor: pointer;
    transition: -webkit-transform 0.2s;
    transition: transform 0.2s;
    transition: transform 0.2s, -webkit-transform 0.2s;
    will-change: transform;
}

.slideshow-pm__control-btn:active {
    -webkit-transform: translateY(2px);
    transform: translateY(2px);
}

.slideshow-pm__control-btn .icon {
    width: 48px;
    height: 48px;
}

.slideshow-pm__control--active {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.2s;
}

.slideshow-pm__loader {
    transition: stroke-dashoffset 0s linear;
}

.slideshow-pm__loader--full {
    stroke-dashoffset: 0;
}

@media (min-width: 64rem) {
    .slideshow-pm[data-swipe=on] .slideshow-pm__control {
        display: block;
    }
}

.slideshow-pm__navigation {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: calc(var(--space-md) + 30px);
}

.slideshow-pm__nav-item {
    display: inline-block;
    margin: 0 var(--space-3xs);
}

.slideshow-pm__nav-item button {
    display: block;
    position: relative;
    font-size: 8px;
    height: 1em;
    width: 1em;
    color: var(--color-contrast-high);
    border-radius: 50%;
    background-color: currentColor;
    opacity: 0.25;
    cursor: pointer;
    transition: background 0.3s;
}

.slideshow-pm__nav-item button::before {
    content: "";
    position: absolute;
    top: calc(50% - 0.5em);
    left: calc(50% - 0.5em);
    height: 1em;
    width: 1em;
    font-size: 14px;
    border-radius: inherit;
    border: 1px solid var(--color-contrast-high);
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
    transition: 0.3s;
}

.slideshow-pm__nav-item button:focus {
    outline: none;
}

.slideshow-pm__nav-item button:focus::before {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}

.slideshow-pm__nav-item--selected button {
    opacity: 1;
}

/* #endregion */
/* #region (_3_carousel-v3) */
.carousel-v3 {
    --carousel-grid-gap: 40px;
    --carousel-item-auto-size: 620px;
    --carousel-transition-duration: 0.5s;
}

.carousel-v3__control {
    --size: 50px;
    height: var(--size);
    width: var(--size);
    background-color: hsla(var(--color-black-hsl), 0.7);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    pointer-events: auto;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.2s;
}

.carousel-v3__control:hover {
    background-color: hsla(var(--color-black-hsl), 0.9);
}

.carousel-v3__control[disabled] {
    display: none;
}

.carousel-v3__control:active {
    -webkit-transform: translateY(2px);
    transform: translateY(2px);
}

.carousel-v3__control .icon {
    --size: 20px;
    display: block;
    color: var(--color-white);
}

/* #endregion */
/* #region (_3_light-dark-switch) */
.ld-switch-btn {
    position: relative;
    width: 24px;
    height: 24px;
    overflow: hidden;
    display: inline-block;
    transition: opacity 0.2s, color 0.2s;
}

.ld-switch-btn:hover {
    cursor: pointer;
    opacity: 0.8;
}

.ld-switch-btn:focus {
    outline: none;
    color: var(--color-primary);
}

.ld-switch-btn.popover-control--active {
    /* class added to the control button when the dropdown is visible */
    color: var(--color-primary);
}

.ld-switch-btn__icon-wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    -webkit-transform: translateY(100%) rotate(35deg) scale(0.5);
    transform: translateY(100%) rotate(35deg) scale(0.5);
}

.ld-switch-btn__icon-wrapper--in {
    opacity: 1;
    -webkit-transform: translateY(0) rotate(0) scale(1);
    transform: translateY(0) rotate(0) scale(1);
}

.ld-switch-btn__icon-wrapper--out {
    opacity: 0;
    -webkit-transform: translateY(-100%) rotate(-35deg) scale(0.5);
    transform: translateY(-100%) rotate(-35deg) scale(0.5);
}

.ld-switch-btn__icon-wrapper--in, .ld-switch-btn__icon-wrapper--out {
    transition: opacity 0.3s, -webkit-transform 0.3s var(--ease-in-out);
    transition: transform 0.3s var(--ease-in-out), opacity 0.3s;
    transition: transform 0.3s var(--ease-in-out), opacity 0.3s, -webkit-transform 0.3s var(--ease-in-out);
}

.ld-switch-btn__icon {
    margin: auto;
    --size: 20px;
    /* icon size */
}

.popover.ld-switch-popover {
    --popover-width: 250px;
}

.ld-switch-popover__option {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    transition: opacity 0.2s;
}

.ld-switch-popover__option:hover {
    cursor: pointer;
    opacity: 0.85;
}

.ld-switch-popover__option:focus {
    outline: none;
}

.ld-switch-popover__option:focus figure {
    box-shadow: 0 0 0 1px var(--color-bg-light), 0 0 0 3px var(--color-contrast-higher);
}

.ld-switch-popover__option[aria-selected=true] {
    color: var(--color-primary);
}

.ld-switch-popover__option[aria-selected=true] figure {
    box-shadow: 0 0 0 1px var(--color-bg-light), 0 0 0 3px currentColor;
}

/* #endregion */
/* #region (_3_advanced-search) */
.adv-search {
    /* search input component */
    --search-input-btn-width: 46px;
    --search-input-icon-size: 20px;
}

.adv-search__close-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.2s;
}

.adv-search__close-btn:hover {
    background-color: hsla(var(--color-contrast-higher-hsl), 0.1);
}

.adv-search__close-btn .icon {
    display: block;
    --size: 20px;
}

.adv-search__result-v1 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--color-bg-light);
    border-radius: var(--radius-md);
    padding: var(--space-2xs);
    box-shadow: var(--inner-glow), var(--shadow-xs);
    color: var(--color-contrast-higher);
    text-decoration: none;
    font-size: var(--text-sm);
    transition: 0.2s;
}

.adv-search__result-v1:hover {
    background-color: var(--color-bg-lighter);
    box-shadow: var(--inner-glow), var(--shadow-sm);
}

.adv-search__result-v1:focus {
    box-shadow: var(--inner-glow), var(--shadow-sm), 0 0 0 2px var(--color-primary);
}

/* #endregion */
/* end */
.hljs-comment, .hljs-quote {
    color: var(--color-contrast-low);
}

.hljs-variable, .hljs-template-variable, .hljs-selector-id, .hljs-regexp, .hljs-deletion {
    color: var(--color-accent);
}

.hljs-keyword, .hljs-number, .hljs-built_in, .hljs-builtin-name, .hljs-literal, .hljs-type, .hljs-params, .hljs-meta, .hljs-link, .hljs-name, .hljs-tag {
    color: var(--color-contrast-high);
}

.hljs-string, .hljs-selector-class, .hljs-selector-tag {
    color: var(--color-secondary);
}

.hljs-symbol, .hljs-bullet, .hljs-addition, .hljs-attr, .hljs-attribute, .hljs-title, .hljs-section {
    color: var(--color-contrast-high);
}

.hljs, .text-component .hljs {
    display: block;
    overflow-x: auto;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    background: var(--color-bg-dark);
    padding: var(--space-sm);
    color: var(--color-contrast-high);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    line-height: 1.4;
}

@media (min-width: 64rem) {
    .hljs, .text-component .hljs {
        font-size: 0.9375rem;
    }
}

:is(.hljs, .text-component .hljs)::-moz-selection, :is(.hljs, .text-component .hljs) *::-moz-selection {
    background: var(--color-secondary);
    color: var(--color-white);
}

:is(.hljs, .text-component .hljs)::selection, :is(.hljs, .text-component .hljs) *::selection {
    background: var(--color-secondary);
    color: var(--color-white);
}

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

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

.hljs-strong {
    font-weight: bold;
}

/* copy to clip */
.copy-to-clip {
    position: absolute;
    top: 0.35em;
    right: 0.35em;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: hsla(var(--color-contrast-higher-hsl), 0);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    cursor: pointer;
    will-change: transform;
    transition: background 0.2s, -webkit-transform 0.2s;
    transition: transform 0.2s, background 0.2s;
    transition: transform 0.2s, background 0.2s, -webkit-transform 0.2s;
}

.copy-to-clip:hover {
    background-color: hsla(var(--color-contrast-higher-hsl), 0.1);
}

.copy-to-clip:active {
    -webkit-transform: translateY(2px);
    transform: translateY(2px);
}

.copy-to-clip:focus {
    outline: 2px solid var(--color-contrast-high);
    outline-offset: 2px;
}

.copy-to-clip__icon-check {
    stroke-dashoffset: 8.49;
    stroke-dasharray: 8.49 8.49;
    transition: stroke-dashoffset 0.3s;
}

.copy-to-clip--copied .copy-to-clip__icon-check {
    stroke-dashoffset: 0;
}

/*! purgecss end ignore */
/* accessibility */
.sr-only, .sr-only-focusable:not(:focus):not(:focus-within) {
    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;
}

/* grid */
.grid, .flex, .inline-flex, [class^=flex\@], [class*=" flex\@"], [class^=inline-flex\@], [class*=" inline-flex\@"] {
    --gap: 0px;
    --gap-x: var(--gap);
    --gap-y: var(--gap);
    gap: var(--gap-y) var(--gap-x);
}

:where(.grid, .flex, .inline-flex, [class^=flex\@], [class*=" flex\@"], [class^=inline-flex\@], [class*=" inline-flex\@"]) > * {
    --sub-gap: 0px;
    --sub-gap-x: var(--sub-gap);
    --sub-gap-y: var(--sub-gap);
}

.grid {
    --grid-columns: 12;
    display: flex;
    flex-wrap: wrap;
}

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

.grid-col-1 {
    --grid-columns: 1;
}

.grid-col-2 {
    --grid-columns: 2;
}

.grid-col-3 {
    --grid-columns: 3;
}

.grid-col-4 {
    --grid-columns: 4;
}

.grid-col-5 {
    --grid-columns: 5;
}

.grid-col-6 {
    --grid-columns: 6;
}

.grid-col-7 {
    --grid-columns: 7;
}

.grid-col-8 {
    --grid-columns: 8;
}

.grid-col-9 {
    --grid-columns: 9;
}

.grid-col-10 {
    --grid-columns: 10;
}

.grid-col-11 {
    --grid-columns: 11;
}

.grid-col-12 {
    --grid-columns: 12;
}

.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
    width: calc(((100% - (var(--grid-columns) - 1) * var(--sub-gap-x)) * var(--span) / var(--grid-columns)) + (var(--span) - 1) * var(--sub-gap-x));
    flex: initial;
}

.col-1 {
    --span: 1;
}

.col-2 {
    --span: 2;
}

.col-3 {
    --span: 3;
}

.col-4 {
    --span: 4;
}

.col-5 {
    --span: 5;
}

.col-6 {
    --span: 6;
}

.col-7 {
    --span: 7;
}

.col-8 {
    --span: 8;
}

.col-9 {
    --span: 9;
}

.col-10 {
    --span: 10;
}

.col-11 {
    --span: 11;
}

.col-12 {
    --span: 12;
}

.col {
    width: auto;
    flex: 1 1 0;
}

.col-content {
    width: auto;
    flex: 0 1 auto;
}

.offset-1, .offset-2, .offset-3, .offset-4, .offset-5, .offset-6, .offset-7, .offset-8, .offset-9, .offset-10, .offset-11 {
    margin-left: calc(((100% - (var(--grid-columns) - 1) * var(--sub-gap-x)) * var(--offset) / var(--grid-columns)) + var(--offset) * var(--sub-gap-x));
}

.offset-1 {
    --offset: 1;
}

.offset-2 {
    --offset: 2;
}

.offset-3 {
    --offset: 3;
}

.offset-4 {
    --offset: 4;
}

.offset-5 {
    --offset: 5;
}

.offset-6 {
    --offset: 6;
}

.offset-7 {
    --offset: 7;
}

.offset-8 {
    --offset: 8;
}

.offset-9 {
    --offset: 9;
}

.offset-10 {
    --offset: 10;
}

.offset-11 {
    --offset: 11;
}

/* gap */
.gap-4xs {
    --gap-x: var(--space-4xs);
    --gap-y: var(--space-4xs);
}

.gap-4xs > * {
    --sub-gap-x: var(--space-4xs);
    --sub-gap-y: var(--space-4xs);
}

.gap-3xs {
    --gap-x: var(--space-3xs);
    --gap-y: var(--space-3xs);
}

.gap-3xs > * {
    --sub-gap-x: var(--space-3xs);
    --sub-gap-y: var(--space-3xs);
}

.gap-2xs {
    --gap-x: var(--space-2xs);
    --gap-y: var(--space-2xs);
}

.gap-2xs > * {
    --sub-gap-x: var(--space-2xs);
    --sub-gap-y: var(--space-2xs);
}

.gap-xs {
    --gap-x: var(--space-xs);
    --gap-y: var(--space-xs);
}

.gap-xs > * {
    --sub-gap-x: var(--space-xs);
    --sub-gap-y: var(--space-xs);
}

.gap-sm {
    --gap-x: var(--space-sm);
    --gap-y: var(--space-sm);
}

.gap-sm > * {
    --sub-gap-x: var(--space-sm);
    --sub-gap-y: var(--space-sm);
}

.gap-md {
    --gap-x: var(--space-md);
    --gap-y: var(--space-md);
}

.gap-md > * {
    --sub-gap-x: var(--space-md);
    --sub-gap-y: var(--space-md);
}

.gap-lg {
    --gap-x: var(--space-lg);
    --gap-y: var(--space-lg);
}

.gap-lg > * {
    --sub-gap-x: var(--space-lg);
    --sub-gap-y: var(--space-lg);
}

.gap-xl {
    --gap-x: var(--space-xl);
    --gap-y: var(--space-xl);
}

.gap-xl > * {
    --sub-gap-x: var(--space-xl);
    --sub-gap-y: var(--space-xl);
}

.gap-2xl {
    --gap-x: var(--space-2xl);
    --gap-y: var(--space-2xl);
}

.gap-2xl > * {
    --sub-gap-x: var(--space-2xl);
    --sub-gap-y: var(--space-2xl);
}

.gap-3xl {
    --gap-x: var(--space-3xl);
    --gap-y: var(--space-3xl);
}

.gap-3xl > * {
    --sub-gap-x: var(--space-3xl);
    --sub-gap-y: var(--space-3xl);
}

.gap-4xl {
    --gap-x: var(--space-4xl);
    --gap-y: var(--space-4xl);
}

.gap-4xl > * {
    --sub-gap-x: var(--space-4xl);
    --sub-gap-y: var(--space-4xl);
}

.gap-0 {
    --gap-x: 0px;
    --gap-y: 0px;
}

.gap-0 > * {
    --sub-gap-x: 0px;
    --sub-gap-y: 0px;
}

.gap-x-4xs {
    --gap-x: var(--space-4xs);
}

.gap-x-4xs > * {
    --sub-gap-x: var(--space-4xs);
}

.gap-x-3xs {
    --gap-x: var(--space-3xs);
}

.gap-x-3xs > * {
    --sub-gap-x: var(--space-3xs);
}

.gap-x-2xs {
    --gap-x: var(--space-2xs);
}

.gap-x-2xs > * {
    --sub-gap-x: var(--space-2xs);
}

.gap-x-xs {
    --gap-x: var(--space-xs);
}

.gap-x-xs > * {
    --sub-gap-x: var(--space-xs);
}

.gap-x-sm {
    --gap-x: var(--space-sm);
}

.gap-x-sm > * {
    --sub-gap-x: var(--space-sm);
}

.gap-x-md {
    --gap-x: var(--space-md);
}

.gap-x-md > * {
    --sub-gap-x: var(--space-md);
}

.gap-x-lg {
    --gap-x: var(--space-lg);
}

.gap-x-lg > * {
    --sub-gap-x: var(--space-lg);
}

.gap-x-xl {
    --gap-x: var(--space-xl);
}

.gap-x-xl > * {
    --sub-gap-x: var(--space-xl);
}

.gap-x-2xl {
    --gap-x: var(--space-2xl);
}

.gap-x-2xl > * {
    --sub-gap-x: var(--space-2xl);
}

.gap-x-3xl {
    --gap-x: var(--space-3xl);
}

.gap-x-3xl > * {
    --sub-gap-x: var(--space-3xl);
}

.gap-x-4xl {
    --gap-x: var(--space-4xl);
}

.gap-x-4xl > * {
    --sub-gap-x: var(--space-4xl);
}

.gap-x-0 {
    --gap-x: 0px;
}

.gap-x-0 > * {
    --sub-gap-x: 0px;
}

.gap-y-4xs {
    --gap-y: var(--space-4xs);
}

.gap-y-4xs > * {
    --sub-gap-y: var(--space-4xs);
}

.gap-y-3xs {
    --gap-y: var(--space-3xs);
}

.gap-y-3xs > * {
    --sub-gap-y: var(--space-3xs);
}

.gap-y-2xs {
    --gap-y: var(--space-2xs);
}

.gap-y-2xs > * {
    --sub-gap-y: var(--space-2xs);
}

.gap-y-xs {
    --gap-y: var(--space-xs);
}

.gap-y-xs > * {
    --sub-gap-y: var(--space-xs);
}

.gap-y-sm {
    --gap-y: var(--space-sm);
}

.gap-y-sm > * {
    --sub-gap-y: var(--space-sm);
}

.gap-y-md {
    --gap-y: var(--space-md);
}

.gap-y-md > * {
    --sub-gap-y: var(--space-md);
}

.gap-y-lg {
    --gap-y: var(--space-lg);
}

.gap-y-lg > * {
    --sub-gap-y: var(--space-lg);
}

.gap-y-xl {
    --gap-y: var(--space-xl);
}

.gap-y-xl > * {
    --sub-gap-y: var(--space-xl);
}

.gap-y-2xl {
    --gap-y: var(--space-2xl);
}

.gap-y-2xl > * {
    --sub-gap-y: var(--space-2xl);
}

.gap-y-3xl {
    --gap-y: var(--space-3xl);
}

.gap-y-3xl > * {
    --sub-gap-y: var(--space-3xl);
}

.gap-y-4xl {
    --gap-y: var(--space-4xl);
}

.gap-y-4xl > * {
    --sub-gap-y: var(--space-4xl);
}

.gap-y-0 {
    --gap-y: 0px;
}

.gap-y-0 > * {
    --sub-gap-y: 0px;
}

/* flexbox */
.flex {
    display: flex;
}

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

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

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

.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-content */
.justify-start {
    justify-content: flex-start;
}

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

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

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

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

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

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

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

/* order */
.order-1 {
    order: 1;
}

.order-2 {
    order: 2;
}

.order-3 {
    order: 3;
}

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

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

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

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

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

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

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

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

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

/* media wrapper */
:where([class^="media-wrapper"], [class*=" media-wrapper"]) {
    position: relative;
    height: 0;
}

[class^="media-wrapper"] > *, [class*=" media-wrapper"] > * {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

[class^="media-wrapper"] > *:not(iframe), [class*=" media-wrapper"] > *:not(iframe) {
    -o-object-fit: cover;
    object-fit: cover;
}

.media-wrapper-16\:9 {
    padding-bottom: 56.25%;
}

.media-wrapper-3\:2 {
    padding-bottom: 66.67%;
}

/* display */
.block {
    display: block;
}

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

.inline {
    display: inline;
}

.contents {
    display: contents;
}

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

/* spacing */
.space-4xs {
    --space-unit: 0.25rem;
}

.space-3xs {
    --space-unit: 0.4rem;
}

.space-2xs {
    --space-unit: 0.55rem;
}

.space-xs {
    --space-unit: 0.7rem;
}

.space-sm {
    --space-unit: 0.85rem;
}

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

.space-md {
    --space-unit: 1.15rem;
}

.space-lg {
    --space-unit: 1.3rem;
}

.space-xl {
    --space-unit: 1.45rem;
}

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

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

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

.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-2xl {
    margin: var(--space-2xl);
}

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

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

.margin-auto {
    margin: auto;
}

.margin-0 {
    margin: 0;
}

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

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

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

.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-2xl {
    margin-top: var(--space-2xl);
}

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

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

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

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

.margin-top-header {
    margin-top: var(--main-header-height);
}

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

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

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

.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-2xl {
    margin-bottom: var(--space-2xl);
}

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

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

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

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

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

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

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

.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-2xl {
    margin-right: var(--space-2xl);
}

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

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

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

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

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

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

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

.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-2xl {
    margin-left: var(--space-2xl);
}

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

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

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

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

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

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

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

.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-2xl {
    margin-left: var(--space-2xl);
    margin-right: var(--space-2xl);
}

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

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

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

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

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

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

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

.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-2xl {
    margin-top: var(--space-2xl);
    margin-bottom: var(--space-2xl);
}

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

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

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

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

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

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

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

.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-2xl {
    padding: var(--space-2xl);
}

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

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

.padding-0 {
    padding: 0;
}

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

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

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

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

.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-2xl {
    padding-top: var(--space-2xl);
}

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

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

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

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

.padding-top-header {
    padding-top: var(--main-header-height);
}

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

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

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

.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-2xl {
    padding-bottom: var(--space-2xl);
}

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

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

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

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

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

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

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

.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-2xl {
    padding-right: var(--space-2xl);
}

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

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

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

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

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

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

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

.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-2xl {
    padding-left: var(--space-2xl);
}

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

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

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

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

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

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

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

.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-2xl {
    padding-left: var(--space-2xl);
    padding-right: var(--space-2xl);
}

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

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

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

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

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

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

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

.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-2xl {
    padding-top: var(--space-2xl);
    padding-bottom: var(--space-2xl);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* font-size */
.text-3xs {
    font-size: var(--text-3xs);
}

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

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

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

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

.text-1rem {
    font-size: 1rem;
}

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

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

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

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

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

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

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

[class^=text-group-], [class*=" text-group-"] {
    font-size: var(--text-base);
}

.text-group-2xs {
    --text-unit: 0.82rem;
}

.text-group-xs {
    --text-unit: 0.8888888889rem;
}

.text-group-sm {
    --text-unit: 0.94rem;
}

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

.text-group-md {
    --text-unit: 1.06rem;
}

.text-group-lg {
    --text-unit: 1.12rem;
}

.text-group-xl {
    --text-unit: 1.18rem;
}

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

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

/* letter-spacing */
.letter-spacing-xs {
    letter-spacing: -0.1em;
}

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

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

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

.letter-spacing-xl {
    letter-spacing: 0.2em;
}

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

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

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

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

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

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

.font-black {
    font-weight: 900;
}

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

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

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

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

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

.font-system-ui {
    font-family: var(--font-system-ui);
}

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

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

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

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

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

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

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

/* text-shadow */
.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;
}

/* line-height */
.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;
}

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

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

/* column-count */
.column-count-1 {
    -webkit-column-count: 1;
    -moz-column-count: 1;
    column-count: 1;
}

.column-count-2 {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
}

.column-count-3 {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
}

.column-count-4 {
    -webkit-column-count: 4;
    -moz-column-count: 4;
    column-count: 4;
}

/* cursor */
.cursor-pointer {
    cursor: pointer;
}

.cursor-default {
    cursor: default;
}

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

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

/* user-select */
.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;
}

/* color */
[class^="color-"], [class*=" color-"] {
    --color-alpha: 1;
}

.color-inherit {
    color: inherit;
}

.color-bg-darker {
    color: hsla(var(--color-bg-darker-hsl), var(--color-alpha, 1));
}

.color-bg-dark {
    color: hsla(var(--color-bg-dark-hsl), var(--color-alpha, 1));
}

.color-bg {
    color: hsla(var(--color-bg-hsl), var(--color-alpha, 1));
}

.color-bg-light {
    color: hsla(var(--color-bg-light-hsl), var(--color-alpha, 1));
}

.color-bg-lighter {
    color: hsla(var(--color-bg-lighter-hsl), var(--color-alpha, 1));
}

.color-contrast-lower {
    color: hsla(var(--color-contrast-lower-hsl), var(--color-alpha, 1));
}

.color-contrast-low {
    color: hsla(var(--color-contrast-low-hsl), var(--color-alpha, 1));
}

.color-contrast-medium {
    color: hsla(var(--color-contrast-medium-hsl), var(--color-alpha, 1));
}

.color-contrast-high {
    color: hsla(var(--color-contrast-high-hsl), var(--color-alpha, 1));
}

.color-contrast-higher {
    color: hsla(var(--color-contrast-higher-hsl), var(--color-alpha, 1));
}

.color-primary-darker {
    color: hsla(var(--color-primary-darker-hsl), var(--color-alpha, 1));
}

.color-primary-dark {
    color: hsla(var(--color-primary-dark-hsl), var(--color-alpha, 1));
}

.color-primary {
    color: hsla(var(--color-primary-hsl), var(--color-alpha, 1));
}

.color-primary-light {
    color: hsla(var(--color-primary-light-hsl), var(--color-alpha, 1));
}

.color-primary-lighter {
    color: hsla(var(--color-primary-lighter-hsl), var(--color-alpha, 1));
}

.color-secondary-darker {
    color: hsla(var(--color-secondary-darker-hsl), var(--color-alpha, 1));
}

.color-secondary-dark {
    color: hsla(var(--color-secondary-dark-hsl), var(--color-alpha, 1));
}

.color-secondary {
    color: hsla(var(--color-secondary-hsl), var(--color-alpha, 1));
}

.color-secondary-light {
    color: hsla(var(--color-secondary-light-hsl), var(--color-alpha, 1));
}

.color-secondary-lighter {
    color: hsla(var(--color-secondary-lighter-hsl), var(--color-alpha, 1));
}

.color-accent-darker {
    color: hsla(var(--color-accent-darker-hsl), var(--color-alpha, 1));
}

.color-accent-dark {
    color: hsla(var(--color-accent-dark-hsl), var(--color-alpha, 1));
}

.color-accent {
    color: hsla(var(--color-accent-hsl), var(--color-alpha, 1));
}

.color-accent-light {
    color: hsla(var(--color-accent-light-hsl), var(--color-alpha, 1));
}

.color-accent-lighter {
    color: hsla(var(--color-accent-lighter-hsl), var(--color-alpha, 1));
}

.color-success-darker {
    color: hsla(var(--color-success-darker-hsl), var(--color-alpha, 1));
}

.color-success-dark {
    color: hsla(var(--color-success-dark-hsl), var(--color-alpha, 1));
}

.color-success {
    color: hsla(var(--color-success-hsl), var(--color-alpha, 1));
}

.color-success-light {
    color: hsla(var(--color-success-light-hsl), var(--color-alpha, 1));
}

.color-success-lighter {
    color: hsla(var(--color-success-lighter-hsl), var(--color-alpha, 1));
}

.color-warning-darker {
    color: hsla(var(--color-warning-darker-hsl), var(--color-alpha, 1));
}

.color-warning-dark {
    color: hsla(var(--color-warning-dark-hsl), var(--color-alpha, 1));
}

.color-warning {
    color: hsla(var(--color-warning-hsl), var(--color-alpha, 1));
}

.color-warning-light {
    color: hsla(var(--color-warning-light-hsl), var(--color-alpha, 1));
}

.color-warning-lighter {
    color: hsla(var(--color-warning-lighter-hsl), var(--color-alpha, 1));
}

.color-error-darker {
    color: hsla(var(--color-error-darker-hsl), var(--color-alpha, 1));
}

.color-error-dark {
    color: hsla(var(--color-error-dark-hsl), var(--color-alpha, 1));
}

.color-error {
    color: hsla(var(--color-error-hsl), var(--color-alpha, 1));
}

.color-error-light {
    color: hsla(var(--color-error-light-hsl), var(--color-alpha, 1));
}

.color-error-lighter {
    color: hsla(var(--color-error-lighter-hsl), var(--color-alpha, 1));
}

.color-white {
    color: hsla(var(--color-white-hsl), var(--color-alpha, 1));
}

.color-black {
    color: hsla(var(--color-black-hsl), var(--color-alpha, 1));
}

.color-opacity-0 {
    --color-alpha: 0;
}

.color-opacity-5\% {
    --color-alpha: 0.05;
}

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

.color-opacity-15\% {
    --color-alpha: 0.15;
}

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

.color-opacity-25\% {
    --color-alpha: 0.25;
}

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

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

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

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

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

.color-opacity-75\% {
    --color-alpha: 0.75;
}

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

.color-opacity-85\% {
    --color-alpha: 0.85;
}

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

.color-opacity-95\% {
    --color-alpha: 0.95;
}

/* gradients */
[class^=color-gradient], [class*=" color-gradient"] {
    color: transparent !important;
    -webkit-background-clip: text;
    background-clip: text;
}

/* size */
:root {
    --size-8xs: 0.25rem;
    /* 4px */
    --size-7xs: 0.375rem;
    /* 6px */
    --size-6xs: 0.5rem;
    /* 8px */
    --size-5xs: 0.625rem;
    /* 10px */
    --size-4xs: 0.75rem;
    /* 12px */
    --size-3xs: 1rem;
    /* 16px */
    --size-2xs: 1.25rem;
    /* 20px */
    --size-xs: 1.5rem;
    /* 24px */
    --size-sm: 1.75rem;
    /* 28px */
    --size-md: 2rem;
    /* 32px */
    --size-lg: 2.5rem;
    /* 40px */
    --size-xl: 3rem;
    /* 48px */
    --size-2xl: 4rem;
    /* 64px */
    --size-3xl: 6rem;
    /* 96px */
    --size-4xl: 8rem;
    /* 128px */
    --size-5xl: 12rem;
    /* 192px */
}

[class^=size-], [class*=" size-"] {
    height: var(--height);
    width: var(--width);
}

[class^=size-].btn, [class^=size-].form-control:not(textarea), [class*=" size-"].btn, [class*=" size-"].form-control:not(textarea) {
    line-height: var(--height);
    padding-top: 0;
    padding-bottom: 0;
}

[class^=size-].btn:not(.justify-between, .justify-start, .justify-end), [class*=" size-"].btn:not(.justify-between, .justify-start, .justify-end), [class^=width-].btn:not(.justify-between, .justify-start, .justify-end), [class*=" width-"].btn:not(.justify-between, .justify-start, .justify-end) {
    padding-left: 0;
    padding-right: 0;
}

[class^=width-], [class*=" width-"] {
    width: var(--width);
}

[class^=height-], [class*=" height-"] {
    height: var(--height);
}

[class^=height-].btn, [class^=height-].form-control:not(textarea), [class*=" height-"].btn, [class*=" height-"].form-control:not(textarea) {
    line-height: var(--height);
    padding-top: 0;
    padding-bottom: 0;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.size-0, .width-0 {
    --width: 0;
}

.size-0, .height-0 {
    --height: 0;
}

.size-inherit, .width-inherit {
    width: inherit;
}

.size-inherit, .height-inherit {
    height: inherit;
}

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

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

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

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

.width-33\% {
    width: 33.3333333333%;
}

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

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

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

.width-66\% {
    width: 66.6666666667%;
}

.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 */
.height-10\% {
    height: 10%;
}

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

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

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

.height-33\% {
    height: 33.3333333333%;
}

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

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

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

.height-66\% {
    height: 66.6666666667%;
}

.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 */
.min-width-0 {
    min-width: 0;
}

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

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

/* min-height */
.min-height-0 {
    min-height: 0;
}

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

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

/* max-width */
:root {
    --max-width-5xs: 17.5rem;
    /* 280px */
    --max-width-4xs: 20rem;
    /* 320px */
    --max-width-3xs: 26rem;
    /* 416px */
    --max-width-2xs: 32rem;
    /* 512px */
    --max-width-xs: 38rem;
    /* 608px */
    --max-width-sm: 48rem;
    /* 768px */
    --max-width-md: 56rem;
    /* 896px */
    --max-width-lg: 64rem;
    /* 1024px */
    --max-width-xl: 80rem;
    /* 1280px */
    --max-width-2xl: 90rem;
    /* 1440px */
    --max-width-3xl: 100rem;
    /* 1600px */
    --max-width-4xl: 120rem;
    /* 1920px */
}

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

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

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

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

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

.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-2xl {
    max-width: var(--max-width-2xl);
}

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

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

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

.max-width-none {
    max-width: none;
}

/* adaptive max-width - equal to current breakpoint */
[class^=max-width-adaptive], [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 */
.max-height-100\% {
    max-height: 100%;
}

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

/* box-shadow */
.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;
}

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

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

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

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

:where(.inner-glow, .inner-glow-top) {
    position: relative;
}

.inner-glow::after, .inner-glow-top::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    pointer-events: none;
}

.inner-glow::after {
    box-shadow: var(--inner-glow);
}

.inner-glow-top::after {
    box-shadow: var(--inner-glow-top);
}

/* position */
.position-relative {
    position: relative;
}

.position-absolute {
    position: absolute;
}

.position-fixed {
    position: fixed;
}

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

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

.top-0 {
    top: 0;
}

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

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

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

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

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

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

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

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

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

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

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

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

.bottom-0 {
    bottom: 0;
}

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

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

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

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

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

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

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

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

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

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

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

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

.right-0 {
    right: 0;
}

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

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

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

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

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

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

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

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

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

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

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

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

.left-0 {
    left: 0;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* overflow */
.overflow-visible {
    overflow: visible;
}

.overflow-hidden {
    overflow: hidden;
}

.overflow-auto {
    overflow: auto;
}

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

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

/* scroll-behavior */
.scroll-smooth {
    scroll-behavior: smooth;
}

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

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

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

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

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

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

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

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

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

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

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

/* opacity */
.opacity-0 {
    opacity: 0;
}

.opacity-5\% {
    opacity: 0.05;
}

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

.opacity-15\% {
    opacity: 0.15;
}

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

.opacity-25\% {
    opacity: 0.25;
}

.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-75\% {
    opacity: 0.75;
}

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

.opacity-85\% {
    opacity: 0.85;
}

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

.opacity-95\% {
    opacity: 0.95;
}

/* float */
.float-left {
    float: left;
}

.float-right {
    float: right;
}

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

/* border */
[class^="border-"], [class*=" border-"] {
    --border-alpha: 1;
}

.border {
    border: var(--border-width, 1px) var(--border-style, solid) hsla(var(--color-contrast-lower-hsl), var(--border-alpha, 1));
}

.border-top {
    border-top: var(--border-width, 1px) var(--border-style, solid) hsla(var(--color-contrast-lower-hsl), var(--border-alpha, 1));
}

.border-bottom {
    border-bottom: var(--border-width, 1px) var(--border-style, solid) hsla(var(--color-contrast-lower-hsl), var(--border-alpha, 1));
}

.border-left {
    border-left: var(--border-width, 1px) var(--border-style, solid) hsla(var(--color-contrast-lower-hsl), var(--border-alpha, 1));
}

.border-right {
    border-right: var(--border-width, 1px) var(--border-style, solid) hsla(var(--color-contrast-lower-hsl), var(--border-alpha, 1));
}

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

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

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

.border-dotted {
    --border-style: dotted;
}

.border-dashed {
    --border-style: dashed;
}

.border-bg-darker {
    border-color: hsla(var(--color-bg-darker-hsl), var(--border-alpha, 1));
}

.border-bg-dark {
    border-color: hsla(var(--color-bg-dark-hsl), var(--border-alpha, 1));
}

.border-bg {
    border-color: hsla(var(--color-bg-hsl), var(--border-alpha, 1));
}

.border-bg-light {
    border-color: hsla(var(--color-bg-light-hsl), var(--border-alpha, 1));
}

.border-bg-lighter {
    border-color: hsla(var(--color-bg-lighter-hsl), var(--border-alpha, 1));
}

.border-contrast-lower {
    border-color: hsla(var(--color-contrast-lower-hsl), var(--border-alpha, 1));
}

.border-contrast-low {
    border-color: hsla(var(--color-contrast-low-hsl), var(--border-alpha, 1));
}

.border-contrast-medium {
    border-color: hsla(var(--color-contrast-medium-hsl), var(--border-alpha, 1));
}

.border-contrast-high {
    border-color: hsla(var(--color-contrast-high-hsl), var(--border-alpha, 1));
}

.border-contrast-higher {
    border-color: hsla(var(--color-contrast-higher-hsl), var(--border-alpha, 1));
}

.border-primary-darker {
    border-color: hsla(var(--color-primary-darker-hsl), var(--border-alpha, 1));
}

.border-primary-dark {
    border-color: hsla(var(--color-primary-dark-hsl), var(--border-alpha, 1));
}

.border-primary {
    border-color: hsla(var(--color-primary-hsl), var(--border-alpha, 1));
}

.border-primary-light {
    border-color: hsla(var(--color-primary-light-hsl), var(--border-alpha, 1));
}

.border-primary-lighter {
    border-color: hsla(var(--color-primary-lighter-hsl), var(--border-alpha, 1));
}

.border-secondary-darker {
    border-color: hsla(var(--color-secondary-darker-hsl), var(--border-alpha, 1));
}

.border-secondary-dark {
    border-color: hsla(var(--color-secondary-dark-hsl), var(--border-alpha, 1));
}

.border-secondary {
    border-color: hsla(var(--color-secondary-hsl), var(--border-alpha, 1));
}

.border-secondary-light {
    border-color: hsla(var(--color-secondary-light-hsl), var(--border-alpha, 1));
}

.border-secondary-lighter {
    border-color: hsla(var(--color-secondary-lighter-hsl), var(--border-alpha, 1));
}

.border-accent-darker {
    border-color: hsla(var(--color-accent-darker-hsl), var(--border-alpha, 1));
}

.border-accent-dark {
    border-color: hsla(var(--color-accent-dark-hsl), var(--border-alpha, 1));
}

.border-accent {
    border-color: hsla(var(--color-accent-hsl), var(--border-alpha, 1));
}

.border-accent-light {
    border-color: hsla(var(--color-accent-light-hsl), var(--border-alpha, 1));
}

.border-accent-lighter {
    border-color: hsla(var(--color-accent-lighter-hsl), var(--border-alpha, 1));
}

.border-success-darker {
    border-color: hsla(var(--color-success-darker-hsl), var(--border-alpha, 1));
}

.border-success-dark {
    border-color: hsla(var(--color-success-dark-hsl), var(--border-alpha, 1));
}

.border-success {
    border-color: hsla(var(--color-success-hsl), var(--border-alpha, 1));
}

.border-success-light {
    border-color: hsla(var(--color-success-light-hsl), var(--border-alpha, 1));
}

.border-success-lighter {
    border-color: hsla(var(--color-success-lighter-hsl), var(--border-alpha, 1));
}

.border-warning-darker {
    border-color: hsla(var(--color-warning-darker-hsl), var(--border-alpha, 1));
}

.border-warning-dark {
    border-color: hsla(var(--color-warning-dark-hsl), var(--border-alpha, 1));
}

.border-warning {
    border-color: hsla(var(--color-warning-hsl), var(--border-alpha, 1));
}

.border-warning-light {
    border-color: hsla(var(--color-warning-light-hsl), var(--border-alpha, 1));
}

.border-warning-lighter {
    border-color: hsla(var(--color-warning-lighter-hsl), var(--border-alpha, 1));
}

.border-error-darker {
    border-color: hsla(var(--color-error-darker-hsl), var(--border-alpha, 1));
}

.border-error-dark {
    border-color: hsla(var(--color-error-dark-hsl), var(--border-alpha, 1));
}

.border-error {
    border-color: hsla(var(--color-error-hsl), var(--border-alpha, 1));
}

.border-error-light {
    border-color: hsla(var(--color-error-light-hsl), var(--border-alpha, 1));
}

.border-error-lighter {
    border-color: hsla(var(--color-error-lighter-hsl), var(--border-alpha, 1));
}

.border-white {
    border-color: hsla(var(--color-white-hsl), var(--border-alpha, 1));
}

.border-black {
    border-color: hsla(var(--color-black-hsl), var(--border-alpha, 1));
}

:root, [data-theme="dark"] {
    --color-border-alpha: hsla(var(--color-contrast-higher-hsl), 0.09);
}

.border-alpha {
    border-color: var(--color-border-alpha);
}

.border-opacity-0 {
    --border-alpha: 0;
}

.border-opacity-5\% {
    --border-alpha: 0.05;
}

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

.border-opacity-15\% {
    --border-alpha: 0.15;
}

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

.border-opacity-25\% {
    --border-alpha: 0.25;
}

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

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

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

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

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

.border-opacity-75\% {
    --border-alpha: 0.75;
}

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

.border-opacity-85\% {
    --border-alpha: 0.85;
}

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

.border-opacity-95\% {
    --border-alpha: 0.95;
}

/* border-radius */
.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-inherit {
    border-radius: inherit;
}

.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;
}

/* background */
.bg, [class^="bg-"], [class*=" bg-"] {
    --bg-alpha: 1;
}

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

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

.bg-darker {
    background-color: hsla(var(--color-bg-darker-hsl), var(--bg-alpha, 1));
}

.bg-dark {
    background-color: hsla(var(--color-bg-dark-hsl), var(--bg-alpha, 1));
}

.bg {
    background-color: hsla(var(--color-bg-hsl), var(--bg-alpha, 1));
}

.bg-light {
    background-color: hsla(var(--color-bg-light-hsl), var(--bg-alpha, 1));
}

.bg-lighter {
    background-color: hsla(var(--color-bg-lighter-hsl), var(--bg-alpha, 1));
}

.bg-contrast-lower {
    background-color: hsla(var(--color-contrast-lower-hsl), var(--bg-alpha, 1));
}

.bg-contrast-low {
    background-color: hsla(var(--color-contrast-low-hsl), var(--bg-alpha, 1));
}

.bg-contrast-medium {
    background-color: hsla(var(--color-contrast-medium-hsl), var(--bg-alpha, 1));
}

.bg-contrast-high {
    background-color: hsla(var(--color-contrast-high-hsl), var(--bg-alpha, 1));
}

.bg-contrast-higher {
    background-color: hsla(var(--color-contrast-higher-hsl), var(--bg-alpha, 1));
}

.bg-primary-darker {
    background-color: hsla(var(--color-primary-darker-hsl), var(--bg-alpha, 1));
}

.bg-primary-dark {
    background-color: hsla(var(--color-primary-dark-hsl), var(--bg-alpha, 1));
}

.bg-primary {
    background-color: hsla(var(--color-primary-hsl), var(--bg-alpha, 1));
}

.bg-primary-light {
    background-color: hsla(var(--color-primary-light-hsl), var(--bg-alpha, 1));
}

.bg-primary-lighter {
    background-color: hsla(var(--color-primary-lighter-hsl), var(--bg-alpha, 1));
}

.bg-secondary-darker {
    background-color: hsla(var(--color-secondary-darker-hsl), var(--bg-alpha, 1));
}

.bg-secondary-dark {
    background-color: hsla(var(--color-secondary-dark-hsl), var(--bg-alpha, 1));
}

.bg-secondary {
    background-color: hsla(var(--color-secondary-hsl), var(--bg-alpha, 1));
}

.bg-secondary-light {
    background-color: hsla(var(--color-secondary-light-hsl), var(--bg-alpha, 1));
}

.bg-secondary-lighter {
    background-color: hsla(var(--color-secondary-lighter-hsl), var(--bg-alpha, 1));
}

.bg-accent-darker {
    background-color: hsla(var(--color-accent-darker-hsl), var(--bg-alpha, 1));
}

.bg-accent-dark {
    background-color: hsla(var(--color-accent-dark-hsl), var(--bg-alpha, 1));
}

.bg-accent {
    background-color: hsla(var(--color-accent-hsl), var(--bg-alpha, 1));
}

.bg-accent-light {
    background-color: hsla(var(--color-accent-light-hsl), var(--bg-alpha, 1));
}

.bg-accent-lighter {
    background-color: hsla(var(--color-accent-lighter-hsl), var(--bg-alpha, 1));
}

.bg-success-darker {
    background-color: hsla(var(--color-success-darker-hsl), var(--bg-alpha, 1));
}

.bg-success-dark {
    background-color: hsla(var(--color-success-dark-hsl), var(--bg-alpha, 1));
}

.bg-success {
    background-color: hsla(var(--color-success-hsl), var(--bg-alpha, 1));
}

.bg-success-light {
    background-color: hsla(var(--color-success-light-hsl), var(--bg-alpha, 1));
}

.bg-success-lighter {
    background-color: hsla(var(--color-success-lighter-hsl), var(--bg-alpha, 1));
}

.bg-warning-darker {
    background-color: hsla(var(--color-warning-darker-hsl), var(--bg-alpha, 1));
}

.bg-warning-dark {
    background-color: hsla(var(--color-warning-dark-hsl), var(--bg-alpha, 1));
}

.bg-warning {
    background-color: hsla(var(--color-warning-hsl), var(--bg-alpha, 1));
}

.bg-warning-light {
    background-color: hsla(var(--color-warning-light-hsl), var(--bg-alpha, 1));
}

.bg-warning-lighter {
    background-color: hsla(var(--color-warning-lighter-hsl), var(--bg-alpha, 1));
}

.bg-error-darker {
    background-color: hsla(var(--color-error-darker-hsl), var(--bg-alpha, 1));
}

.bg-error-dark {
    background-color: hsla(var(--color-error-dark-hsl), var(--bg-alpha, 1));
}

.bg-error {
    background-color: hsla(var(--color-error-hsl), var(--bg-alpha, 1));
}

.bg-error-light {
    background-color: hsla(var(--color-error-light-hsl), var(--bg-alpha, 1));
}

.bg-error-lighter {
    background-color: hsla(var(--color-error-lighter-hsl), var(--bg-alpha, 1));
}

.bg-white {
    background-color: hsla(var(--color-white-hsl), var(--bg-alpha, 1));
}

.bg-black {
    background-color: hsla(var(--color-black-hsl), var(--bg-alpha, 1));
}

.bg-opacity-0 {
    --bg-alpha: 0;
}

.bg-opacity-5\% {
    --bg-alpha: 0.05;
}

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

.bg-opacity-15\% {
    --bg-alpha: 0.15;
}

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

.bg-opacity-25\% {
    --bg-alpha: 0.25;
}

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

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

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

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

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

.bg-opacity-75\% {
    --bg-alpha: 0.75;
}

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

.bg-opacity-85\% {
    --bg-alpha: 0.85;
}

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

.bg-opacity-95\% {
    --bg-alpha: 0.95;
}

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

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

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

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

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

.bg-top-left {
    background-position: left top;
}

.bg-top-right {
    background-position: right top;
}

.bg-bottom-left {
    background-position: left bottom;
}

.bg-bottom-right {
    background-position: right bottom;
}

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

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

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

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

/* mix-blend-mode */
.isolate {
    isolation: isolate;
}

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

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

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

/* filter */
@media (min-width: 64rem) {
    .grayscale-100\% {
        -webkit-filter: grayscale(100%);
        filter: grayscale(100%);
    }
}

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

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

/* perspective */
.perspective-xs {
    -webkit-perspective: 250px;
    perspective: 250px;
}

.perspective-sm {
    -webkit-perspective: 500px;
    perspective: 500px;
}

.perspective-md {
    -webkit-perspective: 1000px;
    perspective: 1000px;
}

.perspective-lg {
    -webkit-perspective: 1500px;
    perspective: 1500px;
}

.perspective-xl {
    -webkit-perspective: 3000px;
    perspective: 3000px;
}

/* transform */
[class^=flip], [class*=" flip"], [class^=-rotate], [class*=" -rotate"], [class^=rotate], [class*=" rotate"], [class^=-translate], [class*=" -translate"], [class^=translate], [class*=" translate"], [class^=-scale], [class*=" -scale"], [class^=scale], [class*=" scale"], [class^=-skew], [class*=" -skew"] [class^=skew], [class*=" skew"] {
    --translate: 0;
    --rotate: 0;
    --skew: 0;
    --scale: 1;
    -webkit-transform: translate3d(var(--translate-x, var(--translate)), var(--translate-y, var(--translate)), var(--translate-z, 0)) rotateX(var(--rotate-x, 0)) rotateY(var(--rotate-y, 0)) rotateZ(var(--rotate-z, var(--rotate))) skewX(var(--skew-x, var(--skew))) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, var(--scale))) scaleY(var(--scale-y, var(--scale)));
    transform: translate3d(var(--translate-x, var(--translate)), var(--translate-y, var(--translate)), var(--translate-z, 0)) rotateX(var(--rotate-x, 0)) rotateY(var(--rotate-y, 0)) rotateZ(var(--rotate-z, var(--rotate))) skewX(var(--skew-x, var(--skew))) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, var(--scale))) scaleY(var(--scale-y, var(--scale)));
}

.flip {
    --scale: -1;
}

.flip-x {
    --scale-x: -1;
}

.flip-y {
    --scale-y: -1;
}

.rotate-90 {
    --rotate: 90deg;
}

.rotate-180 {
    --rotate: 180deg;
}

.rotate-270 {
    --rotate: 270deg;
}

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

.-translate-x-50\% {
    --translate-x: -50%;
}

.-translate-y-50\% {
    --translate-y: -50%;
}

.-translate-y-slight {
    --translate-y: -0.1em;
}

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

.translate-x-50\% {
    --translate-x: 50%;
}

.translate-y-50\% {
    --translate-y: 50%;
}

/* transform-origin */
.origin-center {
    -webkit-transform-origin: center;
    transform-origin: center;
}

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

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

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

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

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

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

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

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

/* transition */
.transition {
    transition-property: var(--transition-property, all);
    transition-duration: var(--transition-duration, 0.2s);
    transition-delay: var(--transition-delay, 0s);
}

/* SVG */
.fill-current {
    fill: currentColor;
}

.stroke-current {
    stroke: currentColor;
}

.stroke-1 {
    stroke-width: 1px;
}

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

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

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

/* visibility */
.visible {
    visibility: visible;
}

.invisible {
    visibility: hidden;
}

/* themes */
[data-theme="dark"] .theme-dark\:hide {
    display: none !important;
}

body:not([data-theme="dark"]) .theme-default\:hide {
    display: none !important;
}

/* hover */
.hover\:opacity-85\%:hover {
    opacity: 85%;
}

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

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

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

.hover\:scale {
    transition: -webkit-transform 0.3s var(--ease-out-back);
    transition: transform 0.3s var(--ease-out-back);
    transition: transform 0.3s var(--ease-out-back), -webkit-transform 0.3s var(--ease-out-back);
}

.hover\:scale:hover {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}

@media (min-width: 64rem) {
    .hover\:grayscale-0:hover {
        -webkit-filter: grayscale(0%);
        filter: grayscale(0%);
    }
}

/* active */
.active\:opacity-60\%:active {
    opacity: 60%;
}

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

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

    .print\:no-shadow {
        box-shadow: none;
    }
}

/* responsive variations */
@media (min-width: 32rem) {
    .grid-col-1\@xs {
        --grid-columns: 1;
    }

    .grid-col-2\@xs {
        --grid-columns: 2;
    }

    .grid-col-3\@xs {
        --grid-columns: 3;
    }

    .grid-col-4\@xs {
        --grid-columns: 4;
    }

    .grid-col-5\@xs {
        --grid-columns: 5;
    }

    .grid-col-6\@xs {
        --grid-columns: 6;
    }

    .grid-col-7\@xs {
        --grid-columns: 7;
    }

    .grid-col-8\@xs {
        --grid-columns: 8;
    }

    .grid-col-9\@xs {
        --grid-columns: 9;
    }

    .grid-col-10\@xs {
        --grid-columns: 10;
    }

    .grid-col-11\@xs {
        --grid-columns: 11;
    }

    .grid-col-12\@xs {
        --grid-columns: 12;
    }

    .col-1\@xs, .col-2\@xs, .col-3\@xs, .col-4\@xs, .col-5\@xs, .col-6\@xs, .col-7\@xs, .col-8\@xs, .col-9\@xs, .col-10\@xs, .col-11\@xs, .col-12\@xs {
        width: calc(((100% - (var(--grid-columns) - 1) * var(--sub-gap-x)) * var(--span) / var(--grid-columns)) + (var(--span) - 1) * var(--sub-gap-x));
        flex: initial;
    }

    .col-1\@xs {
        --span: 1;
    }

    .col-2\@xs {
        --span: 2;
    }

    .col-3\@xs {
        --span: 3;
    }

    .col-4\@xs {
        --span: 4;
    }

    .col-5\@xs {
        --span: 5;
    }

    .col-6\@xs {
        --span: 6;
    }

    .col-7\@xs {
        --span: 7;
    }

    .col-8\@xs {
        --span: 8;
    }

    .col-9\@xs {
        --span: 9;
    }

    .col-10\@xs {
        --span: 10;
    }

    .col-11\@xs {
        --span: 11;
    }

    .col-12\@xs {
        --span: 12;
    }

    .col\@xs {
        width: auto;
        flex: 1 1 0;
    }

    .col-content\@xs {
        width: auto;
        flex: 0 1 auto;
    }

    .offset-1\@xs, .offset-2\@xs, .offset-3\@xs, .offset-4\@xs, .offset-5\@xs, .offset-6\@xs, .offset-7\@xs, .offset-8\@xs, .offset-9\@xs, .offset-10\@xs, .offset-11\@xs {
        margin-left: calc(((100% - (var(--grid-columns) - 1) * var(--sub-gap-x)) * var(--offset) / var(--grid-columns)) + var(--offset) * var(--sub-gap-x));
    }

    .offset-1\@xs {
        --offset: 1;
    }

    .offset-2\@xs {
        --offset: 2;
    }

    .offset-3\@xs {
        --offset: 3;
    }

    .offset-4\@xs {
        --offset: 4;
    }

    .offset-5\@xs {
        --offset: 5;
    }

    .offset-6\@xs {
        --offset: 6;
    }

    .offset-7\@xs {
        --offset: 7;
    }

    .offset-8\@xs {
        --offset: 8;
    }

    .offset-9\@xs {
        --offset: 9;
    }

    .offset-10\@xs {
        --offset: 10;
    }

    .offset-11\@xs {
        --offset: 11;
    }

    .offset-0\@xs {
        --offset: 0;
    }

    /* gap */
    .gap-4xs\@xs {
        --gap-x: var(--space-4xs);
        --gap-y: var(--space-4xs);
    }

    .gap-4xs\@xs > * {
        --sub-gap-x: var(--space-4xs);
        --sub-gap-y: var(--space-4xs);
    }

    .gap-3xs\@xs {
        --gap-x: var(--space-3xs);
        --gap-y: var(--space-3xs);
    }

    .gap-3xs\@xs > * {
        --sub-gap-x: var(--space-3xs);
        --sub-gap-y: var(--space-3xs);
    }

    .gap-2xs\@xs {
        --gap-x: var(--space-2xs);
        --gap-y: var(--space-2xs);
    }

    .gap-2xs\@xs > * {
        --sub-gap-x: var(--space-2xs);
        --sub-gap-y: var(--space-2xs);
    }

    .gap-xs\@xs {
        --gap-x: var(--space-xs);
        --gap-y: var(--space-xs);
    }

    .gap-xs\@xs > * {
        --sub-gap-x: var(--space-xs);
        --sub-gap-y: var(--space-xs);
    }

    .gap-sm\@xs {
        --gap-x: var(--space-sm);
        --gap-y: var(--space-sm);
    }

    .gap-sm\@xs > * {
        --sub-gap-x: var(--space-sm);
        --sub-gap-y: var(--space-sm);
    }

    .gap-md\@xs {
        --gap-x: var(--space-md);
        --gap-y: var(--space-md);
    }

    .gap-md\@xs > * {
        --sub-gap-x: var(--space-md);
        --sub-gap-y: var(--space-md);
    }

    .gap-lg\@xs {
        --gap-x: var(--space-lg);
        --gap-y: var(--space-lg);
    }

    .gap-lg\@xs > * {
        --sub-gap-x: var(--space-lg);
        --sub-gap-y: var(--space-lg);
    }

    .gap-xl\@xs {
        --gap-x: var(--space-xl);
        --gap-y: var(--space-xl);
    }

    .gap-xl\@xs > * {
        --sub-gap-x: var(--space-xl);
        --sub-gap-y: var(--space-xl);
    }

    .gap-2xl\@xs {
        --gap-x: var(--space-2xl);
        --gap-y: var(--space-2xl);
    }

    .gap-2xl\@xs > * {
        --sub-gap-x: var(--space-2xl);
        --sub-gap-y: var(--space-2xl);
    }

    .gap-3xl\@xs {
        --gap-x: var(--space-3xl);
        --gap-y: var(--space-3xl);
    }

    .gap-3xl\@xs > * {
        --sub-gap-x: var(--space-3xl);
        --sub-gap-y: var(--space-3xl);
    }

    .gap-4xl\@xs {
        --gap-x: var(--space-4xl);
        --gap-y: var(--space-4xl);
    }

    .gap-4xl\@xs > * {
        --sub-gap-x: var(--space-4xl);
        --sub-gap-y: var(--space-4xl);
    }

    .gap-0\@xs {
        --gap-x: 0px;
        --gap-y: 0px;
    }

    .gap-0\@xs > * {
        --sub-gap-x: 0px;
        --sub-gap-y: 0px;
    }

    .gap-x-4xs\@xs {
        --gap-x: var(--space-4xs);
    }

    .gap-x-4xs\@xs > * {
        --sub-gap-x: var(--space-4xs);
    }

    .gap-x-3xs\@xs {
        --gap-x: var(--space-3xs);
    }

    .gap-x-3xs\@xs > * {
        --sub-gap-x: var(--space-3xs);
    }

    .gap-x-2xs\@xs {
        --gap-x: var(--space-2xs);
    }

    .gap-x-2xs\@xs > * {
        --sub-gap-x: var(--space-2xs);
    }

    .gap-x-xs\@xs {
        --gap-x: var(--space-xs);
    }

    .gap-x-xs\@xs > * {
        --sub-gap-x: var(--space-xs);
    }

    .gap-x-sm\@xs {
        --gap-x: var(--space-sm);
    }

    .gap-x-sm\@xs > * {
        --sub-gap-x: var(--space-sm);
    }

    .gap-x-md\@xs {
        --gap-x: var(--space-md);
    }

    .gap-x-md\@xs > * {
        --sub-gap-x: var(--space-md);
    }

    .gap-x-lg\@xs {
        --gap-x: var(--space-lg);
    }

    .gap-x-lg\@xs > * {
        --sub-gap-x: var(--space-lg);
    }

    .gap-x-xl\@xs {
        --gap-x: var(--space-xl);
    }

    .gap-x-xl\@xs > * {
        --sub-gap-x: var(--space-xl);
    }

    .gap-x-2xl\@xs {
        --gap-x: var(--space-2xl);
    }

    .gap-x-2xl\@xs > * {
        --sub-gap-x: var(--space-2xl);
    }

    .gap-x-3xl\@xs {
        --gap-x: var(--space-3xl);
    }

    .gap-x-3xl\@xs > * {
        --sub-gap-x: var(--space-3xl);
    }

    .gap-x-4xl\@xs {
        --gap-x: var(--space-4xl);
    }

    .gap-x-4xl\@xs > * {
        --sub-gap-x: var(--space-4xl);
    }

    .gap-x-0\@xs {
        --gap-x: 0px;
    }

    .gap-x-0\@xs > * {
        --sub-gap-x: 0px;
    }

    .gap-y-4xs\@xs {
        --gap-y: var(--space-4xs);
    }

    .gap-y-4xs\@xs > * {
        --sub-gap-y: var(--space-4xs);
    }

    .gap-y-3xs\@xs {
        --gap-y: var(--space-3xs);
    }

    .gap-y-3xs\@xs > * {
        --sub-gap-y: var(--space-3xs);
    }

    .gap-y-2xs\@xs {
        --gap-y: var(--space-2xs);
    }

    .gap-y-2xs\@xs > * {
        --sub-gap-y: var(--space-2xs);
    }

    .gap-y-xs\@xs {
        --gap-y: var(--space-xs);
    }

    .gap-y-xs\@xs > * {
        --sub-gap-y: var(--space-xs);
    }

    .gap-y-sm\@xs {
        --gap-y: var(--space-sm);
    }

    .gap-y-sm\@xs > * {
        --sub-gap-y: var(--space-sm);
    }

    .gap-y-md\@xs {
        --gap-y: var(--space-md);
    }

    .gap-y-md\@xs > * {
        --sub-gap-y: var(--space-md);
    }

    .gap-y-lg\@xs {
        --gap-y: var(--space-lg);
    }

    .gap-y-lg\@xs > * {
        --sub-gap-y: var(--space-lg);
    }

    .gap-y-xl\@xs {
        --gap-y: var(--space-xl);
    }

    .gap-y-xl\@xs > * {
        --sub-gap-y: var(--space-xl);
    }

    .gap-y-2xl\@xs {
        --gap-y: var(--space-2xl);
    }

    .gap-y-2xl\@xs > * {
        --sub-gap-y: var(--space-2xl);
    }

    .gap-y-3xl\@xs {
        --gap-y: var(--space-3xl);
    }

    .gap-y-3xl\@xs > * {
        --sub-gap-y: var(--space-3xl);
    }

    .gap-y-4xl\@xs {
        --gap-y: var(--space-4xl);
    }

    .gap-y-4xl\@xs > * {
        --sub-gap-y: var(--space-4xl);
    }

    .gap-y-0\@xs {
        --gap-y: 0px;
    }

    .gap-y-0\@xs > * {
        --sub-gap-y: 0px;
    }

    /* flexbox */
    .flex\@xs {
        display: flex;
    }

    .inline-flex\@xs {
        display: inline-flex;
    }

    .flex-wrap\@xs {
        flex-wrap: wrap;
    }

    .flex-nowrap\@xs {
        flex-wrap: nowrap;
    }

    .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-content */
    .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;
    }

    /* align-items */
    .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 */
    .order-1\@xs {
        order: 1;
    }

    .order-2\@xs {
        order: 2;
    }

    .order-3\@xs {
        order: 3;
    }

    /* display */
    .block\@xs {
        display: block;
    }

    .inline-block\@xs {
        display: inline-block;
    }

    .inline\@xs {
        display: inline;
    }

    .contents\@xs {
        display: contents;
    }

    .hide\@xs {
        display: none !important;
    }

    /* spacing */
    .space-4xs\@xs {
        --space-unit: 0.25rem;
    }

    .space-3xs\@xs {
        --space-unit: 0.4rem;
    }

    .space-2xs\@xs {
        --space-unit: 0.55rem;
    }

    .space-xs\@xs {
        --space-unit: 0.7rem;
    }

    .space-sm\@xs {
        --space-unit: 0.85rem;
    }

    .space-base\@xs {
        --space-unit: 1rem;
    }

    .space-md\@xs {
        --space-unit: 1.15rem;
    }

    .space-lg\@xs {
        --space-unit: 1.3rem;
    }

    .space-xl\@xs {
        --space-unit: 1.45rem;
    }

    /* margin */
    .margin-4xs\@xs {
        margin: var(--space-4xs);
    }

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

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

    .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-2xl\@xs {
        margin: var(--space-2xl);
    }

    .margin-3xl\@xs {
        margin: var(--space-3xl);
    }

    .margin-4xl\@xs {
        margin: var(--space-4xl);
    }

    .margin-auto\@xs {
        margin: auto;
    }

    .margin-0\@xs {
        margin: 0;
    }

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

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

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

    .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-2xl\@xs {
        margin-top: var(--space-2xl);
    }

    .margin-top-3xl\@xs {
        margin-top: var(--space-3xl);
    }

    .margin-top-4xl\@xs {
        margin-top: var(--space-4xl);
    }

    .margin-top-auto\@xs {
        margin-top: auto;
    }

    .margin-top-0\@xs {
        margin-top: 0;
    }

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

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

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

    .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-2xl\@xs {
        margin-bottom: var(--space-2xl);
    }

    .margin-bottom-3xl\@xs {
        margin-bottom: var(--space-3xl);
    }

    .margin-bottom-4xl\@xs {
        margin-bottom: var(--space-4xl);
    }

    .margin-bottom-auto\@xs {
        margin-bottom: auto;
    }

    .margin-bottom-0\@xs {
        margin-bottom: 0;
    }

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

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

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

    .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-2xl\@xs {
        margin-right: var(--space-2xl);
    }

    .margin-right-3xl\@xs {
        margin-right: var(--space-3xl);
    }

    .margin-right-4xl\@xs {
        margin-right: var(--space-4xl);
    }

    .margin-right-auto\@xs {
        margin-right: auto;
    }

    .margin-right-0\@xs {
        margin-right: 0;
    }

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

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

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

    .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-2xl\@xs {
        margin-left: var(--space-2xl);
    }

    .margin-left-3xl\@xs {
        margin-left: var(--space-3xl);
    }

    .margin-left-4xl\@xs {
        margin-left: var(--space-4xl);
    }

    .margin-left-auto\@xs {
        margin-left: auto;
    }

    .margin-left-0\@xs {
        margin-left: 0;
    }

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

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

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

    .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-2xl\@xs {
        margin-left: var(--space-2xl);
        margin-right: var(--space-2xl);
    }

    .margin-x-3xl\@xs {
        margin-left: var(--space-3xl);
        margin-right: var(--space-3xl);
    }

    .margin-x-4xl\@xs {
        margin-left: var(--space-4xl);
        margin-right: var(--space-4xl);
    }

    .margin-x-auto\@xs {
        margin-left: auto;
        margin-right: auto;
    }

    .margin-x-0\@xs {
        margin-left: 0;
        margin-right: 0;
    }

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

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

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

    .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-2xl\@xs {
        margin-top: var(--space-2xl);
        margin-bottom: var(--space-2xl);
    }

    .margin-y-3xl\@xs {
        margin-top: var(--space-3xl);
        margin-bottom: var(--space-3xl);
    }

    .margin-y-4xl\@xs {
        margin-top: var(--space-4xl);
        margin-bottom: var(--space-4xl);
    }

    .margin-y-auto\@xs {
        margin-top: auto;
        margin-bottom: auto;
    }

    .margin-y-0\@xs {
        margin-top: 0;
        margin-bottom: 0;
    }

    /* padding */
    .padding-4xs\@xs {
        padding: var(--space-4xs);
    }

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

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

    .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-2xl\@xs {
        padding: var(--space-2xl);
    }

    .padding-3xl\@xs {
        padding: var(--space-3xl);
    }

    .padding-4xl\@xs {
        padding: var(--space-4xl);
    }

    .padding-0\@xs {
        padding: 0;
    }

    .padding-component\@xs {
        padding: var(--component-padding);
    }

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

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

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

    .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-2xl\@xs {
        padding-top: var(--space-2xl);
    }

    .padding-top-3xl\@xs {
        padding-top: var(--space-3xl);
    }

    .padding-top-4xl\@xs {
        padding-top: var(--space-4xl);
    }

    .padding-top-0\@xs {
        padding-top: 0;
    }

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

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

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

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

    .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-2xl\@xs {
        padding-bottom: var(--space-2xl);
    }

    .padding-bottom-3xl\@xs {
        padding-bottom: var(--space-3xl);
    }

    .padding-bottom-4xl\@xs {
        padding-bottom: var(--space-4xl);
    }

    .padding-bottom-0\@xs {
        padding-bottom: 0;
    }

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

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

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

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

    .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-2xl\@xs {
        padding-right: var(--space-2xl);
    }

    .padding-right-3xl\@xs {
        padding-right: var(--space-3xl);
    }

    .padding-right-4xl\@xs {
        padding-right: var(--space-4xl);
    }

    .padding-right-0\@xs {
        padding-right: 0;
    }

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

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

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

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

    .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-2xl\@xs {
        padding-left: var(--space-2xl);
    }

    .padding-left-3xl\@xs {
        padding-left: var(--space-3xl);
    }

    .padding-left-4xl\@xs {
        padding-left: var(--space-4xl);
    }

    .padding-left-0\@xs {
        padding-left: 0;
    }

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

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

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

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

    .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-2xl\@xs {
        padding-left: var(--space-2xl);
        padding-right: var(--space-2xl);
    }

    .padding-x-3xl\@xs {
        padding-left: var(--space-3xl);
        padding-right: var(--space-3xl);
    }

    .padding-x-4xl\@xs {
        padding-left: var(--space-4xl);
        padding-right: var(--space-4xl);
    }

    .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-4xs\@xs {
        padding-top: var(--space-4xs);
        padding-bottom: var(--space-4xs);
    }

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

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

    .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-2xl\@xs {
        padding-top: var(--space-2xl);
        padding-bottom: var(--space-2xl);
    }

    .padding-y-3xl\@xs {
        padding-top: var(--space-3xl);
        padding-bottom: var(--space-3xl);
    }

    .padding-y-4xl\@xs {
        padding-top: var(--space-4xl);
        padding-bottom: var(--space-4xl);
    }

    .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-align */
    .text-center\@xs {
        text-align: center;
    }

    .text-left\@xs {
        text-align: left;
    }

    .text-right\@xs {
        text-align: right;
    }

    .text-justify\@xs {
        text-align: justify;
    }

    /* font-size */
    .text-3xs\@xs {
        font-size: var(--text-3xs);
    }

    .text-2xs\@xs {
        font-size: var(--text-2xs);
    }

    .text-xs\@xs {
        font-size: var(--text-xs);
    }

    .text-sm\@xs {
        font-size: var(--text-sm);
    }

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

    .text-1rem\@xs {
        font-size: 1rem;
    }

    .text-md\@xs {
        font-size: var(--text-md);
    }

    .text-lg\@xs {
        font-size: var(--text-lg);
    }

    .text-xl\@xs {
        font-size: var(--text-xl);
    }

    .text-2xl\@xs {
        font-size: var(--text-2xl);
    }

    .text-3xl\@xs {
        font-size: var(--text-3xl);
    }

    .text-4xl\@xs {
        font-size: var(--text-4xl);
    }

    .text-5xl\@xs {
        font-size: var(--text-5xl);
    }

    .text-group-2xs\@xs {
        --text-unit: 0.82rem;
    }

    .text-group-xs\@xs {
        --text-unit: 0.8888888889rem;
    }

    .text-group-sm\@xs {
        --text-unit: 0.94rem;
    }

    .text-group-base\@xs {
        --text-unit: 1rem;
    }

    .text-group-md\@xs {
        --text-unit: 1.06rem;
    }

    .text-group-lg\@xs {
        --text-unit: 1.12rem;
    }

    .text-group-xl\@xs {
        --text-unit: 1.18rem;
    }

    /* column-count */
    .column-count-1\@xs {
        -webkit-column-count: 1;
        -moz-column-count: 1;
        column-count: 1;
    }

    .column-count-2\@xs {
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2;
    }

    .column-count-3\@xs {
        -webkit-column-count: 3;
        -moz-column-count: 3;
        column-count: 3;
    }

    .column-count-4\@xs {
        -webkit-column-count: 4;
        -moz-column-count: 4;
        column-count: 4;
    }

    /* size */
    .size-8xs\@xs, .width-8xs\@xs {
        --width: var(--size-8xs);
    }

    .size-8xs\@xs, .height-8xs\@xs {
        --height: var(--size-8xs);
    }

    .size-7xs\@xs, .width-7xs\@xs {
        --width: var(--size-7xs);
    }

    .size-7xs\@xs, .height-7xs\@xs {
        --height: var(--size-7xs);
    }

    .size-6xs\@xs, .width-6xs\@xs {
        --width: var(--size-6xs);
    }

    .size-6xs\@xs, .height-6xs\@xs {
        --height: var(--size-6xs);
    }

    .size-5xs\@xs, .width-5xs\@xs {
        --width: var(--size-5xs);
    }

    .size-5xs\@xs, .height-5xs\@xs {
        --height: var(--size-5xs);
    }

    .size-4xs\@xs, .width-4xs\@xs {
        --width: var(--size-4xs);
    }

    .size-4xs\@xs, .height-4xs\@xs {
        --height: var(--size-4xs);
    }

    .size-3xs\@xs, .width-3xs\@xs {
        --width: var(--size-3xs);
    }

    .size-3xs\@xs, .height-3xs\@xs {
        --height: var(--size-3xs);
    }

    .size-2xs\@xs, .width-2xs\@xs {
        --width: var(--size-2xs);
    }

    .size-2xs\@xs, .height-2xs\@xs {
        --height: var(--size-2xs);
    }

    .size-xs\@xs, .width-xs\@xs {
        --width: var(--size-xs);
    }

    .size-xs\@xs, .height-xs\@xs {
        --height: var(--size-xs);
    }

    .size-sm\@xs, .width-sm\@xs {
        --width: var(--size-sm);
    }

    .size-sm\@xs, .height-sm\@xs {
        --height: var(--size-sm);
    }

    .size-md\@xs, .width-md\@xs {
        --width: var(--size-md);
    }

    .size-md\@xs, .height-md\@xs {
        --height: var(--size-md);
    }

    .size-lg\@xs, .width-lg\@xs {
        --width: var(--size-lg);
    }

    .size-lg\@xs, .height-lg\@xs {
        --height: var(--size-lg);
    }

    .size-xl\@xs, .width-xl\@xs {
        --width: var(--size-xl);
    }

    .size-xl\@xs, .height-xl\@xs {
        --height: var(--size-xl);
    }

    .size-2xl\@xs, .width-2xl\@xs {
        --width: var(--size-2xl);
    }

    .size-2xl\@xs, .height-2xl\@xs {
        --height: var(--size-2xl);
    }

    .size-3xl\@xs, .width-3xl\@xs {
        --width: var(--size-3xl);
    }

    .size-3xl\@xs, .height-3xl\@xs {
        --height: var(--size-3xl);
    }

    .size-4xl\@xs, .width-4xl\@xs {
        --width: var(--size-4xl);
    }

    .size-4xl\@xs, .height-4xl\@xs {
        --height: var(--size-4xl);
    }

    .size-5xl\@xs, .width-5xl\@xs {
        --width: var(--size-5xl);
    }

    .size-5xl\@xs, .height-5xl\@xs {
        --height: var(--size-5xl);
    }

    .size-0\@xs, .width-0\@xs {
        --width: 0;
    }

    .size-0\@xs, .height-0\@xs {
        --height: 0;
    }

    .size-inherit\@xs, .width-inherit\@xs {
        width: inherit;
    }

    .size-inherit\@xs, .height-inherit\@xs {
        height: inherit;
    }

    /* width */
    .width-10\%\@xs {
        width: 10%;
    }

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

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

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

    .width-33\%\@xs {
        width: 33.3333333333%;
    }

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

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

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

    .width-66\%\@xs {
        width: 66.6666666667%;
    }

    .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;
    }

    /* height */
    .height-10\%\@xs {
        height: 10%;
    }

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

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

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

    .height-33\%\@xs {
        height: 33.3333333333%;
    }

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

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

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

    .height-66\%\@xs {
        height: 66.6666666667%;
    }

    .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;
    }

    /* max-width */
    .max-width-5xs\@xs {
        max-width: var(--max-width-5xs);
    }

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

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

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

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

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

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

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

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

    .max-width-2xl\@xs {
        max-width: var(--max-width-2xl);
    }

    .max-width-3xl\@xs {
        max-width: var(--max-width-3xl);
    }

    .max-width-4xl\@xs {
        max-width: var(--max-width-4xl);
    }

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

    .max-width-none\@xs {
        max-width: none;
    }

    /* position */
    .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;
    }

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

    .top-0\@xs {
        top: 0;
    }

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

    .top-4xs\@xs {
        top: var(--space-4xs);
    }

    .top-3xs\@xs {
        top: var(--space-3xs);
    }

    .top-2xs\@xs {
        top: var(--space-2xs);
    }

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

    .top-sm\@xs {
        top: var(--space-sm);
    }

    .top-md\@xs {
        top: var(--space-md);
    }

    .top-lg\@xs {
        top: var(--space-lg);
    }

    .top-xl\@xs {
        top: var(--space-xl);
    }

    .top-2xl\@xs {
        top: var(--space-2xl);
    }

    .top-3xl\@xs {
        top: var(--space-3xl);
    }

    .top-4xl\@xs {
        top: var(--space-4xl);
    }

    .bottom-0\@xs {
        bottom: 0;
    }

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

    .bottom-4xs\@xs {
        bottom: var(--space-4xs);
    }

    .bottom-3xs\@xs {
        bottom: var(--space-3xs);
    }

    .bottom-2xs\@xs {
        bottom: var(--space-2xs);
    }

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

    .bottom-sm\@xs {
        bottom: var(--space-sm);
    }

    .bottom-md\@xs {
        bottom: var(--space-md);
    }

    .bottom-lg\@xs {
        bottom: var(--space-lg);
    }

    .bottom-xl\@xs {
        bottom: var(--space-xl);
    }

    .bottom-2xl\@xs {
        bottom: var(--space-2xl);
    }

    .bottom-3xl\@xs {
        bottom: var(--space-3xl);
    }

    .bottom-4xl\@xs {
        bottom: var(--space-4xl);
    }

    .right-0\@xs {
        right: 0;
    }

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

    .right-4xs\@xs {
        right: var(--space-4xs);
    }

    .right-3xs\@xs {
        right: var(--space-3xs);
    }

    .right-2xs\@xs {
        right: var(--space-2xs);
    }

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

    .right-sm\@xs {
        right: var(--space-sm);
    }

    .right-md\@xs {
        right: var(--space-md);
    }

    .right-lg\@xs {
        right: var(--space-lg);
    }

    .right-xl\@xs {
        right: var(--space-xl);
    }

    .right-2xl\@xs {
        right: var(--space-2xl);
    }

    .right-3xl\@xs {
        right: var(--space-3xl);
    }

    .right-4xl\@xs {
        right: var(--space-4xl);
    }

    .left-0\@xs {
        left: 0;
    }

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

    .left-4xs\@xs {
        left: var(--space-4xs);
    }

    .left-3xs\@xs {
        left: var(--space-3xs);
    }

    .left-2xs\@xs {
        left: var(--space-2xs);
    }

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

    .left-sm\@xs {
        left: var(--space-sm);
    }

    .left-md\@xs {
        left: var(--space-md);
    }

    .left-lg\@xs {
        left: var(--space-lg);
    }

    .left-xl\@xs {
        left: var(--space-xl);
    }

    .left-2xl\@xs {
        left: var(--space-2xl);
    }

    .left-3xl\@xs {
        left: var(--space-3xl);
    }

    .left-4xl\@xs {
        left: var(--space-4xl);
    }

    /* overflow */
    .overflow-hidden\@xs {
        overflow: hidden;
    }

    .overflow-auto\@xs {
        overflow: auto;
    }

    .momentum-scrolling\@xs {
        -webkit-overflow-scrolling: touch;
    }

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

    /* visibility */
    .visible\@xs {
        visibility: visible;
    }

    .invisible\@xs {
        visibility: hidden;
    }
}

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

@media (min-width: 48rem) {
    .grid-col-1\@sm {
        --grid-columns: 1;
    }

    .grid-col-2\@sm {
        --grid-columns: 2;
    }

    .grid-col-3\@sm {
        --grid-columns: 3;
    }

    .grid-col-4\@sm {
        --grid-columns: 4;
    }

    .grid-col-5\@sm {
        --grid-columns: 5;
    }

    .grid-col-6\@sm {
        --grid-columns: 6;
    }

    .grid-col-7\@sm {
        --grid-columns: 7;
    }

    .grid-col-8\@sm {
        --grid-columns: 8;
    }

    .grid-col-9\@sm {
        --grid-columns: 9;
    }

    .grid-col-10\@sm {
        --grid-columns: 10;
    }

    .grid-col-11\@sm {
        --grid-columns: 11;
    }

    .grid-col-12\@sm {
        --grid-columns: 12;
    }

    .col-1\@sm, .col-2\@sm, .col-3\@sm, .col-4\@sm, .col-5\@sm, .col-6\@sm, .col-7\@sm, .col-8\@sm, .col-9\@sm, .col-10\@sm, .col-11\@sm, .col-12\@sm {
        width: calc(((100% - (var(--grid-columns) - 1) * var(--sub-gap-x)) * var(--span) / var(--grid-columns)) + (var(--span) - 1) * var(--sub-gap-x));
        flex: initial;
    }

    .col-1\@sm {
        --span: 1;
    }

    .col-2\@sm {
        --span: 2;
    }

    .col-3\@sm {
        --span: 3;
    }

    .col-4\@sm {
        --span: 4;
    }

    .col-5\@sm {
        --span: 5;
    }

    .col-6\@sm {
        --span: 6;
    }

    .col-7\@sm {
        --span: 7;
    }

    .col-8\@sm {
        --span: 8;
    }

    .col-9\@sm {
        --span: 9;
    }

    .col-10\@sm {
        --span: 10;
    }

    .col-11\@sm {
        --span: 11;
    }

    .col-12\@sm {
        --span: 12;
    }

    .col\@sm {
        width: auto;
        flex: 1 1 0;
    }

    .col-content\@sm {
        width: auto;
        flex: 0 1 auto;
    }

    .offset-1\@sm, .offset-2\@sm, .offset-3\@sm, .offset-4\@sm, .offset-5\@sm, .offset-6\@sm, .offset-7\@sm, .offset-8\@sm, .offset-9\@sm, .offset-10\@sm, .offset-11\@sm {
        margin-left: calc(((100% - (var(--grid-columns) - 1) * var(--sub-gap-x)) * var(--offset) / var(--grid-columns)) + var(--offset) * var(--sub-gap-x));
    }

    .offset-1\@sm {
        --offset: 1;
    }

    .offset-2\@sm {
        --offset: 2;
    }

    .offset-3\@sm {
        --offset: 3;
    }

    .offset-4\@sm {
        --offset: 4;
    }

    .offset-5\@sm {
        --offset: 5;
    }

    .offset-6\@sm {
        --offset: 6;
    }

    .offset-7\@sm {
        --offset: 7;
    }

    .offset-8\@sm {
        --offset: 8;
    }

    .offset-9\@sm {
        --offset: 9;
    }

    .offset-10\@sm {
        --offset: 10;
    }

    .offset-11\@sm {
        --offset: 11;
    }

    .offset-0\@sm {
        --offset: 0;
    }

    /* gap */
    .gap-4xs\@sm {
        --gap-x: var(--space-4xs);
        --gap-y: var(--space-4xs);
    }

    .gap-4xs\@sm > * {
        --sub-gap-x: var(--space-4xs);
        --sub-gap-y: var(--space-4xs);
    }

    .gap-3xs\@sm {
        --gap-x: var(--space-3xs);
        --gap-y: var(--space-3xs);
    }

    .gap-3xs\@sm > * {
        --sub-gap-x: var(--space-3xs);
        --sub-gap-y: var(--space-3xs);
    }

    .gap-2xs\@sm {
        --gap-x: var(--space-2xs);
        --gap-y: var(--space-2xs);
    }

    .gap-2xs\@sm > * {
        --sub-gap-x: var(--space-2xs);
        --sub-gap-y: var(--space-2xs);
    }

    .gap-xs\@sm {
        --gap-x: var(--space-xs);
        --gap-y: var(--space-xs);
    }

    .gap-xs\@sm > * {
        --sub-gap-x: var(--space-xs);
        --sub-gap-y: var(--space-xs);
    }

    .gap-sm\@sm {
        --gap-x: var(--space-sm);
        --gap-y: var(--space-sm);
    }

    .gap-sm\@sm > * {
        --sub-gap-x: var(--space-sm);
        --sub-gap-y: var(--space-sm);
    }

    .gap-md\@sm {
        --gap-x: var(--space-md);
        --gap-y: var(--space-md);
    }

    .gap-md\@sm > * {
        --sub-gap-x: var(--space-md);
        --sub-gap-y: var(--space-md);
    }

    .gap-lg\@sm {
        --gap-x: var(--space-lg);
        --gap-y: var(--space-lg);
    }

    .gap-lg\@sm > * {
        --sub-gap-x: var(--space-lg);
        --sub-gap-y: var(--space-lg);
    }

    .gap-xl\@sm {
        --gap-x: var(--space-xl);
        --gap-y: var(--space-xl);
    }

    .gap-xl\@sm > * {
        --sub-gap-x: var(--space-xl);
        --sub-gap-y: var(--space-xl);
    }

    .gap-2xl\@sm {
        --gap-x: var(--space-2xl);
        --gap-y: var(--space-2xl);
    }

    .gap-2xl\@sm > * {
        --sub-gap-x: var(--space-2xl);
        --sub-gap-y: var(--space-2xl);
    }

    .gap-3xl\@sm {
        --gap-x: var(--space-3xl);
        --gap-y: var(--space-3xl);
    }

    .gap-3xl\@sm > * {
        --sub-gap-x: var(--space-3xl);
        --sub-gap-y: var(--space-3xl);
    }

    .gap-4xl\@sm {
        --gap-x: var(--space-4xl);
        --gap-y: var(--space-4xl);
    }

    .gap-4xl\@sm > * {
        --sub-gap-x: var(--space-4xl);
        --sub-gap-y: var(--space-4xl);
    }

    .gap-0\@sm {
        --gap-x: 0px;
        --gap-y: 0px;
    }

    .gap-0\@sm > * {
        --sub-gap-x: 0px;
        --sub-gap-y: 0px;
    }

    .gap-x-4xs\@sm {
        --gap-x: var(--space-4xs);
    }

    .gap-x-4xs\@sm > * {
        --sub-gap-x: var(--space-4xs);
    }

    .gap-x-3xs\@sm {
        --gap-x: var(--space-3xs);
    }

    .gap-x-3xs\@sm > * {
        --sub-gap-x: var(--space-3xs);
    }

    .gap-x-2xs\@sm {
        --gap-x: var(--space-2xs);
    }

    .gap-x-2xs\@sm > * {
        --sub-gap-x: var(--space-2xs);
    }

    .gap-x-xs\@sm {
        --gap-x: var(--space-xs);
    }

    .gap-x-xs\@sm > * {
        --sub-gap-x: var(--space-xs);
    }

    .gap-x-sm\@sm {
        --gap-x: var(--space-sm);
    }

    .gap-x-sm\@sm > * {
        --sub-gap-x: var(--space-sm);
    }

    .gap-x-md\@sm {
        --gap-x: var(--space-md);
    }

    .gap-x-md\@sm > * {
        --sub-gap-x: var(--space-md);
    }

    .gap-x-lg\@sm {
        --gap-x: var(--space-lg);
    }

    .gap-x-lg\@sm > * {
        --sub-gap-x: var(--space-lg);
    }

    .gap-x-xl\@sm {
        --gap-x: var(--space-xl);
    }

    .gap-x-xl\@sm > * {
        --sub-gap-x: var(--space-xl);
    }

    .gap-x-2xl\@sm {
        --gap-x: var(--space-2xl);
    }

    .gap-x-2xl\@sm > * {
        --sub-gap-x: var(--space-2xl);
    }

    .gap-x-3xl\@sm {
        --gap-x: var(--space-3xl);
    }

    .gap-x-3xl\@sm > * {
        --sub-gap-x: var(--space-3xl);
    }

    .gap-x-4xl\@sm {
        --gap-x: var(--space-4xl);
    }

    .gap-x-4xl\@sm > * {
        --sub-gap-x: var(--space-4xl);
    }

    .gap-x-0\@sm {
        --gap-x: 0px;
    }

    .gap-x-0\@sm > * {
        --sub-gap-x: 0px;
    }

    .gap-y-4xs\@sm {
        --gap-y: var(--space-4xs);
    }

    .gap-y-4xs\@sm > * {
        --sub-gap-y: var(--space-4xs);
    }

    .gap-y-3xs\@sm {
        --gap-y: var(--space-3xs);
    }

    .gap-y-3xs\@sm > * {
        --sub-gap-y: var(--space-3xs);
    }

    .gap-y-2xs\@sm {
        --gap-y: var(--space-2xs);
    }

    .gap-y-2xs\@sm > * {
        --sub-gap-y: var(--space-2xs);
    }

    .gap-y-xs\@sm {
        --gap-y: var(--space-xs);
    }

    .gap-y-xs\@sm > * {
        --sub-gap-y: var(--space-xs);
    }

    .gap-y-sm\@sm {
        --gap-y: var(--space-sm);
    }

    .gap-y-sm\@sm > * {
        --sub-gap-y: var(--space-sm);
    }

    .gap-y-md\@sm {
        --gap-y: var(--space-md);
    }

    .gap-y-md\@sm > * {
        --sub-gap-y: var(--space-md);
    }

    .gap-y-lg\@sm {
        --gap-y: var(--space-lg);
    }

    .gap-y-lg\@sm > * {
        --sub-gap-y: var(--space-lg);
    }

    .gap-y-xl\@sm {
        --gap-y: var(--space-xl);
    }

    .gap-y-xl\@sm > * {
        --sub-gap-y: var(--space-xl);
    }

    .gap-y-2xl\@sm {
        --gap-y: var(--space-2xl);
    }

    .gap-y-2xl\@sm > * {
        --sub-gap-y: var(--space-2xl);
    }

    .gap-y-3xl\@sm {
        --gap-y: var(--space-3xl);
    }

    .gap-y-3xl\@sm > * {
        --sub-gap-y: var(--space-3xl);
    }

    .gap-y-4xl\@sm {
        --gap-y: var(--space-4xl);
    }

    .gap-y-4xl\@sm > * {
        --sub-gap-y: var(--space-4xl);
    }

    .gap-y-0\@sm {
        --gap-y: 0px;
    }

    .gap-y-0\@sm > * {
        --sub-gap-y: 0px;
    }

    /* flexbox */
    .flex\@sm {
        display: flex;
    }

    .inline-flex\@sm {
        display: inline-flex;
    }

    .flex-wrap\@sm {
        flex-wrap: wrap;
    }

    .flex-nowrap\@sm {
        flex-wrap: nowrap;
    }

    .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-content */
    .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;
    }

    /* align-items */
    .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 */
    .order-1\@sm {
        order: 1;
    }

    .order-2\@sm {
        order: 2;
    }

    .order-3\@sm {
        order: 3;
    }

    /* display */
    .block\@sm {
        display: block;
    }

    .inline-block\@sm {
        display: inline-block;
    }

    .inline\@sm {
        display: inline;
    }

    .contents\@sm {
        display: contents;
    }

    .hide\@sm {
        display: none !important;
    }

    /* spacing */
    .space-4xs\@sm {
        --space-unit: 0.25rem;
    }

    .space-3xs\@sm {
        --space-unit: 0.4rem;
    }

    .space-2xs\@sm {
        --space-unit: 0.55rem;
    }

    .space-xs\@sm {
        --space-unit: 0.7rem;
    }

    .space-sm\@sm {
        --space-unit: 0.85rem;
    }

    .space-base\@sm {
        --space-unit: 1rem;
    }

    .space-md\@sm {
        --space-unit: 1.15rem;
    }

    .space-lg\@sm {
        --space-unit: 1.3rem;
    }

    .space-xl\@sm {
        --space-unit: 1.45rem;
    }

    /* margin */
    .margin-4xs\@sm {
        margin: var(--space-4xs);
    }

    .margin-3xs\@sm {
        margin: var(--space-3xs);
    }

    .margin-2xs\@sm {
        margin: var(--space-2xs);
    }

    .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-2xl\@sm {
        margin: var(--space-2xl);
    }

    .margin-3xl\@sm {
        margin: var(--space-3xl);
    }

    .margin-4xl\@sm {
        margin: var(--space-4xl);
    }

    .margin-auto\@sm {
        margin: auto;
    }

    .margin-0\@sm {
        margin: 0;
    }

    .margin-top-4xs\@sm {
        margin-top: var(--space-4xs);
    }

    .margin-top-3xs\@sm {
        margin-top: var(--space-3xs);
    }

    .margin-top-2xs\@sm {
        margin-top: var(--space-2xs);
    }

    .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-2xl\@sm {
        margin-top: var(--space-2xl);
    }

    .margin-top-3xl\@sm {
        margin-top: var(--space-3xl);
    }

    .margin-top-4xl\@sm {
        margin-top: var(--space-4xl);
    }

    .margin-top-auto\@sm {
        margin-top: auto;
    }

    .margin-top-0\@sm {
        margin-top: 0;
    }

    .margin-bottom-4xs\@sm {
        margin-bottom: var(--space-4xs);
    }

    .margin-bottom-3xs\@sm {
        margin-bottom: var(--space-3xs);
    }

    .margin-bottom-2xs\@sm {
        margin-bottom: var(--space-2xs);
    }

    .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-2xl\@sm {
        margin-bottom: var(--space-2xl);
    }

    .margin-bottom-3xl\@sm {
        margin-bottom: var(--space-3xl);
    }

    .margin-bottom-4xl\@sm {
        margin-bottom: var(--space-4xl);
    }

    .margin-bottom-auto\@sm {
        margin-bottom: auto;
    }

    .margin-bottom-0\@sm {
        margin-bottom: 0;
    }

    .margin-right-4xs\@sm {
        margin-right: var(--space-4xs);
    }

    .margin-right-3xs\@sm {
        margin-right: var(--space-3xs);
    }

    .margin-right-2xs\@sm {
        margin-right: var(--space-2xs);
    }

    .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-2xl\@sm {
        margin-right: var(--space-2xl);
    }

    .margin-right-3xl\@sm {
        margin-right: var(--space-3xl);
    }

    .margin-right-4xl\@sm {
        margin-right: var(--space-4xl);
    }

    .margin-right-auto\@sm {
        margin-right: auto;
    }

    .margin-right-0\@sm {
        margin-right: 0;
    }

    .margin-left-4xs\@sm {
        margin-left: var(--space-4xs);
    }

    .margin-left-3xs\@sm {
        margin-left: var(--space-3xs);
    }

    .margin-left-2xs\@sm {
        margin-left: var(--space-2xs);
    }

    .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-2xl\@sm {
        margin-left: var(--space-2xl);
    }

    .margin-left-3xl\@sm {
        margin-left: var(--space-3xl);
    }

    .margin-left-4xl\@sm {
        margin-left: var(--space-4xl);
    }

    .margin-left-auto\@sm {
        margin-left: auto;
    }

    .margin-left-0\@sm {
        margin-left: 0;
    }

    .margin-x-4xs\@sm {
        margin-left: var(--space-4xs);
        margin-right: var(--space-4xs);
    }

    .margin-x-3xs\@sm {
        margin-left: var(--space-3xs);
        margin-right: var(--space-3xs);
    }

    .margin-x-2xs\@sm {
        margin-left: var(--space-2xs);
        margin-right: var(--space-2xs);
    }

    .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-2xl\@sm {
        margin-left: var(--space-2xl);
        margin-right: var(--space-2xl);
    }

    .margin-x-3xl\@sm {
        margin-left: var(--space-3xl);
        margin-right: var(--space-3xl);
    }

    .margin-x-4xl\@sm {
        margin-left: var(--space-4xl);
        margin-right: var(--space-4xl);
    }

    .margin-x-auto\@sm {
        margin-left: auto;
        margin-right: auto;
    }

    .margin-x-0\@sm {
        margin-left: 0;
        margin-right: 0;
    }

    .margin-y-4xs\@sm {
        margin-top: var(--space-4xs);
        margin-bottom: var(--space-4xs);
    }

    .margin-y-3xs\@sm {
        margin-top: var(--space-3xs);
        margin-bottom: var(--space-3xs);
    }

    .margin-y-2xs\@sm {
        margin-top: var(--space-2xs);
        margin-bottom: var(--space-2xs);
    }

    .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-2xl\@sm {
        margin-top: var(--space-2xl);
        margin-bottom: var(--space-2xl);
    }

    .margin-y-3xl\@sm {
        margin-top: var(--space-3xl);
        margin-bottom: var(--space-3xl);
    }

    .margin-y-4xl\@sm {
        margin-top: var(--space-4xl);
        margin-bottom: var(--space-4xl);
    }

    .margin-y-auto\@sm {
        margin-top: auto;
        margin-bottom: auto;
    }

    .margin-y-0\@sm {
        margin-top: 0;
        margin-bottom: 0;
    }

    /* padding */
    .padding-4xs\@sm {
        padding: var(--space-4xs);
    }

    .padding-3xs\@sm {
        padding: var(--space-3xs);
    }

    .padding-2xs\@sm {
        padding: var(--space-2xs);
    }

    .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-2xl\@sm {
        padding: var(--space-2xl);
    }

    .padding-3xl\@sm {
        padding: var(--space-3xl);
    }

    .padding-4xl\@sm {
        padding: var(--space-4xl);
    }

    .padding-0\@sm {
        padding: 0;
    }

    .padding-component\@sm {
        padding: var(--component-padding);
    }

    .padding-top-4xs\@sm {
        padding-top: var(--space-4xs);
    }

    .padding-top-3xs\@sm {
        padding-top: var(--space-3xs);
    }

    .padding-top-2xs\@sm {
        padding-top: var(--space-2xs);
    }

    .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-2xl\@sm {
        padding-top: var(--space-2xl);
    }

    .padding-top-3xl\@sm {
        padding-top: var(--space-3xl);
    }

    .padding-top-4xl\@sm {
        padding-top: var(--space-4xl);
    }

    .padding-top-0\@sm {
        padding-top: 0;
    }

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

    .padding-bottom-4xs\@sm {
        padding-bottom: var(--space-4xs);
    }

    .padding-bottom-3xs\@sm {
        padding-bottom: var(--space-3xs);
    }

    .padding-bottom-2xs\@sm {
        padding-bottom: var(--space-2xs);
    }

    .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-2xl\@sm {
        padding-bottom: var(--space-2xl);
    }

    .padding-bottom-3xl\@sm {
        padding-bottom: var(--space-3xl);
    }

    .padding-bottom-4xl\@sm {
        padding-bottom: var(--space-4xl);
    }

    .padding-bottom-0\@sm {
        padding-bottom: 0;
    }

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

    .padding-right-4xs\@sm {
        padding-right: var(--space-4xs);
    }

    .padding-right-3xs\@sm {
        padding-right: var(--space-3xs);
    }

    .padding-right-2xs\@sm {
        padding-right: var(--space-2xs);
    }

    .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-2xl\@sm {
        padding-right: var(--space-2xl);
    }

    .padding-right-3xl\@sm {
        padding-right: var(--space-3xl);
    }

    .padding-right-4xl\@sm {
        padding-right: var(--space-4xl);
    }

    .padding-right-0\@sm {
        padding-right: 0;
    }

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

    .padding-left-4xs\@sm {
        padding-left: var(--space-4xs);
    }

    .padding-left-3xs\@sm {
        padding-left: var(--space-3xs);
    }

    .padding-left-2xs\@sm {
        padding-left: var(--space-2xs);
    }

    .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-2xl\@sm {
        padding-left: var(--space-2xl);
    }

    .padding-left-3xl\@sm {
        padding-left: var(--space-3xl);
    }

    .padding-left-4xl\@sm {
        padding-left: var(--space-4xl);
    }

    .padding-left-0\@sm {
        padding-left: 0;
    }

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

    .padding-x-4xs\@sm {
        padding-left: var(--space-4xs);
        padding-right: var(--space-4xs);
    }

    .padding-x-3xs\@sm {
        padding-left: var(--space-3xs);
        padding-right: var(--space-3xs);
    }

    .padding-x-2xs\@sm {
        padding-left: var(--space-2xs);
        padding-right: var(--space-2xs);
    }

    .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-2xl\@sm {
        padding-left: var(--space-2xl);
        padding-right: var(--space-2xl);
    }

    .padding-x-3xl\@sm {
        padding-left: var(--space-3xl);
        padding-right: var(--space-3xl);
    }

    .padding-x-4xl\@sm {
        padding-left: var(--space-4xl);
        padding-right: var(--space-4xl);
    }

    .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-4xs\@sm {
        padding-top: var(--space-4xs);
        padding-bottom: var(--space-4xs);
    }

    .padding-y-3xs\@sm {
        padding-top: var(--space-3xs);
        padding-bottom: var(--space-3xs);
    }

    .padding-y-2xs\@sm {
        padding-top: var(--space-2xs);
        padding-bottom: var(--space-2xs);
    }

    .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-2xl\@sm {
        padding-top: var(--space-2xl);
        padding-bottom: var(--space-2xl);
    }

    .padding-y-3xl\@sm {
        padding-top: var(--space-3xl);
        padding-bottom: var(--space-3xl);
    }

    .padding-y-4xl\@sm {
        padding-top: var(--space-4xl);
        padding-bottom: var(--space-4xl);
    }

    .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-align */
    .text-center\@sm {
        text-align: center;
    }

    .text-left\@sm {
        text-align: left;
    }

    .text-right\@sm {
        text-align: right;
    }

    .text-justify\@sm {
        text-align: justify;
    }

    /* font-size */
    .text-3xs\@sm {
        font-size: var(--text-3xs);
    }

    .text-2xs\@sm {
        font-size: var(--text-2xs);
    }

    .text-xs\@sm {
        font-size: var(--text-xs);
    }

    .text-sm\@sm {
        font-size: var(--text-sm);
    }

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

    .text-1rem\@sm {
        font-size: 1rem;
    }

    .text-md\@sm {
        font-size: var(--text-md);
    }

    .text-lg\@sm {
        font-size: var(--text-lg);
    }

    .text-xl\@sm {
        font-size: var(--text-xl);
    }

    .text-2xl\@sm {
        font-size: var(--text-2xl);
    }

    .text-3xl\@sm {
        font-size: var(--text-3xl);
    }

    .text-4xl\@sm {
        font-size: var(--text-4xl);
    }

    .text-5xl\@sm {
        font-size: var(--text-5xl);
    }

    .text-group-2xs\@sm {
        --text-unit: 0.82rem;
    }

    .text-group-xs\@sm {
        --text-unit: 0.8888888889rem;
    }

    .text-group-sm\@sm {
        --text-unit: 0.94rem;
    }

    .text-group-base\@sm {
        --text-unit: 1rem;
    }

    .text-group-md\@sm {
        --text-unit: 1.06rem;
    }

    .text-group-lg\@sm {
        --text-unit: 1.12rem;
    }

    .text-group-xl\@sm {
        --text-unit: 1.18rem;
    }

    /* column-count */
    .column-count-1\@sm {
        -webkit-column-count: 1;
        -moz-column-count: 1;
        column-count: 1;
    }

    .column-count-2\@sm {
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2;
    }

    .column-count-3\@sm {
        -webkit-column-count: 3;
        -moz-column-count: 3;
        column-count: 3;
    }

    .column-count-4\@sm {
        -webkit-column-count: 4;
        -moz-column-count: 4;
        column-count: 4;
    }

    /* size */
    .size-8xs\@sm, .width-8xs\@sm {
        --width: var(--size-8xs);
    }

    .size-8xs\@sm, .height-8xs\@sm {
        --height: var(--size-8xs);
    }

    .size-7xs\@sm, .width-7xs\@sm {
        --width: var(--size-7xs);
    }

    .size-7xs\@sm, .height-7xs\@sm {
        --height: var(--size-7xs);
    }

    .size-6xs\@sm, .width-6xs\@sm {
        --width: var(--size-6xs);
    }

    .size-6xs\@sm, .height-6xs\@sm {
        --height: var(--size-6xs);
    }

    .size-5xs\@sm, .width-5xs\@sm {
        --width: var(--size-5xs);
    }

    .size-5xs\@sm, .height-5xs\@sm {
        --height: var(--size-5xs);
    }

    .size-4xs\@sm, .width-4xs\@sm {
        --width: var(--size-4xs);
    }

    .size-4xs\@sm, .height-4xs\@sm {
        --height: var(--size-4xs);
    }

    .size-3xs\@sm, .width-3xs\@sm {
        --width: var(--size-3xs);
    }

    .size-3xs\@sm, .height-3xs\@sm {
        --height: var(--size-3xs);
    }

    .size-2xs\@sm, .width-2xs\@sm {
        --width: var(--size-2xs);
    }

    .size-2xs\@sm, .height-2xs\@sm {
        --height: var(--size-2xs);
    }

    .size-xs\@sm, .width-xs\@sm {
        --width: var(--size-xs);
    }

    .size-xs\@sm, .height-xs\@sm {
        --height: var(--size-xs);
    }

    .size-sm\@sm, .width-sm\@sm {
        --width: var(--size-sm);
    }

    .size-sm\@sm, .height-sm\@sm {
        --height: var(--size-sm);
    }

    .size-md\@sm, .width-md\@sm {
        --width: var(--size-md);
    }

    .size-md\@sm, .height-md\@sm {
        --height: var(--size-md);
    }

    .size-lg\@sm, .width-lg\@sm {
        --width: var(--size-lg);
    }

    .size-lg\@sm, .height-lg\@sm {
        --height: var(--size-lg);
    }

    .size-xl\@sm, .width-xl\@sm {
        --width: var(--size-xl);
    }

    .size-xl\@sm, .height-xl\@sm {
        --height: var(--size-xl);
    }

    .size-2xl\@sm, .width-2xl\@sm {
        --width: var(--size-2xl);
    }

    .size-2xl\@sm, .height-2xl\@sm {
        --height: var(--size-2xl);
    }

    .size-3xl\@sm, .width-3xl\@sm {
        --width: var(--size-3xl);
    }

    .size-3xl\@sm, .height-3xl\@sm {
        --height: var(--size-3xl);
    }

    .size-4xl\@sm, .width-4xl\@sm {
        --width: var(--size-4xl);
    }

    .size-4xl\@sm, .height-4xl\@sm {
        --height: var(--size-4xl);
    }

    .size-5xl\@sm, .width-5xl\@sm {
        --width: var(--size-5xl);
    }

    .size-5xl\@sm, .height-5xl\@sm {
        --height: var(--size-5xl);
    }

    .size-0\@sm, .width-0\@sm {
        --width: 0;
    }

    .size-0\@sm, .height-0\@sm {
        --height: 0;
    }

    .size-inherit\@sm, .width-inherit\@sm {
        width: inherit;
    }

    .size-inherit\@sm, .height-inherit\@sm {
        height: inherit;
    }

    /* width */
    .width-10\%\@sm {
        width: 10%;
    }

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

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

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

    .width-33\%\@sm {
        width: 33.3333333333%;
    }

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

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

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

    .width-66\%\@sm {
        width: 66.6666666667%;
    }

    .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;
    }

    /* height */
    .height-10\%\@sm {
        height: 10%;
    }

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

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

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

    .height-33\%\@sm {
        height: 33.3333333333%;
    }

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

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

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

    .height-66\%\@sm {
        height: 66.6666666667%;
    }

    .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;
    }

    /* max-width */
    .max-width-5xs\@sm {
        max-width: var(--max-width-5xs);
    }

    .max-width-4xs\@sm {
        max-width: var(--max-width-4xs);
    }

    .max-width-3xs\@sm {
        max-width: var(--max-width-3xs);
    }

    .max-width-2xs\@sm {
        max-width: var(--max-width-2xs);
    }

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

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

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

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

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

    .max-width-2xl\@sm {
        max-width: var(--max-width-2xl);
    }

    .max-width-3xl\@sm {
        max-width: var(--max-width-3xl);
    }

    .max-width-4xl\@sm {
        max-width: var(--max-width-4xl);
    }

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

    .max-width-none\@sm {
        max-width: none;
    }

    /* position */
    .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;
    }

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

    .top-0\@sm {
        top: 0;
    }

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

    .top-4xs\@sm {
        top: var(--space-4xs);
    }

    .top-3xs\@sm {
        top: var(--space-3xs);
    }

    .top-2xs\@sm {
        top: var(--space-2xs);
    }

    .top-xs\@sm {
        top: var(--space-xs);
    }

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

    .top-md\@sm {
        top: var(--space-md);
    }

    .top-lg\@sm {
        top: var(--space-lg);
    }

    .top-xl\@sm {
        top: var(--space-xl);
    }

    .top-2xl\@sm {
        top: var(--space-2xl);
    }

    .top-3xl\@sm {
        top: var(--space-3xl);
    }

    .top-4xl\@sm {
        top: var(--space-4xl);
    }

    .bottom-0\@sm {
        bottom: 0;
    }

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

    .bottom-4xs\@sm {
        bottom: var(--space-4xs);
    }

    .bottom-3xs\@sm {
        bottom: var(--space-3xs);
    }

    .bottom-2xs\@sm {
        bottom: var(--space-2xs);
    }

    .bottom-xs\@sm {
        bottom: var(--space-xs);
    }

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

    .bottom-md\@sm {
        bottom: var(--space-md);
    }

    .bottom-lg\@sm {
        bottom: var(--space-lg);
    }

    .bottom-xl\@sm {
        bottom: var(--space-xl);
    }

    .bottom-2xl\@sm {
        bottom: var(--space-2xl);
    }

    .bottom-3xl\@sm {
        bottom: var(--space-3xl);
    }

    .bottom-4xl\@sm {
        bottom: var(--space-4xl);
    }

    .right-0\@sm {
        right: 0;
    }

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

    .right-4xs\@sm {
        right: var(--space-4xs);
    }

    .right-3xs\@sm {
        right: var(--space-3xs);
    }

    .right-2xs\@sm {
        right: var(--space-2xs);
    }

    .right-xs\@sm {
        right: var(--space-xs);
    }

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

    .right-md\@sm {
        right: var(--space-md);
    }

    .right-lg\@sm {
        right: var(--space-lg);
    }

    .right-xl\@sm {
        right: var(--space-xl);
    }

    .right-2xl\@sm {
        right: var(--space-2xl);
    }

    .right-3xl\@sm {
        right: var(--space-3xl);
    }

    .right-4xl\@sm {
        right: var(--space-4xl);
    }

    .left-0\@sm {
        left: 0;
    }

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

    .left-4xs\@sm {
        left: var(--space-4xs);
    }

    .left-3xs\@sm {
        left: var(--space-3xs);
    }

    .left-2xs\@sm {
        left: var(--space-2xs);
    }

    .left-xs\@sm {
        left: var(--space-xs);
    }

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

    .left-md\@sm {
        left: var(--space-md);
    }

    .left-lg\@sm {
        left: var(--space-lg);
    }

    .left-xl\@sm {
        left: var(--space-xl);
    }

    .left-2xl\@sm {
        left: var(--space-2xl);
    }

    .left-3xl\@sm {
        left: var(--space-3xl);
    }

    .left-4xl\@sm {
        left: var(--space-4xl);
    }

    /* overflow */
    .overflow-hidden\@sm {
        overflow: hidden;
    }

    .overflow-auto\@sm {
        overflow: auto;
    }

    .momentum-scrolling\@sm {
        -webkit-overflow-scrolling: touch;
    }

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

    /* visibility */
    .visible\@sm {
        visibility: visible;
    }

    .invisible\@sm {
        visibility: hidden;
    }
}

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

@media (min-width: 64rem) {
    .grid-col-1\@md {
        --grid-columns: 1;
    }

    .grid-col-2\@md {
        --grid-columns: 2;
    }

    .grid-col-3\@md {
        --grid-columns: 3;
    }

    .grid-col-4\@md {
        --grid-columns: 4;
    }

    .grid-col-5\@md {
        --grid-columns: 5;
    }

    .grid-col-6\@md {
        --grid-columns: 6;
    }

    .grid-col-7\@md {
        --grid-columns: 7;
    }

    .grid-col-8\@md {
        --grid-columns: 8;
    }

    .grid-col-9\@md {
        --grid-columns: 9;
    }

    .grid-col-10\@md {
        --grid-columns: 10;
    }

    .grid-col-11\@md {
        --grid-columns: 11;
    }

    .grid-col-12\@md {
        --grid-columns: 12;
    }

    .col-1\@md, .col-2\@md, .col-3\@md, .col-4\@md, .col-5\@md, .col-6\@md, .col-7\@md, .col-8\@md, .col-9\@md, .col-10\@md, .col-11\@md, .col-12\@md {
        width: calc(((100% - (var(--grid-columns) - 1) * var(--sub-gap-x)) * var(--span) / var(--grid-columns)) + (var(--span) - 1) * var(--sub-gap-x));
        flex: initial;
    }

    .col-1\@md {
        --span: 1;
    }

    .col-2\@md {
        --span: 2;
    }

    .col-3\@md {
        --span: 3;
    }

    .col-4\@md {
        --span: 4;
    }

    .col-5\@md {
        --span: 5;
    }

    .col-6\@md {
        --span: 6;
    }

    .col-7\@md {
        --span: 7;
    }

    .col-8\@md {
        --span: 8;
    }

    .col-9\@md {
        --span: 9;
    }

    .col-10\@md {
        --span: 10;
    }

    .col-11\@md {
        --span: 11;
    }

    .col-12\@md {
        --span: 12;
    }

    .col\@md {
        width: auto;
        flex: 1 1 0;
    }

    .col-content\@md {
        width: auto;
        flex: 0 1 auto;
    }

    .offset-1\@md, .offset-2\@md, .offset-3\@md, .offset-4\@md, .offset-5\@md, .offset-6\@md, .offset-7\@md, .offset-8\@md, .offset-9\@md, .offset-10\@md, .offset-11\@md {
        margin-left: calc(((100% - (var(--grid-columns) - 1) * var(--sub-gap-x)) * var(--offset) / var(--grid-columns)) + var(--offset) * var(--sub-gap-x));
    }

    .offset-1\@md {
        --offset: 1;
    }

    .offset-2\@md {
        --offset: 2;
    }

    .offset-3\@md {
        --offset: 3;
    }

    .offset-4\@md {
        --offset: 4;
    }

    .offset-5\@md {
        --offset: 5;
    }

    .offset-6\@md {
        --offset: 6;
    }

    .offset-7\@md {
        --offset: 7;
    }

    .offset-8\@md {
        --offset: 8;
    }

    .offset-9\@md {
        --offset: 9;
    }

    .offset-10\@md {
        --offset: 10;
    }

    .offset-11\@md {
        --offset: 11;
    }

    .offset-0\@md {
        --offset: 0;
    }

    /* gap */
    .gap-4xs\@md {
        --gap-x: var(--space-4xs);
        --gap-y: var(--space-4xs);
    }

    .gap-4xs\@md > * {
        --sub-gap-x: var(--space-4xs);
        --sub-gap-y: var(--space-4xs);
    }

    .gap-3xs\@md {
        --gap-x: var(--space-3xs);
        --gap-y: var(--space-3xs);
    }

    .gap-3xs\@md > * {
        --sub-gap-x: var(--space-3xs);
        --sub-gap-y: var(--space-3xs);
    }

    .gap-2xs\@md {
        --gap-x: var(--space-2xs);
        --gap-y: var(--space-2xs);
    }

    .gap-2xs\@md > * {
        --sub-gap-x: var(--space-2xs);
        --sub-gap-y: var(--space-2xs);
    }

    .gap-xs\@md {
        --gap-x: var(--space-xs);
        --gap-y: var(--space-xs);
    }

    .gap-xs\@md > * {
        --sub-gap-x: var(--space-xs);
        --sub-gap-y: var(--space-xs);
    }

    .gap-sm\@md {
        --gap-x: var(--space-sm);
        --gap-y: var(--space-sm);
    }

    .gap-sm\@md > * {
        --sub-gap-x: var(--space-sm);
        --sub-gap-y: var(--space-sm);
    }

    .gap-md\@md {
        --gap-x: var(--space-md);
        --gap-y: var(--space-md);
    }

    .gap-md\@md > * {
        --sub-gap-x: var(--space-md);
        --sub-gap-y: var(--space-md);
    }

    .gap-lg\@md {
        --gap-x: var(--space-lg);
        --gap-y: var(--space-lg);
    }

    .gap-lg\@md > * {
        --sub-gap-x: var(--space-lg);
        --sub-gap-y: var(--space-lg);
    }

    .gap-xl\@md {
        --gap-x: var(--space-xl);
        --gap-y: var(--space-xl);
    }

    .gap-xl\@md > * {
        --sub-gap-x: var(--space-xl);
        --sub-gap-y: var(--space-xl);
    }

    .gap-2xl\@md {
        --gap-x: var(--space-2xl);
        --gap-y: var(--space-2xl);
    }

    .gap-2xl\@md > * {
        --sub-gap-x: var(--space-2xl);
        --sub-gap-y: var(--space-2xl);
    }

    .gap-3xl\@md {
        --gap-x: var(--space-3xl);
        --gap-y: var(--space-3xl);
    }

    .gap-3xl\@md > * {
        --sub-gap-x: var(--space-3xl);
        --sub-gap-y: var(--space-3xl);
    }

    .gap-4xl\@md {
        --gap-x: var(--space-4xl);
        --gap-y: var(--space-4xl);
    }

    .gap-4xl\@md > * {
        --sub-gap-x: var(--space-4xl);
        --sub-gap-y: var(--space-4xl);
    }

    .gap-0\@md {
        --gap-x: 0px;
        --gap-y: 0px;
    }

    .gap-0\@md > * {
        --sub-gap-x: 0px;
        --sub-gap-y: 0px;
    }

    .gap-x-4xs\@md {
        --gap-x: var(--space-4xs);
    }

    .gap-x-4xs\@md > * {
        --sub-gap-x: var(--space-4xs);
    }

    .gap-x-3xs\@md {
        --gap-x: var(--space-3xs);
    }

    .gap-x-3xs\@md > * {
        --sub-gap-x: var(--space-3xs);
    }

    .gap-x-2xs\@md {
        --gap-x: var(--space-2xs);
    }

    .gap-x-2xs\@md > * {
        --sub-gap-x: var(--space-2xs);
    }

    .gap-x-xs\@md {
        --gap-x: var(--space-xs);
    }

    .gap-x-xs\@md > * {
        --sub-gap-x: var(--space-xs);
    }

    .gap-x-sm\@md {
        --gap-x: var(--space-sm);
    }

    .gap-x-sm\@md > * {
        --sub-gap-x: var(--space-sm);
    }

    .gap-x-md\@md {
        --gap-x: var(--space-md);
    }

    .gap-x-md\@md > * {
        --sub-gap-x: var(--space-md);
    }

    .gap-x-lg\@md {
        --gap-x: var(--space-lg);
    }

    .gap-x-lg\@md > * {
        --sub-gap-x: var(--space-lg);
    }

    .gap-x-xl\@md {
        --gap-x: var(--space-xl);
    }

    .gap-x-xl\@md > * {
        --sub-gap-x: var(--space-xl);
    }

    .gap-x-2xl\@md {
        --gap-x: var(--space-2xl);
    }

    .gap-x-2xl\@md > * {
        --sub-gap-x: var(--space-2xl);
    }

    .gap-x-3xl\@md {
        --gap-x: var(--space-3xl);
    }

    .gap-x-3xl\@md > * {
        --sub-gap-x: var(--space-3xl);
    }

    .gap-x-4xl\@md {
        --gap-x: var(--space-4xl);
    }

    .gap-x-4xl\@md > * {
        --sub-gap-x: var(--space-4xl);
    }

    .gap-x-0\@md {
        --gap-x: 0px;
    }

    .gap-x-0\@md > * {
        --sub-gap-x: 0px;
    }

    .gap-y-4xs\@md {
        --gap-y: var(--space-4xs);
    }

    .gap-y-4xs\@md > * {
        --sub-gap-y: var(--space-4xs);
    }

    .gap-y-3xs\@md {
        --gap-y: var(--space-3xs);
    }

    .gap-y-3xs\@md > * {
        --sub-gap-y: var(--space-3xs);
    }

    .gap-y-2xs\@md {
        --gap-y: var(--space-2xs);
    }

    .gap-y-2xs\@md > * {
        --sub-gap-y: var(--space-2xs);
    }

    .gap-y-xs\@md {
        --gap-y: var(--space-xs);
    }

    .gap-y-xs\@md > * {
        --sub-gap-y: var(--space-xs);
    }

    .gap-y-sm\@md {
        --gap-y: var(--space-sm);
    }

    .gap-y-sm\@md > * {
        --sub-gap-y: var(--space-sm);
    }

    .gap-y-md\@md {
        --gap-y: var(--space-md);
    }

    .gap-y-md\@md > * {
        --sub-gap-y: var(--space-md);
    }

    .gap-y-lg\@md {
        --gap-y: var(--space-lg);
    }

    .gap-y-lg\@md > * {
        --sub-gap-y: var(--space-lg);
    }

    .gap-y-xl\@md {
        --gap-y: var(--space-xl);
    }

    .gap-y-xl\@md > * {
        --sub-gap-y: var(--space-xl);
    }

    .gap-y-2xl\@md {
        --gap-y: var(--space-2xl);
    }

    .gap-y-2xl\@md > * {
        --sub-gap-y: var(--space-2xl);
    }

    .gap-y-3xl\@md {
        --gap-y: var(--space-3xl);
    }

    .gap-y-3xl\@md > * {
        --sub-gap-y: var(--space-3xl);
    }

    .gap-y-4xl\@md {
        --gap-y: var(--space-4xl);
    }

    .gap-y-4xl\@md > * {
        --sub-gap-y: var(--space-4xl);
    }

    .gap-y-0\@md {
        --gap-y: 0px;
    }

    .gap-y-0\@md > * {
        --sub-gap-y: 0px;
    }

    /* flexbox */
    .flex\@md {
        display: flex;
    }

    .inline-flex\@md {
        display: inline-flex;
    }

    .flex-wrap\@md {
        flex-wrap: wrap;
    }

    .flex-nowrap\@md {
        flex-wrap: nowrap;
    }

    .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-content */
    .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;
    }

    /* align-items */
    .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 */
    .order-1\@md {
        order: 1;
    }

    .order-2\@md {
        order: 2;
    }

    .order-3\@md {
        order: 3;
    }

    /* display */
    .block\@md {
        display: block;
    }

    .inline-block\@md {
        display: inline-block;
    }

    .inline\@md {
        display: inline;
    }

    .contents\@md {
        display: contents;
    }

    .hide\@md {
        display: none !important;
    }

    /* spacing */
    .space-4xs\@md {
        --space-unit: 0.25rem;
    }

    .space-3xs\@md {
        --space-unit: 0.4rem;
    }

    .space-2xs\@md {
        --space-unit: 0.55rem;
    }

    .space-xs\@md {
        --space-unit: 0.7rem;
    }

    .space-sm\@md {
        --space-unit: 0.85rem;
    }

    .space-base\@md {
        --space-unit: 1rem;
    }

    .space-md\@md {
        --space-unit: 1.15rem;
    }

    .space-lg\@md {
        --space-unit: 1.3rem;
    }

    .space-xl\@md {
        --space-unit: 1.45rem;
    }

    /* margin */
    .margin-4xs\@md {
        margin: var(--space-4xs);
    }

    .margin-3xs\@md {
        margin: var(--space-3xs);
    }

    .margin-2xs\@md {
        margin: var(--space-2xs);
    }

    .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-2xl\@md {
        margin: var(--space-2xl);
    }

    .margin-3xl\@md {
        margin: var(--space-3xl);
    }

    .margin-4xl\@md {
        margin: var(--space-4xl);
    }

    .margin-auto\@md {
        margin: auto;
    }

    .margin-0\@md {
        margin: 0;
    }

    .margin-top-4xs\@md {
        margin-top: var(--space-4xs);
    }

    .margin-top-3xs\@md {
        margin-top: var(--space-3xs);
    }

    .margin-top-2xs\@md {
        margin-top: var(--space-2xs);
    }

    .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-2xl\@md {
        margin-top: var(--space-2xl);
    }

    .margin-top-3xl\@md {
        margin-top: var(--space-3xl);
    }

    .margin-top-4xl\@md {
        margin-top: var(--space-4xl);
    }

    .margin-top-auto\@md {
        margin-top: auto;
    }

    .margin-top-0\@md {
        margin-top: 0;
    }

    .margin-bottom-4xs\@md {
        margin-bottom: var(--space-4xs);
    }

    .margin-bottom-3xs\@md {
        margin-bottom: var(--space-3xs);
    }

    .margin-bottom-2xs\@md {
        margin-bottom: var(--space-2xs);
    }

    .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-2xl\@md {
        margin-bottom: var(--space-2xl);
    }

    .margin-bottom-3xl\@md {
        margin-bottom: var(--space-3xl);
    }

    .margin-bottom-4xl\@md {
        margin-bottom: var(--space-4xl);
    }

    .margin-bottom-auto\@md {
        margin-bottom: auto;
    }

    .margin-bottom-0\@md {
        margin-bottom: 0;
    }

    .margin-right-4xs\@md {
        margin-right: var(--space-4xs);
    }

    .margin-right-3xs\@md {
        margin-right: var(--space-3xs);
    }

    .margin-right-2xs\@md {
        margin-right: var(--space-2xs);
    }

    .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-2xl\@md {
        margin-right: var(--space-2xl);
    }

    .margin-right-3xl\@md {
        margin-right: var(--space-3xl);
    }

    .margin-right-4xl\@md {
        margin-right: var(--space-4xl);
    }

    .margin-right-auto\@md {
        margin-right: auto;
    }

    .margin-right-0\@md {
        margin-right: 0;
    }

    .margin-left-4xs\@md {
        margin-left: var(--space-4xs);
    }

    .margin-left-3xs\@md {
        margin-left: var(--space-3xs);
    }

    .margin-left-2xs\@md {
        margin-left: var(--space-2xs);
    }

    .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-2xl\@md {
        margin-left: var(--space-2xl);
    }

    .margin-left-3xl\@md {
        margin-left: var(--space-3xl);
    }

    .margin-left-4xl\@md {
        margin-left: var(--space-4xl);
    }

    .margin-left-auto\@md {
        margin-left: auto;
    }

    .margin-left-0\@md {
        margin-left: 0;
    }

    .margin-x-4xs\@md {
        margin-left: var(--space-4xs);
        margin-right: var(--space-4xs);
    }

    .margin-x-3xs\@md {
        margin-left: var(--space-3xs);
        margin-right: var(--space-3xs);
    }

    .margin-x-2xs\@md {
        margin-left: var(--space-2xs);
        margin-right: var(--space-2xs);
    }

    .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-2xl\@md {
        margin-left: var(--space-2xl);
        margin-right: var(--space-2xl);
    }

    .margin-x-3xl\@md {
        margin-left: var(--space-3xl);
        margin-right: var(--space-3xl);
    }

    .margin-x-4xl\@md {
        margin-left: var(--space-4xl);
        margin-right: var(--space-4xl);
    }

    .margin-x-auto\@md {
        margin-left: auto;
        margin-right: auto;
    }

    .margin-x-0\@md {
        margin-left: 0;
        margin-right: 0;
    }

    .margin-y-4xs\@md {
        margin-top: var(--space-4xs);
        margin-bottom: var(--space-4xs);
    }

    .margin-y-3xs\@md {
        margin-top: var(--space-3xs);
        margin-bottom: var(--space-3xs);
    }

    .margin-y-2xs\@md {
        margin-top: var(--space-2xs);
        margin-bottom: var(--space-2xs);
    }

    .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-2xl\@md {
        margin-top: var(--space-2xl);
        margin-bottom: var(--space-2xl);
    }

    .margin-y-3xl\@md {
        margin-top: var(--space-3xl);
        margin-bottom: var(--space-3xl);
    }

    .margin-y-4xl\@md {
        margin-top: var(--space-4xl);
        margin-bottom: var(--space-4xl);
    }

    .margin-y-auto\@md {
        margin-top: auto;
        margin-bottom: auto;
    }

    .margin-y-0\@md {
        margin-top: 0;
        margin-bottom: 0;
    }

    /* padding */
    .padding-4xs\@md {
        padding: var(--space-4xs);
    }

    .padding-3xs\@md {
        padding: var(--space-3xs);
    }

    .padding-2xs\@md {
        padding: var(--space-2xs);
    }

    .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-2xl\@md {
        padding: var(--space-2xl);
    }

    .padding-3xl\@md {
        padding: var(--space-3xl);
    }

    .padding-4xl\@md {
        padding: var(--space-4xl);
    }

    .padding-0\@md {
        padding: 0;
    }

    .padding-component\@md {
        padding: var(--component-padding);
    }

    .padding-top-4xs\@md {
        padding-top: var(--space-4xs);
    }

    .padding-top-3xs\@md {
        padding-top: var(--space-3xs);
    }

    .padding-top-2xs\@md {
        padding-top: var(--space-2xs);
    }

    .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-2xl\@md {
        padding-top: var(--space-2xl);
    }

    .padding-top-3xl\@md {
        padding-top: var(--space-3xl);
    }

    .padding-top-4xl\@md {
        padding-top: var(--space-4xl);
    }

    .padding-top-0\@md {
        padding-top: 0;
    }

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

    .padding-bottom-4xs\@md {
        padding-bottom: var(--space-4xs);
    }

    .padding-bottom-3xs\@md {
        padding-bottom: var(--space-3xs);
    }

    .padding-bottom-2xs\@md {
        padding-bottom: var(--space-2xs);
    }

    .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-2xl\@md {
        padding-bottom: var(--space-2xl);
    }

    .padding-bottom-3xl\@md {
        padding-bottom: var(--space-3xl);
    }

    .padding-bottom-4xl\@md {
        padding-bottom: var(--space-4xl);
    }

    .padding-bottom-0\@md {
        padding-bottom: 0;
    }

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

    .padding-right-4xs\@md {
        padding-right: var(--space-4xs);
    }

    .padding-right-3xs\@md {
        padding-right: var(--space-3xs);
    }

    .padding-right-2xs\@md {
        padding-right: var(--space-2xs);
    }

    .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-2xl\@md {
        padding-right: var(--space-2xl);
    }

    .padding-right-3xl\@md {
        padding-right: var(--space-3xl);
    }

    .padding-right-4xl\@md {
        padding-right: var(--space-4xl);
    }

    .padding-right-0\@md {
        padding-right: 0;
    }

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

    .padding-left-4xs\@md {
        padding-left: var(--space-4xs);
    }

    .padding-left-3xs\@md {
        padding-left: var(--space-3xs);
    }

    .padding-left-2xs\@md {
        padding-left: var(--space-2xs);
    }

    .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-2xl\@md {
        padding-left: var(--space-2xl);
    }

    .padding-left-3xl\@md {
        padding-left: var(--space-3xl);
    }

    .padding-left-4xl\@md {
        padding-left: var(--space-4xl);
    }

    .padding-left-0\@md {
        padding-left: 0;
    }

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

    .padding-x-4xs\@md {
        padding-left: var(--space-4xs);
        padding-right: var(--space-4xs);
    }

    .padding-x-3xs\@md {
        padding-left: var(--space-3xs);
        padding-right: var(--space-3xs);
    }

    .padding-x-2xs\@md {
        padding-left: var(--space-2xs);
        padding-right: var(--space-2xs);
    }

    .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-2xl\@md {
        padding-left: var(--space-2xl);
        padding-right: var(--space-2xl);
    }

    .padding-x-3xl\@md {
        padding-left: var(--space-3xl);
        padding-right: var(--space-3xl);
    }

    .padding-x-4xl\@md {
        padding-left: var(--space-4xl);
        padding-right: var(--space-4xl);
    }

    .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-4xs\@md {
        padding-top: var(--space-4xs);
        padding-bottom: var(--space-4xs);
    }

    .padding-y-3xs\@md {
        padding-top: var(--space-3xs);
        padding-bottom: var(--space-3xs);
    }

    .padding-y-2xs\@md {
        padding-top: var(--space-2xs);
        padding-bottom: var(--space-2xs);
    }

    .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-2xl\@md {
        padding-top: var(--space-2xl);
        padding-bottom: var(--space-2xl);
    }

    .padding-y-3xl\@md {
        padding-top: var(--space-3xl);
        padding-bottom: var(--space-3xl);
    }

    .padding-y-4xl\@md {
        padding-top: var(--space-4xl);
        padding-bottom: var(--space-4xl);
    }

    .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-align */
    .text-center\@md {
        text-align: center;
    }

    .text-left\@md {
        text-align: left;
    }

    .text-right\@md {
        text-align: right;
    }

    .text-justify\@md {
        text-align: justify;
    }

    /* font-size */
    .text-3xs\@md {
        font-size: var(--text-3xs);
    }

    .text-2xs\@md {
        font-size: var(--text-2xs);
    }

    .text-xs\@md {
        font-size: var(--text-xs);
    }

    .text-sm\@md {
        font-size: var(--text-sm);
    }

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

    .text-1rem\@md {
        font-size: 1rem;
    }

    .text-md\@md {
        font-size: var(--text-md);
    }

    .text-lg\@md {
        font-size: var(--text-lg);
    }

    .text-xl\@md {
        font-size: var(--text-xl);
    }

    .text-2xl\@md {
        font-size: var(--text-2xl);
    }

    .text-3xl\@md {
        font-size: var(--text-3xl);
    }

    .text-4xl\@md {
        font-size: var(--text-4xl);
    }

    .text-5xl\@md {
        font-size: var(--text-5xl);
    }

    .text-group-2xs\@md {
        --text-unit: 0.82rem;
    }

    .text-group-xs\@md {
        --text-unit: 0.8888888889rem;
    }

    .text-group-sm\@md {
        --text-unit: 0.94rem;
    }

    .text-group-base\@md {
        --text-unit: 1rem;
    }

    .text-group-md\@md {
        --text-unit: 1.06rem;
    }

    .text-group-lg\@md {
        --text-unit: 1.12rem;
    }

    .text-group-xl\@md {
        --text-unit: 1.18rem;
    }

    /* column-count */
    .column-count-1\@md {
        -webkit-column-count: 1;
        -moz-column-count: 1;
        column-count: 1;
    }

    .column-count-2\@md {
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2;
    }

    .column-count-3\@md {
        -webkit-column-count: 3;
        -moz-column-count: 3;
        column-count: 3;
    }

    .column-count-4\@md {
        -webkit-column-count: 4;
        -moz-column-count: 4;
        column-count: 4;
    }

    /* size */
    .size-8xs\@md, .width-8xs\@md {
        --width: var(--size-8xs);
    }

    .size-8xs\@md, .height-8xs\@md {
        --height: var(--size-8xs);
    }

    .size-7xs\@md, .width-7xs\@md {
        --width: var(--size-7xs);
    }

    .size-7xs\@md, .height-7xs\@md {
        --height: var(--size-7xs);
    }

    .size-6xs\@md, .width-6xs\@md {
        --width: var(--size-6xs);
    }

    .size-6xs\@md, .height-6xs\@md {
        --height: var(--size-6xs);
    }

    .size-5xs\@md, .width-5xs\@md {
        --width: var(--size-5xs);
    }

    .size-5xs\@md, .height-5xs\@md {
        --height: var(--size-5xs);
    }

    .size-4xs\@md, .width-4xs\@md {
        --width: var(--size-4xs);
    }

    .size-4xs\@md, .height-4xs\@md {
        --height: var(--size-4xs);
    }

    .size-3xs\@md, .width-3xs\@md {
        --width: var(--size-3xs);
    }

    .size-3xs\@md, .height-3xs\@md {
        --height: var(--size-3xs);
    }

    .size-2xs\@md, .width-2xs\@md {
        --width: var(--size-2xs);
    }

    .size-2xs\@md, .height-2xs\@md {
        --height: var(--size-2xs);
    }

    .size-xs\@md, .width-xs\@md {
        --width: var(--size-xs);
    }

    .size-xs\@md, .height-xs\@md {
        --height: var(--size-xs);
    }

    .size-sm\@md, .width-sm\@md {
        --width: var(--size-sm);
    }

    .size-sm\@md, .height-sm\@md {
        --height: var(--size-sm);
    }

    .size-md\@md, .width-md\@md {
        --width: var(--size-md);
    }

    .size-md\@md, .height-md\@md {
        --height: var(--size-md);
    }

    .size-lg\@md, .width-lg\@md {
        --width: var(--size-lg);
    }

    .size-lg\@md, .height-lg\@md {
        --height: var(--size-lg);
    }

    .size-xl\@md, .width-xl\@md {
        --width: var(--size-xl);
    }

    .size-xl\@md, .height-xl\@md {
        --height: var(--size-xl);
    }

    .size-2xl\@md, .width-2xl\@md {
        --width: var(--size-2xl);
    }

    .size-2xl\@md, .height-2xl\@md {
        --height: var(--size-2xl);
    }

    .size-3xl\@md, .width-3xl\@md {
        --width: var(--size-3xl);
    }

    .size-3xl\@md, .height-3xl\@md {
        --height: var(--size-3xl);
    }

    .size-4xl\@md, .width-4xl\@md {
        --width: var(--size-4xl);
    }

    .size-4xl\@md, .height-4xl\@md {
        --height: var(--size-4xl);
    }

    .size-5xl\@md, .width-5xl\@md {
        --width: var(--size-5xl);
    }

    .size-5xl\@md, .height-5xl\@md {
        --height: var(--size-5xl);
    }

    .size-0\@md, .width-0\@md {
        --width: 0;
    }

    .size-0\@md, .height-0\@md {
        --height: 0;
    }

    .size-inherit\@md, .width-inherit\@md {
        width: inherit;
    }

    .size-inherit\@md, .height-inherit\@md {
        height: inherit;
    }

    /* width */
    .width-10\%\@md {
        width: 10%;
    }

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

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

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

    .width-33\%\@md {
        width: 33.3333333333%;
    }

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

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

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

    .width-66\%\@md {
        width: 66.6666666667%;
    }

    .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;
    }

    /* height */
    .height-10\%\@md {
        height: 10%;
    }

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

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

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

    .height-33\%\@md {
        height: 33.3333333333%;
    }

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

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

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

    .height-66\%\@md {
        height: 66.6666666667%;
    }

    .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;
    }

    /* max-width */
    .max-width-5xs\@md {
        max-width: var(--max-width-5xs);
    }

    .max-width-4xs\@md {
        max-width: var(--max-width-4xs);
    }

    .max-width-3xs\@md {
        max-width: var(--max-width-3xs);
    }

    .max-width-2xs\@md {
        max-width: var(--max-width-2xs);
    }

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

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

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

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

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

    .max-width-2xl\@md {
        max-width: var(--max-width-2xl);
    }

    .max-width-3xl\@md {
        max-width: var(--max-width-3xl);
    }

    .max-width-4xl\@md {
        max-width: var(--max-width-4xl);
    }

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

    .max-width-none\@md {
        max-width: none;
    }

    /* position */
    .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;
    }

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

    .top-0\@md {
        top: 0;
    }

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

    .top-4xs\@md {
        top: var(--space-4xs);
    }

    .top-3xs\@md {
        top: var(--space-3xs);
    }

    .top-2xs\@md {
        top: var(--space-2xs);
    }

    .top-xs\@md {
        top: var(--space-xs);
    }

    .top-sm\@md {
        top: var(--space-sm);
    }

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

    .top-lg\@md {
        top: var(--space-lg);
    }

    .top-xl\@md {
        top: var(--space-xl);
    }

    .top-2xl\@md {
        top: var(--space-2xl);
    }

    .top-3xl\@md {
        top: var(--space-3xl);
    }

    .top-4xl\@md {
        top: var(--space-4xl);
    }

    .bottom-0\@md {
        bottom: 0;
    }

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

    .bottom-4xs\@md {
        bottom: var(--space-4xs);
    }

    .bottom-3xs\@md {
        bottom: var(--space-3xs);
    }

    .bottom-2xs\@md {
        bottom: var(--space-2xs);
    }

    .bottom-xs\@md {
        bottom: var(--space-xs);
    }

    .bottom-sm\@md {
        bottom: var(--space-sm);
    }

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

    .bottom-lg\@md {
        bottom: var(--space-lg);
    }

    .bottom-xl\@md {
        bottom: var(--space-xl);
    }

    .bottom-2xl\@md {
        bottom: var(--space-2xl);
    }

    .bottom-3xl\@md {
        bottom: var(--space-3xl);
    }

    .bottom-4xl\@md {
        bottom: var(--space-4xl);
    }

    .right-0\@md {
        right: 0;
    }

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

    .right-4xs\@md {
        right: var(--space-4xs);
    }

    .right-3xs\@md {
        right: var(--space-3xs);
    }

    .right-2xs\@md {
        right: var(--space-2xs);
    }

    .right-xs\@md {
        right: var(--space-xs);
    }

    .right-sm\@md {
        right: var(--space-sm);
    }

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

    .right-lg\@md {
        right: var(--space-lg);
    }

    .right-xl\@md {
        right: var(--space-xl);
    }

    .right-2xl\@md {
        right: var(--space-2xl);
    }

    .right-3xl\@md {
        right: var(--space-3xl);
    }

    .right-4xl\@md {
        right: var(--space-4xl);
    }

    .left-0\@md {
        left: 0;
    }

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

    .left-4xs\@md {
        left: var(--space-4xs);
    }

    .left-3xs\@md {
        left: var(--space-3xs);
    }

    .left-2xs\@md {
        left: var(--space-2xs);
    }

    .left-xs\@md {
        left: var(--space-xs);
    }

    .left-sm\@md {
        left: var(--space-sm);
    }

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

    .left-lg\@md {
        left: var(--space-lg);
    }

    .left-xl\@md {
        left: var(--space-xl);
    }

    .left-2xl\@md {
        left: var(--space-2xl);
    }

    .left-3xl\@md {
        left: var(--space-3xl);
    }

    .left-4xl\@md {
        left: var(--space-4xl);
    }

    /* overflow */
    .overflow-hidden\@md {
        overflow: hidden;
    }

    .overflow-auto\@md {
        overflow: auto;
    }

    .momentum-scrolling\@md {
        -webkit-overflow-scrolling: touch;
    }

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

    /* visibility */
    .visible\@md {
        visibility: visible;
    }

    .invisible\@md {
        visibility: hidden;
    }
}

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

@media (min-width: 80rem) {
    .grid-col-1\@lg {
        --grid-columns: 1;
    }

    .grid-col-2\@lg {
        --grid-columns: 2;
    }

    .grid-col-3\@lg {
        --grid-columns: 3;
    }

    .grid-col-4\@lg {
        --grid-columns: 4;
    }

    .grid-col-5\@lg {
        --grid-columns: 5;
    }

    .grid-col-6\@lg {
        --grid-columns: 6;
    }

    .grid-col-7\@lg {
        --grid-columns: 7;
    }

    .grid-col-8\@lg {
        --grid-columns: 8;
    }

    .grid-col-9\@lg {
        --grid-columns: 9;
    }

    .grid-col-10\@lg {
        --grid-columns: 10;
    }

    .grid-col-11\@lg {
        --grid-columns: 11;
    }

    .grid-col-12\@lg {
        --grid-columns: 12;
    }

    .col-1\@lg, .col-2\@lg, .col-3\@lg, .col-4\@lg, .col-5\@lg, .col-6\@lg, .col-7\@lg, .col-8\@lg, .col-9\@lg, .col-10\@lg, .col-11\@lg, .col-12\@lg {
        width: calc(((100% - (var(--grid-columns) - 1) * var(--sub-gap-x)) * var(--span) / var(--grid-columns)) + (var(--span) - 1) * var(--sub-gap-x));
        flex: initial;
    }

    .col-1\@lg {
        --span: 1;
    }

    .col-2\@lg {
        --span: 2;
    }

    .col-3\@lg {
        --span: 3;
    }

    .col-4\@lg {
        --span: 4;
    }

    .col-5\@lg {
        --span: 5;
    }

    .col-6\@lg {
        --span: 6;
    }

    .col-7\@lg {
        --span: 7;
    }

    .col-8\@lg {
        --span: 8;
    }

    .col-9\@lg {
        --span: 9;
    }

    .col-10\@lg {
        --span: 10;
    }

    .col-11\@lg {
        --span: 11;
    }

    .col-12\@lg {
        --span: 12;
    }

    .col\@lg {
        width: auto;
        flex: 1 1 0;
    }

    .col-content\@lg {
        width: auto;
        flex: 0 1 auto;
    }

    .offset-1\@lg, .offset-2\@lg, .offset-3\@lg, .offset-4\@lg, .offset-5\@lg, .offset-6\@lg, .offset-7\@lg, .offset-8\@lg, .offset-9\@lg, .offset-10\@lg, .offset-11\@lg {
        margin-left: calc(((100% - (var(--grid-columns) - 1) * var(--sub-gap-x)) * var(--offset) / var(--grid-columns)) + var(--offset) * var(--sub-gap-x));
    }

    .offset-1\@lg {
        --offset: 1;
    }

    .offset-2\@lg {
        --offset: 2;
    }

    .offset-3\@lg {
        --offset: 3;
    }

    .offset-4\@lg {
        --offset: 4;
    }

    .offset-5\@lg {
        --offset: 5;
    }

    .offset-6\@lg {
        --offset: 6;
    }

    .offset-7\@lg {
        --offset: 7;
    }

    .offset-8\@lg {
        --offset: 8;
    }

    .offset-9\@lg {
        --offset: 9;
    }

    .offset-10\@lg {
        --offset: 10;
    }

    .offset-11\@lg {
        --offset: 11;
    }

    .offset-0\@lg {
        --offset: 0;
    }

    /* gap */
    .gap-4xs\@lg {
        --gap-x: var(--space-4xs);
        --gap-y: var(--space-4xs);
    }

    .gap-4xs\@lg > * {
        --sub-gap-x: var(--space-4xs);
        --sub-gap-y: var(--space-4xs);
    }

    .gap-3xs\@lg {
        --gap-x: var(--space-3xs);
        --gap-y: var(--space-3xs);
    }

    .gap-3xs\@lg > * {
        --sub-gap-x: var(--space-3xs);
        --sub-gap-y: var(--space-3xs);
    }

    .gap-2xs\@lg {
        --gap-x: var(--space-2xs);
        --gap-y: var(--space-2xs);
    }

    .gap-2xs\@lg > * {
        --sub-gap-x: var(--space-2xs);
        --sub-gap-y: var(--space-2xs);
    }

    .gap-xs\@lg {
        --gap-x: var(--space-xs);
        --gap-y: var(--space-xs);
    }

    .gap-xs\@lg > * {
        --sub-gap-x: var(--space-xs);
        --sub-gap-y: var(--space-xs);
    }

    .gap-sm\@lg {
        --gap-x: var(--space-sm);
        --gap-y: var(--space-sm);
    }

    .gap-sm\@lg > * {
        --sub-gap-x: var(--space-sm);
        --sub-gap-y: var(--space-sm);
    }

    .gap-md\@lg {
        --gap-x: var(--space-md);
        --gap-y: var(--space-md);
    }

    .gap-md\@lg > * {
        --sub-gap-x: var(--space-md);
        --sub-gap-y: var(--space-md);
    }

    .gap-lg\@lg {
        --gap-x: var(--space-lg);
        --gap-y: var(--space-lg);
    }

    .gap-lg\@lg > * {
        --sub-gap-x: var(--space-lg);
        --sub-gap-y: var(--space-lg);
    }

    .gap-xl\@lg {
        --gap-x: var(--space-xl);
        --gap-y: var(--space-xl);
    }

    .gap-xl\@lg > * {
        --sub-gap-x: var(--space-xl);
        --sub-gap-y: var(--space-xl);
    }

    .gap-2xl\@lg {
        --gap-x: var(--space-2xl);
        --gap-y: var(--space-2xl);
    }

    .gap-2xl\@lg > * {
        --sub-gap-x: var(--space-2xl);
        --sub-gap-y: var(--space-2xl);
    }

    .gap-3xl\@lg {
        --gap-x: var(--space-3xl);
        --gap-y: var(--space-3xl);
    }

    .gap-3xl\@lg > * {
        --sub-gap-x: var(--space-3xl);
        --sub-gap-y: var(--space-3xl);
    }

    .gap-4xl\@lg {
        --gap-x: var(--space-4xl);
        --gap-y: var(--space-4xl);
    }

    .gap-4xl\@lg > * {
        --sub-gap-x: var(--space-4xl);
        --sub-gap-y: var(--space-4xl);
    }

    .gap-0\@lg {
        --gap-x: 0px;
        --gap-y: 0px;
    }

    .gap-0\@lg > * {
        --sub-gap-x: 0px;
        --sub-gap-y: 0px;
    }

    .gap-x-4xs\@lg {
        --gap-x: var(--space-4xs);
    }

    .gap-x-4xs\@lg > * {
        --sub-gap-x: var(--space-4xs);
    }

    .gap-x-3xs\@lg {
        --gap-x: var(--space-3xs);
    }

    .gap-x-3xs\@lg > * {
        --sub-gap-x: var(--space-3xs);
    }

    .gap-x-2xs\@lg {
        --gap-x: var(--space-2xs);
    }

    .gap-x-2xs\@lg > * {
        --sub-gap-x: var(--space-2xs);
    }

    .gap-x-xs\@lg {
        --gap-x: var(--space-xs);
    }

    .gap-x-xs\@lg > * {
        --sub-gap-x: var(--space-xs);
    }

    .gap-x-sm\@lg {
        --gap-x: var(--space-sm);
    }

    .gap-x-sm\@lg > * {
        --sub-gap-x: var(--space-sm);
    }

    .gap-x-md\@lg {
        --gap-x: var(--space-md);
    }

    .gap-x-md\@lg > * {
        --sub-gap-x: var(--space-md);
    }

    .gap-x-lg\@lg {
        --gap-x: var(--space-lg);
    }

    .gap-x-lg\@lg > * {
        --sub-gap-x: var(--space-lg);
    }

    .gap-x-xl\@lg {
        --gap-x: var(--space-xl);
    }

    .gap-x-xl\@lg > * {
        --sub-gap-x: var(--space-xl);
    }

    .gap-x-2xl\@lg {
        --gap-x: var(--space-2xl);
    }

    .gap-x-2xl\@lg > * {
        --sub-gap-x: var(--space-2xl);
    }

    .gap-x-3xl\@lg {
        --gap-x: var(--space-3xl);
    }

    .gap-x-3xl\@lg > * {
        --sub-gap-x: var(--space-3xl);
    }

    .gap-x-4xl\@lg {
        --gap-x: var(--space-4xl);
    }

    .gap-x-4xl\@lg > * {
        --sub-gap-x: var(--space-4xl);
    }

    .gap-x-0\@lg {
        --gap-x: 0px;
    }

    .gap-x-0\@lg > * {
        --sub-gap-x: 0px;
    }

    .gap-y-4xs\@lg {
        --gap-y: var(--space-4xs);
    }

    .gap-y-4xs\@lg > * {
        --sub-gap-y: var(--space-4xs);
    }

    .gap-y-3xs\@lg {
        --gap-y: var(--space-3xs);
    }

    .gap-y-3xs\@lg > * {
        --sub-gap-y: var(--space-3xs);
    }

    .gap-y-2xs\@lg {
        --gap-y: var(--space-2xs);
    }

    .gap-y-2xs\@lg > * {
        --sub-gap-y: var(--space-2xs);
    }

    .gap-y-xs\@lg {
        --gap-y: var(--space-xs);
    }

    .gap-y-xs\@lg > * {
        --sub-gap-y: var(--space-xs);
    }

    .gap-y-sm\@lg {
        --gap-y: var(--space-sm);
    }

    .gap-y-sm\@lg > * {
        --sub-gap-y: var(--space-sm);
    }

    .gap-y-md\@lg {
        --gap-y: var(--space-md);
    }

    .gap-y-md\@lg > * {
        --sub-gap-y: var(--space-md);
    }

    .gap-y-lg\@lg {
        --gap-y: var(--space-lg);
    }

    .gap-y-lg\@lg > * {
        --sub-gap-y: var(--space-lg);
    }

    .gap-y-xl\@lg {
        --gap-y: var(--space-xl);
    }

    .gap-y-xl\@lg > * {
        --sub-gap-y: var(--space-xl);
    }

    .gap-y-2xl\@lg {
        --gap-y: var(--space-2xl);
    }

    .gap-y-2xl\@lg > * {
        --sub-gap-y: var(--space-2xl);
    }

    .gap-y-3xl\@lg {
        --gap-y: var(--space-3xl);
    }

    .gap-y-3xl\@lg > * {
        --sub-gap-y: var(--space-3xl);
    }

    .gap-y-4xl\@lg {
        --gap-y: var(--space-4xl);
    }

    .gap-y-4xl\@lg > * {
        --sub-gap-y: var(--space-4xl);
    }

    .gap-y-0\@lg {
        --gap-y: 0px;
    }

    .gap-y-0\@lg > * {
        --sub-gap-y: 0px;
    }

    /* flexbox */
    .flex\@lg {
        display: flex;
    }

    .inline-flex\@lg {
        display: inline-flex;
    }

    .flex-wrap\@lg {
        flex-wrap: wrap;
    }

    .flex-nowrap\@lg {
        flex-wrap: nowrap;
    }

    .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-content */
    .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;
    }

    /* align-items */
    .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 */
    .order-1\@lg {
        order: 1;
    }

    .order-2\@lg {
        order: 2;
    }

    .order-3\@lg {
        order: 3;
    }

    /* display */
    .block\@lg {
        display: block;
    }

    .inline-block\@lg {
        display: inline-block;
    }

    .inline\@lg {
        display: inline;
    }

    .contents\@lg {
        display: contents;
    }

    .hide\@lg {
        display: none !important;
    }

    /* spacing */
    .space-4xs\@lg {
        --space-unit: 0.25rem;
    }

    .space-3xs\@lg {
        --space-unit: 0.4rem;
    }

    .space-2xs\@lg {
        --space-unit: 0.55rem;
    }

    .space-xs\@lg {
        --space-unit: 0.7rem;
    }

    .space-sm\@lg {
        --space-unit: 0.85rem;
    }

    .space-base\@lg {
        --space-unit: 1rem;
    }

    .space-md\@lg {
        --space-unit: 1.15rem;
    }

    .space-lg\@lg {
        --space-unit: 1.3rem;
    }

    .space-xl\@lg {
        --space-unit: 1.45rem;
    }

    /* margin */
    .margin-4xs\@lg {
        margin: var(--space-4xs);
    }

    .margin-3xs\@lg {
        margin: var(--space-3xs);
    }

    .margin-2xs\@lg {
        margin: var(--space-2xs);
    }

    .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-2xl\@lg {
        margin: var(--space-2xl);
    }

    .margin-3xl\@lg {
        margin: var(--space-3xl);
    }

    .margin-4xl\@lg {
        margin: var(--space-4xl);
    }

    .margin-auto\@lg {
        margin: auto;
    }

    .margin-0\@lg {
        margin: 0;
    }

    .margin-top-4xs\@lg {
        margin-top: var(--space-4xs);
    }

    .margin-top-3xs\@lg {
        margin-top: var(--space-3xs);
    }

    .margin-top-2xs\@lg {
        margin-top: var(--space-2xs);
    }

    .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-2xl\@lg {
        margin-top: var(--space-2xl);
    }

    .margin-top-3xl\@lg {
        margin-top: var(--space-3xl);
    }

    .margin-top-4xl\@lg {
        margin-top: var(--space-4xl);
    }

    .margin-top-auto\@lg {
        margin-top: auto;
    }

    .margin-top-0\@lg {
        margin-top: 0;
    }

    .margin-bottom-4xs\@lg {
        margin-bottom: var(--space-4xs);
    }

    .margin-bottom-3xs\@lg {
        margin-bottom: var(--space-3xs);
    }

    .margin-bottom-2xs\@lg {
        margin-bottom: var(--space-2xs);
    }

    .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-2xl\@lg {
        margin-bottom: var(--space-2xl);
    }

    .margin-bottom-3xl\@lg {
        margin-bottom: var(--space-3xl);
    }

    .margin-bottom-4xl\@lg {
        margin-bottom: var(--space-4xl);
    }

    .margin-bottom-auto\@lg {
        margin-bottom: auto;
    }

    .margin-bottom-0\@lg {
        margin-bottom: 0;
    }

    .margin-right-4xs\@lg {
        margin-right: var(--space-4xs);
    }

    .margin-right-3xs\@lg {
        margin-right: var(--space-3xs);
    }

    .margin-right-2xs\@lg {
        margin-right: var(--space-2xs);
    }

    .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-2xl\@lg {
        margin-right: var(--space-2xl);
    }

    .margin-right-3xl\@lg {
        margin-right: var(--space-3xl);
    }

    .margin-right-4xl\@lg {
        margin-right: var(--space-4xl);
    }

    .margin-right-auto\@lg {
        margin-right: auto;
    }

    .margin-right-0\@lg {
        margin-right: 0;
    }

    .margin-left-4xs\@lg {
        margin-left: var(--space-4xs);
    }

    .margin-left-3xs\@lg {
        margin-left: var(--space-3xs);
    }

    .margin-left-2xs\@lg {
        margin-left: var(--space-2xs);
    }

    .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-2xl\@lg {
        margin-left: var(--space-2xl);
    }

    .margin-left-3xl\@lg {
        margin-left: var(--space-3xl);
    }

    .margin-left-4xl\@lg {
        margin-left: var(--space-4xl);
    }

    .margin-left-auto\@lg {
        margin-left: auto;
    }

    .margin-left-0\@lg {
        margin-left: 0;
    }

    .margin-x-4xs\@lg {
        margin-left: var(--space-4xs);
        margin-right: var(--space-4xs);
    }

    .margin-x-3xs\@lg {
        margin-left: var(--space-3xs);
        margin-right: var(--space-3xs);
    }

    .margin-x-2xs\@lg {
        margin-left: var(--space-2xs);
        margin-right: var(--space-2xs);
    }

    .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-2xl\@lg {
        margin-left: var(--space-2xl);
        margin-right: var(--space-2xl);
    }

    .margin-x-3xl\@lg {
        margin-left: var(--space-3xl);
        margin-right: var(--space-3xl);
    }

    .margin-x-4xl\@lg {
        margin-left: var(--space-4xl);
        margin-right: var(--space-4xl);
    }

    .margin-x-auto\@lg {
        margin-left: auto;
        margin-right: auto;
    }

    .margin-x-0\@lg {
        margin-left: 0;
        margin-right: 0;
    }

    .margin-y-4xs\@lg {
        margin-top: var(--space-4xs);
        margin-bottom: var(--space-4xs);
    }

    .margin-y-3xs\@lg {
        margin-top: var(--space-3xs);
        margin-bottom: var(--space-3xs);
    }

    .margin-y-2xs\@lg {
        margin-top: var(--space-2xs);
        margin-bottom: var(--space-2xs);
    }

    .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-2xl\@lg {
        margin-top: var(--space-2xl);
        margin-bottom: var(--space-2xl);
    }

    .margin-y-3xl\@lg {
        margin-top: var(--space-3xl);
        margin-bottom: var(--space-3xl);
    }

    .margin-y-4xl\@lg {
        margin-top: var(--space-4xl);
        margin-bottom: var(--space-4xl);
    }

    .margin-y-auto\@lg {
        margin-top: auto;
        margin-bottom: auto;
    }

    .margin-y-0\@lg {
        margin-top: 0;
        margin-bottom: 0;
    }

    /* padding */
    .padding-4xs\@lg {
        padding: var(--space-4xs);
    }

    .padding-3xs\@lg {
        padding: var(--space-3xs);
    }

    .padding-2xs\@lg {
        padding: var(--space-2xs);
    }

    .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-2xl\@lg {
        padding: var(--space-2xl);
    }

    .padding-3xl\@lg {
        padding: var(--space-3xl);
    }

    .padding-4xl\@lg {
        padding: var(--space-4xl);
    }

    .padding-0\@lg {
        padding: 0;
    }

    .padding-component\@lg {
        padding: var(--component-padding);
    }

    .padding-top-4xs\@lg {
        padding-top: var(--space-4xs);
    }

    .padding-top-3xs\@lg {
        padding-top: var(--space-3xs);
    }

    .padding-top-2xs\@lg {
        padding-top: var(--space-2xs);
    }

    .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-2xl\@lg {
        padding-top: var(--space-2xl);
    }

    .padding-top-3xl\@lg {
        padding-top: var(--space-3xl);
    }

    .padding-top-4xl\@lg {
        padding-top: var(--space-4xl);
    }

    .padding-top-0\@lg {
        padding-top: 0;
    }

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

    .padding-bottom-4xs\@lg {
        padding-bottom: var(--space-4xs);
    }

    .padding-bottom-3xs\@lg {
        padding-bottom: var(--space-3xs);
    }

    .padding-bottom-2xs\@lg {
        padding-bottom: var(--space-2xs);
    }

    .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-2xl\@lg {
        padding-bottom: var(--space-2xl);
    }

    .padding-bottom-3xl\@lg {
        padding-bottom: var(--space-3xl);
    }

    .padding-bottom-4xl\@lg {
        padding-bottom: var(--space-4xl);
    }

    .padding-bottom-0\@lg {
        padding-bottom: 0;
    }

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

    .padding-right-4xs\@lg {
        padding-right: var(--space-4xs);
    }

    .padding-right-3xs\@lg {
        padding-right: var(--space-3xs);
    }

    .padding-right-2xs\@lg {
        padding-right: var(--space-2xs);
    }

    .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-2xl\@lg {
        padding-right: var(--space-2xl);
    }

    .padding-right-3xl\@lg {
        padding-right: var(--space-3xl);
    }

    .padding-right-4xl\@lg {
        padding-right: var(--space-4xl);
    }

    .padding-right-0\@lg {
        padding-right: 0;
    }

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

    .padding-left-4xs\@lg {
        padding-left: var(--space-4xs);
    }

    .padding-left-3xs\@lg {
        padding-left: var(--space-3xs);
    }

    .padding-left-2xs\@lg {
        padding-left: var(--space-2xs);
    }

    .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-2xl\@lg {
        padding-left: var(--space-2xl);
    }

    .padding-left-3xl\@lg {
        padding-left: var(--space-3xl);
    }

    .padding-left-4xl\@lg {
        padding-left: var(--space-4xl);
    }

    .padding-left-0\@lg {
        padding-left: 0;
    }

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

    .padding-x-4xs\@lg {
        padding-left: var(--space-4xs);
        padding-right: var(--space-4xs);
    }

    .padding-x-3xs\@lg {
        padding-left: var(--space-3xs);
        padding-right: var(--space-3xs);
    }

    .padding-x-2xs\@lg {
        padding-left: var(--space-2xs);
        padding-right: var(--space-2xs);
    }

    .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-2xl\@lg {
        padding-left: var(--space-2xl);
        padding-right: var(--space-2xl);
    }

    .padding-x-3xl\@lg {
        padding-left: var(--space-3xl);
        padding-right: var(--space-3xl);
    }

    .padding-x-4xl\@lg {
        padding-left: var(--space-4xl);
        padding-right: var(--space-4xl);
    }

    .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-4xs\@lg {
        padding-top: var(--space-4xs);
        padding-bottom: var(--space-4xs);
    }

    .padding-y-3xs\@lg {
        padding-top: var(--space-3xs);
        padding-bottom: var(--space-3xs);
    }

    .padding-y-2xs\@lg {
        padding-top: var(--space-2xs);
        padding-bottom: var(--space-2xs);
    }

    .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-2xl\@lg {
        padding-top: var(--space-2xl);
        padding-bottom: var(--space-2xl);
    }

    .padding-y-3xl\@lg {
        padding-top: var(--space-3xl);
        padding-bottom: var(--space-3xl);
    }

    .padding-y-4xl\@lg {
        padding-top: var(--space-4xl);
        padding-bottom: var(--space-4xl);
    }

    .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-align */
    .text-center\@lg {
        text-align: center;
    }

    .text-left\@lg {
        text-align: left;
    }

    .text-right\@lg {
        text-align: right;
    }

    .text-justify\@lg {
        text-align: justify;
    }

    /* font-size */
    .text-3xs\@lg {
        font-size: var(--text-3xs);
    }

    .text-2xs\@lg {
        font-size: var(--text-2xs);
    }

    .text-xs\@lg {
        font-size: var(--text-xs);
    }

    .text-sm\@lg {
        font-size: var(--text-sm);
    }

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

    .text-1rem\@lg {
        font-size: 1rem;
    }

    .text-md\@lg {
        font-size: var(--text-md);
    }

    .text-lg\@lg {
        font-size: var(--text-lg);
    }

    .text-xl\@lg {
        font-size: var(--text-xl);
    }

    .text-2xl\@lg {
        font-size: var(--text-2xl);
    }

    .text-3xl\@lg {
        font-size: var(--text-3xl);
    }

    .text-4xl\@lg {
        font-size: var(--text-4xl);
    }

    .text-5xl\@lg {
        font-size: var(--text-5xl);
    }

    .text-group-2xs\@lg {
        --text-unit: 0.82rem;
    }

    .text-group-xs\@lg {
        --text-unit: 0.8888888889rem;
    }

    .text-group-sm\@lg {
        --text-unit: 0.94rem;
    }

    .text-group-base\@lg {
        --text-unit: 1rem;
    }

    .text-group-md\@lg {
        --text-unit: 1.06rem;
    }

    .text-group-lg\@lg {
        --text-unit: 1.12rem;
    }

    .text-group-xl\@lg {
        --text-unit: 1.18rem;
    }

    /* column-count */
    .column-count-1\@lg {
        -webkit-column-count: 1;
        -moz-column-count: 1;
        column-count: 1;
    }

    .column-count-2\@lg {
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2;
    }

    .column-count-3\@lg {
        -webkit-column-count: 3;
        -moz-column-count: 3;
        column-count: 3;
    }

    .column-count-4\@lg {
        -webkit-column-count: 4;
        -moz-column-count: 4;
        column-count: 4;
    }

    /* size */
    .size-8xs\@lg, .width-8xs\@lg {
        --width: var(--size-8xs);
    }

    .size-8xs\@lg, .height-8xs\@lg {
        --height: var(--size-8xs);
    }

    .size-7xs\@lg, .width-7xs\@lg {
        --width: var(--size-7xs);
    }

    .size-7xs\@lg, .height-7xs\@lg {
        --height: var(--size-7xs);
    }

    .size-6xs\@lg, .width-6xs\@lg {
        --width: var(--size-6xs);
    }

    .size-6xs\@lg, .height-6xs\@lg {
        --height: var(--size-6xs);
    }

    .size-5xs\@lg, .width-5xs\@lg {
        --width: var(--size-5xs);
    }

    .size-5xs\@lg, .height-5xs\@lg {
        --height: var(--size-5xs);
    }

    .size-4xs\@lg, .width-4xs\@lg {
        --width: var(--size-4xs);
    }

    .size-4xs\@lg, .height-4xs\@lg {
        --height: var(--size-4xs);
    }

    .size-3xs\@lg, .width-3xs\@lg {
        --width: var(--size-3xs);
    }

    .size-3xs\@lg, .height-3xs\@lg {
        --height: var(--size-3xs);
    }

    .size-2xs\@lg, .width-2xs\@lg {
        --width: var(--size-2xs);
    }

    .size-2xs\@lg, .height-2xs\@lg {
        --height: var(--size-2xs);
    }

    .size-xs\@lg, .width-xs\@lg {
        --width: var(--size-xs);
    }

    .size-xs\@lg, .height-xs\@lg {
        --height: var(--size-xs);
    }

    .size-sm\@lg, .width-sm\@lg {
        --width: var(--size-sm);
    }

    .size-sm\@lg, .height-sm\@lg {
        --height: var(--size-sm);
    }

    .size-md\@lg, .width-md\@lg {
        --width: var(--size-md);
    }

    .size-md\@lg, .height-md\@lg {
        --height: var(--size-md);
    }

    .size-lg\@lg, .width-lg\@lg {
        --width: var(--size-lg);
    }

    .size-lg\@lg, .height-lg\@lg {
        --height: var(--size-lg);
    }

    .size-xl\@lg, .width-xl\@lg {
        --width: var(--size-xl);
    }

    .size-xl\@lg, .height-xl\@lg {
        --height: var(--size-xl);
    }

    .size-2xl\@lg, .width-2xl\@lg {
        --width: var(--size-2xl);
    }

    .size-2xl\@lg, .height-2xl\@lg {
        --height: var(--size-2xl);
    }

    .size-3xl\@lg, .width-3xl\@lg {
        --width: var(--size-3xl);
    }

    .size-3xl\@lg, .height-3xl\@lg {
        --height: var(--size-3xl);
    }

    .size-4xl\@lg, .width-4xl\@lg {
        --width: var(--size-4xl);
    }

    .size-4xl\@lg, .height-4xl\@lg {
        --height: var(--size-4xl);
    }

    .size-5xl\@lg, .width-5xl\@lg {
        --width: var(--size-5xl);
    }

    .size-5xl\@lg, .height-5xl\@lg {
        --height: var(--size-5xl);
    }

    .size-0\@lg, .width-0\@lg {
        --width: 0;
    }

    .size-0\@lg, .height-0\@lg {
        --height: 0;
    }

    .size-inherit\@lg, .width-inherit\@lg {
        width: inherit;
    }

    .size-inherit\@lg, .height-inherit\@lg {
        height: inherit;
    }

    /* width */
    .width-10\%\@lg {
        width: 10%;
    }

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

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

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

    .width-33\%\@lg {
        width: 33.3333333333%;
    }

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

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

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

    .width-66\%\@lg {
        width: 66.6666666667%;
    }

    .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;
    }

    /* height */
    .height-10\%\@lg {
        height: 10%;
    }

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

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

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

    .height-33\%\@lg {
        height: 33.3333333333%;
    }

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

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

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

    .height-66\%\@lg {
        height: 66.6666666667%;
    }

    .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;
    }

    /* max-width */
    .max-width-5xs\@lg {
        max-width: var(--max-width-5xs);
    }

    .max-width-4xs\@lg {
        max-width: var(--max-width-4xs);
    }

    .max-width-3xs\@lg {
        max-width: var(--max-width-3xs);
    }

    .max-width-2xs\@lg {
        max-width: var(--max-width-2xs);
    }

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

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

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

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

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

    .max-width-2xl\@lg {
        max-width: var(--max-width-2xl);
    }

    .max-width-3xl\@lg {
        max-width: var(--max-width-3xl);
    }

    .max-width-4xl\@lg {
        max-width: var(--max-width-4xl);
    }

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

    .max-width-none\@lg {
        max-width: none;
    }

    /* position */
    .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;
    }

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

    .top-0\@lg {
        top: 0;
    }

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

    .top-4xs\@lg {
        top: var(--space-4xs);
    }

    .top-3xs\@lg {
        top: var(--space-3xs);
    }

    .top-2xs\@lg {
        top: var(--space-2xs);
    }

    .top-xs\@lg {
        top: var(--space-xs);
    }

    .top-sm\@lg {
        top: var(--space-sm);
    }

    .top-md\@lg {
        top: var(--space-md);
    }

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

    .top-xl\@lg {
        top: var(--space-xl);
    }

    .top-2xl\@lg {
        top: var(--space-2xl);
    }

    .top-3xl\@lg {
        top: var(--space-3xl);
    }

    .top-4xl\@lg {
        top: var(--space-4xl);
    }

    .bottom-0\@lg {
        bottom: 0;
    }

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

    .bottom-4xs\@lg {
        bottom: var(--space-4xs);
    }

    .bottom-3xs\@lg {
        bottom: var(--space-3xs);
    }

    .bottom-2xs\@lg {
        bottom: var(--space-2xs);
    }

    .bottom-xs\@lg {
        bottom: var(--space-xs);
    }

    .bottom-sm\@lg {
        bottom: var(--space-sm);
    }

    .bottom-md\@lg {
        bottom: var(--space-md);
    }

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

    .bottom-xl\@lg {
        bottom: var(--space-xl);
    }

    .bottom-2xl\@lg {
        bottom: var(--space-2xl);
    }

    .bottom-3xl\@lg {
        bottom: var(--space-3xl);
    }

    .bottom-4xl\@lg {
        bottom: var(--space-4xl);
    }

    .right-0\@lg {
        right: 0;
    }

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

    .right-4xs\@lg {
        right: var(--space-4xs);
    }

    .right-3xs\@lg {
        right: var(--space-3xs);
    }

    .right-2xs\@lg {
        right: var(--space-2xs);
    }

    .right-xs\@lg {
        right: var(--space-xs);
    }

    .right-sm\@lg {
        right: var(--space-sm);
    }

    .right-md\@lg {
        right: var(--space-md);
    }

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

    .right-xl\@lg {
        right: var(--space-xl);
    }

    .right-2xl\@lg {
        right: var(--space-2xl);
    }

    .right-3xl\@lg {
        right: var(--space-3xl);
    }

    .right-4xl\@lg {
        right: var(--space-4xl);
    }

    .left-0\@lg {
        left: 0;
    }

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

    .left-4xs\@lg {
        left: var(--space-4xs);
    }

    .left-3xs\@lg {
        left: var(--space-3xs);
    }

    .left-2xs\@lg {
        left: var(--space-2xs);
    }

    .left-xs\@lg {
        left: var(--space-xs);
    }

    .left-sm\@lg {
        left: var(--space-sm);
    }

    .left-md\@lg {
        left: var(--space-md);
    }

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

    .left-xl\@lg {
        left: var(--space-xl);
    }

    .left-2xl\@lg {
        left: var(--space-2xl);
    }

    .left-3xl\@lg {
        left: var(--space-3xl);
    }

    .left-4xl\@lg {
        left: var(--space-4xl);
    }

    /* overflow */
    .overflow-hidden\@lg {
        overflow: hidden;
    }

    .overflow-auto\@lg {
        overflow: auto;
    }

    .momentum-scrolling\@lg {
        -webkit-overflow-scrolling: touch;
    }

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

    /* visibility */
    .visible\@lg {
        visibility: visible;
    }

    .invisible\@lg {
        visibility: hidden;
    }
}

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

@media (min-width: 90rem) {
    .grid-col-1\@xl {
        --grid-columns: 1;
    }

    .grid-col-2\@xl {
        --grid-columns: 2;
    }

    .grid-col-3\@xl {
        --grid-columns: 3;
    }

    .grid-col-4\@xl {
        --grid-columns: 4;
    }

    .grid-col-5\@xl {
        --grid-columns: 5;
    }

    .grid-col-6\@xl {
        --grid-columns: 6;
    }

    .grid-col-7\@xl {
        --grid-columns: 7;
    }

    .grid-col-8\@xl {
        --grid-columns: 8;
    }

    .grid-col-9\@xl {
        --grid-columns: 9;
    }

    .grid-col-10\@xl {
        --grid-columns: 10;
    }

    .grid-col-11\@xl {
        --grid-columns: 11;
    }

    .grid-col-12\@xl {
        --grid-columns: 12;
    }

    .col-1\@xl, .col-2\@xl, .col-3\@xl, .col-4\@xl, .col-5\@xl, .col-6\@xl, .col-7\@xl, .col-8\@xl, .col-9\@xl, .col-10\@xl, .col-11\@xl, .col-12\@xl {
        width: calc(((100% - (var(--grid-columns) - 1) * var(--sub-gap-x)) * var(--span) / var(--grid-columns)) + (var(--span) - 1) * var(--sub-gap-x));
        flex: initial;
    }

    .col-1\@xl {
        --span: 1;
    }

    .col-2\@xl {
        --span: 2;
    }

    .col-3\@xl {
        --span: 3;
    }

    .col-4\@xl {
        --span: 4;
    }

    .col-5\@xl {
        --span: 5;
    }

    .col-6\@xl {
        --span: 6;
    }

    .col-7\@xl {
        --span: 7;
    }

    .col-8\@xl {
        --span: 8;
    }

    .col-9\@xl {
        --span: 9;
    }

    .col-10\@xl {
        --span: 10;
    }

    .col-11\@xl {
        --span: 11;
    }

    .col-12\@xl {
        --span: 12;
    }

    .col\@xl {
        width: auto;
        flex: 1 1 0;
    }

    .col-content\@xl {
        width: auto;
        flex: 0 1 auto;
    }

    .offset-1\@xl, .offset-2\@xl, .offset-3\@xl, .offset-4\@xl, .offset-5\@xl, .offset-6\@xl, .offset-7\@xl, .offset-8\@xl, .offset-9\@xl, .offset-10\@xl, .offset-11\@xl {
        margin-left: calc(((100% - (var(--grid-columns) - 1) * var(--sub-gap-x)) * var(--offset) / var(--grid-columns)) + var(--offset) * var(--sub-gap-x));
    }

    .offset-1\@xl {
        --offset: 1;
    }

    .offset-2\@xl {
        --offset: 2;
    }

    .offset-3\@xl {
        --offset: 3;
    }

    .offset-4\@xl {
        --offset: 4;
    }

    .offset-5\@xl {
        --offset: 5;
    }

    .offset-6\@xl {
        --offset: 6;
    }

    .offset-7\@xl {
        --offset: 7;
    }

    .offset-8\@xl {
        --offset: 8;
    }

    .offset-9\@xl {
        --offset: 9;
    }

    .offset-10\@xl {
        --offset: 10;
    }

    .offset-11\@xl {
        --offset: 11;
    }

    .offset-0\@xl {
        --offset: 0;
    }

    /* gap */
    .gap-4xs\@xl {
        --gap-x: var(--space-4xs);
        --gap-y: var(--space-4xs);
    }

    .gap-4xs\@xl > * {
        --sub-gap-x: var(--space-4xs);
        --sub-gap-y: var(--space-4xs);
    }

    .gap-3xs\@xl {
        --gap-x: var(--space-3xs);
        --gap-y: var(--space-3xs);
    }

    .gap-3xs\@xl > * {
        --sub-gap-x: var(--space-3xs);
        --sub-gap-y: var(--space-3xs);
    }

    .gap-2xs\@xl {
        --gap-x: var(--space-2xs);
        --gap-y: var(--space-2xs);
    }

    .gap-2xs\@xl > * {
        --sub-gap-x: var(--space-2xs);
        --sub-gap-y: var(--space-2xs);
    }

    .gap-xs\@xl {
        --gap-x: var(--space-xs);
        --gap-y: var(--space-xs);
    }

    .gap-xs\@xl > * {
        --sub-gap-x: var(--space-xs);
        --sub-gap-y: var(--space-xs);
    }

    .gap-sm\@xl {
        --gap-x: var(--space-sm);
        --gap-y: var(--space-sm);
    }

    .gap-sm\@xl > * {
        --sub-gap-x: var(--space-sm);
        --sub-gap-y: var(--space-sm);
    }

    .gap-md\@xl {
        --gap-x: var(--space-md);
        --gap-y: var(--space-md);
    }

    .gap-md\@xl > * {
        --sub-gap-x: var(--space-md);
        --sub-gap-y: var(--space-md);
    }

    .gap-lg\@xl {
        --gap-x: var(--space-lg);
        --gap-y: var(--space-lg);
    }

    .gap-lg\@xl > * {
        --sub-gap-x: var(--space-lg);
        --sub-gap-y: var(--space-lg);
    }

    .gap-xl\@xl {
        --gap-x: var(--space-xl);
        --gap-y: var(--space-xl);
    }

    .gap-xl\@xl > * {
        --sub-gap-x: var(--space-xl);
        --sub-gap-y: var(--space-xl);
    }

    .gap-2xl\@xl {
        --gap-x: var(--space-2xl);
        --gap-y: var(--space-2xl);
    }

    .gap-2xl\@xl > * {
        --sub-gap-x: var(--space-2xl);
        --sub-gap-y: var(--space-2xl);
    }

    .gap-3xl\@xl {
        --gap-x: var(--space-3xl);
        --gap-y: var(--space-3xl);
    }

    .gap-3xl\@xl > * {
        --sub-gap-x: var(--space-3xl);
        --sub-gap-y: var(--space-3xl);
    }

    .gap-4xl\@xl {
        --gap-x: var(--space-4xl);
        --gap-y: var(--space-4xl);
    }

    .gap-4xl\@xl > * {
        --sub-gap-x: var(--space-4xl);
        --sub-gap-y: var(--space-4xl);
    }

    .gap-0\@xl {
        --gap-x: 0px;
        --gap-y: 0px;
    }

    .gap-0\@xl > * {
        --sub-gap-x: 0px;
        --sub-gap-y: 0px;
    }

    .gap-x-4xs\@xl {
        --gap-x: var(--space-4xs);
    }

    .gap-x-4xs\@xl > * {
        --sub-gap-x: var(--space-4xs);
    }

    .gap-x-3xs\@xl {
        --gap-x: var(--space-3xs);
    }

    .gap-x-3xs\@xl > * {
        --sub-gap-x: var(--space-3xs);
    }

    .gap-x-2xs\@xl {
        --gap-x: var(--space-2xs);
    }

    .gap-x-2xs\@xl > * {
        --sub-gap-x: var(--space-2xs);
    }

    .gap-x-xs\@xl {
        --gap-x: var(--space-xs);
    }

    .gap-x-xs\@xl > * {
        --sub-gap-x: var(--space-xs);
    }

    .gap-x-sm\@xl {
        --gap-x: var(--space-sm);
    }

    .gap-x-sm\@xl > * {
        --sub-gap-x: var(--space-sm);
    }

    .gap-x-md\@xl {
        --gap-x: var(--space-md);
    }

    .gap-x-md\@xl > * {
        --sub-gap-x: var(--space-md);
    }

    .gap-x-lg\@xl {
        --gap-x: var(--space-lg);
    }

    .gap-x-lg\@xl > * {
        --sub-gap-x: var(--space-lg);
    }

    .gap-x-xl\@xl {
        --gap-x: var(--space-xl);
    }

    .gap-x-xl\@xl > * {
        --sub-gap-x: var(--space-xl);
    }

    .gap-x-2xl\@xl {
        --gap-x: var(--space-2xl);
    }

    .gap-x-2xl\@xl > * {
        --sub-gap-x: var(--space-2xl);
    }

    .gap-x-3xl\@xl {
        --gap-x: var(--space-3xl);
    }

    .gap-x-3xl\@xl > * {
        --sub-gap-x: var(--space-3xl);
    }

    .gap-x-4xl\@xl {
        --gap-x: var(--space-4xl);
    }

    .gap-x-4xl\@xl > * {
        --sub-gap-x: var(--space-4xl);
    }

    .gap-x-0\@xl {
        --gap-x: 0px;
    }

    .gap-x-0\@xl > * {
        --sub-gap-x: 0px;
    }

    .gap-y-4xs\@xl {
        --gap-y: var(--space-4xs);
    }

    .gap-y-4xs\@xl > * {
        --sub-gap-y: var(--space-4xs);
    }

    .gap-y-3xs\@xl {
        --gap-y: var(--space-3xs);
    }

    .gap-y-3xs\@xl > * {
        --sub-gap-y: var(--space-3xs);
    }

    .gap-y-2xs\@xl {
        --gap-y: var(--space-2xs);
    }

    .gap-y-2xs\@xl > * {
        --sub-gap-y: var(--space-2xs);
    }

    .gap-y-xs\@xl {
        --gap-y: var(--space-xs);
    }

    .gap-y-xs\@xl > * {
        --sub-gap-y: var(--space-xs);
    }

    .gap-y-sm\@xl {
        --gap-y: var(--space-sm);
    }

    .gap-y-sm\@xl > * {
        --sub-gap-y: var(--space-sm);
    }

    .gap-y-md\@xl {
        --gap-y: var(--space-md);
    }

    .gap-y-md\@xl > * {
        --sub-gap-y: var(--space-md);
    }

    .gap-y-lg\@xl {
        --gap-y: var(--space-lg);
    }

    .gap-y-lg\@xl > * {
        --sub-gap-y: var(--space-lg);
    }

    .gap-y-xl\@xl {
        --gap-y: var(--space-xl);
    }

    .gap-y-xl\@xl > * {
        --sub-gap-y: var(--space-xl);
    }

    .gap-y-2xl\@xl {
        --gap-y: var(--space-2xl);
    }

    .gap-y-2xl\@xl > * {
        --sub-gap-y: var(--space-2xl);
    }

    .gap-y-3xl\@xl {
        --gap-y: var(--space-3xl);
    }

    .gap-y-3xl\@xl > * {
        --sub-gap-y: var(--space-3xl);
    }

    .gap-y-4xl\@xl {
        --gap-y: var(--space-4xl);
    }

    .gap-y-4xl\@xl > * {
        --sub-gap-y: var(--space-4xl);
    }

    .gap-y-0\@xl {
        --gap-y: 0px;
    }

    .gap-y-0\@xl > * {
        --sub-gap-y: 0px;
    }

    /* flexbox */
    .flex\@xl {
        display: flex;
    }

    .inline-flex\@xl {
        display: inline-flex;
    }

    .flex-wrap\@xl {
        flex-wrap: wrap;
    }

    .flex-nowrap\@xl {
        flex-wrap: nowrap;
    }

    .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-content */
    .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;
    }

    /* align-items */
    .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 */
    .order-1\@xl {
        order: 1;
    }

    .order-2\@xl {
        order: 2;
    }

    .order-3\@xl {
        order: 3;
    }

    /* display */
    .block\@xl {
        display: block;
    }

    .inline-block\@xl {
        display: inline-block;
    }

    .inline\@xl {
        display: inline;
    }

    .contents\@xl {
        display: contents;
    }

    .hide\@xl {
        display: none !important;
    }

    /* spacing */
    .space-4xs\@xl {
        --space-unit: 0.25rem;
    }

    .space-3xs\@xl {
        --space-unit: 0.4rem;
    }

    .space-2xs\@xl {
        --space-unit: 0.55rem;
    }

    .space-xs\@xl {
        --space-unit: 0.7rem;
    }

    .space-sm\@xl {
        --space-unit: 0.85rem;
    }

    .space-base\@xl {
        --space-unit: 1rem;
    }

    .space-md\@xl {
        --space-unit: 1.15rem;
    }

    .space-lg\@xl {
        --space-unit: 1.3rem;
    }

    .space-xl\@xl {
        --space-unit: 1.45rem;
    }

    /* margin */
    .margin-4xs\@xl {
        margin: var(--space-4xs);
    }

    .margin-3xs\@xl {
        margin: var(--space-3xs);
    }

    .margin-2xs\@xl {
        margin: var(--space-2xs);
    }

    .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-2xl\@xl {
        margin: var(--space-2xl);
    }

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

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

    .margin-auto\@xl {
        margin: auto;
    }

    .margin-0\@xl {
        margin: 0;
    }

    .margin-top-4xs\@xl {
        margin-top: var(--space-4xs);
    }

    .margin-top-3xs\@xl {
        margin-top: var(--space-3xs);
    }

    .margin-top-2xs\@xl {
        margin-top: var(--space-2xs);
    }

    .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-2xl\@xl {
        margin-top: var(--space-2xl);
    }

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

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

    .margin-top-auto\@xl {
        margin-top: auto;
    }

    .margin-top-0\@xl {
        margin-top: 0;
    }

    .margin-bottom-4xs\@xl {
        margin-bottom: var(--space-4xs);
    }

    .margin-bottom-3xs\@xl {
        margin-bottom: var(--space-3xs);
    }

    .margin-bottom-2xs\@xl {
        margin-bottom: var(--space-2xs);
    }

    .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-2xl\@xl {
        margin-bottom: var(--space-2xl);
    }

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

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

    .margin-bottom-auto\@xl {
        margin-bottom: auto;
    }

    .margin-bottom-0\@xl {
        margin-bottom: 0;
    }

    .margin-right-4xs\@xl {
        margin-right: var(--space-4xs);
    }

    .margin-right-3xs\@xl {
        margin-right: var(--space-3xs);
    }

    .margin-right-2xs\@xl {
        margin-right: var(--space-2xs);
    }

    .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-2xl\@xl {
        margin-right: var(--space-2xl);
    }

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

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

    .margin-right-auto\@xl {
        margin-right: auto;
    }

    .margin-right-0\@xl {
        margin-right: 0;
    }

    .margin-left-4xs\@xl {
        margin-left: var(--space-4xs);
    }

    .margin-left-3xs\@xl {
        margin-left: var(--space-3xs);
    }

    .margin-left-2xs\@xl {
        margin-left: var(--space-2xs);
    }

    .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-2xl\@xl {
        margin-left: var(--space-2xl);
    }

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

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

    .margin-left-auto\@xl {
        margin-left: auto;
    }

    .margin-left-0\@xl {
        margin-left: 0;
    }

    .margin-x-4xs\@xl {
        margin-left: var(--space-4xs);
        margin-right: var(--space-4xs);
    }

    .margin-x-3xs\@xl {
        margin-left: var(--space-3xs);
        margin-right: var(--space-3xs);
    }

    .margin-x-2xs\@xl {
        margin-left: var(--space-2xs);
        margin-right: var(--space-2xs);
    }

    .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-2xl\@xl {
        margin-left: var(--space-2xl);
        margin-right: var(--space-2xl);
    }

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

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

    .margin-x-auto\@xl {
        margin-left: auto;
        margin-right: auto;
    }

    .margin-x-0\@xl {
        margin-left: 0;
        margin-right: 0;
    }

    .margin-y-4xs\@xl {
        margin-top: var(--space-4xs);
        margin-bottom: var(--space-4xs);
    }

    .margin-y-3xs\@xl {
        margin-top: var(--space-3xs);
        margin-bottom: var(--space-3xs);
    }

    .margin-y-2xs\@xl {
        margin-top: var(--space-2xs);
        margin-bottom: var(--space-2xs);
    }

    .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-2xl\@xl {
        margin-top: var(--space-2xl);
        margin-bottom: var(--space-2xl);
    }

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

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

    .margin-y-auto\@xl {
        margin-top: auto;
        margin-bottom: auto;
    }

    .margin-y-0\@xl {
        margin-top: 0;
        margin-bottom: 0;
    }

    /* padding */
    .padding-4xs\@xl {
        padding: var(--space-4xs);
    }

    .padding-3xs\@xl {
        padding: var(--space-3xs);
    }

    .padding-2xs\@xl {
        padding: var(--space-2xs);
    }

    .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-2xl\@xl {
        padding: var(--space-2xl);
    }

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

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

    .padding-0\@xl {
        padding: 0;
    }

    .padding-component\@xl {
        padding: var(--component-padding);
    }

    .padding-top-4xs\@xl {
        padding-top: var(--space-4xs);
    }

    .padding-top-3xs\@xl {
        padding-top: var(--space-3xs);
    }

    .padding-top-2xs\@xl {
        padding-top: var(--space-2xs);
    }

    .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-2xl\@xl {
        padding-top: var(--space-2xl);
    }

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

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

    .padding-top-0\@xl {
        padding-top: 0;
    }

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

    .padding-bottom-4xs\@xl {
        padding-bottom: var(--space-4xs);
    }

    .padding-bottom-3xs\@xl {
        padding-bottom: var(--space-3xs);
    }

    .padding-bottom-2xs\@xl {
        padding-bottom: var(--space-2xs);
    }

    .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-2xl\@xl {
        padding-bottom: var(--space-2xl);
    }

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

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

    .padding-bottom-0\@xl {
        padding-bottom: 0;
    }

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

    .padding-right-4xs\@xl {
        padding-right: var(--space-4xs);
    }

    .padding-right-3xs\@xl {
        padding-right: var(--space-3xs);
    }

    .padding-right-2xs\@xl {
        padding-right: var(--space-2xs);
    }

    .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-2xl\@xl {
        padding-right: var(--space-2xl);
    }

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

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

    .padding-right-0\@xl {
        padding-right: 0;
    }

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

    .padding-left-4xs\@xl {
        padding-left: var(--space-4xs);
    }

    .padding-left-3xs\@xl {
        padding-left: var(--space-3xs);
    }

    .padding-left-2xs\@xl {
        padding-left: var(--space-2xs);
    }

    .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-2xl\@xl {
        padding-left: var(--space-2xl);
    }

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

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

    .padding-left-0\@xl {
        padding-left: 0;
    }

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

    .padding-x-4xs\@xl {
        padding-left: var(--space-4xs);
        padding-right: var(--space-4xs);
    }

    .padding-x-3xs\@xl {
        padding-left: var(--space-3xs);
        padding-right: var(--space-3xs);
    }

    .padding-x-2xs\@xl {
        padding-left: var(--space-2xs);
        padding-right: var(--space-2xs);
    }

    .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-2xl\@xl {
        padding-left: var(--space-2xl);
        padding-right: var(--space-2xl);
    }

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

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

    .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-4xs\@xl {
        padding-top: var(--space-4xs);
        padding-bottom: var(--space-4xs);
    }

    .padding-y-3xs\@xl {
        padding-top: var(--space-3xs);
        padding-bottom: var(--space-3xs);
    }

    .padding-y-2xs\@xl {
        padding-top: var(--space-2xs);
        padding-bottom: var(--space-2xs);
    }

    .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-2xl\@xl {
        padding-top: var(--space-2xl);
        padding-bottom: var(--space-2xl);
    }

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

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

    .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-align */
    .text-center\@xl {
        text-align: center;
    }

    .text-left\@xl {
        text-align: left;
    }

    .text-right\@xl {
        text-align: right;
    }

    .text-justify\@xl {
        text-align: justify;
    }

    /* font-size */
    .text-3xs\@xl {
        font-size: var(--text-3xs);
    }

    .text-2xs\@xl {
        font-size: var(--text-2xs);
    }

    .text-xs\@xl {
        font-size: var(--text-xs);
    }

    .text-sm\@xl {
        font-size: var(--text-sm);
    }

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

    .text-1rem\@xl {
        font-size: 1rem;
    }

    .text-md\@xl {
        font-size: var(--text-md);
    }

    .text-lg\@xl {
        font-size: var(--text-lg);
    }

    .text-xl\@xl {
        font-size: var(--text-xl);
    }

    .text-2xl\@xl {
        font-size: var(--text-2xl);
    }

    .text-3xl\@xl {
        font-size: var(--text-3xl);
    }

    .text-4xl\@xl {
        font-size: var(--text-4xl);
    }

    .text-5xl\@xl {
        font-size: var(--text-5xl);
    }

    .text-group-2xs\@xl {
        --text-unit: 0.82rem;
    }

    .text-group-xs\@xl {
        --text-unit: 0.8888888889rem;
    }

    .text-group-sm\@xl {
        --text-unit: 0.94rem;
    }

    .text-group-base\@xl {
        --text-unit: 1rem;
    }

    .text-group-md\@xl {
        --text-unit: 1.06rem;
    }

    .text-group-lg\@xl {
        --text-unit: 1.12rem;
    }

    .text-group-xl\@xl {
        --text-unit: 1.18rem;
    }

    /* column-count */
    .column-count-1\@xl {
        -webkit-column-count: 1;
        -moz-column-count: 1;
        column-count: 1;
    }

    .column-count-2\@xl {
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2;
    }

    .column-count-3\@xl {
        -webkit-column-count: 3;
        -moz-column-count: 3;
        column-count: 3;
    }

    .column-count-4\@xl {
        -webkit-column-count: 4;
        -moz-column-count: 4;
        column-count: 4;
    }

    /* size */
    .size-8xs\@xl, .width-8xs\@xl {
        --width: var(--size-8xs);
    }

    .size-8xs\@xl, .height-8xs\@xl {
        --height: var(--size-8xs);
    }

    .size-7xs\@xl, .width-7xs\@xl {
        --width: var(--size-7xs);
    }

    .size-7xs\@xl, .height-7xs\@xl {
        --height: var(--size-7xs);
    }

    .size-6xs\@xl, .width-6xs\@xl {
        --width: var(--size-6xs);
    }

    .size-6xs\@xl, .height-6xs\@xl {
        --height: var(--size-6xs);
    }

    .size-5xs\@xl, .width-5xs\@xl {
        --width: var(--size-5xs);
    }

    .size-5xs\@xl, .height-5xs\@xl {
        --height: var(--size-5xs);
    }

    .size-4xs\@xl, .width-4xs\@xl {
        --width: var(--size-4xs);
    }

    .size-4xs\@xl, .height-4xs\@xl {
        --height: var(--size-4xs);
    }

    .size-3xs\@xl, .width-3xs\@xl {
        --width: var(--size-3xs);
    }

    .size-3xs\@xl, .height-3xs\@xl {
        --height: var(--size-3xs);
    }

    .size-2xs\@xl, .width-2xs\@xl {
        --width: var(--size-2xs);
    }

    .size-2xs\@xl, .height-2xs\@xl {
        --height: var(--size-2xs);
    }

    .size-xs\@xl, .width-xs\@xl {
        --width: var(--size-xs);
    }

    .size-xs\@xl, .height-xs\@xl {
        --height: var(--size-xs);
    }

    .size-sm\@xl, .width-sm\@xl {
        --width: var(--size-sm);
    }

    .size-sm\@xl, .height-sm\@xl {
        --height: var(--size-sm);
    }

    .size-md\@xl, .width-md\@xl {
        --width: var(--size-md);
    }

    .size-md\@xl, .height-md\@xl {
        --height: var(--size-md);
    }

    .size-lg\@xl, .width-lg\@xl {
        --width: var(--size-lg);
    }

    .size-lg\@xl, .height-lg\@xl {
        --height: var(--size-lg);
    }

    .size-xl\@xl, .width-xl\@xl {
        --width: var(--size-xl);
    }

    .size-xl\@xl, .height-xl\@xl {
        --height: var(--size-xl);
    }

    .size-2xl\@xl, .width-2xl\@xl {
        --width: var(--size-2xl);
    }

    .size-2xl\@xl, .height-2xl\@xl {
        --height: var(--size-2xl);
    }

    .size-3xl\@xl, .width-3xl\@xl {
        --width: var(--size-3xl);
    }

    .size-3xl\@xl, .height-3xl\@xl {
        --height: var(--size-3xl);
    }

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

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

    .size-5xl\@xl, .width-5xl\@xl {
        --width: var(--size-5xl);
    }

    .size-5xl\@xl, .height-5xl\@xl {
        --height: var(--size-5xl);
    }

    .size-0\@xl, .width-0\@xl {
        --width: 0;
    }

    .size-0\@xl, .height-0\@xl {
        --height: 0;
    }

    .size-inherit\@xl, .width-inherit\@xl {
        width: inherit;
    }

    .size-inherit\@xl, .height-inherit\@xl {
        height: inherit;
    }

    /* width */
    .width-10\%\@xl {
        width: 10%;
    }

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

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

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

    .width-33\%\@xl {
        width: 33.3333333333%;
    }

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

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

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

    .width-66\%\@xl {
        width: 66.6666666667%;
    }

    .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;
    }

    /* height */
    .height-10\%\@xl {
        height: 10%;
    }

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

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

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

    .height-33\%\@xl {
        height: 33.3333333333%;
    }

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

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

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

    .height-66\%\@xl {
        height: 66.6666666667%;
    }

    .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;
    }

    /* max-width */
    .max-width-5xs\@xl {
        max-width: var(--max-width-5xs);
    }

    .max-width-4xs\@xl {
        max-width: var(--max-width-4xs);
    }

    .max-width-3xs\@xl {
        max-width: var(--max-width-3xs);
    }

    .max-width-2xs\@xl {
        max-width: var(--max-width-2xs);
    }

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

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

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

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

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

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

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

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

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

    .max-width-none\@xl {
        max-width: none;
    }

    /* position */
    .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;
    }

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

    .top-0\@xl {
        top: 0;
    }

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

    .top-4xs\@xl {
        top: var(--space-4xs);
    }

    .top-3xs\@xl {
        top: var(--space-3xs);
    }

    .top-2xs\@xl {
        top: var(--space-2xs);
    }

    .top-xs\@xl {
        top: var(--space-xs);
    }

    .top-sm\@xl {
        top: var(--space-sm);
    }

    .top-md\@xl {
        top: var(--space-md);
    }

    .top-lg\@xl {
        top: var(--space-lg);
    }

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

    .top-2xl\@xl {
        top: var(--space-2xl);
    }

    .top-3xl\@xl {
        top: var(--space-3xl);
    }

    .top-4xl\@xl {
        top: var(--space-4xl);
    }

    .bottom-0\@xl {
        bottom: 0;
    }

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

    .bottom-4xs\@xl {
        bottom: var(--space-4xs);
    }

    .bottom-3xs\@xl {
        bottom: var(--space-3xs);
    }

    .bottom-2xs\@xl {
        bottom: var(--space-2xs);
    }

    .bottom-xs\@xl {
        bottom: var(--space-xs);
    }

    .bottom-sm\@xl {
        bottom: var(--space-sm);
    }

    .bottom-md\@xl {
        bottom: var(--space-md);
    }

    .bottom-lg\@xl {
        bottom: var(--space-lg);
    }

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

    .bottom-2xl\@xl {
        bottom: var(--space-2xl);
    }

    .bottom-3xl\@xl {
        bottom: var(--space-3xl);
    }

    .bottom-4xl\@xl {
        bottom: var(--space-4xl);
    }

    .right-0\@xl {
        right: 0;
    }

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

    .right-4xs\@xl {
        right: var(--space-4xs);
    }

    .right-3xs\@xl {
        right: var(--space-3xs);
    }

    .right-2xs\@xl {
        right: var(--space-2xs);
    }

    .right-xs\@xl {
        right: var(--space-xs);
    }

    .right-sm\@xl {
        right: var(--space-sm);
    }

    .right-md\@xl {
        right: var(--space-md);
    }

    .right-lg\@xl {
        right: var(--space-lg);
    }

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

    .right-2xl\@xl {
        right: var(--space-2xl);
    }

    .right-3xl\@xl {
        right: var(--space-3xl);
    }

    .right-4xl\@xl {
        right: var(--space-4xl);
    }

    .left-0\@xl {
        left: 0;
    }

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

    .left-4xs\@xl {
        left: var(--space-4xs);
    }

    .left-3xs\@xl {
        left: var(--space-3xs);
    }

    .left-2xs\@xl {
        left: var(--space-2xs);
    }

    .left-xs\@xl {
        left: var(--space-xs);
    }

    .left-sm\@xl {
        left: var(--space-sm);
    }

    .left-md\@xl {
        left: var(--space-md);
    }

    .left-lg\@xl {
        left: var(--space-lg);
    }

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

    .left-2xl\@xl {
        left: var(--space-2xl);
    }

    .left-3xl\@xl {
        left: var(--space-3xl);
    }

    .left-4xl\@xl {
        left: var(--space-4xl);
    }

    /* overflow */
    .overflow-hidden\@xl {
        overflow: hidden;
    }

    .overflow-auto\@xl {
        overflow: auto;
    }

    .momentum-scrolling\@xl {
        -webkit-overflow-scrolling: touch;
    }

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

    /* visibility */
    .visible\@xl {
        visibility: visible;
    }

    .invisible\@xl {
        visibility: hidden;
    }
}

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