diff --git a/announcement.html b/announcement.html new file mode 100644 index 0000000..7e607c1 --- /dev/null +++ b/announcement.html @@ -0,0 +1,155 @@ + + + + + + FutureSTEMgirls Campaign + + + + + + + + + + + + + +
+ + + + + + +
+ + + + + View in Browser +
+
+ + + + + +
+

Help Girls Pursue STEM Education

+ Girl coding on a laptop +

FutureSTEMgirls is an NGO advocating for girls and women to pursue STEM education and career. We are running a campaign to understand motivations and barriers for girls and women in STEM and ICT domains.

+ Join the Campaign +
+
+ + + + + +
+

FutureSTEMgirls
123 Main Street
Anytown, USA 12345

+

+ +

+

Unsubscribe

+
+
+ + \ No newline at end of file diff --git a/assets/.DS_Store b/assets/.DS_Store new file mode 100644 index 0000000..9063ab3 Binary files /dev/null and b/assets/.DS_Store differ diff --git a/assets/css/.DS_Store b/assets/css/.DS_Store new file mode 100644 index 0000000..2d8c09b Binary files /dev/null and b/assets/css/.DS_Store differ diff --git a/assets/css/_base.scss b/assets/css/_base.scss new file mode 100644 index 0000000..fb03832 --- /dev/null +++ b/assets/css/_base.scss @@ -0,0 +1 @@ +@forward '../../../node_modules/codyhouse-framework/main/assets/css/base'; \ No newline at end of file diff --git a/assets/css/_custom-style.scss b/assets/css/_custom-style.scss new file mode 100644 index 0000000..b82a7e1 --- /dev/null +++ b/assets/css/_custom-style.scss @@ -0,0 +1,16 @@ +// -------------------------------- + +// Custom Style - Your bespoke style + +// -------------------------------- + +@use 'custom-style/colors'; +@use 'custom-style/spacing'; +@use 'custom-style/shared-styles'; +@use 'custom-style/typography'; +@use 'custom-style/icons'; +@use 'custom-style/buttons'; +@use 'custom-style/forms'; +@use 'custom-style/util'; + +/*! purgecss start ignore */ \ No newline at end of file diff --git a/assets/css/components/_1_accordion.scss b/assets/css/components/_1_accordion.scss new file mode 100644 index 0000000..b26d3ab --- /dev/null +++ b/assets/css/components/_1_accordion.scss @@ -0,0 +1,167 @@ +@use '../base' as *; + +/* -------------------------------- + +File#: _1_accordion +Title: Accordion +Descr: Create stacked sections of content and allow the user to expand/collapse them +Usage: codyhouse.co/license + +-------------------------------- */ + +:root { + /* general */ + --accordion-border-width: 1px; + /* icon */ + --accordion-icon-size: 20px; + --accordion-icon-stroke-width: 2px; +} + +.accordion {} + +.accordion__item { + border-style: solid; + border-color: var(--color-contrast-lower); + border-bottom-width: var(--accordion-border-width); + + &:first-child { + border-top-width: var(--accordion-border-width); + } +} + +.accordion__header { /* button */ + width: 100%; + display: flex; + align-items: center; + justify-content: space-between; + text-align: left; + cursor: pointer; + + .icon { + --size: var(--accordion-icon-size); + + .icon__group { + stroke-width: var(--accordion-icon-stroke-width); + } + } +} + +.accordion__icon-arrow, +.accordion__icon-arrow-v2, +.accordion__icon-plus { + .icon__group { + will-change: transform; + transform-origin: 50% 50%; + } +} + +.accordion__icon-arrow { + .icon__group { + > * { + transform-origin: 10px 14px; + } + } +} + +.accordion__icon-arrow-v2 { + .icon__group { + > * { + transform-origin: 50% 50%; + stroke-dasharray: 20; + transform: translateY(4px); + } + + > *:first-child { + stroke-dashoffset: 10.15; + } + + > *:last-child { + stroke-dashoffset: 10.15; + } + } +} + +.accordion__icon-plus { + .icon__group { + transform: rotate(-90deg); + + > * { + transform-origin: 50% 50%; + } + + > *:first-child { + transform: rotate(-90deg); + } + } +} + +.accordion__item--is-open > .accordion__header { + > .accordion__icon-arrow .icon__group { /* animated arrow icon */ + > *:first-child { + transform: translateY(-8px) rotate(-90deg); + } + + > *:last-child { + transform: translateY(-8px) rotate(90deg); + } + } + + > .accordion__icon-arrow-v2 .icon__group { /* animated arrow icon v2 */ + transform: rotate(-90deg); + + > *:first-child, *:last-child { + stroke-dashoffset: 0; + transform: translateY(0px); + } + } + + > .accordion__icon-plus .icon__group { /* animated plus icon */ + transform: rotate(0); + + > *:first-child { + transform: rotate(0); + } + } +} + +.accordion__panel { + display: none; + will-change: height; + transform: translateZ(0px); +} + +.accordion__item--is-open > .accordion__panel { + display: block; +} + +/* animations */ +.accordion[data-animation="on"] { + .accordion__item--is-open .accordion__panel > * { + animation: accordion-entry-animation .4s var(--ease-out); + } + + .accordion__icon-arrow, + .accordion__icon-arrow-v2, + .accordion__icon-plus { + .icon__group { + transition: transform .3s var(--ease-out); + + > * { + transition: transform .3s, stroke-dashoffset .3s; + transition-timing-function: var(--ease-out); + } + } + } +} + +@keyframes accordion-entry-animation { + from { + opacity: 0; + transform: translateY(-10px); + } + + to { + opacity: 1; + transform: translateY(0px); + } +} \ No newline at end of file diff --git a/assets/css/components/_1_customer-logos.scss b/assets/css/components/_1_customer-logos.scss new file mode 100644 index 0000000..500e3ca --- /dev/null +++ b/assets/css/components/_1_customer-logos.scss @@ -0,0 +1,15 @@ +@use '../base' as *; + +/* -------------------------------- + +File#: _1_customer-logos +Title: Customer Logos +Descr: A gallery of trusted companies +Usage: codyhouse.co/license + +-------------------------------- */ + +.customer-logo { + display: block; + fill: var(--color-contrast-low); // logo color +} \ No newline at end of file diff --git a/assets/css/components/_1_list.scss b/assets/css/components/_1_list.scss new file mode 100644 index 0000000..3090aae --- /dev/null +++ b/assets/css/components/_1_list.scss @@ -0,0 +1,156 @@ +@use '../base' as *; + +/* -------------------------------- + +File#: _1_list +Title: List +Descr: Custom list component +Usage: codyhouse.co/license + +-------------------------------- */ + +:root { + --list-space-y: 0.375em; // vertical gaps + --list-offset: 1em; // sublist horizontal offset + --list-line-height-multiplier: 1; // line-height multiplier +} + +.list, .text-component .list { + padding-left: 0; + list-style: none; + + ul, ol { + list-style: none; + margin: 0; // reset + 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); + } + + 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)); + } + + > li:last-child, ul > li:last-child, ol > li:last-child { + margin-bottom: 0; + } + + &:not(.list--border) > li:last-child, ul > li:last-child, ol > li:last-child { + padding-bottom: 0; + } +} + +/* #region (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)); + + ul, ol { + padding-left: 0; + } + + li { + padding-left: var(--list-offset); + } + + li::before { + display: inline-flex; + justify-content: center; + align-items: center; + + width: var(--list-bullet-size); + height: var(--list-bullet-size); + vertical-align: middle; + position: relative; + top: -0.1em; + left: calc(var(--list-bullet-margin-right) * -1); + margin-left: calc(var(--list-bullet-size) * -1); + } +} + +// unordered list +.list--ul, .text-component .list--ul { + --list-bullet-size: 7px; // dot width and height + --list-bullet-margin-right: 12px; // gap between bullet and content + + > li::before { // bullet + content: ''; + border-radius: 50%; + color: alpha(var(--color-contrast-higher), 0.1); // bullet color + background-color: currentColor; + } + + ul li::before { + background-color: transparent; + box-shadow: inset 0 0 0 2px currentColor; + } +} + +// ordered list +.list--ol, .text-component .list--ol { + --list-bullet-size: 26px; // ⚠️ use px or rem units - circle width and height + --list-bullet-margin-right: 6px; // ⚠️ use px or rem units - gap between circle and content + --list-bullet-font-size: 14px; // ⚠️ use px or rem units - bullet font size + counter-reset: list-items; + + > li { + counter-increment: list-items; + } + + ol { + counter-reset: list-items; + } + + > li::before { + content: counter(list-items); + font-size: var(--list-bullet-font-size, 14px); + background-color: alpha(var(--color-contrast-higher), 0.075); + color: var(--color-contrast-higher); + line-height: 1; + border-radius: 50%; + } + + ol > li::before { + background-color: transparent; + box-shadow: inset 0 0 0 2px alpha(var(--color-contrast-higher), 0.075); + } +} +/* #endregion */ + +/* #region (border) */ +.list--border, .text-component .list--border { // show border divider among list items + li:not(:last-child) { + border-bottom: 1px solid var(--color-contrast-lower); + } + + ul, ol { + border-top: 1px solid var(--color-contrast-lower); + } +} +/* #endregion */ + +/* #region (icons) */ +.list--icons, .text-component .list--icons { // use icons as bullet points + --list-bullet-size: 24px; + --list-bullet-margin-right: 8px; // gap between icon and text + --list-offset: calc(var(--list-bullet-size) + var(--list-bullet-margin-right)); + + ul, ol { + padding-left: var(--list-offset); + } +} + +.list__icon { + position: relative; + width: var(--list-bullet-size); + height: var(--list-bullet-size); + margin-right: var(--list-bullet-margin-right); + + &:not(.top-0) { + top: calc((1em * var(--body-line-height) * var(--list-line-height-multiplier) - var(--list-bullet-size)) / 2); + } +} + +/* #endregion */ \ No newline at end of file diff --git a/assets/css/components/_1_main-footer-v2.scss b/assets/css/components/_1_main-footer-v2.scss new file mode 100644 index 0000000..d4d90a0 --- /dev/null +++ b/assets/css/components/_1_main-footer-v2.scss @@ -0,0 +1,97 @@ +@use '../base' as *; + +/* -------------------------------- + +File#: _1_main-footer-v2 +Title: Main Footer v2 +Descr: Footer navigation template +Usage: codyhouse.co/license + +-------------------------------- */ + +.footer-v2 { + position: relative; + z-index: 1; +} + +.footer-v2__list { // ul + display: grid; + grid-template-columns: 1fr; // 1 column + gap: var(--space-lg); + + @include breakpoint(xs) { + grid-template-columns: repeat(2, 1fr); // 2 columns + } + + @include breakpoint(md) { + grid-template-columns: repeat(4, 1fr); // 4 columns + } +} + +.footer-v2__item { + display: grid; + gap: var(--space-sm); // links vertical spacing + align-content: start; + + @include breakpoint(md) { + gap: var(--space-xs); + } +} + +.footer-v2__item a { // nav link + color: var(--color-contrast-medium); + + &:hover { + color: var(--color-contrast-high); + } + + @include breakpoint(md) { + font-size: var(--text-sm); + } +} + +.footer-v2__socials { + display: flex; + justify-content: center; + margin-bottom: var(--space-sm); + + a { + text-decoration: none; + display: inline-block; + margin: 0 var(--space-xxxs); + color: var(--color-contrast-medium); // icons color + + &:hover { + color: var(--color-contrast-high); + } + + svg { + display: block; + width: 1em; + height: 1em; + color: inherit; + } + } +} + +.footer-v2__print { + font-size: var(--text-sm); + color: var(--color-contrast-medium); + text-align: center; + + p { + margin-bottom: var(--space-sm); + } + + a { + color: inherit; + + &:hover { + color: var(--color-contrast-high); + } + } + + @include breakpoint(md) { + font-size: var(--text-xs); + } +} \ No newline at end of file diff --git a/assets/css/components/_1_smooth-scrolling.scss b/assets/css/components/_1_smooth-scrolling.scss new file mode 100644 index 0000000..5085c8a --- /dev/null +++ b/assets/css/components/_1_smooth-scrolling.scss @@ -0,0 +1,15 @@ +@use '../base' as *; + +/* -------------------------------- + +File#: _1_smooth-scrolling +Title: Smooth Scrolling +Descr: Replace the default browser behaviour (jump) with a smooth scrolling transition +Usage: codyhouse.co/license + +-------------------------------- */ + +html { + // you can apply this to the container of your scrolling section + scroll-behavior: smooth; +} \ No newline at end of file diff --git a/assets/css/components/_1_tooltip.scss b/assets/css/components/_1_tooltip.scss new file mode 100644 index 0000000..9d75118 --- /dev/null +++ b/assets/css/components/_1_tooltip.scss @@ -0,0 +1,118 @@ +@use '../base' as *; + +/* -------------------------------- + +File#: _1_tooltip +Title: Tooltip +Descr: A popup displaying additional text information +Usage: codyhouse.co/license + +-------------------------------- */ + +:root { + --tooltip-triangle-size: 12px; +} + +.tooltip-trigger { /* style inline-text tooltip trigger */ + white-space: nowrap; + border-bottom: 1px dotted var(--color-contrast-high); + cursor: help; +} + +.tooltip { /* tooltip element - created using js */ + position: absolute; + z-index: var(--z-index-popover, 5); + + display: inline-block; + padding: var(--space-xxs) var(--space-xs); + border-radius: var(--radius-md); + max-width: 200px; + background-color: alpha(var(--color-contrast-higher), 0.98); + box-shadow: var(--shadow-md); + + color: var(--color-bg); + font-size: var(--text-sm); + line-height: 1.4; + @include fontSmooth; + + transition: opacity 0.2s, visibility 0.2s; + + a { + color: inherit; + text-decoration: underline; + } + + @supports (clip-path: inset(50%)) { + &::before { /* tooltip triangle */ + content: ''; + position: absolute; + background-color: inherit; + border: inherit; + width: var(--tooltip-triangle-size); + height: var(--tooltip-triangle-size); + 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-xxxs) var(--space-xxs); +} + +.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); + transform: translateX(var(--tooltip-triangle-translate)) rotate(-45deg); +} + +.tooltip--bottom::before { + top: calc(var(--tooltip-triangle-size) * -0.5); + 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); + transform: translateX(var(--tooltip-triangle-translate)) rotate(-135deg); +} + +.tooltip--right::before { + left: calc(var(--tooltip-triangle-size) * -0.5); + 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; +} \ No newline at end of file diff --git a/assets/css/components/_2_accordion-v2.scss b/assets/css/components/_2_accordion-v2.scss new file mode 100644 index 0000000..3c56c5e --- /dev/null +++ b/assets/css/components/_2_accordion-v2.scss @@ -0,0 +1,119 @@ +@use '../base' as *; +@use '_1_accordion.scss' as *; + +/* -------------------------------- + +File#: _2_accordion-v2 +Title: Accordion v2 +Descr: Stacked, expandable content sections +Usage: codyhouse.co/license + +-------------------------------- */ + +:root { + // icon + --accordion-v2-icon-size: 20px; + --accordion-v2-icon-stroke-width: 2px; +} + +.accordion-v2 {} + +.accordion-v2__item { + background-color: var(--color-bg-light); + box-shadow: var(--inner-glow-top), var(--shadow-sm); + border-radius: var(--radius-md); + transition: .3s; + + &:hover { + box-shadow: var(--inner-glow-top), var(--shadow-md); + } +} + +.accordion-v2__header { // button + width: 100%; + display: flex; + align-items: center; + justify-content: space-between; + text-align: left; + cursor: pointer; + + .icon { + --size: var(--accordion-v2-icon-size); + + .icon__group { + stroke-width: var(--accordion-v2-icon-stroke-width); + } + } +} + +.accordion-v2__icon-arrow { + .icon__group { + will-change: transform; + transform-origin: 50% 50%; + + > * { + transform-origin: 50% 50%; + stroke-dasharray: 20; + transform: translateY(4px); + } + + > *:first-child { + stroke-dashoffset: 10.15; + } + + > *:last-child { + stroke-dashoffset: 10.15; + } + } +} + +.accordion-v2__item--is-open > .accordion-v2__header { + > .accordion-v2__icon-arrow .icon__group { // animated arrow icon + transform: rotate(-90deg); + + > *:first-child, *:last-child { + stroke-dashoffset: 0; + transform: translateY(0px); + } + } +} + +.accordion-v2__panel { + display: none; + will-change: height; + transform: translateZ(0px); +} + +.accordion-v2__item--is-open > .accordion-v2__panel { + display: block; +} + +// animations +.accordion-v2[data-animation="on"] { + .accordion-v2__item--is-open .accordion-v2__panel > * { + animation: accordion-v2-entry-animation .4s var(--ease-out); + } + + .accordion-v2__icon-arrow { + .icon__group { + transition: transform .3s var(--ease-out); + + > * { + transition: transform .3s, stroke-dashoffset .3s; + transition-timing-function: var(--ease-out); + } + } + } +} + +@keyframes accordion-v2-entry-animation { + from { + opacity: 0; + transform: translateY(-10px); + } + + to { + opacity: 1; + transform: translateY(0px); + } +} \ No newline at end of file diff --git a/assets/css/components/_2_table-of-contents.scss b/assets/css/components/_2_table-of-contents.scss new file mode 100644 index 0000000..0c60710 --- /dev/null +++ b/assets/css/components/_2_table-of-contents.scss @@ -0,0 +1,251 @@ +@use '../base' as *; +@use '_1_smooth-scrolling.scss' as *; + +/* -------------------------------- + +File#: _2_table-of-contents +Title: Table of Contents +Descr: A navigation with a list of links to the main sections of the page +Usage: codyhouse.co/license + +-------------------------------- */ +:root { + --toc-border-width: 1px; /* static version only */ +} + +/* #region (style affecting collapsed + static versions) 👇 */ +.toc { + @include spaceUnit(1rem); /* use rem units for spacing */ +} + +.toc__list { + position: relative; + + .toc__list .toc__link { + padding-left: calc(var(--space-sm) * 2); /* offset sub nav */ + } +} + +.toc__link, +.toc__label { + padding: var(--space-xxxs) var(--space-sm); +} + +.toc__link { + position: relative; + color: var(--color-contrast-medium); + text-decoration: none; + + &::before { /* left mark */ + content: ''; + width: var(--toc-border-width); + height: 100%; + position: absolute; + left: 0; + top: 0; + } + + &:hover { + color: var(--color-contrast-high); + } +} + +.toc__link--selected { + color: var(--color-primary); + + &: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; + + > * { + display: inline-block; + transition: opacity .4s, transform .4s var(--ease-out); + } + + > *:last-child { + position: absolute; + top: 0; + left: 0; + opacity: 0; + pointer-events: none; + transform: translateY(-10px); + } +} + +.toc__icon-arrow { /* arrow icon */ + .icon__group { + will-change: transform; + transform-origin: 8px 8px; + transition: transform .3s var(--ease-out); + + > * { + transform-origin: 8px 8px; + stroke-dasharray: 17; + transform: translateY(3px); + transition: transform .3s, stroke-dashoffset .3s; + transition-timing-function: var(--ease-out); + } + + > *:first-child { + stroke-dashoffset: 10; + } + + > *:last-child { + stroke-dashoffset: 10; + } + } +} + +.toc-content__target { + scroll-margin-top: var(--space-xxxxs); +} +/* #endregion */ + +/* #region (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: .3s; + + &:hover { + box-shadow: var(--inner-glow), var(--shadow-md); + } + + .toc__nav { /* navigation */ + display: none; + margin: var(--space-xxs) 0; + } + + .toc__list { + padding-bottom: var(--space-xs); + } + + .toc__label { + display: none; + } + + .toc__link { + display: flex; + } + + &.toc--expanded { + .toc__control-text { + > *:first-child { + transform: translateY(10px); + opacity: 0; + pointer-events: none; + } + + > *:last-child { + opacity: 1; + pointer-events: auto; + transform: translateY(0); + } + } + + .toc__nav { + display: block; + animation: toc-entry-animation .4s var(--ease-out); + } + + .toc__icon-arrow .icon__group { /* animate arrow icon */ + transform: rotate(-90deg); + + > *:first-child, *:last-child { + stroke-dashoffset: 0; + transform: translateY(0px); + } + } + } +} +/* #endregion */ + +/* #region (static version only - desktop 👇) */ +.toc--static { + box-shadow: inset var(--toc-border-width) 0 0 var(--color-contrast-lower); /* left border */ + + &[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__label { + font-size: var(--text-xs); + } + + .toc__link { + display: inline-flex; + font-size: var(--text-sm); + } + + .toc__link--selected::before { + background-color: var(--color-primary); + } + + .toc__control { /* control - static version only */ + display: none; + } +} + +.toc-content--toc-static { + *:target { + animation: toc-target 2s; /* highlight section on target */ + } +} +/* #endregion */ + +@keyframes toc-target { + 0%, 50% { + outline: 2px solid alpha(var(--color-primary), 0.5); + } + + 100% { + outline: 2px solid alpha(var(--color-primary), 0); + } +} + +@keyframes toc-entry-animation { + from { + opacity: 0; + transform: translateY(-10px); + } + + to { + opacity: 1; + transform: translateY(0px); + } +} + +/* 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'; +} + +@each $breakpoint, $value in $breakpoints { + @include breakpoint(#{$breakpoint}) { + .toc--static\@#{$breakpoint}::before { + content: 'static'; + } + } +} \ No newline at end of file diff --git a/assets/css/components/_3_faq-v3.scss b/assets/css/components/_3_faq-v3.scss new file mode 100644 index 0000000..ac87449 --- /dev/null +++ b/assets/css/components/_3_faq-v3.scss @@ -0,0 +1,14 @@ +@use '../base' as *; +@use '_1_smooth-scrolling.scss' as *; +@use '_2_table-of-contents.scss' as *; +@use '_1_accordion.scss' as *; +@use '_2_accordion-v2.scss' as *; + +/* -------------------------------- + +File#: _3_faq-v3 +Title: FAQ v3 +Descr: Q&A template based on the table of contents and accordion components +Usage: codyhouse.co/license + +-------------------------------- */ \ No newline at end of file diff --git a/assets/css/custom-style/_buttons.scss b/assets/css/custom-style/_buttons.scss new file mode 100644 index 0000000..8dadf4f --- /dev/null +++ b/assets/css/custom-style/_buttons.scss @@ -0,0 +1,105 @@ +@use '../base' as *; + +// -------------------------------- + +// (START) Global editor code https://codyhouse.co/ds/globals/buttons + +// -------------------------------- + +:root { + --btn-font-size: 1em; + --btn-padding-x: var(--space-sm); + --btn-padding-y: var(--space-xxs); + --btn-radius: var(--radius-md); +} + +.btn { + background: var(--color-bg-dark); + color: var(--color-contrast-higher); + cursor: pointer; + text-decoration: none; + line-height: 1.2; + @include fontSmooth; + transition: all 0.2s ease; + will-change: transform; + + &:focus { + box-shadow: 0px 0px 0px 2px var(--color-bg), 0px 0px 0px 4px alpha(var(--color-contrast-higher), 0.15); + outline: none; + } + + &:active { + transform: translateY(2px); + } +} + +// themes +.btn--primary { + background: var(--color-primary); + color: var(--color-white); + box-shadow: inset 0px 1px 0px alpha(var(--color-white), 0.15), 0px 1px 3px alpha(var(--color-primary-darker), 0.25), 0px 2px 6px alpha(var(--color-primary-darker), 0.1), 0px 6px 10px -2px alpha(var(--color-primary-darker), 0.25); + + &:hover { + background: var(--color-primary-light); + box-shadow: inset 0px 1px 0px alpha(var(--color-white), 0.15), 0px 1px 2px alpha(var(--color-primary-darker), 0.25), 0px 1px 4px alpha(var(--color-primary-darker), 0.1), 0px 3px 6px -2px alpha(var(--color-primary-darker), 0.25); + } + + &:focus { + box-shadow: inset 0px 1px 0px alpha(var(--color-white), 0.15), 0px 1px 2px alpha(var(--color-primary-darker), 0.25), 0px 1px 4px alpha(var(--color-primary-darker), 0.1), 0px 3px 6px -2px alpha(var(--color-primary-darker), 0.25), 0px 0px 0px 2px var(--color-bg), 0px 0px 0px 4px var(--color-primary); + } +} + +.btn--subtle { + background: var(--color-bg-lighter); + color: var(--color-contrast-higher); + box-shadow: inset 0px 1px 0px alpha(var(--color-white), 0.1), 0px 0px 0px 1px alpha(var(--color-black), 0.02), 0px 1px 3px -1px alpha(var(--color-black), 0.2), 0px 3px 6px alpha(var(--color-black), 0.12); + + &:hover { + background: var(--color-bg-light); + box-shadow: inset 0px 1px 0px alpha(var(--color-white), 0.1), 0px 0px 0px 1px alpha(var(--color-black), 0.02), 0px 1px 2px alpha(var(--color-black), 0.12), 0px 1px 3px -1px alpha(var(--color-black), 0.2); + } + + &:focus { + box-shadow: inset 0px 1px 0px alpha(var(--color-white), 0.1), 0px 0px 0px 1px alpha(var(--color-black), 0.02), 0px 1px 3px -1px alpha(var(--color-black), 0.2), 0px 3px 6px alpha(var(--color-black), 0.12), 0px 0px 0px 2px var(--color-bg), 0px 0px 0px 4px var(--color-contrast-high); + } +} + +.btn--accent { + background: var(--color-quinary); + color: var(--color-white); + box-shadow: inset 0px 1px 0px alpha(var(--color-white), 0.15), 0px 1px 3px alpha(var(--color-accent-darker), 0.25), 0px 2px 6px alpha(var(--color-accent-darker), 0.1), 0px 6px 10px -2px alpha(var(--color-accent-darker), 0.25); + + &:hover { + background: var(--color-accent-light); + box-shadow: inset 0px 1px 0px alpha(var(--color-white), 0.15), 0px 1px 2px alpha(var(--color-accent-darker), 0.25), 0px 1px 4px alpha(var(--color-accent-darker), 0.1), 0px 3px 6px -2px alpha(var(--color-accent-darker), 0.1); + } + + &:focus { + box-shadow: inset 0px 1px 0px alpha(var(--color-white), 0.15), 0px 1px 2px alpha(var(--color-accent-darker), 0.25), 0px 1px 4px alpha(var(--color-accent-darker), 0.1), 0px 3px 6px -2px alpha(var(--color-accent-darker), 0.1), 0px 0px 0px 2px var(--color-bg), 0px 0px 0px 4px var(--color-accent); + } +} + +// feedback +.btn--disabled, .btn[disabled], .btn[readonly] { + opacity: 0.6; + cursor: not-allowed; +} + +// size +.btn--sm { + font-size: 0.8em; +} + +.btn--md { + font-size: 1.2em; +} + +.btn--lg { + font-size: 1.4em; +} + +// -------------------------------- + +// (END) Global editor code + +// -------------------------------- \ No newline at end of file diff --git a/assets/css/custom-style/_colors.scss b/assets/css/custom-style/_colors.scss new file mode 100644 index 0000000..46d4378 --- /dev/null +++ b/assets/css/custom-style/_colors.scss @@ -0,0 +1,261 @@ +@use '../base' as *; + +// -------------------------------- + +// (START) Global editor code https://codyhouse.co/ds/globals/colors + +// -------------------------------- + +:root, [data-theme="default"] { + // main + @include defineColorHSL(--color-primary-darker, 0, 75%, 40%); + @include defineColorHSL(--color-primary-dark, 0, 75%, 46%); + @include defineColorHSL(--color-primary, 0, 75%, 52%); + @include defineColorHSL(--color-primary-light, 0, 75%, 58%); + @include defineColorHSL(--color-primary-lighter, 0, 75%, 64%); + + @include defineColorHSL(--color-accent-darker, 23, 90%, 43%); + @include defineColorHSL(--color-accent-dark, 23, 90%, 49%); + @include defineColorHSL(--color-accent, 23, 90%, 55%); + @include defineColorHSL(--color-accent-light, 23, 90%, 61%); + @include defineColorHSL(--color-accent-lighter, 23, 90%, 67%); + + @include defineColorHSL(--color-secondary-darker, 48, 94%, 42%); + @include defineColorHSL(--color-secondary-dark, 48, 94%, 48%); + @include defineColorHSL(--color-secondary, 48, 94%, 54%); + @include defineColorHSL(--color-secondary-light, 48, 94%, 60%); + @include defineColorHSL(--color-secondary-lighter, 48, 94%, 66%); + + @include defineColorHSL(--color-tertiary-darker, 94, 45%, 36%); + @include defineColorHSL(--color-tertiary-dark, 94, 45%, 42%); + @include defineColorHSL(--color-tertiary, 94, 45%, 48%); + @include defineColorHSL(--color-tertiary-light, 94, 45%, 54%); + @include defineColorHSL(--color-tertiary-lighter, 94, 45%, 60%); + + @include defineColorHSL(--color-quaternary-darker, 0, 75%, 40%); + @include defineColorHSL(--color-quaternary-dark, 0, 75%, 46%); + @include defineColorHSL(--color-quaternary, 0, 75%, 52%); + @include defineColorHSL(--color-quaternary-light, 0, 75%, 58%); + @include defineColorHSL(--color-quaternary-lighter, 0, 75%, 64%); + + @include defineColorHSL(--color-quinary-darker, 157, 100%, 13%); + @include defineColorHSL(--color-quinary-dark, 157, 100%, 19%); + @include defineColorHSL(--color-quinary, 157, 100%, 25%); + @include defineColorHSL(--color-quinary-light, 157, 100%, 31%); + @include defineColorHSL(--color-quinary-lighter, 157, 100%, 37%); + + @include defineColorHSL(--color-black, 0, 0%, 16%); + @include defineColorHSL(--color-black-light, 0, 0%, 26%); + @include defineColorHSL(--color-black-lighter, 0, 0%, 36%); + @include defineColorHSL(--color-white, 0, 0%, 100%); + @include defineColorHSL(--color-white-dark, 0, 0%, 90%); + @include defineColorHSL(--color-white-darker, 0, 0%, 80%); + + // feedback + @include defineColorHSL(--color-warning-darker, 35, 79%, 48%); + @include defineColorHSL(--color-warning-dark, 35, 79%, 56%); + @include defineColorHSL(--color-warning, 35, 79%, 66%); + @include defineColorHSL(--color-warning-light, 35, 79%, 74%); + @include defineColorHSL(--color-warning-lighter, 35, 79%, 82%); + + @include defineColorHSL(--color-success-darker, 170, 78%, 26%); + @include defineColorHSL(--color-success-dark, 170, 78%, 31%); + @include defineColorHSL(--color-success, 170, 78%, 36%); + @include defineColorHSL(--color-success-light, 170, 78%, 42%); + @include defineColorHSL(--color-success-lighter, 170, 78%, 47%); + + @include defineColorHSL(--color-error-darker, 342, 89%, 38%); + @include defineColorHSL(--color-error-dark, 342, 89%, 43%); + @include defineColorHSL(--color-error, 342, 89%, 48%); + @include defineColorHSL(--color-error-light, 342, 89%, 56%); + @include defineColorHSL(--color-error-lighter, 342, 89%, 62%); + + // background + @include defineColorHSL(--color-bg-darker, 0, 0%, 91%); + @include defineColorHSL(--color-bg-dark, 0, 0%, 95%); + @include defineColorHSL(--color-bg, 0, 0%, 100%); + @include defineColorHSL(--color-bg-light, 0, 0%, 100%); + @include defineColorHSL(--color-bg-lighter, 0, 0%, 100%); + + // color contrasts + @include defineColorHSL(--color-contrast-lower, 0, 0%, 86%); + @include defineColorHSL(--color-contrast-low, 0, 0%, 68%); + @include defineColorHSL(--color-contrast-medium, 0, 0%, 52%); + @include defineColorHSL(--color-contrast-high, 0, 0%, 29%); + @include defineColorHSL(--color-contrast-higher, 0, 0%, 16%); + + // gradients + @include defineColorHSL(--gradient-primary-stop-1, 5, 84%, 69%); + @include defineColorHSL(--gradient-primary-stop-2, 45, 93%, 82%); + @include defineColorHSL(--gradient-secondary-stop-1, 7, 100%, 92%); + @include defineColorHSL(--gradient-secondary-stop-2, 19, 100%, 84%); + @include defineColorHSL(--gradient-tertiary-stop-1, 140, 26%, 86%); + @include defineColorHSL(--gradient-tertiary-stop-2, 144, 26%, 66%); +} + +[data-theme="dark"] { + // main + @include defineColorHSL(--color-primary-darker, 250, 100%, 60%); + @include defineColorHSL(--color-primary-dark, 250, 100%, 64%); + @include defineColorHSL(--color-primary, 250, 100%, 69%); + @include defineColorHSL(--color-primary-light, 250, 100%, 72%); + @include defineColorHSL(--color-primary-lighter, 250, 100%, 76%); + + @include defineColorHSL(--color-accent-darker, 342, 92%, 41%); + @include defineColorHSL(--color-accent-dark, 342, 92%, 47%); + @include defineColorHSL(--color-accent, 342, 92%, 54%); + @include defineColorHSL(--color-accent-light, 342, 92%, 60%); + @include defineColorHSL(--color-accent-lighter, 342, 92%, 65%); + + @include defineColorHSL(--color-secondary-darker, 0, 75%, 40%); + @include defineColorHSL(--color-secondary-dark, 0, 75%, 46%); + @include defineColorHSL(--color-secondary, 0, 75%, 52%); + @include defineColorHSL(--color-secondary-light, 0, 75%, 58%); + @include defineColorHSL(--color-secondary-lighter, 0, 75%, 64%); + + @include defineColorHSL(--color-tertiary-darker, 0, 75%, 40%); + @include defineColorHSL(--color-tertiary-dark, 0, 75%, 46%); + @include defineColorHSL(--color-tertiary, 0, 75%, 52%); + @include defineColorHSL(--color-tertiary-light, 0, 75%, 58%); + @include defineColorHSL(--color-tertiary-lighter, 0, 75%, 64%); + + @include defineColorHSL(--color-quaternary-darker, 0, 75%, 40%); + @include defineColorHSL(--color-quaternary-dark, 0, 75%, 46%); + @include defineColorHSL(--color-quaternary, 0, 75%, 52%); + @include defineColorHSL(--color-quaternary-light, 0, 75%, 58%); + @include defineColorHSL(--color-quaternary-lighter, 0, 75%, 64%); + + @include defineColorHSL(--color-quinary-darker, 0, 75%, 40%); + @include defineColorHSL(--color-quinary-dark, 0, 75%, 46%); + @include defineColorHSL(--color-quinary, 0, 75%, 52%); + @include defineColorHSL(--color-quinary-light, 0, 75%, 58%); + @include defineColorHSL(--color-quinary-lighter, 0, 75%, 64%); + + @include defineColorHSL(--color-black, 230, 13%, 9%); + @include defineColorHSL(--color-white, 0, 0%, 100%); + + // feedback + @include defineColorHSL(--color-warning-darker, 35, 79%, 48%); + @include defineColorHSL(--color-warning-dark, 35, 79%, 56%); + @include defineColorHSL(--color-warning, 35, 79%, 66%); + @include defineColorHSL(--color-warning-light, 35, 79%, 74%); + @include defineColorHSL(--color-warning-lighter, 35, 79%, 82%); + + @include defineColorHSL(--color-success-darker, 170, 78%, 26%); + @include defineColorHSL(--color-success-dark, 170, 78%, 31%); + @include defineColorHSL(--color-success, 170, 78%, 36%); + @include defineColorHSL(--color-success-light, 170, 78%, 42%); + @include defineColorHSL(--color-success-lighter, 170, 78%, 47%); + + @include defineColorHSL(--color-error-darker, 342, 92%, 41%); + @include defineColorHSL(--color-error-dark, 342, 92%, 47%); + @include defineColorHSL(--color-error, 342, 92%, 54%); + @include defineColorHSL(--color-error-light, 342, 92%, 60%); + @include defineColorHSL(--color-error-lighter, 342, 92%, 65%); + + // background + @include defineColorHSL(--color-bg-darker, 232, 7%, 8%); + @include defineColorHSL(--color-bg-dark, 233, 8%, 11%); + @include defineColorHSL(--color-bg, 232, 11%, 15%); + @include defineColorHSL(--color-bg-light, 233, 8%, 19%); + @include defineColorHSL(--color-bg-lighter, 232, 7%, 22%); + + // color contrasts + @include defineColorHSL(--color-contrast-lower, 240, 6%, 26%); + @include defineColorHSL(--color-contrast-low, 240, 3%, 41%); + @include defineColorHSL(--color-contrast-medium, 213, 3%, 57%); + @include defineColorHSL(--color-contrast-high, 240, 5%, 82%); + @include defineColorHSL(--color-contrast-higher, 240, 100%, 99%); + + // gradients + @include defineColorHSL(--gradient-primary-stop-1, 250, 100%, 69%); + @include defineColorHSL(--gradient-primary-stop-2, 300, 100%, 69%); + @include defineColorHSL(--gradient-secondary-stop-1, 250, 100%, 69%); + @include defineColorHSL(--gradient-secondary-stop-2, 300, 100%, 69%); + @include defineColorHSL(--gradient-tertiary-stop-1, 250, 100%, 69%); + @include defineColorHSL(--gradient-tertiary-stop-2, 300, 100%, 69%); +} + +// background color +.bg-secondary-darker { background-color: alpha(var(--color-secondary-darker), var(--bg-o, 1)); } +.bg-secondary-dark { background-color: alpha(var(--color-secondary-dark), var(--bg-o, 1)); } +.bg-secondary { background-color: alpha(var(--color-secondary), var(--bg-o, 1)); } +.bg-secondary-light { background-color: alpha(var(--color-secondary-light), var(--bg-o, 1)); } +.bg-secondary-lighter { background-color: alpha(var(--color-secondary-lighter), var(--bg-o, 1)); } +.bg-tertiary-darker { background-color: alpha(var(--color-tertiary-darker), var(--bg-o, 1)); } +.bg-tertiary-dark { background-color: alpha(var(--color-tertiary-dark), var(--bg-o, 1)); } +.bg-tertiary { background-color: alpha(var(--color-tertiary), var(--bg-o, 1)); } +.bg-tertiary-light { background-color: alpha(var(--color-tertiary-light), var(--bg-o, 1)); } +.bg-tertiary-lighter { background-color: alpha(var(--color-tertiary-lighter), var(--bg-o, 1)); } +.bg-quaternary-darker { background-color: alpha(var(--color-quaternary-darker), var(--bg-o, 1)); } +.bg-quaternary-dark { background-color: alpha(var(--color-quaternary-dark), var(--bg-o, 1)); } +.bg-quaternary { background-color: alpha(var(--color-quaternary), var(--bg-o, 1)); } +.bg-quaternary-light { background-color: alpha(var(--color-quaternary-light), var(--bg-o, 1)); } +.bg-quaternary-lighter { background-color: alpha(var(--color-quaternary-lighter), var(--bg-o, 1)); } +.bg-quinary-darker { background-color: alpha(var(--color-quinary-darker), var(--bg-o, 1)); } +.bg-quinary-dark { background-color: alpha(var(--color-quinary-dark), var(--bg-o, 1)); } +.bg-quinary { background-color: alpha(var(--color-quinary), var(--bg-o, 1)); } +.bg-quinary-light { background-color: alpha(var(--color-quinary-light), var(--bg-o, 1)); } +.bg-quinary-lighter { background-color: alpha(var(--color-quinary-lighter), var(--bg-o, 1)); } + +// background gradient +.bg-gradient-primary { background-image: radial-gradient(var(--gradient-primary-stop-1), var(--gradient-primary-stop-2)); } +.bg-gradient-primary-top { background-image: linear-gradient(0deg, var(--gradient-primary-stop-1), var(--gradient-primary-stop-2)); } +.bg-gradient-primary-right { background-image: linear-gradient(90deg, var(--gradient-primary-stop-1), var(--gradient-primary-stop-2)); } +.bg-gradient-primary-bottom { background-image: linear-gradient(180deg, var(--gradient-primary-stop-1), var(--gradient-primary-stop-2)); } +.bg-gradient-primary-left { background-image: linear-gradient(270deg, var(--gradient-primary-stop-1), var(--gradient-primary-stop-2)); } +.bg-gradient-secondary { background-image: radial-gradient(var(--gradient-secondary-stop-1), var(--gradient-secondary-stop-2)); } +.bg-gradient-secondary-top { background-image: linear-gradient(0deg, var(--gradient-secondary-stop-1), var(--gradient-secondary-stop-2)); } +.bg-gradient-secondary-right { background-image: linear-gradient(90deg, var(--gradient-secondary-stop-1), var(--gradient-secondary-stop-2)); } +.bg-gradient-secondary-bottom { background-image: linear-gradient(180deg, var(--gradient-secondary-stop-1), var(--gradient-secondary-stop-2)); } +.bg-gradient-secondary-left { background-image: linear-gradient(270deg, var(--gradient-secondary-stop-1), var(--gradient-secondary-stop-2)); } +.bg-gradient-tertiary { background-image: radial-gradient(var(--gradient-tertiary-stop-1), var(--gradient-tertiary-stop-2)); } +.bg-gradient-tertiary-top { background-image: linear-gradient(0deg, var(--gradient-tertiary-stop-1), var(--gradient-tertiary-stop-2)); } +.bg-gradient-tertiary-right { background-image: linear-gradient(90deg, var(--gradient-tertiary-stop-1), var(--gradient-tertiary-stop-2)); } +.bg-gradient-tertiary-bottom { background-image: linear-gradient(180deg, var(--gradient-tertiary-stop-1), var(--gradient-tertiary-stop-2)); } +.bg-gradient-tertiary-left { background-image: linear-gradient(270deg, var(--gradient-tertiary-stop-1), var(--gradient-tertiary-stop-2)); } + +// border gradient +.border-gradient-primary { border-image: radial-gradient(var(--gradient-primary-stop-1), var(--gradient-primary-stop-2)) 1; } +.border-gradient-primary-top { border-image: linear-gradient(0deg, var(--gradient-primary-stop-1), var(--gradient-primary-stop-2)) 1; } +.border-gradient-primary-right { border-image: linear-gradient(90deg, var(--gradient-primary-stop-1), var(--gradient-primary-stop-2)) 1; } +.border-gradient-primary-bottom { border-image: linear-gradient(180deg, var(--gradient-primary-stop-1), var(--gradient-primary-stop-2)) 1; } +.border-gradient-primary-left { border-image: linear-gradient(270deg, var(--gradient-primary-stop-1), var(--gradient-primary-stop-2)) 1; } +.border-gradient-secondary { border-image: radial-gradient(var(--gradient-secondary-stop-1), var(--gradient-secondary-stop-2)) 1; } +.border-gradient-secondary-top { border-image: linear-gradient(0deg, var(--gradient-secondary-stop-1), var(--gradient-secondary-stop-2)) 1; } +.border-gradient-secondary-right { border-image: linear-gradient(90deg, var(--gradient-secondary-stop-1), var(--gradient-secondary-stop-2)) 1; } +.border-gradient-secondary-bottom { border-image: linear-gradient(180deg, var(--gradient-secondary-stop-1), var(--gradient-secondary-stop-2)) 1; } +.border-gradient-secondary-left { border-image: linear-gradient(270deg, var(--gradient-secondary-stop-1), var(--gradient-secondary-stop-2)) 1; } +.border-gradient-tertiary { border-image: radial-gradient(var(--gradient-tertiary-stop-1), var(--gradient-tertiary-stop-2)) 1; } +.border-gradient-tertiary-top { border-image: linear-gradient(0deg, var(--gradient-tertiary-stop-1), var(--gradient-tertiary-stop-2)) 1; } +.border-gradient-tertiary-right { border-image: linear-gradient(90deg, var(--gradient-tertiary-stop-1), var(--gradient-tertiary-stop-2)) 1; } +.border-gradient-tertiary-bottom { border-image: linear-gradient(180deg, var(--gradient-tertiary-stop-1), var(--gradient-tertiary-stop-2)) 1; } +.border-gradient-tertiary-left { border-image: linear-gradient(270deg, var(--gradient-tertiary-stop-1), var(--gradient-tertiary-stop-2)) 1; } + +// border color +.border-secondary-darker { border-color: alpha(var(--color-secondary-darker), var(--bg-o, 1)); } +.border-secondary-dark { border-color: alpha(var(--color-secondary-dark), var(--bg-o, 1)); } +.border-secondary { border-color: alpha(var(--color-secondary), var(--bg-o, 1)); } +.border-secondary-light { border-color: alpha(var(--color-secondary-light), var(--bg-o, 1)); } +.border-secondary-lighter { border-color: alpha(var(--color-secondary-lighter), var(--bg-o, 1)); } +.border-tertiary-darker { border-color: alpha(var(--color-tertiary-darker), var(--bg-o, 1)); } +.border-tertiary-dark { border-color: alpha(var(--color-tertiary-dark), var(--bg-o, 1)); } +.border-tertiary { border-color: alpha(var(--color-tertiary), var(--bg-o, 1)); } +.border-tertiary-light { border-color: alpha(var(--color-tertiary-light), var(--bg-o, 1)); } +.border-tertiary-lighter { border-color: alpha(var(--color-tertiary-lighter), var(--bg-o, 1)); } +.border-quaternary-darker { border-color: alpha(var(--color-quaternary-darker), var(--bg-o, 1)); } +.border-quaternary-dark { border-color: alpha(var(--color-quaternary-dark), var(--bg-o, 1)); } +.border-quaternary { border-color: alpha(var(--color-quaternary), var(--bg-o, 1)); } +.border-quaternary-light { border-color: alpha(var(--color-quaternary-light), var(--bg-o, 1)); } +.border-quaternary-lighter { border-color: alpha(var(--color-quaternary-lighter), var(--bg-o, 1)); } +.border-quinary-darker { border-color: alpha(var(--color-quinary-darker), var(--bg-o, 1)); } +.border-quinary-dark { border-color: alpha(var(--color-quinary-dark), var(--bg-o, 1)); } +.border-quinary { border-color: alpha(var(--color-quinary), var(--bg-o, 1)); } +.border-quinary-light { border-color: alpha(var(--color-quinary-light), var(--bg-o, 1)); } +.border-quinary-lighter { border-color: alpha(var(--color-quinary-lighter), var(--bg-o, 1)); } + +// -------------------------------- + +// (END) Global editor code + +// -------------------------------- \ No newline at end of file diff --git a/assets/css/custom-style/_forms.scss b/assets/css/custom-style/_forms.scss new file mode 100644 index 0000000..ec69b27 --- /dev/null +++ b/assets/css/custom-style/_forms.scss @@ -0,0 +1,55 @@ +@use '../base' as *; + +// -------------------------------- + +// (START) Global editor code https://codyhouse.co/ds/globals/forms + +// -------------------------------- + +:root { + --form-control-font-size: 1em; + --form-control-padding-x: var(--space-xs); + --form-control-padding-y: var(--space-xxs); + --form-control-radius: var(--radius-md); +} + +.form-control { + background: var(--color-bg-dark); + line-height: 1.2; + box-shadow: inset 0px 0px 0px 1px var(--color-contrast-lower); + transition: all 0.2s ease; + + &::placeholder { + opacity: 1; + color: var(--color-contrast-low); + } + + &:focus, &:focus-within { + background: var(--color-bg); + box-shadow: inset 0px 0px 0px 1px alpha(var(--color-contrast-lower), 0), 0px 0px 0px 2px var(--color-primary), var(--shadow-sm); + outline: none; + } +} + +.form-control--disabled, .form-control[disabled], .form-control[readonly] { + opacity: 0.5; + cursor: not-allowed; +} + +.form-control[aria-invalid="true"], .form-control.form-control--error { + box-shadow: inset 0px 0px 0px 1px alpha(var(--color-contrast-lower), 0), 0px 0px 0px 2px var(--color-error); + + &:focus, &:focus-within { + box-shadow: inset 0px 0px 0px 1px alpha(var(--color-contrast-lower), 0), 0px 0px 0px 2px var(--color-error), var(--shadow-sm); + } +} + +.form-legend {} + +.form-label {} + +// -------------------------------- + +// (END) Global editor code + +// -------------------------------- \ No newline at end of file diff --git a/assets/css/custom-style/_icons.scss b/assets/css/custom-style/_icons.scss new file mode 100644 index 0000000..a9fcb46 --- /dev/null +++ b/assets/css/custom-style/_icons.scss @@ -0,0 +1,19 @@ +@use '../base' as *; + +:root { + // size - 👇 uncomment to modify default icon sizes + // --icon-xxxs: 8px; + // --icon-xxs: 12px; + // --icon-xs: 16px; + // --icon-sm: 24px; + // --icon-md: 32px; + // --icon-lg: 48px; + // --icon-xl: 64px; + // --icon-xxl: 96px; + // --icon-xxxl: 128px; +} + +.icon { + // 👇 include the font-family declaration here if you are using an icon font + // font-family: 'fontName'; +} \ No newline at end of file diff --git a/assets/css/custom-style/_shared-styles.scss b/assets/css/custom-style/_shared-styles.scss new file mode 100644 index 0000000..2e272d4 --- /dev/null +++ b/assets/css/custom-style/_shared-styles.scss @@ -0,0 +1,82 @@ +@use '../base' as *; + +:root { + // radius + --radius: 0.375em; // border radius base size + // 👇 uncomment to modify default radius values + // --radius-sm: calc(var(--radius)/2); + // --radius-md: var(--radius); + // --radius-lg: calc(var(--radius)*2); + + // box shadow - 👇 uncomment to modify default shadow values + // --shadow-ring: 0 0 0 1px hsla(0, 0%, 0%, 0.05); + // --shadow-xs: 0 0 0 1px hsla(0, 0%, 0%, 0.02), + // 0 1px 3px -1px hsla(0, 0%, 0%, 0.2); + // --shadow-sm: 0 0.3px 0.4px hsla(0, 0%, 0%, 0.02), + // 0 0.9px 1.5px hsla(0, 0%, 0%, 0.045), + // 0 3.5px 6px hsla(0, 0%, 0%, 0.09); + // --shadow-md: 0 0.9px 1.25px hsla(0, 0%, 0%, 0.025), + // 0 3px 5px hsla(0, 0%, 0%, 0.05), + // 0 12px 20px hsla(0, 0%, 0%, 0.09); + // --shadow-lg: 0 1.2px 1.9px -1px hsla(0, 0%, 0%, 0.01), + // 0 3px 5px -1px hsla(0, 0%, 0%, 0.015), + // 0 8px 15px -1px hsla(0, 0%, 0%, 0.05), + // 0 28px 40px -1px hsla(0, 0%, 0%, 0.1); + // --shadow-xl: 0 1.5px 2.1px -6px hsla(0, 0%, 0%, 0.009), + // 0 3.6px 5.2px -6px hsla(0, 0%, 0%, 0.0115), + // 0 7.3px 10.6px -6px hsla(0, 0%, 0%, 0.0125), + // 0 16.2px 21.9px -6px hsla(0, 0%, 0%, 0.025), + // 0 46px 60px -6px hsla(0, 0%, 0%, 0.15); + // --inner-glow: inset 0 0 0.5px 1px hsla(0, 0%, 100%, 0.075); + // --inner-glow-top: inset 0 1px 0.5px hsla(0, 0%, 100%, 0.075); +} + +// -------------------------------- + +// (START) Global editor code https://codyhouse.co/ds/globals/shared-styles + +// -------------------------------- + +.hover\:reduce-opacity { + opacity: 1; + transition: all 0.3s ease; + + &:hover { + opacity: 0.8; + } +} + +.hover\:scale { + transition: transform 0.3s var(--ease-out-back); + + &:hover { + transform: scale(1.1); + } +} + +.hover\:elevate { + box-shadow: var(--shadow-sm); + transition: all 0.3s ease; + + &:hover { + box-shadow: var(--shadow-md); + } +} + +// text styles +.link-subtle { + color: inherit; + cursor: pointer; + text-decoration: none; + transition: all 0.2s ease; + + &:hover { + color: var(--color-primary); + } +} + +// -------------------------------- + +// (END) Global editor code + +// -------------------------------- \ No newline at end of file diff --git a/assets/css/custom-style/_spacing.scss b/assets/css/custom-style/_spacing.scss new file mode 100644 index 0000000..5f24b17 --- /dev/null +++ b/assets/css/custom-style/_spacing.scss @@ -0,0 +1,63 @@ +@use '../base' as *; + +// -------------------------------- + +// (START) Global editor code https://codyhouse.co/ds/globals/spacing + +// -------------------------------- + +:root { + --space-unit: 1.1rem; +} + +:root, * { + --space-xxxxs: calc(0.125 * var(--space-unit)); + --space-xxxs: calc(0.25 * var(--space-unit)); + --space-xxs: calc(0.375 * var(--space-unit)); + --space-xs: calc(0.5 * var(--space-unit)); + --space-sm: calc(0.75 * var(--space-unit)); + --space-md: calc(1.5 * var(--space-unit)); + --space-lg: calc(2 * var(--space-unit)); + --space-xl: calc(3.25 * var(--space-unit)); + --space-xxl: calc(5.25 * var(--space-unit)); + --space-xxxl: calc(8.5 * var(--space-unit)); + --space-xxxxl: calc(13.75 * var(--space-unit)); + --component-padding: var(--space-md); +} + +@supports(--css: variables) { + @include breakpoint(xs) { + :root, * { + --component-padding: var(--space-xs); + } + } + + @include breakpoint(sm) { + :root, * { + --component-padding: var(--space-xs); + } + } + + @include breakpoint(md) { + :root, * { + --space-xxxxs: calc(0.1875 * var(--space-unit)); + --space-xxxs: calc(0.375 * var(--space-unit)); + --space-xxs: calc(0.5625 * var(--space-unit)); + --space-xs: calc(0.75 * var(--space-unit)); + --space-sm: calc(1.125 * var(--space-unit)); + --space-md: calc(1.5 * var(--space-unit)); + --space-lg: calc(3.125 * var(--space-unit)); + --space-xl: calc(5.125 * var(--space-unit)); + --space-xxl: calc(8.25 * var(--space-unit)); + --space-xxxl: calc(13.25 * var(--space-unit)); + --space-xxxxl: calc(21.5 * var(--space-unit)); + --component-padding: var(--space-xs); + } + } +} + +// -------------------------------- + +// (END) Global editor code + +// -------------------------------- \ No newline at end of file diff --git a/assets/css/custom-style/_typography.scss b/assets/css/custom-style/_typography.scss new file mode 100644 index 0000000..5e23ede --- /dev/null +++ b/assets/css/custom-style/_typography.scss @@ -0,0 +1,161 @@ +@use '../base' as *; + +// -------------------------------- + +// (START) Global editor code https://codyhouse.co/ds/globals/typography + +// -------------------------------- + +:root { + // font family + --font-primary: Inter, system-ui, sans-serif; + + // font size + --text-base-size: 1rem; // body font-size + --text-scale-ratio: 1.3; // multiplier used to generate the type scale values 👇 + + // line-height + --body-line-height: 1.4; + --heading-line-height: 1.2; + + // capital letters - used in combo with the lhCrop mixin + --font-primary-capital-letter: 1; + + // unit - don't modify unless you want to change the typography unit (e.g., from Rem to Em units) + --text-unit: var(--text-base-size); // if Em units → --text-unit: 1em; +} + +:root, * { + // type scale + --text-xs: calc((var(--text-unit) / var(--text-scale-ratio)) / var(--text-scale-ratio)); + --text-sm: calc(var(--text-xs) * var(--text-scale-ratio)); + --text-md: calc(var(--text-sm) * var(--text-scale-ratio) * var(--text-scale-ratio)); + --text-lg: calc(var(--text-md) * var(--text-scale-ratio)); + --text-xl: calc(var(--text-lg) * var(--text-scale-ratio)); + --text-xxl: calc(var(--text-xl) * var(--text-scale-ratio)); + --text-xxxl: calc(var(--text-xxl) * var(--text-scale-ratio)); + --text-xxxxl: calc(var(--text-xxxl) * var(--text-scale-ratio)); +} + + +@include breakpoint(sm) { + :root { + --text-base-size: 1.333em; + --text-scale-ratio: 1.215; + } +} + +@include breakpoint(md) { + :root { + --text-base-size: 1.333rem; + --text-scale-ratio: 1.215; + } +} + +body { + font-family: var(--font-primary); +} + +h1, h2, h3, h4 { + font-family: var(--font-primary); + --heading-font-weight: 700; +} + +// font family +.font-primary { font-family: var(--font-primary); } + +// color +.color-secondary-darker { color: alpha(var(--color-secondary-darker), var(--color-o, 1)); } +.color-secondary-dark { color: alpha(var(--color-secondary-dark), var(--color-o, 1)); } +.color-secondary { color: alpha(var(--color-secondary), var(--color-o, 1)); } +.color-secondary-light { color: alpha(var(--color-secondary-light), var(--color-o, 1)); } +.color-secondary-lighter { color: alpha(var(--color-secondary-lighter), var(--color-o, 1)); } +.color-tertiary-darker { color: alpha(var(--color-tertiary-darker), var(--color-o, 1)); } +.color-tertiary-dark { color: alpha(var(--color-tertiary-dark), var(--color-o, 1)); } +.color-tertiary { color: alpha(var(--color-tertiary), var(--color-o, 1)); } +.color-tertiary-light { color: alpha(var(--color-tertiary-light), var(--color-o, 1)); } +.color-tertiary-lighter { color: alpha(var(--color-tertiary-lighter), var(--color-o, 1)); } +.color-quaternary-darker { color: alpha(var(--color-quaternary-darker), var(--color-o, 1)); } +.color-quaternary-dark { color: alpha(var(--color-quaternary-dark), var(--color-o, 1)); } +.color-quaternary { color: alpha(var(--color-quaternary), var(--color-o, 1)); } +.color-quaternary-light { color: alpha(var(--color-quaternary-light), var(--color-o, 1)); } +.color-quaternary-lighter { color: alpha(var(--color-quaternary-lighter), var(--color-o, 1)); } +.color-quinary-darker { color: alpha(var(--color-quinary-darker), var(--color-o, 1)); } +.color-quinary-dark { color: alpha(var(--color-quinary-dark), var(--color-o, 1)); } +.color-quinary { color: alpha(var(--color-quinary), var(--color-o, 1)); } +.color-quinary-light { color: alpha(var(--color-quinary-light), var(--color-o, 1)); } +.color-quinary-lighter { color: alpha(var(--color-quinary-lighter), var(--color-o, 1)); } + +// gradient +.color-gradient-primary-top { background-image: linear-gradient(0deg, var(--gradient-primary-stop-1), var(--gradient-primary-stop-2)); } +.color-gradient-primary-right { background-image: linear-gradient(90deg, var(--gradient-primary-stop-1), var(--gradient-primary-stop-2)); } +.color-gradient-primary-bottom { background-image: linear-gradient(180deg, var(--gradient-primary-stop-1), var(--gradient-primary-stop-2)); } +.color-gradient-primary-left { background-image: linear-gradient(270deg, var(--gradient-primary-stop-1), var(--gradient-primary-stop-2)); } +.color-gradient-secondary-top { background-image: linear-gradient(0deg, var(--gradient-secondary-stop-1), var(--gradient-secondary-stop-2)); } +.color-gradient-secondary-right { background-image: linear-gradient(90deg, var(--gradient-secondary-stop-1), var(--gradient-secondary-stop-2)); } +.color-gradient-secondary-bottom { background-image: linear-gradient(180deg, var(--gradient-secondary-stop-1), var(--gradient-secondary-stop-2)); } +.color-gradient-secondary-left { background-image: linear-gradient(270deg, var(--gradient-secondary-stop-1), var(--gradient-secondary-stop-2)); } +.color-gradient-tertiary-top { background-image: linear-gradient(0deg, var(--gradient-tertiary-stop-1), var(--gradient-tertiary-stop-2)); } +.color-gradient-tertiary-right { background-image: linear-gradient(90deg, var(--gradient-tertiary-stop-1), var(--gradient-tertiary-stop-2)); } +.color-gradient-tertiary-bottom { background-image: linear-gradient(180deg, var(--gradient-tertiary-stop-1), var(--gradient-tertiary-stop-2)); } +.color-gradient-tertiary-left { background-image: linear-gradient(270deg, var(--gradient-tertiary-stop-1), var(--gradient-tertiary-stop-2)); } + +// -------------------------------- + +// (END) Global editor code + +// -------------------------------- + +html { + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.link { + text-decoration: none; + background-image: linear-gradient(to right, currentColor 50%, alpha(var(--color-contrast-higher), 0.15) 50%); + background-size: 200% 1px; + background-repeat: no-repeat; + background-position: 100% 100%; + transition: background-position 0.2s; + + &:hover { + background-position: 0% 100%; + } +} + +mark { + background-color: alpha(var(--color-accent), 0.2); + color: inherit; +} + +.text-component { + --line-height-multiplier: 1; + --text-space-y-multiplier: 1; + + > * { // use Em units + --text-unit: 1em; + --space-unit: 1em; + } + + blockquote { + padding-left: 1em; + border-left: 4px solid var(--color-contrast-lower); + font-style: italic; + } + + hr { + background: var(--color-contrast-lower); + height: 1px; + } + + figcaption { + font-size: var(--text-sm); + color: var(--color-contrast-low); + } +} + +.article { // e.g., blog posts + --body-line-height: 1.58; // set body line-height + --text-space-y-multiplier: 1.2; // control vertical spacing +} \ No newline at end of file diff --git a/assets/css/custom-style/_util.scss b/assets/css/custom-style/_util.scss new file mode 100644 index 0000000..e75b002 --- /dev/null +++ b/assets/css/custom-style/_util.scss @@ -0,0 +1,21 @@ +@use '../base' as *; + +// -------------------------------- + +// How to create custom utility classes 👇 + +// -------------------------------- + +// 👇 your custom utility class +// .my-util-class { +// property: value; +// } + +// 👇 (optional) create responsive variations - edit only [my-util-class, property, value] +// @each $breakpoint, $value in $breakpoints { +// @include breakpoint(#{$breakpoint}) { +// .my-util-class\@#{$breakpoint} { +// property: value; +// } +// } +// } \ No newline at end of file diff --git a/assets/css/style.css b/assets/css/style.css new file mode 100644 index 0000000..e645693 --- /dev/null +++ b/assets/css/style.css @@ -0,0 +1,14027 @@ +@charset "UTF-8"; +.container { + width: calc(100% - 2 * var(--component-padding)); + margin-left: auto; + margin-right: auto; +} + +.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); +} +.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 > * { + flex-basis: 100%; + max-width: 100%; + min-width: 0; +} + +/* #region (Safari < 14.1 fallback) */ +@media not all and (-webkit-min-device-pixel-ratio: 0), not all and (min-resolution: 0.001dpcm) { + @supports not (translate: none) { + .grid, .flex[class*=gap-], .inline-flex[class*=gap-] { + gap: 0px; + margin-bottom: calc(-1 * var(--gap-y)); + margin-left: calc(-1 * var(--gap-x)); + } + .grid > *, .flex[class*=gap-] > *, .inline-flex[class*=gap-] > * { + margin-bottom: var(--sub-gap-y); + } + .grid { + --offset: var(--gap-x); + --gap-modifier: 0; + --offset-modifier: 1; + } + .grid > * { + margin-left: var(--offset); + } + .flex[class*=gap-] > *, .inline-flex[class*=gap-] > * { + margin-left: var(--sub-gap-x); + } + } +} +/* #endregion */ +.gap-xxxxs { + --gap-x: var(--space-xxxxs); + --gap-y: var(--space-xxxxs); +} +.gap-xxxxs > * { + --sub-gap-x: var(--space-xxxxs); + --sub-gap-y: var(--space-xxxxs); +} + +.gap-xxxs { + --gap-x: var(--space-xxxs); + --gap-y: var(--space-xxxs); +} +.gap-xxxs > * { + --sub-gap-x: var(--space-xxxs); + --sub-gap-y: var(--space-xxxs); +} + +.gap-xxs { + --gap-x: var(--space-xxs); + --gap-y: var(--space-xxs); +} +.gap-xxs > * { + --sub-gap-x: var(--space-xxs); + --sub-gap-y: var(--space-xxs); +} + +.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-xxl { + --gap-x: var(--space-xxl); + --gap-y: var(--space-xxl); +} +.gap-xxl > * { + --sub-gap-x: var(--space-xxl); + --sub-gap-y: var(--space-xxl); +} + +.gap-xxxl { + --gap-x: var(--space-xxxl); + --gap-y: var(--space-xxxl); +} +.gap-xxxl > * { + --sub-gap-x: var(--space-xxxl); + --sub-gap-y: var(--space-xxxl); +} + +.gap-xxxxl { + --gap-x: var(--space-xxxxl); + --gap-y: var(--space-xxxxl); +} +.gap-xxxxl > * { + --sub-gap-x: var(--space-xxxxl); + --sub-gap-y: var(--space-xxxxl); +} + +.gap-0 { + --gap-x: 0px; + --gap-y: 0px; +} +.gap-0 > * { + --sub-gap-x: 0px; + --sub-gap-y: 0px; +} + +.gap-x-xxxxs { + --gap-x: var(--space-xxxxs); +} +.gap-x-xxxxs > * { + --sub-gap-x: var(--space-xxxxs); +} + +.gap-x-xxxs { + --gap-x: var(--space-xxxs); +} +.gap-x-xxxs > * { + --sub-gap-x: var(--space-xxxs); +} + +.gap-x-xxs { + --gap-x: var(--space-xxs); +} +.gap-x-xxs > * { + --sub-gap-x: var(--space-xxs); +} + +.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-xxl { + --gap-x: var(--space-xxl); +} +.gap-x-xxl > * { + --sub-gap-x: var(--space-xxl); +} + +.gap-x-xxxl { + --gap-x: var(--space-xxxl); +} +.gap-x-xxxl > * { + --sub-gap-x: var(--space-xxxl); +} + +.gap-x-xxxxl { + --gap-x: var(--space-xxxxl); +} +.gap-x-xxxxl > * { + --sub-gap-x: var(--space-xxxxl); +} + +.gap-x-0 { + --gap-x: 0px; +} +.gap-x-0 > * { + --sub-gap-x: 0px; +} + +.gap-y-xxxxs { + --gap-y: var(--space-xxxxs); +} +.gap-y-xxxxs > * { + --sub-gap-y: var(--space-xxxxs); +} + +.gap-y-xxxs { + --gap-y: var(--space-xxxs); +} +.gap-y-xxxs > * { + --sub-gap-y: var(--space-xxxs); +} + +.gap-y-xxs { + --gap-y: var(--space-xxs); +} +.gap-y-xxs > * { + --sub-gap-y: var(--space-xxs); +} + +.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-xxl { + --gap-y: var(--space-xxl); +} +.gap-y-xxl > * { + --sub-gap-y: var(--space-xxl); +} + +.gap-y-xxxl { + --gap-y: var(--space-xxxl); +} +.gap-y-xxxl > * { + --sub-gap-y: var(--space-xxxl); +} + +.gap-y-xxxxl { + --gap-y: var(--space-xxxxl); +} +.gap-y-xxxxl > * { + --sub-gap-y: var(--space-xxxxl); +} + +.gap-y-0 { + --gap-y: 0px; +} +.gap-y-0 > * { + --sub-gap-y: 0px; +} + +.grid-col-1 { + --grid-columns: 1; +} + +.col-1 { + --span: 1; +} + +.grid-col-2 { + --grid-columns: 2; +} + +.col-2 { + --span: 2; +} + +.grid-col-3 { + --grid-columns: 3; +} + +.col-3 { + --span: 3; +} + +.grid-col-4 { + --grid-columns: 4; +} + +.col-4 { + --span: 4; +} + +.grid-col-5 { + --grid-columns: 5; +} + +.col-5 { + --span: 5; +} + +.grid-col-6 { + --grid-columns: 6; +} + +.col-6 { + --span: 6; +} + +.grid-col-7 { + --grid-columns: 7; +} + +.col-7 { + --span: 7; +} + +.grid-col-8 { + --grid-columns: 8; +} + +.col-8 { + --span: 8; +} + +.grid-col-9 { + --grid-columns: 9; +} + +.col-9 { + --span: 9; +} + +.grid-col-10 { + --grid-columns: 10; +} + +.col-10 { + --span: 10; +} + +.grid-col-11 { + --grid-columns: 11; +} + +.col-11 { + --span: 11; +} + +.grid-col-12 { + --grid-columns: 12; +} + +.col-12 { + --span: 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 { + flex-basis: calc((100% - (var(--grid-columns) - var(--gap-modifier, 1)) * var(--sub-gap-x)) * var(--span) / var(--grid-columns) + (var(--span) - 1) * var(--sub-gap-x)); + max-width: calc((100% - (var(--grid-columns) - var(--gap-modifier, 1)) * var(--sub-gap-x)) * var(--span) / var(--grid-columns) + (var(--span) - 1) * var(--sub-gap-x)); +} + +.col { + flex-grow: 1; + flex-basis: 0; + max-width: 100%; +} + +.col-content { + flex-grow: 0; + flex-basis: initial; + max-width: initial; +} + +.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; +} + +.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) - var(--gap-modifier, 1)) * var(--sub-gap-x)) * var(--offset) / var(--grid-columns) + (var(--offset) + var(--offset-modifier, 0)) * var(--sub-gap-x)); +} + +@media (min-width: 32rem) { + .gap-xxxxs\@xs { + --gap-x: var(--space-xxxxs); + --gap-y: var(--space-xxxxs); + } + .gap-xxxxs\@xs > * { + --sub-gap-x: var(--space-xxxxs); + --sub-gap-y: var(--space-xxxxs); + } + .gap-xxxs\@xs { + --gap-x: var(--space-xxxs); + --gap-y: var(--space-xxxs); + } + .gap-xxxs\@xs > * { + --sub-gap-x: var(--space-xxxs); + --sub-gap-y: var(--space-xxxs); + } + .gap-xxs\@xs { + --gap-x: var(--space-xxs); + --gap-y: var(--space-xxs); + } + .gap-xxs\@xs > * { + --sub-gap-x: var(--space-xxs); + --sub-gap-y: var(--space-xxs); + } + .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-xxl\@xs { + --gap-x: var(--space-xxl); + --gap-y: var(--space-xxl); + } + .gap-xxl\@xs > * { + --sub-gap-x: var(--space-xxl); + --sub-gap-y: var(--space-xxl); + } + .gap-xxxl\@xs { + --gap-x: var(--space-xxxl); + --gap-y: var(--space-xxxl); + } + .gap-xxxl\@xs > * { + --sub-gap-x: var(--space-xxxl); + --sub-gap-y: var(--space-xxxl); + } + .gap-xxxxl\@xs { + --gap-x: var(--space-xxxxl); + --gap-y: var(--space-xxxxl); + } + .gap-xxxxl\@xs > * { + --sub-gap-x: var(--space-xxxxl); + --sub-gap-y: var(--space-xxxxl); + } + .gap-0\@xs { + --gap-x: 0px; + --gap-y: 0px; + } + .gap-0\@xs > * { + --sub-gap-x: 0px; + --sub-gap-y: 0px; + } + .gap-x-xxxxs\@xs { + --gap-x: var(--space-xxxxs); + } + .gap-x-xxxxs\@xs > * { + --sub-gap-x: var(--space-xxxxs); + } + .gap-x-xxxs\@xs { + --gap-x: var(--space-xxxs); + } + .gap-x-xxxs\@xs > * { + --sub-gap-x: var(--space-xxxs); + } + .gap-x-xxs\@xs { + --gap-x: var(--space-xxs); + } + .gap-x-xxs\@xs > * { + --sub-gap-x: var(--space-xxs); + } + .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-xxl\@xs { + --gap-x: var(--space-xxl); + } + .gap-x-xxl\@xs > * { + --sub-gap-x: var(--space-xxl); + } + .gap-x-xxxl\@xs { + --gap-x: var(--space-xxxl); + } + .gap-x-xxxl\@xs > * { + --sub-gap-x: var(--space-xxxl); + } + .gap-x-xxxxl\@xs { + --gap-x: var(--space-xxxxl); + } + .gap-x-xxxxl\@xs > * { + --sub-gap-x: var(--space-xxxxl); + } + .gap-x-0\@xs { + --gap-x: 0px; + } + .gap-x-0\@xs > * { + --sub-gap-x: 0px; + } + .gap-y-xxxxs\@xs { + --gap-y: var(--space-xxxxs); + } + .gap-y-xxxxs\@xs > * { + --sub-gap-y: var(--space-xxxxs); + } + .gap-y-xxxs\@xs { + --gap-y: var(--space-xxxs); + } + .gap-y-xxxs\@xs > * { + --sub-gap-y: var(--space-xxxs); + } + .gap-y-xxs\@xs { + --gap-y: var(--space-xxs); + } + .gap-y-xxs\@xs > * { + --sub-gap-y: var(--space-xxs); + } + .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-xxl\@xs { + --gap-y: var(--space-xxl); + } + .gap-y-xxl\@xs > * { + --sub-gap-y: var(--space-xxl); + } + .gap-y-xxxl\@xs { + --gap-y: var(--space-xxxl); + } + .gap-y-xxxl\@xs > * { + --sub-gap-y: var(--space-xxxl); + } + .gap-y-xxxxl\@xs { + --gap-y: var(--space-xxxxl); + } + .gap-y-xxxxl\@xs > * { + --sub-gap-y: var(--space-xxxxl); + } + .gap-y-0\@xs { + --gap-y: 0px; + } + .gap-y-0\@xs > * { + --sub-gap-y: 0px; + } + .grid-col-1\@xs { + --grid-columns: 1; + } + .col-1\@xs { + --span: 1; + } + .grid-col-2\@xs { + --grid-columns: 2; + } + .col-2\@xs { + --span: 2; + } + .grid-col-3\@xs { + --grid-columns: 3; + } + .col-3\@xs { + --span: 3; + } + .grid-col-4\@xs { + --grid-columns: 4; + } + .col-4\@xs { + --span: 4; + } + .grid-col-5\@xs { + --grid-columns: 5; + } + .col-5\@xs { + --span: 5; + } + .grid-col-6\@xs { + --grid-columns: 6; + } + .col-6\@xs { + --span: 6; + } + .grid-col-7\@xs { + --grid-columns: 7; + } + .col-7\@xs { + --span: 7; + } + .grid-col-8\@xs { + --grid-columns: 8; + } + .col-8\@xs { + --span: 8; + } + .grid-col-9\@xs { + --grid-columns: 9; + } + .col-9\@xs { + --span: 9; + } + .grid-col-10\@xs { + --grid-columns: 10; + } + .col-10\@xs { + --span: 10; + } + .grid-col-11\@xs { + --grid-columns: 11; + } + .col-11\@xs { + --span: 11; + } + .grid-col-12\@xs { + --grid-columns: 12; + } + .col-12\@xs { + --span: 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 { + flex-basis: calc((100% - (var(--grid-columns) - var(--gap-modifier, 1)) * var(--sub-gap-x)) * var(--span) / var(--grid-columns) + (var(--span) - 1) * var(--sub-gap-x)); + max-width: calc((100% - (var(--grid-columns) - var(--gap-modifier, 1)) * var(--sub-gap-x)) * var(--span) / var(--grid-columns) + (var(--span) - 1) * var(--sub-gap-x)); + } + .col\@xs { + flex-grow: 1; + flex-basis: 0; + max-width: 100%; + } + .col-content\@xs { + flex-grow: 0; + flex-basis: initial; + max-width: initial; + } + .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-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) - var(--gap-modifier, 1)) * var(--sub-gap-x)) * var(--offset) / var(--grid-columns) + (var(--offset) + var(--offset-modifier, 0)) * var(--sub-gap-x)); + } + .offset-0\@xs { + margin-left: 0; + } + @media not all and (-webkit-min-device-pixel-ratio: 0), not all and (min-resolution: 0.001dpcm) { + @supports not (translate: none) { + .offset-0\@xs { + margin-left: var(--gap-x); + } + } + } +} +@media (min-width: 48rem) { + .gap-xxxxs\@sm { + --gap-x: var(--space-xxxxs); + --gap-y: var(--space-xxxxs); + } + .gap-xxxxs\@sm > * { + --sub-gap-x: var(--space-xxxxs); + --sub-gap-y: var(--space-xxxxs); + } + .gap-xxxs\@sm { + --gap-x: var(--space-xxxs); + --gap-y: var(--space-xxxs); + } + .gap-xxxs\@sm > * { + --sub-gap-x: var(--space-xxxs); + --sub-gap-y: var(--space-xxxs); + } + .gap-xxs\@sm { + --gap-x: var(--space-xxs); + --gap-y: var(--space-xxs); + } + .gap-xxs\@sm > * { + --sub-gap-x: var(--space-xxs); + --sub-gap-y: var(--space-xxs); + } + .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-xxl\@sm { + --gap-x: var(--space-xxl); + --gap-y: var(--space-xxl); + } + .gap-xxl\@sm > * { + --sub-gap-x: var(--space-xxl); + --sub-gap-y: var(--space-xxl); + } + .gap-xxxl\@sm { + --gap-x: var(--space-xxxl); + --gap-y: var(--space-xxxl); + } + .gap-xxxl\@sm > * { + --sub-gap-x: var(--space-xxxl); + --sub-gap-y: var(--space-xxxl); + } + .gap-xxxxl\@sm { + --gap-x: var(--space-xxxxl); + --gap-y: var(--space-xxxxl); + } + .gap-xxxxl\@sm > * { + --sub-gap-x: var(--space-xxxxl); + --sub-gap-y: var(--space-xxxxl); + } + .gap-0\@sm { + --gap-x: 0px; + --gap-y: 0px; + } + .gap-0\@sm > * { + --sub-gap-x: 0px; + --sub-gap-y: 0px; + } + .gap-x-xxxxs\@sm { + --gap-x: var(--space-xxxxs); + } + .gap-x-xxxxs\@sm > * { + --sub-gap-x: var(--space-xxxxs); + } + .gap-x-xxxs\@sm { + --gap-x: var(--space-xxxs); + } + .gap-x-xxxs\@sm > * { + --sub-gap-x: var(--space-xxxs); + } + .gap-x-xxs\@sm { + --gap-x: var(--space-xxs); + } + .gap-x-xxs\@sm > * { + --sub-gap-x: var(--space-xxs); + } + .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-xxl\@sm { + --gap-x: var(--space-xxl); + } + .gap-x-xxl\@sm > * { + --sub-gap-x: var(--space-xxl); + } + .gap-x-xxxl\@sm { + --gap-x: var(--space-xxxl); + } + .gap-x-xxxl\@sm > * { + --sub-gap-x: var(--space-xxxl); + } + .gap-x-xxxxl\@sm { + --gap-x: var(--space-xxxxl); + } + .gap-x-xxxxl\@sm > * { + --sub-gap-x: var(--space-xxxxl); + } + .gap-x-0\@sm { + --gap-x: 0px; + } + .gap-x-0\@sm > * { + --sub-gap-x: 0px; + } + .gap-y-xxxxs\@sm { + --gap-y: var(--space-xxxxs); + } + .gap-y-xxxxs\@sm > * { + --sub-gap-y: var(--space-xxxxs); + } + .gap-y-xxxs\@sm { + --gap-y: var(--space-xxxs); + } + .gap-y-xxxs\@sm > * { + --sub-gap-y: var(--space-xxxs); + } + .gap-y-xxs\@sm { + --gap-y: var(--space-xxs); + } + .gap-y-xxs\@sm > * { + --sub-gap-y: var(--space-xxs); + } + .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-xxl\@sm { + --gap-y: var(--space-xxl); + } + .gap-y-xxl\@sm > * { + --sub-gap-y: var(--space-xxl); + } + .gap-y-xxxl\@sm { + --gap-y: var(--space-xxxl); + } + .gap-y-xxxl\@sm > * { + --sub-gap-y: var(--space-xxxl); + } + .gap-y-xxxxl\@sm { + --gap-y: var(--space-xxxxl); + } + .gap-y-xxxxl\@sm > * { + --sub-gap-y: var(--space-xxxxl); + } + .gap-y-0\@sm { + --gap-y: 0px; + } + .gap-y-0\@sm > * { + --sub-gap-y: 0px; + } + .grid-col-1\@sm { + --grid-columns: 1; + } + .col-1\@sm { + --span: 1; + } + .grid-col-2\@sm { + --grid-columns: 2; + } + .col-2\@sm { + --span: 2; + } + .grid-col-3\@sm { + --grid-columns: 3; + } + .col-3\@sm { + --span: 3; + } + .grid-col-4\@sm { + --grid-columns: 4; + } + .col-4\@sm { + --span: 4; + } + .grid-col-5\@sm { + --grid-columns: 5; + } + .col-5\@sm { + --span: 5; + } + .grid-col-6\@sm { + --grid-columns: 6; + } + .col-6\@sm { + --span: 6; + } + .grid-col-7\@sm { + --grid-columns: 7; + } + .col-7\@sm { + --span: 7; + } + .grid-col-8\@sm { + --grid-columns: 8; + } + .col-8\@sm { + --span: 8; + } + .grid-col-9\@sm { + --grid-columns: 9; + } + .col-9\@sm { + --span: 9; + } + .grid-col-10\@sm { + --grid-columns: 10; + } + .col-10\@sm { + --span: 10; + } + .grid-col-11\@sm { + --grid-columns: 11; + } + .col-11\@sm { + --span: 11; + } + .grid-col-12\@sm { + --grid-columns: 12; + } + .col-12\@sm { + --span: 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 { + flex-basis: calc((100% - (var(--grid-columns) - var(--gap-modifier, 1)) * var(--sub-gap-x)) * var(--span) / var(--grid-columns) + (var(--span) - 1) * var(--sub-gap-x)); + max-width: calc((100% - (var(--grid-columns) - var(--gap-modifier, 1)) * var(--sub-gap-x)) * var(--span) / var(--grid-columns) + (var(--span) - 1) * var(--sub-gap-x)); + } + .col\@sm { + flex-grow: 1; + flex-basis: 0; + max-width: 100%; + } + .col-content\@sm { + flex-grow: 0; + flex-basis: initial; + max-width: initial; + } + .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-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) - var(--gap-modifier, 1)) * var(--sub-gap-x)) * var(--offset) / var(--grid-columns) + (var(--offset) + var(--offset-modifier, 0)) * var(--sub-gap-x)); + } + .offset-0\@sm { + margin-left: 0; + } + @media not all and (-webkit-min-device-pixel-ratio: 0), not all and (min-resolution: 0.001dpcm) { + @supports not (translate: none) { + .offset-0\@sm { + margin-left: var(--gap-x); + } + } + } +} +@media (min-width: 64rem) { + .gap-xxxxs\@md { + --gap-x: var(--space-xxxxs); + --gap-y: var(--space-xxxxs); + } + .gap-xxxxs\@md > * { + --sub-gap-x: var(--space-xxxxs); + --sub-gap-y: var(--space-xxxxs); + } + .gap-xxxs\@md { + --gap-x: var(--space-xxxs); + --gap-y: var(--space-xxxs); + } + .gap-xxxs\@md > * { + --sub-gap-x: var(--space-xxxs); + --sub-gap-y: var(--space-xxxs); + } + .gap-xxs\@md { + --gap-x: var(--space-xxs); + --gap-y: var(--space-xxs); + } + .gap-xxs\@md > * { + --sub-gap-x: var(--space-xxs); + --sub-gap-y: var(--space-xxs); + } + .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-xxl\@md { + --gap-x: var(--space-xxl); + --gap-y: var(--space-xxl); + } + .gap-xxl\@md > * { + --sub-gap-x: var(--space-xxl); + --sub-gap-y: var(--space-xxl); + } + .gap-xxxl\@md { + --gap-x: var(--space-xxxl); + --gap-y: var(--space-xxxl); + } + .gap-xxxl\@md > * { + --sub-gap-x: var(--space-xxxl); + --sub-gap-y: var(--space-xxxl); + } + .gap-xxxxl\@md { + --gap-x: var(--space-xxxxl); + --gap-y: var(--space-xxxxl); + } + .gap-xxxxl\@md > * { + --sub-gap-x: var(--space-xxxxl); + --sub-gap-y: var(--space-xxxxl); + } + .gap-0\@md { + --gap-x: 0px; + --gap-y: 0px; + } + .gap-0\@md > * { + --sub-gap-x: 0px; + --sub-gap-y: 0px; + } + .gap-x-xxxxs\@md { + --gap-x: var(--space-xxxxs); + } + .gap-x-xxxxs\@md > * { + --sub-gap-x: var(--space-xxxxs); + } + .gap-x-xxxs\@md { + --gap-x: var(--space-xxxs); + } + .gap-x-xxxs\@md > * { + --sub-gap-x: var(--space-xxxs); + } + .gap-x-xxs\@md { + --gap-x: var(--space-xxs); + } + .gap-x-xxs\@md > * { + --sub-gap-x: var(--space-xxs); + } + .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-xxl\@md { + --gap-x: var(--space-xxl); + } + .gap-x-xxl\@md > * { + --sub-gap-x: var(--space-xxl); + } + .gap-x-xxxl\@md { + --gap-x: var(--space-xxxl); + } + .gap-x-xxxl\@md > * { + --sub-gap-x: var(--space-xxxl); + } + .gap-x-xxxxl\@md { + --gap-x: var(--space-xxxxl); + } + .gap-x-xxxxl\@md > * { + --sub-gap-x: var(--space-xxxxl); + } + .gap-x-0\@md { + --gap-x: 0px; + } + .gap-x-0\@md > * { + --sub-gap-x: 0px; + } + .gap-y-xxxxs\@md { + --gap-y: var(--space-xxxxs); + } + .gap-y-xxxxs\@md > * { + --sub-gap-y: var(--space-xxxxs); + } + .gap-y-xxxs\@md { + --gap-y: var(--space-xxxs); + } + .gap-y-xxxs\@md > * { + --sub-gap-y: var(--space-xxxs); + } + .gap-y-xxs\@md { + --gap-y: var(--space-xxs); + } + .gap-y-xxs\@md > * { + --sub-gap-y: var(--space-xxs); + } + .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-xxl\@md { + --gap-y: var(--space-xxl); + } + .gap-y-xxl\@md > * { + --sub-gap-y: var(--space-xxl); + } + .gap-y-xxxl\@md { + --gap-y: var(--space-xxxl); + } + .gap-y-xxxl\@md > * { + --sub-gap-y: var(--space-xxxl); + } + .gap-y-xxxxl\@md { + --gap-y: var(--space-xxxxl); + } + .gap-y-xxxxl\@md > * { + --sub-gap-y: var(--space-xxxxl); + } + .gap-y-0\@md { + --gap-y: 0px; + } + .gap-y-0\@md > * { + --sub-gap-y: 0px; + } + .grid-col-1\@md { + --grid-columns: 1; + } + .col-1\@md { + --span: 1; + } + .grid-col-2\@md { + --grid-columns: 2; + } + .col-2\@md { + --span: 2; + } + .grid-col-3\@md { + --grid-columns: 3; + } + .col-3\@md { + --span: 3; + } + .grid-col-4\@md { + --grid-columns: 4; + } + .col-4\@md { + --span: 4; + } + .grid-col-5\@md { + --grid-columns: 5; + } + .col-5\@md { + --span: 5; + } + .grid-col-6\@md { + --grid-columns: 6; + } + .col-6\@md { + --span: 6; + } + .grid-col-7\@md { + --grid-columns: 7; + } + .col-7\@md { + --span: 7; + } + .grid-col-8\@md { + --grid-columns: 8; + } + .col-8\@md { + --span: 8; + } + .grid-col-9\@md { + --grid-columns: 9; + } + .col-9\@md { + --span: 9; + } + .grid-col-10\@md { + --grid-columns: 10; + } + .col-10\@md { + --span: 10; + } + .grid-col-11\@md { + --grid-columns: 11; + } + .col-11\@md { + --span: 11; + } + .grid-col-12\@md { + --grid-columns: 12; + } + .col-12\@md { + --span: 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 { + flex-basis: calc((100% - (var(--grid-columns) - var(--gap-modifier, 1)) * var(--sub-gap-x)) * var(--span) / var(--grid-columns) + (var(--span) - 1) * var(--sub-gap-x)); + max-width: calc((100% - (var(--grid-columns) - var(--gap-modifier, 1)) * var(--sub-gap-x)) * var(--span) / var(--grid-columns) + (var(--span) - 1) * var(--sub-gap-x)); + } + .col\@md { + flex-grow: 1; + flex-basis: 0; + max-width: 100%; + } + .col-content\@md { + flex-grow: 0; + flex-basis: initial; + max-width: initial; + } + .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-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) - var(--gap-modifier, 1)) * var(--sub-gap-x)) * var(--offset) / var(--grid-columns) + (var(--offset) + var(--offset-modifier, 0)) * var(--sub-gap-x)); + } + .offset-0\@md { + margin-left: 0; + } + @media not all and (-webkit-min-device-pixel-ratio: 0), not all and (min-resolution: 0.001dpcm) { + @supports not (translate: none) { + .offset-0\@md { + margin-left: var(--gap-x); + } + } + } +} +@media (min-width: 80rem) { + .gap-xxxxs\@lg { + --gap-x: var(--space-xxxxs); + --gap-y: var(--space-xxxxs); + } + .gap-xxxxs\@lg > * { + --sub-gap-x: var(--space-xxxxs); + --sub-gap-y: var(--space-xxxxs); + } + .gap-xxxs\@lg { + --gap-x: var(--space-xxxs); + --gap-y: var(--space-xxxs); + } + .gap-xxxs\@lg > * { + --sub-gap-x: var(--space-xxxs); + --sub-gap-y: var(--space-xxxs); + } + .gap-xxs\@lg { + --gap-x: var(--space-xxs); + --gap-y: var(--space-xxs); + } + .gap-xxs\@lg > * { + --sub-gap-x: var(--space-xxs); + --sub-gap-y: var(--space-xxs); + } + .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-xxl\@lg { + --gap-x: var(--space-xxl); + --gap-y: var(--space-xxl); + } + .gap-xxl\@lg > * { + --sub-gap-x: var(--space-xxl); + --sub-gap-y: var(--space-xxl); + } + .gap-xxxl\@lg { + --gap-x: var(--space-xxxl); + --gap-y: var(--space-xxxl); + } + .gap-xxxl\@lg > * { + --sub-gap-x: var(--space-xxxl); + --sub-gap-y: var(--space-xxxl); + } + .gap-xxxxl\@lg { + --gap-x: var(--space-xxxxl); + --gap-y: var(--space-xxxxl); + } + .gap-xxxxl\@lg > * { + --sub-gap-x: var(--space-xxxxl); + --sub-gap-y: var(--space-xxxxl); + } + .gap-0\@lg { + --gap-x: 0px; + --gap-y: 0px; + } + .gap-0\@lg > * { + --sub-gap-x: 0px; + --sub-gap-y: 0px; + } + .gap-x-xxxxs\@lg { + --gap-x: var(--space-xxxxs); + } + .gap-x-xxxxs\@lg > * { + --sub-gap-x: var(--space-xxxxs); + } + .gap-x-xxxs\@lg { + --gap-x: var(--space-xxxs); + } + .gap-x-xxxs\@lg > * { + --sub-gap-x: var(--space-xxxs); + } + .gap-x-xxs\@lg { + --gap-x: var(--space-xxs); + } + .gap-x-xxs\@lg > * { + --sub-gap-x: var(--space-xxs); + } + .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-xxl\@lg { + --gap-x: var(--space-xxl); + } + .gap-x-xxl\@lg > * { + --sub-gap-x: var(--space-xxl); + } + .gap-x-xxxl\@lg { + --gap-x: var(--space-xxxl); + } + .gap-x-xxxl\@lg > * { + --sub-gap-x: var(--space-xxxl); + } + .gap-x-xxxxl\@lg { + --gap-x: var(--space-xxxxl); + } + .gap-x-xxxxl\@lg > * { + --sub-gap-x: var(--space-xxxxl); + } + .gap-x-0\@lg { + --gap-x: 0px; + } + .gap-x-0\@lg > * { + --sub-gap-x: 0px; + } + .gap-y-xxxxs\@lg { + --gap-y: var(--space-xxxxs); + } + .gap-y-xxxxs\@lg > * { + --sub-gap-y: var(--space-xxxxs); + } + .gap-y-xxxs\@lg { + --gap-y: var(--space-xxxs); + } + .gap-y-xxxs\@lg > * { + --sub-gap-y: var(--space-xxxs); + } + .gap-y-xxs\@lg { + --gap-y: var(--space-xxs); + } + .gap-y-xxs\@lg > * { + --sub-gap-y: var(--space-xxs); + } + .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-xxl\@lg { + --gap-y: var(--space-xxl); + } + .gap-y-xxl\@lg > * { + --sub-gap-y: var(--space-xxl); + } + .gap-y-xxxl\@lg { + --gap-y: var(--space-xxxl); + } + .gap-y-xxxl\@lg > * { + --sub-gap-y: var(--space-xxxl); + } + .gap-y-xxxxl\@lg { + --gap-y: var(--space-xxxxl); + } + .gap-y-xxxxl\@lg > * { + --sub-gap-y: var(--space-xxxxl); + } + .gap-y-0\@lg { + --gap-y: 0px; + } + .gap-y-0\@lg > * { + --sub-gap-y: 0px; + } + .grid-col-1\@lg { + --grid-columns: 1; + } + .col-1\@lg { + --span: 1; + } + .grid-col-2\@lg { + --grid-columns: 2; + } + .col-2\@lg { + --span: 2; + } + .grid-col-3\@lg { + --grid-columns: 3; + } + .col-3\@lg { + --span: 3; + } + .grid-col-4\@lg { + --grid-columns: 4; + } + .col-4\@lg { + --span: 4; + } + .grid-col-5\@lg { + --grid-columns: 5; + } + .col-5\@lg { + --span: 5; + } + .grid-col-6\@lg { + --grid-columns: 6; + } + .col-6\@lg { + --span: 6; + } + .grid-col-7\@lg { + --grid-columns: 7; + } + .col-7\@lg { + --span: 7; + } + .grid-col-8\@lg { + --grid-columns: 8; + } + .col-8\@lg { + --span: 8; + } + .grid-col-9\@lg { + --grid-columns: 9; + } + .col-9\@lg { + --span: 9; + } + .grid-col-10\@lg { + --grid-columns: 10; + } + .col-10\@lg { + --span: 10; + } + .grid-col-11\@lg { + --grid-columns: 11; + } + .col-11\@lg { + --span: 11; + } + .grid-col-12\@lg { + --grid-columns: 12; + } + .col-12\@lg { + --span: 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 { + flex-basis: calc((100% - (var(--grid-columns) - var(--gap-modifier, 1)) * var(--sub-gap-x)) * var(--span) / var(--grid-columns) + (var(--span) - 1) * var(--sub-gap-x)); + max-width: calc((100% - (var(--grid-columns) - var(--gap-modifier, 1)) * var(--sub-gap-x)) * var(--span) / var(--grid-columns) + (var(--span) - 1) * var(--sub-gap-x)); + } + .col\@lg { + flex-grow: 1; + flex-basis: 0; + max-width: 100%; + } + .col-content\@lg { + flex-grow: 0; + flex-basis: initial; + max-width: initial; + } + .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-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) - var(--gap-modifier, 1)) * var(--sub-gap-x)) * var(--offset) / var(--grid-columns) + (var(--offset) + var(--offset-modifier, 0)) * var(--sub-gap-x)); + } + .offset-0\@lg { + margin-left: 0; + } + @media not all and (-webkit-min-device-pixel-ratio: 0), not all and (min-resolution: 0.001dpcm) { + @supports not (translate: none) { + .offset-0\@lg { + margin-left: var(--gap-x); + } + } + } +} +@media (min-width: 90rem) { + .gap-xxxxs\@xl { + --gap-x: var(--space-xxxxs); + --gap-y: var(--space-xxxxs); + } + .gap-xxxxs\@xl > * { + --sub-gap-x: var(--space-xxxxs); + --sub-gap-y: var(--space-xxxxs); + } + .gap-xxxs\@xl { + --gap-x: var(--space-xxxs); + --gap-y: var(--space-xxxs); + } + .gap-xxxs\@xl > * { + --sub-gap-x: var(--space-xxxs); + --sub-gap-y: var(--space-xxxs); + } + .gap-xxs\@xl { + --gap-x: var(--space-xxs); + --gap-y: var(--space-xxs); + } + .gap-xxs\@xl > * { + --sub-gap-x: var(--space-xxs); + --sub-gap-y: var(--space-xxs); + } + .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-xxl\@xl { + --gap-x: var(--space-xxl); + --gap-y: var(--space-xxl); + } + .gap-xxl\@xl > * { + --sub-gap-x: var(--space-xxl); + --sub-gap-y: var(--space-xxl); + } + .gap-xxxl\@xl { + --gap-x: var(--space-xxxl); + --gap-y: var(--space-xxxl); + } + .gap-xxxl\@xl > * { + --sub-gap-x: var(--space-xxxl); + --sub-gap-y: var(--space-xxxl); + } + .gap-xxxxl\@xl { + --gap-x: var(--space-xxxxl); + --gap-y: var(--space-xxxxl); + } + .gap-xxxxl\@xl > * { + --sub-gap-x: var(--space-xxxxl); + --sub-gap-y: var(--space-xxxxl); + } + .gap-0\@xl { + --gap-x: 0px; + --gap-y: 0px; + } + .gap-0\@xl > * { + --sub-gap-x: 0px; + --sub-gap-y: 0px; + } + .gap-x-xxxxs\@xl { + --gap-x: var(--space-xxxxs); + } + .gap-x-xxxxs\@xl > * { + --sub-gap-x: var(--space-xxxxs); + } + .gap-x-xxxs\@xl { + --gap-x: var(--space-xxxs); + } + .gap-x-xxxs\@xl > * { + --sub-gap-x: var(--space-xxxs); + } + .gap-x-xxs\@xl { + --gap-x: var(--space-xxs); + } + .gap-x-xxs\@xl > * { + --sub-gap-x: var(--space-xxs); + } + .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-xxl\@xl { + --gap-x: var(--space-xxl); + } + .gap-x-xxl\@xl > * { + --sub-gap-x: var(--space-xxl); + } + .gap-x-xxxl\@xl { + --gap-x: var(--space-xxxl); + } + .gap-x-xxxl\@xl > * { + --sub-gap-x: var(--space-xxxl); + } + .gap-x-xxxxl\@xl { + --gap-x: var(--space-xxxxl); + } + .gap-x-xxxxl\@xl > * { + --sub-gap-x: var(--space-xxxxl); + } + .gap-x-0\@xl { + --gap-x: 0px; + } + .gap-x-0\@xl > * { + --sub-gap-x: 0px; + } + .gap-y-xxxxs\@xl { + --gap-y: var(--space-xxxxs); + } + .gap-y-xxxxs\@xl > * { + --sub-gap-y: var(--space-xxxxs); + } + .gap-y-xxxs\@xl { + --gap-y: var(--space-xxxs); + } + .gap-y-xxxs\@xl > * { + --sub-gap-y: var(--space-xxxs); + } + .gap-y-xxs\@xl { + --gap-y: var(--space-xxs); + } + .gap-y-xxs\@xl > * { + --sub-gap-y: var(--space-xxs); + } + .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-xxl\@xl { + --gap-y: var(--space-xxl); + } + .gap-y-xxl\@xl > * { + --sub-gap-y: var(--space-xxl); + } + .gap-y-xxxl\@xl { + --gap-y: var(--space-xxxl); + } + .gap-y-xxxl\@xl > * { + --sub-gap-y: var(--space-xxxl); + } + .gap-y-xxxxl\@xl { + --gap-y: var(--space-xxxxl); + } + .gap-y-xxxxl\@xl > * { + --sub-gap-y: var(--space-xxxxl); + } + .gap-y-0\@xl { + --gap-y: 0px; + } + .gap-y-0\@xl > * { + --sub-gap-y: 0px; + } + .grid-col-1\@xl { + --grid-columns: 1; + } + .col-1\@xl { + --span: 1; + } + .grid-col-2\@xl { + --grid-columns: 2; + } + .col-2\@xl { + --span: 2; + } + .grid-col-3\@xl { + --grid-columns: 3; + } + .col-3\@xl { + --span: 3; + } + .grid-col-4\@xl { + --grid-columns: 4; + } + .col-4\@xl { + --span: 4; + } + .grid-col-5\@xl { + --grid-columns: 5; + } + .col-5\@xl { + --span: 5; + } + .grid-col-6\@xl { + --grid-columns: 6; + } + .col-6\@xl { + --span: 6; + } + .grid-col-7\@xl { + --grid-columns: 7; + } + .col-7\@xl { + --span: 7; + } + .grid-col-8\@xl { + --grid-columns: 8; + } + .col-8\@xl { + --span: 8; + } + .grid-col-9\@xl { + --grid-columns: 9; + } + .col-9\@xl { + --span: 9; + } + .grid-col-10\@xl { + --grid-columns: 10; + } + .col-10\@xl { + --span: 10; + } + .grid-col-11\@xl { + --grid-columns: 11; + } + .col-11\@xl { + --span: 11; + } + .grid-col-12\@xl { + --grid-columns: 12; + } + .col-12\@xl { + --span: 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 { + flex-basis: calc((100% - (var(--grid-columns) - var(--gap-modifier, 1)) * var(--sub-gap-x)) * var(--span) / var(--grid-columns) + (var(--span) - 1) * var(--sub-gap-x)); + max-width: calc((100% - (var(--grid-columns) - var(--gap-modifier, 1)) * var(--sub-gap-x)) * var(--span) / var(--grid-columns) + (var(--span) - 1) * var(--sub-gap-x)); + } + .col\@xl { + flex-grow: 1; + flex-basis: 0; + max-width: 100%; + } + .col-content\@xl { + flex-grow: 0; + flex-basis: initial; + max-width: initial; + } + .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-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) - var(--gap-modifier, 1)) * var(--sub-gap-x)) * var(--offset) / var(--grid-columns) + (var(--offset) + var(--offset-modifier, 0)) * var(--sub-gap-x)); + } + .offset-0\@xl { + margin-left: 0; + } + @media not all and (-webkit-min-device-pixel-ratio: 0), not all and (min-resolution: 0.001dpcm) { + @supports not (translate: none) { + .offset-0\@xl { + margin-left: var(--gap-x); + } + } + } +} +*, *::after, *::before { + box-sizing: inherit; +} + +* { + font: inherit; +} + +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video, hr { + margin: 0; + padding: 0; + border: 0; +} + +html { + box-sizing: border-box; +} + +body { + background-color: var(--color-bg, white); +} + +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section, main, form legend { + display: block; +} + +ol, ul, menu { + list-style: none; +} + +blockquote, q { + quotes: none; +} + +button, input, textarea, select { + margin: 0; +} + +.btn, .form-control, .link, .reset { + background-color: transparent; + padding: 0; + border: 0; + border-radius: 0; + color: inherit; + line-height: inherit; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; +} + +select.form-control::-ms-expand { + display: none; +} + +textarea { + resize: vertical; + overflow: auto; + vertical-align: top; +} + +input::-ms-clear { + display: none; +} + +table { + border-collapse: collapse; + border-spacing: 0; +} + +img, video, svg { + max-width: 100%; +} + +[data-theme] { + background-color: var(--color-bg, hsl(0, 0%, 100%)); + color: var(--color-contrast-high, hsl(210, 7%, 21%)); +} + +:root { + --space-unit: 1rem; +} + +:root, * { + --space-xxxxs: calc(0.125 * var(--space-unit)); + --space-xxxs: calc(0.25 * var(--space-unit)); + --space-xxs: calc(0.375 * var(--space-unit)); + --space-xs: calc(0.5 * var(--space-unit)); + --space-sm: calc(0.75 * var(--space-unit)); + --space-md: calc(1.25 * var(--space-unit)); + --space-lg: calc(2 * var(--space-unit)); + --space-xl: calc(3.25 * var(--space-unit)); + --space-xxl: calc(5.25 * var(--space-unit)); + --space-xxxl: calc(8.5 * var(--space-unit)); + --space-xxxxl: calc(13.75 * var(--space-unit)); + --component-padding: var(--space-md); +} + +:root { + --radius-sm: calc(var(--radius, 0.375em)/2); + --radius-md: var(--radius, 0.375em); + --radius-lg: calc(var(--radius, 0.375em)*2); + --shadow-ring: 0 0 0 1px hsla(0, 0%, 0%, 0.05); + --shadow-xs: 0 0 0 1px hsla(0, 0%, 0%, 0.02), + 0 1px 3px -1px hsla(0, 0%, 0%, 0.2); + --shadow-sm: 0 0.3px 0.4px hsla(0, 0%, 0%, 0.02), + 0 0.9px 1.5px hsla(0, 0%, 0%, 0.045), + 0 3.5px 6px hsla(0, 0%, 0%, 0.09); + --shadow-md: 0 0.9px 1.25px hsla(0, 0%, 0%, 0.025), + 0 3px 5px hsla(0, 0%, 0%, 0.05), + 0 12px 20px hsla(0, 0%, 0%, 0.09); + --shadow-lg: 0 1.2px 1.9px -1px hsla(0, 0%, 0%, 0.01), + 0 3px 5px -1px hsla(0, 0%, 0%, 0.015), + 0 8px 15px -1px hsla(0, 0%, 0%, 0.05), + 0 28px 40px -1px hsla(0, 0%, 0%, 0.1); + --shadow-xl: 0 1.5px 2.1px -6px hsla(0, 0%, 0%, 0.009), + 0 3.6px 5.2px -6px hsla(0, 0%, 0%, 0.0115), + 0 7.3px 10.6px -6px hsla(0, 0%, 0%, 0.0125), + 0 16.2px 21.9px -6px hsla(0, 0%, 0%, 0.025), + 0 46px 60px -6px hsla(0, 0%, 0%, 0.15); + --inner-glow: inset 0 0 0.5px 1px hsla(0, 0%, 100%, 0.075); + --inner-glow-top: inset 0 1px 0.5px hsla(0, 0%, 100%, 0.075); + --ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1); + --ease-in: cubic-bezier(0.55, 0.055, 0.675, 0.19); + --ease-out: cubic-bezier(0.215, 0.61, 0.355, 1); + --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1); +} + +:root { + --heading-line-height: 1.2; + --body-line-height: 1.4; +} + +body { + font-size: var(--text-base-size, 1rem); + font-family: var(--font-primary, sans-serif); + color: var(--color-contrast-high, hsl(210, 7%, 21%)); + font-weight: var(--body-font-weight, normal); +} + +h1, h2, h3, h4 { + color: var(--color-contrast-higher, hsl(204, 28%, 7%)); + line-height: var(--heading-line-height, 1.2); + font-weight: var(--heading-font-weight, 700); +} + +h1 { + font-size: var(--text-xxl, 2rem); +} + +h2 { + font-size: var(--text-xl, 1.75rem); +} + +h3 { + font-size: var(--text-lg, 1.375rem); +} + +h4 { + font-size: var(--text-md, 1.125rem); +} + +small { + font-size: var(--text-sm, 0.75rem); +} + +a, .link { + color: var(--color-primary, hsl(250, 84%, 54%)); + text-decoration: underline; +} + +strong { + font-weight: bold; +} + +s { + text-decoration: line-through; +} + +u { + text-decoration: underline; +} + +.text-component h1, .text-component h2, .text-component h3, .text-component h4 { + line-height: calc(var(--heading-line-height) * var(--line-height-multiplier, 1)); + margin-bottom: calc(var(--space-unit) * 0.3125 * var(--text-space-y-multiplier, 1)); +} +.text-component h2, .text-component h3, .text-component h4 { + margin-top: calc(var(--space-unit) * 0.9375 * var(--text-space-y-multiplier, 1)); +} +.text-component p, .text-component blockquote, .text-component ul li, .text-component ol li { + line-height: calc(var(--body-line-height) * var(--line-height-multiplier, 1)); +} +.text-component ul, .text-component ol, .text-component p, .text-component blockquote, .text-component .text-component__block { + margin-bottom: calc(var(--space-unit) * 0.9375 * var(--text-space-y-multiplier, 1)); +} +.text-component ul, .text-component ol { + list-style-position: inside; +} +.text-component ul ul, .text-component ul ol, .text-component ol ul, .text-component ol ol { + padding-left: 1em; + margin-bottom: 0; +} +.text-component ul { + list-style-type: disc; +} +.text-component ol { + list-style-type: decimal; +} +.text-component img { + display: block; + margin: 0 auto; +} +.text-component figcaption { + text-align: center; + margin-top: calc(var(--space-unit) * 0.5); +} +.text-component em { + font-style: italic; +} +.text-component hr { + margin-top: calc(var(--space-unit) * 1.875 * var(--text-space-y-multiplier, 1)); + margin-bottom: calc(var(--space-unit) * 1.875 * var(--text-space-y-multiplier, 1)); + margin-left: auto; + margin-right: auto; +} +.text-component > *:first-child { + margin-top: 0; +} +.text-component > *:last-child { + margin-bottom: 0; +} + +.text-component__block--full-width { + width: 100vw; + margin-left: calc(50% - 50vw); +} + +@media (min-width: 48rem) { + .text-component__block--left, + .text-component__block--right { + width: 45%; + } + .text-component__block--left img, + .text-component__block--right img { + width: 100%; + } + .text-component__block--left { + float: left; + margin-right: calc(var(--space-unit) * 0.9375 * var(--text-space-y-multiplier, 1)); + } + .text-component__block--right { + float: right; + margin-left: calc(var(--space-unit) * 0.9375 * var(--text-space-y-multiplier, 1)); + } +} +@media (min-width: 90rem) { + .text-component__block--outset { + width: calc(100% + 10.5 * var(--space-unit)); + } + .text-component__block--outset img { + width: 100%; + } + .text-component__block--outset:not(.text-component__block--right) { + margin-left: calc(-5.25 * var(--space-unit)); + } + .text-component__block--left, .text-component__block--right { + width: 50%; + } + .text-component__block--right.text-component__block--outset { + margin-right: calc(-5.25 * var(--space-unit)); + } +} +:root { + --icon-xxxs: 8px; + --icon-xxs: 12px; + --icon-xs: 16px; + --icon-sm: 24px; + --icon-md: 32px; + --icon-lg: 48px; + --icon-xl: 64px; + --icon-xxl: 96px; + --icon-xxxl: 128px; +} + +.icon { + --size: 1em; + font-size: var(--size); + height: 1em; + width: 1em; + display: inline-block; + color: inherit; + fill: currentColor; + line-height: 1; + flex-shrink: 0; + max-width: initial; +} + +.icon--xxxs { + --size: var(--icon-xxxs); +} + +.icon--xxs { + --size: var(--icon-xxs); +} + +.icon--xs { + --size: var(--icon-xs); +} + +.icon--sm { + --size: var(--icon-sm); +} + +.icon--md { + --size: var(--icon-md); +} + +.icon--lg { + --size: var(--icon-lg); +} + +.icon--xl { + --size: var(--icon-xl); +} + +.icon--xxl { + --size: var(--icon-xxl); +} + +.icon--xxxl { + --size: var(--icon-xxxl); +} + +.icon--is-spinning { + animation: icon-spin 1s infinite linear; +} + +@keyframes icon-spin { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} +.icon use { + color: inherit; + fill: currentColor; +} + +.btn { + position: relative; + display: inline-flex; + justify-content: center; + align-items: center; + white-space: nowrap; + text-decoration: none; + font-size: var(--btn-font-size, 1em); + padding-top: var(--btn-padding-y, 0.5em); + padding-bottom: var(--btn-padding-y, 0.5em); + padding-left: var(--btn-padding-x, 0.75em); + padding-right: var(--btn-padding-x, 0.75em); + border-radius: var(--btn-radius, 0.25em); +} + +.btn--sm { + font-size: var(--btn-font-size-sm, 0.8em); +} + +.btn--md { + font-size: var(--btn-font-size-md, 1.2em); +} + +.btn--lg { + font-size: var(--btn-font-size-lg, 1.4em); +} + +.btn--icon { + padding: var(--btn-padding-y, 0.5em); +} + +.form-control { + font-size: var(--form-control-font-size, 1em); + padding-top: var(--form-control-padding-y, 0.5em); + padding-bottom: var(--form-control-padding-y, 0.5em); + padding-left: var(--form-control-padding-x, 0.75em); + padding-right: var(--form-control-padding-x, 0.75em); + border-radius: var(--form-control-radius, 0.25em); +} + +.form-legend { + color: var(--color-contrast-higher, hsl(204, 28%, 7%)); + line-height: var(--heading-line-height, 1.2); + font-weight: var(--heading-font-weight, 700); + font-size: var(--text-md, 1.125rem); + margin-bottom: var(--space-md); +} + +.form-label { + display: inline-block; + font-size: var(--text-sm, 0.75rem); +} + +:root { + --z-index-header: 3; + --z-index-popover: 5; + --z-index-fixed-element: 10; + --z-index-overlay: 15; +} + +:root { + --display: block; +} + +.is-visible { + display: var(--display) !important; +} + +.is-hidden { + display: none !important; +} + +html:not(.js) .no-js\:is-hidden { + display: none !important; +} + +@media print { + .print\:is-hidden { + display: none !important; + } + .print\:shadow-none { + box-shadow: none; + } +} +.sr-only, .sr-only-focusable:not(:focus):not(:focus-within) { + position: absolute; + clip: rect(1px, 1px, 1px, 1px); + clip-path: inset(50%); + width: 1px; + height: 1px; + overflow: hidden; + padding: 0; + border: 0; + white-space: nowrap; +} + +.flex { + display: flex; +} + +.inline-flex { + display: inline-flex; +} + +.flex-wrap { + flex-wrap: wrap; +} + +.flex-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-start { + justify-content: flex-start; +} + +.justify-end { + justify-content: flex-end; +} + +.justify-center { + justify-content: center; +} + +.justify-between { + justify-content: space-between; +} + +.items-center { + align-items: center; +} + +.items-start { + align-items: flex-start; +} + +.items-end { + align-items: flex-end; +} + +.items-baseline { + align-items: baseline; +} + +.items-stretch { + align-items: stretch; +} + +.content-start { + align-content: start; +} + +.content-end { + align-content: end; +} + +.content-center { + align-content: center; +} + +.content-between { + align-content: space-between; +} + +.order-1 { + order: 1; +} + +.order-2 { + order: 2; +} + +.order-3 { + order: 3; +} + +[class^=aspect-ratio], [class*=" aspect-ratio"] { + --aspect-ratio: calc(16/9); + position: relative; + height: 0; + padding-bottom: calc(100% / (var(--aspect-ratio))); +} +[class^=aspect-ratio] > *, [class*=" aspect-ratio"] > * { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; +} +[class^=aspect-ratio] > *:not(iframe), [class*=" aspect-ratio"] > *:not(iframe) { + -o-object-fit: cover; + object-fit: cover; +} + +.aspect-ratio-16\:9 { + --aspect-ratio: calc(16/9); +} + +.aspect-ratio-3\:2 { + --aspect-ratio: calc(3/2); +} + +.aspect-ratio-4\:3 { + --aspect-ratio: calc(4/3); +} + +.aspect-ratio-5\:4 { + --aspect-ratio: calc(5/4); +} + +.aspect-ratio-1\:1 { + --aspect-ratio: calc(1/1); +} + +.aspect-ratio-4\:5 { + --aspect-ratio: calc(4/5); +} + +.aspect-ratio-3\:4 { + --aspect-ratio: calc(3/4); +} + +.aspect-ratio-2\:3 { + --aspect-ratio: calc(2/3); +} + +.aspect-ratio-9\:16 { + --aspect-ratio: calc(9/16); +} + +.ratio-16\:9 { + aspect-ratio: 16/9; +} + +.ratio-3\:2 { + aspect-ratio: 3/2; +} + +.ratio-4\:3 { + aspect-ratio: 4/3; +} + +.ratio-5\:4 { + aspect-ratio: 5/4; +} + +.ratio-1\:1 { + aspect-ratio: 1/1; +} + +.ratio-4\:5 { + aspect-ratio: 4/5; +} + +.ratio-3\:4 { + aspect-ratio: 3/4; +} + +.ratio-2\:3 { + aspect-ratio: 2/3; +} + +.ratio-9\:16 { + aspect-ratio: 9/16; +} + +.block { + display: block; +} + +.inline-block { + display: inline-block; +} + +.inline { + display: inline; +} + +.contents { + display: contents; +} + +.hide { + display: none; +} + +.css-grid { + display: grid; +} + +.css-inline-grid { + display: inline-grid; +} + +.space-unit-rem { + --space-unit: 1rem; +} + +.space-unit-em { + --space-unit: 1em; +} + +.space-unit-px { + --space-unit: 16px; +} + +.margin-xxxxs { + margin: var(--space-xxxxs); +} + +.margin-xxxs { + margin: var(--space-xxxs); +} + +.margin-xxs { + margin: var(--space-xxs); +} + +.margin-xs { + margin: var(--space-xs); +} + +.margin-sm { + margin: var(--space-sm); +} + +.margin-md { + margin: var(--space-md); +} + +.margin-lg { + margin: var(--space-lg); +} + +.margin-xl { + margin: var(--space-xl); +} + +.margin-xxl { + margin: var(--space-xxl); +} + +.margin-xxxl { + margin: var(--space-xxxl); +} + +.margin-xxxxl { + margin: var(--space-xxxxl); +} + +.margin-auto { + margin: auto; +} + +.margin-0 { + margin: 0; +} + +.margin-top-xxxxs { + margin-top: var(--space-xxxxs); +} + +.margin-top-xxxs { + margin-top: var(--space-xxxs); +} + +.margin-top-xxs { + margin-top: var(--space-xxs); +} + +.margin-top-xs { + margin-top: var(--space-xs); +} + +.margin-top-sm { + margin-top: var(--space-sm); +} + +.margin-top-md { + margin-top: var(--space-md); +} + +.margin-top-lg { + margin-top: var(--space-lg); +} + +.margin-top-xl { + margin-top: var(--space-xl); +} + +.margin-top-xxl { + margin-top: var(--space-xxl); +} + +.margin-top-xxxl { + margin-top: var(--space-xxxl); +} + +.margin-top-xxxxl { + margin-top: var(--space-xxxxl); +} + +.margin-top-auto { + margin-top: auto; +} + +.margin-top-0 { + margin-top: 0; +} + +.margin-bottom-xxxxs { + margin-bottom: var(--space-xxxxs); +} + +.margin-bottom-xxxs { + margin-bottom: var(--space-xxxs); +} + +.margin-bottom-xxs { + margin-bottom: var(--space-xxs); +} + +.margin-bottom-xs { + margin-bottom: var(--space-xs); +} + +.margin-bottom-sm { + margin-bottom: var(--space-sm); +} + +.margin-bottom-md { + margin-bottom: var(--space-md); +} + +.margin-bottom-lg { + margin-bottom: var(--space-lg); +} + +.margin-bottom-xl { + margin-bottom: var(--space-xl); +} + +.margin-bottom-xxl { + margin-bottom: var(--space-xxl); +} + +.margin-bottom-xxxl { + margin-bottom: var(--space-xxxl); +} + +.margin-bottom-xxxxl { + margin-bottom: var(--space-xxxxl); +} + +.margin-bottom-auto { + margin-bottom: auto; +} + +.margin-bottom-0 { + margin-bottom: 0; +} + +.margin-right-xxxxs { + margin-right: var(--space-xxxxs); +} + +.margin-right-xxxs { + margin-right: var(--space-xxxs); +} + +.margin-right-xxs { + margin-right: var(--space-xxs); +} + +.margin-right-xs { + margin-right: var(--space-xs); +} + +.margin-right-sm { + margin-right: var(--space-sm); +} + +.margin-right-md { + margin-right: var(--space-md); +} + +.margin-right-lg { + margin-right: var(--space-lg); +} + +.margin-right-xl { + margin-right: var(--space-xl); +} + +.margin-right-xxl { + margin-right: var(--space-xxl); +} + +.margin-right-xxxl { + margin-right: var(--space-xxxl); +} + +.margin-right-xxxxl { + margin-right: var(--space-xxxxl); +} + +.margin-right-auto { + margin-right: auto; +} + +.margin-right-0 { + margin-right: 0; +} + +.margin-left-xxxxs { + margin-left: var(--space-xxxxs); +} + +.margin-left-xxxs { + margin-left: var(--space-xxxs); +} + +.margin-left-xxs { + margin-left: var(--space-xxs); +} + +.margin-left-xs { + margin-left: var(--space-xs); +} + +.margin-left-sm { + margin-left: var(--space-sm); +} + +.margin-left-md { + margin-left: var(--space-md); +} + +.margin-left-lg { + margin-left: var(--space-lg); +} + +.margin-left-xl { + margin-left: var(--space-xl); +} + +.margin-left-xxl { + margin-left: var(--space-xxl); +} + +.margin-left-xxxl { + margin-left: var(--space-xxxl); +} + +.margin-left-xxxxl { + margin-left: var(--space-xxxxl); +} + +.margin-left-auto { + margin-left: auto; +} + +.margin-left-0 { + margin-left: 0; +} + +.margin-x-xxxxs { + margin-left: var(--space-xxxxs); + margin-right: var(--space-xxxxs); +} + +.margin-x-xxxs { + margin-left: var(--space-xxxs); + margin-right: var(--space-xxxs); +} + +.margin-x-xxs { + margin-left: var(--space-xxs); + margin-right: var(--space-xxs); +} + +.margin-x-xs { + margin-left: var(--space-xs); + margin-right: var(--space-xs); +} + +.margin-x-sm { + margin-left: var(--space-sm); + margin-right: var(--space-sm); +} + +.margin-x-md { + margin-left: var(--space-md); + margin-right: var(--space-md); +} + +.margin-x-lg { + margin-left: var(--space-lg); + margin-right: var(--space-lg); +} + +.margin-x-xl { + margin-left: var(--space-xl); + margin-right: var(--space-xl); +} + +.margin-x-xxl { + margin-left: var(--space-xxl); + margin-right: var(--space-xxl); +} + +.margin-x-xxxl { + margin-left: var(--space-xxxl); + margin-right: var(--space-xxxl); +} + +.margin-x-xxxxl { + margin-left: var(--space-xxxxl); + margin-right: var(--space-xxxxl); +} + +.margin-x-auto { + margin-left: auto; + margin-right: auto; +} + +.margin-x-0 { + margin-left: 0; + margin-right: 0; +} + +.margin-y-xxxxs { + margin-top: var(--space-xxxxs); + margin-bottom: var(--space-xxxxs); +} + +.margin-y-xxxs { + margin-top: var(--space-xxxs); + margin-bottom: var(--space-xxxs); +} + +.margin-y-xxs { + margin-top: var(--space-xxs); + margin-bottom: var(--space-xxs); +} + +.margin-y-xs { + margin-top: var(--space-xs); + margin-bottom: var(--space-xs); +} + +.margin-y-sm { + margin-top: var(--space-sm); + margin-bottom: var(--space-sm); +} + +.margin-y-md { + margin-top: var(--space-md); + margin-bottom: var(--space-md); +} + +.margin-y-lg { + margin-top: var(--space-lg); + margin-bottom: var(--space-lg); +} + +.margin-y-xl { + margin-top: var(--space-xl); + margin-bottom: var(--space-xl); +} + +.margin-y-xxl { + margin-top: var(--space-xxl); + margin-bottom: var(--space-xxl); +} + +.margin-y-xxxl { + margin-top: var(--space-xxxl); + margin-bottom: var(--space-xxxl); +} + +.margin-y-xxxxl { + margin-top: var(--space-xxxxl); + margin-bottom: var(--space-xxxxl); +} + +.margin-y-auto { + margin-top: auto; + margin-bottom: auto; +} + +.margin-y-0 { + margin-top: 0; + margin-bottom: 0; +} + +.padding-xxxxs { + padding: var(--space-xxxxs); +} + +.padding-xxxs { + padding: var(--space-xxxs); +} + +.padding-xxs { + padding: var(--space-xxs); +} + +.padding-xs { + padding: var(--space-xs); +} + +.padding-sm { + padding: var(--space-sm); +} + +.padding-md { + padding: var(--space-md); +} + +.padding-lg { + padding: var(--space-lg); +} + +.padding-xl { + padding: var(--space-xl); +} + +.padding-xxl { + padding: var(--space-xxl); +} + +.padding-xxxl { + padding: var(--space-xxxl); +} + +.padding-xxxxl { + padding: var(--space-xxxxl); +} + +.padding-0 { + padding: 0; +} + +.padding-component { + padding: var(--component-padding); +} + +.padding-top-xxxxs { + padding-top: var(--space-xxxxs); +} + +.padding-top-xxxs { + padding-top: var(--space-xxxs); +} + +.padding-top-xxs { + padding-top: var(--space-xxs); +} + +.padding-top-xs { + padding-top: var(--space-xs); +} + +.padding-top-sm { + padding-top: var(--space-sm); +} + +.padding-top-md { + padding-top: var(--space-md); +} + +.padding-top-lg { + padding-top: var(--space-lg); +} + +.padding-top-xl { + padding-top: var(--space-xl); +} + +.padding-top-xxl { + padding-top: var(--space-xxl); +} + +.padding-top-xxxl { + padding-top: var(--space-xxxl); +} + +.padding-top-xxxxl { + padding-top: var(--space-xxxxl); +} + +.padding-top-0 { + padding-top: 0; +} + +.padding-top-component { + padding-top: var(--component-padding); +} + +.padding-bottom-xxxxs { + padding-bottom: var(--space-xxxxs); +} + +.padding-bottom-xxxs { + padding-bottom: var(--space-xxxs); +} + +.padding-bottom-xxs { + padding-bottom: var(--space-xxs); +} + +.padding-bottom-xs { + padding-bottom: var(--space-xs); +} + +.padding-bottom-sm { + padding-bottom: var(--space-sm); +} + +.padding-bottom-md { + padding-bottom: var(--space-md); +} + +.padding-bottom-lg { + padding-bottom: var(--space-lg); +} + +.padding-bottom-xl { + padding-bottom: var(--space-xl); +} + +.padding-bottom-xxl { + padding-bottom: var(--space-xxl); +} + +.padding-bottom-xxxl { + padding-bottom: var(--space-xxxl); +} + +.padding-bottom-xxxxl { + padding-bottom: var(--space-xxxxl); +} + +.padding-bottom-0 { + padding-bottom: 0; +} + +.padding-bottom-component { + padding-bottom: var(--component-padding); +} + +.padding-right-xxxxs { + padding-right: var(--space-xxxxs); +} + +.padding-right-xxxs { + padding-right: var(--space-xxxs); +} + +.padding-right-xxs { + padding-right: var(--space-xxs); +} + +.padding-right-xs { + padding-right: var(--space-xs); +} + +.padding-right-sm { + padding-right: var(--space-sm); +} + +.padding-right-md { + padding-right: var(--space-md); +} + +.padding-right-lg { + padding-right: var(--space-lg); +} + +.padding-right-xl { + padding-right: var(--space-xl); +} + +.padding-right-xxl { + padding-right: var(--space-xxl); +} + +.padding-right-xxxl { + padding-right: var(--space-xxxl); +} + +.padding-right-xxxxl { + padding-right: var(--space-xxxxl); +} + +.padding-right-0 { + padding-right: 0; +} + +.padding-right-component { + padding-right: var(--component-padding); +} + +.padding-left-xxxxs { + padding-left: var(--space-xxxxs); +} + +.padding-left-xxxs { + padding-left: var(--space-xxxs); +} + +.padding-left-xxs { + padding-left: var(--space-xxs); +} + +.padding-left-xs { + padding-left: var(--space-xs); +} + +.padding-left-sm { + padding-left: var(--space-sm); +} + +.padding-left-md { + padding-left: var(--space-md); +} + +.padding-left-lg { + padding-left: var(--space-lg); +} + +.padding-left-xl { + padding-left: var(--space-xl); +} + +.padding-left-xxl { + padding-left: var(--space-xxl); +} + +.padding-left-xxxl { + padding-left: var(--space-xxxl); +} + +.padding-left-xxxxl { + padding-left: var(--space-xxxxl); +} + +.padding-left-0 { + padding-left: 0; +} + +.padding-left-component { + padding-left: var(--component-padding); +} + +.padding-x-xxxxs { + padding-left: var(--space-xxxxs); + padding-right: var(--space-xxxxs); +} + +.padding-x-xxxs { + padding-left: var(--space-xxxs); + padding-right: var(--space-xxxs); +} + +.padding-x-xxs { + padding-left: var(--space-xxs); + padding-right: var(--space-xxs); +} + +.padding-x-xs { + padding-left: var(--space-xs); + padding-right: var(--space-xs); +} + +.padding-x-sm { + padding-left: var(--space-sm); + padding-right: var(--space-sm); +} + +.padding-x-md { + padding-left: var(--space-md); + padding-right: var(--space-md); +} + +.padding-x-lg { + padding-left: var(--space-lg); + padding-right: var(--space-lg); +} + +.padding-x-xl { + padding-left: var(--space-xl); + padding-right: var(--space-xl); +} + +.padding-x-xxl { + padding-left: var(--space-xxl); + padding-right: var(--space-xxl); +} + +.padding-x-xxxl { + padding-left: var(--space-xxxl); + padding-right: var(--space-xxxl); +} + +.padding-x-xxxxl { + padding-left: var(--space-xxxxl); + padding-right: var(--space-xxxxl); +} + +.padding-x-0 { + padding-left: 0; + padding-right: 0; +} + +.padding-x-component { + padding-left: var(--component-padding); + padding-right: var(--component-padding); +} + +.padding-y-xxxxs { + padding-top: var(--space-xxxxs); + padding-bottom: var(--space-xxxxs); +} + +.padding-y-xxxs { + padding-top: var(--space-xxxs); + padding-bottom: var(--space-xxxs); +} + +.padding-y-xxs { + padding-top: var(--space-xxs); + padding-bottom: var(--space-xxs); +} + +.padding-y-xs { + padding-top: var(--space-xs); + padding-bottom: var(--space-xs); +} + +.padding-y-sm { + padding-top: var(--space-sm); + padding-bottom: var(--space-sm); +} + +.padding-y-md { + padding-top: var(--space-md); + padding-bottom: var(--space-md); +} + +.padding-y-lg { + padding-top: var(--space-lg); + padding-bottom: var(--space-lg); +} + +.padding-y-xl { + padding-top: var(--space-xl); + padding-bottom: var(--space-xl); +} + +.padding-y-xxl { + padding-top: var(--space-xxl); + padding-bottom: var(--space-xxl); +} + +.padding-y-xxxl { + padding-top: var(--space-xxxl); + padding-bottom: var(--space-xxxl); +} + +.padding-y-xxxxl { + padding-top: var(--space-xxxxl); + padding-bottom: var(--space-xxxxl); +} + +.padding-y-0 { + padding-top: 0; + padding-bottom: 0; +} + +.padding-y-component { + padding-top: var(--component-padding); + padding-bottom: var(--component-padding); +} + +.align-baseline { + vertical-align: baseline; +} + +.align-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; +} + +.truncate, .text-truncate { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.text-replace { + overflow: hidden; + color: transparent; + text-indent: 100%; + white-space: nowrap; +} + +.break-word { + overflow-wrap: break-word; + min-width: 0; +} + +.text-unit-rem, .text-unit-em, .text-unit-px { + font-size: var(--text-unit); +} + +.text-unit-rem { + --text-unit: 1rem; +} + +.text-unit-em { + --text-unit: 1em; +} + +.text-unit-px { + --text-unit: 16px; +} + +.text-xs { + font-size: var(--text-xs, 0.6875rem); +} + +.text-sm { + font-size: var(--text-sm, 0.75rem); +} + +.text-base { + font-size: var(--text-unit, 1rem); +} + +.text-md { + font-size: var(--text-md, 1.125rem); +} + +.text-lg { + font-size: var(--text-lg, 1.375rem); +} + +.text-xl { + font-size: var(--text-xl, 1.75rem); +} + +.text-xxl { + font-size: var(--text-xxl, 2rem); +} + +.text-xxxl { + font-size: var(--text-xxxl, 2.5rem); +} + +.text-xxxxl { + font-size: var(--text-xxxxl, 3rem); +} + +.text-uppercase { + text-transform: uppercase; +} + +.text-capitalize { + text-transform: capitalize; +} + +.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-thin { + font-weight: 100; +} + +.font-extralight { + font-weight: 200; +} + +.font-light { + font-weight: 300; +} + +.font-normal { + font-weight: 400; +} + +.font-medium { + font-weight: 500; +} + +.font-semibold { + font-weight: 600; +} + +.font-bold, .text-bold { + font-weight: 700; +} + +.font-extrabold { + font-weight: 800; +} + +.font-black { + font-weight: 900; +} + +.font-italic { + font-style: italic; +} + +.font-smooth { + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.font-primary { + font-family: var(--font-primary); +} + +.text-center { + text-align: center; +} + +.text-left { + text-align: left; +} + +.text-right { + text-align: right; +} + +.text-justify { + text-align: justify; +} + +.text-line-through { + text-decoration: line-through; +} + +.text-underline { + text-decoration: underline; +} + +.text-decoration-none { + text-decoration: none; +} + +.text-shadow-xs { + text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); +} + +.text-shadow-sm { + text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); +} + +.text-shadow-md { + text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.2); +} + +.text-shadow-lg { + text-shadow: 0 1px 4px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.15), 0 4px 16px rgba(0, 0, 0, 0.2); +} + +.text-shadow-xl { + text-shadow: 0 1px 4px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.15), 0 4px 16px rgba(0, 0, 0, 0.2), 0 6px 24px rgba(0, 0, 0, 0.25); +} + +.text-shadow-none { + text-shadow: none; +} + +.text-indent-sm { + text-indent: 0.5em; +} + +.text-indent-md { + text-indent: 1em; +} + +.text-indent-lg { + text-indent: 1.5em; +} + +.text-space-y-xxs { + --text-space-y-multiplier: 0.25 !important; +} + +.text-space-y-xs { + --text-space-y-multiplier: 0.5 !important; +} + +.text-space-y-sm { + --text-space-y-multiplier: 0.75 !important; +} + +.text-space-y-md { + --text-space-y-multiplier: 1.25 !important; +} + +.text-space-y-lg { + --text-space-y-multiplier: 1.5 !important; +} + +.text-space-y-xl { + --text-space-y-multiplier: 1.75 !important; +} + +.text-space-y-xxl { + --text-space-y-multiplier: 2 !important; +} + +.line-height-xs { + --heading-line-height: 1; + --body-line-height: 1.1; +} +.line-height-xs:not(.text-component) { + line-height: 1.1; +} + +.line-height-sm { + --heading-line-height: 1.1; + --body-line-height: 1.2; +} +.line-height-sm:not(.text-component) { + line-height: 1.2; +} + +.line-height-md { + --heading-line-height: 1.15; + --body-line-height: 1.4; +} +.line-height-md:not(.text-component) { + line-height: 1.4; +} + +.line-height-lg { + --heading-line-height: 1.22; + --body-line-height: 1.58; +} +.line-height-lg:not(.text-component) { + line-height: 1.58; +} + +.line-height-xl { + --heading-line-height: 1.3; + --body-line-height: 1.72; +} +.line-height-xl:not(.text-component) { + line-height: 1.72; +} + +.line-height-body { + line-height: var(--body-line-height); +} + +.line-height-heading { + line-height: var(--heading-line-height); +} + +.line-height-normal { + line-height: normal !important; +} + +.line-height-1 { + line-height: 1 !important; +} + +.line-clamp-1 { + overflow: hidden; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 1; +} + +.line-clamp-2 { + overflow: hidden; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; +} + +.line-clamp-3 { + overflow: hidden; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 3; +} + +.line-clamp-4 { + overflow: hidden; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 4; +} + +.column-count-1 { + -moz-column-count: 1; + column-count: 1; +} + +.column-count-2 { + -moz-column-count: 2; + column-count: 2; +} + +.column-count-3 { + -moz-column-count: 3; + column-count: 3; +} + +.column-count-4 { + -moz-column-count: 4; + column-count: 4; +} + +.list-style-none { + list-style: none; +} + +.ws-nowrap, .text-nowrap { + white-space: nowrap; +} + +.cursor-pointer { + cursor: pointer; +} + +.cursor-default { + cursor: default; +} + +.pointer-events-auto { + pointer-events: auto; +} + +.pointer-events-none { + pointer-events: none; +} + +.user-select-none { + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; +} + +.user-select-all { + -webkit-user-select: all; + -moz-user-select: all; + user-select: all; +} + +[class^=color-], [class*=" color-"] { + --color-o: 1; +} + +.color-inherit { + color: inherit; +} + +.color-bg-darker { + color: hsla(var(--color-bg-darker-h), var(--color-bg-darker-s), var(--color-bg-darker-l), var(--color-o, 1)); +} + +.color-bg-dark { + color: hsla(var(--color-bg-dark-h), var(--color-bg-dark-s), var(--color-bg-dark-l), var(--color-o, 1)); +} + +.color-bg { + color: hsla(var(--color-bg-h), var(--color-bg-s), var(--color-bg-l), var(--color-o, 1)); +} + +.color-bg-light { + color: hsla(var(--color-bg-light-h), var(--color-bg-light-s), var(--color-bg-light-l), var(--color-o, 1)); +} + +.color-bg-lighter { + color: hsla(var(--color-bg-lighter-h), var(--color-bg-lighter-s), var(--color-bg-lighter-l), var(--color-o, 1)); +} + +.color-contrast-lower { + color: hsla(var(--color-contrast-lower-h), var(--color-contrast-lower-s), var(--color-contrast-lower-l), var(--color-o, 1)); +} + +.color-contrast-lower { + color: #a2a2a2; +} + + +.color-contrast-low { + color: hsla(var(--color-contrast-low-h), var(--color-contrast-low-s), var(--color-contrast-low-l), var(--color-o, 1)); +} + +.color-contrast-low { + color: #858585; +} + +.color-contrast-medium { + color: hsla(var(--color-contrast-medium-h), var(--color-contrast-medium-s), var(--color-contrast-medium-l), var(--color-o, 1)); +} + +.color-contrast-medium { + color: #646464; +} + +.color-contrast-high { + color: hsla(var(--color-contrast-high-h), var(--color-contrast-high-s), var(--color-contrast-high-l), var(--color-o, 1)); +} + +.color-contrast-higher { + color: hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), var(--color-o, 1)); +} + +.color-primary-darker { + color: hsla(var(--color-primary-darker-h), var(--color-primary-darker-s), var(--color-primary-darker-l), var(--color-o, 1)); +} + +.color-primary-dark { + color: hsla(var(--color-primary-dark-h), var(--color-primary-dark-s), var(--color-primary-dark-l), var(--color-o, 1)); +} + +.color-primary { + color: hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), var(--color-o, 1)); +} + +.color-primary-light { + color: hsla(var(--color-primary-light-h), var(--color-primary-light-s), var(--color-primary-light-l), var(--color-o, 1)); +} + +.color-primary-lighter { + color: hsla(var(--color-primary-lighter-h), var(--color-primary-lighter-s), var(--color-primary-lighter-l), var(--color-o, 1)); +} + +.color-accent-darker { + color: hsla(var(--color-accent-darker-h), var(--color-accent-darker-s), var(--color-accent-darker-l), var(--color-o, 1)); +} + +.color-accent-dark { + color: hsla(var(--color-accent-dark-h), var(--color-accent-dark-s), var(--color-accent-dark-l), var(--color-o, 1)); +} + +.color-accent { + color: hsla(var(--color-accent-h), var(--color-accent-s), var(--color-accent-l), var(--color-o, 1)); +} + +.color-accent-light { + color: hsla(var(--color-accent-light-h), var(--color-accent-light-s), var(--color-accent-light-l), var(--color-o, 1)); +} + +.color-accent-lighter { + color: hsla(var(--color-accent-lighter-h), var(--color-accent-lighter-s), var(--color-accent-lighter-l), var(--color-o, 1)); +} + +.color-success-darker { + color: hsla(var(--color-success-darker-h), var(--color-success-darker-s), var(--color-success-darker-l), var(--color-o, 1)); +} + +.color-success-dark { + color: hsla(var(--color-success-dark-h), var(--color-success-dark-s), var(--color-success-dark-l), var(--color-o, 1)); +} + +.color-success { + color: hsla(var(--color-success-h), var(--color-success-s), var(--color-success-l), var(--color-o, 1)); +} + +.color-success-light { + color: hsla(var(--color-success-light-h), var(--color-success-light-s), var(--color-success-light-l), var(--color-o, 1)); +} + +.color-success-lighter { + color: hsla(var(--color-success-lighter-h), var(--color-success-lighter-s), var(--color-success-lighter-l), var(--color-o, 1)); +} + +.color-warning-darker { + color: hsla(var(--color-warning-darker-h), var(--color-warning-darker-s), var(--color-warning-darker-l), var(--color-o, 1)); +} + +.color-warning-dark { + color: hsla(var(--color-warning-dark-h), var(--color-warning-dark-s), var(--color-warning-dark-l), var(--color-o, 1)); +} + +.color-warning { + color: hsla(var(--color-warning-h), var(--color-warning-s), var(--color-warning-l), var(--color-o, 1)); +} + +.color-warning-light { + color: hsla(var(--color-warning-light-h), var(--color-warning-light-s), var(--color-warning-light-l), var(--color-o, 1)); +} + +.color-warning-lighter { + color: hsla(var(--color-warning-lighter-h), var(--color-warning-lighter-s), var(--color-warning-lighter-l), var(--color-o, 1)); +} + +.color-error-darker { + color: hsla(var(--color-error-darker-h), var(--color-error-darker-s), var(--color-error-darker-l), var(--color-o, 1)); +} + +.color-error-dark { + color: hsla(var(--color-error-dark-h), var(--color-error-dark-s), var(--color-error-dark-l), var(--color-o, 1)); +} + +.color-error { + color: hsla(var(--color-error-h), var(--color-error-s), var(--color-error-l), var(--color-o, 1)); +} + +.color-error-light { + color: hsla(var(--color-error-light-h), var(--color-error-light-s), var(--color-error-light-l), var(--color-o, 1)); +} + +.color-error-lighter { + color: hsla(var(--color-error-lighter-h), var(--color-error-lighter-s), var(--color-error-lighter-l), var(--color-o, 1)); +} + +.color-white { + color: hsla(var(--color-white-h), var(--color-white-s), var(--color-white-l), var(--color-o, 1)); +} + +.color-black { + color: hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), var(--color-o, 1)); +} + +.color-opacity-0 { + --color-o: 0; +} + +.color-opacity-5\% { + --color-o: 0.05; +} + +.color-opacity-10\% { + --color-o: 0.1; +} + +.color-opacity-15\% { + --color-o: 0.15; +} + +.color-opacity-20\% { + --color-o: 0.2; +} + +.color-opacity-25\% { + --color-o: 0.25; +} + +.color-opacity-30\% { + --color-o: 0.3; +} + +.color-opacity-40\% { + --color-o: 0.4; +} + +.color-opacity-50\% { + --color-o: 0.5; +} + +.color-opacity-60\% { + --color-o: 0.6; +} + +.color-opacity-70\% { + --color-o: 0.7; +} + +.color-opacity-75\% { + --color-o: 0.75; +} + +.color-opacity-80\% { + --color-o: 0.8; +} + +.color-opacity-85\% { + --color-o: 0.85; +} + +.color-opacity-90\% { + --color-o: 0.9; +} + +.color-opacity-95\% { + --color-o: 0.95; +} + +[class^=color-gradient], [class*=" color-gradient"] { + color: transparent !important; + -webkit-background-clip: text; + background-clip: text; + opacity: var(--color-o, 1); +} + +.width-xxxxs { + width: var(--size-xxxxs, 0.25rem); +} + +.width-xxxs { + width: var(--size-xxxs, 0.5rem); +} + +.width-xxs { + width: var(--size-xxs, 0.75rem); +} + +.width-xs { + width: var(--size-xs, 1rem); +} + +.width-sm { + width: var(--size-sm, 1.5rem); +} + +.width-md { + width: var(--size-md, 2rem); +} + +.width-lg { + width: var(--size-lg, 3rem); +} + +.width-xl { + width: var(--size-xl, 4rem); +} + +.width-xxl { + width: var(--size-xxl, 6rem); +} + +.width-xxxl { + width: var(--size-xxxl, 8rem); +} + +.width-xxxxl { + width: var(--size-xxxxl, 16rem); +} + +.width-0 { + width: 0; +} + +.width-10\% { + width: 10%; +} + +.width-20\% { + width: 20%; +} + +.width-25\% { + width: 25%; +} + +.width-30\% { + width: 30%; +} + +.width-33\% { + width: 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; +} + +.width-inherit { + width: inherit; +} + +.height-xxxxs { + height: var(--size-xxxxs, 0.25rem); +} + +.height-xxxs { + height: var(--size-xxxs, 0.5rem); +} + +.height-xxs { + height: var(--size-xxs, 0.75rem); +} + +.height-xs { + height: var(--size-xs, 1rem); +} + +.height-sm { + height: var(--size-sm, 1.5rem); +} + +.height-md { + height: var(--size-md, 2rem); +} + +.height-lg { + height: var(--size-lg, 3rem); +} + +.height-xl { + height: var(--size-xl, 4rem); +} + +.height-xxl { + height: var(--size-xxl, 6rem); +} + +.height-xxxl { + height: var(--size-xxxl, 8rem); +} + +.height-xxxxl { + height: var(--size-xxxxl, 16rem); +} + +.height-0 { + height: 0; +} + +.height-10\% { + height: 10%; +} + +.height-20\% { + height: 20%; +} + +.height-25\% { + height: 25%; +} + +.height-30\% { + height: 30%; +} + +.height-33\% { + height: 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; +} + +.height-inherit { + height: inherit; +} + +.min-width-0 { + min-width: 0; +} + +.min-width-25\% { + min-width: 25%; +} + +.min-width-33\% { + min-width: 33.3333333333%; +} + +.min-width-50\% { + min-width: 50%; +} + +.min-width-66\% { + min-width: 66.6666666667%; +} + +.min-width-75\% { + min-width: 75%; +} + +.min-width-100\% { + min-width: 100%; +} + +.min-width-100vw { + min-width: 100vw; +} + +.min-height-0 { + min-height: 0; +} + +.min-height-100\% { + min-height: 100%; +} + +.min-height-100vh { + min-height: 100vh; +} + +:root { + --max-width-xxxxxs: 17.5rem; + --max-width-xxxxs: 20rem; + --max-width-xxxs: 26rem; + --max-width-xxs: 32rem; + --max-width-xs: 38rem; + --max-width-sm: 48rem; + --max-width-md: 64rem; + --max-width-lg: 80rem; + --max-width-xl: 90rem; + --max-width-xxl: 100rem; + --max-width-xxxl: 120rem; + --max-width-xxxxl: 150rem; +} + +.max-width-xxxxxs { + max-width: var(--max-width-xxxxxs); +} + +.max-width-xxxxs { + max-width: var(--max-width-xxxxs); +} + +.max-width-xxxs { + max-width: var(--max-width-xxxs); +} + +.max-width-xxs { + max-width: var(--max-width-xxs); +} + +.max-width-xs { + max-width: var(--max-width-xs); +} + +.max-width-sm { + max-width: var(--max-width-sm); +} + +.max-width-md { + max-width: var(--max-width-md); +} + +.max-width-lg { + max-width: var(--max-width-lg); +} + +.max-width-xl { + max-width: var(--max-width-xl); +} + +.max-width-xxl { + max-width: var(--max-width-xxl); +} + +.max-width-xxxl { + max-width: var(--max-width-xxxl); +} + +.max-width-xxxxl { + max-width: var(--max-width-xxxxl); +} + +.max-width-100\% { + max-width: 100%; +} + +.max-width-none { + max-width: none; +} + +[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-100\% { + max-height: 100%; +} + +.max-height-100vh { + max-height: 100vh; +} + +.shadow-ring { + box-shadow: var(--shadow-ring); +} + +.shadow-xs { + box-shadow: var(--shadow-xs); +} + +.shadow-xs.shadow-ring { + box-shadow: var(--shadow-xs), var(--shadow-ring); +} + +.shadow-sm { + box-shadow: var(--shadow-sm); +} + +.shadow-sm.shadow-ring { + box-shadow: var(--shadow-sm), var(--shadow-ring); +} + +.shadow-md { + box-shadow: var(--shadow-md); +} + +.shadow-md.shadow-ring { + box-shadow: var(--shadow-md), var(--shadow-ring); +} + +.shadow-lg { + box-shadow: var(--shadow-lg); +} + +.shadow-lg.shadow-ring { + box-shadow: var(--shadow-lg), var(--shadow-ring); +} + +.shadow-xl { + box-shadow: var(--shadow-xl); +} + +.shadow-xl.shadow-ring { + box-shadow: var(--shadow-xl), var(--shadow-ring); +} + +.shadow-none { + box-shadow: none; +} + +:where(.inner-glow, .inner-glow-top) { + position: relative; +} +:where(.inner-glow, .inner-glow-top)::after { + content: ""; + position: absolute; + z-index: 1; + 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-relative { + position: relative; +} + +.position-absolute { + position: absolute; +} + +.position-fixed { + position: fixed; +} + +.position-sticky { + position: sticky; +} + +.inset-0 { + top: 0; + right: 0; + bottom: 0; + left: 0; +} + +.top-0 { + top: 0; +} + +.top-50\% { + top: 50%; +} + +.top-xxxxs { + top: var(--space-xxxxs); +} + +.top-xxxs { + top: var(--space-xxxs); +} + +.top-xxs { + top: var(--space-xxs); +} + +.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-xxl { + top: var(--space-xxl); +} + +.top-xxxl { + top: var(--space-xxxl); +} + +.top-xxxxl { + top: var(--space-xxxxl); +} + +.bottom-0 { + bottom: 0; +} + +.bottom-50\% { + bottom: 50%; +} + +.bottom-xxxxs { + bottom: var(--space-xxxxs); +} + +.bottom-xxxs { + bottom: var(--space-xxxs); +} + +.bottom-xxs { + bottom: var(--space-xxs); +} + +.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-xxl { + bottom: var(--space-xxl); +} + +.bottom-xxxl { + bottom: var(--space-xxxl); +} + +.bottom-xxxxl { + bottom: var(--space-xxxxl); +} + +.right-0 { + right: 0; +} + +.right-50\% { + right: 50%; +} + +.right-xxxxs { + right: var(--space-xxxxs); +} + +.right-xxxs { + right: var(--space-xxxs); +} + +.right-xxs { + right: var(--space-xxs); +} + +.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-xxl { + right: var(--space-xxl); +} + +.right-xxxl { + right: var(--space-xxxl); +} + +.right-xxxxl { + right: var(--space-xxxxl); +} + +.left-0 { + left: 0; +} + +.left-50\% { + left: 50%; +} + +.left-xxxxs { + left: var(--space-xxxxs); +} + +.left-xxxs { + left: var(--space-xxxs); +} + +.left-xxs { + left: var(--space-xxs); +} + +.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-xxl { + left: var(--space-xxl); +} + +.left-xxxl { + left: var(--space-xxxl); +} + +.left-xxxxl { + left: var(--space-xxxxl); +} + +.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-visible { + overflow: visible; +} + +.overflow-hidden { + overflow: hidden; +} + +.overflow-x-hidden { + overflow-x: hidden; +} + +.overflow-y-hidden { + overflow-y: hidden; +} + +.overflow-clip { + overflow: clip; +} + +.overflow-x-clip { + overflow-x: clip; +} + +.overflow-y-clip { + overflow-y: clip; +} + +.overflow-auto { + overflow: auto; +} + +.momentum-scrolling { + -webkit-overflow-scrolling: touch; +} + +.overscroll-contain { + overscroll-behavior: contain; +} + +.scroll-smooth { + scroll-behavior: smooth; +} + +.scroll-padding-xxxxs { + scroll-padding: var(--space-xxxxs); +} + +.scroll-padding-xxxs { + scroll-padding: var(--space-xxxs); +} + +.scroll-padding-xxs { + scroll-padding: var(--space-xxs); +} + +.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-xxl { + scroll-padding: var(--space-xxl); +} + +.scroll-padding-xxxl { + scroll-padding: var(--space-xxxl); +} + +.scroll-padding-xxxxl { + scroll-padding: var(--space-xxxxl); +} + +.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-left { + float: left; +} + +.float-right { + float: right; +} + +.clearfix::after { + content: ""; + display: table; + clear: both; +} + +[class^=border-], [class*=" border-"] { + --border-o: 1; + --border-width: 1px; + --border-style: solid; +} + +.border { + border: var(--border-width, 1px) var(--border-style, solid) hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), var(--border-o-base, 0.1)); +} + +.border-top { + border-top: var(--border-width, 1px) var(--border-style, solid) hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), var(--border-o-base, 0.1)); +} + +.border-bottom { + border-bottom: var(--border-width, 1px) var(--border-style, solid) hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), var(--border-o-base, 0.1)); +} + +.border-left { + border-left: var(--border-width, 1px) var(--border-style, solid) hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), var(--border-o-base, 0.1)); +} + +.border-right { + border-right: var(--border-width, 1px) var(--border-style, solid) hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), var(--border-o-base, 0.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-h), var(--color-bg-darker-s), var(--color-bg-darker-l), var(--border-o, 1)); +} + +.border-bg-dark { + border-color: hsla(var(--color-bg-dark-h), var(--color-bg-dark-s), var(--color-bg-dark-l), var(--border-o, 1)); +} + +.border-bg { + border-color: hsla(var(--color-bg-h), var(--color-bg-s), var(--color-bg-l), var(--border-o, 1)); +} + +.border-bg-light { + border-color: hsla(var(--color-bg-light-h), var(--color-bg-light-s), var(--color-bg-light-l), var(--border-o, 1)); +} + +.border-bg-lighter { + border-color: hsla(var(--color-bg-lighter-h), var(--color-bg-lighter-s), var(--color-bg-lighter-l), var(--border-o, 1)); +} + +.border-contrast-lower { + border-color: hsla(var(--color-contrast-lower-h), var(--color-contrast-lower-s), var(--color-contrast-lower-l), var(--border-o, 1)); +} + +.border-contrast-low { + border-color: hsla(var(--color-contrast-low-h), var(--color-contrast-low-s), var(--color-contrast-low-l), var(--border-o, 1)); +} + +.border-contrast-medium { + border-color: hsla(var(--color-contrast-medium-h), var(--color-contrast-medium-s), var(--color-contrast-medium-l), var(--border-o, 1)); +} + +.border-contrast-high { + border-color: hsla(var(--color-contrast-high-h), var(--color-contrast-high-s), var(--color-contrast-high-l), var(--border-o, 1)); +} + +.border-contrast-higher { + border-color: hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), var(--border-o, 1)); +} + +.border-primary-darker { + border-color: hsla(var(--color-primary-darker-h), var(--color-primary-darker-s), var(--color-primary-darker-l), var(--border-o, 1)); +} + +.border-primary-dark { + border-color: hsla(var(--color-primary-dark-h), var(--color-primary-dark-s), var(--color-primary-dark-l), var(--border-o, 1)); +} + +.border-primary { + border-color: hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), var(--border-o, 1)); +} + +.border-primary-light { + border-color: hsla(var(--color-primary-light-h), var(--color-primary-light-s), var(--color-primary-light-l), var(--border-o, 1)); +} + +.border-primary-lighter { + border-color: hsla(var(--color-primary-lighter-h), var(--color-primary-lighter-s), var(--color-primary-lighter-l), var(--border-o, 1)); +} + +.border-accent-darker { + border-color: hsla(var(--color-accent-darker-h), var(--color-accent-darker-s), var(--color-accent-darker-l), var(--border-o, 1)); +} + +.border-accent-dark { + border-color: hsla(var(--color-accent-dark-h), var(--color-accent-dark-s), var(--color-accent-dark-l), var(--border-o, 1)); +} + +.border-accent { + border-color: hsla(var(--color-accent-h), var(--color-accent-s), var(--color-accent-l), var(--border-o, 1)); +} + +.border-accent-light { + border-color: hsla(var(--color-accent-light-h), var(--color-accent-light-s), var(--color-accent-light-l), var(--border-o, 1)); +} + +.border-accent-lighter { + border-color: hsla(var(--color-accent-lighter-h), var(--color-accent-lighter-s), var(--color-accent-lighter-l), var(--border-o, 1)); +} + +.border-success-darker { + border-color: hsla(var(--color-success-darker-h), var(--color-success-darker-s), var(--color-success-darker-l), var(--border-o, 1)); +} + +.border-success-dark { + border-color: hsla(var(--color-success-dark-h), var(--color-success-dark-s), var(--color-success-dark-l), var(--border-o, 1)); +} + +.border-success { + border-color: hsla(var(--color-success-h), var(--color-success-s), var(--color-success-l), var(--border-o, 1)); +} + +.border-success-light { + border-color: hsla(var(--color-success-light-h), var(--color-success-light-s), var(--color-success-light-l), var(--border-o, 1)); +} + +.border-success-lighter { + border-color: hsla(var(--color-success-lighter-h), var(--color-success-lighter-s), var(--color-success-lighter-l), var(--border-o, 1)); +} + +.border-warning-darker { + border-color: hsla(var(--color-warning-darker-h), var(--color-warning-darker-s), var(--color-warning-darker-l), var(--border-o, 1)); +} + +.border-warning-dark { + border-color: hsla(var(--color-warning-dark-h), var(--color-warning-dark-s), var(--color-warning-dark-l), var(--border-o, 1)); +} + +.border-warning { + border-color: hsla(var(--color-warning-h), var(--color-warning-s), var(--color-warning-l), var(--border-o, 1)); +} + +.border-warning-light { + border-color: hsla(var(--color-warning-light-h), var(--color-warning-light-s), var(--color-warning-light-l), var(--border-o, 1)); +} + +.border-warning-lighter { + border-color: hsla(var(--color-warning-lighter-h), var(--color-warning-lighter-s), var(--color-warning-lighter-l), var(--border-o, 1)); +} + +.border-error-darker { + border-color: hsla(var(--color-error-darker-h), var(--color-error-darker-s), var(--color-error-darker-l), var(--border-o, 1)); +} + +.border-error-dark { + border-color: hsla(var(--color-error-dark-h), var(--color-error-dark-s), var(--color-error-dark-l), var(--border-o, 1)); +} + +.border-error { + border-color: hsla(var(--color-error-h), var(--color-error-s), var(--color-error-l), var(--border-o, 1)); +} + +.border-error-light { + border-color: hsla(var(--color-error-light-h), var(--color-error-light-s), var(--color-error-light-l), var(--border-o, 1)); +} + +.border-error-lighter { + border-color: hsla(var(--color-error-lighter-h), var(--color-error-lighter-s), var(--color-error-lighter-l), var(--border-o, 1)); +} + +.border-white { + border-color: hsla(var(--color-white-h), var(--color-white-s), var(--color-white-l), var(--border-o, 1)); +} + +.border-black { + border-color: hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), var(--border-o, 1)); +} + +.border-opacity-0 { + --border-o: 0; +} + +.border-opacity-5\% { + --border-o: 0.05; +} + +.border-opacity-10\% { + --border-o: 0.1; +} + +.border-opacity-15\% { + --border-o: 0.15; +} + +.border-opacity-20\% { + --border-o: 0.2; +} + +.border-opacity-25\% { + --border-o: 0.25; +} + +.border-opacity-30\% { + --border-o: 0.3; +} + +.border-opacity-40\% { + --border-o: 0.4; +} + +.border-opacity-50\% { + --border-o: 0.5; +} + +.border-opacity-60\% { + --border-o: 0.6; +} + +.border-opacity-70\% { + --border-o: 0.7; +} + +.border-opacity-75\% { + --border-o: 0.75; +} + +.border-opacity-80\% { + --border-o: 0.8; +} + +.border-opacity-85\% { + --border-o: 0.85; +} + +.border-opacity-90\% { + --border-o: 0.9; +} + +.border-opacity-95\% { + --border-o: 0.95; +} + +.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; +} + +.bg, [class^=bg-], [class*=" bg-"] { + --bg-o: 1; +} + +.bg-transparent { + background-color: transparent; +} + +.bg-inherit { + background-color: inherit; +} + +.bg-darker { + background-color: hsla(var(--color-bg-darker-h), var(--color-bg-darker-s), var(--color-bg-darker-l), var(--bg-o)); +} + +.bg-dark { + background-color: hsla(var(--color-bg-dark-h), var(--color-bg-dark-s), var(--color-bg-dark-l), var(--bg-o)); +} + +.bg { + background-color: hsla(var(--color-bg-h), var(--color-bg-s), var(--color-bg-l), var(--bg-o)); +} + +.bg-light { + background-color: hsla(var(--color-bg-light-h), var(--color-bg-light-s), var(--color-bg-light-l), var(--bg-o)); +} + +.bg-lighter { + background-color: hsla(var(--color-bg-lighter-h), var(--color-bg-lighter-s), var(--color-bg-lighter-l), var(--bg-o)); +} + +.bg-contrast-lower { + background-color: hsla(var(--color-contrast-lower-h), var(--color-contrast-lower-s), var(--color-contrast-lower-l), var(--bg-o, 1)); +} + +.bg-contrast-low { + background-color: hsla(var(--color-contrast-low-h), var(--color-contrast-low-s), var(--color-contrast-low-l), var(--bg-o, 1)); +} + +.bg-contrast-medium { + background-color: hsla(var(--color-contrast-medium-h), var(--color-contrast-medium-s), var(--color-contrast-medium-l), var(--bg-o, 1)); +} + +.bg-contrast-high { + background-color: hsla(var(--color-contrast-high-h), var(--color-contrast-high-s), var(--color-contrast-high-l), var(--bg-o, 1)); +} + +.bg-contrast-higher { + background-color: hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), var(--bg-o, 1)); +} + +.bg-primary-darker { + background-color: hsla(var(--color-primary-darker-h), var(--color-primary-darker-s), var(--color-primary-darker-l), var(--bg-o, 1)); +} + +.bg-primary-dark { + background-color: hsla(var(--color-primary-dark-h), var(--color-primary-dark-s), var(--color-primary-dark-l), var(--bg-o, 1)); +} + +.bg-primary { + background-color: hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), var(--bg-o, 1)); +} + +.bg-primary-light { + background-color: hsla(var(--color-primary-light-h), var(--color-primary-light-s), var(--color-primary-light-l), var(--bg-o, 1)); +} + +.bg-primary-lighter { + background-color: hsla(var(--color-primary-lighter-h), var(--color-primary-lighter-s), var(--color-primary-lighter-l), var(--bg-o, 1)); +} + +.bg-accent-darker { + background-color: hsla(var(--color-accent-darker-h), var(--color-accent-darker-s), var(--color-accent-darker-l), var(--bg-o, 1)); +} + +.bg-accent-dark { + background-color: hsla(var(--color-accent-dark-h), var(--color-accent-dark-s), var(--color-accent-dark-l), var(--bg-o, 1)); +} + +.bg-accent { + background-color: hsla(var(--color-accent-h), var(--color-accent-s), var(--color-accent-l), var(--bg-o, 1)); +} + +.bg-accent-light { + background-color: hsla(var(--color-accent-light-h), var(--color-accent-light-s), var(--color-accent-light-l), var(--bg-o, 1)); +} + +.bg-accent-lighter { + background-color: hsla(var(--color-accent-lighter-h), var(--color-accent-lighter-s), var(--color-accent-lighter-l), var(--bg-o, 1)); +} + +.bg-success-darker { + background-color: hsla(var(--color-success-darker-h), var(--color-success-darker-s), var(--color-success-darker-l), var(--bg-o, 1)); +} + +.bg-success-dark { + background-color: hsla(var(--color-success-dark-h), var(--color-success-dark-s), var(--color-success-dark-l), var(--bg-o, 1)); +} + +.bg-success { + background-color: hsla(var(--color-success-h), var(--color-success-s), var(--color-success-l), var(--bg-o, 1)); +} + +.bg-success-light { + background-color: hsla(var(--color-success-light-h), var(--color-success-light-s), var(--color-success-light-l), var(--bg-o, 1)); +} + +.bg-success-lighter { + background-color: hsla(var(--color-success-lighter-h), var(--color-success-lighter-s), var(--color-success-lighter-l), var(--bg-o, 1)); +} + +.bg-warning-darker { + background-color: hsla(var(--color-warning-darker-h), var(--color-warning-darker-s), var(--color-warning-darker-l), var(--bg-o, 1)); +} + +.bg-warning-dark { + background-color: hsla(var(--color-warning-dark-h), var(--color-warning-dark-s), var(--color-warning-dark-l), var(--bg-o, 1)); +} + +.bg-warning { + background-color: hsla(var(--color-warning-h), var(--color-warning-s), var(--color-warning-l), var(--bg-o, 1)); +} + +.bg-warning-light { + background-color: hsla(var(--color-warning-light-h), var(--color-warning-light-s), var(--color-warning-light-l), var(--bg-o, 1)); +} + +.bg-warning-lighter { + background-color: hsla(var(--color-warning-lighter-h), var(--color-warning-lighter-s), var(--color-warning-lighter-l), var(--bg-o, 1)); +} + +.bg-error-darker { + background-color: hsla(var(--color-error-darker-h), var(--color-error-darker-s), var(--color-error-darker-l), var(--bg-o, 1)); +} + +.bg-error-dark { + background-color: hsla(var(--color-error-dark-h), var(--color-error-dark-s), var(--color-error-dark-l), var(--bg-o, 1)); +} + +.bg-error { + background-color: hsla(var(--color-error-h), var(--color-error-s), var(--color-error-l), var(--bg-o, 1)); +} + +.bg-error-light { + background-color: hsla(var(--color-error-light-h), var(--color-error-light-s), var(--color-error-light-l), var(--bg-o, 1)); +} + +.bg-error-lighter { + background-color: hsla(var(--color-error-lighter-h), var(--color-error-lighter-s), var(--color-error-lighter-l), var(--bg-o, 1)); +} + +.bg-white { + background-color: hsla(var(--color-white-h), var(--color-white-s), var(--color-white-l), var(--bg-o, 1)); +} + +.bg-black { + background-color: hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), var(--bg-o, 1)); +} + +.bg-opacity-0 { + --bg-o: 0; +} + +.bg-opacity-5\% { + --bg-o: 0.05; +} + +.bg-opacity-10\% { + --bg-o: 0.1; +} + +.bg-opacity-15\% { + --bg-o: 0.15; +} + +.bg-opacity-20\% { + --bg-o: 0.2; +} + +.bg-opacity-25\% { + --bg-o: 0.25; +} + +.bg-opacity-30\% { + --bg-o: 0.3; +} + +.bg-opacity-40\% { + --bg-o: 0.4; +} + +.bg-opacity-50\% { + --bg-o: 0.5; +} + +.bg-opacity-60\% { + --bg-o: 0.6; +} + +.bg-opacity-70\% { + --bg-o: 0.7; +} + +.bg-opacity-75\% { + --bg-o: 0.75; +} + +.bg-opacity-80\% { + --bg-o: 0.8; +} + +.bg-opacity-85\% { + --bg-o: 0.85; +} + +.bg-opacity-90\% { + --bg-o: 0.9; +} + +.bg-opacity-95\% { + --bg-o: 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-blur-10 { + -webkit-backdrop-filter: blur(10px); + backdrop-filter: blur(10px); +} + +.backdrop-blur-20 { + -webkit-backdrop-filter: blur(20px); + backdrop-filter: blur(20px); +} + +.isolate { + isolation: isolate; +} + +.blend-multiply { + mix-blend-mode: multiply; +} + +.blend-overlay { + mix-blend-mode: overlay; +} + +.blend-difference { + mix-blend-mode: difference; +} + +.object-contain { + -o-object-fit: contain; + object-fit: contain; +} + +.object-cover { + -o-object-fit: cover; + object-fit: cover; +} + +.perspective-xs { + perspective: 250px; +} + +.perspective-sm { + perspective: 500px; +} + +.perspective-md { + perspective: 1000px; +} + +.perspective-lg { + perspective: 1500px; +} + +.perspective-xl { + perspective: 3000px; +} + +[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; + 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-50\% { + --translate: 50%; +} + +.translate-x-50\% { + --translate-x: 50%; +} + +.translate-y-50\% { + --translate-y: 50%; +} + +.origin-center { + transform-origin: center; +} + +.origin-top { + transform-origin: center top; +} + +.origin-right { + transform-origin: right center; +} + +.origin-bottom { + transform-origin: center bottom; +} + +.origin-left { + transform-origin: left center; +} + +.origin-top-left { + transform-origin: left top; +} + +.origin-top-right { + transform-origin: right top; +} + +.origin-bottom-left { + transform-origin: left bottom; +} + +.origin-bottom-right { + transform-origin: right bottom; +} + +.transition { + transition-property: var(--transition-property, all); + transition-duration: var(--transition-duration, 0.2s); + transition-delay: var(--transition-delay, 0s); +} + +.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; +} + +.visible { + visibility: visible; +} + +.invisible { + visibility: hidden; +} + +.appearance-none { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; +} + +.appearance-auto { + -webkit-appearance: auto; + -moz-appearance: auto; + appearance: auto; +} + +@media (min-width: 32rem) { + .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-start\@xs { + justify-content: flex-start; + } + .justify-end\@xs { + justify-content: flex-end; + } + .justify-center\@xs { + justify-content: center; + } + .justify-between\@xs { + justify-content: space-between; + } + .items-center\@xs { + align-items: center; + } + .items-start\@xs { + align-items: flex-start; + } + .items-end\@xs { + align-items: flex-end; + } + .items-baseline\@xs { + align-items: baseline; + } + .items-stretch\@xs { + align-items: stretch; + } + .content-start\@xs { + align-content: start; + } + .content-end\@xs { + align-content: end; + } + .content-center\@xs { + align-content: center; + } + .content-between\@xs { + align-content: space-between; + } + .order-1\@xs { + order: 1; + } + .order-2\@xs { + order: 2; + } + .order-3\@xs { + order: 3; + } + .block\@xs { + display: block; + } + .inline-block\@xs { + display: inline-block; + } + .inline\@xs { + display: inline; + } + .contents\@xs { + display: contents; + } + .css-grid\@xs { + display: grid; + } + .css-inline-grid\@xs { + display: inline-grid; + } + .hide\@xs { + display: none !important; + } + .margin-xxxxs\@xs { + margin: var(--space-xxxxs); + } + .margin-xxxs\@xs { + margin: var(--space-xxxs); + } + .margin-xxs\@xs { + margin: var(--space-xxs); + } + .margin-xs\@xs { + margin: var(--space-xs); + } + .margin-sm\@xs { + margin: var(--space-sm); + } + .margin-md\@xs { + margin: var(--space-md); + } + .margin-lg\@xs { + margin: var(--space-lg); + } + .margin-xl\@xs { + margin: var(--space-xl); + } + .margin-xxl\@xs { + margin: var(--space-xxl); + } + .margin-xxxl\@xs { + margin: var(--space-xxxl); + } + .margin-xxxxl\@xs { + margin: var(--space-xxxxl); + } + .margin-auto\@xs { + margin: auto; + } + .margin-0\@xs { + margin: 0; + } + .margin-top-xxxxs\@xs { + margin-top: var(--space-xxxxs); + } + .margin-top-xxxs\@xs { + margin-top: var(--space-xxxs); + } + .margin-top-xxs\@xs { + margin-top: var(--space-xxs); + } + .margin-top-xs\@xs { + margin-top: var(--space-xs); + } + .margin-top-sm\@xs { + margin-top: var(--space-sm); + } + .margin-top-md\@xs { + margin-top: var(--space-md); + } + .margin-top-lg\@xs { + margin-top: var(--space-lg); + } + .margin-top-xl\@xs { + margin-top: var(--space-xl); + } + .margin-top-xxl\@xs { + margin-top: var(--space-xxl); + } + .margin-top-xxxl\@xs { + margin-top: var(--space-xxxl); + } + .margin-top-xxxxl\@xs { + margin-top: var(--space-xxxxl); + } + .margin-top-auto\@xs { + margin-top: auto; + } + .margin-top-0\@xs { + margin-top: 0; + } + .margin-bottom-xxxxs\@xs { + margin-bottom: var(--space-xxxxs); + } + .margin-bottom-xxxs\@xs { + margin-bottom: var(--space-xxxs); + } + .margin-bottom-xxs\@xs { + margin-bottom: var(--space-xxs); + } + .margin-bottom-xs\@xs { + margin-bottom: var(--space-xs); + } + .margin-bottom-sm\@xs { + margin-bottom: var(--space-sm); + } + .margin-bottom-md\@xs { + margin-bottom: var(--space-md); + } + .margin-bottom-lg\@xs { + margin-bottom: var(--space-lg); + } + .margin-bottom-xl\@xs { + margin-bottom: var(--space-xl); + } + .margin-bottom-xxl\@xs { + margin-bottom: var(--space-xxl); + } + .margin-bottom-xxxl\@xs { + margin-bottom: var(--space-xxxl); + } + .margin-bottom-xxxxl\@xs { + margin-bottom: var(--space-xxxxl); + } + .margin-bottom-auto\@xs { + margin-bottom: auto; + } + .margin-bottom-0\@xs { + margin-bottom: 0; + } + .margin-right-xxxxs\@xs { + margin-right: var(--space-xxxxs); + } + .margin-right-xxxs\@xs { + margin-right: var(--space-xxxs); + } + .margin-right-xxs\@xs { + margin-right: var(--space-xxs); + } + .margin-right-xs\@xs { + margin-right: var(--space-xs); + } + .margin-right-sm\@xs { + margin-right: var(--space-sm); + } + .margin-right-md\@xs { + margin-right: var(--space-md); + } + .margin-right-lg\@xs { + margin-right: var(--space-lg); + } + .margin-right-xl\@xs { + margin-right: var(--space-xl); + } + .margin-right-xxl\@xs { + margin-right: var(--space-xxl); + } + .margin-right-xxxl\@xs { + margin-right: var(--space-xxxl); + } + .margin-right-xxxxl\@xs { + margin-right: var(--space-xxxxl); + } + .margin-right-auto\@xs { + margin-right: auto; + } + .margin-right-0\@xs { + margin-right: 0; + } + .margin-left-xxxxs\@xs { + margin-left: var(--space-xxxxs); + } + .margin-left-xxxs\@xs { + margin-left: var(--space-xxxs); + } + .margin-left-xxs\@xs { + margin-left: var(--space-xxs); + } + .margin-left-xs\@xs { + margin-left: var(--space-xs); + } + .margin-left-sm\@xs { + margin-left: var(--space-sm); + } + .margin-left-md\@xs { + margin-left: var(--space-md); + } + .margin-left-lg\@xs { + margin-left: var(--space-lg); + } + .margin-left-xl\@xs { + margin-left: var(--space-xl); + } + .margin-left-xxl\@xs { + margin-left: var(--space-xxl); + } + .margin-left-xxxl\@xs { + margin-left: var(--space-xxxl); + } + .margin-left-xxxxl\@xs { + margin-left: var(--space-xxxxl); + } + .margin-left-auto\@xs { + margin-left: auto; + } + .margin-left-0\@xs { + margin-left: 0; + } + .margin-x-xxxxs\@xs { + margin-left: var(--space-xxxxs); + margin-right: var(--space-xxxxs); + } + .margin-x-xxxs\@xs { + margin-left: var(--space-xxxs); + margin-right: var(--space-xxxs); + } + .margin-x-xxs\@xs { + margin-left: var(--space-xxs); + margin-right: var(--space-xxs); + } + .margin-x-xs\@xs { + margin-left: var(--space-xs); + margin-right: var(--space-xs); + } + .margin-x-sm\@xs { + margin-left: var(--space-sm); + margin-right: var(--space-sm); + } + .margin-x-md\@xs { + margin-left: var(--space-md); + margin-right: var(--space-md); + } + .margin-x-lg\@xs { + margin-left: var(--space-lg); + margin-right: var(--space-lg); + } + .margin-x-xl\@xs { + margin-left: var(--space-xl); + margin-right: var(--space-xl); + } + .margin-x-xxl\@xs { + margin-left: var(--space-xxl); + margin-right: var(--space-xxl); + } + .margin-x-xxxl\@xs { + margin-left: var(--space-xxxl); + margin-right: var(--space-xxxl); + } + .margin-x-xxxxl\@xs { + margin-left: var(--space-xxxxl); + margin-right: var(--space-xxxxl); + } + .margin-x-auto\@xs { + margin-left: auto; + margin-right: auto; + } + .margin-x-0\@xs { + margin-left: 0; + margin-right: 0; + } + .margin-y-xxxxs\@xs { + margin-top: var(--space-xxxxs); + margin-bottom: var(--space-xxxxs); + } + .margin-y-xxxs\@xs { + margin-top: var(--space-xxxs); + margin-bottom: var(--space-xxxs); + } + .margin-y-xxs\@xs { + margin-top: var(--space-xxs); + margin-bottom: var(--space-xxs); + } + .margin-y-xs\@xs { + margin-top: var(--space-xs); + margin-bottom: var(--space-xs); + } + .margin-y-sm\@xs { + margin-top: var(--space-sm); + margin-bottom: var(--space-sm); + } + .margin-y-md\@xs { + margin-top: var(--space-md); + margin-bottom: var(--space-md); + } + .margin-y-lg\@xs { + margin-top: var(--space-lg); + margin-bottom: var(--space-lg); + } + .margin-y-xl\@xs { + margin-top: var(--space-xl); + margin-bottom: var(--space-xl); + } + .margin-y-xxl\@xs { + margin-top: var(--space-xxl); + margin-bottom: var(--space-xxl); + } + .margin-y-xxxl\@xs { + margin-top: var(--space-xxxl); + margin-bottom: var(--space-xxxl); + } + .margin-y-xxxxl\@xs { + margin-top: var(--space-xxxxl); + margin-bottom: var(--space-xxxxl); + } + .margin-y-auto\@xs { + margin-top: auto; + margin-bottom: auto; + } + .margin-y-0\@xs { + margin-top: 0; + margin-bottom: 0; + } + .padding-xxxxs\@xs { + padding: var(--space-xxxxs); + } + .padding-xxxs\@xs { + padding: var(--space-xxxs); + } + .padding-xxs\@xs { + padding: var(--space-xxs); + } + .padding-xs\@xs { + padding: var(--space-xs); + } + .padding-sm\@xs { + padding: var(--space-sm); + } + .padding-md\@xs { + padding: var(--space-md); + } + .padding-lg\@xs { + padding: var(--space-lg); + } + .padding-xl\@xs { + padding: var(--space-xl); + } + .padding-xxl\@xs { + padding: var(--space-xxl); + } + .padding-xxxl\@xs { + padding: var(--space-xxxl); + } + .padding-xxxxl\@xs { + padding: var(--space-xxxxl); + } + .padding-0\@xs { + padding: 0; + } + .padding-component\@xs { + padding: var(--component-padding); + } + .padding-top-xxxxs\@xs { + padding-top: var(--space-xxxxs); + } + .padding-top-xxxs\@xs { + padding-top: var(--space-xxxs); + } + .padding-top-xxs\@xs { + padding-top: var(--space-xxs); + } + .padding-top-xs\@xs { + padding-top: var(--space-xs); + } + .padding-top-sm\@xs { + padding-top: var(--space-sm); + } + .padding-top-md\@xs { + padding-top: var(--space-md); + } + .padding-top-lg\@xs { + padding-top: var(--space-lg); + } + .padding-top-xl\@xs { + padding-top: var(--space-xl); + } + .padding-top-xxl\@xs { + padding-top: var(--space-xxl); + } + .padding-top-xxxl\@xs { + padding-top: var(--space-xxxl); + } + .padding-top-xxxxl\@xs { + padding-top: var(--space-xxxxl); + } + .padding-top-0\@xs { + padding-top: 0; + } + .padding-top-component\@xs { + padding-top: var(--component-padding); + } + .padding-bottom-xxxxs\@xs { + padding-bottom: var(--space-xxxxs); + } + .padding-bottom-xxxs\@xs { + padding-bottom: var(--space-xxxs); + } + .padding-bottom-xxs\@xs { + padding-bottom: var(--space-xxs); + } + .padding-bottom-xs\@xs { + padding-bottom: var(--space-xs); + } + .padding-bottom-sm\@xs { + padding-bottom: var(--space-sm); + } + .padding-bottom-md\@xs { + padding-bottom: var(--space-md); + } + .padding-bottom-lg\@xs { + padding-bottom: var(--space-lg); + } + .padding-bottom-xl\@xs { + padding-bottom: var(--space-xl); + } + .padding-bottom-xxl\@xs { + padding-bottom: var(--space-xxl); + } + .padding-bottom-xxxl\@xs { + padding-bottom: var(--space-xxxl); + } + .padding-bottom-xxxxl\@xs { + padding-bottom: var(--space-xxxxl); + } + .padding-bottom-0\@xs { + padding-bottom: 0; + } + .padding-bottom-component\@xs { + padding-bottom: var(--component-padding); + } + .padding-right-xxxxs\@xs { + padding-right: var(--space-xxxxs); + } + .padding-right-xxxs\@xs { + padding-right: var(--space-xxxs); + } + .padding-right-xxs\@xs { + padding-right: var(--space-xxs); + } + .padding-right-xs\@xs { + padding-right: var(--space-xs); + } + .padding-right-sm\@xs { + padding-right: var(--space-sm); + } + .padding-right-md\@xs { + padding-right: var(--space-md); + } + .padding-right-lg\@xs { + padding-right: var(--space-lg); + } + .padding-right-xl\@xs { + padding-right: var(--space-xl); + } + .padding-right-xxl\@xs { + padding-right: var(--space-xxl); + } + .padding-right-xxxl\@xs { + padding-right: var(--space-xxxl); + } + .padding-right-xxxxl\@xs { + padding-right: var(--space-xxxxl); + } + .padding-right-0\@xs { + padding-right: 0; + } + .padding-right-component\@xs { + padding-right: var(--component-padding); + } + .padding-left-xxxxs\@xs { + padding-left: var(--space-xxxxs); + } + .padding-left-xxxs\@xs { + padding-left: var(--space-xxxs); + } + .padding-left-xxs\@xs { + padding-left: var(--space-xxs); + } + .padding-left-xs\@xs { + padding-left: var(--space-xs); + } + .padding-left-sm\@xs { + padding-left: var(--space-sm); + } + .padding-left-md\@xs { + padding-left: var(--space-md); + } + .padding-left-lg\@xs { + padding-left: var(--space-lg); + } + .padding-left-xl\@xs { + padding-left: var(--space-xl); + } + .padding-left-xxl\@xs { + padding-left: var(--space-xxl); + } + .padding-left-xxxl\@xs { + padding-left: var(--space-xxxl); + } + .padding-left-xxxxl\@xs { + padding-left: var(--space-xxxxl); + } + .padding-left-0\@xs { + padding-left: 0; + } + .padding-left-component\@xs { + padding-left: var(--component-padding); + } + .padding-x-xxxxs\@xs { + padding-left: var(--space-xxxxs); + padding-right: var(--space-xxxxs); + } + .padding-x-xxxs\@xs { + padding-left: var(--space-xxxs); + padding-right: var(--space-xxxs); + } + .padding-x-xxs\@xs { + padding-left: var(--space-xxs); + padding-right: var(--space-xxs); + } + .padding-x-xs\@xs { + padding-left: var(--space-xs); + padding-right: var(--space-xs); + } + .padding-x-sm\@xs { + padding-left: var(--space-sm); + padding-right: var(--space-sm); + } + .padding-x-md\@xs { + padding-left: var(--space-md); + padding-right: var(--space-md); + } + .padding-x-lg\@xs { + padding-left: var(--space-lg); + padding-right: var(--space-lg); + } + .padding-x-xl\@xs { + padding-left: var(--space-xl); + padding-right: var(--space-xl); + } + .padding-x-xxl\@xs { + padding-left: var(--space-xxl); + padding-right: var(--space-xxl); + } + .padding-x-xxxl\@xs { + padding-left: var(--space-xxxl); + padding-right: var(--space-xxxl); + } + .padding-x-xxxxl\@xs { + padding-left: var(--space-xxxxl); + padding-right: var(--space-xxxxl); + } + .padding-x-0\@xs { + padding-left: 0; + padding-right: 0; + } + .padding-x-component\@xs { + padding-left: var(--component-padding); + padding-right: var(--component-padding); + } + .padding-y-xxxxs\@xs { + padding-top: var(--space-xxxxs); + padding-bottom: var(--space-xxxxs); + } + .padding-y-xxxs\@xs { + padding-top: var(--space-xxxs); + padding-bottom: var(--space-xxxs); + } + .padding-y-xxs\@xs { + padding-top: var(--space-xxs); + padding-bottom: var(--space-xxs); + } + .padding-y-xs\@xs { + padding-top: var(--space-xs); + padding-bottom: var(--space-xs); + } + .padding-y-sm\@xs { + padding-top: var(--space-sm); + padding-bottom: var(--space-sm); + } + .padding-y-md\@xs { + padding-top: var(--space-md); + padding-bottom: var(--space-md); + } + .padding-y-lg\@xs { + padding-top: var(--space-lg); + padding-bottom: var(--space-lg); + } + .padding-y-xl\@xs { + padding-top: var(--space-xl); + padding-bottom: var(--space-xl); + } + .padding-y-xxl\@xs { + padding-top: var(--space-xxl); + padding-bottom: var(--space-xxl); + } + .padding-y-xxxl\@xs { + padding-top: var(--space-xxxl); + padding-bottom: var(--space-xxxl); + } + .padding-y-xxxxl\@xs { + padding-top: var(--space-xxxxl); + padding-bottom: var(--space-xxxxl); + } + .padding-y-0\@xs { + padding-top: 0; + padding-bottom: 0; + } + .padding-y-component\@xs { + padding-top: var(--component-padding); + padding-bottom: var(--component-padding); + } + .text-center\@xs { + text-align: center; + } + .text-left\@xs { + text-align: left; + } + .text-right\@xs { + text-align: right; + } + .text-justify\@xs { + text-align: justify; + } + .text-xs\@xs { + font-size: var(--text-xs, 0.6875rem); + } + .text-sm\@xs { + font-size: var(--text-sm, 0.75rem); + } + .text-base\@xs { + font-size: var(--text-unit, 1rem); + } + .text-md\@xs { + font-size: var(--text-md, 1.125rem); + } + .text-lg\@xs { + font-size: var(--text-lg, 1.375rem); + } + .text-xl\@xs { + font-size: var(--text-xl, 1.75rem); + } + .text-xxl\@xs { + font-size: var(--text-xxl, 2rem); + } + .text-xxxl\@xs { + font-size: var(--text-xxxl, 2.5rem); + } + .text-xxxxl\@xs { + font-size: var(--text-xxxxl, 3rem); + } + .column-count-1\@xs { + -moz-column-count: 1; + column-count: 1; + } + .column-count-2\@xs { + -moz-column-count: 2; + column-count: 2; + } + .column-count-3\@xs { + -moz-column-count: 3; + column-count: 3; + } + .column-count-4\@xs { + -moz-column-count: 4; + column-count: 4; + } + .width-xxxxs\@xs { + width: var(--size-xxxxs, 0.25rem); + } + .width-xxxs\@xs { + width: var(--size-xxxs, 0.5rem); + } + .width-xxs\@xs { + width: var(--size-xxs, 0.75rem); + } + .width-xs\@xs { + width: var(--size-xs, 1rem); + } + .width-sm\@xs { + width: var(--size-sm, 1.5rem); + } + .width-md\@xs { + width: var(--size-md, 2rem); + } + .width-lg\@xs { + width: var(--size-lg, 3rem); + } + .width-xl\@xs { + width: var(--size-xl, 4rem); + } + .width-xxl\@xs { + width: var(--size-xxl, 6rem); + } + .width-xxxl\@xs { + width: var(--size-xxxl, 8rem); + } + .width-xxxxl\@xs { + width: var(--size-xxxxl, 16rem); + } + .width-0\@xs { + width: 0; + } + .width-10\%\@xs { + width: 10%; + } + .width-20\%\@xs { + width: 20%; + } + .width-25\%\@xs { + width: 25%; + } + .width-30\%\@xs { + width: 30%; + } + .width-33\%\@xs { + width: 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; + } + .width-inherit\@xs { + width: inherit; + } + .height-xxxxs\@xs { + height: var(--size-xxxxs, 0.25rem); + } + .height-xxxs\@xs { + height: var(--size-xxxs, 0.5rem); + } + .height-xxs\@xs { + height: var(--size-xxs, 0.75rem); + } + .height-xs\@xs { + height: var(--size-xs, 1rem); + } + .height-sm\@xs { + height: var(--size-sm, 1.5rem); + } + .height-md\@xs { + height: var(--size-md, 2rem); + } + .height-lg\@xs { + height: var(--size-lg, 3rem); + } + .height-xl\@xs { + height: var(--size-xl, 4rem); + } + .height-xxl\@xs { + height: var(--size-xxl, 6rem); + } + .height-xxxl\@xs { + height: var(--size-xxxl, 8rem); + } + .height-xxxxl\@xs { + height: var(--size-xxxxl, 16rem); + } + .height-0\@xs { + height: 0; + } + .height-10\%\@xs { + height: 10%; + } + .height-20\%\@xs { + height: 20%; + } + .height-25\%\@xs { + height: 25%; + } + .height-30\%\@xs { + height: 30%; + } + .height-33\%\@xs { + height: 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; + } + .height-inherit\@xs { + height: inherit; + } + .max-width-xxxxxs\@xs { + max-width: var(--max-width-xxxxxs); + } + .max-width-xxxxs\@xs { + max-width: var(--max-width-xxxxs); + } + .max-width-xxxs\@xs { + max-width: var(--max-width-xxxs); + } + .max-width-xxs\@xs { + max-width: var(--max-width-xxs); + } + .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-xxl\@xs { + max-width: var(--max-width-xxl); + } + .max-width-xxxl\@xs { + max-width: var(--max-width-xxxl); + } + .max-width-xxxxl\@xs { + max-width: var(--max-width-xxxxl); + } + .max-width-100\%\@xs { + max-width: 100%; + } + .max-width-none\@xs { + max-width: none; + } + .position-relative\@xs { + position: relative; + } + .position-absolute\@xs { + position: absolute; + } + .position-fixed\@xs { + position: fixed; + } + .position-sticky\@xs { + 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-xxxxs\@xs { + top: var(--space-xxxxs); + } + .top-xxxs\@xs { + top: var(--space-xxxs); + } + .top-xxs\@xs { + top: var(--space-xxs); + } + .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-xxl\@xs { + top: var(--space-xxl); + } + .top-xxxl\@xs { + top: var(--space-xxxl); + } + .top-xxxxl\@xs { + top: var(--space-xxxxl); + } + .bottom-0\@xs { + bottom: 0; + } + .bottom-50\%\@xs { + bottom: 50%; + } + .bottom-xxxxs\@xs { + bottom: var(--space-xxxxs); + } + .bottom-xxxs\@xs { + bottom: var(--space-xxxs); + } + .bottom-xxs\@xs { + bottom: var(--space-xxs); + } + .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-xxl\@xs { + bottom: var(--space-xxl); + } + .bottom-xxxl\@xs { + bottom: var(--space-xxxl); + } + .bottom-xxxxl\@xs { + bottom: var(--space-xxxxl); + } + .right-0\@xs { + right: 0; + } + .right-50\%\@xs { + right: 50%; + } + .right-xxxxs\@xs { + right: var(--space-xxxxs); + } + .right-xxxs\@xs { + right: var(--space-xxxs); + } + .right-xxs\@xs { + right: var(--space-xxs); + } + .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-xxl\@xs { + right: var(--space-xxl); + } + .right-xxxl\@xs { + right: var(--space-xxxl); + } + .right-xxxxl\@xs { + right: var(--space-xxxxl); + } + .left-0\@xs { + left: 0; + } + .left-50\%\@xs { + left: 50%; + } + .left-xxxxs\@xs { + left: var(--space-xxxxs); + } + .left-xxxs\@xs { + left: var(--space-xxxs); + } + .left-xxs\@xs { + left: var(--space-xxs); + } + .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-xxl\@xs { + left: var(--space-xxl); + } + .left-xxxl\@xs { + left: var(--space-xxxl); + } + .left-xxxxl\@xs { + left: var(--space-xxxxl); + } + .overflow-hidden\@xs { + overflow: hidden; + } + .overflow-auto\@xs { + overflow: auto; + } + .momentum-scrolling\@xs { + -webkit-overflow-scrolling: touch; + } + .overscroll-contain\@xs { + overscroll-behavior: contain; + } + .visible\@xs { + visibility: visible; + } + .invisible\@xs { + visibility: hidden; + } +} +@media not all and (min-width: 32rem) { + .display\@xs { + display: none !important; + } +} +@media (min-width: 48rem) { + .flex\@sm { + display: flex; + } + .inline-flex\@sm { + display: inline-flex; + } + .flex-wrap\@sm { + flex-wrap: wrap; + } + .flex-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-start\@sm { + justify-content: flex-start; + } + .justify-end\@sm { + justify-content: flex-end; + } + .justify-center\@sm { + justify-content: center; + } + .justify-between\@sm { + justify-content: space-between; + } + .items-center\@sm { + align-items: center; + } + .items-start\@sm { + align-items: flex-start; + } + .items-end\@sm { + align-items: flex-end; + } + .items-baseline\@sm { + align-items: baseline; + } + .items-stretch\@sm { + align-items: stretch; + } + .content-start\@sm { + align-content: start; + } + .content-end\@sm { + align-content: end; + } + .content-center\@sm { + align-content: center; + } + .content-between\@sm { + align-content: space-between; + } + .order-1\@sm { + order: 1; + } + .order-2\@sm { + order: 2; + } + .order-3\@sm { + order: 3; + } + .block\@sm { + display: block; + } + .inline-block\@sm { + display: inline-block; + } + .inline\@sm { + display: inline; + } + .contents\@sm { + display: contents; + } + .css-grid\@sm { + display: grid; + } + .css-inline-grid\@sm { + display: inline-grid; + } + .hide\@sm { + display: none !important; + } + .margin-xxxxs\@sm { + margin: var(--space-xxxxs); + } + .margin-xxxs\@sm { + margin: var(--space-xxxs); + } + .margin-xxs\@sm { + margin: var(--space-xxs); + } + .margin-xs\@sm { + margin: var(--space-xs); + } + .margin-sm\@sm { + margin: var(--space-sm); + } + .margin-md\@sm { + margin: var(--space-md); + } + .margin-lg\@sm { + margin: var(--space-lg); + } + .margin-xl\@sm { + margin: var(--space-xl); + } + .margin-xxl\@sm { + margin: var(--space-xxl); + } + .margin-xxxl\@sm { + margin: var(--space-xxxl); + } + .margin-xxxxl\@sm { + margin: var(--space-xxxxl); + } + .margin-auto\@sm { + margin: auto; + } + .margin-0\@sm { + margin: 0; + } + .margin-top-xxxxs\@sm { + margin-top: var(--space-xxxxs); + } + .margin-top-xxxs\@sm { + margin-top: var(--space-xxxs); + } + .margin-top-xxs\@sm { + margin-top: var(--space-xxs); + } + .margin-top-xs\@sm { + margin-top: var(--space-xs); + } + .margin-top-sm\@sm { + margin-top: var(--space-sm); + } + .margin-top-md\@sm { + margin-top: var(--space-md); + } + .margin-top-lg\@sm { + margin-top: var(--space-lg); + } + .margin-top-xl\@sm { + margin-top: var(--space-xl); + } + .margin-top-xxl\@sm { + margin-top: var(--space-xxl); + } + .margin-top-xxxl\@sm { + margin-top: var(--space-xxxl); + } + .margin-top-xxxxl\@sm { + margin-top: var(--space-xxxxl); + } + .margin-top-auto\@sm { + margin-top: auto; + } + .margin-top-0\@sm { + margin-top: 0; + } + .margin-bottom-xxxxs\@sm { + margin-bottom: var(--space-xxxxs); + } + .margin-bottom-xxxs\@sm { + margin-bottom: var(--space-xxxs); + } + .margin-bottom-xxs\@sm { + margin-bottom: var(--space-xxs); + } + .margin-bottom-xs\@sm { + margin-bottom: var(--space-xs); + } + .margin-bottom-sm\@sm { + margin-bottom: var(--space-sm); + } + .margin-bottom-md\@sm { + margin-bottom: var(--space-md); + } + .margin-bottom-lg\@sm { + margin-bottom: var(--space-lg); + } + .margin-bottom-xl\@sm { + margin-bottom: var(--space-xl); + } + .margin-bottom-xxl\@sm { + margin-bottom: var(--space-xxl); + } + .margin-bottom-xxxl\@sm { + margin-bottom: var(--space-xxxl); + } + .margin-bottom-xxxxl\@sm { + margin-bottom: var(--space-xxxxl); + } + .margin-bottom-auto\@sm { + margin-bottom: auto; + } + .margin-bottom-0\@sm { + margin-bottom: 0; + } + .margin-right-xxxxs\@sm { + margin-right: var(--space-xxxxs); + } + .margin-right-xxxs\@sm { + margin-right: var(--space-xxxs); + } + .margin-right-xxs\@sm { + margin-right: var(--space-xxs); + } + .margin-right-xs\@sm { + margin-right: var(--space-xs); + } + .margin-right-sm\@sm { + margin-right: var(--space-sm); + } + .margin-right-md\@sm { + margin-right: var(--space-md); + } + .margin-right-lg\@sm { + margin-right: var(--space-lg); + } + .margin-right-xl\@sm { + margin-right: var(--space-xl); + } + .margin-right-xxl\@sm { + margin-right: var(--space-xxl); + } + .margin-right-xxxl\@sm { + margin-right: var(--space-xxxl); + } + .margin-right-xxxxl\@sm { + margin-right: var(--space-xxxxl); + } + .margin-right-auto\@sm { + margin-right: auto; + } + .margin-right-0\@sm { + margin-right: 0; + } + .margin-left-xxxxs\@sm { + margin-left: var(--space-xxxxs); + } + .margin-left-xxxs\@sm { + margin-left: var(--space-xxxs); + } + .margin-left-xxs\@sm { + margin-left: var(--space-xxs); + } + .margin-left-xs\@sm { + margin-left: var(--space-xs); + } + .margin-left-sm\@sm { + margin-left: var(--space-sm); + } + .margin-left-md\@sm { + margin-left: var(--space-md); + } + .margin-left-lg\@sm { + margin-left: var(--space-lg); + } + .margin-left-xl\@sm { + margin-left: var(--space-xl); + } + .margin-left-xxl\@sm { + margin-left: var(--space-xxl); + } + .margin-left-xxxl\@sm { + margin-left: var(--space-xxxl); + } + .margin-left-xxxxl\@sm { + margin-left: var(--space-xxxxl); + } + .margin-left-auto\@sm { + margin-left: auto; + } + .margin-left-0\@sm { + margin-left: 0; + } + .margin-x-xxxxs\@sm { + margin-left: var(--space-xxxxs); + margin-right: var(--space-xxxxs); + } + .margin-x-xxxs\@sm { + margin-left: var(--space-xxxs); + margin-right: var(--space-xxxs); + } + .margin-x-xxs\@sm { + margin-left: var(--space-xxs); + margin-right: var(--space-xxs); + } + .margin-x-xs\@sm { + margin-left: var(--space-xs); + margin-right: var(--space-xs); + } + .margin-x-sm\@sm { + margin-left: var(--space-sm); + margin-right: var(--space-sm); + } + .margin-x-md\@sm { + margin-left: var(--space-md); + margin-right: var(--space-md); + } + .margin-x-lg\@sm { + margin-left: var(--space-lg); + margin-right: var(--space-lg); + } + .margin-x-xl\@sm { + margin-left: var(--space-xl); + margin-right: var(--space-xl); + } + .margin-x-xxl\@sm { + margin-left: var(--space-xxl); + margin-right: var(--space-xxl); + } + .margin-x-xxxl\@sm { + margin-left: var(--space-xxxl); + margin-right: var(--space-xxxl); + } + .margin-x-xxxxl\@sm { + margin-left: var(--space-xxxxl); + margin-right: var(--space-xxxxl); + } + .margin-x-auto\@sm { + margin-left: auto; + margin-right: auto; + } + .margin-x-0\@sm { + margin-left: 0; + margin-right: 0; + } + .margin-y-xxxxs\@sm { + margin-top: var(--space-xxxxs); + margin-bottom: var(--space-xxxxs); + } + .margin-y-xxxs\@sm { + margin-top: var(--space-xxxs); + margin-bottom: var(--space-xxxs); + } + .margin-y-xxs\@sm { + margin-top: var(--space-xxs); + margin-bottom: var(--space-xxs); + } + .margin-y-xs\@sm { + margin-top: var(--space-xs); + margin-bottom: var(--space-xs); + } + .margin-y-sm\@sm { + margin-top: var(--space-sm); + margin-bottom: var(--space-sm); + } + .margin-y-md\@sm { + margin-top: var(--space-md); + margin-bottom: var(--space-md); + } + .margin-y-lg\@sm { + margin-top: var(--space-lg); + margin-bottom: var(--space-lg); + } + .margin-y-xl\@sm { + margin-top: var(--space-xl); + margin-bottom: var(--space-xl); + } + .margin-y-xxl\@sm { + margin-top: var(--space-xxl); + margin-bottom: var(--space-xxl); + } + .margin-y-xxxl\@sm { + margin-top: var(--space-xxxl); + margin-bottom: var(--space-xxxl); + } + .margin-y-xxxxl\@sm { + margin-top: var(--space-xxxxl); + margin-bottom: var(--space-xxxxl); + } + .margin-y-auto\@sm { + margin-top: auto; + margin-bottom: auto; + } + .margin-y-0\@sm { + margin-top: 0; + margin-bottom: 0; + } + .padding-xxxxs\@sm { + padding: var(--space-xxxxs); + } + .padding-xxxs\@sm { + padding: var(--space-xxxs); + } + .padding-xxs\@sm { + padding: var(--space-xxs); + } + .padding-xs\@sm { + padding: var(--space-xs); + } + .padding-sm\@sm { + padding: var(--space-sm); + } + .padding-md\@sm { + padding: var(--space-md); + } + .padding-lg\@sm { + padding: var(--space-lg); + } + .padding-xl\@sm { + padding: var(--space-xl); + } + .padding-xxl\@sm { + padding: var(--space-xxl); + } + .padding-xxxl\@sm { + padding: var(--space-xxxl); + } + .padding-xxxxl\@sm { + padding: var(--space-xxxxl); + } + .padding-0\@sm { + padding: 0; + } + .padding-component\@sm { + padding: var(--component-padding); + } + .padding-top-xxxxs\@sm { + padding-top: var(--space-xxxxs); + } + .padding-top-xxxs\@sm { + padding-top: var(--space-xxxs); + } + .padding-top-xxs\@sm { + padding-top: var(--space-xxs); + } + .padding-top-xs\@sm { + padding-top: var(--space-xs); + } + .padding-top-sm\@sm { + padding-top: var(--space-sm); + } + .padding-top-md\@sm { + padding-top: var(--space-md); + } + .padding-top-lg\@sm { + padding-top: var(--space-lg); + } + .padding-top-xl\@sm { + padding-top: var(--space-xl); + } + .padding-top-xxl\@sm { + padding-top: var(--space-xxl); + } + .padding-top-xxxl\@sm { + padding-top: var(--space-xxxl); + } + .padding-top-xxxxl\@sm { + padding-top: var(--space-xxxxl); + } + .padding-top-0\@sm { + padding-top: 0; + } + .padding-top-component\@sm { + padding-top: var(--component-padding); + } + .padding-bottom-xxxxs\@sm { + padding-bottom: var(--space-xxxxs); + } + .padding-bottom-xxxs\@sm { + padding-bottom: var(--space-xxxs); + } + .padding-bottom-xxs\@sm { + padding-bottom: var(--space-xxs); + } + .padding-bottom-xs\@sm { + padding-bottom: var(--space-xs); + } + .padding-bottom-sm\@sm { + padding-bottom: var(--space-sm); + } + .padding-bottom-md\@sm { + padding-bottom: var(--space-md); + } + .padding-bottom-lg\@sm { + padding-bottom: var(--space-lg); + } + .padding-bottom-xl\@sm { + padding-bottom: var(--space-xl); + } + .padding-bottom-xxl\@sm { + padding-bottom: var(--space-xxl); + } + .padding-bottom-xxxl\@sm { + padding-bottom: var(--space-xxxl); + } + .padding-bottom-xxxxl\@sm { + padding-bottom: var(--space-xxxxl); + } + .padding-bottom-0\@sm { + padding-bottom: 0; + } + .padding-bottom-component\@sm { + padding-bottom: var(--component-padding); + } + .padding-right-xxxxs\@sm { + padding-right: var(--space-xxxxs); + } + .padding-right-xxxs\@sm { + padding-right: var(--space-xxxs); + } + .padding-right-xxs\@sm { + padding-right: var(--space-xxs); + } + .padding-right-xs\@sm { + padding-right: var(--space-xs); + } + .padding-right-sm\@sm { + padding-right: var(--space-sm); + } + .padding-right-md\@sm { + padding-right: var(--space-md); + } + .padding-right-lg\@sm { + padding-right: var(--space-lg); + } + .padding-right-xl\@sm { + padding-right: var(--space-xl); + } + .padding-right-xxl\@sm { + padding-right: var(--space-xxl); + } + .padding-right-xxxl\@sm { + padding-right: var(--space-xxxl); + } + .padding-right-xxxxl\@sm { + padding-right: var(--space-xxxxl); + } + .padding-right-0\@sm { + padding-right: 0; + } + .padding-right-component\@sm { + padding-right: var(--component-padding); + } + .padding-left-xxxxs\@sm { + padding-left: var(--space-xxxxs); + } + .padding-left-xxxs\@sm { + padding-left: var(--space-xxxs); + } + .padding-left-xxs\@sm { + padding-left: var(--space-xxs); + } + .padding-left-xs\@sm { + padding-left: var(--space-xs); + } + .padding-left-sm\@sm { + padding-left: var(--space-sm); + } + .padding-left-md\@sm { + padding-left: var(--space-md); + } + .padding-left-lg\@sm { + padding-left: var(--space-lg); + } + .padding-left-xl\@sm { + padding-left: var(--space-xl); + } + .padding-left-xxl\@sm { + padding-left: var(--space-xxl); + } + .padding-left-xxxl\@sm { + padding-left: var(--space-xxxl); + } + .padding-left-xxxxl\@sm { + padding-left: var(--space-xxxxl); + } + .padding-left-0\@sm { + padding-left: 0; + } + .padding-left-component\@sm { + padding-left: var(--component-padding); + } + .padding-x-xxxxs\@sm { + padding-left: var(--space-xxxxs); + padding-right: var(--space-xxxxs); + } + .padding-x-xxxs\@sm { + padding-left: var(--space-xxxs); + padding-right: var(--space-xxxs); + } + .padding-x-xxs\@sm { + padding-left: var(--space-xxs); + padding-right: var(--space-xxs); + } + .padding-x-xs\@sm { + padding-left: var(--space-xs); + padding-right: var(--space-xs); + } + .padding-x-sm\@sm { + padding-left: var(--space-sm); + padding-right: var(--space-sm); + } + .padding-x-md\@sm { + padding-left: var(--space-md); + padding-right: var(--space-md); + } + .padding-x-lg\@sm { + padding-left: var(--space-lg); + padding-right: var(--space-lg); + } + .padding-x-xl\@sm { + padding-left: var(--space-xl); + padding-right: var(--space-xl); + } + .padding-x-xxl\@sm { + padding-left: var(--space-xxl); + padding-right: var(--space-xxl); + } + .padding-x-xxxl\@sm { + padding-left: var(--space-xxxl); + padding-right: var(--space-xxxl); + } + .padding-x-xxxxl\@sm { + padding-left: var(--space-xxxxl); + padding-right: var(--space-xxxxl); + } + .padding-x-0\@sm { + padding-left: 0; + padding-right: 0; + } + .padding-x-component\@sm { + padding-left: var(--component-padding); + padding-right: var(--component-padding); + } + .padding-y-xxxxs\@sm { + padding-top: var(--space-xxxxs); + padding-bottom: var(--space-xxxxs); + } + .padding-y-xxxs\@sm { + padding-top: var(--space-xxxs); + padding-bottom: var(--space-xxxs); + } + .padding-y-xxs\@sm { + padding-top: var(--space-xxs); + padding-bottom: var(--space-xxs); + } + .padding-y-xs\@sm { + padding-top: var(--space-xs); + padding-bottom: var(--space-xs); + } + .padding-y-sm\@sm { + padding-top: var(--space-sm); + padding-bottom: var(--space-sm); + } + .padding-y-md\@sm { + padding-top: var(--space-md); + padding-bottom: var(--space-md); + } + .padding-y-lg\@sm { + padding-top: var(--space-lg); + padding-bottom: var(--space-lg); + } + .padding-y-xl\@sm { + padding-top: var(--space-xl); + padding-bottom: var(--space-xl); + } + .padding-y-xxl\@sm { + padding-top: var(--space-xxl); + padding-bottom: var(--space-xxl); + } + .padding-y-xxxl\@sm { + padding-top: var(--space-xxxl); + padding-bottom: var(--space-xxxl); + } + .padding-y-xxxxl\@sm { + padding-top: var(--space-xxxxl); + padding-bottom: var(--space-xxxxl); + } + .padding-y-0\@sm { + padding-top: 0; + padding-bottom: 0; + } + .padding-y-component\@sm { + padding-top: var(--component-padding); + padding-bottom: var(--component-padding); + } + .text-center\@sm { + text-align: center; + } + .text-left\@sm { + text-align: left; + } + .text-right\@sm { + text-align: right; + } + .text-justify\@sm { + text-align: justify; + } + .text-xs\@sm { + font-size: var(--text-xs, 0.6875rem); + } + .text-sm\@sm { + font-size: var(--text-sm, 0.75rem); + } + .text-base\@sm { + font-size: var(--text-unit, 1rem); + } + .text-md\@sm { + font-size: var(--text-md, 1.125rem); + } + .text-lg\@sm { + font-size: var(--text-lg, 1.375rem); + } + .text-xl\@sm { + font-size: var(--text-xl, 1.75rem); + } + .text-xxl\@sm { + font-size: var(--text-xxl, 2rem); + } + .text-xxxl\@sm { + font-size: var(--text-xxxl, 2.5rem); + } + .text-xxxxl\@sm { + font-size: var(--text-xxxxl, 3rem); + } + .column-count-1\@sm { + -moz-column-count: 1; + column-count: 1; + } + .column-count-2\@sm { + -moz-column-count: 2; + column-count: 2; + } + .column-count-3\@sm { + -moz-column-count: 3; + column-count: 3; + } + .column-count-4\@sm { + -moz-column-count: 4; + column-count: 4; + } + .width-xxxxs\@sm { + width: var(--size-xxxxs, 0.25rem); + } + .width-xxxs\@sm { + width: var(--size-xxxs, 0.5rem); + } + .width-xxs\@sm { + width: var(--size-xxs, 0.75rem); + } + .width-xs\@sm { + width: var(--size-xs, 1rem); + } + .width-sm\@sm { + width: var(--size-sm, 1.5rem); + } + .width-md\@sm { + width: var(--size-md, 2rem); + } + .width-lg\@sm { + width: var(--size-lg, 3rem); + } + .width-xl\@sm { + width: var(--size-xl, 4rem); + } + .width-xxl\@sm { + width: var(--size-xxl, 6rem); + } + .width-xxxl\@sm { + width: var(--size-xxxl, 8rem); + } + .width-xxxxl\@sm { + width: var(--size-xxxxl, 16rem); + } + .width-0\@sm { + width: 0; + } + .width-10\%\@sm { + width: 10%; + } + .width-20\%\@sm { + width: 20%; + } + .width-25\%\@sm { + width: 25%; + } + .width-30\%\@sm { + width: 30%; + } + .width-33\%\@sm { + width: 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; + } + .width-inherit\@sm { + width: inherit; + } + .height-xxxxs\@sm { + height: var(--size-xxxxs, 0.25rem); + } + .height-xxxs\@sm { + height: var(--size-xxxs, 0.5rem); + } + .height-xxs\@sm { + height: var(--size-xxs, 0.75rem); + } + .height-xs\@sm { + height: var(--size-xs, 1rem); + } + .height-sm\@sm { + height: var(--size-sm, 1.5rem); + } + .height-md\@sm { + height: var(--size-md, 2rem); + } + .height-lg\@sm { + height: var(--size-lg, 3rem); + } + .height-xl\@sm { + height: var(--size-xl, 4rem); + } + .height-xxl\@sm { + height: var(--size-xxl, 6rem); + } + .height-xxxl\@sm { + height: var(--size-xxxl, 8rem); + } + .height-xxxxl\@sm { + height: var(--size-xxxxl, 16rem); + } + .height-0\@sm { + height: 0; + } + .height-10\%\@sm { + height: 10%; + } + .height-20\%\@sm { + height: 20%; + } + .height-25\%\@sm { + height: 25%; + } + .height-30\%\@sm { + height: 30%; + } + .height-33\%\@sm { + height: 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; + } + .height-inherit\@sm { + height: inherit; + } + .max-width-xxxxxs\@sm { + max-width: var(--max-width-xxxxxs); + } + .max-width-xxxxs\@sm { + max-width: var(--max-width-xxxxs); + } + .max-width-xxxs\@sm { + max-width: var(--max-width-xxxs); + } + .max-width-xxs\@sm { + max-width: var(--max-width-xxs); + } + .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-xxl\@sm { + max-width: var(--max-width-xxl); + } + .max-width-xxxl\@sm { + max-width: var(--max-width-xxxl); + } + .max-width-xxxxl\@sm { + max-width: var(--max-width-xxxxl); + } + .max-width-100\%\@sm { + max-width: 100%; + } + .max-width-none\@sm { + max-width: none; + } + .position-relative\@sm { + position: relative; + } + .position-absolute\@sm { + position: absolute; + } + .position-fixed\@sm { + position: fixed; + } + .position-sticky\@sm { + 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-xxxxs\@sm { + top: var(--space-xxxxs); + } + .top-xxxs\@sm { + top: var(--space-xxxs); + } + .top-xxs\@sm { + top: var(--space-xxs); + } + .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-xxl\@sm { + top: var(--space-xxl); + } + .top-xxxl\@sm { + top: var(--space-xxxl); + } + .top-xxxxl\@sm { + top: var(--space-xxxxl); + } + .bottom-0\@sm { + bottom: 0; + } + .bottom-50\%\@sm { + bottom: 50%; + } + .bottom-xxxxs\@sm { + bottom: var(--space-xxxxs); + } + .bottom-xxxs\@sm { + bottom: var(--space-xxxs); + } + .bottom-xxs\@sm { + bottom: var(--space-xxs); + } + .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-xxl\@sm { + bottom: var(--space-xxl); + } + .bottom-xxxl\@sm { + bottom: var(--space-xxxl); + } + .bottom-xxxxl\@sm { + bottom: var(--space-xxxxl); + } + .right-0\@sm { + right: 0; + } + .right-50\%\@sm { + right: 50%; + } + .right-xxxxs\@sm { + right: var(--space-xxxxs); + } + .right-xxxs\@sm { + right: var(--space-xxxs); + } + .right-xxs\@sm { + right: var(--space-xxs); + } + .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-xxl\@sm { + right: var(--space-xxl); + } + .right-xxxl\@sm { + right: var(--space-xxxl); + } + .right-xxxxl\@sm { + right: var(--space-xxxxl); + } + .left-0\@sm { + left: 0; + } + .left-50\%\@sm { + left: 50%; + } + .left-xxxxs\@sm { + left: var(--space-xxxxs); + } + .left-xxxs\@sm { + left: var(--space-xxxs); + } + .left-xxs\@sm { + left: var(--space-xxs); + } + .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-xxl\@sm { + left: var(--space-xxl); + } + .left-xxxl\@sm { + left: var(--space-xxxl); + } + .left-xxxxl\@sm { + left: var(--space-xxxxl); + } + .overflow-hidden\@sm { + overflow: hidden; + } + .overflow-auto\@sm { + overflow: auto; + } + .momentum-scrolling\@sm { + -webkit-overflow-scrolling: touch; + } + .overscroll-contain\@sm { + overscroll-behavior: contain; + } + .visible\@sm { + visibility: visible; + } + .invisible\@sm { + visibility: hidden; + } +} +@media not all and (min-width: 48rem) { + .display\@sm { + display: none !important; + } +} +@media (min-width: 64rem) { + .flex\@md { + display: flex; + } + .inline-flex\@md { + display: inline-flex; + } + .flex-wrap\@md { + flex-wrap: wrap; + } + .flex-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-start\@md { + justify-content: flex-start; + } + .justify-end\@md { + justify-content: flex-end; + } + .justify-center\@md { + justify-content: center; + } + .justify-between\@md { + justify-content: space-between; + } + .items-center\@md { + align-items: center; + } + .items-start\@md { + align-items: flex-start; + } + .items-end\@md { + align-items: flex-end; + } + .items-baseline\@md { + align-items: baseline; + } + .items-stretch\@md { + align-items: stretch; + } + .content-start\@md { + align-content: start; + } + .content-end\@md { + align-content: end; + } + .content-center\@md { + align-content: center; + } + .content-between\@md { + align-content: space-between; + } + .order-1\@md { + order: 1; + } + .order-2\@md { + order: 2; + } + .order-3\@md { + order: 3; + } + .block\@md { + display: block; + } + .inline-block\@md { + display: inline-block; + } + .inline\@md { + display: inline; + } + .contents\@md { + display: contents; + } + .css-grid\@md { + display: grid; + } + .css-inline-grid\@md { + display: inline-grid; + } + .hide\@md { + display: none !important; + } + .margin-xxxxs\@md { + margin: var(--space-xxxxs); + } + .margin-xxxs\@md { + margin: var(--space-xxxs); + } + .margin-xxs\@md { + margin: var(--space-xxs); + } + .margin-xs\@md { + margin: var(--space-xs); + } + .margin-sm\@md { + margin: var(--space-sm); + } + .margin-md\@md { + margin: var(--space-md); + } + .margin-lg\@md { + margin: var(--space-lg); + } + .margin-xl\@md { + margin: var(--space-xl); + } + .margin-xxl\@md { + margin: var(--space-xxl); + } + .margin-xxxl\@md { + margin: var(--space-xxxl); + } + .margin-xxxxl\@md { + margin: var(--space-xxxxl); + } + .margin-auto\@md { + margin: auto; + } + .margin-0\@md { + margin: 0; + } + .margin-top-xxxxs\@md { + margin-top: var(--space-xxxxs); + } + .margin-top-xxxs\@md { + margin-top: var(--space-xxxs); + } + .margin-top-xxs\@md { + margin-top: var(--space-xxs); + } + .margin-top-xs\@md { + margin-top: var(--space-xs); + } + .margin-top-sm\@md { + margin-top: var(--space-sm); + } + .margin-top-md\@md { + margin-top: var(--space-md); + } + .margin-top-lg\@md { + margin-top: var(--space-lg); + } + .margin-top-xl\@md { + margin-top: var(--space-xl); + } + .margin-top-xxl\@md { + margin-top: var(--space-xxl); + } + .margin-top-xxxl\@md { + margin-top: var(--space-xxxl); + } + .margin-top-xxxxl\@md { + margin-top: var(--space-xxxxl); + } + .margin-top-auto\@md { + margin-top: auto; + } + .margin-top-0\@md { + margin-top: 0; + } + .margin-bottom-xxxxs\@md { + margin-bottom: var(--space-xxxxs); + } + .margin-bottom-xxxs\@md { + margin-bottom: var(--space-xxxs); + } + .margin-bottom-xxs\@md { + margin-bottom: var(--space-xxs); + } + .margin-bottom-xs\@md { + margin-bottom: var(--space-xs); + } + .margin-bottom-sm\@md { + margin-bottom: var(--space-sm); + } + .margin-bottom-md\@md { + margin-bottom: var(--space-md); + } + .margin-bottom-lg\@md { + margin-bottom: var(--space-lg); + } + .margin-bottom-xl\@md { + margin-bottom: var(--space-xl); + } + .margin-bottom-xxl\@md { + margin-bottom: var(--space-xxl); + } + .margin-bottom-xxxl\@md { + margin-bottom: var(--space-xxxl); + } + .margin-bottom-xxxxl\@md { + margin-bottom: var(--space-xxxxl); + } + .margin-bottom-auto\@md { + margin-bottom: auto; + } + .margin-bottom-0\@md { + margin-bottom: 0; + } + .margin-right-xxxxs\@md { + margin-right: var(--space-xxxxs); + } + .margin-right-xxxs\@md { + margin-right: var(--space-xxxs); + } + .margin-right-xxs\@md { + margin-right: var(--space-xxs); + } + .margin-right-xs\@md { + margin-right: var(--space-xs); + } + .margin-right-sm\@md { + margin-right: var(--space-sm); + } + .margin-right-md\@md { + margin-right: var(--space-md); + } + .margin-right-lg\@md { + margin-right: var(--space-lg); + } + .margin-right-xl\@md { + margin-right: var(--space-xl); + } + .margin-right-xxl\@md { + margin-right: var(--space-xxl); + } + .margin-right-xxxl\@md { + margin-right: var(--space-xxxl); + } + .margin-right-xxxxl\@md { + margin-right: var(--space-xxxxl); + } + .margin-right-auto\@md { + margin-right: auto; + } + .margin-right-0\@md { + margin-right: 0; + } + .margin-left-xxxxs\@md { + margin-left: var(--space-xxxxs); + } + .margin-left-xxxs\@md { + margin-left: var(--space-xxxs); + } + .margin-left-xxs\@md { + margin-left: var(--space-xxs); + } + .margin-left-xs\@md { + margin-left: var(--space-xs); + } + .margin-left-sm\@md { + margin-left: var(--space-sm); + } + .margin-left-md\@md { + margin-left: var(--space-md); + } + .margin-left-lg\@md { + margin-left: var(--space-lg); + } + .margin-left-xl\@md { + margin-left: var(--space-xl); + } + .margin-left-xxl\@md { + margin-left: var(--space-xxl); + } + .margin-left-xxxl\@md { + margin-left: var(--space-xxxl); + } + .margin-left-xxxxl\@md { + margin-left: var(--space-xxxxl); + } + .margin-left-auto\@md { + margin-left: auto; + } + .margin-left-0\@md { + margin-left: 0; + } + .margin-x-xxxxs\@md { + margin-left: var(--space-xxxxs); + margin-right: var(--space-xxxxs); + } + .margin-x-xxxs\@md { + margin-left: var(--space-xxxs); + margin-right: var(--space-xxxs); + } + .margin-x-xxs\@md { + margin-left: var(--space-xxs); + margin-right: var(--space-xxs); + } + .margin-x-xs\@md { + margin-left: var(--space-xs); + margin-right: var(--space-xs); + } + .margin-x-sm\@md { + margin-left: var(--space-sm); + margin-right: var(--space-sm); + } + .margin-x-md\@md { + margin-left: var(--space-md); + margin-right: var(--space-md); + } + .margin-x-lg\@md { + margin-left: var(--space-lg); + margin-right: var(--space-lg); + } + .margin-x-xl\@md { + margin-left: var(--space-xl); + margin-right: var(--space-xl); + } + .margin-x-xxl\@md { + margin-left: var(--space-xxl); + margin-right: var(--space-xxl); + } + .margin-x-xxxl\@md { + margin-left: var(--space-xxxl); + margin-right: var(--space-xxxl); + } + .margin-x-xxxxl\@md { + margin-left: var(--space-xxxxl); + margin-right: var(--space-xxxxl); + } + .margin-x-auto\@md { + margin-left: auto; + margin-right: auto; + } + .margin-x-0\@md { + margin-left: 0; + margin-right: 0; + } + .margin-y-xxxxs\@md { + margin-top: var(--space-xxxxs); + margin-bottom: var(--space-xxxxs); + } + .margin-y-xxxs\@md { + margin-top: var(--space-xxxs); + margin-bottom: var(--space-xxxs); + } + .margin-y-xxs\@md { + margin-top: var(--space-xxs); + margin-bottom: var(--space-xxs); + } + .margin-y-xs\@md { + margin-top: var(--space-xs); + margin-bottom: var(--space-xs); + } + .margin-y-sm\@md { + margin-top: var(--space-sm); + margin-bottom: var(--space-sm); + } + .margin-y-md\@md { + margin-top: var(--space-md); + margin-bottom: var(--space-md); + } + .margin-y-lg\@md { + margin-top: var(--space-lg); + margin-bottom: var(--space-lg); + } + .margin-y-xl\@md { + margin-top: var(--space-xl); + margin-bottom: var(--space-xl); + } + .margin-y-xxl\@md { + margin-top: var(--space-xxl); + margin-bottom: var(--space-xxl); + } + .margin-y-xxxl\@md { + margin-top: var(--space-xxxl); + margin-bottom: var(--space-xxxl); + } + .margin-y-xxxxl\@md { + margin-top: var(--space-xxxxl); + margin-bottom: var(--space-xxxxl); + } + .margin-y-auto\@md { + margin-top: auto; + margin-bottom: auto; + } + .margin-y-0\@md { + margin-top: 0; + margin-bottom: 0; + } + .padding-xxxxs\@md { + padding: var(--space-xxxxs); + } + .padding-xxxs\@md { + padding: var(--space-xxxs); + } + .padding-xxs\@md { + padding: var(--space-xxs); + } + .padding-xs\@md { + padding: var(--space-xs); + } + .padding-sm\@md { + padding: var(--space-sm); + } + .padding-md\@md { + padding: var(--space-md); + } + .padding-lg\@md { + padding: var(--space-lg); + } + .padding-xl\@md { + padding: var(--space-xl); + } + .padding-xxl\@md { + padding: var(--space-xxl); + } + .padding-xxxl\@md { + padding: var(--space-xxxl); + } + .padding-xxxxl\@md { + padding: var(--space-xxxxl); + } + .padding-0\@md { + padding: 0; + } + .padding-component\@md { + padding: var(--component-padding); + } + .padding-top-xxxxs\@md { + padding-top: var(--space-xxxxs); + } + .padding-top-xxxs\@md { + padding-top: var(--space-xxxs); + } + .padding-top-xxs\@md { + padding-top: var(--space-xxs); + } + .padding-top-xs\@md { + padding-top: var(--space-xs); + } + .padding-top-sm\@md { + padding-top: var(--space-sm); + } + .padding-top-md\@md { + padding-top: var(--space-md); + } + .padding-top-lg\@md { + padding-top: var(--space-lg); + } + .padding-top-xl\@md { + padding-top: var(--space-xl); + } + .padding-top-xxl\@md { + padding-top: var(--space-xxl); + } + .padding-top-xxxl\@md { + padding-top: var(--space-xxxl); + } + .padding-top-xxxxl\@md { + padding-top: var(--space-xxxxl); + } + .padding-top-0\@md { + padding-top: 0; + } + .padding-top-component\@md { + padding-top: var(--component-padding); + } + .padding-bottom-xxxxs\@md { + padding-bottom: var(--space-xxxxs); + } + .padding-bottom-xxxs\@md { + padding-bottom: var(--space-xxxs); + } + .padding-bottom-xxs\@md { + padding-bottom: var(--space-xxs); + } + .padding-bottom-xs\@md { + padding-bottom: var(--space-xs); + } + .padding-bottom-sm\@md { + padding-bottom: var(--space-sm); + } + .padding-bottom-md\@md { + padding-bottom: var(--space-md); + } + .padding-bottom-lg\@md { + padding-bottom: var(--space-lg); + } + .padding-bottom-xl\@md { + padding-bottom: var(--space-xl); + } + .padding-bottom-xxl\@md { + padding-bottom: var(--space-xxl); + } + .padding-bottom-xxxl\@md { + padding-bottom: var(--space-xxxl); + } + .padding-bottom-xxxxl\@md { + padding-bottom: var(--space-xxxxl); + } + .padding-bottom-0\@md { + padding-bottom: 0; + } + .padding-bottom-component\@md { + padding-bottom: var(--component-padding); + } + .padding-right-xxxxs\@md { + padding-right: var(--space-xxxxs); + } + .padding-right-xxxs\@md { + padding-right: var(--space-xxxs); + } + .padding-right-xxs\@md { + padding-right: var(--space-xxs); + } + .padding-right-xs\@md { + padding-right: var(--space-xs); + } + .padding-right-sm\@md { + padding-right: var(--space-sm); + } + .padding-right-md\@md { + padding-right: var(--space-md); + } + .padding-right-lg\@md { + padding-right: var(--space-lg); + } + .padding-right-xl\@md { + padding-right: var(--space-xl); + } + .padding-right-xxl\@md { + padding-right: var(--space-xxl); + } + .padding-right-xxxl\@md { + padding-right: var(--space-xxxl); + } + .padding-right-xxxxl\@md { + padding-right: var(--space-xxxxl); + } + .padding-right-0\@md { + padding-right: 0; + } + .padding-right-component\@md { + padding-right: var(--component-padding); + } + .padding-left-xxxxs\@md { + padding-left: var(--space-xxxxs); + } + .padding-left-xxxs\@md { + padding-left: var(--space-xxxs); + } + .padding-left-xxs\@md { + padding-left: var(--space-xxs); + } + .padding-left-xs\@md { + padding-left: var(--space-xs); + } + .padding-left-sm\@md { + padding-left: var(--space-sm); + } + .padding-left-md\@md { + padding-left: var(--space-md); + } + .padding-left-lg\@md { + padding-left: var(--space-lg); + } + .padding-left-xl\@md { + padding-left: var(--space-xl); + } + .padding-left-xxl\@md { + padding-left: var(--space-xxl); + } + .padding-left-xxxl\@md { + padding-left: var(--space-xxxl); + } + .padding-left-xxxxl\@md { + padding-left: var(--space-xxxxl); + } + .padding-left-0\@md { + padding-left: 0; + } + .padding-left-component\@md { + padding-left: var(--component-padding); + } + .padding-x-xxxxs\@md { + padding-left: var(--space-xxxxs); + padding-right: var(--space-xxxxs); + } + .padding-x-xxxs\@md { + padding-left: var(--space-xxxs); + padding-right: var(--space-xxxs); + } + .padding-x-xxs\@md { + padding-left: var(--space-xxs); + padding-right: var(--space-xxs); + } + .padding-x-xs\@md { + padding-left: var(--space-xs); + padding-right: var(--space-xs); + } + .padding-x-sm\@md { + padding-left: var(--space-sm); + padding-right: var(--space-sm); + } + .padding-x-md\@md { + padding-left: var(--space-md); + padding-right: var(--space-md); + } + .padding-x-lg\@md { + padding-left: var(--space-lg); + padding-right: var(--space-lg); + } + .padding-x-xl\@md { + padding-left: var(--space-xl); + padding-right: var(--space-xl); + } + .padding-x-xxl\@md { + padding-left: var(--space-xxl); + padding-right: var(--space-xxl); + } + .padding-x-xxxl\@md { + padding-left: var(--space-xxxl); + padding-right: var(--space-xxxl); + } + .padding-x-xxxxl\@md { + padding-left: var(--space-xxxxl); + padding-right: var(--space-xxxxl); + } + .padding-x-0\@md { + padding-left: 0; + padding-right: 0; + } + .padding-x-component\@md { + padding-left: var(--component-padding); + padding-right: var(--component-padding); + } + .padding-y-xxxxs\@md { + padding-top: var(--space-xxxxs); + padding-bottom: var(--space-xxxxs); + } + .padding-y-xxxs\@md { + padding-top: var(--space-xxxs); + padding-bottom: var(--space-xxxs); + } + .padding-y-xxs\@md { + padding-top: var(--space-xxs); + padding-bottom: var(--space-xxs); + } + .padding-y-xs\@md { + padding-top: var(--space-xs); + padding-bottom: var(--space-xs); + } + .padding-y-sm\@md { + padding-top: var(--space-sm); + padding-bottom: var(--space-sm); + } + .padding-y-md\@md { + padding-top: var(--space-md); + padding-bottom: var(--space-md); + } + .padding-y-lg\@md { + padding-top: var(--space-lg); + padding-bottom: var(--space-lg); + } + .padding-y-xl\@md { + padding-top: var(--space-xl); + padding-bottom: var(--space-xl); + } + .padding-y-xxl\@md { + padding-top: var(--space-xxl); + padding-bottom: var(--space-xxl); + } + .padding-y-xxxl\@md { + padding-top: var(--space-xxxl); + padding-bottom: var(--space-xxxl); + } + .padding-y-xxxxl\@md { + padding-top: var(--space-xxxxl); + padding-bottom: var(--space-xxxxl); + } + .padding-y-0\@md { + padding-top: 0; + padding-bottom: 0; + } + .padding-y-component\@md { + padding-top: var(--component-padding); + padding-bottom: var(--component-padding); + } + .text-center\@md { + text-align: center; + } + .text-left\@md { + text-align: left; + } + .text-right\@md { + text-align: right; + } + .text-justify\@md { + text-align: justify; + } + .text-xs\@md { + font-size: var(--text-xs, 0.6875rem); + } + .text-sm\@md { + font-size: var(--text-sm, 0.75rem); + } + .text-base\@md { + font-size: var(--text-unit, 1rem); + } + .text-md\@md { + font-size: var(--text-md, 1.125rem); + } + .text-lg\@md { + font-size: var(--text-lg, 1.375rem); + } + .text-xl\@md { + font-size: var(--text-xl, 1.75rem); + } + .text-xxl\@md { + font-size: var(--text-xxl, 2rem); + } + .text-xxxl\@md { + font-size: var(--text-xxxl, 2.5rem); + } + .text-xxxxl\@md { + font-size: var(--text-xxxxl, 3rem); + } + .column-count-1\@md { + -moz-column-count: 1; + column-count: 1; + } + .column-count-2\@md { + -moz-column-count: 2; + column-count: 2; + } + .column-count-3\@md { + -moz-column-count: 3; + column-count: 3; + } + .column-count-4\@md { + -moz-column-count: 4; + column-count: 4; + } + .width-xxxxs\@md { + width: var(--size-xxxxs, 0.25rem); + } + .width-xxxs\@md { + width: var(--size-xxxs, 0.5rem); + } + .width-xxs\@md { + width: var(--size-xxs, 0.75rem); + } + .width-xs\@md { + width: var(--size-xs, 1rem); + } + .width-sm\@md { + width: var(--size-sm, 1.5rem); + } + .width-md\@md { + width: var(--size-md, 2rem); + } + .width-lg\@md { + width: var(--size-lg, 3rem); + } + .width-xl\@md { + width: var(--size-xl, 4rem); + } + .width-xxl\@md { + width: var(--size-xxl, 6rem); + } + .width-xxxl\@md { + width: var(--size-xxxl, 8rem); + } + .width-xxxxl\@md { + width: var(--size-xxxxl, 16rem); + } + .width-0\@md { + width: 0; + } + .width-10\%\@md { + width: 10%; + } + .width-20\%\@md { + width: 20%; + } + .width-25\%\@md { + width: 25%; + } + .width-30\%\@md { + width: 30%; + } + .width-33\%\@md { + width: 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; + } + .width-inherit\@md { + width: inherit; + } + .height-xxxxs\@md { + height: var(--size-xxxxs, 0.25rem); + } + .height-xxxs\@md { + height: var(--size-xxxs, 0.5rem); + } + .height-xxs\@md { + height: var(--size-xxs, 0.75rem); + } + .height-xs\@md { + height: var(--size-xs, 1rem); + } + .height-sm\@md { + height: var(--size-sm, 1.5rem); + } + .height-md\@md { + height: var(--size-md, 2rem); + } + .height-lg\@md { + height: var(--size-lg, 3rem); + } + .height-xl\@md { + height: var(--size-xl, 4rem); + } + .height-xxl\@md { + height: var(--size-xxl, 6rem); + } + .height-xxxl\@md { + height: var(--size-xxxl, 8rem); + } + .height-xxxxl\@md { + height: var(--size-xxxxl, 16rem); + } + .height-0\@md { + height: 0; + } + .height-10\%\@md { + height: 10%; + } + .height-20\%\@md { + height: 20%; + } + .height-25\%\@md { + height: 25%; + } + .height-30\%\@md { + height: 30%; + } + .height-33\%\@md { + height: 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; + } + .height-inherit\@md { + height: inherit; + } + .max-width-xxxxxs\@md { + max-width: var(--max-width-xxxxxs); + } + .max-width-xxxxs\@md { + max-width: var(--max-width-xxxxs); + } + .max-width-xxxs\@md { + max-width: var(--max-width-xxxs); + } + .max-width-xxs\@md { + max-width: var(--max-width-xxs); + } + .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-xxl\@md { + max-width: var(--max-width-xxl); + } + .max-width-xxxl\@md { + max-width: var(--max-width-xxxl); + } + .max-width-xxxxl\@md { + max-width: var(--max-width-xxxxl); + } + .max-width-100\%\@md { + max-width: 100%; + } + .max-width-none\@md { + max-width: none; + } + .position-relative\@md { + position: relative; + } + .position-absolute\@md { + position: absolute; + } + .position-fixed\@md { + position: fixed; + } + .position-sticky\@md { + 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-xxxxs\@md { + top: var(--space-xxxxs); + } + .top-xxxs\@md { + top: var(--space-xxxs); + } + .top-xxs\@md { + top: var(--space-xxs); + } + .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-xxl\@md { + top: var(--space-xxl); + } + .top-xxxl\@md { + top: var(--space-xxxl); + } + .top-xxxxl\@md { + top: var(--space-xxxxl); + } + .bottom-0\@md { + bottom: 0; + } + .bottom-50\%\@md { + bottom: 50%; + } + .bottom-xxxxs\@md { + bottom: var(--space-xxxxs); + } + .bottom-xxxs\@md { + bottom: var(--space-xxxs); + } + .bottom-xxs\@md { + bottom: var(--space-xxs); + } + .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-xxl\@md { + bottom: var(--space-xxl); + } + .bottom-xxxl\@md { + bottom: var(--space-xxxl); + } + .bottom-xxxxl\@md { + bottom: var(--space-xxxxl); + } + .right-0\@md { + right: 0; + } + .right-50\%\@md { + right: 50%; + } + .right-xxxxs\@md { + right: var(--space-xxxxs); + } + .right-xxxs\@md { + right: var(--space-xxxs); + } + .right-xxs\@md { + right: var(--space-xxs); + } + .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-xxl\@md { + right: var(--space-xxl); + } + .right-xxxl\@md { + right: var(--space-xxxl); + } + .right-xxxxl\@md { + right: var(--space-xxxxl); + } + .left-0\@md { + left: 0; + } + .left-50\%\@md { + left: 50%; + } + .left-xxxxs\@md { + left: var(--space-xxxxs); + } + .left-xxxs\@md { + left: var(--space-xxxs); + } + .left-xxs\@md { + left: var(--space-xxs); + } + .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-xxl\@md { + left: var(--space-xxl); + } + .left-xxxl\@md { + left: var(--space-xxxl); + } + .left-xxxxl\@md { + left: var(--space-xxxxl); + } + .overflow-hidden\@md { + overflow: hidden; + } + .overflow-auto\@md { + overflow: auto; + } + .momentum-scrolling\@md { + -webkit-overflow-scrolling: touch; + } + .overscroll-contain\@md { + overscroll-behavior: contain; + } + .visible\@md { + visibility: visible; + } + .invisible\@md { + visibility: hidden; + } +} +@media not all and (min-width: 64rem) { + .display\@md { + display: none !important; + } +} +@media (min-width: 80rem) { + .flex\@lg { + display: flex; + } + .inline-flex\@lg { + display: inline-flex; + } + .flex-wrap\@lg { + flex-wrap: wrap; + } + .flex-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-start\@lg { + justify-content: flex-start; + } + .justify-end\@lg { + justify-content: flex-end; + } + .justify-center\@lg { + justify-content: center; + } + .justify-between\@lg { + justify-content: space-between; + } + .items-center\@lg { + align-items: center; + } + .items-start\@lg { + align-items: flex-start; + } + .items-end\@lg { + align-items: flex-end; + } + .items-baseline\@lg { + align-items: baseline; + } + .items-stretch\@lg { + align-items: stretch; + } + .content-start\@lg { + align-content: start; + } + .content-end\@lg { + align-content: end; + } + .content-center\@lg { + align-content: center; + } + .content-between\@lg { + align-content: space-between; + } + .order-1\@lg { + order: 1; + } + .order-2\@lg { + order: 2; + } + .order-3\@lg { + order: 3; + } + .block\@lg { + display: block; + } + .inline-block\@lg { + display: inline-block; + } + .inline\@lg { + display: inline; + } + .contents\@lg { + display: contents; + } + .css-grid\@lg { + display: grid; + } + .css-inline-grid\@lg { + display: inline-grid; + } + .hide\@lg { + display: none !important; + } + .margin-xxxxs\@lg { + margin: var(--space-xxxxs); + } + .margin-xxxs\@lg { + margin: var(--space-xxxs); + } + .margin-xxs\@lg { + margin: var(--space-xxs); + } + .margin-xs\@lg { + margin: var(--space-xs); + } + .margin-sm\@lg { + margin: var(--space-sm); + } + .margin-md\@lg { + margin: var(--space-md); + } + .margin-lg\@lg { + margin: var(--space-lg); + } + .margin-xl\@lg { + margin: var(--space-xl); + } + .margin-xxl\@lg { + margin: var(--space-xxl); + } + .margin-xxxl\@lg { + margin: var(--space-xxxl); + } + .margin-xxxxl\@lg { + margin: var(--space-xxxxl); + } + .margin-auto\@lg { + margin: auto; + } + .margin-0\@lg { + margin: 0; + } + .margin-top-xxxxs\@lg { + margin-top: var(--space-xxxxs); + } + .margin-top-xxxs\@lg { + margin-top: var(--space-xxxs); + } + .margin-top-xxs\@lg { + margin-top: var(--space-xxs); + } + .margin-top-xs\@lg { + margin-top: var(--space-xs); + } + .margin-top-sm\@lg { + margin-top: var(--space-sm); + } + .margin-top-md\@lg { + margin-top: var(--space-md); + } + .margin-top-lg\@lg { + margin-top: var(--space-lg); + } + .margin-top-xl\@lg { + margin-top: var(--space-xl); + } + .margin-top-xxl\@lg { + margin-top: var(--space-xxl); + } + .margin-top-xxxl\@lg { + margin-top: var(--space-xxxl); + } + .margin-top-xxxxl\@lg { + margin-top: var(--space-xxxxl); + } + .margin-top-auto\@lg { + margin-top: auto; + } + .margin-top-0\@lg { + margin-top: 0; + } + .margin-bottom-xxxxs\@lg { + margin-bottom: var(--space-xxxxs); + } + .margin-bottom-xxxs\@lg { + margin-bottom: var(--space-xxxs); + } + .margin-bottom-xxs\@lg { + margin-bottom: var(--space-xxs); + } + .margin-bottom-xs\@lg { + margin-bottom: var(--space-xs); + } + .margin-bottom-sm\@lg { + margin-bottom: var(--space-sm); + } + .margin-bottom-md\@lg { + margin-bottom: var(--space-md); + } + .margin-bottom-lg\@lg { + margin-bottom: var(--space-lg); + } + .margin-bottom-xl\@lg { + margin-bottom: var(--space-xl); + } + .margin-bottom-xxl\@lg { + margin-bottom: var(--space-xxl); + } + .margin-bottom-xxxl\@lg { + margin-bottom: var(--space-xxxl); + } + .margin-bottom-xxxxl\@lg { + margin-bottom: var(--space-xxxxl); + } + .margin-bottom-auto\@lg { + margin-bottom: auto; + } + .margin-bottom-0\@lg { + margin-bottom: 0; + } + .margin-right-xxxxs\@lg { + margin-right: var(--space-xxxxs); + } + .margin-right-xxxs\@lg { + margin-right: var(--space-xxxs); + } + .margin-right-xxs\@lg { + margin-right: var(--space-xxs); + } + .margin-right-xs\@lg { + margin-right: var(--space-xs); + } + .margin-right-sm\@lg { + margin-right: var(--space-sm); + } + .margin-right-md\@lg { + margin-right: var(--space-md); + } + .margin-right-lg\@lg { + margin-right: var(--space-lg); + } + .margin-right-xl\@lg { + margin-right: var(--space-xl); + } + .margin-right-xxl\@lg { + margin-right: var(--space-xxl); + } + .margin-right-xxxl\@lg { + margin-right: var(--space-xxxl); + } + .margin-right-xxxxl\@lg { + margin-right: var(--space-xxxxl); + } + .margin-right-auto\@lg { + margin-right: auto; + } + .margin-right-0\@lg { + margin-right: 0; + } + .margin-left-xxxxs\@lg { + margin-left: var(--space-xxxxs); + } + .margin-left-xxxs\@lg { + margin-left: var(--space-xxxs); + } + .margin-left-xxs\@lg { + margin-left: var(--space-xxs); + } + .margin-left-xs\@lg { + margin-left: var(--space-xs); + } + .margin-left-sm\@lg { + margin-left: var(--space-sm); + } + .margin-left-md\@lg { + margin-left: var(--space-md); + } + .margin-left-lg\@lg { + margin-left: var(--space-lg); + } + .margin-left-xl\@lg { + margin-left: var(--space-xl); + } + .margin-left-xxl\@lg { + margin-left: var(--space-xxl); + } + .margin-left-xxxl\@lg { + margin-left: var(--space-xxxl); + } + .margin-left-xxxxl\@lg { + margin-left: var(--space-xxxxl); + } + .margin-left-auto\@lg { + margin-left: auto; + } + .margin-left-0\@lg { + margin-left: 0; + } + .margin-x-xxxxs\@lg { + margin-left: var(--space-xxxxs); + margin-right: var(--space-xxxxs); + } + .margin-x-xxxs\@lg { + margin-left: var(--space-xxxs); + margin-right: var(--space-xxxs); + } + .margin-x-xxs\@lg { + margin-left: var(--space-xxs); + margin-right: var(--space-xxs); + } + .margin-x-xs\@lg { + margin-left: var(--space-xs); + margin-right: var(--space-xs); + } + .margin-x-sm\@lg { + margin-left: var(--space-sm); + margin-right: var(--space-sm); + } + .margin-x-md\@lg { + margin-left: var(--space-md); + margin-right: var(--space-md); + } + .margin-x-lg\@lg { + margin-left: var(--space-lg); + margin-right: var(--space-lg); + } + .margin-x-xl\@lg { + margin-left: var(--space-xl); + margin-right: var(--space-xl); + } + .margin-x-xxl\@lg { + margin-left: var(--space-xxl); + margin-right: var(--space-xxl); + } + .margin-x-xxxl\@lg { + margin-left: var(--space-xxxl); + margin-right: var(--space-xxxl); + } + .margin-x-xxxxl\@lg { + margin-left: var(--space-xxxxl); + margin-right: var(--space-xxxxl); + } + .margin-x-auto\@lg { + margin-left: auto; + margin-right: auto; + } + .margin-x-0\@lg { + margin-left: 0; + margin-right: 0; + } + .margin-y-xxxxs\@lg { + margin-top: var(--space-xxxxs); + margin-bottom: var(--space-xxxxs); + } + .margin-y-xxxs\@lg { + margin-top: var(--space-xxxs); + margin-bottom: var(--space-xxxs); + } + .margin-y-xxs\@lg { + margin-top: var(--space-xxs); + margin-bottom: var(--space-xxs); + } + .margin-y-xs\@lg { + margin-top: var(--space-xs); + margin-bottom: var(--space-xs); + } + .margin-y-sm\@lg { + margin-top: var(--space-sm); + margin-bottom: var(--space-sm); + } + .margin-y-md\@lg { + margin-top: var(--space-md); + margin-bottom: var(--space-md); + } + .margin-y-lg\@lg { + margin-top: var(--space-lg); + margin-bottom: var(--space-lg); + } + .margin-y-xl\@lg { + margin-top: var(--space-xl); + margin-bottom: var(--space-xl); + } + .margin-y-xxl\@lg { + margin-top: var(--space-xxl); + margin-bottom: var(--space-xxl); + } + .margin-y-xxxl\@lg { + margin-top: var(--space-xxxl); + margin-bottom: var(--space-xxxl); + } + .margin-y-xxxxl\@lg { + margin-top: var(--space-xxxxl); + margin-bottom: var(--space-xxxxl); + } + .margin-y-auto\@lg { + margin-top: auto; + margin-bottom: auto; + } + .margin-y-0\@lg { + margin-top: 0; + margin-bottom: 0; + } + .padding-xxxxs\@lg { + padding: var(--space-xxxxs); + } + .padding-xxxs\@lg { + padding: var(--space-xxxs); + } + .padding-xxs\@lg { + padding: var(--space-xxs); + } + .padding-xs\@lg { + padding: var(--space-xs); + } + .padding-sm\@lg { + padding: var(--space-sm); + } + .padding-md\@lg { + padding: var(--space-md); + } + .padding-lg\@lg { + padding: var(--space-lg); + } + .padding-xl\@lg { + padding: var(--space-xl); + } + .padding-xxl\@lg { + padding: var(--space-xxl); + } + .padding-xxxl\@lg { + padding: var(--space-xxxl); + } + .padding-xxxxl\@lg { + padding: var(--space-xxxxl); + } + .padding-0\@lg { + padding: 0; + } + .padding-component\@lg { + padding: var(--component-padding); + } + .padding-top-xxxxs\@lg { + padding-top: var(--space-xxxxs); + } + .padding-top-xxxs\@lg { + padding-top: var(--space-xxxs); + } + .padding-top-xxs\@lg { + padding-top: var(--space-xxs); + } + .padding-top-xs\@lg { + padding-top: var(--space-xs); + } + .padding-top-sm\@lg { + padding-top: var(--space-sm); + } + .padding-top-md\@lg { + padding-top: var(--space-md); + } + .padding-top-lg\@lg { + padding-top: var(--space-lg); + } + .padding-top-xl\@lg { + padding-top: var(--space-xl); + } + .padding-top-xxl\@lg { + padding-top: var(--space-xxl); + } + .padding-top-xxxl\@lg { + padding-top: var(--space-xxxl); + } + .padding-top-xxxxl\@lg { + padding-top: var(--space-xxxxl); + } + .padding-top-0\@lg { + padding-top: 0; + } + .padding-top-component\@lg { + padding-top: var(--component-padding); + } + .padding-bottom-xxxxs\@lg { + padding-bottom: var(--space-xxxxs); + } + .padding-bottom-xxxs\@lg { + padding-bottom: var(--space-xxxs); + } + .padding-bottom-xxs\@lg { + padding-bottom: var(--space-xxs); + } + .padding-bottom-xs\@lg { + padding-bottom: var(--space-xs); + } + .padding-bottom-sm\@lg { + padding-bottom: var(--space-sm); + } + .padding-bottom-md\@lg { + padding-bottom: var(--space-md); + } + .padding-bottom-lg\@lg { + padding-bottom: var(--space-lg); + } + .padding-bottom-xl\@lg { + padding-bottom: var(--space-xl); + } + .padding-bottom-xxl\@lg { + padding-bottom: var(--space-xxl); + } + .padding-bottom-xxxl\@lg { + padding-bottom: var(--space-xxxl); + } + .padding-bottom-xxxxl\@lg { + padding-bottom: var(--space-xxxxl); + } + .padding-bottom-0\@lg { + padding-bottom: 0; + } + .padding-bottom-component\@lg { + padding-bottom: var(--component-padding); + } + .padding-right-xxxxs\@lg { + padding-right: var(--space-xxxxs); + } + .padding-right-xxxs\@lg { + padding-right: var(--space-xxxs); + } + .padding-right-xxs\@lg { + padding-right: var(--space-xxs); + } + .padding-right-xs\@lg { + padding-right: var(--space-xs); + } + .padding-right-sm\@lg { + padding-right: var(--space-sm); + } + .padding-right-md\@lg { + padding-right: var(--space-md); + } + .padding-right-lg\@lg { + padding-right: var(--space-lg); + } + .padding-right-xl\@lg { + padding-right: var(--space-xl); + } + .padding-right-xxl\@lg { + padding-right: var(--space-xxl); + } + .padding-right-xxxl\@lg { + padding-right: var(--space-xxxl); + } + .padding-right-xxxxl\@lg { + padding-right: var(--space-xxxxl); + } + .padding-right-0\@lg { + padding-right: 0; + } + .padding-right-component\@lg { + padding-right: var(--component-padding); + } + .padding-left-xxxxs\@lg { + padding-left: var(--space-xxxxs); + } + .padding-left-xxxs\@lg { + padding-left: var(--space-xxxs); + } + .padding-left-xxs\@lg { + padding-left: var(--space-xxs); + } + .padding-left-xs\@lg { + padding-left: var(--space-xs); + } + .padding-left-sm\@lg { + padding-left: var(--space-sm); + } + .padding-left-md\@lg { + padding-left: var(--space-md); + } + .padding-left-lg\@lg { + padding-left: var(--space-lg); + } + .padding-left-xl\@lg { + padding-left: var(--space-xl); + } + .padding-left-xxl\@lg { + padding-left: var(--space-xxl); + } + .padding-left-xxxl\@lg { + padding-left: var(--space-xxxl); + } + .padding-left-xxxxl\@lg { + padding-left: var(--space-xxxxl); + } + .padding-left-0\@lg { + padding-left: 0; + } + .padding-left-component\@lg { + padding-left: var(--component-padding); + } + .padding-x-xxxxs\@lg { + padding-left: var(--space-xxxxs); + padding-right: var(--space-xxxxs); + } + .padding-x-xxxs\@lg { + padding-left: var(--space-xxxs); + padding-right: var(--space-xxxs); + } + .padding-x-xxs\@lg { + padding-left: var(--space-xxs); + padding-right: var(--space-xxs); + } + .padding-x-xs\@lg { + padding-left: var(--space-xs); + padding-right: var(--space-xs); + } + .padding-x-sm\@lg { + padding-left: var(--space-sm); + padding-right: var(--space-sm); + } + .padding-x-md\@lg { + padding-left: var(--space-md); + padding-right: var(--space-md); + } + .padding-x-lg\@lg { + padding-left: var(--space-lg); + padding-right: var(--space-lg); + } + .padding-x-xl\@lg { + padding-left: var(--space-xl); + padding-right: var(--space-xl); + } + .padding-x-xxl\@lg { + padding-left: var(--space-xxl); + padding-right: var(--space-xxl); + } + .padding-x-xxxl\@lg { + padding-left: var(--space-xxxl); + padding-right: var(--space-xxxl); + } + .padding-x-xxxxl\@lg { + padding-left: var(--space-xxxxl); + padding-right: var(--space-xxxxl); + } + .padding-x-0\@lg { + padding-left: 0; + padding-right: 0; + } + .padding-x-component\@lg { + padding-left: var(--component-padding); + padding-right: var(--component-padding); + } + .padding-y-xxxxs\@lg { + padding-top: var(--space-xxxxs); + padding-bottom: var(--space-xxxxs); + } + .padding-y-xxxs\@lg { + padding-top: var(--space-xxxs); + padding-bottom: var(--space-xxxs); + } + .padding-y-xxs\@lg { + padding-top: var(--space-xxs); + padding-bottom: var(--space-xxs); + } + .padding-y-xs\@lg { + padding-top: var(--space-xs); + padding-bottom: var(--space-xs); + } + .padding-y-sm\@lg { + padding-top: var(--space-sm); + padding-bottom: var(--space-sm); + } + .padding-y-md\@lg { + padding-top: var(--space-md); + padding-bottom: var(--space-md); + } + .padding-y-lg\@lg { + padding-top: var(--space-lg); + padding-bottom: var(--space-lg); + } + .padding-y-xl\@lg { + padding-top: var(--space-xl); + padding-bottom: var(--space-xl); + } + .padding-y-xxl\@lg { + padding-top: var(--space-xxl); + padding-bottom: var(--space-xxl); + } + .padding-y-xxxl\@lg { + padding-top: var(--space-xxxl); + padding-bottom: var(--space-xxxl); + } + .padding-y-xxxxl\@lg { + padding-top: var(--space-xxxxl); + padding-bottom: var(--space-xxxxl); + } + .padding-y-0\@lg { + padding-top: 0; + padding-bottom: 0; + } + .padding-y-component\@lg { + padding-top: var(--component-padding); + padding-bottom: var(--component-padding); + } + .text-center\@lg { + text-align: center; + } + .text-left\@lg { + text-align: left; + } + .text-right\@lg { + text-align: right; + } + .text-justify\@lg { + text-align: justify; + } + .text-xs\@lg { + font-size: var(--text-xs, 0.6875rem); + } + .text-sm\@lg { + font-size: var(--text-sm, 0.75rem); + } + .text-base\@lg { + font-size: var(--text-unit, 1rem); + } + .text-md\@lg { + font-size: var(--text-md, 1.125rem); + } + .text-lg\@lg { + font-size: var(--text-lg, 1.375rem); + } + .text-xl\@lg { + font-size: var(--text-xl, 1.75rem); + } + .text-xxl\@lg { + font-size: var(--text-xxl, 2rem); + } + .text-xxxl\@lg { + font-size: var(--text-xxxl, 2.5rem); + } + .text-xxxxl\@lg { + font-size: var(--text-xxxxl, 3rem); + } + .column-count-1\@lg { + -moz-column-count: 1; + column-count: 1; + } + .column-count-2\@lg { + -moz-column-count: 2; + column-count: 2; + } + .column-count-3\@lg { + -moz-column-count: 3; + column-count: 3; + } + .column-count-4\@lg { + -moz-column-count: 4; + column-count: 4; + } + .width-xxxxs\@lg { + width: var(--size-xxxxs, 0.25rem); + } + .width-xxxs\@lg { + width: var(--size-xxxs, 0.5rem); + } + .width-xxs\@lg { + width: var(--size-xxs, 0.75rem); + } + .width-xs\@lg { + width: var(--size-xs, 1rem); + } + .width-sm\@lg { + width: var(--size-sm, 1.5rem); + } + .width-md\@lg { + width: var(--size-md, 2rem); + } + .width-lg\@lg { + width: var(--size-lg, 3rem); + } + .width-xl\@lg { + width: var(--size-xl, 4rem); + } + .width-xxl\@lg { + width: var(--size-xxl, 6rem); + } + .width-xxxl\@lg { + width: var(--size-xxxl, 8rem); + } + .width-xxxxl\@lg { + width: var(--size-xxxxl, 16rem); + } + .width-0\@lg { + width: 0; + } + .width-10\%\@lg { + width: 10%; + } + .width-20\%\@lg { + width: 20%; + } + .width-25\%\@lg { + width: 25%; + } + .width-30\%\@lg { + width: 30%; + } + .width-33\%\@lg { + width: 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; + } + .width-inherit\@lg { + width: inherit; + } + .height-xxxxs\@lg { + height: var(--size-xxxxs, 0.25rem); + } + .height-xxxs\@lg { + height: var(--size-xxxs, 0.5rem); + } + .height-xxs\@lg { + height: var(--size-xxs, 0.75rem); + } + .height-xs\@lg { + height: var(--size-xs, 1rem); + } + .height-sm\@lg { + height: var(--size-sm, 1.5rem); + } + .height-md\@lg { + height: var(--size-md, 2rem); + } + .height-lg\@lg { + height: var(--size-lg, 3rem); + } + .height-xl\@lg { + height: var(--size-xl, 4rem); + } + .height-xxl\@lg { + height: var(--size-xxl, 6rem); + } + .height-xxxl\@lg { + height: var(--size-xxxl, 8rem); + } + .height-xxxxl\@lg { + height: var(--size-xxxxl, 16rem); + } + .height-0\@lg { + height: 0; + } + .height-10\%\@lg { + height: 10%; + } + .height-20\%\@lg { + height: 20%; + } + .height-25\%\@lg { + height: 25%; + } + .height-30\%\@lg { + height: 30%; + } + .height-33\%\@lg { + height: 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; + } + .height-inherit\@lg { + height: inherit; + } + .max-width-xxxxxs\@lg { + max-width: var(--max-width-xxxxxs); + } + .max-width-xxxxs\@lg { + max-width: var(--max-width-xxxxs); + } + .max-width-xxxs\@lg { + max-width: var(--max-width-xxxs); + } + .max-width-xxs\@lg { + max-width: var(--max-width-xxs); + } + .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-xxl\@lg { + max-width: var(--max-width-xxl); + } + .max-width-xxxl\@lg { + max-width: var(--max-width-xxxl); + } + .max-width-xxxxl\@lg { + max-width: var(--max-width-xxxxl); + } + .max-width-100\%\@lg { + max-width: 100%; + } + .max-width-none\@lg { + max-width: none; + } + .position-relative\@lg { + position: relative; + } + .position-absolute\@lg { + position: absolute; + } + .position-fixed\@lg { + position: fixed; + } + .position-sticky\@lg { + 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-xxxxs\@lg { + top: var(--space-xxxxs); + } + .top-xxxs\@lg { + top: var(--space-xxxs); + } + .top-xxs\@lg { + top: var(--space-xxs); + } + .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-xxl\@lg { + top: var(--space-xxl); + } + .top-xxxl\@lg { + top: var(--space-xxxl); + } + .top-xxxxl\@lg { + top: var(--space-xxxxl); + } + .bottom-0\@lg { + bottom: 0; + } + .bottom-50\%\@lg { + bottom: 50%; + } + .bottom-xxxxs\@lg { + bottom: var(--space-xxxxs); + } + .bottom-xxxs\@lg { + bottom: var(--space-xxxs); + } + .bottom-xxs\@lg { + bottom: var(--space-xxs); + } + .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-xxl\@lg { + bottom: var(--space-xxl); + } + .bottom-xxxl\@lg { + bottom: var(--space-xxxl); + } + .bottom-xxxxl\@lg { + bottom: var(--space-xxxxl); + } + .right-0\@lg { + right: 0; + } + .right-50\%\@lg { + right: 50%; + } + .right-xxxxs\@lg { + right: var(--space-xxxxs); + } + .right-xxxs\@lg { + right: var(--space-xxxs); + } + .right-xxs\@lg { + right: var(--space-xxs); + } + .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-xxl\@lg { + right: var(--space-xxl); + } + .right-xxxl\@lg { + right: var(--space-xxxl); + } + .right-xxxxl\@lg { + right: var(--space-xxxxl); + } + .left-0\@lg { + left: 0; + } + .left-50\%\@lg { + left: 50%; + } + .left-xxxxs\@lg { + left: var(--space-xxxxs); + } + .left-xxxs\@lg { + left: var(--space-xxxs); + } + .left-xxs\@lg { + left: var(--space-xxs); + } + .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-xxl\@lg { + left: var(--space-xxl); + } + .left-xxxl\@lg { + left: var(--space-xxxl); + } + .left-xxxxl\@lg { + left: var(--space-xxxxl); + } + .overflow-hidden\@lg { + overflow: hidden; + } + .overflow-auto\@lg { + overflow: auto; + } + .momentum-scrolling\@lg { + -webkit-overflow-scrolling: touch; + } + .overscroll-contain\@lg { + overscroll-behavior: contain; + } + .visible\@lg { + visibility: visible; + } + .invisible\@lg { + visibility: hidden; + } +} +@media not all and (min-width: 80rem) { + .display\@lg { + display: none !important; + } +} +@media (min-width: 90rem) { + .flex\@xl { + display: flex; + } + .inline-flex\@xl { + display: inline-flex; + } + .flex-wrap\@xl { + flex-wrap: wrap; + } + .flex-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-start\@xl { + justify-content: flex-start; + } + .justify-end\@xl { + justify-content: flex-end; + } + .justify-center\@xl { + justify-content: center; + } + .justify-between\@xl { + justify-content: space-between; + } + .items-center\@xl { + align-items: center; + } + .items-start\@xl { + align-items: flex-start; + } + .items-end\@xl { + align-items: flex-end; + } + .items-baseline\@xl { + align-items: baseline; + } + .items-stretch\@xl { + align-items: stretch; + } + .content-start\@xl { + align-content: start; + } + .content-end\@xl { + align-content: end; + } + .content-center\@xl { + align-content: center; + } + .content-between\@xl { + align-content: space-between; + } + .order-1\@xl { + order: 1; + } + .order-2\@xl { + order: 2; + } + .order-3\@xl { + order: 3; + } + .block\@xl { + display: block; + } + .inline-block\@xl { + display: inline-block; + } + .inline\@xl { + display: inline; + } + .contents\@xl { + display: contents; + } + .css-grid\@xl { + display: grid; + } + .css-inline-grid\@xl { + display: inline-grid; + } + .hide\@xl { + display: none !important; + } + .margin-xxxxs\@xl { + margin: var(--space-xxxxs); + } + .margin-xxxs\@xl { + margin: var(--space-xxxs); + } + .margin-xxs\@xl { + margin: var(--space-xxs); + } + .margin-xs\@xl { + margin: var(--space-xs); + } + .margin-sm\@xl { + margin: var(--space-sm); + } + .margin-md\@xl { + margin: var(--space-md); + } + .margin-lg\@xl { + margin: var(--space-lg); + } + .margin-xl\@xl { + margin: var(--space-xl); + } + .margin-xxl\@xl { + margin: var(--space-xxl); + } + .margin-xxxl\@xl { + margin: var(--space-xxxl); + } + .margin-xxxxl\@xl { + margin: var(--space-xxxxl); + } + .margin-auto\@xl { + margin: auto; + } + .margin-0\@xl { + margin: 0; + } + .margin-top-xxxxs\@xl { + margin-top: var(--space-xxxxs); + } + .margin-top-xxxs\@xl { + margin-top: var(--space-xxxs); + } + .margin-top-xxs\@xl { + margin-top: var(--space-xxs); + } + .margin-top-xs\@xl { + margin-top: var(--space-xs); + } + .margin-top-sm\@xl { + margin-top: var(--space-sm); + } + .margin-top-md\@xl { + margin-top: var(--space-md); + } + .margin-top-lg\@xl { + margin-top: var(--space-lg); + } + .margin-top-xl\@xl { + margin-top: var(--space-xl); + } + .margin-top-xxl\@xl { + margin-top: var(--space-xxl); + } + .margin-top-xxxl\@xl { + margin-top: var(--space-xxxl); + } + .margin-top-xxxxl\@xl { + margin-top: var(--space-xxxxl); + } + .margin-top-auto\@xl { + margin-top: auto; + } + .margin-top-0\@xl { + margin-top: 0; + } + .margin-bottom-xxxxs\@xl { + margin-bottom: var(--space-xxxxs); + } + .margin-bottom-xxxs\@xl { + margin-bottom: var(--space-xxxs); + } + .margin-bottom-xxs\@xl { + margin-bottom: var(--space-xxs); + } + .margin-bottom-xs\@xl { + margin-bottom: var(--space-xs); + } + .margin-bottom-sm\@xl { + margin-bottom: var(--space-sm); + } + .margin-bottom-md\@xl { + margin-bottom: var(--space-md); + } + .margin-bottom-lg\@xl { + margin-bottom: var(--space-lg); + } + .margin-bottom-xl\@xl { + margin-bottom: var(--space-xl); + } + .margin-bottom-xxl\@xl { + margin-bottom: var(--space-xxl); + } + .margin-bottom-xxxl\@xl { + margin-bottom: var(--space-xxxl); + } + .margin-bottom-xxxxl\@xl { + margin-bottom: var(--space-xxxxl); + } + .margin-bottom-auto\@xl { + margin-bottom: auto; + } + .margin-bottom-0\@xl { + margin-bottom: 0; + } + .margin-right-xxxxs\@xl { + margin-right: var(--space-xxxxs); + } + .margin-right-xxxs\@xl { + margin-right: var(--space-xxxs); + } + .margin-right-xxs\@xl { + margin-right: var(--space-xxs); + } + .margin-right-xs\@xl { + margin-right: var(--space-xs); + } + .margin-right-sm\@xl { + margin-right: var(--space-sm); + } + .margin-right-md\@xl { + margin-right: var(--space-md); + } + .margin-right-lg\@xl { + margin-right: var(--space-lg); + } + .margin-right-xl\@xl { + margin-right: var(--space-xl); + } + .margin-right-xxl\@xl { + margin-right: var(--space-xxl); + } + .margin-right-xxxl\@xl { + margin-right: var(--space-xxxl); + } + .margin-right-xxxxl\@xl { + margin-right: var(--space-xxxxl); + } + .margin-right-auto\@xl { + margin-right: auto; + } + .margin-right-0\@xl { + margin-right: 0; + } + .margin-left-xxxxs\@xl { + margin-left: var(--space-xxxxs); + } + .margin-left-xxxs\@xl { + margin-left: var(--space-xxxs); + } + .margin-left-xxs\@xl { + margin-left: var(--space-xxs); + } + .margin-left-xs\@xl { + margin-left: var(--space-xs); + } + .margin-left-sm\@xl { + margin-left: var(--space-sm); + } + .margin-left-md\@xl { + margin-left: var(--space-md); + } + .margin-left-lg\@xl { + margin-left: var(--space-lg); + } + .margin-left-xl\@xl { + margin-left: var(--space-xl); + } + .margin-left-xxl\@xl { + margin-left: var(--space-xxl); + } + .margin-left-xxxl\@xl { + margin-left: var(--space-xxxl); + } + .margin-left-xxxxl\@xl { + margin-left: var(--space-xxxxl); + } + .margin-left-auto\@xl { + margin-left: auto; + } + .margin-left-0\@xl { + margin-left: 0; + } + .margin-x-xxxxs\@xl { + margin-left: var(--space-xxxxs); + margin-right: var(--space-xxxxs); + } + .margin-x-xxxs\@xl { + margin-left: var(--space-xxxs); + margin-right: var(--space-xxxs); + } + .margin-x-xxs\@xl { + margin-left: var(--space-xxs); + margin-right: var(--space-xxs); + } + .margin-x-xs\@xl { + margin-left: var(--space-xs); + margin-right: var(--space-xs); + } + .margin-x-sm\@xl { + margin-left: var(--space-sm); + margin-right: var(--space-sm); + } + .margin-x-md\@xl { + margin-left: var(--space-md); + margin-right: var(--space-md); + } + .margin-x-lg\@xl { + margin-left: var(--space-lg); + margin-right: var(--space-lg); + } + .margin-x-xl\@xl { + margin-left: var(--space-xl); + margin-right: var(--space-xl); + } + .margin-x-xxl\@xl { + margin-left: var(--space-xxl); + margin-right: var(--space-xxl); + } + .margin-x-xxxl\@xl { + margin-left: var(--space-xxxl); + margin-right: var(--space-xxxl); + } + .margin-x-xxxxl\@xl { + margin-left: var(--space-xxxxl); + margin-right: var(--space-xxxxl); + } + .margin-x-auto\@xl { + margin-left: auto; + margin-right: auto; + } + .margin-x-0\@xl { + margin-left: 0; + margin-right: 0; + } + .margin-y-xxxxs\@xl { + margin-top: var(--space-xxxxs); + margin-bottom: var(--space-xxxxs); + } + .margin-y-xxxs\@xl { + margin-top: var(--space-xxxs); + margin-bottom: var(--space-xxxs); + } + .margin-y-xxs\@xl { + margin-top: var(--space-xxs); + margin-bottom: var(--space-xxs); + } + .margin-y-xs\@xl { + margin-top: var(--space-xs); + margin-bottom: var(--space-xs); + } + .margin-y-sm\@xl { + margin-top: var(--space-sm); + margin-bottom: var(--space-sm); + } + .margin-y-md\@xl { + margin-top: var(--space-md); + margin-bottom: var(--space-md); + } + .margin-y-lg\@xl { + margin-top: var(--space-lg); + margin-bottom: var(--space-lg); + } + .margin-y-xl\@xl { + margin-top: var(--space-xl); + margin-bottom: var(--space-xl); + } + .margin-y-xxl\@xl { + margin-top: var(--space-xxl); + margin-bottom: var(--space-xxl); + } + .margin-y-xxxl\@xl { + margin-top: var(--space-xxxl); + margin-bottom: var(--space-xxxl); + } + .margin-y-xxxxl\@xl { + margin-top: var(--space-xxxxl); + margin-bottom: var(--space-xxxxl); + } + .margin-y-auto\@xl { + margin-top: auto; + margin-bottom: auto; + } + .margin-y-0\@xl { + margin-top: 0; + margin-bottom: 0; + } + .padding-xxxxs\@xl { + padding: var(--space-xxxxs); + } + .padding-xxxs\@xl { + padding: var(--space-xxxs); + } + .padding-xxs\@xl { + padding: var(--space-xxs); + } + .padding-xs\@xl { + padding: var(--space-xs); + } + .padding-sm\@xl { + padding: var(--space-sm); + } + .padding-md\@xl { + padding: var(--space-md); + } + .padding-lg\@xl { + padding: var(--space-lg); + } + .padding-xl\@xl { + padding: var(--space-xl); + } + .padding-xxl\@xl { + padding: var(--space-xxl); + } + .padding-xxxl\@xl { + padding: var(--space-xxxl); + } + .padding-xxxxl\@xl { + padding: var(--space-xxxxl); + } + .padding-0\@xl { + padding: 0; + } + .padding-component\@xl { + padding: var(--component-padding); + } + .padding-top-xxxxs\@xl { + padding-top: var(--space-xxxxs); + } + .padding-top-xxxs\@xl { + padding-top: var(--space-xxxs); + } + .padding-top-xxs\@xl { + padding-top: var(--space-xxs); + } + .padding-top-xs\@xl { + padding-top: var(--space-xs); + } + .padding-top-sm\@xl { + padding-top: var(--space-sm); + } + .padding-top-md\@xl { + padding-top: var(--space-md); + } + .padding-top-lg\@xl { + padding-top: var(--space-lg); + } + .padding-top-xl\@xl { + padding-top: var(--space-xl); + } + .padding-top-xxl\@xl { + padding-top: var(--space-xxl); + } + .padding-top-xxxl\@xl { + padding-top: var(--space-xxxl); + } + .padding-top-xxxxl\@xl { + padding-top: var(--space-xxxxl); + } + .padding-top-0\@xl { + padding-top: 0; + } + .padding-top-component\@xl { + padding-top: var(--component-padding); + } + .padding-bottom-xxxxs\@xl { + padding-bottom: var(--space-xxxxs); + } + .padding-bottom-xxxs\@xl { + padding-bottom: var(--space-xxxs); + } + .padding-bottom-xxs\@xl { + padding-bottom: var(--space-xxs); + } + .padding-bottom-xs\@xl { + padding-bottom: var(--space-xs); + } + .padding-bottom-sm\@xl { + padding-bottom: var(--space-sm); + } + .padding-bottom-md\@xl { + padding-bottom: var(--space-md); + } + .padding-bottom-lg\@xl { + padding-bottom: var(--space-lg); + } + .padding-bottom-xl\@xl { + padding-bottom: var(--space-xl); + } + .padding-bottom-xxl\@xl { + padding-bottom: var(--space-xxl); + } + .padding-bottom-xxxl\@xl { + padding-bottom: var(--space-xxxl); + } + .padding-bottom-xxxxl\@xl { + padding-bottom: var(--space-xxxxl); + } + .padding-bottom-0\@xl { + padding-bottom: 0; + } + .padding-bottom-component\@xl { + padding-bottom: var(--component-padding); + } + .padding-right-xxxxs\@xl { + padding-right: var(--space-xxxxs); + } + .padding-right-xxxs\@xl { + padding-right: var(--space-xxxs); + } + .padding-right-xxs\@xl { + padding-right: var(--space-xxs); + } + .padding-right-xs\@xl { + padding-right: var(--space-xs); + } + .padding-right-sm\@xl { + padding-right: var(--space-sm); + } + .padding-right-md\@xl { + padding-right: var(--space-md); + } + .padding-right-lg\@xl { + padding-right: var(--space-lg); + } + .padding-right-xl\@xl { + padding-right: var(--space-xl); + } + .padding-right-xxl\@xl { + padding-right: var(--space-xxl); + } + .padding-right-xxxl\@xl { + padding-right: var(--space-xxxl); + } + .padding-right-xxxxl\@xl { + padding-right: var(--space-xxxxl); + } + .padding-right-0\@xl { + padding-right: 0; + } + .padding-right-component\@xl { + padding-right: var(--component-padding); + } + .padding-left-xxxxs\@xl { + padding-left: var(--space-xxxxs); + } + .padding-left-xxxs\@xl { + padding-left: var(--space-xxxs); + } + .padding-left-xxs\@xl { + padding-left: var(--space-xxs); + } + .padding-left-xs\@xl { + padding-left: var(--space-xs); + } + .padding-left-sm\@xl { + padding-left: var(--space-sm); + } + .padding-left-md\@xl { + padding-left: var(--space-md); + } + .padding-left-lg\@xl { + padding-left: var(--space-lg); + } + .padding-left-xl\@xl { + padding-left: var(--space-xl); + } + .padding-left-xxl\@xl { + padding-left: var(--space-xxl); + } + .padding-left-xxxl\@xl { + padding-left: var(--space-xxxl); + } + .padding-left-xxxxl\@xl { + padding-left: var(--space-xxxxl); + } + .padding-left-0\@xl { + padding-left: 0; + } + .padding-left-component\@xl { + padding-left: var(--component-padding); + } + .padding-x-xxxxs\@xl { + padding-left: var(--space-xxxxs); + padding-right: var(--space-xxxxs); + } + .padding-x-xxxs\@xl { + padding-left: var(--space-xxxs); + padding-right: var(--space-xxxs); + } + .padding-x-xxs\@xl { + padding-left: var(--space-xxs); + padding-right: var(--space-xxs); + } + .padding-x-xs\@xl { + padding-left: var(--space-xs); + padding-right: var(--space-xs); + } + .padding-x-sm\@xl { + padding-left: var(--space-sm); + padding-right: var(--space-sm); + } + .padding-x-md\@xl { + padding-left: var(--space-md); + padding-right: var(--space-md); + } + .padding-x-lg\@xl { + padding-left: var(--space-lg); + padding-right: var(--space-lg); + } + .padding-x-xl\@xl { + padding-left: var(--space-xl); + padding-right: var(--space-xl); + } + .padding-x-xxl\@xl { + padding-left: var(--space-xxl); + padding-right: var(--space-xxl); + } + .padding-x-xxxl\@xl { + padding-left: var(--space-xxxl); + padding-right: var(--space-xxxl); + } + .padding-x-xxxxl\@xl { + padding-left: var(--space-xxxxl); + padding-right: var(--space-xxxxl); + } + .padding-x-0\@xl { + padding-left: 0; + padding-right: 0; + } + .padding-x-component\@xl { + padding-left: var(--component-padding); + padding-right: var(--component-padding); + } + .padding-y-xxxxs\@xl { + padding-top: var(--space-xxxxs); + padding-bottom: var(--space-xxxxs); + } + .padding-y-xxxs\@xl { + padding-top: var(--space-xxxs); + padding-bottom: var(--space-xxxs); + } + .padding-y-xxs\@xl { + padding-top: var(--space-xxs); + padding-bottom: var(--space-xxs); + } + .padding-y-xs\@xl { + padding-top: var(--space-xs); + padding-bottom: var(--space-xs); + } + .padding-y-sm\@xl { + padding-top: var(--space-sm); + padding-bottom: var(--space-sm); + } + .padding-y-md\@xl { + padding-top: var(--space-md); + padding-bottom: var(--space-md); + } + .padding-y-lg\@xl { + padding-top: var(--space-lg); + padding-bottom: var(--space-lg); + } + .padding-y-xl\@xl { + padding-top: var(--space-xl); + padding-bottom: var(--space-xl); + } + .padding-y-xxl\@xl { + padding-top: var(--space-xxl); + padding-bottom: var(--space-xxl); + } + .padding-y-xxxl\@xl { + padding-top: var(--space-xxxl); + padding-bottom: var(--space-xxxl); + } + .padding-y-xxxxl\@xl { + padding-top: var(--space-xxxxl); + padding-bottom: var(--space-xxxxl); + } + .padding-y-0\@xl { + padding-top: 0; + padding-bottom: 0; + } + .padding-y-component\@xl { + padding-top: var(--component-padding); + padding-bottom: var(--component-padding); + } + .text-center\@xl { + text-align: center; + } + .text-left\@xl { + text-align: left; + } + .text-right\@xl { + text-align: right; + } + .text-justify\@xl { + text-align: justify; + } + .text-xs\@xl { + font-size: var(--text-xs, 0.6875rem); + } + .text-sm\@xl { + font-size: var(--text-sm, 0.75rem); + } + .text-base\@xl { + font-size: var(--text-unit, 1rem); + } + .text-md\@xl { + font-size: var(--text-md, 1.125rem); + } + .text-lg\@xl { + font-size: var(--text-lg, 1.375rem); + } + .text-xl\@xl { + font-size: var(--text-xl, 1.75rem); + } + .text-xxl\@xl { + font-size: var(--text-xxl, 2rem); + } + .text-xxxl\@xl { + font-size: var(--text-xxxl, 2.5rem); + } + .text-xxxxl\@xl { + font-size: var(--text-xxxxl, 3rem); + } + .column-count-1\@xl { + -moz-column-count: 1; + column-count: 1; + } + .column-count-2\@xl { + -moz-column-count: 2; + column-count: 2; + } + .column-count-3\@xl { + -moz-column-count: 3; + column-count: 3; + } + .column-count-4\@xl { + -moz-column-count: 4; + column-count: 4; + } + .width-xxxxs\@xl { + width: var(--size-xxxxs, 0.25rem); + } + .width-xxxs\@xl { + width: var(--size-xxxs, 0.5rem); + } + .width-xxs\@xl { + width: var(--size-xxs, 0.75rem); + } + .width-xs\@xl { + width: var(--size-xs, 1rem); + } + .width-sm\@xl { + width: var(--size-sm, 1.5rem); + } + .width-md\@xl { + width: var(--size-md, 2rem); + } + .width-lg\@xl { + width: var(--size-lg, 3rem); + } + .width-xl\@xl { + width: var(--size-xl, 4rem); + } + .width-xxl\@xl { + width: var(--size-xxl, 6rem); + } + .width-xxxl\@xl { + width: var(--size-xxxl, 8rem); + } + .width-xxxxl\@xl { + width: var(--size-xxxxl, 16rem); + } + .width-0\@xl { + width: 0; + } + .width-10\%\@xl { + width: 10%; + } + .width-20\%\@xl { + width: 20%; + } + .width-25\%\@xl { + width: 25%; + } + .width-30\%\@xl { + width: 30%; + } + .width-33\%\@xl { + width: 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; + } + .width-inherit\@xl { + width: inherit; + } + .height-xxxxs\@xl { + height: var(--size-xxxxs, 0.25rem); + } + .height-xxxs\@xl { + height: var(--size-xxxs, 0.5rem); + } + .height-xxs\@xl { + height: var(--size-xxs, 0.75rem); + } + .height-xs\@xl { + height: var(--size-xs, 1rem); + } + .height-sm\@xl { + height: var(--size-sm, 1.5rem); + } + .height-md\@xl { + height: var(--size-md, 2rem); + } + .height-lg\@xl { + height: var(--size-lg, 3rem); + } + .height-xl\@xl { + height: var(--size-xl, 4rem); + } + .height-xxl\@xl { + height: var(--size-xxl, 6rem); + } + .height-xxxl\@xl { + height: var(--size-xxxl, 8rem); + } + .height-xxxxl\@xl { + height: var(--size-xxxxl, 16rem); + } + .height-0\@xl { + height: 0; + } + .height-10\%\@xl { + height: 10%; + } + .height-20\%\@xl { + height: 20%; + } + .height-25\%\@xl { + height: 25%; + } + .height-30\%\@xl { + height: 30%; + } + .height-33\%\@xl { + height: 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; + } + .height-inherit\@xl { + height: inherit; + } + .max-width-xxxxxs\@xl { + max-width: var(--max-width-xxxxxs); + } + .max-width-xxxxs\@xl { + max-width: var(--max-width-xxxxs); + } + .max-width-xxxs\@xl { + max-width: var(--max-width-xxxs); + } + .max-width-xxs\@xl { + max-width: var(--max-width-xxs); + } + .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-xxl\@xl { + max-width: var(--max-width-xxl); + } + .max-width-xxxl\@xl { + max-width: var(--max-width-xxxl); + } + .max-width-xxxxl\@xl { + max-width: var(--max-width-xxxxl); + } + .max-width-100\%\@xl { + max-width: 100%; + } + .max-width-none\@xl { + max-width: none; + } + .position-relative\@xl { + position: relative; + } + .position-absolute\@xl { + position: absolute; + } + .position-fixed\@xl { + position: fixed; + } + .position-sticky\@xl { + 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-xxxxs\@xl { + top: var(--space-xxxxs); + } + .top-xxxs\@xl { + top: var(--space-xxxs); + } + .top-xxs\@xl { + top: var(--space-xxs); + } + .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-xxl\@xl { + top: var(--space-xxl); + } + .top-xxxl\@xl { + top: var(--space-xxxl); + } + .top-xxxxl\@xl { + top: var(--space-xxxxl); + } + .bottom-0\@xl { + bottom: 0; + } + .bottom-50\%\@xl { + bottom: 50%; + } + .bottom-xxxxs\@xl { + bottom: var(--space-xxxxs); + } + .bottom-xxxs\@xl { + bottom: var(--space-xxxs); + } + .bottom-xxs\@xl { + bottom: var(--space-xxs); + } + .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-xxl\@xl { + bottom: var(--space-xxl); + } + .bottom-xxxl\@xl { + bottom: var(--space-xxxl); + } + .bottom-xxxxl\@xl { + bottom: var(--space-xxxxl); + } + .right-0\@xl { + right: 0; + } + .right-50\%\@xl { + right: 50%; + } + .right-xxxxs\@xl { + right: var(--space-xxxxs); + } + .right-xxxs\@xl { + right: var(--space-xxxs); + } + .right-xxs\@xl { + right: var(--space-xxs); + } + .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-xxl\@xl { + right: var(--space-xxl); + } + .right-xxxl\@xl { + right: var(--space-xxxl); + } + .right-xxxxl\@xl { + right: var(--space-xxxxl); + } + .left-0\@xl { + left: 0; + } + .left-50\%\@xl { + left: 50%; + } + .left-xxxxs\@xl { + left: var(--space-xxxxs); + } + .left-xxxs\@xl { + left: var(--space-xxxs); + } + .left-xxs\@xl { + left: var(--space-xxs); + } + .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-xxl\@xl { + left: var(--space-xxl); + } + .left-xxxl\@xl { + left: var(--space-xxxl); + } + .left-xxxxl\@xl { + left: var(--space-xxxxl); + } + .overflow-hidden\@xl { + overflow: hidden; + } + .overflow-auto\@xl { + overflow: auto; + } + .momentum-scrolling\@xl { + -webkit-overflow-scrolling: touch; + } + .overscroll-contain\@xl { + overscroll-behavior: contain; + } + .visible\@xl { + visibility: visible; + } + .invisible\@xl { + visibility: hidden; + } +} +@media not all and (min-width: 90rem) { + .display\@xl { + display: none !important; + } +} +:root, [data-theme=default] { + --color-primary-darker: hsl(0, 75%, 40%); + --color-primary-darker-h: 0; + --color-primary-darker-s: 75%; + --color-primary-darker-l: 40%; + --color-primary-dark: hsl(0, 75%, 46%); + --color-primary-dark-h: 0; + --color-primary-dark-s: 75%; + --color-primary-dark-l: 46%; + --color-primary: hsl(0, 75%, 52%); + --color-primary-h: 0; + --color-primary-s: 75%; + --color-primary-l: 52%; + --color-primary-light: hsl(0, 75%, 58%); + --color-primary-light-h: 0; + --color-primary-light-s: 75%; + --color-primary-light-l: 58%; + --color-primary-lighter: hsl(0, 75%, 64%); + --color-primary-lighter-h: 0; + --color-primary-lighter-s: 75%; + --color-primary-lighter-l: 64%; + --color-accent-darker: hsl(23, 90%, 43%); + --color-accent-darker-h: 23; + --color-accent-darker-s: 90%; + --color-accent-darker-l: 43%; + --color-accent-dark: hsl(23, 90%, 49%); + --color-accent-dark-h: 23; + --color-accent-dark-s: 90%; + --color-accent-dark-l: 49%; + --color-accent: hsl(23, 90%, 55%); + --color-accent-h: 23; + --color-accent-s: 90%; + --color-accent-l: 55%; + --color-accent-light: hsl(23, 90%, 61%); + --color-accent-light-h: 23; + --color-accent-light-s: 90%; + --color-accent-light-l: 61%; + --color-accent-lighter: hsl(23, 90%, 67%); + --color-accent-lighter-h: 23; + --color-accent-lighter-s: 90%; + --color-accent-lighter-l: 67%; + --color-secondary-darker: hsl(48, 94%, 42%); + --color-secondary-darker-h: 48; + --color-secondary-darker-s: 94%; + --color-secondary-darker-l: 42%; + --color-secondary-dark: hsl(48, 94%, 48%); + --color-secondary-dark-h: 48; + --color-secondary-dark-s: 94%; + --color-secondary-dark-l: 48%; + --color-secondary: hsl(48, 94%, 54%); + --color-secondary-h: 48; + --color-secondary-s: 94%; + --color-secondary-l: 54%; + --color-secondary-light: hsl(48, 94%, 60%); + --color-secondary-light-h: 48; + --color-secondary-light-s: 94%; + --color-secondary-light-l: 60%; + --color-secondary-lighter: hsl(48, 94%, 66%); + --color-secondary-lighter-h: 48; + --color-secondary-lighter-s: 94%; + --color-secondary-lighter-l: 66%; + --color-tertiary-darker: hsl(94, 45%, 36%); + --color-tertiary-darker-h: 94; + --color-tertiary-darker-s: 45%; + --color-tertiary-darker-l: 36%; + --color-tertiary-dark: hsl(94, 45%, 42%); + --color-tertiary-dark-h: 94; + --color-tertiary-dark-s: 45%; + --color-tertiary-dark-l: 42%; + --color-tertiary: hsl(94, 45%, 48%); + --color-tertiary-h: 94; + --color-tertiary-s: 45%; + --color-tertiary-l: 48%; + --color-tertiary-light: hsl(94, 45%, 54%); + --color-tertiary-light-h: 94; + --color-tertiary-light-s: 45%; + --color-tertiary-light-l: 54%; + --color-tertiary-lighter: hsl(94, 45%, 60%); + --color-tertiary-lighter-h: 94; + --color-tertiary-lighter-s: 45%; + --color-tertiary-lighter-l: 60%; + --color-quaternary-darker: hsl(0, 75%, 40%); + --color-quaternary-darker-h: 0; + --color-quaternary-darker-s: 75%; + --color-quaternary-darker-l: 40%; + --color-quaternary-dark: hsl(0, 75%, 46%); + --color-quaternary-dark-h: 0; + --color-quaternary-dark-s: 75%; + --color-quaternary-dark-l: 46%; + --color-quaternary: hsl(0, 75%, 52%); + --color-quaternary-h: 0; + --color-quaternary-s: 75%; + --color-quaternary-l: 52%; + --color-quaternary-light: hsl(0, 75%, 58%); + --color-quaternary-light-h: 0; + --color-quaternary-light-s: 75%; + --color-quaternary-light-l: 58%; + --color-quaternary-lighter: hsl(0, 75%, 64%); + --color-quaternary-lighter-h: 0; + --color-quaternary-lighter-s: 75%; + --color-quaternary-lighter-l: 64%; + --color-quinary-darker: hsl(157, 100%, 13%); + --color-quinary-darker-h: 157; + --color-quinary-darker-s: 100%; + --color-quinary-darker-l: 13%; + --color-quinary-dark: hsl(157, 100%, 19%); + --color-quinary-dark-h: 157; + --color-quinary-dark-s: 100%; + --color-quinary-dark-l: 19%; + --color-quinary: hsl(157, 100%, 25%); + --color-quinary-h: 157; + --color-quinary-s: 100%; + --color-quinary-l: 25%; + --color-quinary-light: hsl(157, 100%, 31%); + --color-quinary-light-h: 157; + --color-quinary-light-s: 100%; + --color-quinary-light-l: 31%; + --color-quinary-lighter: hsl(157, 100%, 37%); + --color-quinary-lighter-h: 157; + --color-quinary-lighter-s: 100%; + --color-quinary-lighter-l: 37%; + --color-black: hsl(0, 0%, 16%); + --color-black-h: 0; + --color-black-s: 0%; + --color-black-l: 16%; + --color-black-light: hsl(0, 0%, 26%); + --color-black-light-h: 0; + --color-black-light-s: 0%; + --color-black-light-l: 26%; + --color-black-lighter: hsl(0, 0%, 36%); + --color-black-lighter-h: 0; + --color-black-lighter-s: 0%; + --color-black-lighter-l: 36%; + --color-white: hsl(0, 0%, 100%); + --color-white-h: 0; + --color-white-s: 0%; + --color-white-l: 100%; + --color-white-dark: hsl(0, 0%, 90%); + --color-white-dark-h: 0; + --color-white-dark-s: 0%; + --color-white-dark-l: 90%; + --color-white-darker: hsl(0, 0%, 80%); + --color-white-darker-h: 0; + --color-white-darker-s: 0%; + --color-white-darker-l: 80%; + --color-warning-darker: hsl(35, 79%, 48%); + --color-warning-darker-h: 35; + --color-warning-darker-s: 79%; + --color-warning-darker-l: 48%; + --color-warning-dark: hsl(35, 79%, 56%); + --color-warning-dark-h: 35; + --color-warning-dark-s: 79%; + --color-warning-dark-l: 56%; + --color-warning: hsl(35, 79%, 66%); + --color-warning-h: 35; + --color-warning-s: 79%; + --color-warning-l: 66%; + --color-warning-light: hsl(35, 79%, 74%); + --color-warning-light-h: 35; + --color-warning-light-s: 79%; + --color-warning-light-l: 74%; + --color-warning-lighter: hsl(35, 79%, 82%); + --color-warning-lighter-h: 35; + --color-warning-lighter-s: 79%; + --color-warning-lighter-l: 82%; + --color-success-darker: hsl(170, 78%, 26%); + --color-success-darker-h: 170; + --color-success-darker-s: 78%; + --color-success-darker-l: 26%; + --color-success-dark: hsl(170, 78%, 31%); + --color-success-dark-h: 170; + --color-success-dark-s: 78%; + --color-success-dark-l: 31%; + --color-success: hsl(170, 78%, 36%); + --color-success-h: 170; + --color-success-s: 78%; + --color-success-l: 36%; + --color-success-light: hsl(170, 78%, 42%); + --color-success-light-h: 170; + --color-success-light-s: 78%; + --color-success-light-l: 42%; + --color-success-lighter: hsl(170, 78%, 47%); + --color-success-lighter-h: 170; + --color-success-lighter-s: 78%; + --color-success-lighter-l: 47%; + --color-error-darker: hsl(342, 89%, 38%); + --color-error-darker-h: 342; + --color-error-darker-s: 89%; + --color-error-darker-l: 38%; + --color-error-dark: hsl(342, 89%, 43%); + --color-error-dark-h: 342; + --color-error-dark-s: 89%; + --color-error-dark-l: 43%; + --color-error: hsl(342, 89%, 48%); + --color-error-h: 342; + --color-error-s: 89%; + --color-error-l: 48%; + --color-error-light: hsl(342, 89%, 56%); + --color-error-light-h: 342; + --color-error-light-s: 89%; + --color-error-light-l: 56%; + --color-error-lighter: hsl(342, 89%, 62%); + --color-error-lighter-h: 342; + --color-error-lighter-s: 89%; + --color-error-lighter-l: 62%; + --color-bg-darker: hsl(0, 0%, 91%); + --color-bg-darker-h: 0; + --color-bg-darker-s: 0%; + --color-bg-darker-l: 91%; + --color-bg-dark: hsl(0, 0%, 95%); + --color-bg-dark-h: 0; + --color-bg-dark-s: 0%; + --color-bg-dark-l: 95%; + --color-bg: hsl(0, 0%, 100%); + --color-bg-h: 0; + --color-bg-s: 0%; + --color-bg-l: 100%; + --color-bg-light: hsl(0, 0%, 100%); + --color-bg-light-h: 0; + --color-bg-light-s: 0%; + --color-bg-light-l: 100%; + --color-bg-lighter: hsl(0, 0%, 100%); + --color-bg-lighter-h: 0; + --color-bg-lighter-s: 0%; + --color-bg-lighter-l: 100%; + --color-contrast-lower: hsl(0, 0%, 86%); + --color-contrast-lower-h: 0; + --color-contrast-lower-s: 0%; + --color-contrast-lower-l: 86%; + --color-contrast-low: hsl(0, 0%, 68%); + --color-contrast-low-h: 0; + --color-contrast-low-s: 0%; + --color-contrast-low-l: 68%; + --color-contrast-medium: hsl(0, 0%, 52%); + --color-contrast-medium-h: 0; + --color-contrast-medium-s: 0%; + --color-contrast-medium-l: 52%; + --color-contrast-high: hsl(0, 0%, 29%); + --color-contrast-high-h: 0; + --color-contrast-high-s: 0%; + --color-contrast-high-l: 29%; + --color-contrast-higher: hsl(0, 0%, 16%); + --color-contrast-higher-h: 0; + --color-contrast-higher-s: 0%; + --color-contrast-higher-l: 16%; + --gradient-primary-stop-1: hsl(5, 84%, 69%); + --gradient-primary-stop-1-h: 5; + --gradient-primary-stop-1-s: 84%; + --gradient-primary-stop-1-l: 69%; + --gradient-primary-stop-2: hsl(45, 93%, 82%); + --gradient-primary-stop-2-h: 45; + --gradient-primary-stop-2-s: 93%; + --gradient-primary-stop-2-l: 82%; + --gradient-secondary-stop-1: hsl(7, 100%, 92%); + --gradient-secondary-stop-1-h: 7; + --gradient-secondary-stop-1-s: 100%; + --gradient-secondary-stop-1-l: 92%; + --gradient-secondary-stop-2: hsl(19, 100%, 84%); + --gradient-secondary-stop-2-h: 19; + --gradient-secondary-stop-2-s: 100%; + --gradient-secondary-stop-2-l: 84%; + --gradient-tertiary-stop-1: hsl(140, 26%, 86%); + --gradient-tertiary-stop-1-h: 140; + --gradient-tertiary-stop-1-s: 26%; + --gradient-tertiary-stop-1-l: 86%; + --gradient-tertiary-stop-2: hsl(144, 26%, 66%); + --gradient-tertiary-stop-2-h: 144; + --gradient-tertiary-stop-2-s: 26%; + --gradient-tertiary-stop-2-l: 66%; +} + +[data-theme=dark] { + --color-primary-darker: hsl(250, 100%, 60%); + --color-primary-darker-h: 250; + --color-primary-darker-s: 100%; + --color-primary-darker-l: 60%; + --color-primary-dark: hsl(250, 100%, 64%); + --color-primary-dark-h: 250; + --color-primary-dark-s: 100%; + --color-primary-dark-l: 64%; + --color-primary: hsl(250, 100%, 69%); + --color-primary-h: 250; + --color-primary-s: 100%; + --color-primary-l: 69%; + --color-primary-light: hsl(250, 100%, 72%); + --color-primary-light-h: 250; + --color-primary-light-s: 100%; + --color-primary-light-l: 72%; + --color-primary-lighter: hsl(250, 100%, 76%); + --color-primary-lighter-h: 250; + --color-primary-lighter-s: 100%; + --color-primary-lighter-l: 76%; + --color-accent-darker: hsl(342, 92%, 41%); + --color-accent-darker-h: 342; + --color-accent-darker-s: 92%; + --color-accent-darker-l: 41%; + --color-accent-dark: hsl(342, 92%, 47%); + --color-accent-dark-h: 342; + --color-accent-dark-s: 92%; + --color-accent-dark-l: 47%; + --color-accent: hsl(342, 92%, 54%); + --color-accent-h: 342; + --color-accent-s: 92%; + --color-accent-l: 54%; + --color-accent-light: hsl(342, 92%, 60%); + --color-accent-light-h: 342; + --color-accent-light-s: 92%; + --color-accent-light-l: 60%; + --color-accent-lighter: hsl(342, 92%, 65%); + --color-accent-lighter-h: 342; + --color-accent-lighter-s: 92%; + --color-accent-lighter-l: 65%; + --color-secondary-darker: hsl(0, 75%, 40%); + --color-secondary-darker-h: 0; + --color-secondary-darker-s: 75%; + --color-secondary-darker-l: 40%; + --color-secondary-dark: hsl(0, 75%, 46%); + --color-secondary-dark-h: 0; + --color-secondary-dark-s: 75%; + --color-secondary-dark-l: 46%; + --color-secondary: hsl(0, 75%, 52%); + --color-secondary-h: 0; + --color-secondary-s: 75%; + --color-secondary-l: 52%; + --color-secondary-light: hsl(0, 75%, 58%); + --color-secondary-light-h: 0; + --color-secondary-light-s: 75%; + --color-secondary-light-l: 58%; + --color-secondary-lighter: hsl(0, 75%, 64%); + --color-secondary-lighter-h: 0; + --color-secondary-lighter-s: 75%; + --color-secondary-lighter-l: 64%; + --color-tertiary-darker: hsl(0, 75%, 40%); + --color-tertiary-darker-h: 0; + --color-tertiary-darker-s: 75%; + --color-tertiary-darker-l: 40%; + --color-tertiary-dark: hsl(0, 75%, 46%); + --color-tertiary-dark-h: 0; + --color-tertiary-dark-s: 75%; + --color-tertiary-dark-l: 46%; + --color-tertiary: hsl(0, 75%, 52%); + --color-tertiary-h: 0; + --color-tertiary-s: 75%; + --color-tertiary-l: 52%; + --color-tertiary-light: hsl(0, 75%, 58%); + --color-tertiary-light-h: 0; + --color-tertiary-light-s: 75%; + --color-tertiary-light-l: 58%; + --color-tertiary-lighter: hsl(0, 75%, 64%); + --color-tertiary-lighter-h: 0; + --color-tertiary-lighter-s: 75%; + --color-tertiary-lighter-l: 64%; + --color-quaternary-darker: hsl(0, 75%, 40%); + --color-quaternary-darker-h: 0; + --color-quaternary-darker-s: 75%; + --color-quaternary-darker-l: 40%; + --color-quaternary-dark: hsl(0, 75%, 46%); + --color-quaternary-dark-h: 0; + --color-quaternary-dark-s: 75%; + --color-quaternary-dark-l: 46%; + --color-quaternary: hsl(0, 75%, 52%); + --color-quaternary-h: 0; + --color-quaternary-s: 75%; + --color-quaternary-l: 52%; + --color-quaternary-light: hsl(0, 75%, 58%); + --color-quaternary-light-h: 0; + --color-quaternary-light-s: 75%; + --color-quaternary-light-l: 58%; + --color-quaternary-lighter: hsl(0, 75%, 64%); + --color-quaternary-lighter-h: 0; + --color-quaternary-lighter-s: 75%; + --color-quaternary-lighter-l: 64%; + --color-quinary-darker: hsl(0, 75%, 40%); + --color-quinary-darker-h: 0; + --color-quinary-darker-s: 75%; + --color-quinary-darker-l: 40%; + --color-quinary-dark: hsl(0, 75%, 46%); + --color-quinary-dark-h: 0; + --color-quinary-dark-s: 75%; + --color-quinary-dark-l: 46%; + --color-quinary: hsl(0, 75%, 52%); + --color-quinary-h: 0; + --color-quinary-s: 75%; + --color-quinary-l: 52%; + --color-quinary-light: hsl(0, 75%, 58%); + --color-quinary-light-h: 0; + --color-quinary-light-s: 75%; + --color-quinary-light-l: 58%; + --color-quinary-lighter: hsl(0, 75%, 64%); + --color-quinary-lighter-h: 0; + --color-quinary-lighter-s: 75%; + --color-quinary-lighter-l: 64%; + --color-black: hsl(230, 13%, 9%); + --color-black-h: 230; + --color-black-s: 13%; + --color-black-l: 9%; + --color-white: hsl(0, 0%, 100%); + --color-white-h: 0; + --color-white-s: 0%; + --color-white-l: 100%; + --color-warning-darker: hsl(35, 79%, 48%); + --color-warning-darker-h: 35; + --color-warning-darker-s: 79%; + --color-warning-darker-l: 48%; + --color-warning-dark: hsl(35, 79%, 56%); + --color-warning-dark-h: 35; + --color-warning-dark-s: 79%; + --color-warning-dark-l: 56%; + --color-warning: hsl(35, 79%, 66%); + --color-warning-h: 35; + --color-warning-s: 79%; + --color-warning-l: 66%; + --color-warning-light: hsl(35, 79%, 74%); + --color-warning-light-h: 35; + --color-warning-light-s: 79%; + --color-warning-light-l: 74%; + --color-warning-lighter: hsl(35, 79%, 82%); + --color-warning-lighter-h: 35; + --color-warning-lighter-s: 79%; + --color-warning-lighter-l: 82%; + --color-success-darker: hsl(170, 78%, 26%); + --color-success-darker-h: 170; + --color-success-darker-s: 78%; + --color-success-darker-l: 26%; + --color-success-dark: hsl(170, 78%, 31%); + --color-success-dark-h: 170; + --color-success-dark-s: 78%; + --color-success-dark-l: 31%; + --color-success: hsl(170, 78%, 36%); + --color-success-h: 170; + --color-success-s: 78%; + --color-success-l: 36%; + --color-success-light: hsl(170, 78%, 42%); + --color-success-light-h: 170; + --color-success-light-s: 78%; + --color-success-light-l: 42%; + --color-success-lighter: hsl(170, 78%, 47%); + --color-success-lighter-h: 170; + --color-success-lighter-s: 78%; + --color-success-lighter-l: 47%; + --color-error-darker: hsl(342, 92%, 41%); + --color-error-darker-h: 342; + --color-error-darker-s: 92%; + --color-error-darker-l: 41%; + --color-error-dark: hsl(342, 92%, 47%); + --color-error-dark-h: 342; + --color-error-dark-s: 92%; + --color-error-dark-l: 47%; + --color-error: hsl(342, 92%, 54%); + --color-error-h: 342; + --color-error-s: 92%; + --color-error-l: 54%; + --color-error-light: hsl(342, 92%, 60%); + --color-error-light-h: 342; + --color-error-light-s: 92%; + --color-error-light-l: 60%; + --color-error-lighter: hsl(342, 92%, 65%); + --color-error-lighter-h: 342; + --color-error-lighter-s: 92%; + --color-error-lighter-l: 65%; + --color-bg-darker: hsl(232, 7%, 8%); + --color-bg-darker-h: 232; + --color-bg-darker-s: 7%; + --color-bg-darker-l: 8%; + --color-bg-dark: hsl(233, 8%, 11%); + --color-bg-dark-h: 233; + --color-bg-dark-s: 8%; + --color-bg-dark-l: 11%; + --color-bg: hsl(232, 11%, 15%); + --color-bg-h: 232; + --color-bg-s: 11%; + --color-bg-l: 15%; + --color-bg-light: hsl(233, 8%, 19%); + --color-bg-light-h: 233; + --color-bg-light-s: 8%; + --color-bg-light-l: 19%; + --color-bg-lighter: hsl(232, 7%, 22%); + --color-bg-lighter-h: 232; + --color-bg-lighter-s: 7%; + --color-bg-lighter-l: 22%; + --color-contrast-lower: hsl(240, 6%, 26%); + --color-contrast-lower-h: 240; + --color-contrast-lower-s: 6%; + --color-contrast-lower-l: 26%; + --color-contrast-low: hsl(240, 3%, 41%); + --color-contrast-low-h: 240; + --color-contrast-low-s: 3%; + --color-contrast-low-l: 41%; + --color-contrast-medium: hsl(213, 3%, 57%); + --color-contrast-medium-h: 213; + --color-contrast-medium-s: 3%; + --color-contrast-medium-l: 57%; + --color-contrast-high: hsl(240, 5%, 82%); + --color-contrast-high-h: 240; + --color-contrast-high-s: 5%; + --color-contrast-high-l: 82%; + --color-contrast-higher: hsl(240, 100%, 99%); + --color-contrast-higher-h: 240; + --color-contrast-higher-s: 100%; + --color-contrast-higher-l: 99%; + --gradient-primary-stop-1: hsl(250, 100%, 69%); + --gradient-primary-stop-1-h: 250; + --gradient-primary-stop-1-s: 100%; + --gradient-primary-stop-1-l: 69%; + --gradient-primary-stop-2: hsl(300, 100%, 69%); + --gradient-primary-stop-2-h: 300; + --gradient-primary-stop-2-s: 100%; + --gradient-primary-stop-2-l: 69%; + --gradient-secondary-stop-1: hsl(250, 100%, 69%); + --gradient-secondary-stop-1-h: 250; + --gradient-secondary-stop-1-s: 100%; + --gradient-secondary-stop-1-l: 69%; + --gradient-secondary-stop-2: hsl(300, 100%, 69%); + --gradient-secondary-stop-2-h: 300; + --gradient-secondary-stop-2-s: 100%; + --gradient-secondary-stop-2-l: 69%; + --gradient-tertiary-stop-1: hsl(250, 100%, 69%); + --gradient-tertiary-stop-1-h: 250; + --gradient-tertiary-stop-1-s: 100%; + --gradient-tertiary-stop-1-l: 69%; + --gradient-tertiary-stop-2: hsl(300, 100%, 69%); + --gradient-tertiary-stop-2-h: 300; + --gradient-tertiary-stop-2-s: 100%; + --gradient-tertiary-stop-2-l: 69%; +} + +.bg-secondary-darker { + background-color: hsla(var(--color-secondary-darker-h), var(--color-secondary-darker-s), var(--color-secondary-darker-l), var(--bg-o, 1)); +} + +.bg-secondary-dark { + background-color: hsla(var(--color-secondary-dark-h), var(--color-secondary-dark-s), var(--color-secondary-dark-l), var(--bg-o, 1)); +} + +.bg-secondary { + background-color: hsla(var(--color-secondary-h), var(--color-secondary-s), var(--color-secondary-l), var(--bg-o, 1)); +} + +.bg-secondary-light { + background-color: hsla(var(--color-secondary-light-h), var(--color-secondary-light-s), var(--color-secondary-light-l), var(--bg-o, 1)); +} + +.bg-secondary-lighter { + background-color: hsla(var(--color-secondary-lighter-h), var(--color-secondary-lighter-s), var(--color-secondary-lighter-l), var(--bg-o, 1)); +} + +.bg-tertiary-darker { + background-color: hsla(var(--color-tertiary-darker-h), var(--color-tertiary-darker-s), var(--color-tertiary-darker-l), var(--bg-o, 1)); +} + +.bg-tertiary-dark { + background-color: hsla(var(--color-tertiary-dark-h), var(--color-tertiary-dark-s), var(--color-tertiary-dark-l), var(--bg-o, 1)); +} + +.bg-tertiary { + background-color: hsla(var(--color-tertiary-h), var(--color-tertiary-s), var(--color-tertiary-l), var(--bg-o, 1)); +} + +.bg-tertiary-light { + background-color: hsla(var(--color-tertiary-light-h), var(--color-tertiary-light-s), var(--color-tertiary-light-l), var(--bg-o, 1)); +} + +.bg-tertiary-lighter { + background-color: hsla(var(--color-tertiary-lighter-h), var(--color-tertiary-lighter-s), var(--color-tertiary-lighter-l), var(--bg-o, 1)); +} + +.bg-quaternary-darker { + background-color: hsla(var(--color-quaternary-darker-h), var(--color-quaternary-darker-s), var(--color-quaternary-darker-l), var(--bg-o, 1)); +} + +.bg-quaternary-dark { + background-color: hsla(var(--color-quaternary-dark-h), var(--color-quaternary-dark-s), var(--color-quaternary-dark-l), var(--bg-o, 1)); +} + +.bg-quaternary { + background-color: hsla(var(--color-quaternary-h), var(--color-quaternary-s), var(--color-quaternary-l), var(--bg-o, 1)); +} + +.bg-quaternary-light { + background-color: hsla(var(--color-quaternary-light-h), var(--color-quaternary-light-s), var(--color-quaternary-light-l), var(--bg-o, 1)); +} + +.bg-quaternary-lighter { + background-color: hsla(var(--color-quaternary-lighter-h), var(--color-quaternary-lighter-s), var(--color-quaternary-lighter-l), var(--bg-o, 1)); +} + +.bg-quinary-darker { + background-color: hsla(var(--color-quinary-darker-h), var(--color-quinary-darker-s), var(--color-quinary-darker-l), var(--bg-o, 1)); +} + +.bg-quinary-dark { + background-color: hsla(var(--color-quinary-dark-h), var(--color-quinary-dark-s), var(--color-quinary-dark-l), var(--bg-o, 1)); +} + +.bg-quinary { + background-color: hsla(var(--color-quinary-h), var(--color-quinary-s), var(--color-quinary-l), var(--bg-o, 1)); +} + +.bg-quinary-light { + background-color: hsla(var(--color-quinary-light-h), var(--color-quinary-light-s), var(--color-quinary-light-l), var(--bg-o, 1)); +} + +.bg-quinary-lighter { + background-color: hsla(var(--color-quinary-lighter-h), var(--color-quinary-lighter-s), var(--color-quinary-lighter-l), var(--bg-o, 1)); +} + +.bg-gradient-primary { + background-image: radial-gradient(var(--gradient-primary-stop-1), var(--gradient-primary-stop-2)); +} + +.bg-gradient-primary-top { + background-image: linear-gradient(0deg, var(--gradient-primary-stop-1), var(--gradient-primary-stop-2)); +} + +.bg-gradient-primary-right { + background-image: linear-gradient(90deg, var(--gradient-primary-stop-1), var(--gradient-primary-stop-2)); +} + +.bg-gradient-primary-bottom { + background-image: linear-gradient(180deg, var(--gradient-primary-stop-1), var(--gradient-primary-stop-2)); +} + +.bg-gradient-primary-left { + background-image: linear-gradient(270deg, var(--gradient-primary-stop-1), var(--gradient-primary-stop-2)); +} + +.bg-gradient-secondary { + background-image: radial-gradient(var(--gradient-secondary-stop-1), var(--gradient-secondary-stop-2)); +} + +.bg-gradient-secondary-top { + background-image: linear-gradient(0deg, var(--gradient-secondary-stop-1), var(--gradient-secondary-stop-2)); +} + +.bg-gradient-secondary-right { + background-image: linear-gradient(90deg, var(--gradient-secondary-stop-1), var(--gradient-secondary-stop-2)); +} + +.bg-gradient-secondary-bottom { + background-image: linear-gradient(180deg, var(--gradient-secondary-stop-1), var(--gradient-secondary-stop-2)); +} + +.bg-gradient-secondary-left { + background-image: linear-gradient(270deg, var(--gradient-secondary-stop-1), var(--gradient-secondary-stop-2)); +} + +.bg-gradient-tertiary { + background-image: radial-gradient(var(--gradient-tertiary-stop-1), var(--gradient-tertiary-stop-2)); +} + +.bg-gradient-tertiary-top { + background-image: linear-gradient(0deg, var(--gradient-tertiary-stop-1), var(--gradient-tertiary-stop-2)); +} + +.bg-gradient-tertiary-right { + background-image: linear-gradient(90deg, var(--gradient-tertiary-stop-1), var(--gradient-tertiary-stop-2)); +} + +.bg-gradient-tertiary-bottom { + background-image: linear-gradient(180deg, var(--gradient-tertiary-stop-1), var(--gradient-tertiary-stop-2)); +} + +.bg-gradient-tertiary-left { + background-image: linear-gradient(270deg, var(--gradient-tertiary-stop-1), var(--gradient-tertiary-stop-2)); +} + +.border-gradient-primary { + -o-border-image: radial-gradient(var(--gradient-primary-stop-1), var(--gradient-primary-stop-2)) 1; + border-image: radial-gradient(var(--gradient-primary-stop-1), var(--gradient-primary-stop-2)) 1; +} + +.border-gradient-primary-top { + -o-border-image: linear-gradient(0deg, var(--gradient-primary-stop-1), var(--gradient-primary-stop-2)) 1; + border-image: linear-gradient(0deg, var(--gradient-primary-stop-1), var(--gradient-primary-stop-2)) 1; +} + +.border-gradient-primary-right { + -o-border-image: linear-gradient(90deg, var(--gradient-primary-stop-1), var(--gradient-primary-stop-2)) 1; + border-image: linear-gradient(90deg, var(--gradient-primary-stop-1), var(--gradient-primary-stop-2)) 1; +} + +.border-gradient-primary-bottom { + -o-border-image: linear-gradient(180deg, var(--gradient-primary-stop-1), var(--gradient-primary-stop-2)) 1; + border-image: linear-gradient(180deg, var(--gradient-primary-stop-1), var(--gradient-primary-stop-2)) 1; +} + +.border-gradient-primary-left { + -o-border-image: linear-gradient(270deg, var(--gradient-primary-stop-1), var(--gradient-primary-stop-2)) 1; + border-image: linear-gradient(270deg, var(--gradient-primary-stop-1), var(--gradient-primary-stop-2)) 1; +} + +.border-gradient-secondary { + -o-border-image: radial-gradient(var(--gradient-secondary-stop-1), var(--gradient-secondary-stop-2)) 1; + border-image: radial-gradient(var(--gradient-secondary-stop-1), var(--gradient-secondary-stop-2)) 1; +} + +.border-gradient-secondary-top { + -o-border-image: linear-gradient(0deg, var(--gradient-secondary-stop-1), var(--gradient-secondary-stop-2)) 1; + border-image: linear-gradient(0deg, var(--gradient-secondary-stop-1), var(--gradient-secondary-stop-2)) 1; +} + +.border-gradient-secondary-right { + -o-border-image: linear-gradient(90deg, var(--gradient-secondary-stop-1), var(--gradient-secondary-stop-2)) 1; + border-image: linear-gradient(90deg, var(--gradient-secondary-stop-1), var(--gradient-secondary-stop-2)) 1; +} + +.border-gradient-secondary-bottom { + -o-border-image: linear-gradient(180deg, var(--gradient-secondary-stop-1), var(--gradient-secondary-stop-2)) 1; + border-image: linear-gradient(180deg, var(--gradient-secondary-stop-1), var(--gradient-secondary-stop-2)) 1; +} + +.border-gradient-secondary-left { + -o-border-image: linear-gradient(270deg, var(--gradient-secondary-stop-1), var(--gradient-secondary-stop-2)) 1; + border-image: linear-gradient(270deg, var(--gradient-secondary-stop-1), var(--gradient-secondary-stop-2)) 1; +} + +.border-gradient-tertiary { + -o-border-image: radial-gradient(var(--gradient-tertiary-stop-1), var(--gradient-tertiary-stop-2)) 1; + border-image: radial-gradient(var(--gradient-tertiary-stop-1), var(--gradient-tertiary-stop-2)) 1; +} + +.border-gradient-tertiary-top { + -o-border-image: linear-gradient(0deg, var(--gradient-tertiary-stop-1), var(--gradient-tertiary-stop-2)) 1; + border-image: linear-gradient(0deg, var(--gradient-tertiary-stop-1), var(--gradient-tertiary-stop-2)) 1; +} + +.border-gradient-tertiary-right { + -o-border-image: linear-gradient(90deg, var(--gradient-tertiary-stop-1), var(--gradient-tertiary-stop-2)) 1; + border-image: linear-gradient(90deg, var(--gradient-tertiary-stop-1), var(--gradient-tertiary-stop-2)) 1; +} + +.border-gradient-tertiary-bottom { + -o-border-image: linear-gradient(180deg, var(--gradient-tertiary-stop-1), var(--gradient-tertiary-stop-2)) 1; + border-image: linear-gradient(180deg, var(--gradient-tertiary-stop-1), var(--gradient-tertiary-stop-2)) 1; +} + +.border-gradient-tertiary-left { + -o-border-image: linear-gradient(270deg, var(--gradient-tertiary-stop-1), var(--gradient-tertiary-stop-2)) 1; + border-image: linear-gradient(270deg, var(--gradient-tertiary-stop-1), var(--gradient-tertiary-stop-2)) 1; +} + +.border-secondary-darker { + border-color: hsla(var(--color-secondary-darker-h), var(--color-secondary-darker-s), var(--color-secondary-darker-l), var(--bg-o, 1)); +} + +.border-secondary-dark { + border-color: hsla(var(--color-secondary-dark-h), var(--color-secondary-dark-s), var(--color-secondary-dark-l), var(--bg-o, 1)); +} + +.border-secondary { + border-color: hsla(var(--color-secondary-h), var(--color-secondary-s), var(--color-secondary-l), var(--bg-o, 1)); +} + +.border-secondary-light { + border-color: hsla(var(--color-secondary-light-h), var(--color-secondary-light-s), var(--color-secondary-light-l), var(--bg-o, 1)); +} + +.border-secondary-lighter { + border-color: hsla(var(--color-secondary-lighter-h), var(--color-secondary-lighter-s), var(--color-secondary-lighter-l), var(--bg-o, 1)); +} + +.border-tertiary-darker { + border-color: hsla(var(--color-tertiary-darker-h), var(--color-tertiary-darker-s), var(--color-tertiary-darker-l), var(--bg-o, 1)); +} + +.border-tertiary-dark { + border-color: hsla(var(--color-tertiary-dark-h), var(--color-tertiary-dark-s), var(--color-tertiary-dark-l), var(--bg-o, 1)); +} + +.border-tertiary { + border-color: hsla(var(--color-tertiary-h), var(--color-tertiary-s), var(--color-tertiary-l), var(--bg-o, 1)); +} + +.border-tertiary-light { + border-color: hsla(var(--color-tertiary-light-h), var(--color-tertiary-light-s), var(--color-tertiary-light-l), var(--bg-o, 1)); +} + +.border-tertiary-lighter { + border-color: hsla(var(--color-tertiary-lighter-h), var(--color-tertiary-lighter-s), var(--color-tertiary-lighter-l), var(--bg-o, 1)); +} + +.border-quaternary-darker { + border-color: hsla(var(--color-quaternary-darker-h), var(--color-quaternary-darker-s), var(--color-quaternary-darker-l), var(--bg-o, 1)); +} + +.border-quaternary-dark { + border-color: hsla(var(--color-quaternary-dark-h), var(--color-quaternary-dark-s), var(--color-quaternary-dark-l), var(--bg-o, 1)); +} + +.border-quaternary { + border-color: hsla(var(--color-quaternary-h), var(--color-quaternary-s), var(--color-quaternary-l), var(--bg-o, 1)); +} + +.border-quaternary-light { + border-color: hsla(var(--color-quaternary-light-h), var(--color-quaternary-light-s), var(--color-quaternary-light-l), var(--bg-o, 1)); +} + +.border-quaternary-lighter { + border-color: hsla(var(--color-quaternary-lighter-h), var(--color-quaternary-lighter-s), var(--color-quaternary-lighter-l), var(--bg-o, 1)); +} + +.border-quinary-darker { + border-color: hsla(var(--color-quinary-darker-h), var(--color-quinary-darker-s), var(--color-quinary-darker-l), var(--bg-o, 1)); +} + +.border-quinary-dark { + border-color: hsla(var(--color-quinary-dark-h), var(--color-quinary-dark-s), var(--color-quinary-dark-l), var(--bg-o, 1)); +} + +.border-quinary { + border-color: hsla(var(--color-quinary-h), var(--color-quinary-s), var(--color-quinary-l), var(--bg-o, 1)); +} + +.border-quinary-light { + border-color: hsla(var(--color-quinary-light-h), var(--color-quinary-light-s), var(--color-quinary-light-l), var(--bg-o, 1)); +} + +.border-quinary-lighter { + border-color: hsla(var(--color-quinary-lighter-h), var(--color-quinary-lighter-s), var(--color-quinary-lighter-l), var(--bg-o, 1)); +} + +:root { + --space-unit: 1.1rem; +} + +:root, * { + --space-xxxxs: calc(0.125 * var(--space-unit)); + --space-xxxs: calc(0.25 * var(--space-unit)); + --space-xxs: calc(0.375 * var(--space-unit)); + --space-xs: calc(0.5 * var(--space-unit)); + --space-sm: calc(0.75 * var(--space-unit)); + --space-md: calc(0.5 * var(--space-unit)); + --space-lg: calc(2 * var(--space-unit)); + --space-xl: calc(3.25 * var(--space-unit)); + --space-xxl: calc(5.25 * var(--space-unit)); + --space-xxxl: calc(8.5 * var(--space-unit)); + --space-xxxxl: calc(13.75 * var(--space-unit)); + --component-padding: var(--space-md); +} + +@supports (--css: variables) { + @media (min-width: 32rem) { + :root, * { + --component-padding: var(--space-xs); + } + } + @media (min-width: 48rem) { + :root, * { + --component-padding: var(--space-xs); + } + } + @media (min-width: 64rem) { + :root, * { + --space-xxxxs: calc(0.1875 * var(--space-unit)); + --space-xxxs: calc(0.375 * var(--space-unit)); + --space-xxs: calc(0.5625 * var(--space-unit)); + --space-xs: calc(0.75 * var(--space-unit)); + --space-sm: calc(1.125 * var(--space-unit)); + --space-md: calc(1.5 * var(--space-unit)); + --space-lg: calc(3.125 * var(--space-unit)); + --space-xl: calc(5.125 * var(--space-unit)); + --space-xxl: calc(8.25 * var(--space-unit)); + --space-xxxl: calc(13.25 * var(--space-unit)); + --space-xxxxl: calc(21.5 * var(--space-unit)); + --component-padding: var(--space-xs); + } + } +} +:root { + --radius: 0.375em; +} + +.hover\:reduce-opacity { + opacity: 1; + transition: all 0.3s ease; +} +.hover\:reduce-opacity:hover { + opacity: 0.8; +} + +.hover\:scale { + transition: transform 0.3s var(--ease-out-back); +} +.hover\:scale:hover { + transform: scale(1.1); +} + +.hover\:elevate { + box-shadow: var(--shadow-sm); + transition: all 0.3s ease; +} +.hover\:elevate:hover { + box-shadow: var(--shadow-md); +} + +.link-subtle { + color: inherit; + cursor: pointer; + text-decoration: none; + transition: all 0.2s ease; +} +.link-subtle:hover { + color: var(--color-primary); +} + +:root { + --font-primary: Inter, system-ui, sans-serif; + --text-base-size: 1rem; + --text-scale-ratio: 1.3; + --body-line-height: 1.4; + --heading-line-height: 1.2; + --font-primary-capital-letter: 1; + --text-unit: var(--text-base-size); +} + +:root, * { + --text-xs: calc((var(--text-unit) / var(--text-scale-ratio)) / var(--text-scale-ratio)); + --text-sm: calc(var(--text-xs) * var(--text-scale-ratio)); + --text-md: calc(var(--text-sm) * var(--text-scale-ratio) * var(--text-scale-ratio)); + --text-lg: calc(var(--text-md) * var(--text-scale-ratio)); + --text-xl: calc(var(--text-lg) * var(--text-scale-ratio)); + --text-xxl: calc(var(--text-xl) * var(--text-scale-ratio)); + --text-xxxl: calc(var(--text-xxl) * var(--text-scale-ratio)); + --text-xxxxl: calc(var(--text-xxxl) * var(--text-scale-ratio)); +} + +@media (min-width: 48rem) { + :root { + --text-base-size: 1.011em; + --text-scale-ratio: 1.615; + } +} +@media (min-width: 64rem) { + :root { + --text-base-size: 1.333rem; + --text-scale-ratio: 1.215; + } +} +body { + font-family: var(--font-primary); +} + +h1, h2, h3, h4 { + font-family: var(--font-primary); + --heading-font-weight: 700; +} + +.font-primary { + font-family: var(--font-primary); +} + +.color-secondary-darker { + color: hsla(var(--color-secondary-darker-h), var(--color-secondary-darker-s), var(--color-secondary-darker-l), var(--color-o, 1)); +} + +.color-secondary-dark { + color: hsla(var(--color-secondary-dark-h), var(--color-secondary-dark-s), var(--color-secondary-dark-l), var(--color-o, 1)); +} + +.color-secondary { + color: hsla(var(--color-secondary-h), var(--color-secondary-s), var(--color-secondary-l), var(--color-o, 1)); +} + +.color-secondary-light { + color: hsla(var(--color-secondary-light-h), var(--color-secondary-light-s), var(--color-secondary-light-l), var(--color-o, 1)); +} + +.color-secondary-lighter { + color: hsla(var(--color-secondary-lighter-h), var(--color-secondary-lighter-s), var(--color-secondary-lighter-l), var(--color-o, 1)); +} + +.color-tertiary-darker { + color: hsla(var(--color-tertiary-darker-h), var(--color-tertiary-darker-s), var(--color-tertiary-darker-l), var(--color-o, 1)); +} + +.color-tertiary-dark { + color: hsla(var(--color-tertiary-dark-h), var(--color-tertiary-dark-s), var(--color-tertiary-dark-l), var(--color-o, 1)); +} + +.color-tertiary { + color: hsla(var(--color-tertiary-h), var(--color-tertiary-s), var(--color-tertiary-l), var(--color-o, 1)); +} + +.color-tertiary-light { + color: hsla(var(--color-tertiary-light-h), var(--color-tertiary-light-s), var(--color-tertiary-light-l), var(--color-o, 1)); +} + +.color-tertiary-lighter { + color: hsla(var(--color-tertiary-lighter-h), var(--color-tertiary-lighter-s), var(--color-tertiary-lighter-l), var(--color-o, 1)); +} + +.color-quaternary-darker { + color: hsla(var(--color-quaternary-darker-h), var(--color-quaternary-darker-s), var(--color-quaternary-darker-l), var(--color-o, 1)); +} + +.color-quaternary-dark { + color: hsla(var(--color-quaternary-dark-h), var(--color-quaternary-dark-s), var(--color-quaternary-dark-l), var(--color-o, 1)); +} + +.color-quaternary { + color: hsla(var(--color-quaternary-h), var(--color-quaternary-s), var(--color-quaternary-l), var(--color-o, 1)); +} + +.color-quaternary-light { + color: hsla(var(--color-quaternary-light-h), var(--color-quaternary-light-s), var(--color-quaternary-light-l), var(--color-o, 1)); +} + +.color-quaternary-lighter { + color: hsla(var(--color-quaternary-lighter-h), var(--color-quaternary-lighter-s), var(--color-quaternary-lighter-l), var(--color-o, 1)); +} + +.color-quinary-darker { + color: hsla(var(--color-quinary-darker-h), var(--color-quinary-darker-s), var(--color-quinary-darker-l), var(--color-o, 1)); +} + +.color-quinary-dark { + color: hsla(var(--color-quinary-dark-h), var(--color-quinary-dark-s), var(--color-quinary-dark-l), var(--color-o, 1)); +} + +.color-quinary { + color: hsla(var(--color-quinary-h), var(--color-quinary-s), var(--color-quinary-l), var(--color-o, 1)); +} + +.color-quinary-light { + color: hsla(var(--color-quinary-light-h), var(--color-quinary-light-s), var(--color-quinary-light-l), var(--color-o, 1)); +} + +.color-quinary-lighter { + color: hsla(var(--color-quinary-lighter-h), var(--color-quinary-lighter-s), var(--color-quinary-lighter-l), var(--color-o, 1)); +} + +.color-gradient-primary-top { + background-image: linear-gradient(0deg, var(--gradient-primary-stop-1), var(--gradient-primary-stop-2)); +} + +.color-gradient-primary-right { + background-image: linear-gradient(90deg, var(--gradient-primary-stop-1), var(--gradient-primary-stop-2)); +} + +.color-gradient-primary-bottom { + background-image: linear-gradient(180deg, var(--gradient-primary-stop-1), var(--gradient-primary-stop-2)); +} + +.color-gradient-primary-left { + background-image: linear-gradient(270deg, var(--gradient-primary-stop-1), var(--gradient-primary-stop-2)); +} + +.color-gradient-secondary-top { + background-image: linear-gradient(0deg, var(--gradient-secondary-stop-1), var(--gradient-secondary-stop-2)); +} + +.color-gradient-secondary-right { + background-image: linear-gradient(90deg, var(--gradient-secondary-stop-1), var(--gradient-secondary-stop-2)); +} + +.color-gradient-secondary-bottom { + background-image: linear-gradient(180deg, var(--gradient-secondary-stop-1), var(--gradient-secondary-stop-2)); +} + +.color-gradient-secondary-left { + background-image: linear-gradient(270deg, var(--gradient-secondary-stop-1), var(--gradient-secondary-stop-2)); +} + +.color-gradient-tertiary-top { + background-image: linear-gradient(0deg, var(--gradient-tertiary-stop-1), var(--gradient-tertiary-stop-2)); +} + +.color-gradient-tertiary-right { + background-image: linear-gradient(90deg, var(--gradient-tertiary-stop-1), var(--gradient-tertiary-stop-2)); +} + +.color-gradient-tertiary-bottom { + background-image: linear-gradient(180deg, var(--gradient-tertiary-stop-1), var(--gradient-tertiary-stop-2)); +} + +.color-gradient-tertiary-left { + background-image: linear-gradient(270deg, var(--gradient-tertiary-stop-1), var(--gradient-tertiary-stop-2)); +} + +html { + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.link { + text-decoration: none; + background-image: linear-gradient(to right, currentColor 50%, hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 0.15) 50%); + background-size: 200% 1px; + background-repeat: no-repeat; + background-position: 100% 100%; + transition: background-position 0.2s; +} +.link:hover { + background-position: 0% 100%; +} + +mark { + background-color: hsla(var(--color-accent-h), var(--color-accent-s), var(--color-accent-l), 0.2); + color: inherit; +} + +.text-component { + --line-height-multiplier: 1; + --text-space-y-multiplier: 1; +} +.text-component > * { + --text-unit: 1em; + --space-unit: 1em; +} +.text-component blockquote { + padding-left: 1em; + border-left: 4px solid var(--color-contrast-lower); + font-style: italic; +} +.text-component hr { + background: var(--color-contrast-lower); + height: 1px; +} +.text-component figcaption { + font-size: var(--text-sm); + color: var(--color-contrast-low); +} + +.article { + --body-line-height: 1.58; + --text-space-y-multiplier: 1.2; +} + +:root { + --btn-font-size: 1em; + --btn-padding-x: var(--space-sm); + --btn-padding-y: var(--space-xxs); + --btn-radius: var(--radius-md); +} + +.btn { + background: var(--color-bg-dark); + color: var(--color-contrast-higher); + cursor: pointer; + text-decoration: none; + line-height: 1.2; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + transition: all 0.2s ease; + will-change: transform; +} +.btn:focus { + box-shadow: 0px 0px 0px 2px var(--color-bg), 0px 0px 0px 4px hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 0.15); + outline: none; +} +.btn:active { + transform: translateY(2px); +} + +.btn--primary { + background: var(--color-primary); + color: var(--color-white); + box-shadow: inset 0px 1px 0px hsla(var(--color-white-h), var(--color-white-s), var(--color-white-l), 0.15), 0px 1px 3px hsla(var(--color-primary-darker-h), var(--color-primary-darker-s), var(--color-primary-darker-l), 0.25), 0px 2px 6px hsla(var(--color-primary-darker-h), var(--color-primary-darker-s), var(--color-primary-darker-l), 0.1), 0px 6px 10px -2px hsla(var(--color-primary-darker-h), var(--color-primary-darker-s), var(--color-primary-darker-l), 0.25); +} +.btn--primary:hover { + background: var(--color-primary-light); + box-shadow: inset 0px 1px 0px hsla(var(--color-white-h), var(--color-white-s), var(--color-white-l), 0.15), 0px 1px 2px hsla(var(--color-primary-darker-h), var(--color-primary-darker-s), var(--color-primary-darker-l), 0.25), 0px 1px 4px hsla(var(--color-primary-darker-h), var(--color-primary-darker-s), var(--color-primary-darker-l), 0.1), 0px 3px 6px -2px hsla(var(--color-primary-darker-h), var(--color-primary-darker-s), var(--color-primary-darker-l), 0.25); +} +.btn--primary:focus { + box-shadow: inset 0px 1px 0px hsla(var(--color-white-h), var(--color-white-s), var(--color-white-l), 0.15), 0px 1px 2px hsla(var(--color-primary-darker-h), var(--color-primary-darker-s), var(--color-primary-darker-l), 0.25), 0px 1px 4px hsla(var(--color-primary-darker-h), var(--color-primary-darker-s), var(--color-primary-darker-l), 0.1), 0px 3px 6px -2px hsla(var(--color-primary-darker-h), var(--color-primary-darker-s), var(--color-primary-darker-l), 0.25), 0px 0px 0px 2px var(--color-bg), 0px 0px 0px 4px var(--color-primary); +} + +.btn--subtle { + background: var(--color-bg-lighter); + color: var(--color-contrast-higher); + box-shadow: inset 0px 1px 0px hsla(var(--color-white-h), var(--color-white-s), var(--color-white-l), 0.1), 0px 0px 0px 1px hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0.02), 0px 1px 3px -1px hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0.2), 0px 3px 6px hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0.12); +} +.btn--subtle:hover { + background: var(--color-bg-light); + box-shadow: inset 0px 1px 0px hsla(var(--color-white-h), var(--color-white-s), var(--color-white-l), 0.1), 0px 0px 0px 1px hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0.02), 0px 1px 2px hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0.12), 0px 1px 3px -1px hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0.2); +} +.btn--subtle:focus { + box-shadow: inset 0px 1px 0px hsla(var(--color-white-h), var(--color-white-s), var(--color-white-l), 0.1), 0px 0px 0px 1px hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0.02), 0px 1px 3px -1px hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0.2), 0px 3px 6px hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0.12), 0px 0px 0px 2px var(--color-bg), 0px 0px 0px 4px var(--color-contrast-high); +} + +.btn--accent { + background: var(--color-quinary); + color: var(--color-white); + box-shadow: inset 0px 1px 0px hsla(var(--color-white-h), var(--color-white-s), var(--color-white-l), 0.15), 0px 1px 3px hsla(var(--color-accent-darker-h), var(--color-accent-darker-s), var(--color-accent-darker-l), 0.25), 0px 2px 6px hsla(var(--color-accent-darker-h), var(--color-accent-darker-s), var(--color-accent-darker-l), 0.1), 0px 6px 10px -2px hsla(var(--color-accent-darker-h), var(--color-accent-darker-s), var(--color-accent-darker-l), 0.25); +} +.btn--accent:hover { + background: var(--color-accent-light); + box-shadow: inset 0px 1px 0px hsla(var(--color-white-h), var(--color-white-s), var(--color-white-l), 0.15), 0px 1px 2px hsla(var(--color-accent-darker-h), var(--color-accent-darker-s), var(--color-accent-darker-l), 0.25), 0px 1px 4px hsla(var(--color-accent-darker-h), var(--color-accent-darker-s), var(--color-accent-darker-l), 0.1), 0px 3px 6px -2px hsla(var(--color-accent-darker-h), var(--color-accent-darker-s), var(--color-accent-darker-l), 0.1); +} +.btn--accent:focus { + box-shadow: inset 0px 1px 0px hsla(var(--color-white-h), var(--color-white-s), var(--color-white-l), 0.15), 0px 1px 2px hsla(var(--color-accent-darker-h), var(--color-accent-darker-s), var(--color-accent-darker-l), 0.25), 0px 1px 4px hsla(var(--color-accent-darker-h), var(--color-accent-darker-s), var(--color-accent-darker-l), 0.1), 0px 3px 6px -2px hsla(var(--color-accent-darker-h), var(--color-accent-darker-s), var(--color-accent-darker-l), 0.1), 0px 0px 0px 2px var(--color-bg), 0px 0px 0px 4px var(--color-accent); +} + +.btn--disabled, .btn[disabled], .btn[readonly] { + opacity: 0.6; + cursor: not-allowed; +} + +.btn--sm { + font-size: 0.8em; +} + +.btn--md { + font-size: 1.2em; +} + +.btn--lg { + font-size: 1.4em; +} + +:root { + --form-control-font-size: 1em; + --form-control-padding-x: var(--space-xs); + --form-control-padding-y: var(--space-xxs); + --form-control-radius: var(--radius-md); +} + +.form-control { + background: var(--color-bg-dark); + line-height: 1.2; + box-shadow: inset 0px 0px 0px 1px var(--color-contrast-lower); + transition: all 0.2s ease; +} +.form-control::-moz-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-h), var(--color-contrast-lower-s), var(--color-contrast-lower-l), 0), 0px 0px 0px 2px var(--color-primary), var(--shadow-sm); + outline: none; +} + +.form-control--disabled, .form-control[disabled], .form-control[readonly] { + opacity: 0.5; + cursor: not-allowed; +} + +.form-control[aria-invalid=true], .form-control.form-control--error { + box-shadow: inset 0px 0px 0px 1px hsla(var(--color-contrast-lower-h), var(--color-contrast-lower-s), var(--color-contrast-lower-l), 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-h), var(--color-contrast-lower-s), var(--color-contrast-lower-l), 0), 0px 0px 0px 2px var(--color-error), var(--shadow-sm); +} + +/*! purgecss start ignore */ +/* -------------------------------- + +File#: _1_accordion +Title: Accordion +Descr: Create stacked sections of content and allow the user to expand/collapse them +Usage: codyhouse.co/license + +-------------------------------- */ +:root { + /* general */ + --accordion-border-width: 1px; + /* icon */ + --accordion-icon-size: 20px; + --accordion-icon-stroke-width: 2px; +} + +.accordion__item { + border-style: solid; + border-color: var(--color-contrast-lower); + border-bottom-width: var(--accordion-border-width); +} +.accordion__item:first-child { + border-top-width: var(--accordion-border-width); +} + +.accordion__header { /* button */ + width: 100%; + display: flex; + align-items: center; + justify-content: space-between; + text-align: left; + cursor: pointer; +} +.accordion__header .icon { + --size: var(--accordion-icon-size); +} +.accordion__header .icon .icon__group { + stroke-width: var(--accordion-icon-stroke-width); +} + +.accordion__icon-arrow .icon__group, +.accordion__icon-arrow-v2 .icon__group, +.accordion__icon-plus .icon__group { + will-change: transform; + transform-origin: 50% 50%; +} + +.accordion__icon-arrow .icon__group > * { + transform-origin: 10px 14px; +} + +.accordion__icon-arrow-v2 .icon__group > * { + transform-origin: 50% 50%; + stroke-dasharray: 20; + transform: translateY(4px); +} +.accordion__icon-arrow-v2 .icon__group > *:first-child { + stroke-dashoffset: 10.15; +} +.accordion__icon-arrow-v2 .icon__group > *:last-child { + stroke-dashoffset: 10.15; +} + +.accordion__icon-plus .icon__group { + transform: rotate(-90deg); +} +.accordion__icon-plus .icon__group > * { + transform-origin: 50% 50%; +} +.accordion__icon-plus .icon__group > *:first-child { + transform: rotate(-90deg); +} + +.accordion__item--is-open > .accordion__header > .accordion__icon-arrow .icon__group { /* animated arrow icon */ } +.accordion__item--is-open > .accordion__header > .accordion__icon-arrow .icon__group > *:first-child { + transform: translateY(-8px) rotate(-90deg); +} +.accordion__item--is-open > .accordion__header > .accordion__icon-arrow .icon__group > *:last-child { + transform: translateY(-8px) rotate(90deg); +} +.accordion__item--is-open > .accordion__header > .accordion__icon-arrow-v2 .icon__group { /* animated arrow icon v2 */ + transform: rotate(-90deg); +} +.accordion__item--is-open > .accordion__header > .accordion__icon-arrow-v2 .icon__group > *:first-child, .accordion__item--is-open > .accordion__header > .accordion__icon-arrow-v2 .icon__group *:last-child { + stroke-dashoffset: 0; + transform: translateY(0px); +} +.accordion__item--is-open > .accordion__header > .accordion__icon-plus .icon__group { /* animated plus icon */ + transform: rotate(0); +} +.accordion__item--is-open > .accordion__header > .accordion__icon-plus .icon__group > *:first-child { + transform: rotate(0); +} + +.accordion__panel { + display: none; + will-change: height; + transform: translateZ(0px); +} + +.accordion__item--is-open > .accordion__panel { + display: block; +} + +/* animations */ +.accordion[data-animation=on] .accordion__item--is-open .accordion__panel > * { + animation: accordion-entry-animation 0.4s var(--ease-out); +} +.accordion[data-animation=on] .accordion__icon-arrow .icon__group, +.accordion[data-animation=on] .accordion__icon-arrow-v2 .icon__group, +.accordion[data-animation=on] .accordion__icon-plus .icon__group { + transition: transform 0.3s var(--ease-out); +} +.accordion[data-animation=on] .accordion__icon-arrow .icon__group > *, +.accordion[data-animation=on] .accordion__icon-arrow-v2 .icon__group > *, +.accordion[data-animation=on] .accordion__icon-plus .icon__group > * { + transition: transform 0.3s, stroke-dashoffset 0.3s; + transition-timing-function: var(--ease-out); +} + +@keyframes accordion-entry-animation { + from { + opacity: 0; + transform: translateY(-10px); + } + to { + opacity: 1; + transform: translateY(0px); + } +} +/* -------------------------------- + +File#: _1_list +Title: List +Descr: Custom list component +Usage: codyhouse.co/license + +-------------------------------- */ +: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 ul, .list ol, .text-component .list ul, .text-component .list 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)); +} +.list > li:last-child, .list ul > li:last-child, .list ol > li:last-child, .text-component .list > li:last-child, .text-component .list ul > li:last-child, .text-component .list ol > li:last-child { + margin-bottom: 0; +} +.list:not(.list--border) > li:last-child, .list ul > li:last-child, .list ol > li:last-child, .text-component .list:not(.list--border) > li:last-child, .text-component .list ul > li:last-child, .text-component .list ol > li:last-child { + padding-bottom: 0; +} + +/* #region (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; +} +.list--ul li, .text-component .list--ul li, +.list--ol li, .text-component .list--ol li { + padding-left: var(--list-offset); +} +.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; + width: var(--list-bullet-size); + height: var(--list-bullet-size); + vertical-align: middle; + position: relative; + top: -0.1em; + left: calc(var(--list-bullet-margin-right) * -1); + margin-left: calc(var(--list-bullet-size) * -1); +} + +.list--ul, .text-component .list--ul { + --list-bullet-size: 7px; + --list-bullet-margin-right: 12px; +} +.list--ul > li::before, .text-component .list--ul > li::before { + content: ""; + border-radius: 50%; + color: hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 0.1); + background-color: currentColor; +} +.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: 6px; + --list-bullet-font-size: 14px; + counter-reset: list-items; +} +.list--ol > li, .text-component .list--ol > li { + counter-increment: list-items; +} +.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-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 0.075); + color: var(--color-contrast-higher); + line-height: 1; + border-radius: 50%; +} +.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-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 0.075); +} + +/* #endregion */ +/* #region (border) */ +.list--border li:not(:last-child), .text-component .list--border li:not(:last-child) { + border-bottom: 1px solid var(--color-contrast-lower); +} +.list--border ul, .list--border ol, .text-component .list--border ul, .text-component .list--border ol { + border-top: 1px solid var(--color-contrast-lower); +} + +/* #endregion */ +/* #region (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: var(--list-offset); +} + +.list__icon { + position: relative; + 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 */ +/* -------------------------------- + +File#: _1_main-footer-v2 +Title: Main Footer v2 +Descr: Footer navigation template +Usage: codyhouse.co/license + +-------------------------------- */ +.footer-v2 { + position: relative; + z-index: 1; +} + +.footer-v2__list { + display: grid; + grid-template-columns: 1fr; + gap: var(--space-lg); +} +@media (min-width: 32rem) { + .footer-v2__list { + grid-template-columns: repeat(2, 1fr); + } +} +@media (min-width: 64rem) { + .footer-v2__list { + grid-template-columns: repeat(4, 1fr); + } +} + +.footer-v2__item { + display: grid; + gap: var(--space-sm); + align-content: start; +} +@media (min-width: 64rem) { + .footer-v2__item { + gap: var(--space-xs); + } +} + +.footer-v2__item a { + color: var(--color-contrast-medium); +} +.footer-v2__item a:hover { + color: var(--color-contrast-high); +} +@media (min-width: 64rem) { + .footer-v2__item a { + font-size: var(--text-sm); + } +} + +.footer-v2__socials { + display: flex; + justify-content: center; + margin-bottom: var(--space-sm); +} +.footer-v2__socials a { + text-decoration: none; + display: inline-block; + margin: 0 var(--space-xxxs); + color: var(--color-contrast-medium); +} +.footer-v2__socials a:hover { + color: var(--color-contrast-high); +} +.footer-v2__socials a svg { + display: block; + width: 1em; + height: 1em; + color: inherit; +} + +.footer-v2__print { + font-size: var(--text-sm); + color: var(--color-contrast-medium); + text-align: center; +} +.footer-v2__print p { + margin-bottom: var(--space-sm); +} +.footer-v2__print a { + color: inherit; +} +.footer-v2__print a:hover { + color: var(--color-contrast-high); +} +@media (min-width: 64rem) { + .footer-v2__print { + font-size: var(--text-xs); + } +} + +/* -------------------------------- + +File#: _1_smooth-scrolling +Title: Smooth Scrolling +Descr: Replace the default browser behaviour (jump) with a smooth scrolling transition +Usage: codyhouse.co/license + +-------------------------------- */ +html { + scroll-behavior: smooth; +} + +/* -------------------------------- + +File#: _2_accordion-v2 +Title: Accordion v2 +Descr: Stacked, expandable content sections +Usage: codyhouse.co/license + +-------------------------------- */ +:root { + --accordion-v2-icon-size: 20px; + --accordion-v2-icon-stroke-width: 2px; +} + +.accordion-v2__item { + background-color: var(--color-bg-light); + box-shadow: var(--inner-glow-top), var(--shadow-sm); + border-radius: var(--radius-md); + transition: 0.3s; +} +.accordion-v2__item:hover { + box-shadow: var(--inner-glow-top), var(--shadow-md); +} + +.accordion-v2__header { + width: 100%; + display: flex; + align-items: center; + justify-content: space-between; + text-align: left; + cursor: pointer; +} +.accordion-v2__header .icon { + --size: var(--accordion-v2-icon-size); +} +.accordion-v2__header .icon .icon__group { + stroke-width: var(--accordion-v2-icon-stroke-width); +} + +.accordion-v2__icon-arrow .icon__group { + will-change: transform; + transform-origin: 50% 50%; +} +.accordion-v2__icon-arrow .icon__group > * { + transform-origin: 50% 50%; + stroke-dasharray: 20; + transform: translateY(4px); +} +.accordion-v2__icon-arrow .icon__group > *:first-child { + stroke-dashoffset: 10.15; +} +.accordion-v2__icon-arrow .icon__group > *:last-child { + stroke-dashoffset: 10.15; +} + +.accordion-v2__item--is-open > .accordion-v2__header > .accordion-v2__icon-arrow .icon__group { + transform: rotate(-90deg); +} +.accordion-v2__item--is-open > .accordion-v2__header > .accordion-v2__icon-arrow .icon__group > *:first-child, .accordion-v2__item--is-open > .accordion-v2__header > .accordion-v2__icon-arrow .icon__group *:last-child { + stroke-dashoffset: 0; + transform: translateY(0px); +} + +.accordion-v2__panel { + display: none; + will-change: height; + transform: translateZ(0px); +} + +.accordion-v2__item--is-open > .accordion-v2__panel { + display: block; +} + +.accordion-v2[data-animation=on] .accordion-v2__item--is-open .accordion-v2__panel > * { + animation: accordion-v2-entry-animation 0.4s var(--ease-out); +} +.accordion-v2[data-animation=on] .accordion-v2__icon-arrow .icon__group { + transition: transform 0.3s var(--ease-out); +} +.accordion-v2[data-animation=on] .accordion-v2__icon-arrow .icon__group > * { + transition: transform 0.3s, stroke-dashoffset 0.3s; + transition-timing-function: var(--ease-out); +} + +@keyframes accordion-v2-entry-animation { + from { + opacity: 0; + transform: translateY(-10px); + } + to { + opacity: 1; + transform: translateY(0px); + } +} +/* -------------------------------- + +File#: _2_table-of-contents +Title: Table of Contents +Descr: A navigation with a list of links to the main sections of the page +Usage: codyhouse.co/license + +-------------------------------- */ +:root { + --toc-border-width: 1px; /* static version only */ +} + +/* #region (style affecting collapsed + static versions) 👇 */ +.toc { + --space-unit: 1rem; + /* use rem units for spacing */ +} + +.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-xxxs) var(--space-sm); +} + +.toc__link { + position: relative; + color: var(--color-contrast-medium); + text-decoration: none; +} +.toc__link::before { /* left mark */ + content: ""; + width: var(--toc-border-width); + 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, transform 0.4s var(--ease-out); +} +.toc__control-text > *:last-child { + position: absolute; + top: 0; + left: 0; + opacity: 0; + pointer-events: none; + transform: translateY(-10px); +} + +.toc__icon-arrow { /* arrow icon */ } +.toc__icon-arrow .icon__group { + will-change: transform; + transform-origin: 8px 8px; + transition: transform 0.3s var(--ease-out); +} +.toc__icon-arrow .icon__group > * { + transform-origin: 8px 8px; + stroke-dasharray: 17; + transform: translateY(3px); + transition: transform 0.3s, stroke-dashoffset 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); +} + +/* #endregion */ +/* #region (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-xxs) 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 { + transform: translateY(10px); + opacity: 0; + pointer-events: none; +} +.toc:not(.toc--static).toc--expanded .toc__control-text > *:last-child { + opacity: 1; + pointer-events: auto; + transform: translateY(0); +} +.toc:not(.toc--static).toc--expanded .toc__nav { + display: block; + animation: toc-entry-animation 0.4s var(--ease-out); +} +.toc:not(.toc--static).toc--expanded .toc__icon-arrow .icon__group { /* animate arrow icon */ + 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; + transform: translateY(0px); +} + +/* #endregion */ +/* #region (static version only - desktop 👇) */ +.toc--static { + box-shadow: inset var(--toc-border-width) 0 0 var(--color-contrast-lower); /* 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); +} +.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 { /* control - static version only */ + display: none; +} + +.toc-content--toc-static *:target { + animation: toc-target 2s; /* highlight section on target */ +} + +/* #endregion */ +@keyframes toc-target { + 0%, 50% { + outline: 2px solid hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.5); + } + 100% { + outline: 2px solid hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0); + } +} +@keyframes toc-entry-animation { + from { + opacity: 0; + transform: translateY(-10px); + } + to { + opacity: 1; + transform: translateY(0px); + } +} +/* 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"; + } +} +/* -------------------------------- + +File#: _3_faq-v3 +Title: FAQ v3 +Descr: Q&A template based on the table of contents and accordion components +Usage: codyhouse.co/license + +-------------------------------- */ \ No newline at end of file diff --git a/assets/css/style.min.css b/assets/css/style.min.css new file mode 100644 index 0000000..3628b19 --- /dev/null +++ b/assets/css/style.min.css @@ -0,0 +1 @@ +@charset "UTF-8";.container{width:calc(100% - 2 * var(--component-padding));margin-left:auto;margin-right:auto}.flex,.grid,.inline-flex,[class*=" flex@"],[class*=" inline-flex@"],[class^=flex\@],[class^=inline-flex\@]{--gap:0px;--gap-x:var(--gap);--gap-y:var(--gap);gap:var(--gap-y) var(--gap-x)}.flex>*,.grid>*,.inline-flex>*,[class*=" flex@"]>*,[class*=" inline-flex@"]>*,[class^=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>*{flex-basis:100%;max-width:100%;min-width:0}@media not all and (-webkit-min-device-pixel-ratio:0),not all and (min-resolution:0.001dpcm){@supports not (translate:none){.flex[class*=gap-],.grid,.inline-flex[class*=gap-]{gap:0;margin-bottom:calc(-1 * var(--gap-y));margin-left:calc(-1 * var(--gap-x))}.flex[class*=gap-]>*,.grid>*,.inline-flex[class*=gap-]>*{margin-bottom:var(--sub-gap-y)}.grid{--offset:var(--gap-x);--gap-modifier:0;--offset-modifier:1}.grid>*{margin-left:var(--offset)}.flex[class*=gap-]>*,.inline-flex[class*=gap-]>*{margin-left:var(--sub-gap-x)}}}.gap-xxxxs{--gap-x:var(--space-xxxxs);--gap-y:var(--space-xxxxs)}.gap-xxxxs>*{--sub-gap-x:var(--space-xxxxs);--sub-gap-y:var(--space-xxxxs)}.gap-xxxs{--gap-x:var(--space-xxxs);--gap-y:var(--space-xxxs)}.gap-xxxs>*{--sub-gap-x:var(--space-xxxs);--sub-gap-y:var(--space-xxxs)}.gap-xxs{--gap-x:var(--space-xxs);--gap-y:var(--space-xxs)}.gap-xxs>*{--sub-gap-x:var(--space-xxs);--sub-gap-y:var(--space-xxs)}.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-xxl{--gap-x:var(--space-xxl);--gap-y:var(--space-xxl)}.gap-xxl>*{--sub-gap-x:var(--space-xxl);--sub-gap-y:var(--space-xxl)}.gap-xxxl{--gap-x:var(--space-xxxl);--gap-y:var(--space-xxxl)}.gap-xxxl>*{--sub-gap-x:var(--space-xxxl);--sub-gap-y:var(--space-xxxl)}.gap-xxxxl{--gap-x:var(--space-xxxxl);--gap-y:var(--space-xxxxl)}.gap-xxxxl>*{--sub-gap-x:var(--space-xxxxl);--sub-gap-y:var(--space-xxxxl)}.gap-0{--gap-x:0px;--gap-y:0px}.gap-0>*{--sub-gap-x:0px;--sub-gap-y:0px}.gap-x-xxxxs{--gap-x:var(--space-xxxxs)}.gap-x-xxxxs>*{--sub-gap-x:var(--space-xxxxs)}.gap-x-xxxs{--gap-x:var(--space-xxxs)}.gap-x-xxxs>*{--sub-gap-x:var(--space-xxxs)}.gap-x-xxs{--gap-x:var(--space-xxs)}.gap-x-xxs>*{--sub-gap-x:var(--space-xxs)}.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-xxl{--gap-x:var(--space-xxl)}.gap-x-xxl>*{--sub-gap-x:var(--space-xxl)}.gap-x-xxxl{--gap-x:var(--space-xxxl)}.gap-x-xxxl>*{--sub-gap-x:var(--space-xxxl)}.gap-x-xxxxl{--gap-x:var(--space-xxxxl)}.gap-x-xxxxl>*{--sub-gap-x:var(--space-xxxxl)}.gap-x-0{--gap-x:0px}.gap-x-0>*{--sub-gap-x:0px}.gap-y-xxxxs{--gap-y:var(--space-xxxxs)}.gap-y-xxxxs>*{--sub-gap-y:var(--space-xxxxs)}.gap-y-xxxs{--gap-y:var(--space-xxxs)}.gap-y-xxxs>*{--sub-gap-y:var(--space-xxxs)}.gap-y-xxs{--gap-y:var(--space-xxs)}.gap-y-xxs>*{--sub-gap-y:var(--space-xxs)}.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-xxl{--gap-y:var(--space-xxl)}.gap-y-xxl>*{--sub-gap-y:var(--space-xxl)}.gap-y-xxxl{--gap-y:var(--space-xxxl)}.gap-y-xxxl>*{--sub-gap-y:var(--space-xxxl)}.gap-y-xxxxl{--gap-y:var(--space-xxxxl)}.gap-y-xxxxl>*{--sub-gap-y:var(--space-xxxxl)}.gap-y-0{--gap-y:0px}.gap-y-0>*{--sub-gap-y:0px}.grid-col-1{--grid-columns:1}.col-1{--span:1}.grid-col-2{--grid-columns:2}.col-2{--span:2}.grid-col-3{--grid-columns:3}.col-3{--span:3}.grid-col-4{--grid-columns:4}.col-4{--span:4}.grid-col-5{--grid-columns:5}.col-5{--span:5}.grid-col-6{--grid-columns:6}.col-6{--span:6}.grid-col-7{--grid-columns:7}.col-7{--span:7}.grid-col-8{--grid-columns:8}.col-8{--span:8}.grid-col-9{--grid-columns:9}.col-9{--span:9}.grid-col-10{--grid-columns:10}.col-10{--span:10}.grid-col-11{--grid-columns:11}.col-11{--span:11}.grid-col-12{--grid-columns:12}.col-12{--span:12}.col-1,.col-10,.col-11,.col-12,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9{flex-basis:calc((100% - (var(--grid-columns) - var(--gap-modifier,1)) * var(--sub-gap-x)) * var(--span)/ var(--grid-columns) + (var(--span) - 1) * var(--sub-gap-x));max-width:calc((100% - (var(--grid-columns) - var(--gap-modifier,1)) * var(--sub-gap-x)) * var(--span)/ var(--grid-columns) + (var(--span) - 1) * var(--sub-gap-x))}.col{flex-grow:1;flex-basis:0;max-width:100%}.col-content{flex-grow:0;flex-basis:initial;max-width:initial}.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}.offset-1,.offset-10,.offset-11,.offset-2,.offset-3,.offset-4,.offset-5,.offset-6,.offset-7,.offset-8,.offset-9{margin-left:calc((100% - (var(--grid-columns) - var(--gap-modifier,1)) * var(--sub-gap-x)) * var(--offset)/ var(--grid-columns) + (var(--offset) + var(--offset-modifier,0)) * var(--sub-gap-x))}@media (min-width:32rem){.gap-xxxxs\@xs{--gap-x:var(--space-xxxxs);--gap-y:var(--space-xxxxs)}.gap-xxxxs\@xs>*{--sub-gap-x:var(--space-xxxxs);--sub-gap-y:var(--space-xxxxs)}.gap-xxxs\@xs{--gap-x:var(--space-xxxs);--gap-y:var(--space-xxxs)}.gap-xxxs\@xs>*{--sub-gap-x:var(--space-xxxs);--sub-gap-y:var(--space-xxxs)}.gap-xxs\@xs{--gap-x:var(--space-xxs);--gap-y:var(--space-xxs)}.gap-xxs\@xs>*{--sub-gap-x:var(--space-xxs);--sub-gap-y:var(--space-xxs)}.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-xxl\@xs{--gap-x:var(--space-xxl);--gap-y:var(--space-xxl)}.gap-xxl\@xs>*{--sub-gap-x:var(--space-xxl);--sub-gap-y:var(--space-xxl)}.gap-xxxl\@xs{--gap-x:var(--space-xxxl);--gap-y:var(--space-xxxl)}.gap-xxxl\@xs>*{--sub-gap-x:var(--space-xxxl);--sub-gap-y:var(--space-xxxl)}.gap-xxxxl\@xs{--gap-x:var(--space-xxxxl);--gap-y:var(--space-xxxxl)}.gap-xxxxl\@xs>*{--sub-gap-x:var(--space-xxxxl);--sub-gap-y:var(--space-xxxxl)}.gap-0\@xs{--gap-x:0px;--gap-y:0px}.gap-0\@xs>*{--sub-gap-x:0px;--sub-gap-y:0px}.gap-x-xxxxs\@xs{--gap-x:var(--space-xxxxs)}.gap-x-xxxxs\@xs>*{--sub-gap-x:var(--space-xxxxs)}.gap-x-xxxs\@xs{--gap-x:var(--space-xxxs)}.gap-x-xxxs\@xs>*{--sub-gap-x:var(--space-xxxs)}.gap-x-xxs\@xs{--gap-x:var(--space-xxs)}.gap-x-xxs\@xs>*{--sub-gap-x:var(--space-xxs)}.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-xxl\@xs{--gap-x:var(--space-xxl)}.gap-x-xxl\@xs>*{--sub-gap-x:var(--space-xxl)}.gap-x-xxxl\@xs{--gap-x:var(--space-xxxl)}.gap-x-xxxl\@xs>*{--sub-gap-x:var(--space-xxxl)}.gap-x-xxxxl\@xs{--gap-x:var(--space-xxxxl)}.gap-x-xxxxl\@xs>*{--sub-gap-x:var(--space-xxxxl)}.gap-x-0\@xs{--gap-x:0px}.gap-x-0\@xs>*{--sub-gap-x:0px}.gap-y-xxxxs\@xs{--gap-y:var(--space-xxxxs)}.gap-y-xxxxs\@xs>*{--sub-gap-y:var(--space-xxxxs)}.gap-y-xxxs\@xs{--gap-y:var(--space-xxxs)}.gap-y-xxxs\@xs>*{--sub-gap-y:var(--space-xxxs)}.gap-y-xxs\@xs{--gap-y:var(--space-xxs)}.gap-y-xxs\@xs>*{--sub-gap-y:var(--space-xxs)}.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-xxl\@xs{--gap-y:var(--space-xxl)}.gap-y-xxl\@xs>*{--sub-gap-y:var(--space-xxl)}.gap-y-xxxl\@xs{--gap-y:var(--space-xxxl)}.gap-y-xxxl\@xs>*{--sub-gap-y:var(--space-xxxl)}.gap-y-xxxxl\@xs{--gap-y:var(--space-xxxxl)}.gap-y-xxxxl\@xs>*{--sub-gap-y:var(--space-xxxxl)}.gap-y-0\@xs{--gap-y:0px}.gap-y-0\@xs>*{--sub-gap-y:0px}.grid-col-1\@xs{--grid-columns:1}.col-1\@xs{--span:1}.grid-col-2\@xs{--grid-columns:2}.col-2\@xs{--span:2}.grid-col-3\@xs{--grid-columns:3}.col-3\@xs{--span:3}.grid-col-4\@xs{--grid-columns:4}.col-4\@xs{--span:4}.grid-col-5\@xs{--grid-columns:5}.col-5\@xs{--span:5}.grid-col-6\@xs{--grid-columns:6}.col-6\@xs{--span:6}.grid-col-7\@xs{--grid-columns:7}.col-7\@xs{--span:7}.grid-col-8\@xs{--grid-columns:8}.col-8\@xs{--span:8}.grid-col-9\@xs{--grid-columns:9}.col-9\@xs{--span:9}.grid-col-10\@xs{--grid-columns:10}.col-10\@xs{--span:10}.grid-col-11\@xs{--grid-columns:11}.col-11\@xs{--span:11}.grid-col-12\@xs{--grid-columns:12}.col-12\@xs{--span:12}.col-10\@xs,.col-11\@xs,.col-12\@xs,.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{flex-basis:calc((100% - (var(--grid-columns) - var(--gap-modifier,1)) * var(--sub-gap-x)) * var(--span)/ var(--grid-columns) + (var(--span) - 1) * var(--sub-gap-x));max-width:calc((100% - (var(--grid-columns) - var(--gap-modifier,1)) * var(--sub-gap-x)) * var(--span)/ var(--grid-columns) + (var(--span) - 1) * var(--sub-gap-x))}.col\@xs{flex-grow:1;flex-basis:0;max-width:100%}.col-content\@xs{flex-grow:0;flex-basis:initial;max-width:initial}.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-10\@xs,.offset-11\@xs,.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{margin-left:calc((100% - (var(--grid-columns) - var(--gap-modifier,1)) * var(--sub-gap-x)) * var(--offset)/ var(--grid-columns) + (var(--offset) + var(--offset-modifier,0)) * var(--sub-gap-x))}.offset-0\@xs{margin-left:0}@media not all and (-webkit-min-device-pixel-ratio:0),not all and (min-resolution:0.001dpcm){@supports not (translate:none){.offset-0\@xs{margin-left:var(--gap-x)}}}}@media (min-width:48rem){.gap-xxxxs\@sm{--gap-x:var(--space-xxxxs);--gap-y:var(--space-xxxxs)}.gap-xxxxs\@sm>*{--sub-gap-x:var(--space-xxxxs);--sub-gap-y:var(--space-xxxxs)}.gap-xxxs\@sm{--gap-x:var(--space-xxxs);--gap-y:var(--space-xxxs)}.gap-xxxs\@sm>*{--sub-gap-x:var(--space-xxxs);--sub-gap-y:var(--space-xxxs)}.gap-xxs\@sm{--gap-x:var(--space-xxs);--gap-y:var(--space-xxs)}.gap-xxs\@sm>*{--sub-gap-x:var(--space-xxs);--sub-gap-y:var(--space-xxs)}.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-xxl\@sm{--gap-x:var(--space-xxl);--gap-y:var(--space-xxl)}.gap-xxl\@sm>*{--sub-gap-x:var(--space-xxl);--sub-gap-y:var(--space-xxl)}.gap-xxxl\@sm{--gap-x:var(--space-xxxl);--gap-y:var(--space-xxxl)}.gap-xxxl\@sm>*{--sub-gap-x:var(--space-xxxl);--sub-gap-y:var(--space-xxxl)}.gap-xxxxl\@sm{--gap-x:var(--space-xxxxl);--gap-y:var(--space-xxxxl)}.gap-xxxxl\@sm>*{--sub-gap-x:var(--space-xxxxl);--sub-gap-y:var(--space-xxxxl)}.gap-0\@sm{--gap-x:0px;--gap-y:0px}.gap-0\@sm>*{--sub-gap-x:0px;--sub-gap-y:0px}.gap-x-xxxxs\@sm{--gap-x:var(--space-xxxxs)}.gap-x-xxxxs\@sm>*{--sub-gap-x:var(--space-xxxxs)}.gap-x-xxxs\@sm{--gap-x:var(--space-xxxs)}.gap-x-xxxs\@sm>*{--sub-gap-x:var(--space-xxxs)}.gap-x-xxs\@sm{--gap-x:var(--space-xxs)}.gap-x-xxs\@sm>*{--sub-gap-x:var(--space-xxs)}.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-xxl\@sm{--gap-x:var(--space-xxl)}.gap-x-xxl\@sm>*{--sub-gap-x:var(--space-xxl)}.gap-x-xxxl\@sm{--gap-x:var(--space-xxxl)}.gap-x-xxxl\@sm>*{--sub-gap-x:var(--space-xxxl)}.gap-x-xxxxl\@sm{--gap-x:var(--space-xxxxl)}.gap-x-xxxxl\@sm>*{--sub-gap-x:var(--space-xxxxl)}.gap-x-0\@sm{--gap-x:0px}.gap-x-0\@sm>*{--sub-gap-x:0px}.gap-y-xxxxs\@sm{--gap-y:var(--space-xxxxs)}.gap-y-xxxxs\@sm>*{--sub-gap-y:var(--space-xxxxs)}.gap-y-xxxs\@sm{--gap-y:var(--space-xxxs)}.gap-y-xxxs\@sm>*{--sub-gap-y:var(--space-xxxs)}.gap-y-xxs\@sm{--gap-y:var(--space-xxs)}.gap-y-xxs\@sm>*{--sub-gap-y:var(--space-xxs)}.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-xxl\@sm{--gap-y:var(--space-xxl)}.gap-y-xxl\@sm>*{--sub-gap-y:var(--space-xxl)}.gap-y-xxxl\@sm{--gap-y:var(--space-xxxl)}.gap-y-xxxl\@sm>*{--sub-gap-y:var(--space-xxxl)}.gap-y-xxxxl\@sm{--gap-y:var(--space-xxxxl)}.gap-y-xxxxl\@sm>*{--sub-gap-y:var(--space-xxxxl)}.gap-y-0\@sm{--gap-y:0px}.gap-y-0\@sm>*{--sub-gap-y:0px}.grid-col-1\@sm{--grid-columns:1}.col-1\@sm{--span:1}.grid-col-2\@sm{--grid-columns:2}.col-2\@sm{--span:2}.grid-col-3\@sm{--grid-columns:3}.col-3\@sm{--span:3}.grid-col-4\@sm{--grid-columns:4}.col-4\@sm{--span:4}.grid-col-5\@sm{--grid-columns:5}.col-5\@sm{--span:5}.grid-col-6\@sm{--grid-columns:6}.col-6\@sm{--span:6}.grid-col-7\@sm{--grid-columns:7}.col-7\@sm{--span:7}.grid-col-8\@sm{--grid-columns:8}.col-8\@sm{--span:8}.grid-col-9\@sm{--grid-columns:9}.col-9\@sm{--span:9}.grid-col-10\@sm{--grid-columns:10}.col-10\@sm{--span:10}.grid-col-11\@sm{--grid-columns:11}.col-11\@sm{--span:11}.grid-col-12\@sm{--grid-columns:12}.col-12\@sm{--span:12}.col-10\@sm,.col-11\@sm,.col-12\@sm,.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{flex-basis:calc((100% - (var(--grid-columns) - var(--gap-modifier,1)) * var(--sub-gap-x)) * var(--span)/ var(--grid-columns) + (var(--span) - 1) * var(--sub-gap-x));max-width:calc((100% - (var(--grid-columns) - var(--gap-modifier,1)) * var(--sub-gap-x)) * var(--span)/ var(--grid-columns) + (var(--span) - 1) * var(--sub-gap-x))}.col\@sm{flex-grow:1;flex-basis:0;max-width:100%}.col-content\@sm{flex-grow:0;flex-basis:initial;max-width:initial}.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-10\@sm,.offset-11\@sm,.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{margin-left:calc((100% - (var(--grid-columns) - var(--gap-modifier,1)) * var(--sub-gap-x)) * var(--offset)/ var(--grid-columns) + (var(--offset) + var(--offset-modifier,0)) * var(--sub-gap-x))}.offset-0\@sm{margin-left:0}@media not all and (-webkit-min-device-pixel-ratio:0),not all and (min-resolution:0.001dpcm){@supports not (translate:none){.offset-0\@sm{margin-left:var(--gap-x)}}}}@media (min-width:64rem){.gap-xxxxs\@md{--gap-x:var(--space-xxxxs);--gap-y:var(--space-xxxxs)}.gap-xxxxs\@md>*{--sub-gap-x:var(--space-xxxxs);--sub-gap-y:var(--space-xxxxs)}.gap-xxxs\@md{--gap-x:var(--space-xxxs);--gap-y:var(--space-xxxs)}.gap-xxxs\@md>*{--sub-gap-x:var(--space-xxxs);--sub-gap-y:var(--space-xxxs)}.gap-xxs\@md{--gap-x:var(--space-xxs);--gap-y:var(--space-xxs)}.gap-xxs\@md>*{--sub-gap-x:var(--space-xxs);--sub-gap-y:var(--space-xxs)}.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-xxl\@md{--gap-x:var(--space-xxl);--gap-y:var(--space-xxl)}.gap-xxl\@md>*{--sub-gap-x:var(--space-xxl);--sub-gap-y:var(--space-xxl)}.gap-xxxl\@md{--gap-x:var(--space-xxxl);--gap-y:var(--space-xxxl)}.gap-xxxl\@md>*{--sub-gap-x:var(--space-xxxl);--sub-gap-y:var(--space-xxxl)}.gap-xxxxl\@md{--gap-x:var(--space-xxxxl);--gap-y:var(--space-xxxxl)}.gap-xxxxl\@md>*{--sub-gap-x:var(--space-xxxxl);--sub-gap-y:var(--space-xxxxl)}.gap-0\@md{--gap-x:0px;--gap-y:0px}.gap-0\@md>*{--sub-gap-x:0px;--sub-gap-y:0px}.gap-x-xxxxs\@md{--gap-x:var(--space-xxxxs)}.gap-x-xxxxs\@md>*{--sub-gap-x:var(--space-xxxxs)}.gap-x-xxxs\@md{--gap-x:var(--space-xxxs)}.gap-x-xxxs\@md>*{--sub-gap-x:var(--space-xxxs)}.gap-x-xxs\@md{--gap-x:var(--space-xxs)}.gap-x-xxs\@md>*{--sub-gap-x:var(--space-xxs)}.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-xxl\@md{--gap-x:var(--space-xxl)}.gap-x-xxl\@md>*{--sub-gap-x:var(--space-xxl)}.gap-x-xxxl\@md{--gap-x:var(--space-xxxl)}.gap-x-xxxl\@md>*{--sub-gap-x:var(--space-xxxl)}.gap-x-xxxxl\@md{--gap-x:var(--space-xxxxl)}.gap-x-xxxxl\@md>*{--sub-gap-x:var(--space-xxxxl)}.gap-x-0\@md{--gap-x:0px}.gap-x-0\@md>*{--sub-gap-x:0px}.gap-y-xxxxs\@md{--gap-y:var(--space-xxxxs)}.gap-y-xxxxs\@md>*{--sub-gap-y:var(--space-xxxxs)}.gap-y-xxxs\@md{--gap-y:var(--space-xxxs)}.gap-y-xxxs\@md>*{--sub-gap-y:var(--space-xxxs)}.gap-y-xxs\@md{--gap-y:var(--space-xxs)}.gap-y-xxs\@md>*{--sub-gap-y:var(--space-xxs)}.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-xxl\@md{--gap-y:var(--space-xxl)}.gap-y-xxl\@md>*{--sub-gap-y:var(--space-xxl)}.gap-y-xxxl\@md{--gap-y:var(--space-xxxl)}.gap-y-xxxl\@md>*{--sub-gap-y:var(--space-xxxl)}.gap-y-xxxxl\@md{--gap-y:var(--space-xxxxl)}.gap-y-xxxxl\@md>*{--sub-gap-y:var(--space-xxxxl)}.gap-y-0\@md{--gap-y:0px}.gap-y-0\@md>*{--sub-gap-y:0px}.grid-col-1\@md{--grid-columns:1}.col-1\@md{--span:1}.grid-col-2\@md{--grid-columns:2}.col-2\@md{--span:2}.grid-col-3\@md{--grid-columns:3}.col-3\@md{--span:3}.grid-col-4\@md{--grid-columns:4}.col-4\@md{--span:4}.grid-col-5\@md{--grid-columns:5}.col-5\@md{--span:5}.grid-col-6\@md{--grid-columns:6}.col-6\@md{--span:6}.grid-col-7\@md{--grid-columns:7}.col-7\@md{--span:7}.grid-col-8\@md{--grid-columns:8}.col-8\@md{--span:8}.grid-col-9\@md{--grid-columns:9}.col-9\@md{--span:9}.grid-col-10\@md{--grid-columns:10}.col-10\@md{--span:10}.grid-col-11\@md{--grid-columns:11}.col-11\@md{--span:11}.grid-col-12\@md{--grid-columns:12}.col-12\@md{--span:12}.col-10\@md,.col-11\@md,.col-12\@md,.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{flex-basis:calc((100% - (var(--grid-columns) - var(--gap-modifier,1)) * var(--sub-gap-x)) * var(--span)/ var(--grid-columns) + (var(--span) - 1) * var(--sub-gap-x));max-width:calc((100% - (var(--grid-columns) - var(--gap-modifier,1)) * var(--sub-gap-x)) * var(--span)/ var(--grid-columns) + (var(--span) - 1) * var(--sub-gap-x))}.col\@md{flex-grow:1;flex-basis:0;max-width:100%}.col-content\@md{flex-grow:0;flex-basis:initial;max-width:initial}.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-10\@md,.offset-11\@md,.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{margin-left:calc((100% - (var(--grid-columns) - var(--gap-modifier,1)) * var(--sub-gap-x)) * var(--offset)/ var(--grid-columns) + (var(--offset) + var(--offset-modifier,0)) * var(--sub-gap-x))}.offset-0\@md{margin-left:0}@media not all and (-webkit-min-device-pixel-ratio:0),not all and (min-resolution:0.001dpcm){@supports not (translate:none){.offset-0\@md{margin-left:var(--gap-x)}}}}@media (min-width:80rem){.gap-xxxxs\@lg{--gap-x:var(--space-xxxxs);--gap-y:var(--space-xxxxs)}.gap-xxxxs\@lg>*{--sub-gap-x:var(--space-xxxxs);--sub-gap-y:var(--space-xxxxs)}.gap-xxxs\@lg{--gap-x:var(--space-xxxs);--gap-y:var(--space-xxxs)}.gap-xxxs\@lg>*{--sub-gap-x:var(--space-xxxs);--sub-gap-y:var(--space-xxxs)}.gap-xxs\@lg{--gap-x:var(--space-xxs);--gap-y:var(--space-xxs)}.gap-xxs\@lg>*{--sub-gap-x:var(--space-xxs);--sub-gap-y:var(--space-xxs)}.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-xxl\@lg{--gap-x:var(--space-xxl);--gap-y:var(--space-xxl)}.gap-xxl\@lg>*{--sub-gap-x:var(--space-xxl);--sub-gap-y:var(--space-xxl)}.gap-xxxl\@lg{--gap-x:var(--space-xxxl);--gap-y:var(--space-xxxl)}.gap-xxxl\@lg>*{--sub-gap-x:var(--space-xxxl);--sub-gap-y:var(--space-xxxl)}.gap-xxxxl\@lg{--gap-x:var(--space-xxxxl);--gap-y:var(--space-xxxxl)}.gap-xxxxl\@lg>*{--sub-gap-x:var(--space-xxxxl);--sub-gap-y:var(--space-xxxxl)}.gap-0\@lg{--gap-x:0px;--gap-y:0px}.gap-0\@lg>*{--sub-gap-x:0px;--sub-gap-y:0px}.gap-x-xxxxs\@lg{--gap-x:var(--space-xxxxs)}.gap-x-xxxxs\@lg>*{--sub-gap-x:var(--space-xxxxs)}.gap-x-xxxs\@lg{--gap-x:var(--space-xxxs)}.gap-x-xxxs\@lg>*{--sub-gap-x:var(--space-xxxs)}.gap-x-xxs\@lg{--gap-x:var(--space-xxs)}.gap-x-xxs\@lg>*{--sub-gap-x:var(--space-xxs)}.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-xxl\@lg{--gap-x:var(--space-xxl)}.gap-x-xxl\@lg>*{--sub-gap-x:var(--space-xxl)}.gap-x-xxxl\@lg{--gap-x:var(--space-xxxl)}.gap-x-xxxl\@lg>*{--sub-gap-x:var(--space-xxxl)}.gap-x-xxxxl\@lg{--gap-x:var(--space-xxxxl)}.gap-x-xxxxl\@lg>*{--sub-gap-x:var(--space-xxxxl)}.gap-x-0\@lg{--gap-x:0px}.gap-x-0\@lg>*{--sub-gap-x:0px}.gap-y-xxxxs\@lg{--gap-y:var(--space-xxxxs)}.gap-y-xxxxs\@lg>*{--sub-gap-y:var(--space-xxxxs)}.gap-y-xxxs\@lg{--gap-y:var(--space-xxxs)}.gap-y-xxxs\@lg>*{--sub-gap-y:var(--space-xxxs)}.gap-y-xxs\@lg{--gap-y:var(--space-xxs)}.gap-y-xxs\@lg>*{--sub-gap-y:var(--space-xxs)}.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-xxl\@lg{--gap-y:var(--space-xxl)}.gap-y-xxl\@lg>*{--sub-gap-y:var(--space-xxl)}.gap-y-xxxl\@lg{--gap-y:var(--space-xxxl)}.gap-y-xxxl\@lg>*{--sub-gap-y:var(--space-xxxl)}.gap-y-xxxxl\@lg{--gap-y:var(--space-xxxxl)}.gap-y-xxxxl\@lg>*{--sub-gap-y:var(--space-xxxxl)}.gap-y-0\@lg{--gap-y:0px}.gap-y-0\@lg>*{--sub-gap-y:0px}.grid-col-1\@lg{--grid-columns:1}.col-1\@lg{--span:1}.grid-col-2\@lg{--grid-columns:2}.col-2\@lg{--span:2}.grid-col-3\@lg{--grid-columns:3}.col-3\@lg{--span:3}.grid-col-4\@lg{--grid-columns:4}.col-4\@lg{--span:4}.grid-col-5\@lg{--grid-columns:5}.col-5\@lg{--span:5}.grid-col-6\@lg{--grid-columns:6}.col-6\@lg{--span:6}.grid-col-7\@lg{--grid-columns:7}.col-7\@lg{--span:7}.grid-col-8\@lg{--grid-columns:8}.col-8\@lg{--span:8}.grid-col-9\@lg{--grid-columns:9}.col-9\@lg{--span:9}.grid-col-10\@lg{--grid-columns:10}.col-10\@lg{--span:10}.grid-col-11\@lg{--grid-columns:11}.col-11\@lg{--span:11}.grid-col-12\@lg{--grid-columns:12}.col-12\@lg{--span:12}.col-10\@lg,.col-11\@lg,.col-12\@lg,.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{flex-basis:calc((100% - (var(--grid-columns) - var(--gap-modifier,1)) * var(--sub-gap-x)) * var(--span)/ var(--grid-columns) + (var(--span) - 1) * var(--sub-gap-x));max-width:calc((100% - (var(--grid-columns) - var(--gap-modifier,1)) * var(--sub-gap-x)) * var(--span)/ var(--grid-columns) + (var(--span) - 1) * var(--sub-gap-x))}.col\@lg{flex-grow:1;flex-basis:0;max-width:100%}.col-content\@lg{flex-grow:0;flex-basis:initial;max-width:initial}.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-10\@lg,.offset-11\@lg,.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{margin-left:calc((100% - (var(--grid-columns) - var(--gap-modifier,1)) * var(--sub-gap-x)) * var(--offset)/ var(--grid-columns) + (var(--offset) + var(--offset-modifier,0)) * var(--sub-gap-x))}.offset-0\@lg{margin-left:0}@media not all and (-webkit-min-device-pixel-ratio:0),not all and (min-resolution:0.001dpcm){@supports not (translate:none){.offset-0\@lg{margin-left:var(--gap-x)}}}}@media (min-width:90rem){.gap-xxxxs\@xl{--gap-x:var(--space-xxxxs);--gap-y:var(--space-xxxxs)}.gap-xxxxs\@xl>*{--sub-gap-x:var(--space-xxxxs);--sub-gap-y:var(--space-xxxxs)}.gap-xxxs\@xl{--gap-x:var(--space-xxxs);--gap-y:var(--space-xxxs)}.gap-xxxs\@xl>*{--sub-gap-x:var(--space-xxxs);--sub-gap-y:var(--space-xxxs)}.gap-xxs\@xl{--gap-x:var(--space-xxs);--gap-y:var(--space-xxs)}.gap-xxs\@xl>*{--sub-gap-x:var(--space-xxs);--sub-gap-y:var(--space-xxs)}.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-xxl\@xl{--gap-x:var(--space-xxl);--gap-y:var(--space-xxl)}.gap-xxl\@xl>*{--sub-gap-x:var(--space-xxl);--sub-gap-y:var(--space-xxl)}.gap-xxxl\@xl{--gap-x:var(--space-xxxl);--gap-y:var(--space-xxxl)}.gap-xxxl\@xl>*{--sub-gap-x:var(--space-xxxl);--sub-gap-y:var(--space-xxxl)}.gap-xxxxl\@xl{--gap-x:var(--space-xxxxl);--gap-y:var(--space-xxxxl)}.gap-xxxxl\@xl>*{--sub-gap-x:var(--space-xxxxl);--sub-gap-y:var(--space-xxxxl)}.gap-0\@xl{--gap-x:0px;--gap-y:0px}.gap-0\@xl>*{--sub-gap-x:0px;--sub-gap-y:0px}.gap-x-xxxxs\@xl{--gap-x:var(--space-xxxxs)}.gap-x-xxxxs\@xl>*{--sub-gap-x:var(--space-xxxxs)}.gap-x-xxxs\@xl{--gap-x:var(--space-xxxs)}.gap-x-xxxs\@xl>*{--sub-gap-x:var(--space-xxxs)}.gap-x-xxs\@xl{--gap-x:var(--space-xxs)}.gap-x-xxs\@xl>*{--sub-gap-x:var(--space-xxs)}.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-xxl\@xl{--gap-x:var(--space-xxl)}.gap-x-xxl\@xl>*{--sub-gap-x:var(--space-xxl)}.gap-x-xxxl\@xl{--gap-x:var(--space-xxxl)}.gap-x-xxxl\@xl>*{--sub-gap-x:var(--space-xxxl)}.gap-x-xxxxl\@xl{--gap-x:var(--space-xxxxl)}.gap-x-xxxxl\@xl>*{--sub-gap-x:var(--space-xxxxl)}.gap-x-0\@xl{--gap-x:0px}.gap-x-0\@xl>*{--sub-gap-x:0px}.gap-y-xxxxs\@xl{--gap-y:var(--space-xxxxs)}.gap-y-xxxxs\@xl>*{--sub-gap-y:var(--space-xxxxs)}.gap-y-xxxs\@xl{--gap-y:var(--space-xxxs)}.gap-y-xxxs\@xl>*{--sub-gap-y:var(--space-xxxs)}.gap-y-xxs\@xl{--gap-y:var(--space-xxs)}.gap-y-xxs\@xl>*{--sub-gap-y:var(--space-xxs)}.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-xxl\@xl{--gap-y:var(--space-xxl)}.gap-y-xxl\@xl>*{--sub-gap-y:var(--space-xxl)}.gap-y-xxxl\@xl{--gap-y:var(--space-xxxl)}.gap-y-xxxl\@xl>*{--sub-gap-y:var(--space-xxxl)}.gap-y-xxxxl\@xl{--gap-y:var(--space-xxxxl)}.gap-y-xxxxl\@xl>*{--sub-gap-y:var(--space-xxxxl)}.gap-y-0\@xl{--gap-y:0px}.gap-y-0\@xl>*{--sub-gap-y:0px}.grid-col-1\@xl{--grid-columns:1}.col-1\@xl{--span:1}.grid-col-2\@xl{--grid-columns:2}.col-2\@xl{--span:2}.grid-col-3\@xl{--grid-columns:3}.col-3\@xl{--span:3}.grid-col-4\@xl{--grid-columns:4}.col-4\@xl{--span:4}.grid-col-5\@xl{--grid-columns:5}.col-5\@xl{--span:5}.grid-col-6\@xl{--grid-columns:6}.col-6\@xl{--span:6}.grid-col-7\@xl{--grid-columns:7}.col-7\@xl{--span:7}.grid-col-8\@xl{--grid-columns:8}.col-8\@xl{--span:8}.grid-col-9\@xl{--grid-columns:9}.col-9\@xl{--span:9}.grid-col-10\@xl{--grid-columns:10}.col-10\@xl{--span:10}.grid-col-11\@xl{--grid-columns:11}.col-11\@xl{--span:11}.grid-col-12\@xl{--grid-columns:12}.col-12\@xl{--span:12}.col-10\@xl,.col-11\@xl,.col-12\@xl,.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{flex-basis:calc((100% - (var(--grid-columns) - var(--gap-modifier,1)) * var(--sub-gap-x)) * var(--span)/ var(--grid-columns) + (var(--span) - 1) * var(--sub-gap-x));max-width:calc((100% - (var(--grid-columns) - var(--gap-modifier,1)) * var(--sub-gap-x)) * var(--span)/ var(--grid-columns) + (var(--span) - 1) * var(--sub-gap-x))}.col\@xl{flex-grow:1;flex-basis:0;max-width:100%}.col-content\@xl{flex-grow:0;flex-basis:initial;max-width:initial}.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-10\@xl,.offset-11\@xl,.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{margin-left:calc((100% - (var(--grid-columns) - var(--gap-modifier,1)) * var(--sub-gap-x)) * var(--offset)/ var(--grid-columns) + (var(--offset) + var(--offset-modifier,0)) * var(--sub-gap-x))}.offset-0\@xl{margin-left:0}@media not all and (-webkit-min-device-pixel-ratio:0),not all and (min-resolution:0.001dpcm){@supports not (translate:none){.offset-0\@xl{margin-left:var(--gap-x)}}}}*,::after,::before{box-sizing:inherit}*{font:inherit}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,hr,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0}html{box-sizing:border-box}body{background-color:var(--color-bg,#fff)}article,aside,details,figcaption,figure,footer,form legend,header,hgroup,main,menu,nav,section{display:block}menu,ol,ul{list-style:none}blockquote,q{quotes:none}button,input,select,textarea{margin:0}.btn,.form-control,.link,.reset{background-color:transparent;padding:0;border:0;border-radius:0;color:inherit;line-height:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none}select.form-control::-ms-expand{display:none}textarea{resize:vertical;overflow:auto;vertical-align:top}input::-ms-clear{display:none}table{border-collapse:collapse;border-spacing:0}img,svg,video{max-width:100%}[data-theme]{background-color:var(--color-bg,#fff);color:var(--color-contrast-high,#313539)}:root{--space-unit:1rem}*,:root{--space-xxxxs:calc(0.125 * var(--space-unit));--space-xxxs:calc(0.25 * var(--space-unit));--space-xxs:calc(0.375 * var(--space-unit));--space-xs:calc(0.5 * var(--space-unit));--space-sm:calc(0.75 * var(--space-unit));--space-md:calc(1.25 * var(--space-unit));--space-lg:calc(2 * var(--space-unit));--space-xl:calc(3.25 * var(--space-unit));--space-xxl:calc(5.25 * var(--space-unit));--space-xxxl:calc(8.5 * var(--space-unit));--space-xxxxl:calc(13.75 * var(--space-unit));--component-padding:var(--space-md)}:root{--radius-sm:calc(var(--radius, 0.375em)/2);--radius-md:var(--radius, 0.375em);--radius-lg:calc(var(--radius, 0.375em)*2);--shadow-ring:0 0 0 1px hsla(0, 0%, 0%, 0.05);--shadow-xs:0 0 0 1px hsla(0, 0%, 0%, 0.02),0 1px 3px -1px hsla(0, 0%, 0%, 0.2);--shadow-sm:0 0.3px 0.4px hsla(0, 0%, 0%, 0.02),0 0.9px 1.5px hsla(0, 0%, 0%, 0.045),0 3.5px 6px hsla(0, 0%, 0%, 0.09);--shadow-md:0 0.9px 1.25px hsla(0, 0%, 0%, 0.025),0 3px 5px hsla(0, 0%, 0%, 0.05),0 12px 20px hsla(0, 0%, 0%, 0.09);--shadow-lg:0 1.2px 1.9px -1px hsla(0, 0%, 0%, 0.01),0 3px 5px -1px hsla(0, 0%, 0%, 0.015),0 8px 15px -1px hsla(0, 0%, 0%, 0.05),0 28px 40px -1px hsla(0, 0%, 0%, 0.1);--shadow-xl:0 1.5px 2.1px -6px hsla(0, 0%, 0%, 0.009),0 3.6px 5.2px -6px hsla(0, 0%, 0%, 0.0115),0 7.3px 10.6px -6px hsla(0, 0%, 0%, 0.0125),0 16.2px 21.9px -6px hsla(0, 0%, 0%, 0.025),0 46px 60px -6px hsla(0, 0%, 0%, 0.15);--inner-glow:inset 0 0 0.5px 1px hsla(0, 0%, 100%, 0.075);--inner-glow-top:inset 0 1px 0.5px hsla(0, 0%, 100%, 0.075);--ease-in-out:cubic-bezier(0.645, 0.045, 0.355, 1);--ease-in:cubic-bezier(0.55, 0.055, 0.675, 0.19);--ease-out:cubic-bezier(0.215, 0.61, 0.355, 1);--ease-out-back:cubic-bezier(0.34, 1.56, 0.64, 1)}:root{--heading-line-height:1.2;--body-line-height:1.4}body{font-size:var(--text-base-size,1rem);font-family:var(--font-primary,sans-serif);color:var(--color-contrast-high,#313539);font-weight:var(--body-font-weight,normal)}h1,h2,h3,h4{color:var(--color-contrast-higher,#0c1216);line-height:var(--heading-line-height,1.2);font-weight:var(--heading-font-weight,700)}h1{font-size:var(--text-xxl,2rem)}h2{font-size:var(--text-xl,1.75rem)}h3{font-size:var(--text-lg,1.375rem)}h4{font-size:var(--text-md,1.125rem)}small{font-size:var(--text-sm,.75rem)}.link,a{color:var(--color-primary,#4827ec);text-decoration:underline}strong{font-weight:700}s{text-decoration:line-through}u{text-decoration:underline}.text-component h1,.text-component h2,.text-component h3,.text-component h4{line-height:calc(var(--heading-line-height) * var(--line-height-multiplier,1));margin-bottom:calc(var(--space-unit) * .3125 * var(--text-space-y-multiplier,1))}.text-component h2,.text-component h3,.text-component h4{margin-top:calc(var(--space-unit) * .9375 * var(--text-space-y-multiplier,1))}.text-component blockquote,.text-component ol li,.text-component p,.text-component ul li{line-height:calc(var(--body-line-height) * var(--line-height-multiplier,1))}.text-component .text-component__block,.text-component blockquote,.text-component ol,.text-component p,.text-component ul{margin-bottom:calc(var(--space-unit) * .9375 * var(--text-space-y-multiplier,1))}.text-component ol,.text-component ul{list-style-position:inside}.text-component ol ol,.text-component ol ul,.text-component ul ol,.text-component ul ul{padding-left:1em;margin-bottom:0}.text-component ul{list-style-type:disc}.text-component ol{list-style-type:decimal}.text-component img{display:block;margin:0 auto}.text-component figcaption{text-align:center;margin-top:calc(var(--space-unit) * .5)}.text-component em{font-style:italic}.text-component hr{margin-top:calc(var(--space-unit) * 1.875 * var(--text-space-y-multiplier,1));margin-bottom:calc(var(--space-unit) * 1.875 * var(--text-space-y-multiplier,1));margin-left:auto;margin-right:auto}.text-component>:first-child{margin-top:0}.text-component>:last-child{margin-bottom:0}.text-component__block--full-width{width:100vw;margin-left:calc(50% - 50vw)}@media (min-width:48rem){.text-component__block--left,.text-component__block--right{width:45%}.text-component__block--left img,.text-component__block--right img{width:100%}.text-component__block--left{float:left;margin-right:calc(var(--space-unit) * .9375 * var(--text-space-y-multiplier,1))}.text-component__block--right{float:right;margin-left:calc(var(--space-unit) * .9375 * var(--text-space-y-multiplier,1))}}@media (min-width:90rem){.text-component__block--outset{width:calc(100% + 10.5 * var(--space-unit))}.text-component__block--outset img{width:100%}.text-component__block--outset:not(.text-component__block--right){margin-left:calc(-5.25 * var(--space-unit))}.text-component__block--left,.text-component__block--right{width:50%}.text-component__block--right.text-component__block--outset{margin-right:calc(-5.25 * var(--space-unit))}}:root{--icon-xxxs:8px;--icon-xxs:12px;--icon-xs:16px;--icon-sm:24px;--icon-md:32px;--icon-lg:48px;--icon-xl:64px;--icon-xxl:96px;--icon-xxxl:128px}.icon{--size:1em;font-size:var(--size);height:1em;width:1em;display:inline-block;color:inherit;fill:currentColor;line-height:1;flex-shrink:0;max-width:initial}.icon--xxxs{--size:var(--icon-xxxs)}.icon--xxs{--size:var(--icon-xxs)}.icon--xs{--size:var(--icon-xs)}.icon--sm{--size:var(--icon-sm)}.icon--md{--size:var(--icon-md)}.icon--lg{--size:var(--icon-lg)}.icon--xl{--size:var(--icon-xl)}.icon--xxl{--size:var(--icon-xxl)}.icon--xxxl{--size:var(--icon-xxxl)}.icon--is-spinning{animation:icon-spin 1s infinite linear}@keyframes icon-spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}.icon use{color:inherit;fill:currentColor}.btn{position:relative;display:inline-flex;justify-content:center;align-items:center;white-space:nowrap;text-decoration:none;font-size:var(--btn-font-size,1em);padding-top:var(--btn-padding-y,.5em);padding-bottom:var(--btn-padding-y,.5em);padding-left:var(--btn-padding-x,.75em);padding-right:var(--btn-padding-x,.75em);border-radius:var(--btn-radius,.25em)}.btn--sm{font-size:var(--btn-font-size-sm,.8em)}.btn--md{font-size:var(--btn-font-size-md,1.2em)}.btn--lg{font-size:var(--btn-font-size-lg,1.4em)}.btn--icon{padding:var(--btn-padding-y,.5em)}.form-control{font-size:var(--form-control-font-size,1em);padding-top:var(--form-control-padding-y,.5em);padding-bottom:var(--form-control-padding-y,.5em);padding-left:var(--form-control-padding-x,.75em);padding-right:var(--form-control-padding-x,.75em);border-radius:var(--form-control-radius,.25em)}.form-legend{color:var(--color-contrast-higher,#0c1216);line-height:var(--heading-line-height,1.2);font-weight:var(--heading-font-weight,700);font-size:var(--text-md,1.125rem);margin-bottom:var(--space-md)}.form-label{display:inline-block;font-size:var(--text-sm,.75rem)}:root{--z-index-header:3;--z-index-popover:5;--z-index-fixed-element:10;--z-index-overlay:15}:root{--display:block}.is-visible{display:var(--display)!important}.is-hidden{display:none!important}html:not(.js) .no-js\:is-hidden{display:none!important}@media print{.print\:is-hidden{display:none!important}.print\:shadow-none{box-shadow:none}}.sr-only,.sr-only-focusable:not(:focus):not(:focus-within){position:absolute;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);width:1px;height:1px;overflow:hidden;padding:0;border:0;white-space:nowrap}.flex{display:flex}.inline-flex{display:inline-flex}.flex-wrap{flex-wrap:wrap}.flex-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-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.items-center{align-items:center}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-baseline{align-items:baseline}.items-stretch{align-items:stretch}.content-start{align-content:start}.content-end{align-content:end}.content-center{align-content:center}.content-between{align-content:space-between}.order-1{order:1}.order-2{order:2}.order-3{order:3}[class*=" aspect-ratio"],[class^=aspect-ratio]{--aspect-ratio:calc(16/9);position:relative;height:0;padding-bottom:calc(100% / (var(--aspect-ratio)))}[class*=" aspect-ratio"]>*,[class^=aspect-ratio]>*{position:absolute;top:0;left:0;width:100%;height:100%}[class*=" aspect-ratio"]>:not(iframe),[class^=aspect-ratio]>:not(iframe){-o-object-fit:cover;object-fit:cover}.aspect-ratio-16\:9{--aspect-ratio:calc(16/9)}.aspect-ratio-3\:2{--aspect-ratio:calc(3/2)}.aspect-ratio-4\:3{--aspect-ratio:calc(4/3)}.aspect-ratio-5\:4{--aspect-ratio:calc(5/4)}.aspect-ratio-1\:1{--aspect-ratio:calc(1/1)}.aspect-ratio-4\:5{--aspect-ratio:calc(4/5)}.aspect-ratio-3\:4{--aspect-ratio:calc(3/4)}.aspect-ratio-2\:3{--aspect-ratio:calc(2/3)}.aspect-ratio-9\:16{--aspect-ratio:calc(9/16)}.ratio-16\:9{aspect-ratio:16/9}.ratio-3\:2{aspect-ratio:3/2}.ratio-4\:3{aspect-ratio:4/3}.ratio-5\:4{aspect-ratio:5/4}.ratio-1\:1{aspect-ratio:1/1}.ratio-4\:5{aspect-ratio:4/5}.ratio-3\:4{aspect-ratio:3/4}.ratio-2\:3{aspect-ratio:2/3}.ratio-9\:16{aspect-ratio:9/16}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.contents{display:contents}.hide{display:none}.css-grid{display:grid}.css-inline-grid{display:inline-grid}.space-unit-rem{--space-unit:1rem}.space-unit-em{--space-unit:1em}.space-unit-px{--space-unit:16px}.margin-xxxxs{margin:var(--space-xxxxs)}.margin-xxxs{margin:var(--space-xxxs)}.margin-xxs{margin:var(--space-xxs)}.margin-xs{margin:var(--space-xs)}.margin-sm{margin:var(--space-sm)}.margin-md{margin:var(--space-md)}.margin-lg{margin:var(--space-lg)}.margin-xl{margin:var(--space-xl)}.margin-xxl{margin:var(--space-xxl)}.margin-xxxl{margin:var(--space-xxxl)}.margin-xxxxl{margin:var(--space-xxxxl)}.margin-auto{margin:auto}.margin-0{margin:0}.margin-top-xxxxs{margin-top:var(--space-xxxxs)}.margin-top-xxxs{margin-top:var(--space-xxxs)}.margin-top-xxs{margin-top:var(--space-xxs)}.margin-top-xs{margin-top:var(--space-xs)}.margin-top-sm{margin-top:var(--space-sm)}.margin-top-md{margin-top:var(--space-md)}.margin-top-lg{margin-top:var(--space-lg)}.margin-top-xl{margin-top:var(--space-xl)}.margin-top-xxl{margin-top:var(--space-xxl)}.margin-top-xxxl{margin-top:var(--space-xxxl)}.margin-top-xxxxl{margin-top:var(--space-xxxxl)}.margin-top-auto{margin-top:auto}.margin-top-0{margin-top:0}.margin-bottom-xxxxs{margin-bottom:var(--space-xxxxs)}.margin-bottom-xxxs{margin-bottom:var(--space-xxxs)}.margin-bottom-xxs{margin-bottom:var(--space-xxs)}.margin-bottom-xs{margin-bottom:var(--space-xs)}.margin-bottom-sm{margin-bottom:var(--space-sm)}.margin-bottom-md{margin-bottom:var(--space-md)}.margin-bottom-lg{margin-bottom:var(--space-lg)}.margin-bottom-xl{margin-bottom:var(--space-xl)}.margin-bottom-xxl{margin-bottom:var(--space-xxl)}.margin-bottom-xxxl{margin-bottom:var(--space-xxxl)}.margin-bottom-xxxxl{margin-bottom:var(--space-xxxxl)}.margin-bottom-auto{margin-bottom:auto}.margin-bottom-0{margin-bottom:0}.margin-right-xxxxs{margin-right:var(--space-xxxxs)}.margin-right-xxxs{margin-right:var(--space-xxxs)}.margin-right-xxs{margin-right:var(--space-xxs)}.margin-right-xs{margin-right:var(--space-xs)}.margin-right-sm{margin-right:var(--space-sm)}.margin-right-md{margin-right:var(--space-md)}.margin-right-lg{margin-right:var(--space-lg)}.margin-right-xl{margin-right:var(--space-xl)}.margin-right-xxl{margin-right:var(--space-xxl)}.margin-right-xxxl{margin-right:var(--space-xxxl)}.margin-right-xxxxl{margin-right:var(--space-xxxxl)}.margin-right-auto{margin-right:auto}.margin-right-0{margin-right:0}.margin-left-xxxxs{margin-left:var(--space-xxxxs)}.margin-left-xxxs{margin-left:var(--space-xxxs)}.margin-left-xxs{margin-left:var(--space-xxs)}.margin-left-xs{margin-left:var(--space-xs)}.margin-left-sm{margin-left:var(--space-sm)}.margin-left-md{margin-left:var(--space-md)}.margin-left-lg{margin-left:var(--space-lg)}.margin-left-xl{margin-left:var(--space-xl)}.margin-left-xxl{margin-left:var(--space-xxl)}.margin-left-xxxl{margin-left:var(--space-xxxl)}.margin-left-xxxxl{margin-left:var(--space-xxxxl)}.margin-left-auto{margin-left:auto}.margin-left-0{margin-left:0}.margin-x-xxxxs{margin-left:var(--space-xxxxs);margin-right:var(--space-xxxxs)}.margin-x-xxxs{margin-left:var(--space-xxxs);margin-right:var(--space-xxxs)}.margin-x-xxs{margin-left:var(--space-xxs);margin-right:var(--space-xxs)}.margin-x-xs{margin-left:var(--space-xs);margin-right:var(--space-xs)}.margin-x-sm{margin-left:var(--space-sm);margin-right:var(--space-sm)}.margin-x-md{margin-left:var(--space-md);margin-right:var(--space-md)}.margin-x-lg{margin-left:var(--space-lg);margin-right:var(--space-lg)}.margin-x-xl{margin-left:var(--space-xl);margin-right:var(--space-xl)}.margin-x-xxl{margin-left:var(--space-xxl);margin-right:var(--space-xxl)}.margin-x-xxxl{margin-left:var(--space-xxxl);margin-right:var(--space-xxxl)}.margin-x-xxxxl{margin-left:var(--space-xxxxl);margin-right:var(--space-xxxxl)}.margin-x-auto{margin-left:auto;margin-right:auto}.margin-x-0{margin-left:0;margin-right:0}.margin-y-xxxxs{margin-top:var(--space-xxxxs);margin-bottom:var(--space-xxxxs)}.margin-y-xxxs{margin-top:var(--space-xxxs);margin-bottom:var(--space-xxxs)}.margin-y-xxs{margin-top:var(--space-xxs);margin-bottom:var(--space-xxs)}.margin-y-xs{margin-top:var(--space-xs);margin-bottom:var(--space-xs)}.margin-y-sm{margin-top:var(--space-sm);margin-bottom:var(--space-sm)}.margin-y-md{margin-top:var(--space-md);margin-bottom:var(--space-md)}.margin-y-lg{margin-top:var(--space-lg);margin-bottom:var(--space-lg)}.margin-y-xl{margin-top:var(--space-xl);margin-bottom:var(--space-xl)}.margin-y-xxl{margin-top:var(--space-xxl);margin-bottom:var(--space-xxl)}.margin-y-xxxl{margin-top:var(--space-xxxl);margin-bottom:var(--space-xxxl)}.margin-y-xxxxl{margin-top:var(--space-xxxxl);margin-bottom:var(--space-xxxxl)}.margin-y-auto{margin-top:auto;margin-bottom:auto}.margin-y-0{margin-top:0;margin-bottom:0}.padding-xxxxs{padding:var(--space-xxxxs)}.padding-xxxs{padding:var(--space-xxxs)}.padding-xxs{padding:var(--space-xxs)}.padding-xs{padding:var(--space-xs)}.padding-sm{padding:var(--space-sm)}.padding-md{padding:var(--space-md)}.padding-lg{padding:var(--space-lg)}.padding-xl{padding:var(--space-xl)}.padding-xxl{padding:var(--space-xxl)}.padding-xxxl{padding:var(--space-xxxl)}.padding-xxxxl{padding:var(--space-xxxxl)}.padding-0{padding:0}.padding-component{padding:var(--component-padding)}.padding-top-xxxxs{padding-top:var(--space-xxxxs)}.padding-top-xxxs{padding-top:var(--space-xxxs)}.padding-top-xxs{padding-top:var(--space-xxs)}.padding-top-xs{padding-top:var(--space-xs)}.padding-top-sm{padding-top:var(--space-sm)}.padding-top-md{padding-top:var(--space-md)}.padding-top-lg{padding-top:var(--space-lg)}.padding-top-xl{padding-top:var(--space-xl)}.padding-top-xxl{padding-top:var(--space-xxl)}.padding-top-xxxl{padding-top:var(--space-xxxl)}.padding-top-xxxxl{padding-top:var(--space-xxxxl)}.padding-top-0{padding-top:0}.padding-top-component{padding-top:var(--component-padding)}.padding-bottom-xxxxs{padding-bottom:var(--space-xxxxs)}.padding-bottom-xxxs{padding-bottom:var(--space-xxxs)}.padding-bottom-xxs{padding-bottom:var(--space-xxs)}.padding-bottom-xs{padding-bottom:var(--space-xs)}.padding-bottom-sm{padding-bottom:var(--space-sm)}.padding-bottom-md{padding-bottom:var(--space-md)}.padding-bottom-lg{padding-bottom:var(--space-lg)}.padding-bottom-xl{padding-bottom:var(--space-xl)}.padding-bottom-xxl{padding-bottom:var(--space-xxl)}.padding-bottom-xxxl{padding-bottom:var(--space-xxxl)}.padding-bottom-xxxxl{padding-bottom:var(--space-xxxxl)}.padding-bottom-0{padding-bottom:0}.padding-bottom-component{padding-bottom:var(--component-padding)}.padding-right-xxxxs{padding-right:var(--space-xxxxs)}.padding-right-xxxs{padding-right:var(--space-xxxs)}.padding-right-xxs{padding-right:var(--space-xxs)}.padding-right-xs{padding-right:var(--space-xs)}.padding-right-sm{padding-right:var(--space-sm)}.padding-right-md{padding-right:var(--space-md)}.padding-right-lg{padding-right:var(--space-lg)}.padding-right-xl{padding-right:var(--space-xl)}.padding-right-xxl{padding-right:var(--space-xxl)}.padding-right-xxxl{padding-right:var(--space-xxxl)}.padding-right-xxxxl{padding-right:var(--space-xxxxl)}.padding-right-0{padding-right:0}.padding-right-component{padding-right:var(--component-padding)}.padding-left-xxxxs{padding-left:var(--space-xxxxs)}.padding-left-xxxs{padding-left:var(--space-xxxs)}.padding-left-xxs{padding-left:var(--space-xxs)}.padding-left-xs{padding-left:var(--space-xs)}.padding-left-sm{padding-left:var(--space-sm)}.padding-left-md{padding-left:var(--space-md)}.padding-left-lg{padding-left:var(--space-lg)}.padding-left-xl{padding-left:var(--space-xl)}.padding-left-xxl{padding-left:var(--space-xxl)}.padding-left-xxxl{padding-left:var(--space-xxxl)}.padding-left-xxxxl{padding-left:var(--space-xxxxl)}.padding-left-0{padding-left:0}.padding-left-component{padding-left:var(--component-padding)}.padding-x-xxxxs{padding-left:var(--space-xxxxs);padding-right:var(--space-xxxxs)}.padding-x-xxxs{padding-left:var(--space-xxxs);padding-right:var(--space-xxxs)}.padding-x-xxs{padding-left:var(--space-xxs);padding-right:var(--space-xxs)}.padding-x-xs{padding-left:var(--space-xs);padding-right:var(--space-xs)}.padding-x-sm{padding-left:var(--space-sm);padding-right:var(--space-sm)}.padding-x-md{padding-left:var(--space-md);padding-right:var(--space-md)}.padding-x-lg{padding-left:var(--space-lg);padding-right:var(--space-lg)}.padding-x-xl{padding-left:var(--space-xl);padding-right:var(--space-xl)}.padding-x-xxl{padding-left:var(--space-xxl);padding-right:var(--space-xxl)}.padding-x-xxxl{padding-left:var(--space-xxxl);padding-right:var(--space-xxxl)}.padding-x-xxxxl{padding-left:var(--space-xxxxl);padding-right:var(--space-xxxxl)}.padding-x-0{padding-left:0;padding-right:0}.padding-x-component{padding-left:var(--component-padding);padding-right:var(--component-padding)}.padding-y-xxxxs{padding-top:var(--space-xxxxs);padding-bottom:var(--space-xxxxs)}.padding-y-xxxs{padding-top:var(--space-xxxs);padding-bottom:var(--space-xxxs)}.padding-y-xxs{padding-top:var(--space-xxs);padding-bottom:var(--space-xxs)}.padding-y-xs{padding-top:var(--space-xs);padding-bottom:var(--space-xs)}.padding-y-sm{padding-top:var(--space-sm);padding-bottom:var(--space-sm)}.padding-y-md{padding-top:var(--space-md);padding-bottom:var(--space-md)}.padding-y-lg{padding-top:var(--space-lg);padding-bottom:var(--space-lg)}.padding-y-xl{padding-top:var(--space-xl);padding-bottom:var(--space-xl)}.padding-y-xxl{padding-top:var(--space-xxl);padding-bottom:var(--space-xxl)}.padding-y-xxxl{padding-top:var(--space-xxxl);padding-bottom:var(--space-xxxl)}.padding-y-xxxxl{padding-top:var(--space-xxxxl);padding-bottom:var(--space-xxxxl)}.padding-y-0{padding-top:0;padding-bottom:0}.padding-y-component{padding-top:var(--component-padding);padding-bottom:var(--component-padding)}.align-baseline{vertical-align:baseline}.align-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}.text-truncate,.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.text-replace{overflow:hidden;color:transparent;text-indent:100%;white-space:nowrap}.break-word{overflow-wrap:break-word;min-width:0}.text-unit-em,.text-unit-px,.text-unit-rem{font-size:var(--text-unit)}.text-unit-rem{--text-unit:1rem}.text-unit-em{--text-unit:1em}.text-unit-px{--text-unit:16px}.text-xs{font-size:var(--text-xs,.6875rem)}.text-sm{font-size:var(--text-sm,.75rem)}.text-base{font-size:var(--text-unit,1rem)}.text-md{font-size:var(--text-md,1.125rem)}.text-lg{font-size:var(--text-lg,1.375rem)}.text-xl{font-size:var(--text-xl,1.75rem)}.text-xxl{font-size:var(--text-xxl,2rem)}.text-xxxl{font-size:var(--text-xxxl,2.5rem)}.text-xxxxl{font-size:var(--text-xxxxl,3rem)}.text-uppercase{text-transform:uppercase}.text-capitalize{text-transform:capitalize}.letter-spacing-xs{letter-spacing:-.1em}.letter-spacing-sm{letter-spacing:-.05em}.letter-spacing-md{letter-spacing:.05em}.letter-spacing-lg{letter-spacing:.1em}.letter-spacing-xl{letter-spacing:.2em}.font-thin{font-weight:100}.font-extralight{font-weight:200}.font-light{font-weight:300}.font-normal{font-weight:400}.font-medium{font-weight:500}.font-semibold{font-weight:600}.font-bold,.text-bold{font-weight:700}.font-extrabold{font-weight:800}.font-black{font-weight:900}.font-italic{font-style:italic}.font-smooth{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.font-primary{font-family:var(--font-primary)}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.text-justify{text-align:justify}.text-line-through{text-decoration:line-through}.text-underline{text-decoration:underline}.text-decoration-none{text-decoration:none}.text-shadow-xs{text-shadow:0 1px 1px rgba(0,0,0,.15)}.text-shadow-sm{text-shadow:0 1px 2px rgba(0,0,0,.25)}.text-shadow-md{text-shadow:0 1px 2px rgba(0,0,0,.1),0 2px 4px rgba(0,0,0,.2)}.text-shadow-lg{text-shadow:0 1px 4px rgba(0,0,0,.1),0 2px 8px rgba(0,0,0,.15),0 4px 16px rgba(0,0,0,.2)}.text-shadow-xl{text-shadow:0 1px 4px rgba(0,0,0,.1),0 2px 8px rgba(0,0,0,.15),0 4px 16px rgba(0,0,0,.2),0 6px 24px rgba(0,0,0,.25)}.text-shadow-none{text-shadow:none}.text-indent-sm{text-indent:.5em}.text-indent-md{text-indent:1em}.text-indent-lg{text-indent:1.5em}.text-space-y-xxs{--text-space-y-multiplier:0.25!important}.text-space-y-xs{--text-space-y-multiplier:0.5!important}.text-space-y-sm{--text-space-y-multiplier:0.75!important}.text-space-y-md{--text-space-y-multiplier:1.25!important}.text-space-y-lg{--text-space-y-multiplier:1.5!important}.text-space-y-xl{--text-space-y-multiplier:1.75!important}.text-space-y-xxl{--text-space-y-multiplier:2!important}.line-height-xs{--heading-line-height:1;--body-line-height:1.1}.line-height-xs:not(.text-component){line-height:1.1}.line-height-sm{--heading-line-height:1.1;--body-line-height:1.2}.line-height-sm:not(.text-component){line-height:1.2}.line-height-md{--heading-line-height:1.15;--body-line-height:1.4}.line-height-md:not(.text-component){line-height:1.4}.line-height-lg{--heading-line-height:1.22;--body-line-height:1.58}.line-height-lg:not(.text-component){line-height:1.58}.line-height-xl{--heading-line-height:1.3;--body-line-height:1.72}.line-height-xl:not(.text-component){line-height:1.72}.line-height-body{line-height:var(--body-line-height)}.line-height-heading{line-height:var(--heading-line-height)}.line-height-normal{line-height:normal!important}.line-height-1{line-height:1!important}.line-clamp-1{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1}.line-clamp-2{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}.line-clamp-3{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3}.line-clamp-4{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4}.column-count-1{-moz-column-count:1;column-count:1}.column-count-2{-moz-column-count:2;column-count:2}.column-count-3{-moz-column-count:3;column-count:3}.column-count-4{-moz-column-count:4;column-count:4}.list-style-none{list-style:none}.text-nowrap,.ws-nowrap{white-space:nowrap}.cursor-pointer{cursor:pointer}.cursor-default{cursor:default}.pointer-events-auto{pointer-events:auto}.pointer-events-none{pointer-events:none}.user-select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.user-select-all{-webkit-user-select:all;-moz-user-select:all;user-select:all}[class*=" color-"],[class^=color-]{--color-o:1}.color-inherit{color:inherit}.color-bg-darker{color:hsla(var(--color-bg-darker-h),var(--color-bg-darker-s),var(--color-bg-darker-l),var(--color-o,1))}.color-bg-dark{color:hsla(var(--color-bg-dark-h),var(--color-bg-dark-s),var(--color-bg-dark-l),var(--color-o,1))}.color-bg{color:hsla(var(--color-bg-h),var(--color-bg-s),var(--color-bg-l),var(--color-o,1))}.color-bg-light{color:hsla(var(--color-bg-light-h),var(--color-bg-light-s),var(--color-bg-light-l),var(--color-o,1))}.color-bg-lighter{color:hsla(var(--color-bg-lighter-h),var(--color-bg-lighter-s),var(--color-bg-lighter-l),var(--color-o,1))}.color-contrast-lower{color:hsla(var(--color-contrast-lower-h),var(--color-contrast-lower-s),var(--color-contrast-lower-l),var(--color-o,1))}.color-contrast-low{color:hsla(var(--color-contrast-low-h),var(--color-contrast-low-s),var(--color-contrast-low-l),var(--color-o,1))}.color-contrast-medium{color:hsla(var(--color-contrast-medium-h),var(--color-contrast-medium-s),var(--color-contrast-medium-l),var(--color-o,1))}.color-contrast-high{color:hsla(var(--color-contrast-high-h),var(--color-contrast-high-s),var(--color-contrast-high-l),var(--color-o,1))}.color-contrast-higher{color:hsla(var(--color-contrast-higher-h),var(--color-contrast-higher-s),var(--color-contrast-higher-l),var(--color-o,1))}.color-primary-darker{color:hsla(var(--color-primary-darker-h),var(--color-primary-darker-s),var(--color-primary-darker-l),var(--color-o,1))}.color-primary-dark{color:hsla(var(--color-primary-dark-h),var(--color-primary-dark-s),var(--color-primary-dark-l),var(--color-o,1))}.color-primary{color:hsla(var(--color-primary-h),var(--color-primary-s),var(--color-primary-l),var(--color-o,1))}.color-primary-light{color:hsla(var(--color-primary-light-h),var(--color-primary-light-s),var(--color-primary-light-l),var(--color-o,1))}.color-primary-lighter{color:hsla(var(--color-primary-lighter-h),var(--color-primary-lighter-s),var(--color-primary-lighter-l),var(--color-o,1))}.color-accent-darker{color:hsla(var(--color-accent-darker-h),var(--color-accent-darker-s),var(--color-accent-darker-l),var(--color-o,1))}.color-accent-dark{color:hsla(var(--color-accent-dark-h),var(--color-accent-dark-s),var(--color-accent-dark-l),var(--color-o,1))}.color-accent{color:hsla(var(--color-accent-h),var(--color-accent-s),var(--color-accent-l),var(--color-o,1))}.color-accent-light{color:hsla(var(--color-accent-light-h),var(--color-accent-light-s),var(--color-accent-light-l),var(--color-o,1))}.color-accent-lighter{color:hsla(var(--color-accent-lighter-h),var(--color-accent-lighter-s),var(--color-accent-lighter-l),var(--color-o,1))}.color-success-darker{color:hsla(var(--color-success-darker-h),var(--color-success-darker-s),var(--color-success-darker-l),var(--color-o,1))}.color-success-dark{color:hsla(var(--color-success-dark-h),var(--color-success-dark-s),var(--color-success-dark-l),var(--color-o,1))}.color-success{color:hsla(var(--color-success-h),var(--color-success-s),var(--color-success-l),var(--color-o,1))}.color-success-light{color:hsla(var(--color-success-light-h),var(--color-success-light-s),var(--color-success-light-l),var(--color-o,1))}.color-success-lighter{color:hsla(var(--color-success-lighter-h),var(--color-success-lighter-s),var(--color-success-lighter-l),var(--color-o,1))}.color-warning-darker{color:hsla(var(--color-warning-darker-h),var(--color-warning-darker-s),var(--color-warning-darker-l),var(--color-o,1))}.color-warning-dark{color:hsla(var(--color-warning-dark-h),var(--color-warning-dark-s),var(--color-warning-dark-l),var(--color-o,1))}.color-warning{color:hsla(var(--color-warning-h),var(--color-warning-s),var(--color-warning-l),var(--color-o,1))}.color-warning-light{color:hsla(var(--color-warning-light-h),var(--color-warning-light-s),var(--color-warning-light-l),var(--color-o,1))}.color-warning-lighter{color:hsla(var(--color-warning-lighter-h),var(--color-warning-lighter-s),var(--color-warning-lighter-l),var(--color-o,1))}.color-error-darker{color:hsla(var(--color-error-darker-h),var(--color-error-darker-s),var(--color-error-darker-l),var(--color-o,1))}.color-error-dark{color:hsla(var(--color-error-dark-h),var(--color-error-dark-s),var(--color-error-dark-l),var(--color-o,1))}.color-error{color:hsla(var(--color-error-h),var(--color-error-s),var(--color-error-l),var(--color-o,1))}.color-error-light{color:hsla(var(--color-error-light-h),var(--color-error-light-s),var(--color-error-light-l),var(--color-o,1))}.color-error-lighter{color:hsla(var(--color-error-lighter-h),var(--color-error-lighter-s),var(--color-error-lighter-l),var(--color-o,1))}.color-white{color:hsla(var(--color-white-h),var(--color-white-s),var(--color-white-l),var(--color-o,1))}.color-black{color:hsla(var(--color-black-h),var(--color-black-s),var(--color-black-l),var(--color-o,1))}.color-opacity-0{--color-o:0}.color-opacity-5\%{--color-o:0.05}.color-opacity-10\%{--color-o:0.1}.color-opacity-15\%{--color-o:0.15}.color-opacity-20\%{--color-o:0.2}.color-opacity-25\%{--color-o:0.25}.color-opacity-30\%{--color-o:0.3}.color-opacity-40\%{--color-o:0.4}.color-opacity-50\%{--color-o:0.5}.color-opacity-60\%{--color-o:0.6}.color-opacity-70\%{--color-o:0.7}.color-opacity-75\%{--color-o:0.75}.color-opacity-80\%{--color-o:0.8}.color-opacity-85\%{--color-o:0.85}.color-opacity-90\%{--color-o:0.9}.color-opacity-95\%{--color-o:0.95}[class*=" color-gradient"],[class^=color-gradient]{color:transparent!important;-webkit-background-clip:text;background-clip:text;opacity:var(--color-o,1)}.width-xxxxs{width:var(--size-xxxxs,.25rem)}.width-xxxs{width:var(--size-xxxs,.5rem)}.width-xxs{width:var(--size-xxs,.75rem)}.width-xs{width:var(--size-xs,1rem)}.width-sm{width:var(--size-sm,1.5rem)}.width-md{width:var(--size-md,2rem)}.width-lg{width:var(--size-lg,3rem)}.width-xl{width:var(--size-xl,4rem)}.width-xxl{width:var(--size-xxl,6rem)}.width-xxxl{width:var(--size-xxxl,8rem)}.width-xxxxl{width:var(--size-xxxxl,16rem)}.width-0{width:0}.width-10\%{width:10%}.width-20\%{width:20%}.width-25\%{width:25%}.width-30\%{width:30%}.width-33\%{width: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}.width-inherit{width:inherit}.height-xxxxs{height:var(--size-xxxxs,.25rem)}.height-xxxs{height:var(--size-xxxs,.5rem)}.height-xxs{height:var(--size-xxs,.75rem)}.height-xs{height:var(--size-xs,1rem)}.height-sm{height:var(--size-sm,1.5rem)}.height-md{height:var(--size-md,2rem)}.height-lg{height:var(--size-lg,3rem)}.height-xl{height:var(--size-xl,4rem)}.height-xxl{height:var(--size-xxl,6rem)}.height-xxxl{height:var(--size-xxxl,8rem)}.height-xxxxl{height:var(--size-xxxxl,16rem)}.height-0{height:0}.height-10\%{height:10%}.height-20\%{height:20%}.height-25\%{height:25%}.height-30\%{height:30%}.height-33\%{height: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}.height-inherit{height:inherit}.min-width-0{min-width:0}.min-width-25\%{min-width:25%}.min-width-33\%{min-width:33.3333333333%}.min-width-50\%{min-width:50%}.min-width-66\%{min-width:66.6666666667%}.min-width-75\%{min-width:75%}.min-width-100\%{min-width:100%}.min-width-100vw{min-width:100vw}.min-height-0{min-height:0}.min-height-100\%{min-height:100%}.min-height-100vh{min-height:100vh}:root{--max-width-xxxxxs:17.5rem;--max-width-xxxxs:20rem;--max-width-xxxs:26rem;--max-width-xxs:32rem;--max-width-xs:38rem;--max-width-sm:48rem;--max-width-md:64rem;--max-width-lg:80rem;--max-width-xl:90rem;--max-width-xxl:100rem;--max-width-xxxl:120rem;--max-width-xxxxl:150rem}.max-width-xxxxxs{max-width:var(--max-width-xxxxxs)}.max-width-xxxxs{max-width:var(--max-width-xxxxs)}.max-width-xxxs{max-width:var(--max-width-xxxs)}.max-width-xxs{max-width:var(--max-width-xxs)}.max-width-xs{max-width:var(--max-width-xs)}.max-width-sm{max-width:var(--max-width-sm)}.max-width-md{max-width:var(--max-width-md)}.max-width-lg{max-width:var(--max-width-lg)}.max-width-xl{max-width:var(--max-width-xl)}.max-width-xxl{max-width:var(--max-width-xxl)}.max-width-xxxl{max-width:var(--max-width-xxxl)}.max-width-xxxxl{max-width:var(--max-width-xxxxl)}.max-width-100\%{max-width:100%}.max-width-none{max-width:none}[class*=" max-width-adaptive"],[class^=max-width-adaptive]{max-width:32rem}@media (min-width:48rem){.max-width-adaptive,.max-width-adaptive-lg,.max-width-adaptive-md,.max-width-adaptive-sm,.max-width-adaptive-xl{max-width:48rem}}@media (min-width:64rem){.max-width-adaptive,.max-width-adaptive-lg,.max-width-adaptive-md,.max-width-adaptive-xl{max-width:64rem}}@media (min-width:80rem){.max-width-adaptive,.max-width-adaptive-lg,.max-width-adaptive-xl{max-width:80rem}}@media (min-width:90rem){.max-width-adaptive-xl{max-width:90rem}}.max-height-100\%{max-height:100%}.max-height-100vh{max-height:100vh}.shadow-ring{box-shadow:var(--shadow-ring)}.shadow-xs{box-shadow:var(--shadow-xs)}.shadow-xs.shadow-ring{box-shadow:var(--shadow-xs),var(--shadow-ring)}.shadow-sm{box-shadow:var(--shadow-sm)}.shadow-sm.shadow-ring{box-shadow:var(--shadow-sm),var(--shadow-ring)}.shadow-md{box-shadow:var(--shadow-md)}.shadow-md.shadow-ring{box-shadow:var(--shadow-md),var(--shadow-ring)}.shadow-lg{box-shadow:var(--shadow-lg)}.shadow-lg.shadow-ring{box-shadow:var(--shadow-lg),var(--shadow-ring)}.shadow-xl{box-shadow:var(--shadow-xl)}.shadow-xl.shadow-ring{box-shadow:var(--shadow-xl),var(--shadow-ring)}.shadow-none{box-shadow:none}:where(.inner-glow,.inner-glow-top){position:relative}:where(.inner-glow,.inner-glow-top)::after{content:"";position:absolute;z-index:1;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-relative{position:relative}.position-absolute{position:absolute}.position-fixed{position:fixed}.position-sticky{position:sticky}.inset-0{top:0;right:0;bottom:0;left:0}.top-0{top:0}.top-50\%{top:50%}.top-xxxxs{top:var(--space-xxxxs)}.top-xxxs{top:var(--space-xxxs)}.top-xxs{top:var(--space-xxs)}.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-xxl{top:var(--space-xxl)}.top-xxxl{top:var(--space-xxxl)}.top-xxxxl{top:var(--space-xxxxl)}.bottom-0{bottom:0}.bottom-50\%{bottom:50%}.bottom-xxxxs{bottom:var(--space-xxxxs)}.bottom-xxxs{bottom:var(--space-xxxs)}.bottom-xxs{bottom:var(--space-xxs)}.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-xxl{bottom:var(--space-xxl)}.bottom-xxxl{bottom:var(--space-xxxl)}.bottom-xxxxl{bottom:var(--space-xxxxl)}.right-0{right:0}.right-50\%{right:50%}.right-xxxxs{right:var(--space-xxxxs)}.right-xxxs{right:var(--space-xxxs)}.right-xxs{right:var(--space-xxs)}.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-xxl{right:var(--space-xxl)}.right-xxxl{right:var(--space-xxxl)}.right-xxxxl{right:var(--space-xxxxl)}.left-0{left:0}.left-50\%{left:50%}.left-xxxxs{left:var(--space-xxxxs)}.left-xxxs{left:var(--space-xxxs)}.left-xxs{left:var(--space-xxs)}.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-xxl{left:var(--space-xxl)}.left-xxxl{left:var(--space-xxxl)}.left-xxxxl{left:var(--space-xxxxl)}.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-visible{overflow:visible}.overflow-hidden{overflow:hidden}.overflow-x-hidden{overflow-x:hidden}.overflow-y-hidden{overflow-y:hidden}.overflow-clip{overflow:clip}.overflow-x-clip{overflow-x:clip}.overflow-y-clip{overflow-y:clip}.overflow-auto{overflow:auto}.momentum-scrolling{-webkit-overflow-scrolling:touch}.overscroll-contain{overscroll-behavior:contain}.scroll-smooth{scroll-behavior:smooth}.scroll-padding-xxxxs{scroll-padding:var(--space-xxxxs)}.scroll-padding-xxxs{scroll-padding:var(--space-xxxs)}.scroll-padding-xxs{scroll-padding:var(--space-xxs)}.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-xxl{scroll-padding:var(--space-xxl)}.scroll-padding-xxxl{scroll-padding:var(--space-xxxl)}.scroll-padding-xxxxl{scroll-padding:var(--space-xxxxl)}.opacity-0{opacity:0}.opacity-5\%{opacity:.05}.opacity-10\%{opacity:.1}.opacity-15\%{opacity:.15}.opacity-20\%{opacity:.2}.opacity-25\%{opacity:.25}.opacity-30\%{opacity:.3}.opacity-40\%{opacity:.4}.opacity-50\%{opacity:.5}.opacity-60\%{opacity:.6}.opacity-70\%{opacity:.7}.opacity-75\%{opacity:.75}.opacity-80\%{opacity:.8}.opacity-85\%{opacity:.85}.opacity-90\%{opacity:.9}.opacity-95\%{opacity:.95}.float-left{float:left}.float-right{float:right}.clearfix::after{content:"";display:table;clear:both}[class*=" border-"],[class^=border-]{--border-o:1;--border-width:1px;--border-style:solid}.border{border:var(--border-width,1px) var(--border-style,solid) hsla(var(--color-contrast-higher-h),var(--color-contrast-higher-s),var(--color-contrast-higher-l),var(--border-o-base,.1))}.border-top{border-top:var(--border-width,1px) var(--border-style,solid) hsla(var(--color-contrast-higher-h),var(--color-contrast-higher-s),var(--color-contrast-higher-l),var(--border-o-base,.1))}.border-bottom{border-bottom:var(--border-width,1px) var(--border-style,solid) hsla(var(--color-contrast-higher-h),var(--color-contrast-higher-s),var(--color-contrast-higher-l),var(--border-o-base,.1))}.border-left{border-left:var(--border-width,1px) var(--border-style,solid) hsla(var(--color-contrast-higher-h),var(--color-contrast-higher-s),var(--color-contrast-higher-l),var(--border-o-base,.1))}.border-right{border-right:var(--border-width,1px) var(--border-style,solid) hsla(var(--color-contrast-higher-h),var(--color-contrast-higher-s),var(--color-contrast-higher-l),var(--border-o-base,.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-h),var(--color-bg-darker-s),var(--color-bg-darker-l),var(--border-o,1))}.border-bg-dark{border-color:hsla(var(--color-bg-dark-h),var(--color-bg-dark-s),var(--color-bg-dark-l),var(--border-o,1))}.border-bg{border-color:hsla(var(--color-bg-h),var(--color-bg-s),var(--color-bg-l),var(--border-o,1))}.border-bg-light{border-color:hsla(var(--color-bg-light-h),var(--color-bg-light-s),var(--color-bg-light-l),var(--border-o,1))}.border-bg-lighter{border-color:hsla(var(--color-bg-lighter-h),var(--color-bg-lighter-s),var(--color-bg-lighter-l),var(--border-o,1))}.border-contrast-lower{border-color:hsla(var(--color-contrast-lower-h),var(--color-contrast-lower-s),var(--color-contrast-lower-l),var(--border-o,1))}.border-contrast-low{border-color:hsla(var(--color-contrast-low-h),var(--color-contrast-low-s),var(--color-contrast-low-l),var(--border-o,1))}.border-contrast-medium{border-color:hsla(var(--color-contrast-medium-h),var(--color-contrast-medium-s),var(--color-contrast-medium-l),var(--border-o,1))}.border-contrast-high{border-color:hsla(var(--color-contrast-high-h),var(--color-contrast-high-s),var(--color-contrast-high-l),var(--border-o,1))}.border-contrast-higher{border-color:hsla(var(--color-contrast-higher-h),var(--color-contrast-higher-s),var(--color-contrast-higher-l),var(--border-o,1))}.border-primary-darker{border-color:hsla(var(--color-primary-darker-h),var(--color-primary-darker-s),var(--color-primary-darker-l),var(--border-o,1))}.border-primary-dark{border-color:hsla(var(--color-primary-dark-h),var(--color-primary-dark-s),var(--color-primary-dark-l),var(--border-o,1))}.border-primary{border-color:hsla(var(--color-primary-h),var(--color-primary-s),var(--color-primary-l),var(--border-o,1))}.border-primary-light{border-color:hsla(var(--color-primary-light-h),var(--color-primary-light-s),var(--color-primary-light-l),var(--border-o,1))}.border-primary-lighter{border-color:hsla(var(--color-primary-lighter-h),var(--color-primary-lighter-s),var(--color-primary-lighter-l),var(--border-o,1))}.border-accent-darker{border-color:hsla(var(--color-accent-darker-h),var(--color-accent-darker-s),var(--color-accent-darker-l),var(--border-o,1))}.border-accent-dark{border-color:hsla(var(--color-accent-dark-h),var(--color-accent-dark-s),var(--color-accent-dark-l),var(--border-o,1))}.border-accent{border-color:hsla(var(--color-accent-h),var(--color-accent-s),var(--color-accent-l),var(--border-o,1))}.border-accent-light{border-color:hsla(var(--color-accent-light-h),var(--color-accent-light-s),var(--color-accent-light-l),var(--border-o,1))}.border-accent-lighter{border-color:hsla(var(--color-accent-lighter-h),var(--color-accent-lighter-s),var(--color-accent-lighter-l),var(--border-o,1))}.border-success-darker{border-color:hsla(var(--color-success-darker-h),var(--color-success-darker-s),var(--color-success-darker-l),var(--border-o,1))}.border-success-dark{border-color:hsla(var(--color-success-dark-h),var(--color-success-dark-s),var(--color-success-dark-l),var(--border-o,1))}.border-success{border-color:hsla(var(--color-success-h),var(--color-success-s),var(--color-success-l),var(--border-o,1))}.border-success-light{border-color:hsla(var(--color-success-light-h),var(--color-success-light-s),var(--color-success-light-l),var(--border-o,1))}.border-success-lighter{border-color:hsla(var(--color-success-lighter-h),var(--color-success-lighter-s),var(--color-success-lighter-l),var(--border-o,1))}.border-warning-darker{border-color:hsla(var(--color-warning-darker-h),var(--color-warning-darker-s),var(--color-warning-darker-l),var(--border-o,1))}.border-warning-dark{border-color:hsla(var(--color-warning-dark-h),var(--color-warning-dark-s),var(--color-warning-dark-l),var(--border-o,1))}.border-warning{border-color:hsla(var(--color-warning-h),var(--color-warning-s),var(--color-warning-l),var(--border-o,1))}.border-warning-light{border-color:hsla(var(--color-warning-light-h),var(--color-warning-light-s),var(--color-warning-light-l),var(--border-o,1))}.border-warning-lighter{border-color:hsla(var(--color-warning-lighter-h),var(--color-warning-lighter-s),var(--color-warning-lighter-l),var(--border-o,1))}.border-error-darker{border-color:hsla(var(--color-error-darker-h),var(--color-error-darker-s),var(--color-error-darker-l),var(--border-o,1))}.border-error-dark{border-color:hsla(var(--color-error-dark-h),var(--color-error-dark-s),var(--color-error-dark-l),var(--border-o,1))}.border-error{border-color:hsla(var(--color-error-h),var(--color-error-s),var(--color-error-l),var(--border-o,1))}.border-error-light{border-color:hsla(var(--color-error-light-h),var(--color-error-light-s),var(--color-error-light-l),var(--border-o,1))}.border-error-lighter{border-color:hsla(var(--color-error-lighter-h),var(--color-error-lighter-s),var(--color-error-lighter-l),var(--border-o,1))}.border-white{border-color:hsla(var(--color-white-h),var(--color-white-s),var(--color-white-l),var(--border-o,1))}.border-black{border-color:hsla(var(--color-black-h),var(--color-black-s),var(--color-black-l),var(--border-o,1))}.border-opacity-0{--border-o:0}.border-opacity-5\%{--border-o:0.05}.border-opacity-10\%{--border-o:0.1}.border-opacity-15\%{--border-o:0.15}.border-opacity-20\%{--border-o:0.2}.border-opacity-25\%{--border-o:0.25}.border-opacity-30\%{--border-o:0.3}.border-opacity-40\%{--border-o:0.4}.border-opacity-50\%{--border-o:0.5}.border-opacity-60\%{--border-o:0.6}.border-opacity-70\%{--border-o:0.7}.border-opacity-75\%{--border-o:0.75}.border-opacity-80\%{--border-o:0.8}.border-opacity-85\%{--border-o:0.85}.border-opacity-90\%{--border-o:0.9}.border-opacity-95\%{--border-o:0.95}.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}.bg,[class*=" bg-"],[class^=bg-]{--bg-o:1}.bg-transparent{background-color:transparent}.bg-inherit{background-color:inherit}.bg-darker{background-color:hsla(var(--color-bg-darker-h),var(--color-bg-darker-s),var(--color-bg-darker-l),var(--bg-o))}.bg-dark{background-color:hsla(var(--color-bg-dark-h),var(--color-bg-dark-s),var(--color-bg-dark-l),var(--bg-o))}.bg{background-color:hsla(var(--color-bg-h),var(--color-bg-s),var(--color-bg-l),var(--bg-o))}.bg-light{background-color:hsla(var(--color-bg-light-h),var(--color-bg-light-s),var(--color-bg-light-l),var(--bg-o))}.bg-lighter{background-color:hsla(var(--color-bg-lighter-h),var(--color-bg-lighter-s),var(--color-bg-lighter-l),var(--bg-o))}.bg-contrast-lower{background-color:hsla(var(--color-contrast-lower-h),var(--color-contrast-lower-s),var(--color-contrast-lower-l),var(--bg-o,1))}.bg-contrast-low{background-color:hsla(var(--color-contrast-low-h),var(--color-contrast-low-s),var(--color-contrast-low-l),var(--bg-o,1))}.bg-contrast-medium{background-color:hsla(var(--color-contrast-medium-h),var(--color-contrast-medium-s),var(--color-contrast-medium-l),var(--bg-o,1))}.bg-contrast-high{background-color:hsla(var(--color-contrast-high-h),var(--color-contrast-high-s),var(--color-contrast-high-l),var(--bg-o,1))}.bg-contrast-higher{background-color:hsla(var(--color-contrast-higher-h),var(--color-contrast-higher-s),var(--color-contrast-higher-l),var(--bg-o,1))}.bg-primary-darker{background-color:hsla(var(--color-primary-darker-h),var(--color-primary-darker-s),var(--color-primary-darker-l),var(--bg-o,1))}.bg-primary-dark{background-color:hsla(var(--color-primary-dark-h),var(--color-primary-dark-s),var(--color-primary-dark-l),var(--bg-o,1))}.bg-primary{background-color:hsla(var(--color-primary-h),var(--color-primary-s),var(--color-primary-l),var(--bg-o,1))}.bg-primary-light{background-color:hsla(var(--color-primary-light-h),var(--color-primary-light-s),var(--color-primary-light-l),var(--bg-o,1))}.bg-primary-lighter{background-color:hsla(var(--color-primary-lighter-h),var(--color-primary-lighter-s),var(--color-primary-lighter-l),var(--bg-o,1))}.bg-accent-darker{background-color:hsla(var(--color-accent-darker-h),var(--color-accent-darker-s),var(--color-accent-darker-l),var(--bg-o,1))}.bg-accent-dark{background-color:hsla(var(--color-accent-dark-h),var(--color-accent-dark-s),var(--color-accent-dark-l),var(--bg-o,1))}.bg-accent{background-color:hsla(var(--color-accent-h),var(--color-accent-s),var(--color-accent-l),var(--bg-o,1))}.bg-accent-light{background-color:hsla(var(--color-accent-light-h),var(--color-accent-light-s),var(--color-accent-light-l),var(--bg-o,1))}.bg-accent-lighter{background-color:hsla(var(--color-accent-lighter-h),var(--color-accent-lighter-s),var(--color-accent-lighter-l),var(--bg-o,1))}.bg-success-darker{background-color:hsla(var(--color-success-darker-h),var(--color-success-darker-s),var(--color-success-darker-l),var(--bg-o,1))}.bg-success-dark{background-color:hsla(var(--color-success-dark-h),var(--color-success-dark-s),var(--color-success-dark-l),var(--bg-o,1))}.bg-success{background-color:hsla(var(--color-success-h),var(--color-success-s),var(--color-success-l),var(--bg-o,1))}.bg-success-light{background-color:hsla(var(--color-success-light-h),var(--color-success-light-s),var(--color-success-light-l),var(--bg-o,1))}.bg-success-lighter{background-color:hsla(var(--color-success-lighter-h),var(--color-success-lighter-s),var(--color-success-lighter-l),var(--bg-o,1))}.bg-warning-darker{background-color:hsla(var(--color-warning-darker-h),var(--color-warning-darker-s),var(--color-warning-darker-l),var(--bg-o,1))}.bg-warning-dark{background-color:hsla(var(--color-warning-dark-h),var(--color-warning-dark-s),var(--color-warning-dark-l),var(--bg-o,1))}.bg-warning{background-color:hsla(var(--color-warning-h),var(--color-warning-s),var(--color-warning-l),var(--bg-o,1))}.bg-warning-light{background-color:hsla(var(--color-warning-light-h),var(--color-warning-light-s),var(--color-warning-light-l),var(--bg-o,1))}.bg-warning-lighter{background-color:hsla(var(--color-warning-lighter-h),var(--color-warning-lighter-s),var(--color-warning-lighter-l),var(--bg-o,1))}.bg-error-darker{background-color:hsla(var(--color-error-darker-h),var(--color-error-darker-s),var(--color-error-darker-l),var(--bg-o,1))}.bg-error-dark{background-color:hsla(var(--color-error-dark-h),var(--color-error-dark-s),var(--color-error-dark-l),var(--bg-o,1))}.bg-error{background-color:hsla(var(--color-error-h),var(--color-error-s),var(--color-error-l),var(--bg-o,1))}.bg-error-light{background-color:hsla(var(--color-error-light-h),var(--color-error-light-s),var(--color-error-light-l),var(--bg-o,1))}.bg-error-lighter{background-color:hsla(var(--color-error-lighter-h),var(--color-error-lighter-s),var(--color-error-lighter-l),var(--bg-o,1))}.bg-white{background-color:hsla(var(--color-white-h),var(--color-white-s),var(--color-white-l),var(--bg-o,1))}.bg-black{background-color:hsla(var(--color-black-h),var(--color-black-s),var(--color-black-l),var(--bg-o,1))}.bg-opacity-0{--bg-o:0}.bg-opacity-5\%{--bg-o:0.05}.bg-opacity-10\%{--bg-o:0.1}.bg-opacity-15\%{--bg-o:0.15}.bg-opacity-20\%{--bg-o:0.2}.bg-opacity-25\%{--bg-o:0.25}.bg-opacity-30\%{--bg-o:0.3}.bg-opacity-40\%{--bg-o:0.4}.bg-opacity-50\%{--bg-o:0.5}.bg-opacity-60\%{--bg-o:0.6}.bg-opacity-70\%{--bg-o:0.7}.bg-opacity-75\%{--bg-o:0.75}.bg-opacity-80\%{--bg-o:0.8}.bg-opacity-85\%{--bg-o:0.85}.bg-opacity-90\%{--bg-o:0.9}.bg-opacity-95\%{--bg-o: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-blur-10{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.backdrop-blur-20{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}.isolate{isolation:isolate}.blend-multiply{mix-blend-mode:multiply}.blend-overlay{mix-blend-mode:overlay}.blend-difference{mix-blend-mode:difference}.object-contain{-o-object-fit:contain;object-fit:contain}.object-cover{-o-object-fit:cover;object-fit:cover}.perspective-xs{perspective:250px}.perspective-sm{perspective:500px}.perspective-md{perspective:1000px}.perspective-lg{perspective:1500px}.perspective-xl{perspective:3000px}[class*=" -rotate"],[class*=" -scale"],[class*=" -skew"] [class^=skew],[class*=" -translate"],[class*=" flip"],[class*=" rotate"],[class*=" scale"],[class*=" skew"],[class*=" translate"],[class^=-rotate],[class^=-scale],[class^=-skew],[class^=-translate],[class^=flip],[class^=rotate],[class^=scale],[class^=translate]{--translate:0;--rotate:0;--skew:0;--scale:1;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-50\%{--translate:50%}.translate-x-50\%{--translate-x:50%}.translate-y-50\%{--translate-y:50%}.origin-center{transform-origin:center}.origin-top{transform-origin:center top}.origin-right{transform-origin:right center}.origin-bottom{transform-origin:center bottom}.origin-left{transform-origin:left center}.origin-top-left{transform-origin:left top}.origin-top-right{transform-origin:right top}.origin-bottom-left{transform-origin:left bottom}.origin-bottom-right{transform-origin:right bottom}.transition{transition-property:var(--transition-property,all);transition-duration:var(--transition-duration,.2s);transition-delay:var(--transition-delay,0s)}.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}.visible{visibility:visible}.invisible{visibility:hidden}.appearance-none{-webkit-appearance:none;-moz-appearance:none;appearance:none}.appearance-auto{-webkit-appearance:auto;-moz-appearance:auto;appearance:auto}@media (min-width:32rem){.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-start\@xs{justify-content:flex-start}.justify-end\@xs{justify-content:flex-end}.justify-center\@xs{justify-content:center}.justify-between\@xs{justify-content:space-between}.items-center\@xs{align-items:center}.items-start\@xs{align-items:flex-start}.items-end\@xs{align-items:flex-end}.items-baseline\@xs{align-items:baseline}.items-stretch\@xs{align-items:stretch}.content-start\@xs{align-content:start}.content-end\@xs{align-content:end}.content-center\@xs{align-content:center}.content-between\@xs{align-content:space-between}.order-1\@xs{order:1}.order-2\@xs{order:2}.order-3\@xs{order:3}.block\@xs{display:block}.inline-block\@xs{display:inline-block}.inline\@xs{display:inline}.contents\@xs{display:contents}.css-grid\@xs{display:grid}.css-inline-grid\@xs{display:inline-grid}.hide\@xs{display:none!important}.margin-xxxxs\@xs{margin:var(--space-xxxxs)}.margin-xxxs\@xs{margin:var(--space-xxxs)}.margin-xxs\@xs{margin:var(--space-xxs)}.margin-xs\@xs{margin:var(--space-xs)}.margin-sm\@xs{margin:var(--space-sm)}.margin-md\@xs{margin:var(--space-md)}.margin-lg\@xs{margin:var(--space-lg)}.margin-xl\@xs{margin:var(--space-xl)}.margin-xxl\@xs{margin:var(--space-xxl)}.margin-xxxl\@xs{margin:var(--space-xxxl)}.margin-xxxxl\@xs{margin:var(--space-xxxxl)}.margin-auto\@xs{margin:auto}.margin-0\@xs{margin:0}.margin-top-xxxxs\@xs{margin-top:var(--space-xxxxs)}.margin-top-xxxs\@xs{margin-top:var(--space-xxxs)}.margin-top-xxs\@xs{margin-top:var(--space-xxs)}.margin-top-xs\@xs{margin-top:var(--space-xs)}.margin-top-sm\@xs{margin-top:var(--space-sm)}.margin-top-md\@xs{margin-top:var(--space-md)}.margin-top-lg\@xs{margin-top:var(--space-lg)}.margin-top-xl\@xs{margin-top:var(--space-xl)}.margin-top-xxl\@xs{margin-top:var(--space-xxl)}.margin-top-xxxl\@xs{margin-top:var(--space-xxxl)}.margin-top-xxxxl\@xs{margin-top:var(--space-xxxxl)}.margin-top-auto\@xs{margin-top:auto}.margin-top-0\@xs{margin-top:0}.margin-bottom-xxxxs\@xs{margin-bottom:var(--space-xxxxs)}.margin-bottom-xxxs\@xs{margin-bottom:var(--space-xxxs)}.margin-bottom-xxs\@xs{margin-bottom:var(--space-xxs)}.margin-bottom-xs\@xs{margin-bottom:var(--space-xs)}.margin-bottom-sm\@xs{margin-bottom:var(--space-sm)}.margin-bottom-md\@xs{margin-bottom:var(--space-md)}.margin-bottom-lg\@xs{margin-bottom:var(--space-lg)}.margin-bottom-xl\@xs{margin-bottom:var(--space-xl)}.margin-bottom-xxl\@xs{margin-bottom:var(--space-xxl)}.margin-bottom-xxxl\@xs{margin-bottom:var(--space-xxxl)}.margin-bottom-xxxxl\@xs{margin-bottom:var(--space-xxxxl)}.margin-bottom-auto\@xs{margin-bottom:auto}.margin-bottom-0\@xs{margin-bottom:0}.margin-right-xxxxs\@xs{margin-right:var(--space-xxxxs)}.margin-right-xxxs\@xs{margin-right:var(--space-xxxs)}.margin-right-xxs\@xs{margin-right:var(--space-xxs)}.margin-right-xs\@xs{margin-right:var(--space-xs)}.margin-right-sm\@xs{margin-right:var(--space-sm)}.margin-right-md\@xs{margin-right:var(--space-md)}.margin-right-lg\@xs{margin-right:var(--space-lg)}.margin-right-xl\@xs{margin-right:var(--space-xl)}.margin-right-xxl\@xs{margin-right:var(--space-xxl)}.margin-right-xxxl\@xs{margin-right:var(--space-xxxl)}.margin-right-xxxxl\@xs{margin-right:var(--space-xxxxl)}.margin-right-auto\@xs{margin-right:auto}.margin-right-0\@xs{margin-right:0}.margin-left-xxxxs\@xs{margin-left:var(--space-xxxxs)}.margin-left-xxxs\@xs{margin-left:var(--space-xxxs)}.margin-left-xxs\@xs{margin-left:var(--space-xxs)}.margin-left-xs\@xs{margin-left:var(--space-xs)}.margin-left-sm\@xs{margin-left:var(--space-sm)}.margin-left-md\@xs{margin-left:var(--space-md)}.margin-left-lg\@xs{margin-left:var(--space-lg)}.margin-left-xl\@xs{margin-left:var(--space-xl)}.margin-left-xxl\@xs{margin-left:var(--space-xxl)}.margin-left-xxxl\@xs{margin-left:var(--space-xxxl)}.margin-left-xxxxl\@xs{margin-left:var(--space-xxxxl)}.margin-left-auto\@xs{margin-left:auto}.margin-left-0\@xs{margin-left:0}.margin-x-xxxxs\@xs{margin-left:var(--space-xxxxs);margin-right:var(--space-xxxxs)}.margin-x-xxxs\@xs{margin-left:var(--space-xxxs);margin-right:var(--space-xxxs)}.margin-x-xxs\@xs{margin-left:var(--space-xxs);margin-right:var(--space-xxs)}.margin-x-xs\@xs{margin-left:var(--space-xs);margin-right:var(--space-xs)}.margin-x-sm\@xs{margin-left:var(--space-sm);margin-right:var(--space-sm)}.margin-x-md\@xs{margin-left:var(--space-md);margin-right:var(--space-md)}.margin-x-lg\@xs{margin-left:var(--space-lg);margin-right:var(--space-lg)}.margin-x-xl\@xs{margin-left:var(--space-xl);margin-right:var(--space-xl)}.margin-x-xxl\@xs{margin-left:var(--space-xxl);margin-right:var(--space-xxl)}.margin-x-xxxl\@xs{margin-left:var(--space-xxxl);margin-right:var(--space-xxxl)}.margin-x-xxxxl\@xs{margin-left:var(--space-xxxxl);margin-right:var(--space-xxxxl)}.margin-x-auto\@xs{margin-left:auto;margin-right:auto}.margin-x-0\@xs{margin-left:0;margin-right:0}.margin-y-xxxxs\@xs{margin-top:var(--space-xxxxs);margin-bottom:var(--space-xxxxs)}.margin-y-xxxs\@xs{margin-top:var(--space-xxxs);margin-bottom:var(--space-xxxs)}.margin-y-xxs\@xs{margin-top:var(--space-xxs);margin-bottom:var(--space-xxs)}.margin-y-xs\@xs{margin-top:var(--space-xs);margin-bottom:var(--space-xs)}.margin-y-sm\@xs{margin-top:var(--space-sm);margin-bottom:var(--space-sm)}.margin-y-md\@xs{margin-top:var(--space-md);margin-bottom:var(--space-md)}.margin-y-lg\@xs{margin-top:var(--space-lg);margin-bottom:var(--space-lg)}.margin-y-xl\@xs{margin-top:var(--space-xl);margin-bottom:var(--space-xl)}.margin-y-xxl\@xs{margin-top:var(--space-xxl);margin-bottom:var(--space-xxl)}.margin-y-xxxl\@xs{margin-top:var(--space-xxxl);margin-bottom:var(--space-xxxl)}.margin-y-xxxxl\@xs{margin-top:var(--space-xxxxl);margin-bottom:var(--space-xxxxl)}.margin-y-auto\@xs{margin-top:auto;margin-bottom:auto}.margin-y-0\@xs{margin-top:0;margin-bottom:0}.padding-xxxxs\@xs{padding:var(--space-xxxxs)}.padding-xxxs\@xs{padding:var(--space-xxxs)}.padding-xxs\@xs{padding:var(--space-xxs)}.padding-xs\@xs{padding:var(--space-xs)}.padding-sm\@xs{padding:var(--space-sm)}.padding-md\@xs{padding:var(--space-md)}.padding-lg\@xs{padding:var(--space-lg)}.padding-xl\@xs{padding:var(--space-xl)}.padding-xxl\@xs{padding:var(--space-xxl)}.padding-xxxl\@xs{padding:var(--space-xxxl)}.padding-xxxxl\@xs{padding:var(--space-xxxxl)}.padding-0\@xs{padding:0}.padding-component\@xs{padding:var(--component-padding)}.padding-top-xxxxs\@xs{padding-top:var(--space-xxxxs)}.padding-top-xxxs\@xs{padding-top:var(--space-xxxs)}.padding-top-xxs\@xs{padding-top:var(--space-xxs)}.padding-top-xs\@xs{padding-top:var(--space-xs)}.padding-top-sm\@xs{padding-top:var(--space-sm)}.padding-top-md\@xs{padding-top:var(--space-md)}.padding-top-lg\@xs{padding-top:var(--space-lg)}.padding-top-xl\@xs{padding-top:var(--space-xl)}.padding-top-xxl\@xs{padding-top:var(--space-xxl)}.padding-top-xxxl\@xs{padding-top:var(--space-xxxl)}.padding-top-xxxxl\@xs{padding-top:var(--space-xxxxl)}.padding-top-0\@xs{padding-top:0}.padding-top-component\@xs{padding-top:var(--component-padding)}.padding-bottom-xxxxs\@xs{padding-bottom:var(--space-xxxxs)}.padding-bottom-xxxs\@xs{padding-bottom:var(--space-xxxs)}.padding-bottom-xxs\@xs{padding-bottom:var(--space-xxs)}.padding-bottom-xs\@xs{padding-bottom:var(--space-xs)}.padding-bottom-sm\@xs{padding-bottom:var(--space-sm)}.padding-bottom-md\@xs{padding-bottom:var(--space-md)}.padding-bottom-lg\@xs{padding-bottom:var(--space-lg)}.padding-bottom-xl\@xs{padding-bottom:var(--space-xl)}.padding-bottom-xxl\@xs{padding-bottom:var(--space-xxl)}.padding-bottom-xxxl\@xs{padding-bottom:var(--space-xxxl)}.padding-bottom-xxxxl\@xs{padding-bottom:var(--space-xxxxl)}.padding-bottom-0\@xs{padding-bottom:0}.padding-bottom-component\@xs{padding-bottom:var(--component-padding)}.padding-right-xxxxs\@xs{padding-right:var(--space-xxxxs)}.padding-right-xxxs\@xs{padding-right:var(--space-xxxs)}.padding-right-xxs\@xs{padding-right:var(--space-xxs)}.padding-right-xs\@xs{padding-right:var(--space-xs)}.padding-right-sm\@xs{padding-right:var(--space-sm)}.padding-right-md\@xs{padding-right:var(--space-md)}.padding-right-lg\@xs{padding-right:var(--space-lg)}.padding-right-xl\@xs{padding-right:var(--space-xl)}.padding-right-xxl\@xs{padding-right:var(--space-xxl)}.padding-right-xxxl\@xs{padding-right:var(--space-xxxl)}.padding-right-xxxxl\@xs{padding-right:var(--space-xxxxl)}.padding-right-0\@xs{padding-right:0}.padding-right-component\@xs{padding-right:var(--component-padding)}.padding-left-xxxxs\@xs{padding-left:var(--space-xxxxs)}.padding-left-xxxs\@xs{padding-left:var(--space-xxxs)}.padding-left-xxs\@xs{padding-left:var(--space-xxs)}.padding-left-xs\@xs{padding-left:var(--space-xs)}.padding-left-sm\@xs{padding-left:var(--space-sm)}.padding-left-md\@xs{padding-left:var(--space-md)}.padding-left-lg\@xs{padding-left:var(--space-lg)}.padding-left-xl\@xs{padding-left:var(--space-xl)}.padding-left-xxl\@xs{padding-left:var(--space-xxl)}.padding-left-xxxl\@xs{padding-left:var(--space-xxxl)}.padding-left-xxxxl\@xs{padding-left:var(--space-xxxxl)}.padding-left-0\@xs{padding-left:0}.padding-left-component\@xs{padding-left:var(--component-padding)}.padding-x-xxxxs\@xs{padding-left:var(--space-xxxxs);padding-right:var(--space-xxxxs)}.padding-x-xxxs\@xs{padding-left:var(--space-xxxs);padding-right:var(--space-xxxs)}.padding-x-xxs\@xs{padding-left:var(--space-xxs);padding-right:var(--space-xxs)}.padding-x-xs\@xs{padding-left:var(--space-xs);padding-right:var(--space-xs)}.padding-x-sm\@xs{padding-left:var(--space-sm);padding-right:var(--space-sm)}.padding-x-md\@xs{padding-left:var(--space-md);padding-right:var(--space-md)}.padding-x-lg\@xs{padding-left:var(--space-lg);padding-right:var(--space-lg)}.padding-x-xl\@xs{padding-left:var(--space-xl);padding-right:var(--space-xl)}.padding-x-xxl\@xs{padding-left:var(--space-xxl);padding-right:var(--space-xxl)}.padding-x-xxxl\@xs{padding-left:var(--space-xxxl);padding-right:var(--space-xxxl)}.padding-x-xxxxl\@xs{padding-left:var(--space-xxxxl);padding-right:var(--space-xxxxl)}.padding-x-0\@xs{padding-left:0;padding-right:0}.padding-x-component\@xs{padding-left:var(--component-padding);padding-right:var(--component-padding)}.padding-y-xxxxs\@xs{padding-top:var(--space-xxxxs);padding-bottom:var(--space-xxxxs)}.padding-y-xxxs\@xs{padding-top:var(--space-xxxs);padding-bottom:var(--space-xxxs)}.padding-y-xxs\@xs{padding-top:var(--space-xxs);padding-bottom:var(--space-xxs)}.padding-y-xs\@xs{padding-top:var(--space-xs);padding-bottom:var(--space-xs)}.padding-y-sm\@xs{padding-top:var(--space-sm);padding-bottom:var(--space-sm)}.padding-y-md\@xs{padding-top:var(--space-md);padding-bottom:var(--space-md)}.padding-y-lg\@xs{padding-top:var(--space-lg);padding-bottom:var(--space-lg)}.padding-y-xl\@xs{padding-top:var(--space-xl);padding-bottom:var(--space-xl)}.padding-y-xxl\@xs{padding-top:var(--space-xxl);padding-bottom:var(--space-xxl)}.padding-y-xxxl\@xs{padding-top:var(--space-xxxl);padding-bottom:var(--space-xxxl)}.padding-y-xxxxl\@xs{padding-top:var(--space-xxxxl);padding-bottom:var(--space-xxxxl)}.padding-y-0\@xs{padding-top:0;padding-bottom:0}.padding-y-component\@xs{padding-top:var(--component-padding);padding-bottom:var(--component-padding)}.text-center\@xs{text-align:center}.text-left\@xs{text-align:left}.text-right\@xs{text-align:right}.text-justify\@xs{text-align:justify}.text-xs\@xs{font-size:var(--text-xs,.6875rem)}.text-sm\@xs{font-size:var(--text-sm,.75rem)}.text-base\@xs{font-size:var(--text-unit,1rem)}.text-md\@xs{font-size:var(--text-md,1.125rem)}.text-lg\@xs{font-size:var(--text-lg,1.375rem)}.text-xl\@xs{font-size:var(--text-xl,1.75rem)}.text-xxl\@xs{font-size:var(--text-xxl,2rem)}.text-xxxl\@xs{font-size:var(--text-xxxl,2.5rem)}.text-xxxxl\@xs{font-size:var(--text-xxxxl,3rem)}.column-count-1\@xs{-moz-column-count:1;column-count:1}.column-count-2\@xs{-moz-column-count:2;column-count:2}.column-count-3\@xs{-moz-column-count:3;column-count:3}.column-count-4\@xs{-moz-column-count:4;column-count:4}.width-xxxxs\@xs{width:var(--size-xxxxs,.25rem)}.width-xxxs\@xs{width:var(--size-xxxs,.5rem)}.width-xxs\@xs{width:var(--size-xxs,.75rem)}.width-xs\@xs{width:var(--size-xs,1rem)}.width-sm\@xs{width:var(--size-sm,1.5rem)}.width-md\@xs{width:var(--size-md,2rem)}.width-lg\@xs{width:var(--size-lg,3rem)}.width-xl\@xs{width:var(--size-xl,4rem)}.width-xxl\@xs{width:var(--size-xxl,6rem)}.width-xxxl\@xs{width:var(--size-xxxl,8rem)}.width-xxxxl\@xs{width:var(--size-xxxxl,16rem)}.width-0\@xs{width:0}.width-10\%\@xs{width:10%}.width-20\%\@xs{width:20%}.width-25\%\@xs{width:25%}.width-30\%\@xs{width:30%}.width-33\%\@xs{width: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}.width-inherit\@xs{width:inherit}.height-xxxxs\@xs{height:var(--size-xxxxs,.25rem)}.height-xxxs\@xs{height:var(--size-xxxs,.5rem)}.height-xxs\@xs{height:var(--size-xxs,.75rem)}.height-xs\@xs{height:var(--size-xs,1rem)}.height-sm\@xs{height:var(--size-sm,1.5rem)}.height-md\@xs{height:var(--size-md,2rem)}.height-lg\@xs{height:var(--size-lg,3rem)}.height-xl\@xs{height:var(--size-xl,4rem)}.height-xxl\@xs{height:var(--size-xxl,6rem)}.height-xxxl\@xs{height:var(--size-xxxl,8rem)}.height-xxxxl\@xs{height:var(--size-xxxxl,16rem)}.height-0\@xs{height:0}.height-10\%\@xs{height:10%}.height-20\%\@xs{height:20%}.height-25\%\@xs{height:25%}.height-30\%\@xs{height:30%}.height-33\%\@xs{height: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}.height-inherit\@xs{height:inherit}.max-width-xxxxxs\@xs{max-width:var(--max-width-xxxxxs)}.max-width-xxxxs\@xs{max-width:var(--max-width-xxxxs)}.max-width-xxxs\@xs{max-width:var(--max-width-xxxs)}.max-width-xxs\@xs{max-width:var(--max-width-xxs)}.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-xxl\@xs{max-width:var(--max-width-xxl)}.max-width-xxxl\@xs{max-width:var(--max-width-xxxl)}.max-width-xxxxl\@xs{max-width:var(--max-width-xxxxl)}.max-width-100\%\@xs{max-width:100%}.max-width-none\@xs{max-width:none}.position-relative\@xs{position:relative}.position-absolute\@xs{position:absolute}.position-fixed\@xs{position:fixed}.position-sticky\@xs{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-xxxxs\@xs{top:var(--space-xxxxs)}.top-xxxs\@xs{top:var(--space-xxxs)}.top-xxs\@xs{top:var(--space-xxs)}.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-xxl\@xs{top:var(--space-xxl)}.top-xxxl\@xs{top:var(--space-xxxl)}.top-xxxxl\@xs{top:var(--space-xxxxl)}.bottom-0\@xs{bottom:0}.bottom-50\%\@xs{bottom:50%}.bottom-xxxxs\@xs{bottom:var(--space-xxxxs)}.bottom-xxxs\@xs{bottom:var(--space-xxxs)}.bottom-xxs\@xs{bottom:var(--space-xxs)}.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-xxl\@xs{bottom:var(--space-xxl)}.bottom-xxxl\@xs{bottom:var(--space-xxxl)}.bottom-xxxxl\@xs{bottom:var(--space-xxxxl)}.right-0\@xs{right:0}.right-50\%\@xs{right:50%}.right-xxxxs\@xs{right:var(--space-xxxxs)}.right-xxxs\@xs{right:var(--space-xxxs)}.right-xxs\@xs{right:var(--space-xxs)}.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-xxl\@xs{right:var(--space-xxl)}.right-xxxl\@xs{right:var(--space-xxxl)}.right-xxxxl\@xs{right:var(--space-xxxxl)}.left-0\@xs{left:0}.left-50\%\@xs{left:50%}.left-xxxxs\@xs{left:var(--space-xxxxs)}.left-xxxs\@xs{left:var(--space-xxxs)}.left-xxs\@xs{left:var(--space-xxs)}.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-xxl\@xs{left:var(--space-xxl)}.left-xxxl\@xs{left:var(--space-xxxl)}.left-xxxxl\@xs{left:var(--space-xxxxl)}.overflow-hidden\@xs{overflow:hidden}.overflow-auto\@xs{overflow:auto}.momentum-scrolling\@xs{-webkit-overflow-scrolling:touch}.overscroll-contain\@xs{overscroll-behavior:contain}.visible\@xs{visibility:visible}.invisible\@xs{visibility:hidden}}@media not all and (min-width:32rem){.display\@xs{display:none!important}}@media (min-width:48rem){.flex\@sm{display:flex}.inline-flex\@sm{display:inline-flex}.flex-wrap\@sm{flex-wrap:wrap}.flex-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-start\@sm{justify-content:flex-start}.justify-end\@sm{justify-content:flex-end}.justify-center\@sm{justify-content:center}.justify-between\@sm{justify-content:space-between}.items-center\@sm{align-items:center}.items-start\@sm{align-items:flex-start}.items-end\@sm{align-items:flex-end}.items-baseline\@sm{align-items:baseline}.items-stretch\@sm{align-items:stretch}.content-start\@sm{align-content:start}.content-end\@sm{align-content:end}.content-center\@sm{align-content:center}.content-between\@sm{align-content:space-between}.order-1\@sm{order:1}.order-2\@sm{order:2}.order-3\@sm{order:3}.block\@sm{display:block}.inline-block\@sm{display:inline-block}.inline\@sm{display:inline}.contents\@sm{display:contents}.css-grid\@sm{display:grid}.css-inline-grid\@sm{display:inline-grid}.hide\@sm{display:none!important}.margin-xxxxs\@sm{margin:var(--space-xxxxs)}.margin-xxxs\@sm{margin:var(--space-xxxs)}.margin-xxs\@sm{margin:var(--space-xxs)}.margin-xs\@sm{margin:var(--space-xs)}.margin-sm\@sm{margin:var(--space-sm)}.margin-md\@sm{margin:var(--space-md)}.margin-lg\@sm{margin:var(--space-lg)}.margin-xl\@sm{margin:var(--space-xl)}.margin-xxl\@sm{margin:var(--space-xxl)}.margin-xxxl\@sm{margin:var(--space-xxxl)}.margin-xxxxl\@sm{margin:var(--space-xxxxl)}.margin-auto\@sm{margin:auto}.margin-0\@sm{margin:0}.margin-top-xxxxs\@sm{margin-top:var(--space-xxxxs)}.margin-top-xxxs\@sm{margin-top:var(--space-xxxs)}.margin-top-xxs\@sm{margin-top:var(--space-xxs)}.margin-top-xs\@sm{margin-top:var(--space-xs)}.margin-top-sm\@sm{margin-top:var(--space-sm)}.margin-top-md\@sm{margin-top:var(--space-md)}.margin-top-lg\@sm{margin-top:var(--space-lg)}.margin-top-xl\@sm{margin-top:var(--space-xl)}.margin-top-xxl\@sm{margin-top:var(--space-xxl)}.margin-top-xxxl\@sm{margin-top:var(--space-xxxl)}.margin-top-xxxxl\@sm{margin-top:var(--space-xxxxl)}.margin-top-auto\@sm{margin-top:auto}.margin-top-0\@sm{margin-top:0}.margin-bottom-xxxxs\@sm{margin-bottom:var(--space-xxxxs)}.margin-bottom-xxxs\@sm{margin-bottom:var(--space-xxxs)}.margin-bottom-xxs\@sm{margin-bottom:var(--space-xxs)}.margin-bottom-xs\@sm{margin-bottom:var(--space-xs)}.margin-bottom-sm\@sm{margin-bottom:var(--space-sm)}.margin-bottom-md\@sm{margin-bottom:var(--space-md)}.margin-bottom-lg\@sm{margin-bottom:var(--space-lg)}.margin-bottom-xl\@sm{margin-bottom:var(--space-xl)}.margin-bottom-xxl\@sm{margin-bottom:var(--space-xxl)}.margin-bottom-xxxl\@sm{margin-bottom:var(--space-xxxl)}.margin-bottom-xxxxl\@sm{margin-bottom:var(--space-xxxxl)}.margin-bottom-auto\@sm{margin-bottom:auto}.margin-bottom-0\@sm{margin-bottom:0}.margin-right-xxxxs\@sm{margin-right:var(--space-xxxxs)}.margin-right-xxxs\@sm{margin-right:var(--space-xxxs)}.margin-right-xxs\@sm{margin-right:var(--space-xxs)}.margin-right-xs\@sm{margin-right:var(--space-xs)}.margin-right-sm\@sm{margin-right:var(--space-sm)}.margin-right-md\@sm{margin-right:var(--space-md)}.margin-right-lg\@sm{margin-right:var(--space-lg)}.margin-right-xl\@sm{margin-right:var(--space-xl)}.margin-right-xxl\@sm{margin-right:var(--space-xxl)}.margin-right-xxxl\@sm{margin-right:var(--space-xxxl)}.margin-right-xxxxl\@sm{margin-right:var(--space-xxxxl)}.margin-right-auto\@sm{margin-right:auto}.margin-right-0\@sm{margin-right:0}.margin-left-xxxxs\@sm{margin-left:var(--space-xxxxs)}.margin-left-xxxs\@sm{margin-left:var(--space-xxxs)}.margin-left-xxs\@sm{margin-left:var(--space-xxs)}.margin-left-xs\@sm{margin-left:var(--space-xs)}.margin-left-sm\@sm{margin-left:var(--space-sm)}.margin-left-md\@sm{margin-left:var(--space-md)}.margin-left-lg\@sm{margin-left:var(--space-lg)}.margin-left-xl\@sm{margin-left:var(--space-xl)}.margin-left-xxl\@sm{margin-left:var(--space-xxl)}.margin-left-xxxl\@sm{margin-left:var(--space-xxxl)}.margin-left-xxxxl\@sm{margin-left:var(--space-xxxxl)}.margin-left-auto\@sm{margin-left:auto}.margin-left-0\@sm{margin-left:0}.margin-x-xxxxs\@sm{margin-left:var(--space-xxxxs);margin-right:var(--space-xxxxs)}.margin-x-xxxs\@sm{margin-left:var(--space-xxxs);margin-right:var(--space-xxxs)}.margin-x-xxs\@sm{margin-left:var(--space-xxs);margin-right:var(--space-xxs)}.margin-x-xs\@sm{margin-left:var(--space-xs);margin-right:var(--space-xs)}.margin-x-sm\@sm{margin-left:var(--space-sm);margin-right:var(--space-sm)}.margin-x-md\@sm{margin-left:var(--space-md);margin-right:var(--space-md)}.margin-x-lg\@sm{margin-left:var(--space-lg);margin-right:var(--space-lg)}.margin-x-xl\@sm{margin-left:var(--space-xl);margin-right:var(--space-xl)}.margin-x-xxl\@sm{margin-left:var(--space-xxl);margin-right:var(--space-xxl)}.margin-x-xxxl\@sm{margin-left:var(--space-xxxl);margin-right:var(--space-xxxl)}.margin-x-xxxxl\@sm{margin-left:var(--space-xxxxl);margin-right:var(--space-xxxxl)}.margin-x-auto\@sm{margin-left:auto;margin-right:auto}.margin-x-0\@sm{margin-left:0;margin-right:0}.margin-y-xxxxs\@sm{margin-top:var(--space-xxxxs);margin-bottom:var(--space-xxxxs)}.margin-y-xxxs\@sm{margin-top:var(--space-xxxs);margin-bottom:var(--space-xxxs)}.margin-y-xxs\@sm{margin-top:var(--space-xxs);margin-bottom:var(--space-xxs)}.margin-y-xs\@sm{margin-top:var(--space-xs);margin-bottom:var(--space-xs)}.margin-y-sm\@sm{margin-top:var(--space-sm);margin-bottom:var(--space-sm)}.margin-y-md\@sm{margin-top:var(--space-md);margin-bottom:var(--space-md)}.margin-y-lg\@sm{margin-top:var(--space-lg);margin-bottom:var(--space-lg)}.margin-y-xl\@sm{margin-top:var(--space-xl);margin-bottom:var(--space-xl)}.margin-y-xxl\@sm{margin-top:var(--space-xxl);margin-bottom:var(--space-xxl)}.margin-y-xxxl\@sm{margin-top:var(--space-xxxl);margin-bottom:var(--space-xxxl)}.margin-y-xxxxl\@sm{margin-top:var(--space-xxxxl);margin-bottom:var(--space-xxxxl)}.margin-y-auto\@sm{margin-top:auto;margin-bottom:auto}.margin-y-0\@sm{margin-top:0;margin-bottom:0}.padding-xxxxs\@sm{padding:var(--space-xxxxs)}.padding-xxxs\@sm{padding:var(--space-xxxs)}.padding-xxs\@sm{padding:var(--space-xxs)}.padding-xs\@sm{padding:var(--space-xs)}.padding-sm\@sm{padding:var(--space-sm)}.padding-md\@sm{padding:var(--space-md)}.padding-lg\@sm{padding:var(--space-lg)}.padding-xl\@sm{padding:var(--space-xl)}.padding-xxl\@sm{padding:var(--space-xxl)}.padding-xxxl\@sm{padding:var(--space-xxxl)}.padding-xxxxl\@sm{padding:var(--space-xxxxl)}.padding-0\@sm{padding:0}.padding-component\@sm{padding:var(--component-padding)}.padding-top-xxxxs\@sm{padding-top:var(--space-xxxxs)}.padding-top-xxxs\@sm{padding-top:var(--space-xxxs)}.padding-top-xxs\@sm{padding-top:var(--space-xxs)}.padding-top-xs\@sm{padding-top:var(--space-xs)}.padding-top-sm\@sm{padding-top:var(--space-sm)}.padding-top-md\@sm{padding-top:var(--space-md)}.padding-top-lg\@sm{padding-top:var(--space-lg)}.padding-top-xl\@sm{padding-top:var(--space-xl)}.padding-top-xxl\@sm{padding-top:var(--space-xxl)}.padding-top-xxxl\@sm{padding-top:var(--space-xxxl)}.padding-top-xxxxl\@sm{padding-top:var(--space-xxxxl)}.padding-top-0\@sm{padding-top:0}.padding-top-component\@sm{padding-top:var(--component-padding)}.padding-bottom-xxxxs\@sm{padding-bottom:var(--space-xxxxs)}.padding-bottom-xxxs\@sm{padding-bottom:var(--space-xxxs)}.padding-bottom-xxs\@sm{padding-bottom:var(--space-xxs)}.padding-bottom-xs\@sm{padding-bottom:var(--space-xs)}.padding-bottom-sm\@sm{padding-bottom:var(--space-sm)}.padding-bottom-md\@sm{padding-bottom:var(--space-md)}.padding-bottom-lg\@sm{padding-bottom:var(--space-lg)}.padding-bottom-xl\@sm{padding-bottom:var(--space-xl)}.padding-bottom-xxl\@sm{padding-bottom:var(--space-xxl)}.padding-bottom-xxxl\@sm{padding-bottom:var(--space-xxxl)}.padding-bottom-xxxxl\@sm{padding-bottom:var(--space-xxxxl)}.padding-bottom-0\@sm{padding-bottom:0}.padding-bottom-component\@sm{padding-bottom:var(--component-padding)}.padding-right-xxxxs\@sm{padding-right:var(--space-xxxxs)}.padding-right-xxxs\@sm{padding-right:var(--space-xxxs)}.padding-right-xxs\@sm{padding-right:var(--space-xxs)}.padding-right-xs\@sm{padding-right:var(--space-xs)}.padding-right-sm\@sm{padding-right:var(--space-sm)}.padding-right-md\@sm{padding-right:var(--space-md)}.padding-right-lg\@sm{padding-right:var(--space-lg)}.padding-right-xl\@sm{padding-right:var(--space-xl)}.padding-right-xxl\@sm{padding-right:var(--space-xxl)}.padding-right-xxxl\@sm{padding-right:var(--space-xxxl)}.padding-right-xxxxl\@sm{padding-right:var(--space-xxxxl)}.padding-right-0\@sm{padding-right:0}.padding-right-component\@sm{padding-right:var(--component-padding)}.padding-left-xxxxs\@sm{padding-left:var(--space-xxxxs)}.padding-left-xxxs\@sm{padding-left:var(--space-xxxs)}.padding-left-xxs\@sm{padding-left:var(--space-xxs)}.padding-left-xs\@sm{padding-left:var(--space-xs)}.padding-left-sm\@sm{padding-left:var(--space-sm)}.padding-left-md\@sm{padding-left:var(--space-md)}.padding-left-lg\@sm{padding-left:var(--space-lg)}.padding-left-xl\@sm{padding-left:var(--space-xl)}.padding-left-xxl\@sm{padding-left:var(--space-xxl)}.padding-left-xxxl\@sm{padding-left:var(--space-xxxl)}.padding-left-xxxxl\@sm{padding-left:var(--space-xxxxl)}.padding-left-0\@sm{padding-left:0}.padding-left-component\@sm{padding-left:var(--component-padding)}.padding-x-xxxxs\@sm{padding-left:var(--space-xxxxs);padding-right:var(--space-xxxxs)}.padding-x-xxxs\@sm{padding-left:var(--space-xxxs);padding-right:var(--space-xxxs)}.padding-x-xxs\@sm{padding-left:var(--space-xxs);padding-right:var(--space-xxs)}.padding-x-xs\@sm{padding-left:var(--space-xs);padding-right:var(--space-xs)}.padding-x-sm\@sm{padding-left:var(--space-sm);padding-right:var(--space-sm)}.padding-x-md\@sm{padding-left:var(--space-md);padding-right:var(--space-md)}.padding-x-lg\@sm{padding-left:var(--space-lg);padding-right:var(--space-lg)}.padding-x-xl\@sm{padding-left:var(--space-xl);padding-right:var(--space-xl)}.padding-x-xxl\@sm{padding-left:var(--space-xxl);padding-right:var(--space-xxl)}.padding-x-xxxl\@sm{padding-left:var(--space-xxxl);padding-right:var(--space-xxxl)}.padding-x-xxxxl\@sm{padding-left:var(--space-xxxxl);padding-right:var(--space-xxxxl)}.padding-x-0\@sm{padding-left:0;padding-right:0}.padding-x-component\@sm{padding-left:var(--component-padding);padding-right:var(--component-padding)}.padding-y-xxxxs\@sm{padding-top:var(--space-xxxxs);padding-bottom:var(--space-xxxxs)}.padding-y-xxxs\@sm{padding-top:var(--space-xxxs);padding-bottom:var(--space-xxxs)}.padding-y-xxs\@sm{padding-top:var(--space-xxs);padding-bottom:var(--space-xxs)}.padding-y-xs\@sm{padding-top:var(--space-xs);padding-bottom:var(--space-xs)}.padding-y-sm\@sm{padding-top:var(--space-sm);padding-bottom:var(--space-sm)}.padding-y-md\@sm{padding-top:var(--space-md);padding-bottom:var(--space-md)}.padding-y-lg\@sm{padding-top:var(--space-lg);padding-bottom:var(--space-lg)}.padding-y-xl\@sm{padding-top:var(--space-xl);padding-bottom:var(--space-xl)}.padding-y-xxl\@sm{padding-top:var(--space-xxl);padding-bottom:var(--space-xxl)}.padding-y-xxxl\@sm{padding-top:var(--space-xxxl);padding-bottom:var(--space-xxxl)}.padding-y-xxxxl\@sm{padding-top:var(--space-xxxxl);padding-bottom:var(--space-xxxxl)}.padding-y-0\@sm{padding-top:0;padding-bottom:0}.padding-y-component\@sm{padding-top:var(--component-padding);padding-bottom:var(--component-padding)}.text-center\@sm{text-align:center}.text-left\@sm{text-align:left}.text-right\@sm{text-align:right}.text-justify\@sm{text-align:justify}.text-xs\@sm{font-size:var(--text-xs,.6875rem)}.text-sm\@sm{font-size:var(--text-sm,.75rem)}.text-base\@sm{font-size:var(--text-unit,1rem)}.text-md\@sm{font-size:var(--text-md,1.125rem)}.text-lg\@sm{font-size:var(--text-lg,1.375rem)}.text-xl\@sm{font-size:var(--text-xl,1.75rem)}.text-xxl\@sm{font-size:var(--text-xxl,2rem)}.text-xxxl\@sm{font-size:var(--text-xxxl,2.5rem)}.text-xxxxl\@sm{font-size:var(--text-xxxxl,3rem)}.column-count-1\@sm{-moz-column-count:1;column-count:1}.column-count-2\@sm{-moz-column-count:2;column-count:2}.column-count-3\@sm{-moz-column-count:3;column-count:3}.column-count-4\@sm{-moz-column-count:4;column-count:4}.width-xxxxs\@sm{width:var(--size-xxxxs,.25rem)}.width-xxxs\@sm{width:var(--size-xxxs,.5rem)}.width-xxs\@sm{width:var(--size-xxs,.75rem)}.width-xs\@sm{width:var(--size-xs,1rem)}.width-sm\@sm{width:var(--size-sm,1.5rem)}.width-md\@sm{width:var(--size-md,2rem)}.width-lg\@sm{width:var(--size-lg,3rem)}.width-xl\@sm{width:var(--size-xl,4rem)}.width-xxl\@sm{width:var(--size-xxl,6rem)}.width-xxxl\@sm{width:var(--size-xxxl,8rem)}.width-xxxxl\@sm{width:var(--size-xxxxl,16rem)}.width-0\@sm{width:0}.width-10\%\@sm{width:10%}.width-20\%\@sm{width:20%}.width-25\%\@sm{width:25%}.width-30\%\@sm{width:30%}.width-33\%\@sm{width: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}.width-inherit\@sm{width:inherit}.height-xxxxs\@sm{height:var(--size-xxxxs,.25rem)}.height-xxxs\@sm{height:var(--size-xxxs,.5rem)}.height-xxs\@sm{height:var(--size-xxs,.75rem)}.height-xs\@sm{height:var(--size-xs,1rem)}.height-sm\@sm{height:var(--size-sm,1.5rem)}.height-md\@sm{height:var(--size-md,2rem)}.height-lg\@sm{height:var(--size-lg,3rem)}.height-xl\@sm{height:var(--size-xl,4rem)}.height-xxl\@sm{height:var(--size-xxl,6rem)}.height-xxxl\@sm{height:var(--size-xxxl,8rem)}.height-xxxxl\@sm{height:var(--size-xxxxl,16rem)}.height-0\@sm{height:0}.height-10\%\@sm{height:10%}.height-20\%\@sm{height:20%}.height-25\%\@sm{height:25%}.height-30\%\@sm{height:30%}.height-33\%\@sm{height: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}.height-inherit\@sm{height:inherit}.max-width-xxxxxs\@sm{max-width:var(--max-width-xxxxxs)}.max-width-xxxxs\@sm{max-width:var(--max-width-xxxxs)}.max-width-xxxs\@sm{max-width:var(--max-width-xxxs)}.max-width-xxs\@sm{max-width:var(--max-width-xxs)}.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-xxl\@sm{max-width:var(--max-width-xxl)}.max-width-xxxl\@sm{max-width:var(--max-width-xxxl)}.max-width-xxxxl\@sm{max-width:var(--max-width-xxxxl)}.max-width-100\%\@sm{max-width:100%}.max-width-none\@sm{max-width:none}.position-relative\@sm{position:relative}.position-absolute\@sm{position:absolute}.position-fixed\@sm{position:fixed}.position-sticky\@sm{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-xxxxs\@sm{top:var(--space-xxxxs)}.top-xxxs\@sm{top:var(--space-xxxs)}.top-xxs\@sm{top:var(--space-xxs)}.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-xxl\@sm{top:var(--space-xxl)}.top-xxxl\@sm{top:var(--space-xxxl)}.top-xxxxl\@sm{top:var(--space-xxxxl)}.bottom-0\@sm{bottom:0}.bottom-50\%\@sm{bottom:50%}.bottom-xxxxs\@sm{bottom:var(--space-xxxxs)}.bottom-xxxs\@sm{bottom:var(--space-xxxs)}.bottom-xxs\@sm{bottom:var(--space-xxs)}.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-xxl\@sm{bottom:var(--space-xxl)}.bottom-xxxl\@sm{bottom:var(--space-xxxl)}.bottom-xxxxl\@sm{bottom:var(--space-xxxxl)}.right-0\@sm{right:0}.right-50\%\@sm{right:50%}.right-xxxxs\@sm{right:var(--space-xxxxs)}.right-xxxs\@sm{right:var(--space-xxxs)}.right-xxs\@sm{right:var(--space-xxs)}.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-xxl\@sm{right:var(--space-xxl)}.right-xxxl\@sm{right:var(--space-xxxl)}.right-xxxxl\@sm{right:var(--space-xxxxl)}.left-0\@sm{left:0}.left-50\%\@sm{left:50%}.left-xxxxs\@sm{left:var(--space-xxxxs)}.left-xxxs\@sm{left:var(--space-xxxs)}.left-xxs\@sm{left:var(--space-xxs)}.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-xxl\@sm{left:var(--space-xxl)}.left-xxxl\@sm{left:var(--space-xxxl)}.left-xxxxl\@sm{left:var(--space-xxxxl)}.overflow-hidden\@sm{overflow:hidden}.overflow-auto\@sm{overflow:auto}.momentum-scrolling\@sm{-webkit-overflow-scrolling:touch}.overscroll-contain\@sm{overscroll-behavior:contain}.visible\@sm{visibility:visible}.invisible\@sm{visibility:hidden}}@media not all and (min-width:48rem){.display\@sm{display:none!important}}@media (min-width:64rem){.flex\@md{display:flex}.inline-flex\@md{display:inline-flex}.flex-wrap\@md{flex-wrap:wrap}.flex-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-start\@md{justify-content:flex-start}.justify-end\@md{justify-content:flex-end}.justify-center\@md{justify-content:center}.justify-between\@md{justify-content:space-between}.items-center\@md{align-items:center}.items-start\@md{align-items:flex-start}.items-end\@md{align-items:flex-end}.items-baseline\@md{align-items:baseline}.items-stretch\@md{align-items:stretch}.content-start\@md{align-content:start}.content-end\@md{align-content:end}.content-center\@md{align-content:center}.content-between\@md{align-content:space-between}.order-1\@md{order:1}.order-2\@md{order:2}.order-3\@md{order:3}.block\@md{display:block}.inline-block\@md{display:inline-block}.inline\@md{display:inline}.contents\@md{display:contents}.css-grid\@md{display:grid}.css-inline-grid\@md{display:inline-grid}.hide\@md{display:none!important}.margin-xxxxs\@md{margin:var(--space-xxxxs)}.margin-xxxs\@md{margin:var(--space-xxxs)}.margin-xxs\@md{margin:var(--space-xxs)}.margin-xs\@md{margin:var(--space-xs)}.margin-sm\@md{margin:var(--space-sm)}.margin-md\@md{margin:var(--space-md)}.margin-lg\@md{margin:var(--space-lg)}.margin-xl\@md{margin:var(--space-xl)}.margin-xxl\@md{margin:var(--space-xxl)}.margin-xxxl\@md{margin:var(--space-xxxl)}.margin-xxxxl\@md{margin:var(--space-xxxxl)}.margin-auto\@md{margin:auto}.margin-0\@md{margin:0}.margin-top-xxxxs\@md{margin-top:var(--space-xxxxs)}.margin-top-xxxs\@md{margin-top:var(--space-xxxs)}.margin-top-xxs\@md{margin-top:var(--space-xxs)}.margin-top-xs\@md{margin-top:var(--space-xs)}.margin-top-sm\@md{margin-top:var(--space-sm)}.margin-top-md\@md{margin-top:var(--space-md)}.margin-top-lg\@md{margin-top:var(--space-lg)}.margin-top-xl\@md{margin-top:var(--space-xl)}.margin-top-xxl\@md{margin-top:var(--space-xxl)}.margin-top-xxxl\@md{margin-top:var(--space-xxxl)}.margin-top-xxxxl\@md{margin-top:var(--space-xxxxl)}.margin-top-auto\@md{margin-top:auto}.margin-top-0\@md{margin-top:0}.margin-bottom-xxxxs\@md{margin-bottom:var(--space-xxxxs)}.margin-bottom-xxxs\@md{margin-bottom:var(--space-xxxs)}.margin-bottom-xxs\@md{margin-bottom:var(--space-xxs)}.margin-bottom-xs\@md{margin-bottom:var(--space-xs)}.margin-bottom-sm\@md{margin-bottom:var(--space-sm)}.margin-bottom-md\@md{margin-bottom:var(--space-md)}.margin-bottom-lg\@md{margin-bottom:var(--space-lg)}.margin-bottom-xl\@md{margin-bottom:var(--space-xl)}.margin-bottom-xxl\@md{margin-bottom:var(--space-xxl)}.margin-bottom-xxxl\@md{margin-bottom:var(--space-xxxl)}.margin-bottom-xxxxl\@md{margin-bottom:var(--space-xxxxl)}.margin-bottom-auto\@md{margin-bottom:auto}.margin-bottom-0\@md{margin-bottom:0}.margin-right-xxxxs\@md{margin-right:var(--space-xxxxs)}.margin-right-xxxs\@md{margin-right:var(--space-xxxs)}.margin-right-xxs\@md{margin-right:var(--space-xxs)}.margin-right-xs\@md{margin-right:var(--space-xs)}.margin-right-sm\@md{margin-right:var(--space-sm)}.margin-right-md\@md{margin-right:var(--space-md)}.margin-right-lg\@md{margin-right:var(--space-lg)}.margin-right-xl\@md{margin-right:var(--space-xl)}.margin-right-xxl\@md{margin-right:var(--space-xxl)}.margin-right-xxxl\@md{margin-right:var(--space-xxxl)}.margin-right-xxxxl\@md{margin-right:var(--space-xxxxl)}.margin-right-auto\@md{margin-right:auto}.margin-right-0\@md{margin-right:0}.margin-left-xxxxs\@md{margin-left:var(--space-xxxxs)}.margin-left-xxxs\@md{margin-left:var(--space-xxxs)}.margin-left-xxs\@md{margin-left:var(--space-xxs)}.margin-left-xs\@md{margin-left:var(--space-xs)}.margin-left-sm\@md{margin-left:var(--space-sm)}.margin-left-md\@md{margin-left:var(--space-md)}.margin-left-lg\@md{margin-left:var(--space-lg)}.margin-left-xl\@md{margin-left:var(--space-xl)}.margin-left-xxl\@md{margin-left:var(--space-xxl)}.margin-left-xxxl\@md{margin-left:var(--space-xxxl)}.margin-left-xxxxl\@md{margin-left:var(--space-xxxxl)}.margin-left-auto\@md{margin-left:auto}.margin-left-0\@md{margin-left:0}.margin-x-xxxxs\@md{margin-left:var(--space-xxxxs);margin-right:var(--space-xxxxs)}.margin-x-xxxs\@md{margin-left:var(--space-xxxs);margin-right:var(--space-xxxs)}.margin-x-xxs\@md{margin-left:var(--space-xxs);margin-right:var(--space-xxs)}.margin-x-xs\@md{margin-left:var(--space-xs);margin-right:var(--space-xs)}.margin-x-sm\@md{margin-left:var(--space-sm);margin-right:var(--space-sm)}.margin-x-md\@md{margin-left:var(--space-md);margin-right:var(--space-md)}.margin-x-lg\@md{margin-left:var(--space-lg);margin-right:var(--space-lg)}.margin-x-xl\@md{margin-left:var(--space-xl);margin-right:var(--space-xl)}.margin-x-xxl\@md{margin-left:var(--space-xxl);margin-right:var(--space-xxl)}.margin-x-xxxl\@md{margin-left:var(--space-xxxl);margin-right:var(--space-xxxl)}.margin-x-xxxxl\@md{margin-left:var(--space-xxxxl);margin-right:var(--space-xxxxl)}.margin-x-auto\@md{margin-left:auto;margin-right:auto}.margin-x-0\@md{margin-left:0;margin-right:0}.margin-y-xxxxs\@md{margin-top:var(--space-xxxxs);margin-bottom:var(--space-xxxxs)}.margin-y-xxxs\@md{margin-top:var(--space-xxxs);margin-bottom:var(--space-xxxs)}.margin-y-xxs\@md{margin-top:var(--space-xxs);margin-bottom:var(--space-xxs)}.margin-y-xs\@md{margin-top:var(--space-xs);margin-bottom:var(--space-xs)}.margin-y-sm\@md{margin-top:var(--space-sm);margin-bottom:var(--space-sm)}.margin-y-md\@md{margin-top:var(--space-md);margin-bottom:var(--space-md)}.margin-y-lg\@md{margin-top:var(--space-lg);margin-bottom:var(--space-lg)}.margin-y-xl\@md{margin-top:var(--space-xl);margin-bottom:var(--space-xl)}.margin-y-xxl\@md{margin-top:var(--space-xxl);margin-bottom:var(--space-xxl)}.margin-y-xxxl\@md{margin-top:var(--space-xxxl);margin-bottom:var(--space-xxxl)}.margin-y-xxxxl\@md{margin-top:var(--space-xxxxl);margin-bottom:var(--space-xxxxl)}.margin-y-auto\@md{margin-top:auto;margin-bottom:auto}.margin-y-0\@md{margin-top:0;margin-bottom:0}.padding-xxxxs\@md{padding:var(--space-xxxxs)}.padding-xxxs\@md{padding:var(--space-xxxs)}.padding-xxs\@md{padding:var(--space-xxs)}.padding-xs\@md{padding:var(--space-xs)}.padding-sm\@md{padding:var(--space-sm)}.padding-md\@md{padding:var(--space-md)}.padding-lg\@md{padding:var(--space-lg)}.padding-xl\@md{padding:var(--space-xl)}.padding-xxl\@md{padding:var(--space-xxl)}.padding-xxxl\@md{padding:var(--space-xxxl)}.padding-xxxxl\@md{padding:var(--space-xxxxl)}.padding-0\@md{padding:0}.padding-component\@md{padding:var(--component-padding)}.padding-top-xxxxs\@md{padding-top:var(--space-xxxxs)}.padding-top-xxxs\@md{padding-top:var(--space-xxxs)}.padding-top-xxs\@md{padding-top:var(--space-xxs)}.padding-top-xs\@md{padding-top:var(--space-xs)}.padding-top-sm\@md{padding-top:var(--space-sm)}.padding-top-md\@md{padding-top:var(--space-md)}.padding-top-lg\@md{padding-top:var(--space-lg)}.padding-top-xl\@md{padding-top:var(--space-xl)}.padding-top-xxl\@md{padding-top:var(--space-xxl)}.padding-top-xxxl\@md{padding-top:var(--space-xxxl)}.padding-top-xxxxl\@md{padding-top:var(--space-xxxxl)}.padding-top-0\@md{padding-top:0}.padding-top-component\@md{padding-top:var(--component-padding)}.padding-bottom-xxxxs\@md{padding-bottom:var(--space-xxxxs)}.padding-bottom-xxxs\@md{padding-bottom:var(--space-xxxs)}.padding-bottom-xxs\@md{padding-bottom:var(--space-xxs)}.padding-bottom-xs\@md{padding-bottom:var(--space-xs)}.padding-bottom-sm\@md{padding-bottom:var(--space-sm)}.padding-bottom-md\@md{padding-bottom:var(--space-md)}.padding-bottom-lg\@md{padding-bottom:var(--space-lg)}.padding-bottom-xl\@md{padding-bottom:var(--space-xl)}.padding-bottom-xxl\@md{padding-bottom:var(--space-xxl)}.padding-bottom-xxxl\@md{padding-bottom:var(--space-xxxl)}.padding-bottom-xxxxl\@md{padding-bottom:var(--space-xxxxl)}.padding-bottom-0\@md{padding-bottom:0}.padding-bottom-component\@md{padding-bottom:var(--component-padding)}.padding-right-xxxxs\@md{padding-right:var(--space-xxxxs)}.padding-right-xxxs\@md{padding-right:var(--space-xxxs)}.padding-right-xxs\@md{padding-right:var(--space-xxs)}.padding-right-xs\@md{padding-right:var(--space-xs)}.padding-right-sm\@md{padding-right:var(--space-sm)}.padding-right-md\@md{padding-right:var(--space-md)}.padding-right-lg\@md{padding-right:var(--space-lg)}.padding-right-xl\@md{padding-right:var(--space-xl)}.padding-right-xxl\@md{padding-right:var(--space-xxl)}.padding-right-xxxl\@md{padding-right:var(--space-xxxl)}.padding-right-xxxxl\@md{padding-right:var(--space-xxxxl)}.padding-right-0\@md{padding-right:0}.padding-right-component\@md{padding-right:var(--component-padding)}.padding-left-xxxxs\@md{padding-left:var(--space-xxxxs)}.padding-left-xxxs\@md{padding-left:var(--space-xxxs)}.padding-left-xxs\@md{padding-left:var(--space-xxs)}.padding-left-xs\@md{padding-left:var(--space-xs)}.padding-left-sm\@md{padding-left:var(--space-sm)}.padding-left-md\@md{padding-left:var(--space-md)}.padding-left-lg\@md{padding-left:var(--space-lg)}.padding-left-xl\@md{padding-left:var(--space-xl)}.padding-left-xxl\@md{padding-left:var(--space-xxl)}.padding-left-xxxl\@md{padding-left:var(--space-xxxl)}.padding-left-xxxxl\@md{padding-left:var(--space-xxxxl)}.padding-left-0\@md{padding-left:0}.padding-left-component\@md{padding-left:var(--component-padding)}.padding-x-xxxxs\@md{padding-left:var(--space-xxxxs);padding-right:var(--space-xxxxs)}.padding-x-xxxs\@md{padding-left:var(--space-xxxs);padding-right:var(--space-xxxs)}.padding-x-xxs\@md{padding-left:var(--space-xxs);padding-right:var(--space-xxs)}.padding-x-xs\@md{padding-left:var(--space-xs);padding-right:var(--space-xs)}.padding-x-sm\@md{padding-left:var(--space-sm);padding-right:var(--space-sm)}.padding-x-md\@md{padding-left:var(--space-md);padding-right:var(--space-md)}.padding-x-lg\@md{padding-left:var(--space-lg);padding-right:var(--space-lg)}.padding-x-xl\@md{padding-left:var(--space-xl);padding-right:var(--space-xl)}.padding-x-xxl\@md{padding-left:var(--space-xxl);padding-right:var(--space-xxl)}.padding-x-xxxl\@md{padding-left:var(--space-xxxl);padding-right:var(--space-xxxl)}.padding-x-xxxxl\@md{padding-left:var(--space-xxxxl);padding-right:var(--space-xxxxl)}.padding-x-0\@md{padding-left:0;padding-right:0}.padding-x-component\@md{padding-left:var(--component-padding);padding-right:var(--component-padding)}.padding-y-xxxxs\@md{padding-top:var(--space-xxxxs);padding-bottom:var(--space-xxxxs)}.padding-y-xxxs\@md{padding-top:var(--space-xxxs);padding-bottom:var(--space-xxxs)}.padding-y-xxs\@md{padding-top:var(--space-xxs);padding-bottom:var(--space-xxs)}.padding-y-xs\@md{padding-top:var(--space-xs);padding-bottom:var(--space-xs)}.padding-y-sm\@md{padding-top:var(--space-sm);padding-bottom:var(--space-sm)}.padding-y-md\@md{padding-top:var(--space-md);padding-bottom:var(--space-md)}.padding-y-lg\@md{padding-top:var(--space-lg);padding-bottom:var(--space-lg)}.padding-y-xl\@md{padding-top:var(--space-xl);padding-bottom:var(--space-xl)}.padding-y-xxl\@md{padding-top:var(--space-xxl);padding-bottom:var(--space-xxl)}.padding-y-xxxl\@md{padding-top:var(--space-xxxl);padding-bottom:var(--space-xxxl)}.padding-y-xxxxl\@md{padding-top:var(--space-xxxxl);padding-bottom:var(--space-xxxxl)}.padding-y-0\@md{padding-top:0;padding-bottom:0}.padding-y-component\@md{padding-top:var(--component-padding);padding-bottom:var(--component-padding)}.text-center\@md{text-align:center}.text-left\@md{text-align:left}.text-right\@md{text-align:right}.text-justify\@md{text-align:justify}.text-xs\@md{font-size:var(--text-xs,.6875rem)}.text-sm\@md{font-size:var(--text-sm,.75rem)}.text-base\@md{font-size:var(--text-unit,1rem)}.text-md\@md{font-size:var(--text-md,1.125rem)}.text-lg\@md{font-size:var(--text-lg,1.375rem)}.text-xl\@md{font-size:var(--text-xl,1.75rem)}.text-xxl\@md{font-size:var(--text-xxl,2rem)}.text-xxxl\@md{font-size:var(--text-xxxl,2.5rem)}.text-xxxxl\@md{font-size:var(--text-xxxxl,3rem)}.column-count-1\@md{-moz-column-count:1;column-count:1}.column-count-2\@md{-moz-column-count:2;column-count:2}.column-count-3\@md{-moz-column-count:3;column-count:3}.column-count-4\@md{-moz-column-count:4;column-count:4}.width-xxxxs\@md{width:var(--size-xxxxs,.25rem)}.width-xxxs\@md{width:var(--size-xxxs,.5rem)}.width-xxs\@md{width:var(--size-xxs,.75rem)}.width-xs\@md{width:var(--size-xs,1rem)}.width-sm\@md{width:var(--size-sm,1.5rem)}.width-md\@md{width:var(--size-md,2rem)}.width-lg\@md{width:var(--size-lg,3rem)}.width-xl\@md{width:var(--size-xl,4rem)}.width-xxl\@md{width:var(--size-xxl,6rem)}.width-xxxl\@md{width:var(--size-xxxl,8rem)}.width-xxxxl\@md{width:var(--size-xxxxl,16rem)}.width-0\@md{width:0}.width-10\%\@md{width:10%}.width-20\%\@md{width:20%}.width-25\%\@md{width:25%}.width-30\%\@md{width:30%}.width-33\%\@md{width: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}.width-inherit\@md{width:inherit}.height-xxxxs\@md{height:var(--size-xxxxs,.25rem)}.height-xxxs\@md{height:var(--size-xxxs,.5rem)}.height-xxs\@md{height:var(--size-xxs,.75rem)}.height-xs\@md{height:var(--size-xs,1rem)}.height-sm\@md{height:var(--size-sm,1.5rem)}.height-md\@md{height:var(--size-md,2rem)}.height-lg\@md{height:var(--size-lg,3rem)}.height-xl\@md{height:var(--size-xl,4rem)}.height-xxl\@md{height:var(--size-xxl,6rem)}.height-xxxl\@md{height:var(--size-xxxl,8rem)}.height-xxxxl\@md{height:var(--size-xxxxl,16rem)}.height-0\@md{height:0}.height-10\%\@md{height:10%}.height-20\%\@md{height:20%}.height-25\%\@md{height:25%}.height-30\%\@md{height:30%}.height-33\%\@md{height: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}.height-inherit\@md{height:inherit}.max-width-xxxxxs\@md{max-width:var(--max-width-xxxxxs)}.max-width-xxxxs\@md{max-width:var(--max-width-xxxxs)}.max-width-xxxs\@md{max-width:var(--max-width-xxxs)}.max-width-xxs\@md{max-width:var(--max-width-xxs)}.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-xxl\@md{max-width:var(--max-width-xxl)}.max-width-xxxl\@md{max-width:var(--max-width-xxxl)}.max-width-xxxxl\@md{max-width:var(--max-width-xxxxl)}.max-width-100\%\@md{max-width:100%}.max-width-none\@md{max-width:none}.position-relative\@md{position:relative}.position-absolute\@md{position:absolute}.position-fixed\@md{position:fixed}.position-sticky\@md{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-xxxxs\@md{top:var(--space-xxxxs)}.top-xxxs\@md{top:var(--space-xxxs)}.top-xxs\@md{top:var(--space-xxs)}.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-xxl\@md{top:var(--space-xxl)}.top-xxxl\@md{top:var(--space-xxxl)}.top-xxxxl\@md{top:var(--space-xxxxl)}.bottom-0\@md{bottom:0}.bottom-50\%\@md{bottom:50%}.bottom-xxxxs\@md{bottom:var(--space-xxxxs)}.bottom-xxxs\@md{bottom:var(--space-xxxs)}.bottom-xxs\@md{bottom:var(--space-xxs)}.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-xxl\@md{bottom:var(--space-xxl)}.bottom-xxxl\@md{bottom:var(--space-xxxl)}.bottom-xxxxl\@md{bottom:var(--space-xxxxl)}.right-0\@md{right:0}.right-50\%\@md{right:50%}.right-xxxxs\@md{right:var(--space-xxxxs)}.right-xxxs\@md{right:var(--space-xxxs)}.right-xxs\@md{right:var(--space-xxs)}.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-xxl\@md{right:var(--space-xxl)}.right-xxxl\@md{right:var(--space-xxxl)}.right-xxxxl\@md{right:var(--space-xxxxl)}.left-0\@md{left:0}.left-50\%\@md{left:50%}.left-xxxxs\@md{left:var(--space-xxxxs)}.left-xxxs\@md{left:var(--space-xxxs)}.left-xxs\@md{left:var(--space-xxs)}.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-xxl\@md{left:var(--space-xxl)}.left-xxxl\@md{left:var(--space-xxxl)}.left-xxxxl\@md{left:var(--space-xxxxl)}.overflow-hidden\@md{overflow:hidden}.overflow-auto\@md{overflow:auto}.momentum-scrolling\@md{-webkit-overflow-scrolling:touch}.overscroll-contain\@md{overscroll-behavior:contain}.visible\@md{visibility:visible}.invisible\@md{visibility:hidden}}@media not all and (min-width:64rem){.display\@md{display:none!important}}@media (min-width:80rem){.flex\@lg{display:flex}.inline-flex\@lg{display:inline-flex}.flex-wrap\@lg{flex-wrap:wrap}.flex-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-start\@lg{justify-content:flex-start}.justify-end\@lg{justify-content:flex-end}.justify-center\@lg{justify-content:center}.justify-between\@lg{justify-content:space-between}.items-center\@lg{align-items:center}.items-start\@lg{align-items:flex-start}.items-end\@lg{align-items:flex-end}.items-baseline\@lg{align-items:baseline}.items-stretch\@lg{align-items:stretch}.content-start\@lg{align-content:start}.content-end\@lg{align-content:end}.content-center\@lg{align-content:center}.content-between\@lg{align-content:space-between}.order-1\@lg{order:1}.order-2\@lg{order:2}.order-3\@lg{order:3}.block\@lg{display:block}.inline-block\@lg{display:inline-block}.inline\@lg{display:inline}.contents\@lg{display:contents}.css-grid\@lg{display:grid}.css-inline-grid\@lg{display:inline-grid}.hide\@lg{display:none!important}.margin-xxxxs\@lg{margin:var(--space-xxxxs)}.margin-xxxs\@lg{margin:var(--space-xxxs)}.margin-xxs\@lg{margin:var(--space-xxs)}.margin-xs\@lg{margin:var(--space-xs)}.margin-sm\@lg{margin:var(--space-sm)}.margin-md\@lg{margin:var(--space-md)}.margin-lg\@lg{margin:var(--space-lg)}.margin-xl\@lg{margin:var(--space-xl)}.margin-xxl\@lg{margin:var(--space-xxl)}.margin-xxxl\@lg{margin:var(--space-xxxl)}.margin-xxxxl\@lg{margin:var(--space-xxxxl)}.margin-auto\@lg{margin:auto}.margin-0\@lg{margin:0}.margin-top-xxxxs\@lg{margin-top:var(--space-xxxxs)}.margin-top-xxxs\@lg{margin-top:var(--space-xxxs)}.margin-top-xxs\@lg{margin-top:var(--space-xxs)}.margin-top-xs\@lg{margin-top:var(--space-xs)}.margin-top-sm\@lg{margin-top:var(--space-sm)}.margin-top-md\@lg{margin-top:var(--space-md)}.margin-top-lg\@lg{margin-top:var(--space-lg)}.margin-top-xl\@lg{margin-top:var(--space-xl)}.margin-top-xxl\@lg{margin-top:var(--space-xxl)}.margin-top-xxxl\@lg{margin-top:var(--space-xxxl)}.margin-top-xxxxl\@lg{margin-top:var(--space-xxxxl)}.margin-top-auto\@lg{margin-top:auto}.margin-top-0\@lg{margin-top:0}.margin-bottom-xxxxs\@lg{margin-bottom:var(--space-xxxxs)}.margin-bottom-xxxs\@lg{margin-bottom:var(--space-xxxs)}.margin-bottom-xxs\@lg{margin-bottom:var(--space-xxs)}.margin-bottom-xs\@lg{margin-bottom:var(--space-xs)}.margin-bottom-sm\@lg{margin-bottom:var(--space-sm)}.margin-bottom-md\@lg{margin-bottom:var(--space-md)}.margin-bottom-lg\@lg{margin-bottom:var(--space-lg)}.margin-bottom-xl\@lg{margin-bottom:var(--space-xl)}.margin-bottom-xxl\@lg{margin-bottom:var(--space-xxl)}.margin-bottom-xxxl\@lg{margin-bottom:var(--space-xxxl)}.margin-bottom-xxxxl\@lg{margin-bottom:var(--space-xxxxl)}.margin-bottom-auto\@lg{margin-bottom:auto}.margin-bottom-0\@lg{margin-bottom:0}.margin-right-xxxxs\@lg{margin-right:var(--space-xxxxs)}.margin-right-xxxs\@lg{margin-right:var(--space-xxxs)}.margin-right-xxs\@lg{margin-right:var(--space-xxs)}.margin-right-xs\@lg{margin-right:var(--space-xs)}.margin-right-sm\@lg{margin-right:var(--space-sm)}.margin-right-md\@lg{margin-right:var(--space-md)}.margin-right-lg\@lg{margin-right:var(--space-lg)}.margin-right-xl\@lg{margin-right:var(--space-xl)}.margin-right-xxl\@lg{margin-right:var(--space-xxl)}.margin-right-xxxl\@lg{margin-right:var(--space-xxxl)}.margin-right-xxxxl\@lg{margin-right:var(--space-xxxxl)}.margin-right-auto\@lg{margin-right:auto}.margin-right-0\@lg{margin-right:0}.margin-left-xxxxs\@lg{margin-left:var(--space-xxxxs)}.margin-left-xxxs\@lg{margin-left:var(--space-xxxs)}.margin-left-xxs\@lg{margin-left:var(--space-xxs)}.margin-left-xs\@lg{margin-left:var(--space-xs)}.margin-left-sm\@lg{margin-left:var(--space-sm)}.margin-left-md\@lg{margin-left:var(--space-md)}.margin-left-lg\@lg{margin-left:var(--space-lg)}.margin-left-xl\@lg{margin-left:var(--space-xl)}.margin-left-xxl\@lg{margin-left:var(--space-xxl)}.margin-left-xxxl\@lg{margin-left:var(--space-xxxl)}.margin-left-xxxxl\@lg{margin-left:var(--space-xxxxl)}.margin-left-auto\@lg{margin-left:auto}.margin-left-0\@lg{margin-left:0}.margin-x-xxxxs\@lg{margin-left:var(--space-xxxxs);margin-right:var(--space-xxxxs)}.margin-x-xxxs\@lg{margin-left:var(--space-xxxs);margin-right:var(--space-xxxs)}.margin-x-xxs\@lg{margin-left:var(--space-xxs);margin-right:var(--space-xxs)}.margin-x-xs\@lg{margin-left:var(--space-xs);margin-right:var(--space-xs)}.margin-x-sm\@lg{margin-left:var(--space-sm);margin-right:var(--space-sm)}.margin-x-md\@lg{margin-left:var(--space-md);margin-right:var(--space-md)}.margin-x-lg\@lg{margin-left:var(--space-lg);margin-right:var(--space-lg)}.margin-x-xl\@lg{margin-left:var(--space-xl);margin-right:var(--space-xl)}.margin-x-xxl\@lg{margin-left:var(--space-xxl);margin-right:var(--space-xxl)}.margin-x-xxxl\@lg{margin-left:var(--space-xxxl);margin-right:var(--space-xxxl)}.margin-x-xxxxl\@lg{margin-left:var(--space-xxxxl);margin-right:var(--space-xxxxl)}.margin-x-auto\@lg{margin-left:auto;margin-right:auto}.margin-x-0\@lg{margin-left:0;margin-right:0}.margin-y-xxxxs\@lg{margin-top:var(--space-xxxxs);margin-bottom:var(--space-xxxxs)}.margin-y-xxxs\@lg{margin-top:var(--space-xxxs);margin-bottom:var(--space-xxxs)}.margin-y-xxs\@lg{margin-top:var(--space-xxs);margin-bottom:var(--space-xxs)}.margin-y-xs\@lg{margin-top:var(--space-xs);margin-bottom:var(--space-xs)}.margin-y-sm\@lg{margin-top:var(--space-sm);margin-bottom:var(--space-sm)}.margin-y-md\@lg{margin-top:var(--space-md);margin-bottom:var(--space-md)}.margin-y-lg\@lg{margin-top:var(--space-lg);margin-bottom:var(--space-lg)}.margin-y-xl\@lg{margin-top:var(--space-xl);margin-bottom:var(--space-xl)}.margin-y-xxl\@lg{margin-top:var(--space-xxl);margin-bottom:var(--space-xxl)}.margin-y-xxxl\@lg{margin-top:var(--space-xxxl);margin-bottom:var(--space-xxxl)}.margin-y-xxxxl\@lg{margin-top:var(--space-xxxxl);margin-bottom:var(--space-xxxxl)}.margin-y-auto\@lg{margin-top:auto;margin-bottom:auto}.margin-y-0\@lg{margin-top:0;margin-bottom:0}.padding-xxxxs\@lg{padding:var(--space-xxxxs)}.padding-xxxs\@lg{padding:var(--space-xxxs)}.padding-xxs\@lg{padding:var(--space-xxs)}.padding-xs\@lg{padding:var(--space-xs)}.padding-sm\@lg{padding:var(--space-sm)}.padding-md\@lg{padding:var(--space-md)}.padding-lg\@lg{padding:var(--space-lg)}.padding-xl\@lg{padding:var(--space-xl)}.padding-xxl\@lg{padding:var(--space-xxl)}.padding-xxxl\@lg{padding:var(--space-xxxl)}.padding-xxxxl\@lg{padding:var(--space-xxxxl)}.padding-0\@lg{padding:0}.padding-component\@lg{padding:var(--component-padding)}.padding-top-xxxxs\@lg{padding-top:var(--space-xxxxs)}.padding-top-xxxs\@lg{padding-top:var(--space-xxxs)}.padding-top-xxs\@lg{padding-top:var(--space-xxs)}.padding-top-xs\@lg{padding-top:var(--space-xs)}.padding-top-sm\@lg{padding-top:var(--space-sm)}.padding-top-md\@lg{padding-top:var(--space-md)}.padding-top-lg\@lg{padding-top:var(--space-lg)}.padding-top-xl\@lg{padding-top:var(--space-xl)}.padding-top-xxl\@lg{padding-top:var(--space-xxl)}.padding-top-xxxl\@lg{padding-top:var(--space-xxxl)}.padding-top-xxxxl\@lg{padding-top:var(--space-xxxxl)}.padding-top-0\@lg{padding-top:0}.padding-top-component\@lg{padding-top:var(--component-padding)}.padding-bottom-xxxxs\@lg{padding-bottom:var(--space-xxxxs)}.padding-bottom-xxxs\@lg{padding-bottom:var(--space-xxxs)}.padding-bottom-xxs\@lg{padding-bottom:var(--space-xxs)}.padding-bottom-xs\@lg{padding-bottom:var(--space-xs)}.padding-bottom-sm\@lg{padding-bottom:var(--space-sm)}.padding-bottom-md\@lg{padding-bottom:var(--space-md)}.padding-bottom-lg\@lg{padding-bottom:var(--space-lg)}.padding-bottom-xl\@lg{padding-bottom:var(--space-xl)}.padding-bottom-xxl\@lg{padding-bottom:var(--space-xxl)}.padding-bottom-xxxl\@lg{padding-bottom:var(--space-xxxl)}.padding-bottom-xxxxl\@lg{padding-bottom:var(--space-xxxxl)}.padding-bottom-0\@lg{padding-bottom:0}.padding-bottom-component\@lg{padding-bottom:var(--component-padding)}.padding-right-xxxxs\@lg{padding-right:var(--space-xxxxs)}.padding-right-xxxs\@lg{padding-right:var(--space-xxxs)}.padding-right-xxs\@lg{padding-right:var(--space-xxs)}.padding-right-xs\@lg{padding-right:var(--space-xs)}.padding-right-sm\@lg{padding-right:var(--space-sm)}.padding-right-md\@lg{padding-right:var(--space-md)}.padding-right-lg\@lg{padding-right:var(--space-lg)}.padding-right-xl\@lg{padding-right:var(--space-xl)}.padding-right-xxl\@lg{padding-right:var(--space-xxl)}.padding-right-xxxl\@lg{padding-right:var(--space-xxxl)}.padding-right-xxxxl\@lg{padding-right:var(--space-xxxxl)}.padding-right-0\@lg{padding-right:0}.padding-right-component\@lg{padding-right:var(--component-padding)}.padding-left-xxxxs\@lg{padding-left:var(--space-xxxxs)}.padding-left-xxxs\@lg{padding-left:var(--space-xxxs)}.padding-left-xxs\@lg{padding-left:var(--space-xxs)}.padding-left-xs\@lg{padding-left:var(--space-xs)}.padding-left-sm\@lg{padding-left:var(--space-sm)}.padding-left-md\@lg{padding-left:var(--space-md)}.padding-left-lg\@lg{padding-left:var(--space-lg)}.padding-left-xl\@lg{padding-left:var(--space-xl)}.padding-left-xxl\@lg{padding-left:var(--space-xxl)}.padding-left-xxxl\@lg{padding-left:var(--space-xxxl)}.padding-left-xxxxl\@lg{padding-left:var(--space-xxxxl)}.padding-left-0\@lg{padding-left:0}.padding-left-component\@lg{padding-left:var(--component-padding)}.padding-x-xxxxs\@lg{padding-left:var(--space-xxxxs);padding-right:var(--space-xxxxs)}.padding-x-xxxs\@lg{padding-left:var(--space-xxxs);padding-right:var(--space-xxxs)}.padding-x-xxs\@lg{padding-left:var(--space-xxs);padding-right:var(--space-xxs)}.padding-x-xs\@lg{padding-left:var(--space-xs);padding-right:var(--space-xs)}.padding-x-sm\@lg{padding-left:var(--space-sm);padding-right:var(--space-sm)}.padding-x-md\@lg{padding-left:var(--space-md);padding-right:var(--space-md)}.padding-x-lg\@lg{padding-left:var(--space-lg);padding-right:var(--space-lg)}.padding-x-xl\@lg{padding-left:var(--space-xl);padding-right:var(--space-xl)}.padding-x-xxl\@lg{padding-left:var(--space-xxl);padding-right:var(--space-xxl)}.padding-x-xxxl\@lg{padding-left:var(--space-xxxl);padding-right:var(--space-xxxl)}.padding-x-xxxxl\@lg{padding-left:var(--space-xxxxl);padding-right:var(--space-xxxxl)}.padding-x-0\@lg{padding-left:0;padding-right:0}.padding-x-component\@lg{padding-left:var(--component-padding);padding-right:var(--component-padding)}.padding-y-xxxxs\@lg{padding-top:var(--space-xxxxs);padding-bottom:var(--space-xxxxs)}.padding-y-xxxs\@lg{padding-top:var(--space-xxxs);padding-bottom:var(--space-xxxs)}.padding-y-xxs\@lg{padding-top:var(--space-xxs);padding-bottom:var(--space-xxs)}.padding-y-xs\@lg{padding-top:var(--space-xs);padding-bottom:var(--space-xs)}.padding-y-sm\@lg{padding-top:var(--space-sm);padding-bottom:var(--space-sm)}.padding-y-md\@lg{padding-top:var(--space-md);padding-bottom:var(--space-md)}.padding-y-lg\@lg{padding-top:var(--space-lg);padding-bottom:var(--space-lg)}.padding-y-xl\@lg{padding-top:var(--space-xl);padding-bottom:var(--space-xl)}.padding-y-xxl\@lg{padding-top:var(--space-xxl);padding-bottom:var(--space-xxl)}.padding-y-xxxl\@lg{padding-top:var(--space-xxxl);padding-bottom:var(--space-xxxl)}.padding-y-xxxxl\@lg{padding-top:var(--space-xxxxl);padding-bottom:var(--space-xxxxl)}.padding-y-0\@lg{padding-top:0;padding-bottom:0}.padding-y-component\@lg{padding-top:var(--component-padding);padding-bottom:var(--component-padding)}.text-center\@lg{text-align:center}.text-left\@lg{text-align:left}.text-right\@lg{text-align:right}.text-justify\@lg{text-align:justify}.text-xs\@lg{font-size:var(--text-xs,.6875rem)}.text-sm\@lg{font-size:var(--text-sm,.75rem)}.text-base\@lg{font-size:var(--text-unit,1rem)}.text-md\@lg{font-size:var(--text-md,1.125rem)}.text-lg\@lg{font-size:var(--text-lg,1.375rem)}.text-xl\@lg{font-size:var(--text-xl,1.75rem)}.text-xxl\@lg{font-size:var(--text-xxl,2rem)}.text-xxxl\@lg{font-size:var(--text-xxxl,2.5rem)}.text-xxxxl\@lg{font-size:var(--text-xxxxl,3rem)}.column-count-1\@lg{-moz-column-count:1;column-count:1}.column-count-2\@lg{-moz-column-count:2;column-count:2}.column-count-3\@lg{-moz-column-count:3;column-count:3}.column-count-4\@lg{-moz-column-count:4;column-count:4}.width-xxxxs\@lg{width:var(--size-xxxxs,.25rem)}.width-xxxs\@lg{width:var(--size-xxxs,.5rem)}.width-xxs\@lg{width:var(--size-xxs,.75rem)}.width-xs\@lg{width:var(--size-xs,1rem)}.width-sm\@lg{width:var(--size-sm,1.5rem)}.width-md\@lg{width:var(--size-md,2rem)}.width-lg\@lg{width:var(--size-lg,3rem)}.width-xl\@lg{width:var(--size-xl,4rem)}.width-xxl\@lg{width:var(--size-xxl,6rem)}.width-xxxl\@lg{width:var(--size-xxxl,8rem)}.width-xxxxl\@lg{width:var(--size-xxxxl,16rem)}.width-0\@lg{width:0}.width-10\%\@lg{width:10%}.width-20\%\@lg{width:20%}.width-25\%\@lg{width:25%}.width-30\%\@lg{width:30%}.width-33\%\@lg{width: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}.width-inherit\@lg{width:inherit}.height-xxxxs\@lg{height:var(--size-xxxxs,.25rem)}.height-xxxs\@lg{height:var(--size-xxxs,.5rem)}.height-xxs\@lg{height:var(--size-xxs,.75rem)}.height-xs\@lg{height:var(--size-xs,1rem)}.height-sm\@lg{height:var(--size-sm,1.5rem)}.height-md\@lg{height:var(--size-md,2rem)}.height-lg\@lg{height:var(--size-lg,3rem)}.height-xl\@lg{height:var(--size-xl,4rem)}.height-xxl\@lg{height:var(--size-xxl,6rem)}.height-xxxl\@lg{height:var(--size-xxxl,8rem)}.height-xxxxl\@lg{height:var(--size-xxxxl,16rem)}.height-0\@lg{height:0}.height-10\%\@lg{height:10%}.height-20\%\@lg{height:20%}.height-25\%\@lg{height:25%}.height-30\%\@lg{height:30%}.height-33\%\@lg{height: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}.height-inherit\@lg{height:inherit}.max-width-xxxxxs\@lg{max-width:var(--max-width-xxxxxs)}.max-width-xxxxs\@lg{max-width:var(--max-width-xxxxs)}.max-width-xxxs\@lg{max-width:var(--max-width-xxxs)}.max-width-xxs\@lg{max-width:var(--max-width-xxs)}.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-xxl\@lg{max-width:var(--max-width-xxl)}.max-width-xxxl\@lg{max-width:var(--max-width-xxxl)}.max-width-xxxxl\@lg{max-width:var(--max-width-xxxxl)}.max-width-100\%\@lg{max-width:100%}.max-width-none\@lg{max-width:none}.position-relative\@lg{position:relative}.position-absolute\@lg{position:absolute}.position-fixed\@lg{position:fixed}.position-sticky\@lg{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-xxxxs\@lg{top:var(--space-xxxxs)}.top-xxxs\@lg{top:var(--space-xxxs)}.top-xxs\@lg{top:var(--space-xxs)}.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-xxl\@lg{top:var(--space-xxl)}.top-xxxl\@lg{top:var(--space-xxxl)}.top-xxxxl\@lg{top:var(--space-xxxxl)}.bottom-0\@lg{bottom:0}.bottom-50\%\@lg{bottom:50%}.bottom-xxxxs\@lg{bottom:var(--space-xxxxs)}.bottom-xxxs\@lg{bottom:var(--space-xxxs)}.bottom-xxs\@lg{bottom:var(--space-xxs)}.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-xxl\@lg{bottom:var(--space-xxl)}.bottom-xxxl\@lg{bottom:var(--space-xxxl)}.bottom-xxxxl\@lg{bottom:var(--space-xxxxl)}.right-0\@lg{right:0}.right-50\%\@lg{right:50%}.right-xxxxs\@lg{right:var(--space-xxxxs)}.right-xxxs\@lg{right:var(--space-xxxs)}.right-xxs\@lg{right:var(--space-xxs)}.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-xxl\@lg{right:var(--space-xxl)}.right-xxxl\@lg{right:var(--space-xxxl)}.right-xxxxl\@lg{right:var(--space-xxxxl)}.left-0\@lg{left:0}.left-50\%\@lg{left:50%}.left-xxxxs\@lg{left:var(--space-xxxxs)}.left-xxxs\@lg{left:var(--space-xxxs)}.left-xxs\@lg{left:var(--space-xxs)}.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-xxl\@lg{left:var(--space-xxl)}.left-xxxl\@lg{left:var(--space-xxxl)}.left-xxxxl\@lg{left:var(--space-xxxxl)}.overflow-hidden\@lg{overflow:hidden}.overflow-auto\@lg{overflow:auto}.momentum-scrolling\@lg{-webkit-overflow-scrolling:touch}.overscroll-contain\@lg{overscroll-behavior:contain}.visible\@lg{visibility:visible}.invisible\@lg{visibility:hidden}}@media not all and (min-width:80rem){.display\@lg{display:none!important}}@media (min-width:90rem){.flex\@xl{display:flex}.inline-flex\@xl{display:inline-flex}.flex-wrap\@xl{flex-wrap:wrap}.flex-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-start\@xl{justify-content:flex-start}.justify-end\@xl{justify-content:flex-end}.justify-center\@xl{justify-content:center}.justify-between\@xl{justify-content:space-between}.items-center\@xl{align-items:center}.items-start\@xl{align-items:flex-start}.items-end\@xl{align-items:flex-end}.items-baseline\@xl{align-items:baseline}.items-stretch\@xl{align-items:stretch}.content-start\@xl{align-content:start}.content-end\@xl{align-content:end}.content-center\@xl{align-content:center}.content-between\@xl{align-content:space-between}.order-1\@xl{order:1}.order-2\@xl{order:2}.order-3\@xl{order:3}.block\@xl{display:block}.inline-block\@xl{display:inline-block}.inline\@xl{display:inline}.contents\@xl{display:contents}.css-grid\@xl{display:grid}.css-inline-grid\@xl{display:inline-grid}.hide\@xl{display:none!important}.margin-xxxxs\@xl{margin:var(--space-xxxxs)}.margin-xxxs\@xl{margin:var(--space-xxxs)}.margin-xxs\@xl{margin:var(--space-xxs)}.margin-xs\@xl{margin:var(--space-xs)}.margin-sm\@xl{margin:var(--space-sm)}.margin-md\@xl{margin:var(--space-md)}.margin-lg\@xl{margin:var(--space-lg)}.margin-xl\@xl{margin:var(--space-xl)}.margin-xxl\@xl{margin:var(--space-xxl)}.margin-xxxl\@xl{margin:var(--space-xxxl)}.margin-xxxxl\@xl{margin:var(--space-xxxxl)}.margin-auto\@xl{margin:auto}.margin-0\@xl{margin:0}.margin-top-xxxxs\@xl{margin-top:var(--space-xxxxs)}.margin-top-xxxs\@xl{margin-top:var(--space-xxxs)}.margin-top-xxs\@xl{margin-top:var(--space-xxs)}.margin-top-xs\@xl{margin-top:var(--space-xs)}.margin-top-sm\@xl{margin-top:var(--space-sm)}.margin-top-md\@xl{margin-top:var(--space-md)}.margin-top-lg\@xl{margin-top:var(--space-lg)}.margin-top-xl\@xl{margin-top:var(--space-xl)}.margin-top-xxl\@xl{margin-top:var(--space-xxl)}.margin-top-xxxl\@xl{margin-top:var(--space-xxxl)}.margin-top-xxxxl\@xl{margin-top:var(--space-xxxxl)}.margin-top-auto\@xl{margin-top:auto}.margin-top-0\@xl{margin-top:0}.margin-bottom-xxxxs\@xl{margin-bottom:var(--space-xxxxs)}.margin-bottom-xxxs\@xl{margin-bottom:var(--space-xxxs)}.margin-bottom-xxs\@xl{margin-bottom:var(--space-xxs)}.margin-bottom-xs\@xl{margin-bottom:var(--space-xs)}.margin-bottom-sm\@xl{margin-bottom:var(--space-sm)}.margin-bottom-md\@xl{margin-bottom:var(--space-md)}.margin-bottom-lg\@xl{margin-bottom:var(--space-lg)}.margin-bottom-xl\@xl{margin-bottom:var(--space-xl)}.margin-bottom-xxl\@xl{margin-bottom:var(--space-xxl)}.margin-bottom-xxxl\@xl{margin-bottom:var(--space-xxxl)}.margin-bottom-xxxxl\@xl{margin-bottom:var(--space-xxxxl)}.margin-bottom-auto\@xl{margin-bottom:auto}.margin-bottom-0\@xl{margin-bottom:0}.margin-right-xxxxs\@xl{margin-right:var(--space-xxxxs)}.margin-right-xxxs\@xl{margin-right:var(--space-xxxs)}.margin-right-xxs\@xl{margin-right:var(--space-xxs)}.margin-right-xs\@xl{margin-right:var(--space-xs)}.margin-right-sm\@xl{margin-right:var(--space-sm)}.margin-right-md\@xl{margin-right:var(--space-md)}.margin-right-lg\@xl{margin-right:var(--space-lg)}.margin-right-xl\@xl{margin-right:var(--space-xl)}.margin-right-xxl\@xl{margin-right:var(--space-xxl)}.margin-right-xxxl\@xl{margin-right:var(--space-xxxl)}.margin-right-xxxxl\@xl{margin-right:var(--space-xxxxl)}.margin-right-auto\@xl{margin-right:auto}.margin-right-0\@xl{margin-right:0}.margin-left-xxxxs\@xl{margin-left:var(--space-xxxxs)}.margin-left-xxxs\@xl{margin-left:var(--space-xxxs)}.margin-left-xxs\@xl{margin-left:var(--space-xxs)}.margin-left-xs\@xl{margin-left:var(--space-xs)}.margin-left-sm\@xl{margin-left:var(--space-sm)}.margin-left-md\@xl{margin-left:var(--space-md)}.margin-left-lg\@xl{margin-left:var(--space-lg)}.margin-left-xl\@xl{margin-left:var(--space-xl)}.margin-left-xxl\@xl{margin-left:var(--space-xxl)}.margin-left-xxxl\@xl{margin-left:var(--space-xxxl)}.margin-left-xxxxl\@xl{margin-left:var(--space-xxxxl)}.margin-left-auto\@xl{margin-left:auto}.margin-left-0\@xl{margin-left:0}.margin-x-xxxxs\@xl{margin-left:var(--space-xxxxs);margin-right:var(--space-xxxxs)}.margin-x-xxxs\@xl{margin-left:var(--space-xxxs);margin-right:var(--space-xxxs)}.margin-x-xxs\@xl{margin-left:var(--space-xxs);margin-right:var(--space-xxs)}.margin-x-xs\@xl{margin-left:var(--space-xs);margin-right:var(--space-xs)}.margin-x-sm\@xl{margin-left:var(--space-sm);margin-right:var(--space-sm)}.margin-x-md\@xl{margin-left:var(--space-md);margin-right:var(--space-md)}.margin-x-lg\@xl{margin-left:var(--space-lg);margin-right:var(--space-lg)}.margin-x-xl\@xl{margin-left:var(--space-xl);margin-right:var(--space-xl)}.margin-x-xxl\@xl{margin-left:var(--space-xxl);margin-right:var(--space-xxl)}.margin-x-xxxl\@xl{margin-left:var(--space-xxxl);margin-right:var(--space-xxxl)}.margin-x-xxxxl\@xl{margin-left:var(--space-xxxxl);margin-right:var(--space-xxxxl)}.margin-x-auto\@xl{margin-left:auto;margin-right:auto}.margin-x-0\@xl{margin-left:0;margin-right:0}.margin-y-xxxxs\@xl{margin-top:var(--space-xxxxs);margin-bottom:var(--space-xxxxs)}.margin-y-xxxs\@xl{margin-top:var(--space-xxxs);margin-bottom:var(--space-xxxs)}.margin-y-xxs\@xl{margin-top:var(--space-xxs);margin-bottom:var(--space-xxs)}.margin-y-xs\@xl{margin-top:var(--space-xs);margin-bottom:var(--space-xs)}.margin-y-sm\@xl{margin-top:var(--space-sm);margin-bottom:var(--space-sm)}.margin-y-md\@xl{margin-top:var(--space-md);margin-bottom:var(--space-md)}.margin-y-lg\@xl{margin-top:var(--space-lg);margin-bottom:var(--space-lg)}.margin-y-xl\@xl{margin-top:var(--space-xl);margin-bottom:var(--space-xl)}.margin-y-xxl\@xl{margin-top:var(--space-xxl);margin-bottom:var(--space-xxl)}.margin-y-xxxl\@xl{margin-top:var(--space-xxxl);margin-bottom:var(--space-xxxl)}.margin-y-xxxxl\@xl{margin-top:var(--space-xxxxl);margin-bottom:var(--space-xxxxl)}.margin-y-auto\@xl{margin-top:auto;margin-bottom:auto}.margin-y-0\@xl{margin-top:0;margin-bottom:0}.padding-xxxxs\@xl{padding:var(--space-xxxxs)}.padding-xxxs\@xl{padding:var(--space-xxxs)}.padding-xxs\@xl{padding:var(--space-xxs)}.padding-xs\@xl{padding:var(--space-xs)}.padding-sm\@xl{padding:var(--space-sm)}.padding-md\@xl{padding:var(--space-md)}.padding-lg\@xl{padding:var(--space-lg)}.padding-xl\@xl{padding:var(--space-xl)}.padding-xxl\@xl{padding:var(--space-xxl)}.padding-xxxl\@xl{padding:var(--space-xxxl)}.padding-xxxxl\@xl{padding:var(--space-xxxxl)}.padding-0\@xl{padding:0}.padding-component\@xl{padding:var(--component-padding)}.padding-top-xxxxs\@xl{padding-top:var(--space-xxxxs)}.padding-top-xxxs\@xl{padding-top:var(--space-xxxs)}.padding-top-xxs\@xl{padding-top:var(--space-xxs)}.padding-top-xs\@xl{padding-top:var(--space-xs)}.padding-top-sm\@xl{padding-top:var(--space-sm)}.padding-top-md\@xl{padding-top:var(--space-md)}.padding-top-lg\@xl{padding-top:var(--space-lg)}.padding-top-xl\@xl{padding-top:var(--space-xl)}.padding-top-xxl\@xl{padding-top:var(--space-xxl)}.padding-top-xxxl\@xl{padding-top:var(--space-xxxl)}.padding-top-xxxxl\@xl{padding-top:var(--space-xxxxl)}.padding-top-0\@xl{padding-top:0}.padding-top-component\@xl{padding-top:var(--component-padding)}.padding-bottom-xxxxs\@xl{padding-bottom:var(--space-xxxxs)}.padding-bottom-xxxs\@xl{padding-bottom:var(--space-xxxs)}.padding-bottom-xxs\@xl{padding-bottom:var(--space-xxs)}.padding-bottom-xs\@xl{padding-bottom:var(--space-xs)}.padding-bottom-sm\@xl{padding-bottom:var(--space-sm)}.padding-bottom-md\@xl{padding-bottom:var(--space-md)}.padding-bottom-lg\@xl{padding-bottom:var(--space-lg)}.padding-bottom-xl\@xl{padding-bottom:var(--space-xl)}.padding-bottom-xxl\@xl{padding-bottom:var(--space-xxl)}.padding-bottom-xxxl\@xl{padding-bottom:var(--space-xxxl)}.padding-bottom-xxxxl\@xl{padding-bottom:var(--space-xxxxl)}.padding-bottom-0\@xl{padding-bottom:0}.padding-bottom-component\@xl{padding-bottom:var(--component-padding)}.padding-right-xxxxs\@xl{padding-right:var(--space-xxxxs)}.padding-right-xxxs\@xl{padding-right:var(--space-xxxs)}.padding-right-xxs\@xl{padding-right:var(--space-xxs)}.padding-right-xs\@xl{padding-right:var(--space-xs)}.padding-right-sm\@xl{padding-right:var(--space-sm)}.padding-right-md\@xl{padding-right:var(--space-md)}.padding-right-lg\@xl{padding-right:var(--space-lg)}.padding-right-xl\@xl{padding-right:var(--space-xl)}.padding-right-xxl\@xl{padding-right:var(--space-xxl)}.padding-right-xxxl\@xl{padding-right:var(--space-xxxl)}.padding-right-xxxxl\@xl{padding-right:var(--space-xxxxl)}.padding-right-0\@xl{padding-right:0}.padding-right-component\@xl{padding-right:var(--component-padding)}.padding-left-xxxxs\@xl{padding-left:var(--space-xxxxs)}.padding-left-xxxs\@xl{padding-left:var(--space-xxxs)}.padding-left-xxs\@xl{padding-left:var(--space-xxs)}.padding-left-xs\@xl{padding-left:var(--space-xs)}.padding-left-sm\@xl{padding-left:var(--space-sm)}.padding-left-md\@xl{padding-left:var(--space-md)}.padding-left-lg\@xl{padding-left:var(--space-lg)}.padding-left-xl\@xl{padding-left:var(--space-xl)}.padding-left-xxl\@xl{padding-left:var(--space-xxl)}.padding-left-xxxl\@xl{padding-left:var(--space-xxxl)}.padding-left-xxxxl\@xl{padding-left:var(--space-xxxxl)}.padding-left-0\@xl{padding-left:0}.padding-left-component\@xl{padding-left:var(--component-padding)}.padding-x-xxxxs\@xl{padding-left:var(--space-xxxxs);padding-right:var(--space-xxxxs)}.padding-x-xxxs\@xl{padding-left:var(--space-xxxs);padding-right:var(--space-xxxs)}.padding-x-xxs\@xl{padding-left:var(--space-xxs);padding-right:var(--space-xxs)}.padding-x-xs\@xl{padding-left:var(--space-xs);padding-right:var(--space-xs)}.padding-x-sm\@xl{padding-left:var(--space-sm);padding-right:var(--space-sm)}.padding-x-md\@xl{padding-left:var(--space-md);padding-right:var(--space-md)}.padding-x-lg\@xl{padding-left:var(--space-lg);padding-right:var(--space-lg)}.padding-x-xl\@xl{padding-left:var(--space-xl);padding-right:var(--space-xl)}.padding-x-xxl\@xl{padding-left:var(--space-xxl);padding-right:var(--space-xxl)}.padding-x-xxxl\@xl{padding-left:var(--space-xxxl);padding-right:var(--space-xxxl)}.padding-x-xxxxl\@xl{padding-left:var(--space-xxxxl);padding-right:var(--space-xxxxl)}.padding-x-0\@xl{padding-left:0;padding-right:0}.padding-x-component\@xl{padding-left:var(--component-padding);padding-right:var(--component-padding)}.padding-y-xxxxs\@xl{padding-top:var(--space-xxxxs);padding-bottom:var(--space-xxxxs)}.padding-y-xxxs\@xl{padding-top:var(--space-xxxs);padding-bottom:var(--space-xxxs)}.padding-y-xxs\@xl{padding-top:var(--space-xxs);padding-bottom:var(--space-xxs)}.padding-y-xs\@xl{padding-top:var(--space-xs);padding-bottom:var(--space-xs)}.padding-y-sm\@xl{padding-top:var(--space-sm);padding-bottom:var(--space-sm)}.padding-y-md\@xl{padding-top:var(--space-md);padding-bottom:var(--space-md)}.padding-y-lg\@xl{padding-top:var(--space-lg);padding-bottom:var(--space-lg)}.padding-y-xl\@xl{padding-top:var(--space-xl);padding-bottom:var(--space-xl)}.padding-y-xxl\@xl{padding-top:var(--space-xxl);padding-bottom:var(--space-xxl)}.padding-y-xxxl\@xl{padding-top:var(--space-xxxl);padding-bottom:var(--space-xxxl)}.padding-y-xxxxl\@xl{padding-top:var(--space-xxxxl);padding-bottom:var(--space-xxxxl)}.padding-y-0\@xl{padding-top:0;padding-bottom:0}.padding-y-component\@xl{padding-top:var(--component-padding);padding-bottom:var(--component-padding)}.text-center\@xl{text-align:center}.text-left\@xl{text-align:left}.text-right\@xl{text-align:right}.text-justify\@xl{text-align:justify}.text-xs\@xl{font-size:var(--text-xs,.6875rem)}.text-sm\@xl{font-size:var(--text-sm,.75rem)}.text-base\@xl{font-size:var(--text-unit,1rem)}.text-md\@xl{font-size:var(--text-md,1.125rem)}.text-lg\@xl{font-size:var(--text-lg,1.375rem)}.text-xl\@xl{font-size:var(--text-xl,1.75rem)}.text-xxl\@xl{font-size:var(--text-xxl,2rem)}.text-xxxl\@xl{font-size:var(--text-xxxl,2.5rem)}.text-xxxxl\@xl{font-size:var(--text-xxxxl,3rem)}.column-count-1\@xl{-moz-column-count:1;column-count:1}.column-count-2\@xl{-moz-column-count:2;column-count:2}.column-count-3\@xl{-moz-column-count:3;column-count:3}.column-count-4\@xl{-moz-column-count:4;column-count:4}.width-xxxxs\@xl{width:var(--size-xxxxs,.25rem)}.width-xxxs\@xl{width:var(--size-xxxs,.5rem)}.width-xxs\@xl{width:var(--size-xxs,.75rem)}.width-xs\@xl{width:var(--size-xs,1rem)}.width-sm\@xl{width:var(--size-sm,1.5rem)}.width-md\@xl{width:var(--size-md,2rem)}.width-lg\@xl{width:var(--size-lg,3rem)}.width-xl\@xl{width:var(--size-xl,4rem)}.width-xxl\@xl{width:var(--size-xxl,6rem)}.width-xxxl\@xl{width:var(--size-xxxl,8rem)}.width-xxxxl\@xl{width:var(--size-xxxxl,16rem)}.width-0\@xl{width:0}.width-10\%\@xl{width:10%}.width-20\%\@xl{width:20%}.width-25\%\@xl{width:25%}.width-30\%\@xl{width:30%}.width-33\%\@xl{width: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}.width-inherit\@xl{width:inherit}.height-xxxxs\@xl{height:var(--size-xxxxs,.25rem)}.height-xxxs\@xl{height:var(--size-xxxs,.5rem)}.height-xxs\@xl{height:var(--size-xxs,.75rem)}.height-xs\@xl{height:var(--size-xs,1rem)}.height-sm\@xl{height:var(--size-sm,1.5rem)}.height-md\@xl{height:var(--size-md,2rem)}.height-lg\@xl{height:var(--size-lg,3rem)}.height-xl\@xl{height:var(--size-xl,4rem)}.height-xxl\@xl{height:var(--size-xxl,6rem)}.height-xxxl\@xl{height:var(--size-xxxl,8rem)}.height-xxxxl\@xl{height:var(--size-xxxxl,16rem)}.height-0\@xl{height:0}.height-10\%\@xl{height:10%}.height-20\%\@xl{height:20%}.height-25\%\@xl{height:25%}.height-30\%\@xl{height:30%}.height-33\%\@xl{height: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}.height-inherit\@xl{height:inherit}.max-width-xxxxxs\@xl{max-width:var(--max-width-xxxxxs)}.max-width-xxxxs\@xl{max-width:var(--max-width-xxxxs)}.max-width-xxxs\@xl{max-width:var(--max-width-xxxs)}.max-width-xxs\@xl{max-width:var(--max-width-xxs)}.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-xxl\@xl{max-width:var(--max-width-xxl)}.max-width-xxxl\@xl{max-width:var(--max-width-xxxl)}.max-width-xxxxl\@xl{max-width:var(--max-width-xxxxl)}.max-width-100\%\@xl{max-width:100%}.max-width-none\@xl{max-width:none}.position-relative\@xl{position:relative}.position-absolute\@xl{position:absolute}.position-fixed\@xl{position:fixed}.position-sticky\@xl{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-xxxxs\@xl{top:var(--space-xxxxs)}.top-xxxs\@xl{top:var(--space-xxxs)}.top-xxs\@xl{top:var(--space-xxs)}.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-xxl\@xl{top:var(--space-xxl)}.top-xxxl\@xl{top:var(--space-xxxl)}.top-xxxxl\@xl{top:var(--space-xxxxl)}.bottom-0\@xl{bottom:0}.bottom-50\%\@xl{bottom:50%}.bottom-xxxxs\@xl{bottom:var(--space-xxxxs)}.bottom-xxxs\@xl{bottom:var(--space-xxxs)}.bottom-xxs\@xl{bottom:var(--space-xxs)}.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-xxl\@xl{bottom:var(--space-xxl)}.bottom-xxxl\@xl{bottom:var(--space-xxxl)}.bottom-xxxxl\@xl{bottom:var(--space-xxxxl)}.right-0\@xl{right:0}.right-50\%\@xl{right:50%}.right-xxxxs\@xl{right:var(--space-xxxxs)}.right-xxxs\@xl{right:var(--space-xxxs)}.right-xxs\@xl{right:var(--space-xxs)}.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-xxl\@xl{right:var(--space-xxl)}.right-xxxl\@xl{right:var(--space-xxxl)}.right-xxxxl\@xl{right:var(--space-xxxxl)}.left-0\@xl{left:0}.left-50\%\@xl{left:50%}.left-xxxxs\@xl{left:var(--space-xxxxs)}.left-xxxs\@xl{left:var(--space-xxxs)}.left-xxs\@xl{left:var(--space-xxs)}.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-xxl\@xl{left:var(--space-xxl)}.left-xxxl\@xl{left:var(--space-xxxl)}.left-xxxxl\@xl{left:var(--space-xxxxl)}.overflow-hidden\@xl{overflow:hidden}.overflow-auto\@xl{overflow:auto}.momentum-scrolling\@xl{-webkit-overflow-scrolling:touch}.overscroll-contain\@xl{overscroll-behavior:contain}.visible\@xl{visibility:visible}.invisible\@xl{visibility:hidden}}@media not all and (min-width:90rem){.display\@xl{display:none!important}}:root,[data-theme=default]{--color-primary-darker:hsl(0, 75%, 40%);--color-primary-darker-h:0;--color-primary-darker-s:75%;--color-primary-darker-l:40%;--color-primary-dark:hsl(0, 75%, 46%);--color-primary-dark-h:0;--color-primary-dark-s:75%;--color-primary-dark-l:46%;--color-primary:hsl(0, 75%, 52%);--color-primary-h:0;--color-primary-s:75%;--color-primary-l:52%;--color-primary-light:hsl(0, 75%, 58%);--color-primary-light-h:0;--color-primary-light-s:75%;--color-primary-light-l:58%;--color-primary-lighter:hsl(0, 75%, 64%);--color-primary-lighter-h:0;--color-primary-lighter-s:75%;--color-primary-lighter-l:64%;--color-accent-darker:hsl(23, 90%, 43%);--color-accent-darker-h:23;--color-accent-darker-s:90%;--color-accent-darker-l:43%;--color-accent-dark:hsl(23, 90%, 49%);--color-accent-dark-h:23;--color-accent-dark-s:90%;--color-accent-dark-l:49%;--color-accent:hsl(23, 90%, 55%);--color-accent-h:23;--color-accent-s:90%;--color-accent-l:55%;--color-accent-light:hsl(23, 90%, 61%);--color-accent-light-h:23;--color-accent-light-s:90%;--color-accent-light-l:61%;--color-accent-lighter:hsl(23, 90%, 67%);--color-accent-lighter-h:23;--color-accent-lighter-s:90%;--color-accent-lighter-l:67%;--color-secondary-darker:hsl(48, 94%, 42%);--color-secondary-darker-h:48;--color-secondary-darker-s:94%;--color-secondary-darker-l:42%;--color-secondary-dark:hsl(48, 94%, 48%);--color-secondary-dark-h:48;--color-secondary-dark-s:94%;--color-secondary-dark-l:48%;--color-secondary:hsl(48, 94%, 54%);--color-secondary-h:48;--color-secondary-s:94%;--color-secondary-l:54%;--color-secondary-light:hsl(48, 94%, 60%);--color-secondary-light-h:48;--color-secondary-light-s:94%;--color-secondary-light-l:60%;--color-secondary-lighter:hsl(48, 94%, 66%);--color-secondary-lighter-h:48;--color-secondary-lighter-s:94%;--color-secondary-lighter-l:66%;--color-tertiary-darker:hsl(94, 45%, 36%);--color-tertiary-darker-h:94;--color-tertiary-darker-s:45%;--color-tertiary-darker-l:36%;--color-tertiary-dark:hsl(94, 45%, 42%);--color-tertiary-dark-h:94;--color-tertiary-dark-s:45%;--color-tertiary-dark-l:42%;--color-tertiary:hsl(94, 45%, 48%);--color-tertiary-h:94;--color-tertiary-s:45%;--color-tertiary-l:48%;--color-tertiary-light:hsl(94, 45%, 54%);--color-tertiary-light-h:94;--color-tertiary-light-s:45%;--color-tertiary-light-l:54%;--color-tertiary-lighter:hsl(94, 45%, 60%);--color-tertiary-lighter-h:94;--color-tertiary-lighter-s:45%;--color-tertiary-lighter-l:60%;--color-quaternary-darker:hsl(0, 75%, 40%);--color-quaternary-darker-h:0;--color-quaternary-darker-s:75%;--color-quaternary-darker-l:40%;--color-quaternary-dark:hsl(0, 75%, 46%);--color-quaternary-dark-h:0;--color-quaternary-dark-s:75%;--color-quaternary-dark-l:46%;--color-quaternary:hsl(0, 75%, 52%);--color-quaternary-h:0;--color-quaternary-s:75%;--color-quaternary-l:52%;--color-quaternary-light:hsl(0, 75%, 58%);--color-quaternary-light-h:0;--color-quaternary-light-s:75%;--color-quaternary-light-l:58%;--color-quaternary-lighter:hsl(0, 75%, 64%);--color-quaternary-lighter-h:0;--color-quaternary-lighter-s:75%;--color-quaternary-lighter-l:64%;--color-quinary-darker:hsl(157, 100%, 13%);--color-quinary-darker-h:157;--color-quinary-darker-s:100%;--color-quinary-darker-l:13%;--color-quinary-dark:hsl(157, 100%, 19%);--color-quinary-dark-h:157;--color-quinary-dark-s:100%;--color-quinary-dark-l:19%;--color-quinary:hsl(157, 100%, 25%);--color-quinary-h:157;--color-quinary-s:100%;--color-quinary-l:25%;--color-quinary-light:hsl(157, 100%, 31%);--color-quinary-light-h:157;--color-quinary-light-s:100%;--color-quinary-light-l:31%;--color-quinary-lighter:hsl(157, 100%, 37%);--color-quinary-lighter-h:157;--color-quinary-lighter-s:100%;--color-quinary-lighter-l:37%;--color-black:hsl(0, 0%, 16%);--color-black-h:0;--color-black-s:0%;--color-black-l:16%;--color-black-light:hsl(0, 0%, 26%);--color-black-light-h:0;--color-black-light-s:0%;--color-black-light-l:26%;--color-black-lighter:hsl(0, 0%, 36%);--color-black-lighter-h:0;--color-black-lighter-s:0%;--color-black-lighter-l:36%;--color-white:hsl(0, 0%, 100%);--color-white-h:0;--color-white-s:0%;--color-white-l:100%;--color-white-dark:hsl(0, 0%, 90%);--color-white-dark-h:0;--color-white-dark-s:0%;--color-white-dark-l:90%;--color-white-darker:hsl(0, 0%, 80%);--color-white-darker-h:0;--color-white-darker-s:0%;--color-white-darker-l:80%;--color-warning-darker:hsl(35, 79%, 48%);--color-warning-darker-h:35;--color-warning-darker-s:79%;--color-warning-darker-l:48%;--color-warning-dark:hsl(35, 79%, 56%);--color-warning-dark-h:35;--color-warning-dark-s:79%;--color-warning-dark-l:56%;--color-warning:hsl(35, 79%, 66%);--color-warning-h:35;--color-warning-s:79%;--color-warning-l:66%;--color-warning-light:hsl(35, 79%, 74%);--color-warning-light-h:35;--color-warning-light-s:79%;--color-warning-light-l:74%;--color-warning-lighter:hsl(35, 79%, 82%);--color-warning-lighter-h:35;--color-warning-lighter-s:79%;--color-warning-lighter-l:82%;--color-success-darker:hsl(170, 78%, 26%);--color-success-darker-h:170;--color-success-darker-s:78%;--color-success-darker-l:26%;--color-success-dark:hsl(170, 78%, 31%);--color-success-dark-h:170;--color-success-dark-s:78%;--color-success-dark-l:31%;--color-success:hsl(170, 78%, 36%);--color-success-h:170;--color-success-s:78%;--color-success-l:36%;--color-success-light:hsl(170, 78%, 42%);--color-success-light-h:170;--color-success-light-s:78%;--color-success-light-l:42%;--color-success-lighter:hsl(170, 78%, 47%);--color-success-lighter-h:170;--color-success-lighter-s:78%;--color-success-lighter-l:47%;--color-error-darker:hsl(342, 89%, 38%);--color-error-darker-h:342;--color-error-darker-s:89%;--color-error-darker-l:38%;--color-error-dark:hsl(342, 89%, 43%);--color-error-dark-h:342;--color-error-dark-s:89%;--color-error-dark-l:43%;--color-error:hsl(342, 89%, 48%);--color-error-h:342;--color-error-s:89%;--color-error-l:48%;--color-error-light:hsl(342, 89%, 56%);--color-error-light-h:342;--color-error-light-s:89%;--color-error-light-l:56%;--color-error-lighter:hsl(342, 89%, 62%);--color-error-lighter-h:342;--color-error-lighter-s:89%;--color-error-lighter-l:62%;--color-bg-darker:hsl(0, 0%, 91%);--color-bg-darker-h:0;--color-bg-darker-s:0%;--color-bg-darker-l:91%;--color-bg-dark:hsl(0, 0%, 95%);--color-bg-dark-h:0;--color-bg-dark-s:0%;--color-bg-dark-l:95%;--color-bg:hsl(0, 0%, 100%);--color-bg-h:0;--color-bg-s:0%;--color-bg-l:100%;--color-bg-light:hsl(0, 0%, 100%);--color-bg-light-h:0;--color-bg-light-s:0%;--color-bg-light-l:100%;--color-bg-lighter:hsl(0, 0%, 100%);--color-bg-lighter-h:0;--color-bg-lighter-s:0%;--color-bg-lighter-l:100%;--color-contrast-lower:hsl(0, 0%, 86%);--color-contrast-lower-h:0;--color-contrast-lower-s:0%;--color-contrast-lower-l:86%;--color-contrast-low:hsl(0, 0%, 68%);--color-contrast-low-h:0;--color-contrast-low-s:0%;--color-contrast-low-l:68%;--color-contrast-medium:hsl(0, 0%, 52%);--color-contrast-medium-h:0;--color-contrast-medium-s:0%;--color-contrast-medium-l:52%;--color-contrast-high:hsl(0, 0%, 29%);--color-contrast-high-h:0;--color-contrast-high-s:0%;--color-contrast-high-l:29%;--color-contrast-higher:hsl(0, 0%, 16%);--color-contrast-higher-h:0;--color-contrast-higher-s:0%;--color-contrast-higher-l:16%;--gradient-primary-stop-1:hsl(5, 84%, 69%);--gradient-primary-stop-1-h:5;--gradient-primary-stop-1-s:84%;--gradient-primary-stop-1-l:69%;--gradient-primary-stop-2:hsl(45, 93%, 82%);--gradient-primary-stop-2-h:45;--gradient-primary-stop-2-s:93%;--gradient-primary-stop-2-l:82%;--gradient-secondary-stop-1:hsl(7, 100%, 92%);--gradient-secondary-stop-1-h:7;--gradient-secondary-stop-1-s:100%;--gradient-secondary-stop-1-l:92%;--gradient-secondary-stop-2:hsl(19, 100%, 84%);--gradient-secondary-stop-2-h:19;--gradient-secondary-stop-2-s:100%;--gradient-secondary-stop-2-l:84%;--gradient-tertiary-stop-1:hsl(140, 26%, 86%);--gradient-tertiary-stop-1-h:140;--gradient-tertiary-stop-1-s:26%;--gradient-tertiary-stop-1-l:86%;--gradient-tertiary-stop-2:hsl(144, 26%, 66%);--gradient-tertiary-stop-2-h:144;--gradient-tertiary-stop-2-s:26%;--gradient-tertiary-stop-2-l:66%}[data-theme=dark]{--color-primary-darker:hsl(250, 100%, 60%);--color-primary-darker-h:250;--color-primary-darker-s:100%;--color-primary-darker-l:60%;--color-primary-dark:hsl(250, 100%, 64%);--color-primary-dark-h:250;--color-primary-dark-s:100%;--color-primary-dark-l:64%;--color-primary:hsl(250, 100%, 69%);--color-primary-h:250;--color-primary-s:100%;--color-primary-l:69%;--color-primary-light:hsl(250, 100%, 72%);--color-primary-light-h:250;--color-primary-light-s:100%;--color-primary-light-l:72%;--color-primary-lighter:hsl(250, 100%, 76%);--color-primary-lighter-h:250;--color-primary-lighter-s:100%;--color-primary-lighter-l:76%;--color-accent-darker:hsl(342, 92%, 41%);--color-accent-darker-h:342;--color-accent-darker-s:92%;--color-accent-darker-l:41%;--color-accent-dark:hsl(342, 92%, 47%);--color-accent-dark-h:342;--color-accent-dark-s:92%;--color-accent-dark-l:47%;--color-accent:hsl(342, 92%, 54%);--color-accent-h:342;--color-accent-s:92%;--color-accent-l:54%;--color-accent-light:hsl(342, 92%, 60%);--color-accent-light-h:342;--color-accent-light-s:92%;--color-accent-light-l:60%;--color-accent-lighter:hsl(342, 92%, 65%);--color-accent-lighter-h:342;--color-accent-lighter-s:92%;--color-accent-lighter-l:65%;--color-secondary-darker:hsl(0, 75%, 40%);--color-secondary-darker-h:0;--color-secondary-darker-s:75%;--color-secondary-darker-l:40%;--color-secondary-dark:hsl(0, 75%, 46%);--color-secondary-dark-h:0;--color-secondary-dark-s:75%;--color-secondary-dark-l:46%;--color-secondary:hsl(0, 75%, 52%);--color-secondary-h:0;--color-secondary-s:75%;--color-secondary-l:52%;--color-secondary-light:hsl(0, 75%, 58%);--color-secondary-light-h:0;--color-secondary-light-s:75%;--color-secondary-light-l:58%;--color-secondary-lighter:hsl(0, 75%, 64%);--color-secondary-lighter-h:0;--color-secondary-lighter-s:75%;--color-secondary-lighter-l:64%;--color-tertiary-darker:hsl(0, 75%, 40%);--color-tertiary-darker-h:0;--color-tertiary-darker-s:75%;--color-tertiary-darker-l:40%;--color-tertiary-dark:hsl(0, 75%, 46%);--color-tertiary-dark-h:0;--color-tertiary-dark-s:75%;--color-tertiary-dark-l:46%;--color-tertiary:hsl(0, 75%, 52%);--color-tertiary-h:0;--color-tertiary-s:75%;--color-tertiary-l:52%;--color-tertiary-light:hsl(0, 75%, 58%);--color-tertiary-light-h:0;--color-tertiary-light-s:75%;--color-tertiary-light-l:58%;--color-tertiary-lighter:hsl(0, 75%, 64%);--color-tertiary-lighter-h:0;--color-tertiary-lighter-s:75%;--color-tertiary-lighter-l:64%;--color-quaternary-darker:hsl(0, 75%, 40%);--color-quaternary-darker-h:0;--color-quaternary-darker-s:75%;--color-quaternary-darker-l:40%;--color-quaternary-dark:hsl(0, 75%, 46%);--color-quaternary-dark-h:0;--color-quaternary-dark-s:75%;--color-quaternary-dark-l:46%;--color-quaternary:hsl(0, 75%, 52%);--color-quaternary-h:0;--color-quaternary-s:75%;--color-quaternary-l:52%;--color-quaternary-light:hsl(0, 75%, 58%);--color-quaternary-light-h:0;--color-quaternary-light-s:75%;--color-quaternary-light-l:58%;--color-quaternary-lighter:hsl(0, 75%, 64%);--color-quaternary-lighter-h:0;--color-quaternary-lighter-s:75%;--color-quaternary-lighter-l:64%;--color-quinary-darker:hsl(0, 75%, 40%);--color-quinary-darker-h:0;--color-quinary-darker-s:75%;--color-quinary-darker-l:40%;--color-quinary-dark:hsl(0, 75%, 46%);--color-quinary-dark-h:0;--color-quinary-dark-s:75%;--color-quinary-dark-l:46%;--color-quinary:hsl(0, 75%, 52%);--color-quinary-h:0;--color-quinary-s:75%;--color-quinary-l:52%;--color-quinary-light:hsl(0, 75%, 58%);--color-quinary-light-h:0;--color-quinary-light-s:75%;--color-quinary-light-l:58%;--color-quinary-lighter:hsl(0, 75%, 64%);--color-quinary-lighter-h:0;--color-quinary-lighter-s:75%;--color-quinary-lighter-l:64%;--color-black:hsl(230, 13%, 9%);--color-black-h:230;--color-black-s:13%;--color-black-l:9%;--color-white:hsl(0, 0%, 100%);--color-white-h:0;--color-white-s:0%;--color-white-l:100%;--color-warning-darker:hsl(35, 79%, 48%);--color-warning-darker-h:35;--color-warning-darker-s:79%;--color-warning-darker-l:48%;--color-warning-dark:hsl(35, 79%, 56%);--color-warning-dark-h:35;--color-warning-dark-s:79%;--color-warning-dark-l:56%;--color-warning:hsl(35, 79%, 66%);--color-warning-h:35;--color-warning-s:79%;--color-warning-l:66%;--color-warning-light:hsl(35, 79%, 74%);--color-warning-light-h:35;--color-warning-light-s:79%;--color-warning-light-l:74%;--color-warning-lighter:hsl(35, 79%, 82%);--color-warning-lighter-h:35;--color-warning-lighter-s:79%;--color-warning-lighter-l:82%;--color-success-darker:hsl(170, 78%, 26%);--color-success-darker-h:170;--color-success-darker-s:78%;--color-success-darker-l:26%;--color-success-dark:hsl(170, 78%, 31%);--color-success-dark-h:170;--color-success-dark-s:78%;--color-success-dark-l:31%;--color-success:hsl(170, 78%, 36%);--color-success-h:170;--color-success-s:78%;--color-success-l:36%;--color-success-light:hsl(170, 78%, 42%);--color-success-light-h:170;--color-success-light-s:78%;--color-success-light-l:42%;--color-success-lighter:hsl(170, 78%, 47%);--color-success-lighter-h:170;--color-success-lighter-s:78%;--color-success-lighter-l:47%;--color-error-darker:hsl(342, 92%, 41%);--color-error-darker-h:342;--color-error-darker-s:92%;--color-error-darker-l:41%;--color-error-dark:hsl(342, 92%, 47%);--color-error-dark-h:342;--color-error-dark-s:92%;--color-error-dark-l:47%;--color-error:hsl(342, 92%, 54%);--color-error-h:342;--color-error-s:92%;--color-error-l:54%;--color-error-light:hsl(342, 92%, 60%);--color-error-light-h:342;--color-error-light-s:92%;--color-error-light-l:60%;--color-error-lighter:hsl(342, 92%, 65%);--color-error-lighter-h:342;--color-error-lighter-s:92%;--color-error-lighter-l:65%;--color-bg-darker:hsl(232, 7%, 8%);--color-bg-darker-h:232;--color-bg-darker-s:7%;--color-bg-darker-l:8%;--color-bg-dark:hsl(233, 8%, 11%);--color-bg-dark-h:233;--color-bg-dark-s:8%;--color-bg-dark-l:11%;--color-bg:hsl(232, 11%, 15%);--color-bg-h:232;--color-bg-s:11%;--color-bg-l:15%;--color-bg-light:hsl(233, 8%, 19%);--color-bg-light-h:233;--color-bg-light-s:8%;--color-bg-light-l:19%;--color-bg-lighter:hsl(232, 7%, 22%);--color-bg-lighter-h:232;--color-bg-lighter-s:7%;--color-bg-lighter-l:22%;--color-contrast-lower:hsl(240, 6%, 26%);--color-contrast-lower-h:240;--color-contrast-lower-s:6%;--color-contrast-lower-l:26%;--color-contrast-low:hsl(240, 3%, 41%);--color-contrast-low-h:240;--color-contrast-low-s:3%;--color-contrast-low-l:41%;--color-contrast-medium:hsl(213, 3%, 57%);--color-contrast-medium-h:213;--color-contrast-medium-s:3%;--color-contrast-medium-l:57%;--color-contrast-high:hsl(240, 5%, 82%);--color-contrast-high-h:240;--color-contrast-high-s:5%;--color-contrast-high-l:82%;--color-contrast-higher:hsl(240, 100%, 99%);--color-contrast-higher-h:240;--color-contrast-higher-s:100%;--color-contrast-higher-l:99%;--gradient-primary-stop-1:hsl(250, 100%, 69%);--gradient-primary-stop-1-h:250;--gradient-primary-stop-1-s:100%;--gradient-primary-stop-1-l:69%;--gradient-primary-stop-2:hsl(300, 100%, 69%);--gradient-primary-stop-2-h:300;--gradient-primary-stop-2-s:100%;--gradient-primary-stop-2-l:69%;--gradient-secondary-stop-1:hsl(250, 100%, 69%);--gradient-secondary-stop-1-h:250;--gradient-secondary-stop-1-s:100%;--gradient-secondary-stop-1-l:69%;--gradient-secondary-stop-2:hsl(300, 100%, 69%);--gradient-secondary-stop-2-h:300;--gradient-secondary-stop-2-s:100%;--gradient-secondary-stop-2-l:69%;--gradient-tertiary-stop-1:hsl(250, 100%, 69%);--gradient-tertiary-stop-1-h:250;--gradient-tertiary-stop-1-s:100%;--gradient-tertiary-stop-1-l:69%;--gradient-tertiary-stop-2:hsl(300, 100%, 69%);--gradient-tertiary-stop-2-h:300;--gradient-tertiary-stop-2-s:100%;--gradient-tertiary-stop-2-l:69%}.bg-secondary-darker{background-color:hsla(var(--color-secondary-darker-h),var(--color-secondary-darker-s),var(--color-secondary-darker-l),var(--bg-o,1))}.bg-secondary-dark{background-color:hsla(var(--color-secondary-dark-h),var(--color-secondary-dark-s),var(--color-secondary-dark-l),var(--bg-o,1))}.bg-secondary{background-color:hsla(var(--color-secondary-h),var(--color-secondary-s),var(--color-secondary-l),var(--bg-o,1))}.bg-secondary-light{background-color:hsla(var(--color-secondary-light-h),var(--color-secondary-light-s),var(--color-secondary-light-l),var(--bg-o,1))}.bg-secondary-lighter{background-color:hsla(var(--color-secondary-lighter-h),var(--color-secondary-lighter-s),var(--color-secondary-lighter-l),var(--bg-o,1))}.bg-tertiary-darker{background-color:hsla(var(--color-tertiary-darker-h),var(--color-tertiary-darker-s),var(--color-tertiary-darker-l),var(--bg-o,1))}.bg-tertiary-dark{background-color:hsla(var(--color-tertiary-dark-h),var(--color-tertiary-dark-s),var(--color-tertiary-dark-l),var(--bg-o,1))}.bg-tertiary{background-color:hsla(var(--color-tertiary-h),var(--color-tertiary-s),var(--color-tertiary-l),var(--bg-o,1))}.bg-tertiary-light{background-color:hsla(var(--color-tertiary-light-h),var(--color-tertiary-light-s),var(--color-tertiary-light-l),var(--bg-o,1))}.bg-tertiary-lighter{background-color:hsla(var(--color-tertiary-lighter-h),var(--color-tertiary-lighter-s),var(--color-tertiary-lighter-l),var(--bg-o,1))}.bg-quaternary-darker{background-color:hsla(var(--color-quaternary-darker-h),var(--color-quaternary-darker-s),var(--color-quaternary-darker-l),var(--bg-o,1))}.bg-quaternary-dark{background-color:hsla(var(--color-quaternary-dark-h),var(--color-quaternary-dark-s),var(--color-quaternary-dark-l),var(--bg-o,1))}.bg-quaternary{background-color:hsla(var(--color-quaternary-h),var(--color-quaternary-s),var(--color-quaternary-l),var(--bg-o,1))}.bg-quaternary-light{background-color:hsla(var(--color-quaternary-light-h),var(--color-quaternary-light-s),var(--color-quaternary-light-l),var(--bg-o,1))}.bg-quaternary-lighter{background-color:hsla(var(--color-quaternary-lighter-h),var(--color-quaternary-lighter-s),var(--color-quaternary-lighter-l),var(--bg-o,1))}.bg-quinary-darker{background-color:hsla(var(--color-quinary-darker-h),var(--color-quinary-darker-s),var(--color-quinary-darker-l),var(--bg-o,1))}.bg-quinary-dark{background-color:hsla(var(--color-quinary-dark-h),var(--color-quinary-dark-s),var(--color-quinary-dark-l),var(--bg-o,1))}.bg-quinary{background-color:hsla(var(--color-quinary-h),var(--color-quinary-s),var(--color-quinary-l),var(--bg-o,1))}.bg-quinary-light{background-color:hsla(var(--color-quinary-light-h),var(--color-quinary-light-s),var(--color-quinary-light-l),var(--bg-o,1))}.bg-quinary-lighter{background-color:hsla(var(--color-quinary-lighter-h),var(--color-quinary-lighter-s),var(--color-quinary-lighter-l),var(--bg-o,1))}.bg-gradient-primary{background-image:radial-gradient(var(--gradient-primary-stop-1),var(--gradient-primary-stop-2))}.bg-gradient-primary-top{background-image:linear-gradient(0deg,var(--gradient-primary-stop-1),var(--gradient-primary-stop-2))}.bg-gradient-primary-right{background-image:linear-gradient(90deg,var(--gradient-primary-stop-1),var(--gradient-primary-stop-2))}.bg-gradient-primary-bottom{background-image:linear-gradient(180deg,var(--gradient-primary-stop-1),var(--gradient-primary-stop-2))}.bg-gradient-primary-left{background-image:linear-gradient(270deg,var(--gradient-primary-stop-1),var(--gradient-primary-stop-2))}.bg-gradient-secondary{background-image:radial-gradient(var(--gradient-secondary-stop-1),var(--gradient-secondary-stop-2))}.bg-gradient-secondary-top{background-image:linear-gradient(0deg,var(--gradient-secondary-stop-1),var(--gradient-secondary-stop-2))}.bg-gradient-secondary-right{background-image:linear-gradient(90deg,var(--gradient-secondary-stop-1),var(--gradient-secondary-stop-2))}.bg-gradient-secondary-bottom{background-image:linear-gradient(180deg,var(--gradient-secondary-stop-1),var(--gradient-secondary-stop-2))}.bg-gradient-secondary-left{background-image:linear-gradient(270deg,var(--gradient-secondary-stop-1),var(--gradient-secondary-stop-2))}.bg-gradient-tertiary{background-image:radial-gradient(var(--gradient-tertiary-stop-1),var(--gradient-tertiary-stop-2))}.bg-gradient-tertiary-top{background-image:linear-gradient(0deg,var(--gradient-tertiary-stop-1),var(--gradient-tertiary-stop-2))}.bg-gradient-tertiary-right{background-image:linear-gradient(90deg,var(--gradient-tertiary-stop-1),var(--gradient-tertiary-stop-2))}.bg-gradient-tertiary-bottom{background-image:linear-gradient(180deg,var(--gradient-tertiary-stop-1),var(--gradient-tertiary-stop-2))}.bg-gradient-tertiary-left{background-image:linear-gradient(270deg,var(--gradient-tertiary-stop-1),var(--gradient-tertiary-stop-2))}.border-gradient-primary{-o-border-image:radial-gradient(var(--gradient-primary-stop-1),var(--gradient-primary-stop-2)) 1;border-image:radial-gradient(var(--gradient-primary-stop-1),var(--gradient-primary-stop-2)) 1}.border-gradient-primary-top{-o-border-image:linear-gradient(0deg,var(--gradient-primary-stop-1),var(--gradient-primary-stop-2)) 1;border-image:linear-gradient(0deg,var(--gradient-primary-stop-1),var(--gradient-primary-stop-2)) 1}.border-gradient-primary-right{-o-border-image:linear-gradient(90deg,var(--gradient-primary-stop-1),var(--gradient-primary-stop-2)) 1;border-image:linear-gradient(90deg,var(--gradient-primary-stop-1),var(--gradient-primary-stop-2)) 1}.border-gradient-primary-bottom{-o-border-image:linear-gradient(180deg,var(--gradient-primary-stop-1),var(--gradient-primary-stop-2)) 1;border-image:linear-gradient(180deg,var(--gradient-primary-stop-1),var(--gradient-primary-stop-2)) 1}.border-gradient-primary-left{-o-border-image:linear-gradient(270deg,var(--gradient-primary-stop-1),var(--gradient-primary-stop-2)) 1;border-image:linear-gradient(270deg,var(--gradient-primary-stop-1),var(--gradient-primary-stop-2)) 1}.border-gradient-secondary{-o-border-image:radial-gradient(var(--gradient-secondary-stop-1),var(--gradient-secondary-stop-2)) 1;border-image:radial-gradient(var(--gradient-secondary-stop-1),var(--gradient-secondary-stop-2)) 1}.border-gradient-secondary-top{-o-border-image:linear-gradient(0deg,var(--gradient-secondary-stop-1),var(--gradient-secondary-stop-2)) 1;border-image:linear-gradient(0deg,var(--gradient-secondary-stop-1),var(--gradient-secondary-stop-2)) 1}.border-gradient-secondary-right{-o-border-image:linear-gradient(90deg,var(--gradient-secondary-stop-1),var(--gradient-secondary-stop-2)) 1;border-image:linear-gradient(90deg,var(--gradient-secondary-stop-1),var(--gradient-secondary-stop-2)) 1}.border-gradient-secondary-bottom{-o-border-image:linear-gradient(180deg,var(--gradient-secondary-stop-1),var(--gradient-secondary-stop-2)) 1;border-image:linear-gradient(180deg,var(--gradient-secondary-stop-1),var(--gradient-secondary-stop-2)) 1}.border-gradient-secondary-left{-o-border-image:linear-gradient(270deg,var(--gradient-secondary-stop-1),var(--gradient-secondary-stop-2)) 1;border-image:linear-gradient(270deg,var(--gradient-secondary-stop-1),var(--gradient-secondary-stop-2)) 1}.border-gradient-tertiary{-o-border-image:radial-gradient(var(--gradient-tertiary-stop-1),var(--gradient-tertiary-stop-2)) 1;border-image:radial-gradient(var(--gradient-tertiary-stop-1),var(--gradient-tertiary-stop-2)) 1}.border-gradient-tertiary-top{-o-border-image:linear-gradient(0deg,var(--gradient-tertiary-stop-1),var(--gradient-tertiary-stop-2)) 1;border-image:linear-gradient(0deg,var(--gradient-tertiary-stop-1),var(--gradient-tertiary-stop-2)) 1}.border-gradient-tertiary-right{-o-border-image:linear-gradient(90deg,var(--gradient-tertiary-stop-1),var(--gradient-tertiary-stop-2)) 1;border-image:linear-gradient(90deg,var(--gradient-tertiary-stop-1),var(--gradient-tertiary-stop-2)) 1}.border-gradient-tertiary-bottom{-o-border-image:linear-gradient(180deg,var(--gradient-tertiary-stop-1),var(--gradient-tertiary-stop-2)) 1;border-image:linear-gradient(180deg,var(--gradient-tertiary-stop-1),var(--gradient-tertiary-stop-2)) 1}.border-gradient-tertiary-left{-o-border-image:linear-gradient(270deg,var(--gradient-tertiary-stop-1),var(--gradient-tertiary-stop-2)) 1;border-image:linear-gradient(270deg,var(--gradient-tertiary-stop-1),var(--gradient-tertiary-stop-2)) 1}.border-secondary-darker{border-color:hsla(var(--color-secondary-darker-h),var(--color-secondary-darker-s),var(--color-secondary-darker-l),var(--bg-o,1))}.border-secondary-dark{border-color:hsla(var(--color-secondary-dark-h),var(--color-secondary-dark-s),var(--color-secondary-dark-l),var(--bg-o,1))}.border-secondary{border-color:hsla(var(--color-secondary-h),var(--color-secondary-s),var(--color-secondary-l),var(--bg-o,1))}.border-secondary-light{border-color:hsla(var(--color-secondary-light-h),var(--color-secondary-light-s),var(--color-secondary-light-l),var(--bg-o,1))}.border-secondary-lighter{border-color:hsla(var(--color-secondary-lighter-h),var(--color-secondary-lighter-s),var(--color-secondary-lighter-l),var(--bg-o,1))}.border-tertiary-darker{border-color:hsla(var(--color-tertiary-darker-h),var(--color-tertiary-darker-s),var(--color-tertiary-darker-l),var(--bg-o,1))}.border-tertiary-dark{border-color:hsla(var(--color-tertiary-dark-h),var(--color-tertiary-dark-s),var(--color-tertiary-dark-l),var(--bg-o,1))}.border-tertiary{border-color:hsla(var(--color-tertiary-h),var(--color-tertiary-s),var(--color-tertiary-l),var(--bg-o,1))}.border-tertiary-light{border-color:hsla(var(--color-tertiary-light-h),var(--color-tertiary-light-s),var(--color-tertiary-light-l),var(--bg-o,1))}.border-tertiary-lighter{border-color:hsla(var(--color-tertiary-lighter-h),var(--color-tertiary-lighter-s),var(--color-tertiary-lighter-l),var(--bg-o,1))}.border-quaternary-darker{border-color:hsla(var(--color-quaternary-darker-h),var(--color-quaternary-darker-s),var(--color-quaternary-darker-l),var(--bg-o,1))}.border-quaternary-dark{border-color:hsla(var(--color-quaternary-dark-h),var(--color-quaternary-dark-s),var(--color-quaternary-dark-l),var(--bg-o,1))}.border-quaternary{border-color:hsla(var(--color-quaternary-h),var(--color-quaternary-s),var(--color-quaternary-l),var(--bg-o,1))}.border-quaternary-light{border-color:hsla(var(--color-quaternary-light-h),var(--color-quaternary-light-s),var(--color-quaternary-light-l),var(--bg-o,1))}.border-quaternary-lighter{border-color:hsla(var(--color-quaternary-lighter-h),var(--color-quaternary-lighter-s),var(--color-quaternary-lighter-l),var(--bg-o,1))}.border-quinary-darker{border-color:hsla(var(--color-quinary-darker-h),var(--color-quinary-darker-s),var(--color-quinary-darker-l),var(--bg-o,1))}.border-quinary-dark{border-color:hsla(var(--color-quinary-dark-h),var(--color-quinary-dark-s),var(--color-quinary-dark-l),var(--bg-o,1))}.border-quinary{border-color:hsla(var(--color-quinary-h),var(--color-quinary-s),var(--color-quinary-l),var(--bg-o,1))}.border-quinary-light{border-color:hsla(var(--color-quinary-light-h),var(--color-quinary-light-s),var(--color-quinary-light-l),var(--bg-o,1))}.border-quinary-lighter{border-color:hsla(var(--color-quinary-lighter-h),var(--color-quinary-lighter-s),var(--color-quinary-lighter-l),var(--bg-o,1))}:root{--space-unit:1.1rem}*,:root{--space-xxxxs:calc(0.125 * var(--space-unit));--space-xxxs:calc(0.25 * var(--space-unit));--space-xxs:calc(0.375 * var(--space-unit));--space-xs:calc(0.5 * var(--space-unit));--space-sm:calc(0.75 * var(--space-unit));--space-md:calc(1.5 * var(--space-unit));--space-lg:calc(2 * var(--space-unit));--space-xl:calc(3.25 * var(--space-unit));--space-xxl:calc(5.25 * var(--space-unit));--space-xxxl:calc(8.5 * var(--space-unit));--space-xxxxl:calc(13.75 * var(--space-unit));--component-padding:var(--space-md)}@supports (--css:variables){@media (min-width:32rem){*,:root{--component-padding:var(--space-xs)}}@media (min-width:48rem){*,:root{--component-padding:var(--space-xs)}}@media (min-width:64rem){*,:root{--space-xxxxs:calc(0.1875 * var(--space-unit));--space-xxxs:calc(0.375 * var(--space-unit));--space-xxs:calc(0.5625 * var(--space-unit));--space-xs:calc(0.75 * var(--space-unit));--space-sm:calc(1.125 * var(--space-unit));--space-md:calc(1.5 * var(--space-unit));--space-lg:calc(3.125 * var(--space-unit));--space-xl:calc(5.125 * var(--space-unit));--space-xxl:calc(8.25 * var(--space-unit));--space-xxxl:calc(13.25 * var(--space-unit));--space-xxxxl:calc(21.5 * var(--space-unit));--component-padding:var(--space-xs)}}}:root{--radius:0.375em}.hover\:reduce-opacity{opacity:1;transition:all .3s ease}.hover\:reduce-opacity:hover{opacity:.8}.hover\:scale{transition:transform .3s var(--ease-out-back)}.hover\:scale:hover{transform:scale(1.1)}.hover\:elevate{box-shadow:var(--shadow-sm);transition:all .3s ease}.hover\:elevate:hover{box-shadow:var(--shadow-md)}.link-subtle{color:inherit;cursor:pointer;text-decoration:none;transition:all .2s ease}.link-subtle:hover{color:var(--color-primary)}:root{--font-primary:Inter,system-ui,sans-serif;--text-base-size:1rem;--text-scale-ratio:1.3;--body-line-height:1.4;--heading-line-height:1.2;--font-primary-capital-letter:1;--text-unit:var(--text-base-size)}*,:root{--text-xs:calc((var(--text-unit) / var(--text-scale-ratio)) / var(--text-scale-ratio));--text-sm:calc(var(--text-xs) * var(--text-scale-ratio));--text-md:calc(var(--text-sm) * var(--text-scale-ratio) * var(--text-scale-ratio));--text-lg:calc(var(--text-md) * var(--text-scale-ratio));--text-xl:calc(var(--text-lg) * var(--text-scale-ratio));--text-xxl:calc(var(--text-xl) * var(--text-scale-ratio));--text-xxxl:calc(var(--text-xxl) * var(--text-scale-ratio));--text-xxxxl:calc(var(--text-xxxl) * var(--text-scale-ratio))}@media (min-width:48rem){:root{--text-base-size:1.333em;--text-scale-ratio:1.215}}@media (min-width:64rem){:root{--text-base-size:1.333rem;--text-scale-ratio:1.215}}body{font-family:var(--font-primary)}h1,h2,h3,h4{font-family:var(--font-primary);--heading-font-weight:700}.font-primary{font-family:var(--font-primary)}.color-secondary-darker{color:hsla(var(--color-secondary-darker-h),var(--color-secondary-darker-s),var(--color-secondary-darker-l),var(--color-o,1))}.color-secondary-dark{color:hsla(var(--color-secondary-dark-h),var(--color-secondary-dark-s),var(--color-secondary-dark-l),var(--color-o,1))}.color-secondary{color:hsla(var(--color-secondary-h),var(--color-secondary-s),var(--color-secondary-l),var(--color-o,1))}.color-secondary-light{color:hsla(var(--color-secondary-light-h),var(--color-secondary-light-s),var(--color-secondary-light-l),var(--color-o,1))}.color-secondary-lighter{color:hsla(var(--color-secondary-lighter-h),var(--color-secondary-lighter-s),var(--color-secondary-lighter-l),var(--color-o,1))}.color-tertiary-darker{color:hsla(var(--color-tertiary-darker-h),var(--color-tertiary-darker-s),var(--color-tertiary-darker-l),var(--color-o,1))}.color-tertiary-dark{color:hsla(var(--color-tertiary-dark-h),var(--color-tertiary-dark-s),var(--color-tertiary-dark-l),var(--color-o,1))}.color-tertiary{color:hsla(var(--color-tertiary-h),var(--color-tertiary-s),var(--color-tertiary-l),var(--color-o,1))}.color-tertiary-light{color:hsla(var(--color-tertiary-light-h),var(--color-tertiary-light-s),var(--color-tertiary-light-l),var(--color-o,1))}.color-tertiary-lighter{color:hsla(var(--color-tertiary-lighter-h),var(--color-tertiary-lighter-s),var(--color-tertiary-lighter-l),var(--color-o,1))}.color-quaternary-darker{color:hsla(var(--color-quaternary-darker-h),var(--color-quaternary-darker-s),var(--color-quaternary-darker-l),var(--color-o,1))}.color-quaternary-dark{color:hsla(var(--color-quaternary-dark-h),var(--color-quaternary-dark-s),var(--color-quaternary-dark-l),var(--color-o,1))}.color-quaternary{color:hsla(var(--color-quaternary-h),var(--color-quaternary-s),var(--color-quaternary-l),var(--color-o,1))}.color-quaternary-light{color:hsla(var(--color-quaternary-light-h),var(--color-quaternary-light-s),var(--color-quaternary-light-l),var(--color-o,1))}.color-quaternary-lighter{color:hsla(var(--color-quaternary-lighter-h),var(--color-quaternary-lighter-s),var(--color-quaternary-lighter-l),var(--color-o,1))}.color-quinary-darker{color:hsla(var(--color-quinary-darker-h),var(--color-quinary-darker-s),var(--color-quinary-darker-l),var(--color-o,1))}.color-quinary-dark{color:hsla(var(--color-quinary-dark-h),var(--color-quinary-dark-s),var(--color-quinary-dark-l),var(--color-o,1))}.color-quinary{color:hsla(var(--color-quinary-h),var(--color-quinary-s),var(--color-quinary-l),var(--color-o,1))}.color-quinary-light{color:hsla(var(--color-quinary-light-h),var(--color-quinary-light-s),var(--color-quinary-light-l),var(--color-o,1))}.color-quinary-lighter{color:hsla(var(--color-quinary-lighter-h),var(--color-quinary-lighter-s),var(--color-quinary-lighter-l),var(--color-o,1))}.color-gradient-primary-top{background-image:linear-gradient(0deg,var(--gradient-primary-stop-1),var(--gradient-primary-stop-2))}.color-gradient-primary-right{background-image:linear-gradient(90deg,var(--gradient-primary-stop-1),var(--gradient-primary-stop-2))}.color-gradient-primary-bottom{background-image:linear-gradient(180deg,var(--gradient-primary-stop-1),var(--gradient-primary-stop-2))}.color-gradient-primary-left{background-image:linear-gradient(270deg,var(--gradient-primary-stop-1),var(--gradient-primary-stop-2))}.color-gradient-secondary-top{background-image:linear-gradient(0deg,var(--gradient-secondary-stop-1),var(--gradient-secondary-stop-2))}.color-gradient-secondary-right{background-image:linear-gradient(90deg,var(--gradient-secondary-stop-1),var(--gradient-secondary-stop-2))}.color-gradient-secondary-bottom{background-image:linear-gradient(180deg,var(--gradient-secondary-stop-1),var(--gradient-secondary-stop-2))}.color-gradient-secondary-left{background-image:linear-gradient(270deg,var(--gradient-secondary-stop-1),var(--gradient-secondary-stop-2))}.color-gradient-tertiary-top{background-image:linear-gradient(0deg,var(--gradient-tertiary-stop-1),var(--gradient-tertiary-stop-2))}.color-gradient-tertiary-right{background-image:linear-gradient(90deg,var(--gradient-tertiary-stop-1),var(--gradient-tertiary-stop-2))}.color-gradient-tertiary-bottom{background-image:linear-gradient(180deg,var(--gradient-tertiary-stop-1),var(--gradient-tertiary-stop-2))}.color-gradient-tertiary-left{background-image:linear-gradient(270deg,var(--gradient-tertiary-stop-1),var(--gradient-tertiary-stop-2))}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.link{text-decoration:none;background-image:linear-gradient(to right,currentColor 50%,hsla(var(--color-contrast-higher-h),var(--color-contrast-higher-s),var(--color-contrast-higher-l),.15) 50%);background-size:200% 1px;background-repeat:no-repeat;background-position:100% 100%;transition:background-position .2s}.link:hover{background-position:0 100%}mark{background-color:hsla(var(--color-accent-h),var(--color-accent-s),var(--color-accent-l),.2);color:inherit}.text-component{--line-height-multiplier:1;--text-space-y-multiplier:1}.text-component>*{--text-unit:1em;--space-unit:1em}.text-component blockquote{padding-left:1em;border-left:4px solid var(--color-contrast-lower);font-style:italic}.text-component hr{background:var(--color-contrast-lower);height:1px}.text-component figcaption{font-size:var(--text-sm);color:var(--color-contrast-low)}.article{--body-line-height:1.58;--text-space-y-multiplier:1.2}:root{--btn-font-size:1em;--btn-padding-x:var(--space-sm);--btn-padding-y:var(--space-xxs);--btn-radius:var(--radius-md)}.btn{background:var(--color-bg-dark);color:var(--color-contrast-higher);cursor:pointer;text-decoration:none;line-height:1.2;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;transition:all .2s ease;will-change:transform}.btn:focus{box-shadow:0 0 0 2px var(--color-bg),0 0 0 4px hsla(var(--color-contrast-higher-h),var(--color-contrast-higher-s),var(--color-contrast-higher-l),.15);outline:0}.btn:active{transform:translateY(2px)}.btn--primary{background:var(--color-primary);color:var(--color-white);box-shadow:inset 0 1px 0 hsla(var(--color-white-h),var(--color-white-s),var(--color-white-l),.15),0 1px 3px hsla(var(--color-primary-darker-h),var(--color-primary-darker-s),var(--color-primary-darker-l),.25),0 2px 6px hsla(var(--color-primary-darker-h),var(--color-primary-darker-s),var(--color-primary-darker-l),.1),0 6px 10px -2px hsla(var(--color-primary-darker-h),var(--color-primary-darker-s),var(--color-primary-darker-l),.25)}.btn--primary:hover{background:var(--color-primary-light);box-shadow:inset 0 1px 0 hsla(var(--color-white-h),var(--color-white-s),var(--color-white-l),.15),0 1px 2px hsla(var(--color-primary-darker-h),var(--color-primary-darker-s),var(--color-primary-darker-l),.25),0 1px 4px hsla(var(--color-primary-darker-h),var(--color-primary-darker-s),var(--color-primary-darker-l),.1),0 3px 6px -2px hsla(var(--color-primary-darker-h),var(--color-primary-darker-s),var(--color-primary-darker-l),.25)}.btn--primary:focus{box-shadow:inset 0 1px 0 hsla(var(--color-white-h),var(--color-white-s),var(--color-white-l),.15),0 1px 2px hsla(var(--color-primary-darker-h),var(--color-primary-darker-s),var(--color-primary-darker-l),.25),0 1px 4px hsla(var(--color-primary-darker-h),var(--color-primary-darker-s),var(--color-primary-darker-l),.1),0 3px 6px -2px hsla(var(--color-primary-darker-h),var(--color-primary-darker-s),var(--color-primary-darker-l),.25),0 0 0 2px var(--color-bg),0 0 0 4px var(--color-primary)}.btn--subtle{background:var(--color-bg-lighter);color:var(--color-contrast-higher);box-shadow:inset 0 1px 0 hsla(var(--color-white-h),var(--color-white-s),var(--color-white-l),.1),0 0 0 1px hsla(var(--color-black-h),var(--color-black-s),var(--color-black-l),.02),0 1px 3px -1px hsla(var(--color-black-h),var(--color-black-s),var(--color-black-l),.2),0 3px 6px hsla(var(--color-black-h),var(--color-black-s),var(--color-black-l),.12)}.btn--subtle:hover{background:var(--color-bg-light);box-shadow:inset 0 1px 0 hsla(var(--color-white-h),var(--color-white-s),var(--color-white-l),.1),0 0 0 1px hsla(var(--color-black-h),var(--color-black-s),var(--color-black-l),.02),0 1px 2px hsla(var(--color-black-h),var(--color-black-s),var(--color-black-l),.12),0 1px 3px -1px hsla(var(--color-black-h),var(--color-black-s),var(--color-black-l),.2)}.btn--subtle:focus{box-shadow:inset 0 1px 0 hsla(var(--color-white-h),var(--color-white-s),var(--color-white-l),.1),0 0 0 1px hsla(var(--color-black-h),var(--color-black-s),var(--color-black-l),.02),0 1px 3px -1px hsla(var(--color-black-h),var(--color-black-s),var(--color-black-l),.2),0 3px 6px hsla(var(--color-black-h),var(--color-black-s),var(--color-black-l),.12),0 0 0 2px var(--color-bg),0 0 0 4px var(--color-contrast-high)}.btn--accent{background:var(--color-quinary);color:var(--color-white);box-shadow:inset 0 1px 0 hsla(var(--color-white-h),var(--color-white-s),var(--color-white-l),.15),0 1px 3px hsla(var(--color-accent-darker-h),var(--color-accent-darker-s),var(--color-accent-darker-l),.25),0 2px 6px hsla(var(--color-accent-darker-h),var(--color-accent-darker-s),var(--color-accent-darker-l),.1),0 6px 10px -2px hsla(var(--color-accent-darker-h),var(--color-accent-darker-s),var(--color-accent-darker-l),.25)}.btn--accent:hover{background:var(--color-accent-light);box-shadow:inset 0 1px 0 hsla(var(--color-white-h),var(--color-white-s),var(--color-white-l),.15),0 1px 2px hsla(var(--color-accent-darker-h),var(--color-accent-darker-s),var(--color-accent-darker-l),.25),0 1px 4px hsla(var(--color-accent-darker-h),var(--color-accent-darker-s),var(--color-accent-darker-l),.1),0 3px 6px -2px hsla(var(--color-accent-darker-h),var(--color-accent-darker-s),var(--color-accent-darker-l),.1)}.btn--accent:focus{box-shadow:inset 0 1px 0 hsla(var(--color-white-h),var(--color-white-s),var(--color-white-l),.15),0 1px 2px hsla(var(--color-accent-darker-h),var(--color-accent-darker-s),var(--color-accent-darker-l),.25),0 1px 4px hsla(var(--color-accent-darker-h),var(--color-accent-darker-s),var(--color-accent-darker-l),.1),0 3px 6px -2px hsla(var(--color-accent-darker-h),var(--color-accent-darker-s),var(--color-accent-darker-l),.1),0 0 0 2px var(--color-bg),0 0 0 4px var(--color-accent)}.btn--disabled,.btn[disabled],.btn[readonly]{opacity:.6;cursor:not-allowed}.btn--sm{font-size:.8em}.btn--md{font-size:1.2em}.btn--lg{font-size:1.4em}:root{--form-control-font-size:1em;--form-control-padding-x:var(--space-xs);--form-control-padding-y:var(--space-xxs);--form-control-radius:var(--radius-md)}.form-control{background:var(--color-bg-dark);line-height:1.2;box-shadow:inset 0 0 0 1px var(--color-contrast-lower);transition:all .2s ease}.form-control::-moz-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 0 0 0 1px hsla(var(--color-contrast-lower-h),var(--color-contrast-lower-s),var(--color-contrast-lower-l),0),0 0 0 2px var(--color-primary),var(--shadow-sm);outline:0}.form-control--disabled,.form-control[disabled],.form-control[readonly]{opacity:.5;cursor:not-allowed}.form-control.form-control--error,.form-control[aria-invalid=true]{box-shadow:inset 0 0 0 1px hsla(var(--color-contrast-lower-h),var(--color-contrast-lower-s),var(--color-contrast-lower-l),0),0 0 0 2px var(--color-error)}.form-control.form-control--error:focus,.form-control.form-control--error:focus-within,.form-control[aria-invalid=true]:focus,.form-control[aria-invalid=true]:focus-within{box-shadow:inset 0 0 0 1px hsla(var(--color-contrast-lower-h),var(--color-contrast-lower-s),var(--color-contrast-lower-l),0),0 0 0 2px var(--color-error),var(--shadow-sm)}/*! purgecss start ignore */:root{--accordion-border-width:1px;--accordion-icon-size:20px;--accordion-icon-stroke-width:2px}.accordion__item{border-style:solid;border-color:var(--color-contrast-lower);border-bottom-width:var(--accordion-border-width)}.accordion__item:first-child{border-top-width:var(--accordion-border-width)}.accordion__header{width:100%;display:flex;align-items:center;justify-content:space-between;text-align:left;cursor:pointer}.accordion__header .icon{--size:var(--accordion-icon-size)}.accordion__header .icon .icon__group{stroke-width:var(--accordion-icon-stroke-width)}.accordion__icon-arrow .icon__group,.accordion__icon-arrow-v2 .icon__group,.accordion__icon-plus .icon__group{will-change:transform;transform-origin:50% 50%}.accordion__icon-arrow .icon__group>*{transform-origin:10px 14px}.accordion__icon-arrow-v2 .icon__group>*{transform-origin:50% 50%;stroke-dasharray:20;transform:translateY(4px)}.accordion__icon-arrow-v2 .icon__group>:first-child{stroke-dashoffset:10.15}.accordion__icon-arrow-v2 .icon__group>:last-child{stroke-dashoffset:10.15}.accordion__icon-plus .icon__group{transform:rotate(-90deg)}.accordion__icon-plus .icon__group>*{transform-origin:50% 50%}.accordion__icon-plus .icon__group>:first-child{transform:rotate(-90deg)}.accordion__item--is-open>.accordion__header>.accordion__icon-arrow .icon__group>:first-child{transform:translateY(-8px) rotate(-90deg)}.accordion__item--is-open>.accordion__header>.accordion__icon-arrow .icon__group>:last-child{transform:translateY(-8px) rotate(90deg)}.accordion__item--is-open>.accordion__header>.accordion__icon-arrow-v2 .icon__group{transform:rotate(-90deg)}.accordion__item--is-open>.accordion__header>.accordion__icon-arrow-v2 .icon__group :last-child,.accordion__item--is-open>.accordion__header>.accordion__icon-arrow-v2 .icon__group>:first-child{stroke-dashoffset:0;transform:translateY(0)}.accordion__item--is-open>.accordion__header>.accordion__icon-plus .icon__group{transform:rotate(0)}.accordion__item--is-open>.accordion__header>.accordion__icon-plus .icon__group>:first-child{transform:rotate(0)}.accordion__panel{display:none;will-change:height;transform:translateZ(0)}.accordion__item--is-open>.accordion__panel{display:block}.accordion[data-animation=on] .accordion__item--is-open .accordion__panel>*{animation:accordion-entry-animation .4s var(--ease-out)}.accordion[data-animation=on] .accordion__icon-arrow .icon__group,.accordion[data-animation=on] .accordion__icon-arrow-v2 .icon__group,.accordion[data-animation=on] .accordion__icon-plus .icon__group{transition:transform .3s var(--ease-out)}.accordion[data-animation=on] .accordion__icon-arrow .icon__group>*,.accordion[data-animation=on] .accordion__icon-arrow-v2 .icon__group>*,.accordion[data-animation=on] .accordion__icon-plus .icon__group>*{transition:transform .3s,stroke-dashoffset .3s;transition-timing-function:var(--ease-out)}@keyframes accordion-entry-animation{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}: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 ol,.list ul,.text-component .list ol,.text-component .list ul{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))}.list ol>li:last-child,.list ul>li:last-child,.list>li:last-child,.text-component .list ol>li:last-child,.text-component .list ul>li:last-child,.text-component .list>li:last-child{margin-bottom:0}.list ol>li:last-child,.list ul>li:last-child,.list:not(.list--border)>li:last-child,.text-component .list ol>li:last-child,.text-component .list ul>li:last-child,.text-component .list:not(.list--border)>li:last-child{padding-bottom:0}.list--ol,.list--ul,.text-component .list--ol,.text-component .list--ul{--list-offset:calc(var(--list-bullet-size) + var(--list-bullet-margin-right))}.list--ol ol,.list--ol ul,.list--ul ol,.list--ul ul,.text-component .list--ol ol,.text-component .list--ol ul,.text-component .list--ul ol,.text-component .list--ul ul{padding-left:0}.list--ol li,.list--ul li,.text-component .list--ol li,.text-component .list--ul li{padding-left:var(--list-offset)}.list--ol li::before,.list--ul li::before,.text-component .list--ol li::before,.text-component .list--ul li::before{display:inline-flex;justify-content:center;align-items:center;width:var(--list-bullet-size);height:var(--list-bullet-size);vertical-align:middle;position:relative;top:-.1em;left:calc(var(--list-bullet-margin-right) * -1);margin-left:calc(var(--list-bullet-size) * -1)}.list--ul,.text-component .list--ul{--list-bullet-size:7px;--list-bullet-margin-right:12px}.list--ul>li::before,.text-component .list--ul>li::before{content:"";border-radius:50%;color:hsla(var(--color-contrast-higher-h),var(--color-contrast-higher-s),var(--color-contrast-higher-l),.1);background-color:currentColor}.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:6px;--list-bullet-font-size:14px;counter-reset:list-items}.list--ol>li,.text-component .list--ol>li{counter-increment:list-items}.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-h),var(--color-contrast-higher-s),var(--color-contrast-higher-l),.075);color:var(--color-contrast-higher);line-height:1;border-radius:50%}.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-h),var(--color-contrast-higher-s),var(--color-contrast-higher-l),.075)}.list--border li:not(:last-child),.text-component .list--border li:not(:last-child){border-bottom:1px solid var(--color-contrast-lower)}.list--border ol,.list--border ul,.text-component .list--border ol,.text-component .list--border ul{border-top:1px solid var(--color-contrast-lower)}.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 ol,.list--icons ul,.text-component .list--icons ol,.text-component .list--icons ul{padding-left:var(--list-offset)}.list__icon{position:relative;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)}.footer-v2{position:relative;z-index:1}.footer-v2__list{display:grid;grid-template-columns:1fr;gap:var(--space-lg)}@media (min-width:32rem){.footer-v2__list{grid-template-columns:repeat(2,1fr)}}@media (min-width:64rem){.footer-v2__list{grid-template-columns:repeat(4,1fr)}}.footer-v2__item{display:grid;gap:var(--space-sm);align-content:start}@media (min-width:64rem){.footer-v2__item{gap:var(--space-xs)}}.footer-v2__item a{color:var(--color-contrast-medium)}.footer-v2__item a:hover{color:var(--color-contrast-high)}@media (min-width:64rem){.footer-v2__item a{font-size:var(--text-sm)}}.footer-v2__socials{display:flex;justify-content:center;margin-bottom:var(--space-sm)}.footer-v2__socials a{text-decoration:none;display:inline-block;margin:0 var(--space-xxxs);color:var(--color-contrast-medium)}.footer-v2__socials a:hover{color:var(--color-contrast-high)}.footer-v2__socials a svg{display:block;width:1em;height:1em;color:inherit}.footer-v2__print{font-size:var(--text-sm);color:var(--color-contrast-medium);text-align:center}.footer-v2__print p{margin-bottom:var(--space-sm)}.footer-v2__print a{color:inherit}.footer-v2__print a:hover{color:var(--color-contrast-high)}@media (min-width:64rem){.footer-v2__print{font-size:var(--text-xs)}}html{scroll-behavior:smooth}:root{--accordion-v2-icon-size:20px;--accordion-v2-icon-stroke-width:2px}.accordion-v2__item{background-color:var(--color-bg-light);box-shadow:var(--inner-glow-top),var(--shadow-sm);border-radius:var(--radius-md);transition:.3s}.accordion-v2__item:hover{box-shadow:var(--inner-glow-top),var(--shadow-md)}.accordion-v2__header{width:100%;display:flex;align-items:center;justify-content:space-between;text-align:left;cursor:pointer}.accordion-v2__header .icon{--size:var(--accordion-v2-icon-size)}.accordion-v2__header .icon .icon__group{stroke-width:var(--accordion-v2-icon-stroke-width)}.accordion-v2__icon-arrow .icon__group{will-change:transform;transform-origin:50% 50%}.accordion-v2__icon-arrow .icon__group>*{transform-origin:50% 50%;stroke-dasharray:20;transform:translateY(4px)}.accordion-v2__icon-arrow .icon__group>:first-child{stroke-dashoffset:10.15}.accordion-v2__icon-arrow .icon__group>:last-child{stroke-dashoffset:10.15}.accordion-v2__item--is-open>.accordion-v2__header>.accordion-v2__icon-arrow .icon__group{transform:rotate(-90deg)}.accordion-v2__item--is-open>.accordion-v2__header>.accordion-v2__icon-arrow .icon__group :last-child,.accordion-v2__item--is-open>.accordion-v2__header>.accordion-v2__icon-arrow .icon__group>:first-child{stroke-dashoffset:0;transform:translateY(0)}.accordion-v2__panel{display:none;will-change:height;transform:translateZ(0)}.accordion-v2__item--is-open>.accordion-v2__panel{display:block}.accordion-v2[data-animation=on] .accordion-v2__item--is-open .accordion-v2__panel>*{animation:accordion-v2-entry-animation .4s var(--ease-out)}.accordion-v2[data-animation=on] .accordion-v2__icon-arrow .icon__group{transition:transform .3s var(--ease-out)}.accordion-v2[data-animation=on] .accordion-v2__icon-arrow .icon__group>*{transition:transform .3s,stroke-dashoffset .3s;transition-timing-function:var(--ease-out)}@keyframes accordion-v2-entry-animation{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}:root{--toc-border-width:1px}.toc{--space-unit:1rem}.toc__list{position:relative}.toc__list .toc__list .toc__link{padding-left:calc(var(--space-sm) * 2)}.toc__label,.toc__link{padding:var(--space-xxxs) var(--space-sm)}.toc__link{position:relative;color:var(--color-contrast-medium);text-decoration:none}.toc__link::before{content:"";width:var(--toc-border-width);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{text-transform:uppercase;letter-spacing:.1em;font-size:var(--text-sm)}.toc__control{width:100%;display:flex;align-items:center;justify-content:space-between}.toc__control-text{position:relative}.toc__control-text>*{display:inline-block;transition:opacity .4s,transform .4s var(--ease-out)}.toc__control-text>:last-child{position:absolute;top:0;left:0;opacity:0;pointer-events:none;transform:translateY(-10px)}.toc__icon-arrow .icon__group{will-change:transform;transform-origin:8px 8px;transition:transform .3s var(--ease-out)}.toc__icon-arrow .icon__group>*{transform-origin:8px 8px;stroke-dasharray:17;transform:translateY(3px);transition:transform .3s,stroke-dashoffset .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)}.toc:not(.toc--static){border-radius:var(--radius-md);background-color:var(--color-bg-light);box-shadow:var(--inner-glow),var(--shadow-sm);transition:.3s}.toc:not(.toc--static):hover{box-shadow:var(--inner-glow),var(--shadow-md)}.toc:not(.toc--static) .toc__nav{display:none;margin:var(--space-xxs) 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{transform:translateY(10px);opacity:0;pointer-events:none}.toc:not(.toc--static).toc--expanded .toc__control-text>:last-child{opacity:1;pointer-events:auto;transform:translateY(0)}.toc:not(.toc--static).toc--expanded .toc__nav{display:block;animation:toc-entry-animation .4s var(--ease-out)}.toc:not(.toc--static).toc--expanded .toc__icon-arrow .icon__group{transform:rotate(-90deg)}.toc:not(.toc--static).toc--expanded .toc__icon-arrow .icon__group :last-child,.toc:not(.toc--static).toc--expanded .toc__icon-arrow .icon__group>:first-child{stroke-dashoffset:0;transform:translateY(0)}.toc--static{box-shadow:inset var(--toc-border-width) 0 0 var(--color-contrast-lower)}.toc--static[class*=position-sticky]{top:var(--space-md);max-height:calc(100vh - var(--space-md) * 2);overflow:auto;-webkit-overflow-scrolling:touch}.toc--static .toc__label{font-size:var(--text-xs)}.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}.toc-content--toc-static :target{animation:toc-target 2s}@keyframes toc-target{0%,50%{outline:2px solid hsla(var(--color-primary-h),var(--color-primary-s),var(--color-primary-l),.5)}100%{outline:2px solid hsla(var(--color-primary-h),var(--color-primary-s),var(--color-primary-l),0)}}@keyframes toc-entry-animation{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}[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"}} \ No newline at end of file diff --git a/assets/css/style.scss b/assets/css/style.scss new file mode 100644 index 0000000..951f1b8 --- /dev/null +++ b/assets/css/style.scss @@ -0,0 +1,13 @@ +@use 'base' as * with ( + $breakpoints: ( + 'xs': 32rem, // ~512px + 'sm': 48rem, // ~768px + 'md': 64rem, // ~1024px + 'lg': 80rem, // ~1280px + 'xl': 90rem // ~1440px + ), + $grid-columns: 12 +); + +@use 'custom-style'; +@use 'components/**/*.scss'; \ No newline at end of file diff --git a/assets/img/.DS_Store b/assets/img/.DS_Store new file mode 100644 index 0000000..198241a Binary files /dev/null and b/assets/img/.DS_Store differ diff --git a/assets/img/Placeholder.svg b/assets/img/Placeholder.svg new file mode 100644 index 0000000..4d730e8 --- /dev/null +++ b/assets/img/Placeholder.svg @@ -0,0 +1,37 @@ + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/assets/img/ac.svg b/assets/img/ac.svg new file mode 100644 index 0000000..a70ea51 --- /dev/null +++ b/assets/img/ac.svg @@ -0,0 +1,33 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/assets/img/accessible.svg b/assets/img/accessible.svg new file mode 100644 index 0000000..5e95b14 --- /dev/null +++ b/assets/img/accessible.svg @@ -0,0 +1 @@ +wheelchair \ No newline at end of file diff --git a/assets/img/brevo.svg b/assets/img/brevo.svg new file mode 100644 index 0000000..a86cb89 --- /dev/null +++ b/assets/img/brevo.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/img/campaign.png b/assets/img/campaign.png new file mode 100644 index 0000000..034cc15 Binary files /dev/null and b/assets/img/campaign.png differ diff --git a/assets/img/cm.svg b/assets/img/cm.svg new file mode 100644 index 0000000..14e713d --- /dev/null +++ b/assets/img/cm.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/img/constant-contact.svg b/assets/img/constant-contact.svg new file mode 100644 index 0000000..d52d969 --- /dev/null +++ b/assets/img/constant-contact.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/img/email.svg b/assets/img/email.svg new file mode 100644 index 0000000..79cb34e --- /dev/null +++ b/assets/img/email.svg @@ -0,0 +1 @@ +email open \ No newline at end of file diff --git a/assets/img/favicon.svg b/assets/img/favicon.svg new file mode 100644 index 0000000..1502560 --- /dev/null +++ b/assets/img/favicon.svg @@ -0,0 +1 @@ +favicon \ No newline at end of file diff --git a/assets/img/fds-footer-logo.svg b/assets/img/fds-footer-logo.svg new file mode 100644 index 0000000..f5f8fa7 --- /dev/null +++ b/assets/img/fds-footer-logo.svg @@ -0,0 +1,95 @@ + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/assets/img/fds-header-logo.svg b/assets/img/fds-header-logo.svg new file mode 100644 index 0000000..8efc93a --- /dev/null +++ b/assets/img/fds-header-logo.svg @@ -0,0 +1,42 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/assets/img/gr.svg b/assets/img/gr.svg new file mode 100644 index 0000000..4eed4c0 --- /dev/null +++ b/assets/img/gr.svg @@ -0,0 +1,43 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/assets/img/logo-github.svg b/assets/img/logo-github.svg new file mode 100644 index 0000000..bd8ae07 --- /dev/null +++ b/assets/img/logo-github.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/img/logo-instagram.svg b/assets/img/logo-instagram.svg new file mode 100644 index 0000000..d8f66dd --- /dev/null +++ b/assets/img/logo-instagram.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/img/logo-linkedin.svg b/assets/img/logo-linkedin.svg new file mode 100644 index 0000000..347ac65 --- /dev/null +++ b/assets/img/logo-linkedin.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/img/mailchimp.svg b/assets/img/mailchimp.svg new file mode 100644 index 0000000..6ba5330 --- /dev/null +++ b/assets/img/mailchimp.svg @@ -0,0 +1,39 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/assets/img/newsletter.svg b/assets/img/newsletter.svg new file mode 100644 index 0000000..e642111 --- /dev/null +++ b/assets/img/newsletter.svg @@ -0,0 +1 @@ +newsletter \ No newline at end of file diff --git a/assets/img/responsive.svg b/assets/img/responsive.svg new file mode 100644 index 0000000..88ddfec --- /dev/null +++ b/assets/img/responsive.svg @@ -0,0 +1 @@ +window responsive \ No newline at end of file diff --git a/assets/img/testing.svg b/assets/img/testing.svg new file mode 100644 index 0000000..1a11942 --- /dev/null +++ b/assets/img/testing.svg @@ -0,0 +1 @@ +chemistry \ No newline at end of file diff --git a/assets/js/components/_1_accordion.js b/assets/js/components/_1_accordion.js new file mode 100644 index 0000000..ee90f23 --- /dev/null +++ b/assets/js/components/_1_accordion.js @@ -0,0 +1,129 @@ +// File#: _1_accordion +// Usage: codyhouse.co/license +(function() { + var Accordion = function(element) { + this.element = element; + this.items = getChildrenByClassName(this.element, 'js-accordion__item'); + this.version = this.element.getAttribute('data-version') ? '-'+this.element.getAttribute('data-version') : ''; + this.showClass = 'accordion'+this.version+'__item--is-open'; + this.animateHeight = (this.element.getAttribute('data-animation') == 'on'); + this.multiItems = !(this.element.getAttribute('data-multi-items') == 'off'); + // deep linking options + this.deepLinkOn = this.element.getAttribute('data-deep-link') == 'on'; + // init accordion + this.initAccordion(); + }; + + Accordion.prototype.initAccordion = function() { + //set initial aria attributes + for( var i = 0; i < this.items.length; i++) { + var button = this.items[i].getElementsByTagName('button')[0], + content = this.items[i].getElementsByClassName('js-accordion__panel')[0], + isOpen = this.items[i].classList.contains(this.showClass) ? 'true' : 'false'; + button.setAttribute('aria-expanded', isOpen); + button.setAttribute('aria-controls', 'accordion-content-'+i); + button.setAttribute('id', 'accordion-header-'+i); + button.classList.add('js-accordion__trigger'); + content.setAttribute('aria-labelledby', 'accordion-header-'+i); + content.setAttribute('id', 'accordion-content-'+i); + } + + //listen for Accordion events + this.initAccordionEvents(); + + // check deep linking option + this.initDeepLink(); + }; + + Accordion.prototype.initAccordionEvents = function() { + var self = this; + + this.element.addEventListener('click', function(event) { + var trigger = event.target.closest('.js-accordion__trigger'); + //check index to make sure the click didn't happen inside a children accordion + if( trigger && Array.prototype.indexOf.call(self.items, trigger.parentElement) >= 0) self.triggerAccordion(trigger); + }); + }; + + Accordion.prototype.triggerAccordion = function(trigger) { + var bool = (trigger.getAttribute('aria-expanded') === 'true'); + + this.animateAccordion(trigger, bool, false); + + if(!bool && this.deepLinkOn) { + history.replaceState(null, '', '#'+trigger.getAttribute('aria-controls')); + } + }; + + Accordion.prototype.animateAccordion = function(trigger, bool, deepLink) { + var self = this; + var item = trigger.closest('.js-accordion__item'), + content = item.getElementsByClassName('js-accordion__panel')[0], + ariaValue = bool ? 'false' : 'true'; + + if(!bool) item.classList.add(this.showClass); + trigger.setAttribute('aria-expanded', ariaValue); + self.resetContentVisibility(item, content, bool); + + if( !this.multiItems && !bool || deepLink) this.closeSiblings(item); + }; + + Accordion.prototype.resetContentVisibility = function(item, content, bool) { + item.classList.toggle(this.showClass, !bool); + content.removeAttribute("style"); + if(bool && !this.multiItems) { // accordion item has been closed -> check if there's one open to move inside viewport + this.moveContent(); + } + }; + + Accordion.prototype.closeSiblings = function(item) { + //if only one accordion can be open -> search if there's another one open + var index = Array.prototype.indexOf.call(this.items, item); + for( var i = 0; i < this.items.length; i++) { + if(this.items[i].classList.contains(this.showClass) && i != index) { + this.animateAccordion(this.items[i].getElementsByClassName('js-accordion__trigger')[0], true, false); + return false; + } + } + }; + + Accordion.prototype.moveContent = function() { // make sure title of the accordion just opened is inside the viewport + var openAccordion = this.element.getElementsByClassName(this.showClass); + if(openAccordion.length == 0) return; + var boundingRect = openAccordion[0].getBoundingClientRect(); + if(boundingRect.top < 0 || boundingRect.top > window.innerHeight) { + var windowScrollTop = window.scrollY || document.documentElement.scrollTop; + window.scrollTo(0, boundingRect.top + windowScrollTop); + } + }; + + Accordion.prototype.initDeepLink = function() { + if(!this.deepLinkOn) return; + var hash = window.location.hash.substr(1); + if(!hash || hash == '') return; + var trigger = this.element.querySelector('.js-accordion__trigger[aria-controls="'+hash+'"]'); + if(trigger && trigger.getAttribute('aria-expanded') !== 'true') { + this.animateAccordion(trigger, false, true); + setTimeout(function(){trigger.scrollIntoView(true);}); + } + }; + + function getChildrenByClassName(el, className) { + var children = el.children, + childrenByClass = []; + for (var i = 0; i < children.length; i++) { + if (children[i].classList.contains(className)) childrenByClass.push(children[i]); + } + return childrenByClass; + }; + + window.Accordion = Accordion; + + //initialize the Accordion objects + var accordions = document.getElementsByClassName('js-accordion'); + if( accordions.length > 0 ) { + for( var i = 0; i < accordions.length; i++) { + (function(i){new Accordion(accordions[i]);})(i); + } + } +}()); \ No newline at end of file diff --git a/assets/js/components/_1_smooth-scrolling.js b/assets/js/components/_1_smooth-scrolling.js new file mode 100644 index 0000000..1220f0e --- /dev/null +++ b/assets/js/components/_1_smooth-scrolling.js @@ -0,0 +1,145 @@ +if(!Util) function Util () {}; + +Util.scrollTo = function(final, duration, cb, scrollEl) { + var element = scrollEl || window; + var start = element.scrollTop || document.documentElement.scrollTop, + currentTime = null; + + if(!scrollEl) start = window.scrollY || document.documentElement.scrollTop; + + var animateScroll = function(timestamp){ + if (!currentTime) currentTime = timestamp; + var progress = timestamp - currentTime; + if(progress > duration) progress = duration; + var val = Math.easeInOutQuad(progress, start, final-start, duration); + element.scrollTo(0, val); + if(progress < duration) { + window.requestAnimationFrame(animateScroll); + } else { + cb && cb(); + } + }; + + window.requestAnimationFrame(animateScroll); +}; + +Util.moveFocus = function (element) { + if( !element ) element = document.getElementsByTagName('body')[0]; + element.focus(); + if (document.activeElement !== element) { + element.setAttribute('tabindex','-1'); + element.focus(); + } +}; + + +Util.cssSupports = function(property, value) { + return CSS.supports(property, value); +}; + +Math.easeInOutQuad = function (t, b, c, d) { + t /= d/2; + if (t < 1) return c/2*t*t + b; + t--; + return -c/2 * (t*(t-2) - 1) + b; +}; + +// File#: _1_smooth-scrolling +// Usage: codyhouse.co/license +(function() { + var SmoothScroll = function(element) { + if(!('CSS' in window) || !CSS.supports('color', 'var(--color-var)')) return; + this.element = element; + this.scrollDuration = parseInt(this.element.getAttribute('data-duration')) || 300; + this.dataElementY = this.element.getAttribute('data-scrollable-element-y') || this.element.getAttribute('data-scrollable-element') || this.element.getAttribute('data-element'); + this.scrollElementY = this.dataElementY ? document.querySelector(this.dataElementY) : window; + this.dataElementX = this.element.getAttribute('data-scrollable-element-x'); + this.scrollElementX = this.dataElementY ? document.querySelector(this.dataElementX) : window; + this.initScroll(); + }; + + SmoothScroll.prototype.initScroll = function() { + var self = this; + + //detect click on link + this.element.addEventListener('click', function(event){ + event.preventDefault(); + var targetId = event.target.closest('.js-smooth-scroll').getAttribute('href').replace('#', ''), + target = document.getElementById(targetId), + targetTabIndex = target.getAttribute('tabindex'), + windowScrollTop = self.scrollElementY.scrollTop || document.documentElement.scrollTop; + + // scroll vertically + if(!self.dataElementY) windowScrollTop = window.scrollY || document.documentElement.scrollTop; + + var scrollElementY = self.dataElementY ? self.scrollElementY : false; + + var fixedHeight = self.getFixedElementHeight(); // check if there's a fixed element on the page + Util.scrollTo(target.getBoundingClientRect().top + windowScrollTop - fixedHeight, self.scrollDuration, function() { + // scroll horizontally + self.scrollHorizontally(target, fixedHeight); + //move the focus to the target element - don't break keyboard navigation + Util.moveFocus(target); + history.pushState(false, false, '#'+targetId); + self.resetTarget(target, targetTabIndex); + }, scrollElementY); + }); + }; + + SmoothScroll.prototype.scrollHorizontally = function(target, delta) { + var scrollEl = this.dataElementX ? this.scrollElementX : false; + var windowScrollLeft = this.scrollElementX ? this.scrollElementX.scrollLeft : document.documentElement.scrollLeft; + var final = target.getBoundingClientRect().left + windowScrollLeft - delta, + duration = this.scrollDuration; + + var element = scrollEl || window; + var start = element.scrollLeft || document.documentElement.scrollLeft, + currentTime = null; + + if(!scrollEl) start = window.scrollX || document.documentElement.scrollLeft; + // return if there's no need to scroll + if(Math.abs(start - final) < 5) return; + + var animateScroll = function(timestamp){ + if (!currentTime) currentTime = timestamp; + var progress = timestamp - currentTime; + if(progress > duration) progress = duration; + var val = Math.easeInOutQuad(progress, start, final-start, duration); + element.scrollTo({ + left: val, + }); + if(progress < duration) { + window.requestAnimationFrame(animateScroll); + } + }; + + window.requestAnimationFrame(animateScroll); + }; + + SmoothScroll.prototype.resetTarget = function(target, tabindex) { + if( parseInt(target.getAttribute('tabindex')) < 0) { + target.style.outline = 'none'; + !tabindex && target.removeAttribute('tabindex'); + } + }; + + SmoothScroll.prototype.getFixedElementHeight = function() { + var scrollElementY = this.dataElementY ? this.scrollElementY : document.documentElement; + var fixedElementDelta = parseInt(getComputedStyle(scrollElementY).getPropertyValue('scroll-padding')); + if(isNaN(fixedElementDelta) ) { // scroll-padding not supported + fixedElementDelta = 0; + var fixedElement = document.querySelector(this.element.getAttribute('data-fixed-element')); + if(fixedElement) fixedElementDelta = parseInt(fixedElement.getBoundingClientRect().height); + } + return fixedElementDelta; + }; + + //initialize the Smooth Scroll objects + var smoothScrollLinks = document.getElementsByClassName('js-smooth-scroll'); + if( smoothScrollLinks.length > 0 && !Util.cssSupports('scroll-behavior', 'smooth') && window.requestAnimationFrame) { + // you need javascript only if css scroll-behavior is not supported + for( var i = 0; i < smoothScrollLinks.length; i++) { + (function(i){new SmoothScroll(smoothScrollLinks[i]);})(i); + } + } +}()); \ No newline at end of file diff --git a/assets/js/components/_1_tooltip.js b/assets/js/components/_1_tooltip.js new file mode 100644 index 0000000..35c0c68 --- /dev/null +++ b/assets/js/components/_1_tooltip.js @@ -0,0 +1,241 @@ +if(!Util) function Util () {}; + +Util.addClass = function(el, className) { + var classList = className.split(' '); + el.classList.add(classList[0]); + if (classList.length > 1) Util.addClass(el, classList.slice(1).join(' ')); +}; + +Util.removeClass = function(el, className) { + var classList = className.split(' '); + el.classList.remove(classList[0]); + if (classList.length > 1) Util.removeClass(el, classList.slice(1).join(' ')); +}; + +Util.setAttributes = function(el, attrs) { + for(var key in attrs) { + el.setAttribute(key, attrs[key]); + } +}; + +// File#: _1_tooltip +// Usage: codyhouse.co/license +(function() { + var Tooltip = function(element) { + this.element = element; + this.tooltip = false; + this.tooltipIntervalId = false; + this.tooltipContent = this.element.getAttribute('title'); + this.tooltipPosition = (this.element.getAttribute('data-tooltip-position')) ? this.element.getAttribute('data-tooltip-position') : 'top'; + this.tooltipClasses = (this.element.getAttribute('data-tooltip-class')) ? this.element.getAttribute('data-tooltip-class') : false; + this.tooltipId = 'js-tooltip-element'; // id of the tooltip element -> trigger will have the same aria-describedby attr + // there are cases where you only need the aria-label -> SR do not need to read the tooltip content (e.g., footnotes) + this.tooltipDescription = (this.element.getAttribute('data-tooltip-describedby') && this.element.getAttribute('data-tooltip-describedby') == 'false') ? false : true; + + + this.tooltipDelay = this.element.getAttribute('data-tooltip-delay'); // show tooltip after a delay (in ms) + if(!this.tooltipDelay) this.tooltipDelay = 300; + this.tooltipDelta = parseInt(this.element.getAttribute('data-tooltip-gap')); // distance beetwen tooltip and trigger element (in px) + if(isNaN(this.tooltipDelta)) this.tooltipDelta = 10; + this.tooltipTriggerHover = false; + // tooltp sticky option + this.tooltipSticky = (this.tooltipClasses && this.tooltipClasses.indexOf('tooltip--sticky') > -1); + this.tooltipHover = false; + if(this.tooltipSticky) { + this.tooltipHoverInterval = false; + } + // tooltip triangle - css variable to control its position + this.tooltipTriangleVar = '--tooltip-triangle-translate'; + resetTooltipContent(this); + initTooltip(this); + }; + + function resetTooltipContent(tooltip) { + var htmlContent = tooltip.element.getAttribute('data-tooltip-title'); + if(htmlContent) { + tooltip.tooltipContent = htmlContent; + } + }; + + function initTooltip(tooltipObj) { + // reset trigger element + tooltipObj.element.removeAttribute('title'); + tooltipObj.element.setAttribute('tabindex', '0'); + // add event listeners + tooltipObj.element.addEventListener('mouseenter', handleEvent.bind(tooltipObj)); + tooltipObj.element.addEventListener('focus', handleEvent.bind(tooltipObj)); + }; + + function removeTooltipEvents(tooltipObj) { + // remove event listeners + tooltipObj.element.removeEventListener('mouseleave', handleEvent.bind(tooltipObj)); + tooltipObj.element.removeEventListener('blur', handleEvent.bind(tooltipObj)); + }; + + function handleEvent(event) { + // handle events + switch(event.type) { + case 'mouseenter': + case 'focus': + showTooltip(this, event); + break; + case 'mouseleave': + case 'blur': + checkTooltip(this); + break; + case 'newContent': + changeTooltipContent(this, event); + break; + } + }; + + function showTooltip(tooltipObj, event) { + // tooltip has already been triggered + if(tooltipObj.tooltipIntervalId) return; + tooltipObj.tooltipTriggerHover = true; + // listen to close events + tooltipObj.element.addEventListener('mouseleave', handleEvent.bind(tooltipObj)); + tooltipObj.element.addEventListener('blur', handleEvent.bind(tooltipObj)); + // custom event to reset tooltip content + tooltipObj.element.addEventListener('newContent', handleEvent.bind(tooltipObj)); + + // show tooltip with a delay + tooltipObj.tooltipIntervalId = setTimeout(function(){ + createTooltip(tooltipObj); + }, tooltipObj.tooltipDelay); + }; + + function createTooltip(tooltipObj) { + tooltipObj.tooltip = document.getElementById(tooltipObj.tooltipId); + + if( !tooltipObj.tooltip ) { // tooltip element does not yet exist + tooltipObj.tooltip = document.createElement('div'); + document.body.appendChild(tooltipObj.tooltip); + } + + // remove data-reset attribute that is used when updating tooltip content (newContent custom event) + tooltipObj.tooltip.removeAttribute('data-reset'); + + // reset tooltip content/position + Util.setAttributes(tooltipObj.tooltip, {'id': tooltipObj.tooltipId, 'class': 'tooltip tooltip--is-hidden js-tooltip', 'role': 'tooltip'}); + tooltipObj.tooltip.innerHTML = tooltipObj.tooltipContent; + if(tooltipObj.tooltipDescription) tooltipObj.element.setAttribute('aria-describedby', tooltipObj.tooltipId); + if(tooltipObj.tooltipClasses) Util.addClass(tooltipObj.tooltip, tooltipObj.tooltipClasses); + if(tooltipObj.tooltipSticky) Util.addClass(tooltipObj.tooltip, 'tooltip--sticky'); + placeTooltip(tooltipObj); + Util.removeClass(tooltipObj.tooltip, 'tooltip--is-hidden'); + + // if tooltip is sticky, listen to mouse events + if(!tooltipObj.tooltipSticky) return; + tooltipObj.tooltip.addEventListener('mouseenter', function cb(){ + tooltipObj.tooltipHover = true; + if(tooltipObj.tooltipHoverInterval) { + clearInterval(tooltipObj.tooltipHoverInterval); + tooltipObj.tooltipHoverInterval = false; + } + tooltipObj.tooltip.removeEventListener('mouseenter', cb); + tooltipLeaveEvent(tooltipObj); + }); + }; + + function tooltipLeaveEvent(tooltipObj) { + tooltipObj.tooltip.addEventListener('mouseleave', function cb(){ + tooltipObj.tooltipHover = false; + tooltipObj.tooltip.removeEventListener('mouseleave', cb); + hideTooltip(tooltipObj); + }); + }; + + function placeTooltip(tooltipObj) { + // set top and left position of the tooltip according to the data-tooltip-position attr of the trigger + var dimention = [tooltipObj.tooltip.offsetHeight, tooltipObj.tooltip.offsetWidth], + positionTrigger = tooltipObj.element.getBoundingClientRect(), + position = [], + scrollY = window.scrollY || window.pageYOffset; + + position['top'] = [ (positionTrigger.top - dimention[0] - tooltipObj.tooltipDelta + scrollY), (positionTrigger.right/2 + positionTrigger.left/2 - dimention[1]/2)]; + position['bottom'] = [ (positionTrigger.bottom + tooltipObj.tooltipDelta + scrollY), (positionTrigger.right/2 + positionTrigger.left/2 - dimention[1]/2)]; + position['left'] = [(positionTrigger.top/2 + positionTrigger.bottom/2 - dimention[0]/2 + scrollY), positionTrigger.left - dimention[1] - tooltipObj.tooltipDelta]; + position['right'] = [(positionTrigger.top/2 + positionTrigger.bottom/2 - dimention[0]/2 + scrollY), positionTrigger.right + tooltipObj.tooltipDelta]; + + var direction = tooltipObj.tooltipPosition; + if( direction == 'top' && position['top'][0] < scrollY) direction = 'bottom'; + else if( direction == 'bottom' && position['bottom'][0] + tooltipObj.tooltipDelta + dimention[0] > scrollY + window.innerHeight) direction = 'top'; + else if( direction == 'left' && position['left'][1] < 0 ) direction = 'right'; + else if( direction == 'right' && position['right'][1] + dimention[1] > window.innerWidth ) direction = 'left'; + + // reset tooltip triangle translate value + tooltipObj.tooltip.style.setProperty(tooltipObj.tooltipTriangleVar, '0px'); + + if(direction == 'top' || direction == 'bottom') { + var deltaMarg = 5; + if(position[direction][1] < 0 ) { + position[direction][1] = deltaMarg; + // make sure triangle is at the center of the tooltip trigger + tooltipObj.tooltip.style.setProperty(tooltipObj.tooltipTriangleVar, (positionTrigger.left + 0.5*positionTrigger.width - 0.5*dimention[1] - deltaMarg)+'px'); + } + if(position[direction][1] + dimention[1] > window.innerWidth ) { + position[direction][1] = window.innerWidth - dimention[1] - deltaMarg; + // make sure triangle is at the center of the tooltip trigger + tooltipObj.tooltip.style.setProperty(tooltipObj.tooltipTriangleVar, (0.5*dimention[1] - (window.innerWidth - positionTrigger.right) - 0.5*positionTrigger.width + deltaMarg)+'px'); + } + } + tooltipObj.tooltip.style.top = position[direction][0]+'px'; + tooltipObj.tooltip.style.left = position[direction][1]+'px'; + Util.addClass(tooltipObj.tooltip, 'tooltip--'+direction); + }; + + function checkTooltip(tooltipObj) { + tooltipObj.tooltipTriggerHover = false; + if(!tooltipObj.tooltipSticky) hideTooltip(tooltipObj); + else { + if(tooltipObj.tooltipHover) return; + if(tooltipObj.tooltipHoverInterval) return; + tooltipObj.tooltipHoverInterval = setTimeout(function(){ + hideTooltip(tooltipObj); + tooltipObj.tooltipHoverInterval = false; + }, 300); + } + }; + + function hideTooltip(tooltipObj) { + if(tooltipObj.tooltipHover || tooltipObj.tooltipTriggerHover) return; + clearInterval(tooltipObj.tooltipIntervalId); + if(tooltipObj.tooltipHoverInterval) { + clearInterval(tooltipObj.tooltipHoverInterval); + tooltipObj.tooltipHoverInterval = false; + } + tooltipObj.tooltipIntervalId = false; + if(!tooltipObj.tooltip) return; + // hide tooltip + removeTooltip(tooltipObj); + // remove events + removeTooltipEvents(tooltipObj); + }; + + function removeTooltip(tooltipObj) { + if(tooltipObj.tooltipContent == tooltipObj.tooltip.innerHTML || tooltipObj.tooltip.getAttribute('data-reset') == 'on') { + Util.addClass(tooltipObj.tooltip, 'tooltip--is-hidden'); + tooltipObj.tooltip.removeAttribute('data-reset'); + } + if(tooltipObj.tooltipDescription) tooltipObj.element.removeAttribute('aria-describedby'); + }; + + function changeTooltipContent(tooltipObj, event) { + if(tooltipObj.tooltip && tooltipObj.tooltipTriggerHover && event.detail) { + tooltipObj.tooltip.innerHTML = event.detail; + tooltipObj.tooltip.setAttribute('data-reset', 'on'); + placeTooltip(tooltipObj); + } + }; + + window.Tooltip = Tooltip; + + //initialize the Tooltip objects + var tooltips = document.getElementsByClassName('js-tooltip-trigger'); + if( tooltips.length > 0 ) { + for( var i = 0; i < tooltips.length; i++) { + (function(i){new Tooltip(tooltips[i]);})(i); + } + } +}()); \ No newline at end of file diff --git a/assets/js/components/_2_table-of-contents.js b/assets/js/components/_2_table-of-contents.js new file mode 100644 index 0000000..8fe3c3a --- /dev/null +++ b/assets/js/components/_2_table-of-contents.js @@ -0,0 +1,208 @@ +if(!Util) function Util () {}; + +Util.hasClass = function(el, className) { + return el.classList.contains(className); +}; + +Util.addClass = function(el, className) { + var classList = className.split(' '); + el.classList.add(classList[0]); + if (classList.length > 1) Util.addClass(el, classList.slice(1).join(' ')); +}; + +Util.removeClass = function(el, className) { + var classList = className.split(' '); + el.classList.remove(classList[0]); + if (classList.length > 1) Util.removeClass(el, classList.slice(1).join(' ')); +}; + +Util.toggleClass = function(el, className, bool) { + if(bool) Util.addClass(el, className); + else Util.removeClass(el, className); +}; + +// File#: _2_table-of-contents +// Usage: codyhouse.co/license +(function() { + var Toc = function(element) { + this.element = element; + this.list = this.element.getElementsByClassName('js-toc__list')[0]; + this.anchors = this.list.querySelectorAll('a[href^="#"]'); + this.sections = getSections(this); + this.controller = this.element.getElementsByClassName('js-toc__control'); + this.controllerLabel = this.element.getElementsByClassName('js-toc__control-label'); + this.content = getTocContent(this); + this.clickScrolling = false; + this.intervalID = false; + this.staticLayoutClass = 'toc--static'; + this.contentStaticLayoutClass = 'toc-content--toc-static'; + this.expandedClass = 'toc--expanded'; + this.isStatic = Util.hasClass(this.element, this.staticLayoutClass); + this.layout = 'static'; + initToc(this); + }; + + function getSections(toc) { + var sections = []; + // get all content sections + for(var i = 0; i < toc.anchors.length; i++) { + var section = document.getElementById(toc.anchors[i].getAttribute('href').replace('#', '')); + if(section) sections.push(section); + } + return sections; + }; + + function getTocContent(toc) { + if(toc.sections.length < 1) return false; + var content = toc.sections[0].closest('.js-toc-content'); + return content; + }; + + function initToc(toc) { + checkTocLayour(toc); // switch between mobile and desktop layout + if(toc.sections.length > 0) { + // listen for click on anchors + toc.list.addEventListener('click', function(event){ + var anchor = event.target.closest('a[href^="#"]'); + if(!anchor) return; + // reset link apperance + toc.clickScrolling = true; + resetAnchors(toc, anchor); + // close toc if expanded on mobile + toggleToc(toc, true); + }); + + // check when a new section enters the viewport + var intersectionObserverSupported = ('IntersectionObserver' in window && 'IntersectionObserverEntry' in window && 'intersectionRatio' in window.IntersectionObserverEntry.prototype); + if(intersectionObserverSupported) { + var observer = new IntersectionObserver( + function(entries, observer) { + entries.forEach(function(entry){ + if(!toc.clickScrolling) { // do not update classes if user clicked on a link + getVisibleSection(toc); + } + }); + }, + { + threshold: [0, 0.1], + rootMargin: "0px 0px -70% 0px" + } + ); + + for(var i = 0; i < toc.sections.length; i++) { + observer.observe(toc.sections[i]); + } + } + + // detect the end of scrolling -> reactivate IntersectionObserver on scroll + toc.element.addEventListener('toc-scroll', function(event){ + toc.clickScrolling = false; + }); + } + + // custom event emitted when window is resized + toc.element.addEventListener('toc-resize', function(event){ + checkTocLayour(toc); + }); + + // collapsed version only (mobile) + initCollapsedVersion(toc); + }; + + function resetAnchors(toc, anchor) { + if(!anchor) return; + for(var i = 0; i < toc.anchors.length; i++) Util.removeClass(toc.anchors[i], 'toc__link--selected'); + Util.addClass(anchor, 'toc__link--selected'); + }; + + function getVisibleSection(toc) { + if(toc.intervalID) { + clearInterval(toc.intervalID); + } + toc.intervalID = setTimeout(function(){ + var halfWindowHeight = window.innerHeight/2, + index = -1; + for(var i = 0; i < toc.sections.length; i++) { + var top = toc.sections[i].getBoundingClientRect().top; + if(top < halfWindowHeight) index = i; + } + if(index > -1) { + resetAnchors(toc, toc.anchors[index]); + } + toc.intervalID = false; + }, 100); + }; + + function checkTocLayour(toc) { + if(toc.isStatic) return; + toc.layout = getComputedStyle(toc.element, ':before').getPropertyValue('content').replace(/\'|"/g, ''); + Util.toggleClass(toc.element, toc.staticLayoutClass, toc.layout == 'static'); + if(toc.content) Util.toggleClass(toc.content, toc.contentStaticLayoutClass, toc.layout == 'static'); + }; + + function initCollapsedVersion(toc) { // collapsed version only (mobile) + if(toc.controller.length < 1) return; + + // toggle nav visibility + toc.controller[0].addEventListener('click', function(event){ + var isOpen = Util.hasClass(toc.element, toc.expandedClass); + toggleToc(toc, isOpen); + }); + + // close expanded version on esc + toc.element.addEventListener('keydown', function(event){ + if(toc.layout == 'static') return; + if( (event.keyCode && event.keyCode == 27) || (event.key && event.key.toLowerCase() == 'escape') ) { + toggleToc(toc, true); + toc.controller[0].focus(); + } + }); + }; + + function toggleToc(toc, bool) { // collapsed version only (mobile) + if(toc.controller.length < 1) return; + // toggle mobile version + Util.toggleClass(toc.element, toc.expandedClass, !bool); + bool ? toc.controller[0].removeAttribute('aria-expanded') : toc.controller[0].setAttribute('aria-expanded', 'true'); + if(!bool && toc.anchors.length > 0) { + toc.anchors[0].focus(); + } + }; + + var tocs = document.getElementsByClassName('js-toc'); + + var tocsArray = []; + if( tocs.length > 0) { + for( var i = 0; i < tocs.length; i++) { + (function(i){ tocsArray.push(new Toc(tocs[i])); })(i); + } + + // listen to window scroll -> reset clickScrolling property + var scrollId = false, + resizeId = false, + scrollEvent = new CustomEvent('toc-scroll'), + resizeEvent = new CustomEvent('toc-resize'); + + window.addEventListener('scroll', function() { + clearTimeout(scrollId); + scrollId = setTimeout(doneScrolling, 100); + }); + + window.addEventListener('resize', function() { + clearTimeout(resizeId); + scrollId = setTimeout(doneResizing, 100); + }); + + function doneScrolling() { + for( var i = 0; i < tocsArray.length; i++) { + (function(i){tocsArray[i].element.dispatchEvent(scrollEvent)})(i); + }; + }; + + function doneResizing() { + for( var i = 0; i < tocsArray.length; i++) { + (function(i){tocsArray[i].element.dispatchEvent(resizeEvent)})(i); + }; + }; + } +}()); \ No newline at end of file diff --git a/assets/js/scripts.js b/assets/js/scripts.js new file mode 100644 index 0000000..86661c7 --- /dev/null +++ b/assets/js/scripts.js @@ -0,0 +1,259 @@ +// Utility function +function Util () {}; + +/* class manipulation functions */ +Util.hasClass = function(el, className) { + return el.classList.contains(className); +}; + +Util.addClass = function(el, className) { + var classList = className.split(' '); + el.classList.add(classList[0]); + if (classList.length > 1) Util.addClass(el, classList.slice(1).join(' ')); +}; + +Util.removeClass = function(el, className) { + var classList = className.split(' '); + el.classList.remove(classList[0]); + if (classList.length > 1) Util.removeClass(el, classList.slice(1).join(' ')); +}; + +Util.toggleClass = function(el, className, bool) { + if(bool) Util.addClass(el, className); + else Util.removeClass(el, className); +}; + +Util.setAttributes = function(el, attrs) { + for(var key in attrs) { + el.setAttribute(key, attrs[key]); + } +}; + +/* DOM manipulation */ +Util.getChildrenByClassName = function(el, className) { + var children = el.children, + childrenByClass = []; + for (var i = 0; i < children.length; i++) { + if (Util.hasClass(children[i], className)) childrenByClass.push(children[i]); + } + return childrenByClass; +}; + +Util.is = function(elem, selector) { + if(selector.nodeType){ + return elem === selector; + } + + var qa = (typeof(selector) === 'string' ? document.querySelectorAll(selector) : selector), + length = qa.length; + + while(length--){ + if(qa[length] === elem){ + return true; + } + } + + return false; +}; + +/* Animate height of an element */ +Util.setHeight = function(start, to, element, duration, cb, timeFunction) { + var change = to - start, + currentTime = null; + + var animateHeight = function(timestamp){ + if (!currentTime) currentTime = timestamp; + var progress = timestamp - currentTime; + if(progress > duration) progress = duration; + var val = parseInt((progress/duration)*change + start); + if(timeFunction) { + val = Math[timeFunction](progress, start, to - start, duration); + } + element.style.height = val+"px"; + if(progress < duration) { + window.requestAnimationFrame(animateHeight); + } else { + if(cb) cb(); + } + }; + + //set the height of the element before starting animation -> fix bug on Safari + element.style.height = start+"px"; + window.requestAnimationFrame(animateHeight); +}; + +/* Smooth Scroll */ +Util.scrollTo = function(final, duration, cb, scrollEl) { + var element = scrollEl || window; + var start = element.scrollTop || document.documentElement.scrollTop, + currentTime = null; + + if(!scrollEl) start = window.scrollY || document.documentElement.scrollTop; + + var animateScroll = function(timestamp){ + if (!currentTime) currentTime = timestamp; + var progress = timestamp - currentTime; + if(progress > duration) progress = duration; + var val = Math.easeInOutQuad(progress, start, final-start, duration); + element.scrollTo(0, val); + if(progress < duration) { + window.requestAnimationFrame(animateScroll); + } else { + cb && cb(); + } + }; + + window.requestAnimationFrame(animateScroll); +}; + +/* Move Focus */ +Util.moveFocus = function (element) { + if( !element ) element = document.getElementsByTagName("body")[0]; + element.focus(); + if (document.activeElement !== element) { + element.setAttribute('tabindex','-1'); + element.focus(); + } +}; + +/* Misc */ + +Util.getIndexInArray = function(array, el) { + return Array.prototype.indexOf.call(array, el); +}; + +Util.cssSupports = function(property, value) { + return CSS.supports(property, value); +}; + +// merge a set of user options into plugin defaults +// https://gomakethings.com/vanilla-javascript-version-of-jquery-extend/ +Util.extend = function() { + // Variables + var extended = {}; + var deep = false; + var i = 0; + var length = arguments.length; + + // Check if a deep merge + if ( Object.prototype.toString.call( arguments[0] ) === '[object Boolean]' ) { + deep = arguments[0]; + i++; + } + + // Merge the object into the extended object + var merge = function (obj) { + for ( var prop in obj ) { + if ( Object.prototype.hasOwnProperty.call( obj, prop ) ) { + // If deep merge and property is an object, merge properties + if ( deep && Object.prototype.toString.call(obj[prop]) === '[object Object]' ) { + extended[prop] = extend( true, extended[prop], obj[prop] ); + } else { + extended[prop] = obj[prop]; + } + } + } + }; + + // Loop through each object and conduct a merge + for ( ; i < length; i++ ) { + var obj = arguments[i]; + merge(obj); + } + + return extended; +}; + +// Check if Reduced Motion is enabled +Util.osHasReducedMotion = function() { + if(!window.matchMedia) return false; + var matchMediaObj = window.matchMedia('(prefers-reduced-motion: reduce)'); + if(matchMediaObj) return matchMediaObj.matches; + return false; // return false if not supported +}; + +/* Animation curves */ +Math.easeInOutQuad = function (t, b, c, d) { + t /= d/2; + if (t < 1) return c/2*t*t + b; + t--; + return -c/2 * (t*(t-2) - 1) + b; +}; + +Math.easeInQuart = function (t, b, c, d) { + t /= d; + return c*t*t*t*t + b; +}; + +Math.easeOutQuart = function (t, b, c, d) { + t /= d; + t--; + return -c * (t*t*t*t - 1) + b; +}; + +Math.easeInOutQuart = function (t, b, c, d) { + t /= d/2; + if (t < 1) return c/2*t*t*t*t + b; + t -= 2; + return -c/2 * (t*t*t*t - 2) + b; +}; + +Math.easeOutElastic = function (t, b, c, d) { + var s=1.70158;var p=d*0.7;var a=c; + if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3; + if (a < Math.abs(c)) { a=c; var s=p/4; } + else var s = p/(2*Math.PI) * Math.asin (c/a); + return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b; +}; + + +/* JS Utility Classes */ + +// make focus ring visible only for keyboard navigation (i.e., tab key) +(function() { + var focusTab = document.getElementsByClassName('js-tab-focus'), + shouldInit = false, + outlineStyle = false, + eventDetected = false; + + function detectClick() { + if(focusTab.length > 0) { + resetFocusStyle(false); + window.addEventListener('keydown', detectTab); + } + window.removeEventListener('mousedown', detectClick); + outlineStyle = false; + eventDetected = true; + }; + + function detectTab(event) { + if(event.keyCode !== 9) return; + resetFocusStyle(true); + window.removeEventListener('keydown', detectTab); + window.addEventListener('mousedown', detectClick); + outlineStyle = true; + }; + + function resetFocusStyle(bool) { + var outlineStyle = bool ? '' : 'none'; + for(var i = 0; i < focusTab.length; i++) { + focusTab[i].style.setProperty('outline', outlineStyle); + } + }; + + function initFocusTabs() { + if(shouldInit) { + if(eventDetected) resetFocusStyle(outlineStyle); + return; + } + shouldInit = focusTab.length > 0; + window.addEventListener('mousedown', detectClick); + }; + + initFocusTabs(); + window.addEventListener('initFocusTabs', initFocusTabs); +}()); + +function resetFocusTabsStyle() { + window.dispatchEvent(new CustomEvent('initFocusTabs')); +}; \ No newline at end of file diff --git a/assets/js/scripts.min.js b/assets/js/scripts.min.js new file mode 100644 index 0000000..14c62e8 --- /dev/null +++ b/assets/js/scripts.min.js @@ -0,0 +1 @@ +function Util(){}function resetFocusTabsStyle(){window.dispatchEvent(new CustomEvent("initFocusTabs"))}Util.hasClass=function(t,e){return t.classList.contains(e)},Util.addClass=function(t,e){var n=e.split(" ");t.classList.add(n[0]),1 + + + + + + FutureSTEMgirls Campaign + + + + + + + + + + + + + +
+ + + + + + +
+ + + + + View in Browser +
+
+ + + + + +
+

Help Girls Pursue STEM Education

+ Girl coding on a laptop +

FutureSTEMgirls is an NGO advocating for girls and women to pursue STEM education and career. We are running a campaign to understand motivations and barriers for girls and women in STEM and ICT domains.

+ Join the Campaign +
+
+ + + + + +
+

FutureSTEMgirls
123 Main Street
Anytown, USA 12345

+

+ +

+

Unsubscribe

+
+
+ + \ No newline at end of file diff --git a/donor-newsletter.html b/donor-newsletter.html new file mode 100644 index 0000000..e69de29 diff --git a/email-templates-socials/logo-facebook.svg b/email-templates-socials/logo-facebook.svg new file mode 100644 index 0000000..220c4bf --- /dev/null +++ b/email-templates-socials/logo-facebook.svg @@ -0,0 +1 @@ +logo facebook \ No newline at end of file diff --git a/email-templates-socials/logo-instagram.svg b/email-templates-socials/logo-instagram.svg new file mode 100644 index 0000000..6fb5201 --- /dev/null +++ b/email-templates-socials/logo-instagram.svg @@ -0,0 +1 @@ +logo instagram \ No newline at end of file diff --git a/email-templates-socials/logo-x.svg b/email-templates-socials/logo-x.svg new file mode 100644 index 0000000..75ad9f4 --- /dev/null +++ b/email-templates-socials/logo-x.svg @@ -0,0 +1 @@ +x \ No newline at end of file diff --git a/email-templates-socials/logo-youtube.svg b/email-templates-socials/logo-youtube.svg new file mode 100644 index 0000000..b9279c9 --- /dev/null +++ b/email-templates-socials/logo-youtube.svg @@ -0,0 +1 @@ +logo youtube \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..797dcc2 --- /dev/null +++ b/index.html @@ -0,0 +1,254 @@ + + + + + + + + + Email Newsletter Templates for Non-profits | Festa Design Studio + + + + +
+
+
+
+
+ Festa Design Studio's logo wordmark +
+ +
+
+

We design for good.

+
+
+
+
+
+
+
+
+
+
+

Email newsletter templates for non-profits.

+
+
+ +
+
+

We design custom email HTML templates that perfectly match your organization brand's style.

+
+ +
+
+ +
+
+ + + +
+
+
+
+
+

Advocacy and campaign email newsletter.

+
+
+ Image placeholder banner +
+
+
+
+

Announcment and volunteer email newsletter.

+
+
+ Image placeholder banner +
+
+
+
+

Donor updates and fundraising email newsletter.

+
+
+ Image placeholder banner +
+ +
+
+
+
+ +
+
+
+
+
+

Designed for easy access and inclusivity.

+
+
+ +
+
+
+ +

Compatible with email clients with native desktop and mobile app.

+
+ +
+ +

Responsive for desktop, tablet and mobile view-point.

+
+ +
+ +

Quality assured through tests on litmus, email on acid, and more.

+
+ +
+ +

Meets WCAG standards for accessibility.

+
+ +
+
+ + +
+
+
+ +
+
+
+
+
+

Rest assured, the email template we design for you will integrate flawlessly with your preferred newsletter platform.

+
+
+ +
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+
+
+ + + + + + + + \ No newline at end of file