refactor: Change file structure

15 files changed, 0 insertions, 2651 deletions

diff --git a/old-apps/web-shared/src/styles/base/_accessibility.scss b/old-apps/web-shared/src/styles/base/_accessibility.scss
deleted file mode 100644
index 9f71937..0000000
--- a/old-apps/web-shared/src/styles/base/_accessibility.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-.sr-only { // content made available only to screen readers
-  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;
-}
-
-.sr-only-focusable { // focusable, visually hidden element
-  &:not(:focus):not(:focus-within){
-    @extend .sr-only
-  }
-}
\ No newline at end of file
diff --git a/old-apps/web-shared/src/styles/base/_breakpoints.scss b/old-apps/web-shared/src/styles/base/_breakpoints.scss
deleted file mode 100644
index 9b61af3..0000000
--- a/old-apps/web-shared/src/styles/base/_breakpoints.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-$breakpoints: (
-        xs: "768px",
-        sm: "768px",
-        md: "1200px",
-        lg: "1200px",
-        xl: "1600px"
-) !default;
-
-@mixin breakpoint($breakpoint, $logic: false) {
-  @if ($logic) {
-    @media #{$logic} and (min-width: map-get($map: $breakpoints, $key: $breakpoint)) {
-      @content;
-    }
-  } @else {
-    @media (min-width: map-get($map: $breakpoints, $key: $breakpoint)) {
-      @content;
-    }
-  }
-}
diff --git a/old-apps/web-shared/src/styles/base/_buttons.scss b/old-apps/web-shared/src/styles/base/_buttons.scss
deleted file mode 100644
index 2a7ff34..0000000
--- a/old-apps/web-shared/src/styles/base/_buttons.scss
+++ /dev/null
@@ -1,24 +0,0 @@
-// don't modify this file -> edit 📁 custom-style/_buttons.scss to create your custom buttons
-
-.btn { // basic button style
-  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);
-}
-
-// default size variations
-.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); }
-
-// button with (only) icon
-.btn--icon { padding: var(--btn-padding-y, 0.5em); }
\ No newline at end of file
diff --git a/old-apps/web-shared/src/styles/base/_colors.scss b/old-apps/web-shared/src/styles/base/_colors.scss
deleted file mode 100644
index f061d9a..0000000
--- a/old-apps/web-shared/src/styles/base/_colors.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-// don't modify this file -> edit 📁 custom-style/_colors.scss to create your color palette
-
-[data-theme] {
-  background-color: var(--color-bg, hsl(0, 0%, 100%));
-  color: var(--color-contrast-high, hsl(210, 7%, 21%));
-}
\ No newline at end of file
diff --git a/old-apps/web-shared/src/styles/base/_forms.scss b/old-apps/web-shared/src/styles/base/_forms.scss
deleted file mode 100644
index faffddd..0000000
--- a/old-apps/web-shared/src/styles/base/_forms.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-// don't modify this file -> edit 📁 custom-style/_forms.scss to create your custom form elements
-
-.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-size: var(--text-md, 1.125rem);
-  margin-bottom: var(--space-sm);
-}
-
-.form-label {
-  display: inline-block;
-  font-size: var(--text-sm, 0.75rem);
-}
diff --git a/old-apps/web-shared/src/styles/base/_grid-layout.scss b/old-apps/web-shared/src/styles/base/_grid-layout.scss
deleted file mode 100644
index bd8b6c9..0000000
--- a/old-apps/web-shared/src/styles/base/_grid-layout.scss
+++ /dev/null
@@ -1,261 +0,0 @@
-@use 'mixins' as *;
-@use 'breakpoints' as *;
-
-// --------------------------------
-
-// Container - center content on x-axis
-
-// --------------------------------
-
-.container {
-  width: calc(100% - 2*var(--component-padding));
-  margin-left: auto;
-  margin-right: auto;
-}
-
-// --------------------------------
-
-// Grid System
-
-// --------------------------------
-
-$grid-columns: 12 !default;
-
-.grid, .flex, .inline-flex {
-  --gap: 0px;
-  --gap-x: var(--gap);
-  --gap-y: var(--gap);
-  gap: var(--gap-y) var(--gap-x);
-
-  > * {
-    --sub-gap: 0px;
-    --sub-gap-x: var(--sub-gap);
-    --sub-gap-y: var(--sub-gap);
-  }
-}
-
-.grid {
-  --grid-columns: 12;
-  display: flex;
-  flex-wrap: wrap;
-
-  > * {
-    flex-basis: 100%;
-    max-width: 100%;
-    min-width: 0;
-  }
-}
-
-/* #region (Safari < 14.1 fallback) */
-@media not all and (min-resolution:.001dpcm) {
-  @supports (not(translate: none)) {
-    .grid, .flex[class*="gap-"], .inline-flex[class*="gap-"] {
-      gap: 0; // reset
-      margin-bottom: calc(-1 * var(--gap-y));
-      margin-left: calc(-1 * var(--gap-x));
-
-      > * {
-        margin-bottom: var(--sub-gap-y);
-      }
-    }
-
-    .grid {
-      --offset: var(--gap-x);
-      --gap-modifier: 0;
-      --offset-modifier: 1;
-
-      > * {
-        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); > * { --sub-gap-x: var(--space-xxxxs); --sub-gap-y: var(--space-xxxxs); }}
-.gap-xxxs  { --gap-x: var(--space-xxxs);  --gap-y: var(--space-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);   > * { --sub-gap-x: var(--space-xxs);   --sub-gap-y: var(--space-xxs); }}
-.gap-xs    { --gap-x: var(--space-xs);    --gap-y: var(--space-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);    > * { --sub-gap-x: var(--space-sm);    --sub-gap-y: var(--space-sm); }}
-.gap-md    { --gap-x: var(--space-md);    --gap-y: var(--space-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);    > * { --sub-gap-x: var(--space-lg);    --sub-gap-y: var(--space-lg); }}
-.gap-xl    { --gap-x: var(--space-xl);    --gap-y: var(--space-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);   > * { --sub-gap-x: var(--space-xxl);   --sub-gap-y: var(--space-xxl); }}
-.gap-xxxl  { --gap-x: var(--space-xxxl);  --gap-y: var(--space-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); > * { --sub-gap-x: var(--space-xxxxl); --sub-gap-y: var(--space-xxxxl); }}
-.gap-0     { --gap-x: 0;                  --gap-y: 0;                  > * { --sub-gap-x: 0;                  --sub-gap-y: 0; }}
-
-.gap-x-xxxxs { --gap-x: var(--space-xxxxs); > * { --sub-gap-x: var(--space-xxxxs); }}
-.gap-x-xxxs  { --gap-x: var(--space-xxxs);  > * { --sub-gap-x: var(--space-xxxs); }}
-.gap-x-xxs   { --gap-x: var(--space-xxs);   > * { --sub-gap-x: var(--space-xxs); }}
-.gap-x-xs    { --gap-x: var(--space-xs);    > * { --sub-gap-x: var(--space-xs); }}
-.gap-x-sm    { --gap-x: var(--space-sm);    > * { --sub-gap-x: var(--space-sm); }}
-.gap-x-md    { --gap-x: var(--space-md);    > * { --sub-gap-x: var(--space-md); }}
-.gap-x-lg    { --gap-x: var(--space-lg);    > * { --sub-gap-x: var(--space-lg); }}
-.gap-x-xl    { --gap-x: var(--space-xl);    > * { --sub-gap-x: var(--space-xl); }}
-.gap-x-xxl   { --gap-x: var(--space-xxl);   > * { --sub-gap-x: var(--space-xxl); }}
-.gap-x-xxxl  { --gap-x: var(--space-xxxl);  > * { --sub-gap-x: var(--space-xxxl); }}
-.gap-x-xxxxl { --gap-x: var(--space-xxxxl); > * { --sub-gap-x: var(--space-xxxxl); }}
-.gap-x-0     { --gap-x: 0;                  > * { --sub-gap-x: 0; }}
-
-.gap-y-xxxxs { --gap-y: var(--space-xxxxs); > * { --sub-gap-y: var(--space-xxxxs); }}
-.gap-y-xxxs  { --gap-y: var(--space-xxxs);  > * { --sub-gap-y: var(--space-xxxs); }}
-.gap-y-xxs   { --gap-y: var(--space-xxs);   > * { --sub-gap-y: var(--space-xxs); }}
-.gap-y-xs    { --gap-y: var(--space-xs);    > * { --sub-gap-y: var(--space-xs); }}
-.gap-y-sm    { --gap-y: var(--space-sm);    > * { --sub-gap-y: var(--space-sm); }}
-.gap-y-md    { --gap-y: var(--space-md);    > * { --sub-gap-y: var(--space-md); }}
-.gap-y-lg    { --gap-y: var(--space-lg);    > * { --sub-gap-y: var(--space-lg); }}
-.gap-y-xl    { --gap-y: var(--space-xl);    > * { --sub-gap-y: var(--space-xl); }}
-.gap-y-xxl   { --gap-y: var(--space-xxl);   > * { --sub-gap-y: var(--space-xxl); }}
-.gap-y-xxxl  { --gap-y: var(--space-xxxl);  > * { --sub-gap-y: var(--space-xxxl); }}
-.gap-y-xxxxl { --gap-y: var(--space-xxxxl); > * { --sub-gap-y: var(--space-xxxxl); }}
-.gap-y-0     { --gap-y: 0;                  > * { --sub-gap-y: 0; }}
-
-$grid-col-class-list: ''; // list of col-{span} classes
-
-@for $i from 1 through $grid-columns {
-  $grid-col-class-list: $grid-col-class-list + ".col-#{$i}";
-  @if($i < $grid-columns) {
-    $grid-col-class-list: $grid-col-class-list + ', ';
-  }
-  .grid-col-#{$i} { --grid-columns: #{$i}; } // set number of grid columns
-  .col-#{$i} { --span: #{$i}; } // set grid item span
-}
-
-#{$grid-col-class-list} {
-  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 { // auto-expanding column
-  flex-grow: 1;
-  flex-basis: 0;
-  max-width: 100%;
-}
-
-.col-content { // column width depends on its content
-  flex-grow: 0;
-  flex-basis: initial;
-  max-width: initial;
-}
-
-// offset
-$grid-offset-class-list: ''; // list of offset-{span} classes
-
-@for $i from 1 through $grid-columns - 1 {
-  $grid-offset-class-list: $grid-offset-class-list + ".offset-#{$i}";
-  @if($i < $grid-columns) {
-    $grid-offset-class-list: $grid-offset-class-list + ', ';
-  }
-  .offset-#{$i} { --offset: #{$i}; }
-}
-
-#{$grid-offset-class-list} {
-  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));
-}
-
-// responsive variations
-@each $breakpoint, $value in $breakpoints {
-  @include breakpoint(#{$breakpoint}) {
-    .gap-xxxxs\@#{$breakpoint} { --gap-x: var(--space-xxxxs); --gap-y: var(--space-xxxxs); > * { --sub-gap-x: var(--space-xxxxs); --sub-gap-y: var(--space-xxxxs); }}
-    .gap-xxxs\@#{$breakpoint}  { --gap-x: var(--space-xxxs);  --gap-y: var(--space-xxxs);  > * { --sub-gap-x: var(--space-xxxs);  --sub-gap-y: var(--space-xxxs); }}
-    .gap-xxs\@#{$breakpoint}   { --gap-x: var(--space-xxs);   --gap-y: var(--space-xxs);   > * { --sub-gap-x: var(--space-xxs);   --sub-gap-y: var(--space-xxs); }}
-    .gap-xs\@#{$breakpoint}    { --gap-x: var(--space-xs);    --gap-y: var(--space-xs);    > * { --sub-gap-x: var(--space-xs);    --sub-gap-y: var(--space-xs); }}
-    .gap-sm\@#{$breakpoint}    { --gap-x: var(--space-sm);    --gap-y: var(--space-sm);    > * { --sub-gap-x: var(--space-sm);    --sub-gap-y: var(--space-sm); }}
-    .gap-md\@#{$breakpoint}    { --gap-x: var(--space-md);    --gap-y: var(--space-md);    > * { --sub-gap-x: var(--space-md);    --sub-gap-y: var(--space-md); }}
-    .gap-lg\@#{$breakpoint}    { --gap-x: var(--space-lg);    --gap-y: var(--space-lg);    > * { --sub-gap-x: var(--space-lg);    --sub-gap-y: var(--space-lg); }}
-    .gap-xl\@#{$breakpoint}    { --gap-x: var(--space-xl);    --gap-y: var(--space-xl);    > * { --sub-gap-x: var(--space-xl);    --sub-gap-y: var(--space-xl); }}
-    .gap-xxl\@#{$breakpoint}   { --gap-x: var(--space-xxl);   --gap-y: var(--space-xxl);   > * { --sub-gap-x: var(--space-xxl);   --sub-gap-y: var(--space-xxl); }}
-    .gap-xxxl\@#{$breakpoint}  { --gap-x: var(--space-xxxl);  --gap-y: var(--space-xxxl);  > * { --sub-gap-x: var(--space-xxxl);  --sub-gap-y: var(--space-xxxl); }}
-    .gap-xxxxl\@#{$breakpoint} { --gap-x: var(--space-xxxxl); --gap-y: var(--space-xxxxl); > * { --sub-gap-x: var(--space-xxxxl); --sub-gap-y: var(--space-xxxxl); }}
-    .gap-0\@#{$breakpoint}     { --gap-x: 0;                  --gap-y: 0;                  > * { --sub-gap-x: 0;                  --sub-gap-y: 0; }}
-
-    .gap-x-xxxxs\@#{$breakpoint} { --gap-x: var(--space-xxxxs); > * { --sub-gap-x: var(--space-xxxxs); }}
-    .gap-x-xxxs\@#{$breakpoint}  { --gap-x: var(--space-xxxs);  > * { --sub-gap-x: var(--space-xxxs); }}
-    .gap-x-xxs\@#{$breakpoint}   { --gap-x: var(--space-xxs);   > * { --sub-gap-x: var(--space-xxs); }}
-    .gap-x-xs\@#{$breakpoint}    { --gap-x: var(--space-xs);    > * { --sub-gap-x: var(--space-xs); }}
-    .gap-x-sm\@#{$breakpoint}    { --gap-x: var(--space-sm);    > * { --sub-gap-x: var(--space-sm); }}
-    .gap-x-md\@#{$breakpoint}    { --gap-x: var(--space-md);    > * { --sub-gap-x: var(--space-md); }}
-    .gap-x-lg\@#{$breakpoint}    { --gap-x: var(--space-lg);    > * { --sub-gap-x: var(--space-lg); }}
-    .gap-x-xl\@#{$breakpoint}    { --gap-x: var(--space-xl);    > * { --sub-gap-x: var(--space-xl); }}
-    .gap-x-xxl\@#{$breakpoint}   { --gap-x: var(--space-xxl);   > * { --sub-gap-x: var(--space-xxl); }}
-    .gap-x-xxxl\@#{$breakpoint}  { --gap-x: var(--space-xxxl);  > * { --sub-gap-x: var(--space-xxxl); }}
-    .gap-x-xxxxl\@#{$breakpoint} { --gap-x: var(--space-xxxxl); > * { --sub-gap-x: var(--space-xxxxl); }}
-    .gap-x-0\@#{$breakpoint}     { --gap-x: 0;                  > * { --sub-gap-x: 0; }}
-
-    .gap-y-xxxxs\@#{$breakpoint} { --gap-y: var(--space-xxxxs); > * { --sub-gap-y: var(--space-xxxxs); }}
-    .gap-y-xxxs\@#{$breakpoint}  { --gap-y: var(--space-xxxs);  > * { --sub-gap-y: var(--space-xxxs); }}
-    .gap-y-xxs\@#{$breakpoint}   { --gap-y: var(--space-xxs);   > * { --sub-gap-y: var(--space-xxs); }}
-    .gap-y-xs\@#{$breakpoint}    { --gap-y: var(--space-xs);    > * { --sub-gap-y: var(--space-xs); }}
-    .gap-y-sm\@#{$breakpoint}    { --gap-y: var(--space-sm);    > * { --sub-gap-y: var(--space-sm); }}
-    .gap-y-md\@#{$breakpoint}    { --gap-y: var(--space-md);    > * { --sub-gap-y: var(--space-md); }}
-    .gap-y-lg\@#{$breakpoint}    { --gap-y: var(--space-lg);    > * { --sub-gap-y: var(--space-lg); }}
-    .gap-y-xl\@#{$breakpoint}    { --gap-y: var(--space-xl);    > * { --sub-gap-y: var(--space-xl); }}
-    .gap-y-xxl\@#{$breakpoint}   { --gap-y: var(--space-xxl);   > * { --sub-gap-y: var(--space-xxl); }}
-    .gap-y-xxxl\@#{$breakpoint}  { --gap-y: var(--space-xxxl);  > * { --sub-gap-y: var(--space-xxxl); }}
-    .gap-y-xxxxl\@#{$breakpoint} { --gap-y: var(--space-xxxxl); > * { --sub-gap-y: var(--space-xxxxl); }}
-    .gap-y-0\@#{$breakpoint}     { --gap-y: 0;                  > * { --sub-gap-y: 0; }}
-
-    $grid-col-class-list: ''; // list of col-{span} classes
-
-    @for $i from 1 through $grid-columns {
-      $grid-col-class-list: $grid-col-class-list + ".col-#{$i}\\@#{$breakpoint}";
-      @if($i < $grid-columns) {
-        $grid-col-class-list: $grid-col-class-list + ', ';
-      }
-      .grid-col-#{$i}\@#{$breakpoint} { --grid-columns: #{$i}; } // set number of grid columns
-      .col-#{$i}\@#{$breakpoint} { --span: #{$i}; } // set grid item span
-    }
-
-    #{$grid-col-class-list} {
-      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\@#{$breakpoint} { // auto-expanding column
-      flex-grow: 1;
-      flex-basis: 0;
-      max-width: 100%;
-    }
-
-    .col-content\@#{$breakpoint} { // column width depends on its content
-      flex-grow: 0;
-      flex-basis: initial;
-      max-width: initial;
-    }
-
-    // offset
-    $grid-offset-class-list: ''; // list of offset-{span} classes
-
-    @for $i from 1 through $grid-columns - 1 {
-      $grid-offset-class-list: $grid-offset-class-list + ".offset-#{$i}\\@#{$breakpoint}";
-      @if($i < $grid-columns) {
-        $grid-offset-class-list: $grid-offset-class-list + ', ';
-      }
-      .offset-#{$i}\@#{$breakpoint} { --offset: #{$i}; }
-    }
-
-    #{$grid-offset-class-list} {
-      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\@#{$breakpoint} {
-      margin-left: 0;
-    }
-
-    @media not all and (min-resolution:.001dpcm) {
-      @supports (not(translate: none)) {
-        .offset-0\@#{$breakpoint} {
-          margin-left: var(--gap-x);
-        }
-      }
-    }
-  }
-}
-
diff --git a/old-apps/web-shared/src/styles/base/_icons.scss b/old-apps/web-shared/src/styles/base/_icons.scss
deleted file mode 100644
index 1674a7c..0000000
--- a/old-apps/web-shared/src/styles/base/_icons.scss
+++ /dev/null
@@ -1,62 +0,0 @@
-// don't modify this file -> edit 📁 custom-style/_icons.scss to set your custom icons style
-
-:root {
-  // 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 {
-  --size: 1em;
-  height: var(--size);
-  width: var(--size);
-  display: inline-block;
-  color: inherit;
-  fill: currentColor;
-  line-height: 1;
-  flex-shrink: 0;
-  max-width: initial;
-}
-
-// icon size
-.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 { // rotate the icon infinitely
-  animation: icon-spin 1s infinite linear;
-}
-
-@keyframes icon-spin {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-// --------------------------------
-
-// SVG <symbol>
-
-// --------------------------------
-
-// enable icon color corrections
-.icon use {
-  color: inherit;
-  fill: currentColor;
-}
\ No newline at end of file
diff --git a/old-apps/web-shared/src/styles/base/_mixins.scss b/old-apps/web-shared/src/styles/base/_mixins.scss
deleted file mode 100644
index 8fe82f6..0000000
--- a/old-apps/web-shared/src/styles/base/_mixins.scss
+++ /dev/null
@@ -1,151 +0,0 @@
-@use 'sass:math';
-
-// --------------------------------
-
-// Typography
-
-// --------------------------------
-
-// edit font rendering -> tip: use for light text on dark backgrounds
-@mixin fontSmooth {
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-// crop top space on text elements - caused by line height
-@mixin lhCrop($line-height, $capital-letter: 1) {
-  &::before {
-    content: '';
-    display: block;
-    height: 0;
-    width: 0;
-    margin-top: calc((#{$capital-letter} - #{$line-height}) * 0.5em);
-  }
-}
-
-// edit text unit on a component level
-@mixin textUnit($text-unit) {
-  --text-unit: #{$text-unit};
-  font-size: var(--text-unit);
-}
-
-// --------------------------------
-
-// Spacing
-
-// --------------------------------
-
-// edit space unit on a component level
-@mixin spaceUnit($space-unit) {
-  --space-unit:  #{$space-unit};
-}
-
-// --------------------------------
-
-// Reset
-
-// --------------------------------
-
-// reset user agent style
-@mixin reset {
-  background-color: transparent;
-  padding: 0;
-  border: 0;
-  border-radius: 0;
-  color: inherit;
-  line-height: inherit;
-  appearance: none;
-}
-
-// --------------------------------
-
-// Colors
-
-// --------------------------------
-
-// define HSL color variable
-@mixin defineColorHSL($color, $hue, $saturation, $lightness) {
-  #{$color}: unquote("hsl(#{$hue}, #{$saturation}, #{$lightness})");#{$color}-h: #{$hue};#{$color}-s: #{$saturation};#{$color}-l: #{$lightness};
-}
-
-// return color with different opacity value
-@function alpha($color, $opacity) {
-  $color: str-replace($color, 'var(');
-  $color: str-replace($color, ')');
-  $color-h: var(#{$color+'-h'});
-  $color-s: var(#{$color+'-s'});
-  $color-l: var(#{$color+'-l'});
-  @return hsla($color-h, $color-s, $color-l, $opacity);
-}
-
-// return color with different lightness value
-@function lightness($color, $lightnessMultiplier) {
-  $color: str-replace($color, 'var(');
-  $color: str-replace($color, ')');
-  $color-h: var(#{$color+'-h'});
-  $color-s: var(#{$color+'-s'});
-  $color-l: var(#{$color+'-l'});
-  @return hsl($color-h, $color-s, calc(#{$color-l} * #{$lightnessMultiplier}));
-}
-
-// modify color HSLA values
-@function adjustHSLA($color, $hueMultiplier: 1, $saturationMultiplier: 1, $lightnessMultiplier: 1, $opacity: 1) {
-  $color: str-replace($color, 'var(');
-  $color: str-replace($color, ')');
-  $color-h: var(#{$color+'-h'});
-  $color-s: var(#{$color+'-s'});
-  $color-l: var(#{$color+'-l'});
-  @return hsla(calc(#{$color-h} * #{$hueMultiplier}), calc(#{$color-s} * #{$saturationMultiplier}), calc(#{$color-l} * #{$lightnessMultiplier}), $opacity);
-}
-
-// replace substring with another string
-// credits: https://css-tricks.com/snippets/sass/str-replace-function/
-@function str-replace($string, $search, $replace: '') {
-  $index: str-index($string, $search);
-  @if $index {
-    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
-  }
-  @return $string;
-}
-
-// --------------------------------
-
-// Accessibility
-
-// --------------------------------
-
-// hide - content made available only to screen readers
-@mixin srHide {
-  position: absolute;
-  clip: rect(1px, 1px, 1px, 1px);
-  clip-path: inset(50%);
-}
-
-// show
-@mixin srShow {
-  position: static;
-  clip: auto;
-  clip-path: none;
-}
-
-// --------------------------------
-
-// CSS Triangle
-
-// --------------------------------
-
-@mixin triangle ($direction: up, $width: 12px, $color: red) {
-  width: 0;
-  height: 0;
-  border: $width solid transparent;
-
-  @if( $direction == left ) {
-    border-right-color: $color;
-  } @else if( $direction == right ) {
-    border-left-color: $color;
-  } @else if( $direction == down ) {
-    border-top-color: $color;
-  } @else {
-    border-bottom-color: $color;
-  }
-}
diff --git a/old-apps/web-shared/src/styles/base/_reset.scss b/old-apps/web-shared/src/styles/base/_reset.scss
deleted file mode 100644
index 5ba4534..0000000
--- a/old-apps/web-shared/src/styles/base/_reset.scss
+++ /dev/null
@@ -1,83 +0,0 @@
-*, *::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 { // reset style of buttons + form controls
-  background-color: transparent;
-  padding: 0;
-  border: 0;
-  border-radius: 0;
-  color: inherit;
-  line-height: inherit;
-  appearance: none;
-}
-
-select.form-control::-ms-expand {
-  display: none; // hide Select default icon on IE
-}
-
-textarea {
-  resize: vertical;
-  overflow: auto;
-  vertical-align: top;
-}
-
-input::-ms-clear {
-  display: none; // hide X icon in IE and Edge
-}
-
-table {
-  border-collapse: collapse;
-  border-spacing: 0;
-}
-
-img, video, svg {
-  max-width: 100%;
-}
\ No newline at end of file
diff --git a/old-apps/web-shared/src/styles/base/_shared-styles.scss b/old-apps/web-shared/src/styles/base/_shared-styles.scss
deleted file mode 100644
index dae02fe..0000000
--- a/old-apps/web-shared/src/styles/base/_shared-styles.scss
+++ /dev/null
@@ -1,34 +0,0 @@
-// don't modify this file -> edit 📁 custom-style/_shared-style.scss to set your custom shared styles
-
-:root {
-  // radius
-  --radius-sm: calc(var(--radius, 0.25em)/2);
-  --radius-md: var(--radius, 0.25em);
-  --radius-lg: calc(var(--radius, 0.25em)*2);
-
-  // box shadow
-  --shadow-xs:  0 0.1px 0.3px rgba(0, 0, 0, 0.06),
-                0 1px 2px rgba(0, 0, 0, 0.12); 
-  --shadow-sm:  0 0.3px 0.4px rgba(0, 0, 0, 0.025),
-                0 0.9px 1.5px rgba(0, 0, 0, 0.05), 
-                0 3.5px 6px rgba(0, 0, 0, 0.1); 
-  --shadow-md:  0 0.9px 1.5px rgba(0, 0, 0, 0.03), 
-                0 3.1px 5.5px rgba(0, 0, 0, 0.08), 
-                0 14px 25px rgba(0, 0, 0, 0.12); 
-  --shadow-lg:  0 1.2px 1.9px -1px rgba(0, 0, 0, 0.014), 
-                0 3.3px 5.3px -1px rgba(0, 0, 0, 0.038), 
-                0 8.5px 12.7px -1px rgba(0, 0, 0, 0.085), 
-                0 30px 42px -1px rgba(0, 0, 0, 0.15);
-  --shadow-xl:  0 1.5px 2.1px -6px rgba(0, 0, 0, 0.012), 
-                0 3.6px 5.2px -6px rgba(0, 0, 0, 0.035), 
-                0 7.3px 10.6px -6px rgba(0, 0, 0, 0.07), 
-                0 16.2px 21.9px -6px rgba(0, 0, 0, 0.117), 
-                0 46px 60px -6px rgba(0, 0, 0, 0.2);
-
-  // timing functions
-  // credits: https://github.com/ai/easings.net
-  --ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
-  --ease-in: cubic-bezier(0.55, 0.055, 0.675, 0.19);
-  --ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
-  --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
-}
\ No newline at end of file
diff --git a/old-apps/web-shared/src/styles/base/_spacing.scss b/old-apps/web-shared/src/styles/base/_spacing.scss
deleted file mode 100644
index 24e6645..0000000
--- a/old-apps/web-shared/src/styles/base/_spacing.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-// don't modify this file -> edit 📁 custom-style/_spacing.scss to set your custom spacing scale
-
-: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);
-}
diff --git a/old-apps/web-shared/src/styles/base/_typography.scss b/old-apps/web-shared/src/styles/base/_typography.scss
deleted file mode 100644
index 85b974a..0000000
--- a/old-apps/web-shared/src/styles/base/_typography.scss
+++ /dev/null
@@ -1,185 +0,0 @@
-// don't modify this file -> edit 📁 custom-style/_typography.scss to set your custom typography
-
-@use 'breakpoints' as *;
-
-: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);
-}
-
-// --------------------------------
-
-// Inline Text
-
-// --------------------------------
-
-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 - Class used to stylize text blocks
-
-// --------------------------------
-
-.text-component {
-  h1, h2, h3, 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));
-  }
-
-  h2, h3, h4 {
-    margin-top: calc(var(--space-unit) * 0.9375 * var(--text-space-y-multiplier, 1));
-  }
-
-  p, blockquote, ul li, ol li {
-    line-height: calc(var(--body-line-height) * var(--line-height-multiplier, 1));
-  }
-  
-  ul, ol, p, blockquote, .text-component__block {
-    margin-bottom: calc(var(--space-unit) * 0.9375 * var(--text-space-y-multiplier, 1));
-  }
-
-  ul, ol {
-    list-style-position: inside;
-
-    ul, ol {
-      padding-left: 1em;
-      margin-bottom: 0;
-    }
-  }
-
-  ul {
-    list-style-type: disc;
-  }
-
-  ol {
-    list-style-type: decimal;
-  }
-
-  img {
-    display: block;
-    margin: 0 auto;
-  }
-
-  figcaption {
-    text-align: center;
-    margin-top: calc(var(--space-unit) * 0.5);
-  }
-  
-  em {
-    font-style: italic;
-  }
-
-  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;
-  }
-
-  > *:first-child {
-    margin-top: 0;
-  }
-
-  > *:last-child {
-    margin-bottom: 0;
-  }
-}
-
-// text block container
-.text-component__block--full-width {
-  width: 100vw;
-  margin-left: calc(50% - 50vw);
-}
-
-@include breakpoint(sm) {
-  .text-component__block--left, 
-  .text-component__block--right {
-    width: 45%;
-
-    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));
-  }
-}
-
-// outset content
-@include breakpoint(xl) {
-  .text-component__block--outset {
-    width: calc(100% + 10.5 * var(--space-unit));
-
-    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));
-  }
-}
\ No newline at end of file
diff --git a/old-apps/web-shared/src/styles/base/_util.scss b/old-apps/web-shared/src/styles/base/_util.scss
deleted file mode 100644
index c384c2c..0000000
--- a/old-apps/web-shared/src/styles/base/_util.scss
+++ /dev/null
@@ -1,1738 +0,0 @@
-@use 'mixins' as *;
-@use 'breakpoints' as *;
-
-// --------------------------------
-
-// Flexbox
-
-// --------------------------------
-
-.flex { display: flex; }
-.inline-flex { display: inline-flex; }
-.flex-wrap { flex-wrap: wrap; }
-.flex-nowrap { flex-wrap: nowrap; }
-.flex-column { flex-direction: column; }
-.flex-column-reverse { flex-direction: column-reverse; }
-.flex-row { flex-direction: row; }
-.flex-row-reverse { flex-direction: row-reverse; }
-.flex-center { justify-content: center; align-items: center; }
-
-
-// flex items
-.flex-grow { flex-grow: 1; }
-.flex-grow-0 { flex-grow: 0; }
-.flex-shrink { flex-shrink: 1; }
-.flex-shrink-0 { flex-shrink: 0; }
-.flex-basis-0 { flex-basis: 0; }
-
-// --------------------------------
-
-// Justify Content
-
-// --------------------------------
-
-.justify-start { justify-content: flex-start; }
-.justify-end { justify-content: flex-end; }
-.justify-center { justify-content: center; }
-.justify-between { justify-content: space-between; }
-
-// --------------------------------
-
-// Align Items
-
-// --------------------------------
-
-.items-center { align-items: center; }
-.items-start { align-items: flex-start; }
-.items-end { align-items: flex-end; }
-.items-baseline { align-items: baseline; }
-
-// --------------------------------
-
-// Order
-
-// --------------------------------
-
-.order-1 { order: 1; }
-.order-2 { order: 2; }
-.order-3 { order: 3; }
-
-// --------------------------------
-
-// Aspect Ratio
-
-// --------------------------------
-
-[class^="aspect-ratio"], [class*=" aspect-ratio"] {
-  --aspect-ratio: calc(16/9);
-  position: relative;
-  height: 0;
-  padding-bottom: calc(100%/(var(--aspect-ratio)));
-
-  > * {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-
-    &:not(iframe) {
-      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); }
-
-// --------------------------------
-
-// Display
-
-// --------------------------------
-
-.block { display: block; }
-.inline-block { display: inline-block; }
-.inline { display: inline; }
-.contents { display: contents; }
-.hide { display: none; }
-
-// --------------------------------
-
-// Space unit
-
-// --------------------------------
-
-.space-unit-rem { --space-unit: 1rem; }
-.space-unit-em  { --space-unit: 1em; }
-.space-unit-px  { --space-unit: 16px; }
-
-// --------------------------------
-
-// Margin
-
-// --------------------------------
-
-.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
-
-// --------------------------------
-
-.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); }
-
-// --------------------------------
-
-// Vertical Align
-
-// --------------------------------
-
-.align-baseline { vertical-align: baseline; }
-.align-top      { vertical-align: top; }
-.align-middle   { vertical-align: middle; }
-.align-bottom   { vertical-align: bottom; }
-
-// --------------------------------
-
-// Typography
-
-// --------------------------------
-
-.truncate, .text-truncate { // truncate text if it exceeds its parent
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.text-replace { // replace text with bg img
-  overflow: hidden;
-  color: transparent;
-  text-indent: 100%;
-  white-space: nowrap;
-}
-
-.break-word {
-  overflow-wrap: break-word;
-  min-width: 0;
-}
-
-// --------------------------------
-
-// Font Size
-
-// --------------------------------
-
-.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 Transform
-
-// --------------------------------
-
-.text-uppercase  { text-transform: uppercase; }
-.text-capitalize { text-transform: capitalize; }
-
-// --------------------------------
-
-// Letter Spacing
-
-// --------------------------------
-
-.letter-spacing-xs { letter-spacing: -0.1em; }
-.letter-spacing-sm { letter-spacing: -0.05em; }
-.letter-spacing-md { letter-spacing: 0.05em; }
-.letter-spacing-lg { letter-spacing: 0.1em; }
-.letter-spacing-xl { letter-spacing: 0.2em; }
-
-// --------------------------------
-
-// Font Weight
-
-// --------------------------------
-
-.font-light    { font-weight: 300; }
-.font-normal   { font-weight: 400; }
-.font-medium   { font-weight: 500; }
-.font-semibold { font-weight: 600; }
-.font-bold, .text-bold { font-weight: 700; }
-
-// --------------------------------
-
-// Font Style
-
-// --------------------------------
-
-.font-italic { font-style: italic; }
-
-// --------------------------------
-
-// Font Smooth
-
-// --------------------------------
-
-.font-smooth {
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-// --------------------------------
-
-// Font Family
-
-// --------------------------------
-
-.font-primary { font-family: var(--font-primary); }
-
-// --------------------------------
-
-// Text Align
-
-// --------------------------------
-
-.text-center  { text-align: center; }
-.text-left    { text-align: left; }
-.text-right   { text-align: right; }
-.text-justify { text-align: justify; }
-
-// --------------------------------
-
-// Text Decoration
-
-// --------------------------------
-
-.text-line-through    { text-decoration: line-through; }
-.text-underline       { text-decoration: underline; }
-.text-decoration-none { text-decoration: none; }
-
-// --------------------------------
-
-// Text Shadow
-
-// --------------------------------
-
-.text-shadow-xs { text-shadow: 0 1px 1px rgba(#000, 0.15); }
-.text-shadow-sm { text-shadow: 0 1px 2px rgba(#000, 0.25); }
-.text-shadow-md { text-shadow: 0 1px 2px rgba(#000, 0.1), 0 2px 4px rgba(#000, 0.2); }
-.text-shadow-lg { text-shadow: 0 1px 4px rgba(#000, 0.1), 0 2px 8px rgba(#000, 0.15), 0 4px 16px rgba(#000, 0.2); }
-.text-shadow-xl { text-shadow: 0 1px 4px rgba(#000, 0.1), 0 2px 8px rgba(#000, 0.15), 0 4px 16px rgba(#000, 0.2), 0 6px 24px rgba(#000, 0.25); }
-.text-shadow-none { text-shadow: none; }
-
-// --------------------------------
-
-// .text-component vertical spacing
-
-// --------------------------------
-
-.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
-
-// --------------------------------
-
-.line-height-xs {
-  --heading-line-height: 1;
-  --body-line-height: 1.1;
-
-  &:not(.text-component) {
-    line-height: 1.1;
-  }
-}
-
-.line-height-sm {
-  --heading-line-height: 1.1;
-  --body-line-height: 1.2;
-
-  &:not(.text-component) {
-    line-height: 1.2;
-  }
-}
-
-.line-height-md {
-  --heading-line-height: 1.15;
-  --body-line-height: 1.4;
-
-  &:not(.text-component) {
-    line-height: 1.4;
-  }
-}
-
-.line-height-lg {
-  --heading-line-height: 1.22;
-  --body-line-height: 1.58;
-
-  &:not(.text-component) {
-    line-height: 1.58;
-  }
-}
-
-.line-height-xl {
-  --heading-line-height: 1.3;
-  --body-line-height: 1.72;
-
-  &: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; }
-
-// --------------------------------
-
-// White Space
-
-// --------------------------------
-
-.ws-nowrap, .text-nowrap { white-space: nowrap; }
-
-// --------------------------------
-
-// Cursor
-
-// --------------------------------
-
-.cursor-pointer { cursor: pointer; }
-.cursor-default { cursor: default; }
-
-// --------------------------------
-
-// Pointer Events
-
-// --------------------------------
-
-.pointer-events-auto { pointer-events: auto; }
-.pointer-events-none { pointer-events: none; }
-
-// --------------------------------
-
-// User Select
-
-// --------------------------------
-
-.user-select-none { user-select: none; }
-.user-select-all  { user-select: all; }
-
-// --------------------------------
-
-// Color
-
-// --------------------------------
-
-[class^="color-"], [class*=" color-"] { --color-o: 1; }
-
-.color-inherit { color: inherit; }
-
-.color-bg-darker { color: alpha(var(--color-bg-darker), var(--color-o, 1)); }
-.color-bg-dark { color: alpha(var(--color-bg-dark), var(--color-o, 1)); }
-.color-bg { color: alpha(var(--color-bg), var(--color-o, 1)); }
-.color-bg-light { color: alpha(var(--color-bg-light), var(--color-o, 1)); }
-.color-bg-lighter { color: alpha(var(--color-bg-lighter), var(--color-o, 1)); }
-
-.color-contrast-lower { color: alpha(var(--color-contrast-lower), var(--color-o, 1)); }
-.color-contrast-low { color: alpha(var(--color-contrast-low), var(--color-o, 1)); }
-.color-contrast-medium { color: alpha(var(--color-contrast-medium), var(--color-o, 1)); }
-.color-contrast-high { color: alpha(var(--color-contrast-high), var(--color-o, 1)); }
-.color-contrast-higher { color: alpha(var(--color-contrast-higher), var(--color-o, 1)); }
-
-.color-primary-darker { color: alpha(var(--color-primary-darker), var(--color-o, 1)); }
-.color-primary-dark { color: alpha(var(--color-primary-dark), var(--color-o, 1)); }
-.color-primary { color: alpha(var(--color-primary), var(--color-o, 1)); }
-.color-primary-light { color: alpha(var(--color-primary-light), var(--color-o, 1)); }
-.color-primary-lighter { color: alpha(var(--color-primary-lighter), var(--color-o, 1)); }
-
-.color-accent-darker { color: alpha(var(--color-accent-darker), var(--color-o, 1)); }
-.color-accent-dark { color: alpha(var(--color-accent-dark), var(--color-o, 1)); }
-.color-accent { color: alpha(var(--color-accent), var(--color-o, 1)); }
-.color-accent-light { color: alpha(var(--color-accent-light), var(--color-o, 1)); }
-.color-accent-lighter { color: alpha(var(--color-accent-lighter), var(--color-o, 1)); }
-
-.color-success-darker { color: alpha(var(--color-success-darker), var(--color-o, 1)); }
-.color-success-dark { color: alpha(var(--color-success-dark), var(--color-o, 1)); }
-.color-success { color: alpha(var(--color-success), var(--color-o, 1)); }
-.color-success-light { color: alpha(var(--color-success-light), var(--color-o, 1)); }
-.color-success-lighter { color: alpha(var(--color-success-lighter), var(--color-o, 1)); }
-
-.color-warning-darker { color: alpha(var(--color-warning-darker), var(--color-o, 1)); }
-.color-warning-dark { color: alpha(var(--color-warning-dark), var(--color-o, 1)); }
-.color-warning { color: alpha(var(--color-warning), var(--color-o, 1)); }
-.color-warning-light { color: alpha(var(--color-warning-light), var(--color-o, 1)); }
-.color-warning-lighter { color: alpha(var(--color-warning-lighter), var(--color-o, 1)); }
-
-.color-error-darker { color: alpha(var(--color-error-darker), var(--color-o, 1)); }
-.color-error-dark { color: alpha(var(--color-error-dark), var(--color-o, 1)); }
-.color-error { color: alpha(var(--color-error), var(--color-o, 1)); }
-.color-error-light { color: alpha(var(--color-error-light), var(--color-o, 1)); }
-.color-error-lighter { color: alpha(var(--color-error-lighter), var(--color-o, 1)); }
-
-.color-white { color: alpha(var(--color-white), var(--color-o, 1)); }
-.color-black { color: alpha(var(--color-black), var(--color-o, 1)); }
-
-.color-opacity-0    { --color-o: 0; }
-.color-opacity-10\% { --color-o: 0.1; }
-.color-opacity-20\% { --color-o: 0.2; }
-.color-opacity-30\% { --color-o: 0.3; }
-.color-opacity-40\% { --color-o: 0.4; }
-.color-opacity-50\% { --color-o: 0.5; }
-.color-opacity-60\% { --color-o: 0.6; }
-.color-opacity-70\% { --color-o: 0.7; }
-.color-opacity-80\% { --color-o: 0.8; }
-.color-opacity-90\% { --color-o: 0.9; }
-
-// --------------------------------
-
-// Gradients
-
-// --------------------------------
-
-[class^="color-gradient"], [class*=" color-gradient"] {
-  color: transparent !important;
-  background-clip: text;
-}
-
-// --------------------------------
-
-// Width
-
-// --------------------------------
-
-.width-xxxxs { width: var(--size-xxxxs, 0.25rem); }
-.width-xxxs  { width: var(--size-xxxs, 0.5rem); }
-.width-xxs   { width: var(--size-xxs, 0.75rem); }
-.width-xs    { width: var(--size-xs, 1rem); }
-.width-sm    { width: var(--size-sm, 1.5rem); }
-.width-md    { width: var(--size-md, 2rem); }
-.width-lg    { width: var(--size-lg, 3rem); }
-.width-xl    { width: var(--size-xl, 4rem); }
-.width-xxl   { width: var(--size-xxl, 6rem); }
-.width-xxxl  { width: var(--size-xxxl, 8rem); }
-.width-xxxxl { width: var(--size-xxxxl, 16rem); }
-.width-0     { width: 0; }
-.width-10\%  { width: 10%; }
-.width-20\%  { width: 20%; }
-.width-25\%  { width: 25%; }
-.width-30\%  { width: 30%; }
-.width-33\%  { width: calc(100% / 3); }
-.width-40\%  { width: 40%; }
-.width-50\%  { width: 50%; }
-.width-60\%  { width: 60%; }
-.width-66\%  { width: calc(100% / 1.5); }
-.width-70\%  { width: 70%; }
-.width-75\%  { width: 75%; }
-.width-80\%  { width: 80%; }
-.width-90\%  { width: 90%; }
-.width-100\% { width: 100%; }
-.width-100vw { width: 100vw; }
-.width-auto  { width: auto; }
-.width-fit-content  { width: fit-content; }
-.width-max-content  { width: max-content; }
-
-// --------------------------------
-
-// Height
-
-// --------------------------------
-
-.height-xxxxs { height: var(--size-xxxxs, 0.25rem); }
-.height-xxxs  { height: var(--size-xxxs, 0.5rem); }
-.height-xxs   { height: var(--size-xxs, 0.75rem); }
-.height-xs    { height: var(--size-xs, 1rem); }
-.height-sm    { height: var(--size-sm, 1.5rem); }
-.height-md    { height: var(--size-md, 2rem); }
-.height-lg    { height: var(--size-lg, 3rem); }
-.height-xl    { height: var(--size-xl, 4rem); }
-.height-xxl   { height: var(--size-xxl, 6rem); }
-.height-xxxl  { height: var(--size-xxxl, 8rem); }
-.height-xxxxl { height: var(--size-xxxxl, 16rem); }
-.height-0     { height: 0; }
-.height-10\%  { height: 10%; }
-.height-20\%  { height: 20%; }
-.height-25\%  { height: 25%; }
-.height-30\%  { height: 30%; }
-.height-33\%  { height: calc(100% / 3); }
-.height-40\%  { height: 40%; }
-.height-50\%  { height: 50%; }
-.height-60\%  { height: 60%; }
-.height-66\%  { height: calc(100% / 1.5); }
-.height-70\%  { height: 70%; }
-.height-75\%  { height: 75%; }
-.height-80\%  { height: 80%; }
-.height-90\%  { height: 90%; }
-.height-100\% { height: 100%; }
-.height-100vh { height: 100vh; }
-.height-auto  { height: auto; }
-.height-fit-content  { height: fit-content; }
-.height-max-content  { height: max-content; }
-
-// --------------------------------
-
-// Min-Width
-
-// --------------------------------
-
-.min-width-0     { min-width: 0; }
-.min-width-25\%  { min-width: 25%; }
-.min-width-33\%  { min-width: calc(100% / 3); }
-.min-width-50\%  { min-width: 50%; }
-.min-width-66\%  { min-width: calc(100% / 1.5); }
-.min-width-75\%  { min-width: 75%; }
-.min-width-100\% { min-width: 100%; }
-.min-width-100vw { min-width: 100vw; }
-.min-width-fit-content { min-width: fit-content; }
-.min-width-max-content { min-width: max-content; }
-
-// --------------------------------
-
-// Min-Height
-
-// --------------------------------
-
-.min-height-100\% { min-height: 100%; }
-.min-height-100vh { min-height: 100vh; }
-.min-height-fit-content { min-height: fit-content; }
-.min-height-max-content { min-height: max-content; }
-
-// --------------------------------
-
-// Max-Width
-
-// --------------------------------
-
-:root {
-  --max-width-xxxxs: 20rem;  // ~320px
-  --max-width-xxxs:  26rem;  // ~416px
-  --max-width-xxs:   32rem;  // ~512px
-  --max-width-xs:    38rem;  // ~608px
-  --max-width-sm:    48rem;  // ~768px
-  --max-width-md:    64rem;  // ~1024px
-  --max-width-lg:    80rem;  // ~1280px
-  --max-width-xl:    90rem;  // ~1440px
-  --max-width-xxl:   100rem; // ~1600px
-  --max-width-xxxl:  120rem; // ~1920px
-  --max-width-xxxxl: 150rem; // ~2400px
-}
-
-.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; }
-.max-width-fit-content  { max-width: fit-content; }
-.max-width-max-content  { max-width: max-content; }
-
-// alt approach - max-width is equal to current breakpoint
-$breakpointsNr: length($breakpoints);
-@each $breakpoint, $value in $breakpoints {
-  $i: index($breakpoints, $breakpoint $value);
-  @if $i == 1 {
-    [class^="max-width-adaptive"], [class*=" max-width-adaptive"] {
-      max-width: map-get($map: $breakpoints, $key: #{$breakpoint});
-    }
-  } @else {
-    $classList : '';
-    @each $subBreakpoint, $subValue in $breakpoints {
-      $j: index($breakpoints, $subBreakpoint $subValue);
-      @if $j == $i {
-        $classList: '.max-width-adaptive-#{$subBreakpoint}';
-      } @else if $j > $i {
-        $classList: $classList+', .max-width-adaptive-#{$subBreakpoint}';
-      }
-    }
-    @if $i < $breakpointsNr {
-      $classList: $classList+', .max-width-adaptive';
-    }
-    @include breakpoint(#{$breakpoint}) {
-      #{$classList} {
-        max-width: map-get($map: $breakpoints, $key: #{$breakpoint});
-      }
-    }
-  }
-}
-
-// --------------------------------
-
-// Max-Height
-
-// --------------------------------
-
-.max-height-100\% { max-height: 100%; }
-.max-height-100vh { max-height: 100vh; }
-
-// --------------------------------
-
-// Box-Shadow
-
-// --------------------------------
-
-.shadow-xs { box-shadow: var(--shadow-xs); }
-.shadow-sm { box-shadow: var(--shadow-sm); }
-.shadow-md { box-shadow: var(--shadow-md); }
-.shadow-lg { box-shadow: var(--shadow-lg); }
-.shadow-xl { box-shadow: var(--shadow-xl); }
-.shadow-none { box-shadow: none; }
-
-:root {
-  --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);
-}
-
-.inner-glow, .inner-glow-top {
-  position: relative;
-
-  &::after {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    border-radius: inherit;
-    pointer-events: none;
-  }
-}
-
-.inner-glow::after { box-shadow: var(--inner-glow); }
-.inner-glow-top::after { box-shadow: var(--inner-glow-top); }
-
-// --------------------------------
-
-// Position
-
-// --------------------------------
-
-.position-relative { position: relative; }
-.position-absolute { position: absolute; }
-.position-fixed    { position: fixed; }
-.position-sticky   { position: 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-unset     { bottom: unset; }
-.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
-
-// --------------------------------
-
-.z-index-header { z-index: var(--z-index-header); }
-.z-index-popover { z-index: var(--z-index-popover); }
-.z-index-fixed-element { z-index: var(--z-index-fixed-element); }
-.z-index-overlay { z-index: var(--z-index-overlay); }
-
-.z-index-1 { z-index: 1; }
-.z-index-2 { z-index: 2; }
-.z-index-3 { z-index: 3; }
-
-// --------------------------------
-
-// Overflow
-
-// --------------------------------
-
-.overflow-hidden { overflow: hidden; }
-.overflow-auto   { overflow: auto; }
-.momentum-scrolling { -webkit-overflow-scrolling: touch; }
-
-// overscroll-behavior
-.overscroll-contain { overscroll-behavior: contain; }
-
-// --------------------------------
-
-// Scroll Behavior
-
-// --------------------------------
-
-.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
-
-// --------------------------------
-
-.opacity-0    { opacity: 0; }
-.opacity-10\% { opacity: 0.1; }
-.opacity-20\% { opacity: 0.2; }
-.opacity-30\% { opacity: 0.3; }
-.opacity-40\% { opacity: 0.4; }
-.opacity-50\% { opacity: 0.5; }
-.opacity-60\% { opacity: 0.6; }
-.opacity-70\% { opacity: 0.7; }
-.opacity-80\% { opacity: 0.8; }
-.opacity-90\% { opacity: 0.9; }
-
-// --------------------------------
-
-// Float
-
-// --------------------------------
-
-.float-left  { float: left; }
-.float-right { float: right; }
-
-.clearfix::after {
-  content: "";
-  display: table;
-  clear: both;
-}
-
-// --------------------------------
-
-// Border
-
-// --------------------------------
-
-[class^="border-"], [class*=" border-"] {
-  --border-o: 1;
-}
-
-.border { border: var(--border-width, 1px) var(--border-style, solid) alpha(var(--color-contrast-lower), var(--border-o, 1)); }
-.border-top { border-top: var(--border-width, 1px) var(--border-style, solid) alpha(var(--color-contrast-lower), var(--border-o, 1)); }
-.border-bottom { border-bottom: var(--border-width, 1px) var(--border-style, solid) alpha(var(--color-contrast-lower), var(--border-o, 1)); }
-.border-left { border-left: var(--border-width, 1px) var(--border-style, solid) alpha(var(--color-contrast-lower), var(--border-o, 1)); }
-.border-right { border-right: var(--border-width, 1px) var(--border-style, solid) alpha(var(--color-contrast-lower), var(--border-o, 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: alpha(var(--color-bg-darker), var(--border-o, 1)); }
-.border-bg-dark { border-color: alpha(var(--color-bg-dark), var(--border-o, 1)); }
-.border-bg { border-color: alpha(var(--color-bg), var(--border-o, 1)); }
-.border-bg-light { border-color: alpha(var(--color-bg-light), var(--border-o, 1)); }
-.border-bg-lighter { border-color: alpha(var(--color-bg-lighter), var(--border-o, 1)); }
-
-.border-contrast-lower { border-color: alpha(var(--color-contrast-lower), var(--border-o, 1)); }
-.border-contrast-low { border-color: alpha(var(--color-contrast-low), var(--border-o, 1)); }
-.border-contrast-medium { border-color: alpha(var(--color-contrast-medium), var(--border-o, 1)); }
-.border-contrast-high { border-color: alpha(var(--color-contrast-high), var(--border-o, 1)); }
-.border-contrast-higher { border-color: alpha(var(--color-contrast-higher), var(--border-o, 1)); }
-
-.border-primary-darker { border-color: alpha(var(--color-primary-darker), var(--border-o, 1)); }
-.border-primary-dark { border-color: alpha(var(--color-primary-dark), var(--border-o, 1)); }
-.border-primary { border-color: alpha(var(--color-primary), var(--border-o, 1)); }
-.border-primary-light { border-color: alpha(var(--color-primary-light), var(--border-o, 1)); }
-.border-primary-lighter { border-color: alpha(var(--color-primary-lighter), var(--border-o, 1)); }
-
-.border-accent-darker { border-color: alpha(var(--color-accent-darker), var(--border-o, 1)); }
-.border-accent-dark { border-color: alpha(var(--color-accent-dark), var(--border-o, 1)); }
-.border-accent { border-color: alpha(var(--color-accent), var(--border-o, 1)); }
-.border-accent-light { border-color: alpha(var(--color-accent-light), var(--border-o, 1)); }
-.border-accent-lighter { border-color: alpha(var(--color-accent-lighter), var(--border-o, 1)); }
-
-.border-success-darker { border-color: alpha(var(--color-success-darker), var(--border-o, 1)); }
-.border-success-dark { border-color: alpha(var(--color-success-dark), var(--border-o, 1)); }
-.border-success { border-color: alpha(var(--color-success), var(--border-o, 1)); }
-.border-success-light { border-color: alpha(var(--color-success-light), var(--border-o, 1)); }
-.border-success-lighter { border-color: alpha(var(--color-success-lighter), var(--border-o, 1)); }
-
-.border-warning-darker { border-color: alpha(var(--color-warning-darker), var(--border-o, 1)); }
-.border-warning-dark { border-color: alpha(var(--color-warning-dark), var(--border-o, 1)); }
-.border-warning { border-color: alpha(var(--color-warning), var(--border-o, 1)); }
-.border-warning-light { border-color: alpha(var(--color-warning-light), var(--border-o, 1)); }
-.border-warning-lighter { border-color: alpha(var(--color-warning-lighter), var(--border-o, 1)); }
-
-.border-error-darker { border-color: alpha(var(--color-error-darker), var(--border-o, 1)); }
-.border-error-dark { border-color: alpha(var(--color-error-dark), var(--border-o, 1)); }
-.border-error { border-color: alpha(var(--color-error), var(--border-o, 1)); }
-.border-error-light { border-color: alpha(var(--color-error-light), var(--border-o, 1)); }
-.border-error-lighter { border-color: alpha(var(--color-error-lighter), var(--border-o, 1)); }
-
-.border-white { border-color: alpha(var(--color-white), var(--border-o, 1)); }
-.border-black { border-color: alpha(var(--color-black), var(--border-o, 1)); }
-
-.border-opacity-0    { --border-o: 0; }
-.border-opacity-10\% { --border-o: 0.1; }
-.border-opacity-20\% { --border-o: 0.2; }
-.border-opacity-30\% { --border-o: 0.3; }
-.border-opacity-40\% { --border-o: 0.4; }
-.border-opacity-50\% { --border-o: 0.5; }
-.border-opacity-60\% { --border-o: 0.6; }
-.border-opacity-70\% { --border-o: 0.7; }
-.border-opacity-80\% { --border-o: 0.8; }
-.border-opacity-90\% { --border-o: 0.9; }
-
-// --------------------------------
-
-// Border Radius
-
-// --------------------------------
-
-.radius-sm { border-radius: var(--radius-sm); }
-.radius-md { border-radius: var(--radius-md); }
-.radius-lg { border-radius: var(--radius-lg); }
-.radius-50\% { border-radius: 50%; }
-.radius-full { border-radius: 50em; }
-.radius-0 { border-radius: 0; }
-.radius-inherit { border-radius: inherit; }
-.radius-top-left-0 { border-top-left-radius: 0; }
-.radius-top-right-0 { border-top-right-radius: 0; }
-.radius-bottom-right-0 { border-bottom-right-radius: 0; }
-.radius-bottom-left-0 { border-bottom-left-radius: 0; }
-
-// --------------------------------
-
-// Background
-
-// --------------------------------
-
-.bg, [class^="bg-"], [class*=" bg-"] { --bg-o: 1; }
-
-.bg-transparent { background-color: transparent; }
-.bg-inherit { background-color: inherit; }
-
-.bg-darker { background-color: alpha(var(--color-bg-darker), var(--bg-o)); }
-.bg-dark { background-color: alpha(var(--color-bg-dark), var(--bg-o)); }
-.bg { background-color: alpha(var(--color-bg), var(--bg-o)); }
-.bg-light { background-color: alpha(var(--color-bg-light), var(--bg-o)); }
-.bg-lighter { background-color: alpha(var(--color-bg-lighter), var(--bg-o)); }
-
-.bg-contrast-lower { background-color: alpha(var(--color-contrast-lower), var(--bg-o, 1)); }
-.bg-contrast-low { background-color: alpha(var(--color-contrast-low), var(--bg-o, 1)); }
-.bg-contrast-medium { background-color: alpha(var(--color-contrast-medium), var(--bg-o, 1)); }
-.bg-contrast-high { background-color: alpha(var(--color-contrast-high), var(--bg-o, 1)); }
-.bg-contrast-higher { background-color: alpha(var(--color-contrast-higher), var(--bg-o, 1)); }
-
-.bg-primary-darker { background-color: alpha(var(--color-primary-darker), var(--bg-o, 1)); }
-.bg-primary-dark { background-color: alpha(var(--color-primary-dark), var(--bg-o, 1)); }
-.bg-primary { background-color: alpha(var(--color-primary), var(--bg-o, 1)); }
-.bg-primary-light { background-color: alpha(var(--color-primary-light), var(--bg-o, 1)); }
-.bg-primary-lighter { background-color: alpha(var(--color-primary-lighter), var(--bg-o, 1)); }
-
-.bg-accent-darker { background-color: alpha(var(--color-accent-darker), var(--bg-o, 1)); }
-.bg-accent-dark { background-color: alpha(var(--color-accent-dark), var(--bg-o, 1)); }
-.bg-accent { background-color: alpha(var(--color-accent), var(--bg-o, 1)); }
-.bg-accent-light { background-color: alpha(var(--color-accent-light), var(--bg-o, 1)); }
-.bg-accent-lighter { background-color: alpha(var(--color-accent-lighter), var(--bg-o, 1)); }
-
-.bg-success-darker { background-color: alpha(var(--color-success-darker), var(--bg-o, 1)); }
-.bg-success-dark { background-color: alpha(var(--color-success-dark), var(--bg-o, 1)); }
-.bg-success { background-color: alpha(var(--color-success), var(--bg-o, 1)); }
-.bg-success-light { background-color: alpha(var(--color-success-light), var(--bg-o, 1)); }
-.bg-success-lighter { background-color: alpha(var(--color-success-lighter), var(--bg-o, 1)); }
-
-.bg-warning-darker { background-color: alpha(var(--color-warning-darker), var(--bg-o, 1)); }
-.bg-warning-dark { background-color: alpha(var(--color-warning-dark), var(--bg-o, 1)); }
-.bg-warning { background-color: alpha(var(--color-warning), var(--bg-o, 1)); }
-.bg-warning-light { background-color: alpha(var(--color-warning-light), var(--bg-o, 1)); }
-.bg-warning-lighter { background-color: alpha(var(--color-warning-lighter), var(--bg-o, 1)); }
-
-.bg-error-darker { background-color: alpha(var(--color-error-darker), var(--bg-o, 1)); }
-.bg-error-dark { background-color: alpha(var(--color-error-dark), var(--bg-o, 1)); }
-.bg-error { background-color: alpha(var(--color-error), var(--bg-o, 1)); }
-.bg-error-light { background-color: alpha(var(--color-error-light), var(--bg-o, 1)); }
-.bg-error-lighter { background-color: alpha(var(--color-error-lighter), var(--bg-o, 1)); }
-
-.bg-white { background-color: alpha(var(--color-white), var(--bg-o, 1)); }
-.bg-black { background-color: alpha(var(--color-black), var(--bg-o, 1)); }
-
-.bg-opacity-0    { --bg-o: 0; }
-.bg-opacity-10\% { --bg-o: 0.1; }
-.bg-opacity-20\% { --bg-o: 0.2; }
-.bg-opacity-30\% { --bg-o: 0.3; }
-.bg-opacity-40\% { --bg-o: 0.4; }
-.bg-opacity-50\% { --bg-o: 0.5; }
-.bg-opacity-60\% { --bg-o: 0.6; }
-.bg-opacity-70\% { --bg-o: 0.7; }
-.bg-opacity-80\% { --bg-o: 0.8; }
-.bg-opacity-90\% { --bg-o: 0.9; }
-
-.bg-center { background-position: center; }
-.bg-top { background-position: center top; }
-.bg-right { background-position: right center; }
-.bg-bottom { background-position: center bottom; }
-.bg-left { background-position: left center; }
-.bg-top-left { background-position: left top; }
-.bg-top-right { background-position: right top; }
-.bg-bottom-left { background-position: left bottom; }
-.bg-bottom-right { background-position: right bottom; }
-
-.bg-cover { background-size: cover; }
-.bg-no-repeat { background-repeat: no-repeat; }
-
-// --------------------------------
-
-// Backdrop Filter
-
-// --------------------------------
-
-.backdrop-blur-10 { backdrop-filter: blur(10px); }
-.backdrop-blur-20 { backdrop-filter: blur(20px); }
-
-// --------------------------------
-
-// Mix-Blend Mode
-
-// --------------------------------
-
-.isolate { isolation: isolate; }
-.blend-multiply { mix-blend-mode: multiply; }
-.blend-overlay { mix-blend-mode: overlay; }
-.blend-difference { mix-blend-mode: difference; }
-
-// --------------------------------
-
-// Object-Fit
-
-// --------------------------------
-
-.object-contain { object-fit: contain; }
-.object-cover   { object-fit: cover; }
-
-// --------------------------------
-
-// Perspective
-
-// --------------------------------
-
-.perspective-xs { perspective: 250px; }
-.perspective-sm { perspective: 500px; }
-.perspective-md { perspective: 1000px; }
-.perspective-lg { perspective: 1500px; }
-.perspective-xl { perspective: 3000px; }
-
-// --------------------------------
-
-// Transform
-
-// --------------------------------
-
-[class^="flip"], [class*=" flip"],
-[class^="-rotate"], [class*=" -rotate"],
-[class^="rotate"], [class*=" rotate"],
-[class^="-translate"], [class*=" -translate"],
-[class^="translate"], [class*=" translate"],
-[class^="-scale"], [class*=" -scale"],
-[class^="scale"], [class*=" scale"],
-[class^="-skew"], [class*=" -skew"],
-[class^="skew"], [class*=" skew"] {
-  --translate: 0;
-  --rotate: 0;
-  --skew: 0;
-  --scale: 1;
-
-  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%; }
-
-// --------------------------------
-
-// Transform Origin
-
-// --------------------------------
-
-.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; }
-
-// --------------------------------
-
-// SVG
-
-// --------------------------------
-
-.fill-current { fill: currentColor; }
-
-.stroke-current { stroke: currentColor; }
-
-.stroke-1 { stroke-width: 1px; }
-.stroke-2 { stroke-width: 2px; }
-.stroke-3 { stroke-width: 3px; }
-.stroke-4 { stroke-width: 4px; }
-
-// --------------------------------
-
-// Visibility
-
-// --------------------------------
-
-.visible { visibility: visible; }
-.invisible { visibility: hidden; }
-
-// --------------------------------
-
-// Responsive Variations
-
-// --------------------------------
-
-@each $breakpoint, $value in $breakpoints {
-  @include breakpoint(#{$breakpoint}) {
-    // flexbox
-    .flex\@#{$breakpoint} { display: flex; }
-    .inline-flex\@#{$breakpoint} { display: inline-flex; }
-    .flex-wrap\@#{$breakpoint} { flex-wrap: wrap; }
-    .flex-nowrap\@#{$breakpoint} { flex-wrap:nowrap; }
-    .flex-column\@#{$breakpoint} { flex-direction: column; }
-    .flex-column-reverse\@#{$breakpoint} { flex-direction: column-reverse; }
-    .flex-row\@#{$breakpoint} { flex-direction: row; }
-    .flex-row-reverse\@#{$breakpoint} { flex-direction: row-reverse; }
-    .flex-center\@#{$breakpoint} { justify-content: center; align-items: center; }
-
-    .flex-grow\@#{$breakpoint} { flex-grow: 1; }
-    .flex-grow-0\@#{$breakpoint} { flex-grow: 0; }
-    .flex-shrink\@#{$breakpoint} { flex-shrink: 1; }
-    .flex-shrink-0\@#{$breakpoint} { flex-shrink: 0; }
-    .flex-basis-0\@#{$breakpoint} { flex-basis: 0; }
-
-    // justify-content
-    .justify-start\@#{$breakpoint} { justify-content: flex-start; }
-    .justify-end\@#{$breakpoint} { justify-content: flex-end; }
-    .justify-center\@#{$breakpoint} { justify-content: center; }
-    .justify-between\@#{$breakpoint} { justify-content: space-between; }
-
-    // align-items
-    .items-center\@#{$breakpoint} { align-items: center; }
-    .items-start\@#{$breakpoint} { align-items: flex-start; }
-    .items-end\@#{$breakpoint} { align-items: flex-end; }
-    .items-baseline\@#{$breakpoint} { align-items: baseline; }
-
-    // order
-    .order-1\@#{$breakpoint}  { order: 1; }
-    .order-2\@#{$breakpoint}  { order: 2; }
-    .order-3\@#{$breakpoint}  { order: 3; }
-
-    // display
-    .block\@#{$breakpoint} { display: block; }
-    .inline-block\@#{$breakpoint} { display: inline-block; }
-    .inline\@#{$breakpoint} { display: inline; }
-    .contents\@#{$breakpoint} { display: contents; }
-    .hide\@#{$breakpoint} { display: none !important; }
-
-    // margin
-    .margin-xxxxs\@#{$breakpoint} { margin: var(--space-xxxxs); }
-    .margin-xxxs\@#{$breakpoint}  { margin: var(--space-xxxs); }
-    .margin-xxs\@#{$breakpoint}   { margin: var(--space-xxs); }
-    .margin-xs\@#{$breakpoint}    { margin: var(--space-xs); }
-    .margin-sm\@#{$breakpoint}    { margin: var(--space-sm); }
-    .margin-md\@#{$breakpoint}    { margin: var(--space-md); }
-    .margin-lg\@#{$breakpoint}    { margin: var(--space-lg); }
-    .margin-xl\@#{$breakpoint}    { margin: var(--space-xl); }
-    .margin-xxl\@#{$breakpoint}   { margin: var(--space-xxl); }
-    .margin-xxxl\@#{$breakpoint}  { margin: var(--space-xxxl); }
-    .margin-xxxxl\@#{$breakpoint} { margin: var(--space-xxxxl); }
-    .margin-auto\@#{$breakpoint}  { margin: auto; }
-    .margin-0\@#{$breakpoint}     { margin: 0; }
-
-    .margin-top-xxxxs\@#{$breakpoint} { margin-top: var(--space-xxxxs); }
-    .margin-top-xxxs\@#{$breakpoint}  { margin-top: var(--space-xxxs); }
-    .margin-top-xxs\@#{$breakpoint}   { margin-top: var(--space-xxs); }
-    .margin-top-xs\@#{$breakpoint}    { margin-top: var(--space-xs); }
-    .margin-top-sm\@#{$breakpoint}    { margin-top: var(--space-sm); }
-    .margin-top-md\@#{$breakpoint}    { margin-top: var(--space-md); }
-    .margin-top-lg\@#{$breakpoint}    { margin-top: var(--space-lg); }
-    .margin-top-xl\@#{$breakpoint}    { margin-top: var(--space-xl); }
-    .margin-top-xxl\@#{$breakpoint}   { margin-top: var(--space-xxl); }
-    .margin-top-xxxl\@#{$breakpoint}  { margin-top: var(--space-xxxl); }
-    .margin-top-xxxxl\@#{$breakpoint} { margin-top: var(--space-xxxxl); }
-    .margin-top-auto\@#{$breakpoint}  { margin-top: auto; }
-    .margin-top-0\@#{$breakpoint}     { margin-top: 0; }
-
-    .margin-bottom-xxxxs\@#{$breakpoint} { margin-bottom: var(--space-xxxxs); }
-    .margin-bottom-xxxs\@#{$breakpoint}  { margin-bottom: var(--space-xxxs); }
-    .margin-bottom-xxs\@#{$breakpoint}   { margin-bottom: var(--space-xxs); }
-    .margin-bottom-xs\@#{$breakpoint}    { margin-bottom: var(--space-xs); }
-    .margin-bottom-sm\@#{$breakpoint}    { margin-bottom: var(--space-sm); }
-    .margin-bottom-md\@#{$breakpoint}    { margin-bottom: var(--space-md); }
-    .margin-bottom-lg\@#{$breakpoint}    { margin-bottom: var(--space-lg); }
-    .margin-bottom-xl\@#{$breakpoint}    { margin-bottom: var(--space-xl); }
-    .margin-bottom-xxl\@#{$breakpoint}   { margin-bottom: var(--space-xxl); }
-    .margin-bottom-xxxl\@#{$breakpoint}  { margin-bottom: var(--space-xxxl); }
-    .margin-bottom-xxxxl\@#{$breakpoint} { margin-bottom: var(--space-xxxxl); }
-    .margin-bottom-auto\@#{$breakpoint}  { margin-bottom: auto; }
-    .margin-bottom-0\@#{$breakpoint}     { margin-bottom: 0; }
-
-    .margin-right-xxxxs\@#{$breakpoint} { margin-right: var(--space-xxxxs); }
-    .margin-right-xxxs\@#{$breakpoint}  { margin-right: var(--space-xxxs); }
-    .margin-right-xxs\@#{$breakpoint}   { margin-right: var(--space-xxs); }
-    .margin-right-xs\@#{$breakpoint}    { margin-right: var(--space-xs); }
-    .margin-right-sm\@#{$breakpoint}    { margin-right: var(--space-sm); }
-    .margin-right-md\@#{$breakpoint}    { margin-right: var(--space-md); }
-    .margin-right-lg\@#{$breakpoint}    { margin-right: var(--space-lg); }
-    .margin-right-xl\@#{$breakpoint}    { margin-right: var(--space-xl); }
-    .margin-right-xxl\@#{$breakpoint}   { margin-right: var(--space-xxl); }
-    .margin-right-xxxl\@#{$breakpoint}  { margin-right: var(--space-xxxl); }
-    .margin-right-xxxxl\@#{$breakpoint} { margin-right: var(--space-xxxxl); }
-    .margin-right-auto\@#{$breakpoint}  { margin-right: auto; }
-    .margin-right-0\@#{$breakpoint}     { margin-right: 0; }
-
-    .margin-left-xxxxs\@#{$breakpoint} { margin-left: var(--space-xxxxs); }
-    .margin-left-xxxs\@#{$breakpoint}  { margin-left: var(--space-xxxs); }
-    .margin-left-xxs\@#{$breakpoint}   { margin-left: var(--space-xxs); }
-    .margin-left-xs\@#{$breakpoint}    { margin-left: var(--space-xs); }
-    .margin-left-sm\@#{$breakpoint}    { margin-left: var(--space-sm); }
-    .margin-left-md\@#{$breakpoint}    { margin-left: var(--space-md); }
-    .margin-left-lg\@#{$breakpoint}    { margin-left: var(--space-lg); }
-    .margin-left-xl\@#{$breakpoint}    { margin-left: var(--space-xl); }
-    .margin-left-xxl\@#{$breakpoint}   { margin-left: var(--space-xxl); }
-    .margin-left-xxxl\@#{$breakpoint}  { margin-left: var(--space-xxxl); }
-    .margin-left-xxxxl\@#{$breakpoint} { margin-left: var(--space-xxxxl); }
-    .margin-left-auto\@#{$breakpoint}  { margin-left: auto; }
-    .margin-left-0\@#{$breakpoint}     { margin-left: 0; }
-
-    .margin-x-xxxxs\@#{$breakpoint} { margin-left: var(--space-xxxxs); margin-right: var(--space-xxxxs); }
-    .margin-x-xxxs\@#{$breakpoint}  { margin-left: var(--space-xxxs); margin-right: var(--space-xxxs); }
-    .margin-x-xxs\@#{$breakpoint}   { margin-left: var(--space-xxs); margin-right: var(--space-xxs); }
-    .margin-x-xs\@#{$breakpoint}    { margin-left: var(--space-xs); margin-right: var(--space-xs); }
-    .margin-x-sm\@#{$breakpoint}    { margin-left: var(--space-sm); margin-right: var(--space-sm); }
-    .margin-x-md\@#{$breakpoint}    { margin-left: var(--space-md); margin-right: var(--space-md); }
-    .margin-x-lg\@#{$breakpoint}    { margin-left: var(--space-lg); margin-right: var(--space-lg); }
-    .margin-x-xl\@#{$breakpoint}    { margin-left: var(--space-xl); margin-right: var(--space-xl); }
-    .margin-x-xxl\@#{$breakpoint}   { margin-left: var(--space-xxl); margin-right: var(--space-xxl); }
-    .margin-x-xxxl\@#{$breakpoint}  { margin-left: var(--space-xxxl); margin-right: var(--space-xxxl); }
-    .margin-x-xxxxl\@#{$breakpoint} { margin-left: var(--space-xxxxl); margin-right: var(--space-xxxxl); }
-    .margin-x-auto\@#{$breakpoint}  { margin-left: auto; margin-right: auto; }
-    .margin-x-0\@#{$breakpoint}     { margin-left: 0; margin-right: 0; }
-
-    .margin-y-xxxxs\@#{$breakpoint} { margin-top: var(--space-xxxxs); margin-bottom: var(--space-xxxxs); }
-    .margin-y-xxxs\@#{$breakpoint}  { margin-top: var(--space-xxxs); margin-bottom: var(--space-xxxs); }
-    .margin-y-xxs\@#{$breakpoint}   { margin-top: var(--space-xxs); margin-bottom: var(--space-xxs); }
-    .margin-y-xs\@#{$breakpoint}    { margin-top: var(--space-xs); margin-bottom: var(--space-xs); }
-    .margin-y-sm\@#{$breakpoint}    { margin-top: var(--space-sm); margin-bottom: var(--space-sm); }
-    .margin-y-md\@#{$breakpoint}    { margin-top: var(--space-md); margin-bottom: var(--space-md); }
-    .margin-y-lg\@#{$breakpoint}    { margin-top: var(--space-lg); margin-bottom: var(--space-lg); }
-    .margin-y-xl\@#{$breakpoint}    { margin-top: var(--space-xl); margin-bottom: var(--space-xl); }
-    .margin-y-xxl\@#{$breakpoint}   { margin-top: var(--space-xxl); margin-bottom: var(--space-xxl); }
-    .margin-y-xxxl\@#{$breakpoint}  { margin-top: var(--space-xxxl); margin-bottom: var(--space-xxxl); }
-    .margin-y-xxxxl\@#{$breakpoint} { margin-top: var(--space-xxxxl); margin-bottom: var(--space-xxxxl); }
-    .margin-y-auto\@#{$breakpoint}  { margin-top: auto; margin-bottom: auto; }
-    .margin-y-0\@#{$breakpoint}     { margin-top: 0; margin-bottom: 0; }
-
-    // padding
-    .padding-xxxxs\@#{$breakpoint} { padding: var(--space-xxxxs); }
-    .padding-xxxs\@#{$breakpoint}  { padding: var(--space-xxxs); }
-    .padding-xxs\@#{$breakpoint}   { padding: var(--space-xxs); }
-    .padding-xs\@#{$breakpoint}    { padding: var(--space-xs); }
-    .padding-sm\@#{$breakpoint}    { padding: var(--space-sm); }
-    .padding-md\@#{$breakpoint}    { padding: var(--space-md); }
-    .padding-lg\@#{$breakpoint}    { padding: var(--space-lg); }
-    .padding-xl\@#{$breakpoint}    { padding: var(--space-xl); }
-    .padding-xxl\@#{$breakpoint}   { padding: var(--space-xxl); }
-    .padding-xxxl\@#{$breakpoint}  { padding: var(--space-xxxl); }
-    .padding-xxxxl\@#{$breakpoint} { padding: var(--space-xxxxl); }
-    .padding-0\@#{$breakpoint}     { padding: 0; }
-    .padding-component\@#{$breakpoint} { padding: var(--component-padding); }
-
-    .padding-top-xxxxs\@#{$breakpoint} { padding-top: var(--space-xxxxs); }
-    .padding-top-xxxs\@#{$breakpoint}  { padding-top: var(--space-xxxs); }
-    .padding-top-xxs\@#{$breakpoint}   { padding-top: var(--space-xxs); }
-    .padding-top-xs\@#{$breakpoint}    { padding-top: var(--space-xs); }
-    .padding-top-sm\@#{$breakpoint}    { padding-top: var(--space-sm); }
-    .padding-top-md\@#{$breakpoint}    { padding-top: var(--space-md); }
-    .padding-top-lg\@#{$breakpoint}    { padding-top: var(--space-lg); }
-    .padding-top-xl\@#{$breakpoint}    { padding-top: var(--space-xl); }
-    .padding-top-xxl\@#{$breakpoint}   { padding-top: var(--space-xxl); }
-    .padding-top-xxxl\@#{$breakpoint}  { padding-top: var(--space-xxxl); }
-    .padding-top-xxxxl\@#{$breakpoint} { padding-top: var(--space-xxxxl); }
-    .padding-top-0\@#{$breakpoint}     { padding-top: 0; }
-    .padding-top-component\@#{$breakpoint} { padding-top: var(--component-padding); }
-
-    .padding-bottom-xxxxs\@#{$breakpoint} { padding-bottom: var(--space-xxxxs); }
-    .padding-bottom-xxxs\@#{$breakpoint}  { padding-bottom: var(--space-xxxs); }
-    .padding-bottom-xxs\@#{$breakpoint}   { padding-bottom: var(--space-xxs); }
-    .padding-bottom-xs\@#{$breakpoint}    { padding-bottom: var(--space-xs); }
-    .padding-bottom-sm\@#{$breakpoint}    { padding-bottom: var(--space-sm); }
-    .padding-bottom-md\@#{$breakpoint}    { padding-bottom: var(--space-md); }
-    .padding-bottom-lg\@#{$breakpoint}    { padding-bottom: var(--space-lg); }
-    .padding-bottom-xl\@#{$breakpoint}    { padding-bottom: var(--space-xl); }
-    .padding-bottom-xxl\@#{$breakpoint}   { padding-bottom: var(--space-xxl); }
-    .padding-bottom-xxxl\@#{$breakpoint}  { padding-bottom: var(--space-xxxl); }
-    .padding-bottom-xxxxl\@#{$breakpoint} { padding-bottom: var(--space-xxxxl); }
-    .padding-bottom-0\@#{$breakpoint}     { padding-bottom: 0; }
-    .padding-bottom-component\@#{$breakpoint} { padding-bottom: var(--component-padding); }
-
-    .padding-right-xxxxs\@#{$breakpoint} { padding-right: var(--space-xxxxs); }
-    .padding-right-xxxs\@#{$breakpoint}  { padding-right: var(--space-xxxs); }
-    .padding-right-xxs\@#{$breakpoint}   { padding-right: var(--space-xxs); }
-    .padding-right-xs\@#{$breakpoint}    { padding-right: var(--space-xs); }
-    .padding-right-sm\@#{$breakpoint}    { padding-right: var(--space-sm); }
-    .padding-right-md\@#{$breakpoint}    { padding-right: var(--space-md); }
-    .padding-right-lg\@#{$breakpoint}    { padding-right: var(--space-lg); }
-    .padding-right-xl\@#{$breakpoint}    { padding-right: var(--space-xl); }
-    .padding-right-xxl\@#{$breakpoint}   { padding-right: var(--space-xxl); }
-    .padding-right-xxxl\@#{$breakpoint}  { padding-right: var(--space-xxxl); }
-    .padding-right-xxxxl\@#{$breakpoint} { padding-right: var(--space-xxxxl); }
-    .padding-right-0\@#{$breakpoint}     { padding-right: 0; }
-    .padding-right-component\@#{$breakpoint} { padding-right: var(--component-padding); }
-
-    .padding-left-xxxxs\@#{$breakpoint} { padding-left: var(--space-xxxxs); }
-    .padding-left-xxxs\@#{$breakpoint}  { padding-left: var(--space-xxxs); }
-    .padding-left-xxs\@#{$breakpoint}   { padding-left: var(--space-xxs); }
-    .padding-left-xs\@#{$breakpoint}    { padding-left: var(--space-xs); }
-    .padding-left-sm\@#{$breakpoint}    { padding-left: var(--space-sm); }
-    .padding-left-md\@#{$breakpoint}    { padding-left: var(--space-md); }
-    .padding-left-lg\@#{$breakpoint}    { padding-left: var(--space-lg); }
-    .padding-left-xl\@#{$breakpoint}    { padding-left: var(--space-xl); }
-    .padding-left-xxl\@#{$breakpoint}   { padding-left: var(--space-xxl); }
-    .padding-left-xxxl\@#{$breakpoint}  { padding-left: var(--space-xxxl); }
-    .padding-left-xxxxl\@#{$breakpoint} { padding-left: var(--space-xxxxl); }
-    .padding-left-0\@#{$breakpoint}     { padding-left: 0; }
-    .padding-left-component\@#{$breakpoint} { padding-left: var(--component-padding); }
-
-    .padding-x-xxxxs\@#{$breakpoint} { padding-left: var(--space-xxxxs); padding-right: var(--space-xxxxs); }
-    .padding-x-xxxs\@#{$breakpoint}  { padding-left: var(--space-xxxs); padding-right: var(--space-xxxs); }
-    .padding-x-xxs\@#{$breakpoint}   { padding-left: var(--space-xxs); padding-right: var(--space-xxs); }
-    .padding-x-xs\@#{$breakpoint}    { padding-left: var(--space-xs); padding-right: var(--space-xs); }
-    .padding-x-sm\@#{$breakpoint}    { padding-left: var(--space-sm); padding-right: var(--space-sm); }
-    .padding-x-md\@#{$breakpoint}    { padding-left: var(--space-md); padding-right: var(--space-md); }
-    .padding-x-lg\@#{$breakpoint}    { padding-left: var(--space-lg); padding-right: var(--space-lg); }
-    .padding-x-xl\@#{$breakpoint}    { padding-left: var(--space-xl); padding-right: var(--space-xl); }
-    .padding-x-xxl\@#{$breakpoint}   { padding-left: var(--space-xxl); padding-right: var(--space-xxl); }
-    .padding-x-xxxl\@#{$breakpoint}  { padding-left: var(--space-xxxl); padding-right: var(--space-xxxl); }
-    .padding-x-xxxxl\@#{$breakpoint} { padding-left: var(--space-xxxxl); padding-right: var(--space-xxxxl); }
-    .padding-x-0\@#{$breakpoint}     { padding-left: 0; padding-right: 0; }
-    .padding-x-component\@#{$breakpoint} { padding-left: var(--component-padding); padding-right: var(--component-padding); }
-
-    .padding-y-xxxxs\@#{$breakpoint} { padding-top: var(--space-xxxxs); padding-bottom: var(--space-xxxxs); }
-    .padding-y-xxxs\@#{$breakpoint}  { padding-top: var(--space-xxxs); padding-bottom: var(--space-xxxs); }
-    .padding-y-xxs\@#{$breakpoint}   { padding-top: var(--space-xxs); padding-bottom: var(--space-xxs); }
-    .padding-y-xs\@#{$breakpoint}    { padding-top: var(--space-xs); padding-bottom: var(--space-xs); }
-    .padding-y-sm\@#{$breakpoint}    { padding-top: var(--space-sm); padding-bottom: var(--space-sm); }
-    .padding-y-md\@#{$breakpoint}    { padding-top: var(--space-md); padding-bottom: var(--space-md); }
-    .padding-y-lg\@#{$breakpoint}    { padding-top: var(--space-lg); padding-bottom: var(--space-lg); }
-    .padding-y-xl\@#{$breakpoint}    { padding-top: var(--space-xl); padding-bottom: var(--space-xl); }
-    .padding-y-xxl\@#{$breakpoint}   { padding-top: var(--space-xxl); padding-bottom: var(--space-xxl); }
-    .padding-y-xxxl\@#{$breakpoint}  { padding-top: var(--space-xxxl); padding-bottom: var(--space-xxxl); }
-    .padding-y-xxxxl\@#{$breakpoint} { padding-top: var(--space-xxxxl); padding-bottom: var(--space-xxxxl); }
-    .padding-y-0\@#{$breakpoint}     { padding-top: 0; padding-bottom: 0; }
-    .padding-y-component\@#{$breakpoint} { padding-top: var(--component-padding); padding-bottom: var(--component-padding); }
-
-    // text-align
-    .text-center\@#{$breakpoint} { text-align: center; }
-    .text-left\@#{$breakpoint}   { text-align: left; }
-    .text-right\@#{$breakpoint}  { text-align: right; }
-    .text-justify\@#{$breakpoint}  { text-align: justify; }
-
-    // font-size
-    .text-xs\@#{$breakpoint}   { font-size: var(--text-xs, 0.6875rem); }
-    .text-sm\@#{$breakpoint}   { font-size: var(--text-sm, 0.75rem); }
-    .text-base\@#{$breakpoint} { font-size: var(--text-unit, 1rem); }
-    .text-md\@#{$breakpoint}   { font-size: var(--text-md, 1.125rem); }
-    .text-lg\@#{$breakpoint}   { font-size: var(--text-lg, 1.375rem); }
-    .text-xl\@#{$breakpoint}   { font-size: var(--text-xl, 1.75rem); }
-    .text-xxl\@#{$breakpoint}  { font-size: var(--text-xxl, 2rem); }
-    .text-xxxl\@#{$breakpoint} { font-size: var(--text-xxxl, 2.5rem); }
-    .text-xxxxl\@#{$breakpoint} { font-size: var(--text-xxxxl, 3rem); }
-
-    // width
-    .width-xxxxs\@#{$breakpoint} { width: var(--size-xxxxs, 0.25rem); }
-    .width-xxxs\@#{$breakpoint}  { width: var(--size-xxxs, 0.5rem); }
-    .width-xxs\@#{$breakpoint}   { width: var(--size-xxs, 0.75rem); }
-    .width-xs\@#{$breakpoint}    { width: var(--size-xs, 1rem); }
-    .width-sm\@#{$breakpoint}    { width: var(--size-sm, 1.5rem); }
-    .width-md\@#{$breakpoint}    { width: var(--size-md, 2rem); }
-    .width-lg\@#{$breakpoint}    { width: var(--size-lg, 3rem); }
-    .width-xl\@#{$breakpoint}    { width: var(--size-xl, 4rem); }
-    .width-xxl\@#{$breakpoint}   { width: var(--size-xxl, 6rem); }
-    .width-xxxl\@#{$breakpoint}  { width: var(--size-xxxl, 8rem); }
-    .width-xxxxl\@#{$breakpoint} { width: var(--size-xxxxl, 16rem); }
-    .width-0\@#{$breakpoint}     { width: 0; }
-    .width-10\%\@#{$breakpoint}  { width: 10%; }
-    .width-20\%\@#{$breakpoint}  { width: 20%; }
-    .width-25\%\@#{$breakpoint}  { width: 25%; }
-    .width-30\%\@#{$breakpoint}  { width: 30%; }
-    .width-33\%\@#{$breakpoint}  { width: calc(100% / 3); }
-    .width-40\%\@#{$breakpoint}  { width: 40%; }
-    .width-50\%\@#{$breakpoint}  { width: 50%; }
-    .width-60\%\@#{$breakpoint}  { width: 60%; }
-    .width-66\%\@#{$breakpoint}  { width: calc(100% / 1.5); }
-    .width-70\%\@#{$breakpoint}  { width: 70%; }
-    .width-75\%\@#{$breakpoint}  { width: 75%; }
-    .width-80\%\@#{$breakpoint}  { width: 80%; }
-    .width-90\%\@#{$breakpoint}  { width: 90%; }
-    .width-100\%\@#{$breakpoint} { width: 100%; }
-    .width-100vw\@#{$breakpoint} { width: 100vw; }
-    .width-auto\@#{$breakpoint}  { width: auto; }
-
-    // height
-    .height-xxxxs\@#{$breakpoint} { height: var(--size-xxxxs, 0.25rem); }
-    .height-xxxs\@#{$breakpoint}  { height: var(--size-xxxs, 0.5rem); }
-    .height-xxs\@#{$breakpoint}   { height: var(--size-xxs, 0.75rem); }
-    .height-xs\@#{$breakpoint}    { height: var(--size-xs, 1rem); }
-    .height-sm\@#{$breakpoint}    { height: var(--size-sm, 1.5rem); }
-    .height-md\@#{$breakpoint}    { height: var(--size-md, 2rem); }
-    .height-lg\@#{$breakpoint}    { height: var(--size-lg, 3rem); }
-    .height-xl\@#{$breakpoint}    { height: var(--size-xl, 4rem); }
-    .height-xxl\@#{$breakpoint}   { height: var(--size-xxl, 6rem); }
-    .height-xxxl\@#{$breakpoint}  { height: var(--size-xxxl, 8rem); }
-    .height-xxxxl\@#{$breakpoint} { height: var(--size-xxxxl, 16rem); }
-    .height-0\@#{$breakpoint}     { height: 0; }
-    .height-10\%\@#{$breakpoint}  { height: 10%; }
-    .height-20\%\@#{$breakpoint}  { height: 20%; }
-    .height-25\%\@#{$breakpoint}  { height: 25%; }
-    .height-30\%\@#{$breakpoint}  { height: 30%; }
-    .height-33\%\@#{$breakpoint}  { height: calc(100% / 3); }
-    .height-40\%\@#{$breakpoint}  { height: 40%; }
-    .height-50\%\@#{$breakpoint}  { height: 50%; }
-    .height-60\%\@#{$breakpoint}  { height: 60%; }
-    .height-66\%\@#{$breakpoint}  { height: calc(100% / 1.5); }
-    .height-70\%\@#{$breakpoint}  { height: 70%; }
-    .height-75\%\@#{$breakpoint}  { height: 75%; }
-    .height-80\%\@#{$breakpoint}  { height: 80%; }
-    .height-90\%\@#{$breakpoint}  { height: 90%; }
-    .height-100\%\@#{$breakpoint} { height: 100%; }
-    .height-100vh\@#{$breakpoint} { height: 100vh; }
-    .height-auto\@#{$breakpoint}  { height: auto; }
-
-    // max-width
-    .max-width-xxxxs\@#{$breakpoint} { max-width: var(--max-width-xxxxs); }
-    .max-width-xxxs\@#{$breakpoint}  { max-width: var(--max-width-xxxs); }
-    .max-width-xxs\@#{$breakpoint}   { max-width: var(--max-width-xxs); }
-    .max-width-xs\@#{$breakpoint}    { max-width: var(--max-width-xs); }
-    .max-width-sm\@#{$breakpoint}    { max-width: var(--max-width-sm); }
-    .max-width-md\@#{$breakpoint}    { max-width: var(--max-width-md); }
-    .max-width-lg\@#{$breakpoint}    { max-width: var(--max-width-lg); }
-    .max-width-xl\@#{$breakpoint}    { max-width: var(--max-width-xl); }
-    .max-width-xxl\@#{$breakpoint}   { max-width: var(--max-width-xxl); }
-    .max-width-xxxl\@#{$breakpoint}  { max-width: var(--max-width-xxxl); }
-    .max-width-xxxxl\@#{$breakpoint} { max-width: var(--max-width-xxxxl); }
-    .max-width-100\%\@#{$breakpoint} { max-width: 100%; }
-    .max-width-none\@#{$breakpoint}  { max-width: none; }
-
-    // position
-    .position-relative\@#{$breakpoint} { position: relative; }
-    .position-absolute\@#{$breakpoint} { position: absolute; }
-    .position-fixed\@#{$breakpoint}    { position: fixed; }
-    .position-sticky\@#{$breakpoint}   { position: sticky; }
-    .position-static\@#{$breakpoint}   { position: static; }
-
-    .inset-0\@#{$breakpoint}     { top: 0; right: 0; bottom: 0; left: 0; }
-
-    .top-0\@#{$breakpoint}     { top: 0; }
-    .top-50\%\@#{$breakpoint}  { top: 50%; }
-    .top-xxxxs\@#{$breakpoint} { top: var(--space-xxxxs); }
-    .top-xxxs\@#{$breakpoint}  { top: var(--space-xxxs); }
-    .top-xxs\@#{$breakpoint}   { top: var(--space-xxs); }
-    .top-xs\@#{$breakpoint}    { top: var(--space-xs); }
-    .top-sm\@#{$breakpoint}    { top: var(--space-sm); }
-    .top-md\@#{$breakpoint}    { top: var(--space-md); }
-    .top-lg\@#{$breakpoint}    { top: var(--space-lg); }
-    .top-xl\@#{$breakpoint}    { top: var(--space-xl); }
-    .top-xxl\@#{$breakpoint}   { top: var(--space-xxl); }
-    .top-xxxl\@#{$breakpoint}  { top: var(--space-xxxl); }
-    .top-xxxxl\@#{$breakpoint} { top: var(--space-xxxxl); }
-
-    .bottom-0\@#{$breakpoint}     { bottom: 0; }
-    .bottom-unset\@#{$breakpoint}     { bottom: unset; }
-    .bottom-50\%\@#{$breakpoint}  { bottom: 50%; }
-    .bottom-xxxxs\@#{$breakpoint} { bottom: var(--space-xxxxs); }
-    .bottom-xxxs\@#{$breakpoint}  { bottom: var(--space-xxxs); }
-    .bottom-xxs\@#{$breakpoint}   { bottom: var(--space-xxs); }
-    .bottom-xs\@#{$breakpoint}    { bottom: var(--space-xs); }
-    .bottom-sm\@#{$breakpoint}    { bottom: var(--space-sm); }
-    .bottom-md\@#{$breakpoint}    { bottom: var(--space-md); }
-    .bottom-lg\@#{$breakpoint}    { bottom: var(--space-lg); }
-    .bottom-xl\@#{$breakpoint}    { bottom: var(--space-xl); }
-    .bottom-xxl\@#{$breakpoint}   { bottom: var(--space-xxl); }
-    .bottom-xxxl\@#{$breakpoint}  { bottom: var(--space-xxxl); }
-    .bottom-xxxxl\@#{$breakpoint} { bottom: var(--space-xxxxl); }
-
-    .right-0\@#{$breakpoint}     { right: 0; }
-    .right-50\%\@#{$breakpoint}  { right: 50%; }
-    .right-xxxxs\@#{$breakpoint} { right: var(--space-xxxxs); }
-    .right-xxxs\@#{$breakpoint}  { right: var(--space-xxxs); }
-    .right-xxs\@#{$breakpoint}   { right: var(--space-xxs); }
-    .right-xs\@#{$breakpoint}    { right: var(--space-xs); }
-    .right-sm\@#{$breakpoint}    { right: var(--space-sm); }
-    .right-md\@#{$breakpoint}    { right: var(--space-md); }
-    .right-lg\@#{$breakpoint}    { right: var(--space-lg); }
-    .right-xl\@#{$breakpoint}    { right: var(--space-xl); }
-    .right-xxl\@#{$breakpoint}   { right: var(--space-xxl); }
-    .right-xxxl\@#{$breakpoint}  { right: var(--space-xxxl); }
-    .right-xxxxl\@#{$breakpoint} { right: var(--space-xxxxl); }
-
-    .left-0\@#{$breakpoint}     { left: 0; }
-    .left-50\%\@#{$breakpoint}  { left: 50%; }
-    .left-xxxxs\@#{$breakpoint} { left: var(--space-xxxxs); }
-    .left-xxxs\@#{$breakpoint}  { left: var(--space-xxxs); }
-    .left-xxs\@#{$breakpoint}   { left: var(--space-xxs); }
-    .left-xs\@#{$breakpoint}    { left: var(--space-xs); }
-    .left-sm\@#{$breakpoint}    { left: var(--space-sm); }
-    .left-md\@#{$breakpoint}    { left: var(--space-md); }
-    .left-lg\@#{$breakpoint}    { left: var(--space-lg); }
-    .left-xl\@#{$breakpoint}    { left: var(--space-xl); }
-    .left-xxl\@#{$breakpoint}   { left: var(--space-xxl); }
-    .left-xxxl\@#{$breakpoint}  { left: var(--space-xxxl); }
-    .left-xxxxl\@#{$breakpoint} { left: var(--space-xxxxl); }
-
-    // overflow
-    .overflow-hidden\@#{$breakpoint} { overflow: hidden; }
-    .overflow-auto\@#{$breakpoint}   { overflow: auto; }
-    .momentum-scrolling\@#{$breakpoint} { -webkit-overflow-scrolling: touch; }
-    .overscroll-contain\@#{$breakpoint} { overscroll-behavior: contain; }
-
-    // visibility
-    .visible\@#{$breakpoint} { visibility: visible; }
-    .invisible\@#{$breakpoint} { visibility: hidden; }
-  }
-
-  @include breakpoint(#{$breakpoint}, "not all") {
-    .display\@#{$breakpoint} { display: none !important; }
-  }
-}
diff --git a/old-apps/web-shared/src/styles/base/_visibility.scss b/old-apps/web-shared/src/styles/base/_visibility.scss
deleted file mode 100644
index ab6a516..0000000
--- a/old-apps/web-shared/src/styles/base/_visibility.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-: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;
-  }
-}
\ No newline at end of file
diff --git a/old-apps/web-shared/src/styles/base/_z-index.scss b/old-apps/web-shared/src/styles/base/_z-index.scss
deleted file mode 100644
index 5af9ff3..0000000
--- a/old-apps/web-shared/src/styles/base/_z-index.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-:root {
-  --z-index-header: 3; // e.g., main header
-  --z-index-popover: 5; // e.g., tooltips and dropdown
-  --z-index-fixed-element: 10; // e.g., 'back to top' button
-  --z-index-overlay: 15; // e.g., modals and dialogs
-}
\ No newline at end of file