feat: Initial after clean slate

15 files changed, 2647 insertions, 0 deletions

diff --git a/apps/web-shared/src/styles/base/_accessibility.scss b/apps/web-shared/src/styles/base/_accessibility.scss
new file mode 100644
index 0000000..9f71937
--- /dev/null
+++ b/apps/web-shared/src/styles/base/_accessibility.scss
@@ -0,0 +1,17 @@
+.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/apps/web-shared/src/styles/base/_breakpoints.scss b/apps/web-shared/src/styles/base/_breakpoints.scss
new file mode 100644
index 0000000..a7f1eda
--- /dev/null
+++ b/apps/web-shared/src/styles/base/_breakpoints.scss
@@ -0,0 +1,15 @@
+$breakpoints: (
+  xs: 32rem, // ~512px
+  sm: 48rem, // ~768px
+  md: 64rem, // ~1024px
+  lg: 80rem, // ~1280px
+  xl: 90rem  // ~1440px
+) !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/apps/web-shared/src/styles/base/_buttons.scss b/apps/web-shared/src/styles/base/_buttons.scss
new file mode 100644
index 0000000..2a7ff34
--- /dev/null
+++ b/apps/web-shared/src/styles/base/_buttons.scss
@@ -0,0 +1,24 @@
+// 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/apps/web-shared/src/styles/base/_colors.scss b/apps/web-shared/src/styles/base/_colors.scss
new file mode 100644
index 0000000..f061d9a
--- /dev/null
+++ b/apps/web-shared/src/styles/base/_colors.scss
@@ -0,0 +1,6 @@
+// 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/apps/web-shared/src/styles/base/_forms.scss b/apps/web-shared/src/styles/base/_forms.scss
new file mode 100644
index 0000000..faffddd
--- /dev/null
+++ b/apps/web-shared/src/styles/base/_forms.scss
@@ -0,0 +1,22 @@
+// 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/apps/web-shared/src/styles/base/_grid-layout.scss b/apps/web-shared/src/styles/base/_grid-layout.scss
new file mode 100644
index 0000000..bd8b6c9
--- /dev/null
+++ b/apps/web-shared/src/styles/base/_grid-layout.scss
@@ -0,0 +1,261 @@
+@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/apps/web-shared/src/styles/base/_icons.scss b/apps/web-shared/src/styles/base/_icons.scss
new file mode 100644
index 0000000..1674a7c
--- /dev/null
+++ b/apps/web-shared/src/styles/base/_icons.scss
@@ -0,0 +1,62 @@
+// 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/apps/web-shared/src/styles/base/_mixins.scss b/apps/web-shared/src/styles/base/_mixins.scss
new file mode 100644
index 0000000..8fe82f6
--- /dev/null
+++ b/apps/web-shared/src/styles/base/_mixins.scss
@@ -0,0 +1,151 @@
+@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/apps/web-shared/src/styles/base/_reset.scss b/apps/web-shared/src/styles/base/_reset.scss
new file mode 100644
index 0000000..5ba4534
--- /dev/null
+++ b/apps/web-shared/src/styles/base/_reset.scss
@@ -0,0 +1,83 @@
+*, *::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/apps/web-shared/src/styles/base/_shared-styles.scss b/apps/web-shared/src/styles/base/_shared-styles.scss
new file mode 100644
index 0000000..dae02fe
--- /dev/null
+++ b/apps/web-shared/src/styles/base/_shared-styles.scss
@@ -0,0 +1,34 @@
+// 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/apps/web-shared/src/styles/base/_spacing.scss b/apps/web-shared/src/styles/base/_spacing.scss
new file mode 100644
index 0000000..24e6645
--- /dev/null
+++ b/apps/web-shared/src/styles/base/_spacing.scss
@@ -0,0 +1,20 @@
+// 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/apps/web-shared/src/styles/base/_typography.scss b/apps/web-shared/src/styles/base/_typography.scss
new file mode 100644
index 0000000..85b974a
--- /dev/null
+++ b/apps/web-shared/src/styles/base/_typography.scss
@@ -0,0 +1,185 @@
+// 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/apps/web-shared/src/styles/base/_util.scss b/apps/web-shared/src/styles/base/_util.scss
new file mode 100644
index 0000000..d688e1c
--- /dev/null
+++ b/apps/web-shared/src/styles/base/_util.scss
@@ -0,0 +1,1738 @@
+@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/apps/web-shared/src/styles/base/_visibility.scss b/apps/web-shared/src/styles/base/_visibility.scss
new file mode 100644
index 0000000..ab6a516
--- /dev/null
+++ b/apps/web-shared/src/styles/base/_visibility.scss
@@ -0,0 +1,23 @@
+: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/apps/web-shared/src/styles/base/_z-index.scss b/apps/web-shared/src/styles/base/_z-index.scss
new file mode 100644
index 0000000..5af9ff3
--- /dev/null
+++ b/apps/web-shared/src/styles/base/_z-index.scss
@@ -0,0 +1,6 @@
+: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