diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json
index 1505b2be6f..1345328a00 100644
--- a/.bundlewatch.config.json
+++ b/.bundlewatch.config.json
@@ -2,11 +2,11 @@
   "files": [
     {
       "path": "./dist/css/ouds-web-bootstrap.css",
-      "maxSize": "61.0 kB"
+      "maxSize": "62.75 kB"
     },
     {
       "path": "./dist/css/ouds-web-bootstrap.min.css",
-      "maxSize": "58.0 kB"
+      "maxSize": "59.5 kB"
     },
     {
       "path": "./dist/css/ouds-web-grid.css",
@@ -18,27 +18,27 @@
     },
     {
       "path": "./dist/css/ouds-web-reboot.css",
-      "maxSize": "4.75 kB"
+      "maxSize": "5.75 kB"
     },
     {
       "path": "./dist/css/ouds-web-reboot.min.css",
-      "maxSize": "4.5 kB"
+      "maxSize": "5.5 kB"
     },
     {
       "path": "./dist/css/ouds-web-utilities.css",
-      "maxSize": "20.75 kB"
+      "maxSize": "22.25 kB"
     },
     {
       "path": "./dist/css/ouds-web-utilities.min.css",
-      "maxSize": "19.75 kB"
+      "maxSize": "21.0 kB"
     },
     {
       "path": "./dist/css/ouds-web.css",
-      "maxSize": "54.75 kB"
+      "maxSize": "56.25 kB"
     },
     {
       "path": "./dist/css/ouds-web.min.css",
-      "maxSize": "51.5 kB"
+      "maxSize": "53.0 kB"
     },
     {
       "path": "./dist/js/ouds-web.bundle.js",
diff --git a/.cspell.json b/.cspell.json
index 1ed62dcfa0..bd3ad80132 100644
--- a/.cspell.json
+++ b/.cspell.json
@@ -25,6 +25,7 @@
     "clic",
     "Codesniffer",
     "combinator",
+    "Consolas",
     "Contentful",
     "Cpath",
     "Crossfade",
@@ -70,6 +71,7 @@
     "Lowercased",
     "markdownify",
     "mediaqueries",
+    "Menlo",
     "minifiers",
     "misfunction",
     "mkdir",
@@ -155,6 +157,7 @@
     "WCAG",
     "whatsapp",
     "WICG's",
+    "xlarge",
     "zindex",
     "بالعالم",
     "مرحبًا"
diff --git a/NOTICE.txt b/NOTICE.txt
index bfff01336d..cee9a46819 100644
--- a/NOTICE.txt
+++ b/NOTICE.txt
@@ -12,6 +12,7 @@ nuget/ouds-web.png
 site/layouts/partials/icons.html
 site/static/docs/**/assets/brand/orange-logo.svg
 site/static/docs/**/assets/brand/orange-social.png
+site/static/docs/**/assets/fonts/solaris-icons.woff2
 site/static/docs/**/assets/img/favicons/android-chrome-192x192.png
 site/static/docs/**/assets/img/favicons/android-chrome-512x512.png
 site/static/docs/**/assets/img/favicons/apple-touch-icon.png
diff --git a/scss/_helpers.scss b/scss/_helpers.scss
index 13f2752c9b..a246e3b508 100644
--- a/scss/_helpers.scss
+++ b/scss/_helpers.scss
@@ -2,6 +2,7 @@
 @import "helpers/color-bg";
 @import "helpers/colored-links";
 @import "helpers/focus-ring";
+@import "helpers/icon";
 @import "helpers/icon-link";
 @import "helpers/ratio";
 @import "helpers/position";
diff --git a/scss/_maps.scss b/scss/_maps.scss
index 31e2fc3935..0a45c22aa3 100644
--- a/scss/_maps.scss
+++ b/scss/_maps.scss
@@ -83,6 +83,30 @@ $ouds-elevations: (
 ) !default;
 // scss-docs-end ouds-maps-elevations
 
+// scss-docs-start ouds-maps-font
+$ouds-font-sizes: (
+  cs: "/code-small",
+  cm: "/code-medium",
+  bs: "/body-small",
+  bm: "/body-medium",
+  bl: "/body-large",
+  hs: "/heading-small",
+  hm: "/heading-medium",
+  hl: "/heading-large",
+  hxl: "/heading-xlarge",
+  ds: "/display-small",
+  dm: "/display-medium",
+  dl: "/display-large",
+) !default;
+
+$ouds-font-weights: (
+  normal: $ouds-font-weight-default,
+  bold: $ouds-font-weight-strong
+) !default;
+
+$ouds-icon-sizes: ("short", "medium", "tall") !default;
+// scss-docs-end ouds-maps-font
+
 // scss-docs-start ouds-maps-opacities
 $ouds-opacities: (
   "transparent": $ouds-opacity-transparent,
diff --git a/scss/_mixins.scss b/scss/_mixins.scss
index d46000cfae..db10fb3637 100644
--- a/scss/_mixins.scss
+++ b/scss/_mixins.scss
@@ -12,6 +12,7 @@
 @import "mixins/breakpoints";
 @import "mixins/color-mode";
 @import "mixins/color-scheme";
+@import "mixins/fonts"; // OUDS mod
 @import "mixins/image";
 @import "mixins/resize";
 @import "mixins/visually-hidden";
diff --git a/scss/_reboot.scss b/scss/_reboot.scss
index b1fdf59e4e..18ec72ba69 100644
--- a/scss/_reboot.scss
+++ b/scss/_reboot.scss
@@ -57,7 +57,7 @@
 // 2. As a best practice, apply a default `background-color`.
 // 3. Prevent adjustments of font size after orientation changes in iOS.
 // 4. Change the default tap highlight to be completely transparent in iOS.
-// 5. Prevent faux-bold/italic
+// 5. Prevent faux-bold/italic especially for some RTL fonts
 //    See https://developer.mozilla.org/fr/docs/Web/CSS/font-synthesis
 
 // scss-docs-start reboot-body-rules
@@ -69,11 +69,11 @@ body {
   @include font-size(var(--#{$prefix}body-font-size));
   font-weight: var(--#{$prefix}body-font-weight);
   line-height: var(--#{$prefix}body-line-height);
-  // OUDS mod: no color
+  color: var(--#{$prefix}body-color);
   text-align: var(--#{$prefix}body-text-align);
 
   /* rtl:remove */
-  letter-spacing: $letter-spacing-base; // OUDS mod
+  letter-spacing: var(--#{$prefix}body-letter-spacing); // OUDS mod
   background-color: var(--#{$prefix}body-bg); // 2
   -webkit-text-size-adjust: 100%; // 3
   -webkit-tap-highlight-color: rgba($black, 0); // 4
@@ -131,10 +131,10 @@ hr {
 //    By default, `<h1>`-`<h6>` all receive top and bottom margins. We nuke the top
 //    margin for easier control within type scales as it avoids margin collapsing.
 
+// scss-docs-start ouds-font-implementation
 %heading {
   margin-top: 0; // 1
   margin-bottom: $headings-margin-bottom;
-  @include font-size($font-size-base);  // OUDS mod
   font-family: $headings-font-family;
   font-style: $headings-font-style;
   font-weight: $headings-font-weight;
@@ -142,7 +142,6 @@ hr {
   color: var(--#{$prefix}heading-color);
 
   /* rtl:remove */
-  letter-spacing: $letter-spacing-base; // OUDS mod
   -webkit-font-smoothing: antialiased;  // OUDS mod
   -moz-osx-font-smoothing: grayscale;   // OUDS mod
   text-rendering: optimizelegibility;   // OUDS mod
@@ -150,28 +149,34 @@ hr {
 
 h1 {
   @extend %heading;
-  @include font-size($h4-font-size);
-  line-height: $h4-line-height;
+  @include get-font-size("heading-xlarge"); // OUDS mod: instead of `@include font-size($h1-font-size)`
+}
 
-  /* rtl:remove */
-  letter-spacing: $h4-spacing;
+h2 {
+  @extend %heading;
+  @include get-font-size("heading-large"); // OUDS mod: instead of `@include font-size($h2-font-size)`
 }
 
-h2,
 h3 {
   @extend %heading;
-  @include font-size($h5-font-size);
-  line-height: $h5-line-height;
+  @include get-font-size("heading-medium"); // OUDS mod: instead of `@include font-size($h3-font-size)`
+}
 
-  /* rtl:remove */
-  letter-spacing: $h5-spacing;
+h4 {
+  @extend %heading;
+  @include get-font-size("heading-small"); // OUDS mod: instead of `@include font-size($h4-font-size)`
+}
+
+h5 {
+  @extend %heading;
+  @include get-font-size("body-large"); // OUDS mod: instead of `@include font-size($h5-font-size)`
 }
 
-h4,
-h5,
 h6 {
   @extend %heading;
+  @include get-font-size("body-medium"); // OUDS mod: instead of `@include font-size($h6-font-size)`
 }
+// scss-docs-end ouds-font-implementation
 
 
 // Reset margins on paragraphs
@@ -182,6 +187,7 @@ h6 {
 p {
   margin-top: 0;
   margin-bottom: $paragraph-margin-bottom;
+  @include get-font-size("body-medium"); // OUDS mod
 }
 
 
@@ -201,7 +207,7 @@ abbr[title] {
 // Address
 
 address {
-  margin-bottom: 1rem;
+  margin-bottom: $ouds-space-fixed-medium; // OUDS mod: instead of `1rem`
   font-style: normal;
   line-height: inherit;
 }
@@ -283,9 +289,17 @@ dd {
 // Blockquote
 
 blockquote {
-  margin: 0 0 1rem;
+  margin: 0 0 $ouds-space-fixed-medium; // OUDS mod: instead of `0 0 1rem`
 }
 
+// OUDS mod: No italic
+i,
+em,
+cite {
+  font-style: normal; // OUDS mod: remove italic.
+}
+// End mod
+
 
 // Strong
 //
@@ -303,11 +317,7 @@ strong {
 // Add the correct font size in all browsers
 
 small {
-  @include font-size($small-font-size);
-  // OUDS mod
-  font-weight: $font-weight-normal;
-  line-height: $line-height-sm;
-  // End mod
+  @include get-font-size("body-small"); // OUDS mod: instead of `@include font-size($small-font-size)`
 }
 
 
@@ -381,10 +391,9 @@ samp {
 pre {
   display: block;
   margin-top: 0; // 1
-  margin-bottom: 1rem; // 2
+  margin-bottom: $ouds-space-fixed-medium; // 2 // OUDS mod: instead of `1rem`
   overflow: auto; // 3
-  @include font-size($code-font-size);
-  line-height: $pre-line-height; // OUDS mod
+  @include get-font-size("code-medium"); // OUDS mod: instead of `@include font-size($code-font-size)`
   color: $pre-color;
 
   // Account for some code outputs that place code tags in pre tags
@@ -399,7 +408,6 @@ var, // OUDS mod
 code {
   @include font-size($code-font-size);
   font-style: normal; // OUDS mod: <var> is italic in all browsers
-  line-height: $line-height-sm; // OUDS mod
   color: var(--#{$prefix}code-color);
   word-wrap: break-word;
 
@@ -414,7 +422,7 @@ kbd {
   @include font-size($kbd-font-size);
   color: $kbd-color;
   background-color: $kbd-bg;
-  @include border-radius($border-radius-sm);
+  @include border-radius($border-radius-sm, $border-radius-sm); // OUDS mod: instead of `@include border-radius($border-radius-sm)`
 
   kbd {
     padding: 0;
@@ -460,13 +468,10 @@ table {
 caption {
   padding-top: $table-caption-padding-y;
   padding-bottom: $table-caption-padding-y;
-  @include font-size($h1-font-size);    // OUDS mod
-  font-weight: $font-weight-bold;       // OUDS mod
+  @include get-font-size("heading-xlarge"); // OUDS mod
+  font-weight: $font-weight-bold; // OUDS mod
   color: $table-caption-color;
   text-align: left;
-
-  /* rtl:remove */
-  letter-spacing: $h1-spacing;          // OUDS mod
   -webkit-font-smoothing: antialiased;  // OUDS mod
   -moz-osx-font-smoothing: grayscale;   // OUDS mod
   text-rendering: optimizelegibility;   // OUDS mod
@@ -500,7 +505,6 @@ th {
 
 label {
   display: inline-block; // 1
-  font-weight: $form-label-font-weight; // OUDS mod
 }
 
 // Remove the default `border-radius` that macOS Chrome adds.
@@ -626,9 +630,9 @@ legend {
   width: 100%;
   padding: 0;
   margin-bottom: $legend-margin-bottom;
-  @include font-size($legend-font-size);
   font-weight: $legend-font-weight;
-  line-height: inherit;
+  // OUDS mod: no line-height
+  @include get-font-size("body-large"); // OUDS mod: instead of `@include font-size($legend-font-size)`
 
   + * {
     clear: left; // 2
@@ -736,3 +740,11 @@ progress {
 [hidden] {
   display: none !important;
 }
+
+// OUDS mod
+// Selection
+::selection {
+  color: var(--#{$prefix}highlight-color);
+  background-color: var(--#{$prefix}highlight-bg);
+}
+// End mod
diff --git a/scss/_root.scss b/scss/_root.scss
index c4f23e8ff4..b181ee518a 100644
--- a/scss/_root.scss
+++ b/scss/_root.scss
@@ -63,6 +63,152 @@
   --#{$prefix}font-monospace: #{inspect($font-family-monospace)};
   --#{$prefix}gradient: #{$gradient};
 
+  // OUDS mod
+  // scss-docs-start root-font-variables-ouds
+  --#{$prefix}font-size-display-large: #{px-to-rem($ouds-font-size-display-large-mobile)};
+  --#{$prefix}font-size-display-medium: #{px-to-rem($ouds-font-size-display-medium-mobile)};
+  --#{$prefix}font-size-display-small: #{px-to-rem($ouds-font-size-display-small-mobile)};
+  --#{$prefix}font-size-heading-xlarge: #{px-to-rem($ouds-font-size-heading-xlarge-mobile)};
+  --#{$prefix}font-size-heading-large: #{px-to-rem($ouds-font-size-heading-large-mobile)};
+  --#{$prefix}font-size-heading-medium: #{px-to-rem($ouds-font-size-heading-medium-mobile)};
+  --#{$prefix}font-size-heading-small: #{px-to-rem($ouds-font-size-heading-small-mobile)};
+  --#{$prefix}font-size-body-large: #{px-to-rem($ouds-font-size-body-large-mobile)};
+  --#{$prefix}font-size-body-medium: #{px-to-rem($ouds-font-size-body-medium-mobile)};
+  --#{$prefix}font-size-body-small: #{px-to-rem($ouds-font-size-body-small-mobile)};
+  --#{$prefix}font-size-label-xlarge: #{px-to-rem($ouds-font-size-label-xlarge)};
+  --#{$prefix}font-size-label-large: #{px-to-rem($ouds-font-size-label-large)};
+  --#{$prefix}font-size-label-medium: #{px-to-rem($ouds-font-size-label-medium)};
+  --#{$prefix}font-size-label-small: #{px-to-rem($ouds-font-size-label-small)};
+  --#{$prefix}font-size-code-medium: #{px-to-rem($ouds-font-size-code-medium)};
+  --#{$prefix}font-line-height-display-large: #{divide($ouds-font-line-height-display-large-mobile, $ouds-font-size-display-large-mobile)};
+  --#{$prefix}font-line-height-display-medium: #{divide($ouds-font-line-height-display-medium-mobile, $ouds-font-size-display-medium-mobile)};
+  --#{$prefix}font-line-height-display-small: #{divide($ouds-font-line-height-display-small-mobile, $ouds-font-size-display-small-mobile)};
+  --#{$prefix}font-line-height-heading-xlarge: #{divide($ouds-font-line-height-heading-xlarge-mobile, $ouds-font-size-heading-xlarge-mobile)};
+  --#{$prefix}font-line-height-heading-large: #{divide($ouds-font-line-height-heading-large-mobile, $ouds-font-size-heading-large-mobile)};
+  --#{$prefix}font-line-height-heading-medium: #{divide($ouds-font-line-height-heading-medium-mobile, $ouds-font-size-heading-medium-mobile)};
+  --#{$prefix}font-line-height-heading-small: #{divide($ouds-font-line-height-heading-small-mobile, $ouds-font-size-heading-small-mobile)};
+  --#{$prefix}font-line-height-body-large: #{divide($ouds-font-line-height-body-large-mobile, $ouds-font-size-body-large-mobile)};
+  --#{$prefix}font-line-height-body-medium: #{divide($ouds-font-line-height-body-medium-mobile, $ouds-font-size-body-medium-mobile)};
+  --#{$prefix}font-line-height-body-small: #{divide($ouds-font-line-height-body-small-mobile, $ouds-font-size-body-small-mobile)};
+  --#{$prefix}font-line-height-label-xlarge: #{divide($ouds-font-line-height-label-xlarge, $ouds-font-size-label-xlarge)};
+  --#{$prefix}font-line-height-label-large: #{divide($ouds-font-line-height-label-large, $ouds-font-size-label-large)};
+  --#{$prefix}font-line-height-label-medium: #{divide($ouds-font-line-height-label-medium, $ouds-font-size-label-medium)};
+  --#{$prefix}font-line-height-label-small: #{divide($ouds-font-line-height-label-small, $ouds-font-size-label-small)};
+  --#{$prefix}font-line-height-code-medium: #{divide($ouds-font-line-height-label-small, $ouds-font-size-code-medium)};
+  --#{$prefix}font-letter-spacing-display-large: #{px-to-rem($ouds-font-letter-spacing-display-large-mobile)};
+  --#{$prefix}font-letter-spacing-display-medium: #{px-to-rem($ouds-font-letter-spacing-display-medium-mobile)};
+  --#{$prefix}font-letter-spacing-display-small: #{px-to-rem($ouds-font-letter-spacing-display-small-mobile)};
+  --#{$prefix}font-letter-spacing-heading-xlarge: #{px-to-rem($ouds-font-letter-spacing-heading-xlarge-mobile)};
+  --#{$prefix}font-letter-spacing-heading-large: #{px-to-rem($ouds-font-letter-spacing-heading-large-mobile)};
+  --#{$prefix}font-letter-spacing-heading-medium: #{px-to-rem($ouds-font-letter-spacing-heading-medium-mobile)};
+  --#{$prefix}font-letter-spacing-heading-small: #{px-to-rem($ouds-font-letter-spacing-heading-small-mobile)};
+  --#{$prefix}font-letter-spacing-body-large: #{px-to-rem($ouds-font-letter-spacing-body-large-mobile)};
+  --#{$prefix}font-letter-spacing-body-medium: #{px-to-rem($ouds-font-letter-spacing-body-medium-mobile)};
+  --#{$prefix}font-letter-spacing-body-small: #{px-to-rem($ouds-font-letter-spacing-body-small-mobile)};
+  --#{$prefix}font-letter-spacing-label-xlarge: #{px-to-rem($ouds-font-letter-spacing-label-xlarge)};
+  --#{$prefix}font-letter-spacing-label-large: #{px-to-rem($ouds-font-letter-spacing-label-large)};
+  --#{$prefix}font-letter-spacing-label-medium: #{px-to-rem($ouds-font-letter-spacing-label-medium)};
+  --#{$prefix}font-letter-spacing-label-small: #{px-to-rem($ouds-font-letter-spacing-label-small)};
+  --#{$prefix}font-letter-spacing-code-medium: #{px-to-rem($ouds-font-letter-spacing-code-medium)};
+  --#{$prefix}font-max-width-display-large: #{px-to-rem($ouds-size-max-width-type-display-large-mobile)};
+  --#{$prefix}font-max-width-display-medium: #{px-to-rem($ouds-size-max-width-type-display-medium-mobile)};
+  --#{$prefix}font-max-width-display-small: #{px-to-rem($ouds-size-max-width-type-display-small-mobile)};
+  --#{$prefix}font-max-width-heading-xlarge: #{px-to-rem($ouds-size-max-width-type-heading-xlarge-mobile)};
+  --#{$prefix}font-max-width-heading-large: #{px-to-rem($ouds-size-max-width-type-heading-large-mobile)};
+  --#{$prefix}font-max-width-heading-medium: #{px-to-rem($ouds-size-max-width-type-heading-medium-mobile)};
+  --#{$prefix}font-max-width-heading-small: #{px-to-rem($ouds-size-max-width-type-heading-small-mobile)};
+  --#{$prefix}font-max-width-body-large: #{px-to-rem($ouds-size-max-width-type-body-large-mobile)};
+  --#{$prefix}font-max-width-body-medium: #{px-to-rem($ouds-size-max-width-type-body-medium-mobile)};
+  --#{$prefix}font-max-width-body-small: #{px-to-rem($ouds-size-max-width-type-body-small-mobile)};
+
+  @include media-breakpoint-up(md) {
+    --#{$prefix}font-size-display-large: #{px-to-rem($ouds-font-size-display-large-tablet)};
+    --#{$prefix}font-size-display-medium: #{px-to-rem($ouds-font-size-display-medium-tablet)};
+    --#{$prefix}font-size-display-small: #{px-to-rem($ouds-font-size-display-small-tablet)};
+    --#{$prefix}font-size-heading-xlarge: #{px-to-rem($ouds-font-size-heading-xlarge-tablet)};
+    --#{$prefix}font-size-heading-large: #{px-to-rem($ouds-font-size-heading-large-tablet)};
+    --#{$prefix}font-size-heading-medium: #{px-to-rem($ouds-font-size-heading-medium-tablet)};
+    --#{$prefix}font-size-heading-small: #{px-to-rem($ouds-font-size-heading-small-tablet)};
+    --#{$prefix}font-size-body-large: #{px-to-rem($ouds-font-size-body-large-tablet)};
+    --#{$prefix}font-size-body-medium: #{px-to-rem($ouds-font-size-body-medium-tablet)};
+    --#{$prefix}font-size-body-small: #{px-to-rem($ouds-font-size-body-small-tablet)};
+    --#{$prefix}font-line-height-display-large: #{divide($ouds-font-line-height-display-large-tablet, $ouds-font-size-display-large-tablet)};
+    --#{$prefix}font-line-height-display-medium: #{divide($ouds-font-line-height-display-medium-tablet, $ouds-font-size-display-medium-tablet)};
+    --#{$prefix}font-line-height-display-small: #{divide($ouds-font-line-height-display-small-tablet, $ouds-font-size-display-small-tablet)};
+    --#{$prefix}font-line-height-heading-xlarge: #{divide($ouds-font-line-height-heading-xlarge-tablet, $ouds-font-size-heading-xlarge-tablet)};
+    --#{$prefix}font-line-height-heading-large: #{divide($ouds-font-line-height-heading-large-tablet, $ouds-font-size-heading-large-tablet)};
+    --#{$prefix}font-line-height-heading-medium: #{divide($ouds-font-line-height-heading-medium-tablet, $ouds-font-size-heading-medium-tablet)};
+    --#{$prefix}font-line-height-heading-small: #{divide($ouds-font-line-height-heading-small-tablet, $ouds-font-size-heading-small-tablet)};
+    --#{$prefix}font-line-height-body-large: #{divide($ouds-font-line-height-body-large-tablet, $ouds-font-size-body-large-tablet)};
+    --#{$prefix}font-line-height-body-medium: #{divide($ouds-font-line-height-body-medium-tablet, $ouds-font-size-body-medium-tablet)};
+    --#{$prefix}font-line-height-body-small: #{divide($ouds-font-line-height-body-small-tablet, $ouds-font-size-body-small-tablet)};
+    --#{$prefix}font-letter-spacing-display-large: #{px-to-rem($ouds-font-letter-spacing-display-large-tablet)};
+    --#{$prefix}font-letter-spacing-display-medium: #{px-to-rem($ouds-font-letter-spacing-display-medium-tablet)};
+    --#{$prefix}font-letter-spacing-display-small: #{px-to-rem($ouds-font-letter-spacing-display-small-tablet)};
+    --#{$prefix}font-letter-spacing-heading-xlarge: #{px-to-rem($ouds-font-letter-spacing-heading-xlarge-tablet)};
+    --#{$prefix}font-letter-spacing-heading-large: #{px-to-rem($ouds-font-letter-spacing-heading-large-tablet)};
+    --#{$prefix}font-letter-spacing-heading-medium: #{px-to-rem($ouds-font-letter-spacing-heading-medium-tablet)};
+    --#{$prefix}font-letter-spacing-heading-small: #{px-to-rem($ouds-font-letter-spacing-heading-small-tablet)};
+    --#{$prefix}font-letter-spacing-body-large: #{px-to-rem($ouds-font-letter-spacing-body-large-tablet)};
+    --#{$prefix}font-letter-spacing-body-medium: #{px-to-rem($ouds-font-letter-spacing-body-medium-tablet)};
+    --#{$prefix}font-letter-spacing-body-small: #{px-to-rem($ouds-font-letter-spacing-body-small-tablet)};
+    --#{$prefix}font-max-width-display-large: #{px-to-rem($ouds-size-max-width-type-display-large-tablet)};
+    --#{$prefix}font-max-width-display-medium: #{px-to-rem($ouds-size-max-width-type-display-medium-tablet)};
+    --#{$prefix}font-max-width-display-small: #{px-to-rem($ouds-size-max-width-type-display-small-tablet)};
+    --#{$prefix}font-max-width-heading-xlarge: #{px-to-rem($ouds-size-max-width-type-heading-xlarge-tablet)};
+    --#{$prefix}font-max-width-heading-large: #{px-to-rem($ouds-size-max-width-type-heading-large-tablet)};
+    --#{$prefix}font-max-width-heading-medium: #{px-to-rem($ouds-size-max-width-type-heading-medium-tablet)};
+    --#{$prefix}font-max-width-heading-small: #{px-to-rem($ouds-size-max-width-type-heading-small-tablet)};
+    --#{$prefix}font-max-width-body-large: #{px-to-rem($ouds-size-max-width-type-body-large-tablet)};
+    --#{$prefix}font-max-width-body-medium: #{px-to-rem($ouds-size-max-width-type-body-medium-tablet)};
+    --#{$prefix}font-max-width-body-small: #{px-to-rem($ouds-size-max-width-type-body-small-tablet)};
+  }
+
+  @include media-breakpoint-up(xl) {
+    --#{$prefix}font-size-display-large: #{px-to-rem($ouds-font-size-display-large-desktop)};
+    --#{$prefix}font-size-display-medium: #{px-to-rem($ouds-font-size-display-medium-desktop)};
+    --#{$prefix}font-size-display-small: #{px-to-rem($ouds-font-size-display-small-desktop)};
+    --#{$prefix}font-size-heading-xlarge: #{px-to-rem($ouds-font-size-heading-xlarge-desktop)};
+    --#{$prefix}font-size-heading-large: #{px-to-rem($ouds-font-size-heading-large-desktop)};
+    --#{$prefix}font-size-heading-medium: #{px-to-rem($ouds-font-size-heading-medium-desktop)};
+    --#{$prefix}font-size-heading-small: #{px-to-rem($ouds-font-size-heading-small-desktop)};
+    --#{$prefix}font-size-body-large: #{px-to-rem($ouds-font-size-body-large-desktop)};
+    --#{$prefix}font-size-body-medium: #{px-to-rem($ouds-font-size-body-medium-desktop)};
+    --#{$prefix}font-size-body-small: #{px-to-rem($ouds-font-size-body-small-desktop)};
+    --#{$prefix}font-line-height-display-large: #{divide($ouds-font-line-height-display-large-desktop, $ouds-font-size-display-large-desktop)};
+    --#{$prefix}font-line-height-display-medium: #{divide($ouds-font-line-height-display-medium-desktop, $ouds-font-size-display-medium-desktop)};
+    --#{$prefix}font-line-height-display-small: #{divide($ouds-font-line-height-display-small-desktop, $ouds-font-size-display-small-desktop)};
+    --#{$prefix}font-line-height-heading-xlarge: #{divide($ouds-font-line-height-heading-xlarge-desktop, $ouds-font-size-heading-xlarge-desktop)};
+    --#{$prefix}font-line-height-heading-large: #{divide($ouds-font-line-height-heading-large-desktop, $ouds-font-size-heading-large-desktop)};
+    --#{$prefix}font-line-height-heading-medium: #{divide($ouds-font-line-height-heading-medium-desktop, $ouds-font-size-heading-medium-desktop)};
+    --#{$prefix}font-line-height-heading-small: #{divide($ouds-font-line-height-heading-small-desktop, $ouds-font-size-heading-small-desktop)};
+    --#{$prefix}font-line-height-body-large: #{divide($ouds-font-line-height-body-large-desktop, $ouds-font-size-body-large-desktop)};
+    --#{$prefix}font-line-height-body-medium: #{divide($ouds-font-line-height-body-medium-desktop, $ouds-font-size-body-medium-desktop)};
+    --#{$prefix}font-line-height-body-small: #{divide($ouds-font-line-height-body-small-desktop, $ouds-font-size-body-small-desktop)};
+    --#{$prefix}font-letter-spacing-display-large: #{px-to-rem($ouds-font-letter-spacing-display-large-desktop)};
+    --#{$prefix}font-letter-spacing-display-medium: #{px-to-rem($ouds-font-letter-spacing-display-medium-desktop)};
+    --#{$prefix}font-letter-spacing-display-small: #{px-to-rem($ouds-font-letter-spacing-display-small-desktop)};
+    --#{$prefix}font-letter-spacing-heading-xlarge: #{px-to-rem($ouds-font-letter-spacing-heading-xlarge-desktop)};
+    --#{$prefix}font-letter-spacing-heading-large: #{px-to-rem($ouds-font-letter-spacing-heading-large-desktop)};
+    --#{$prefix}font-letter-spacing-heading-medium: #{px-to-rem($ouds-font-letter-spacing-heading-medium-desktop)};
+    --#{$prefix}font-letter-spacing-heading-small: #{px-to-rem($ouds-font-letter-spacing-heading-small-desktop)};
+    --#{$prefix}font-letter-spacing-body-large: #{px-to-rem($ouds-font-letter-spacing-body-large-desktop)};
+    --#{$prefix}font-letter-spacing-body-medium: #{px-to-rem($ouds-font-letter-spacing-body-medium-desktop)};
+    --#{$prefix}font-letter-spacing-body-small: #{px-to-rem($ouds-font-letter-spacing-body-small-desktop)};
+    --#{$prefix}font-max-width-display-large: #{px-to-rem($ouds-size-max-width-type-display-large-desktop)};
+    --#{$prefix}font-max-width-display-medium: #{px-to-rem($ouds-size-max-width-type-display-medium-desktop)};
+    --#{$prefix}font-max-width-display-small: #{px-to-rem($ouds-size-max-width-type-display-small-desktop)};
+    --#{$prefix}font-max-width-heading-xlarge: #{px-to-rem($ouds-size-max-width-type-heading-xlarge-desktop)};
+    --#{$prefix}font-max-width-heading-large: #{px-to-rem($ouds-size-max-width-type-heading-large-desktop)};
+    --#{$prefix}font-max-width-heading-medium: #{px-to-rem($ouds-size-max-width-type-heading-medium-desktop)};
+    --#{$prefix}font-max-width-heading-small: #{px-to-rem($ouds-size-max-width-type-heading-small-desktop)};
+    --#{$prefix}font-max-width-body-large: #{px-to-rem($ouds-size-max-width-type-body-large-desktop)};
+    --#{$prefix}font-max-width-body-medium: #{px-to-rem($ouds-size-max-width-type-body-medium-desktop)};
+    --#{$prefix}font-max-width-body-small: #{px-to-rem($ouds-size-max-width-type-body-small-desktop)};
+  }
+  // scss-docs-end root-font-variables-ouds
+  // End mod
+
   // Root and body
   // scss-docs-start root-body-variables
   @if $font-size-root != null {
@@ -72,6 +218,7 @@
   @include rfs($font-size-base, --#{$prefix}body-font-size);
   --#{$prefix}body-font-weight: #{$font-weight-base};
   --#{$prefix}body-line-height: #{$line-height-base};
+  --#{$prefix}body-letter-spacing: #{$letter-spacing-base}; // OUDS mod
   @if $body-text-align != null {
     --#{$prefix}body-text-align: #{$body-text-align};
   }
@@ -161,6 +308,78 @@
     --#{$prefix}space-scaled-spacious: #{$ouds-space-scaled-spacious-desktop};
   }
   // scss-docs-end root-space-scaled-var-ouds
+
+  // scss-docs-start root-size-scaled-var-ouds
+  --#{$prefix}icon-short-with-heading-xlarge: #{px-to-rem($ouds-size-icon-with-heading-xlarge-size-short-mobile)};
+  --#{$prefix}icon-medium-with-heading-xlarge: #{px-to-rem($ouds-size-icon-with-heading-xlarge-size-medium-mobile)};
+  --#{$prefix}icon-tall-with-heading-xlarge: #{px-to-rem($ouds-size-icon-with-heading-xlarge-size-tall-mobile)};
+  --#{$prefix}icon-short-with-heading-large: #{px-to-rem($ouds-size-icon-with-heading-large-size-short-mobile)};
+  --#{$prefix}icon-medium-with-heading-large: #{px-to-rem($ouds-size-icon-with-heading-large-size-medium-mobile)};
+  --#{$prefix}icon-tall-with-heading-large: #{px-to-rem($ouds-size-icon-with-heading-large-size-tall-mobile)};
+  --#{$prefix}icon-short-with-heading-medium: #{px-to-rem($ouds-size-icon-with-heading-medium-size-short-mobile)};
+  --#{$prefix}icon-medium-with-heading-medium: #{px-to-rem($ouds-size-icon-with-heading-medium-size-medium-mobile)};
+  --#{$prefix}icon-tall-with-heading-medium: #{px-to-rem($ouds-size-icon-with-heading-medium-size-tall-mobile)};
+  --#{$prefix}icon-short-with-heading-small: #{px-to-rem($ouds-size-icon-with-heading-small-size-short-mobile)};
+  --#{$prefix}icon-medium-with-heading-small: #{px-to-rem($ouds-size-icon-with-heading-small-size-medium-mobile)};
+  --#{$prefix}icon-tall-with-heading-small: #{px-to-rem($ouds-size-icon-with-heading-small-size-tall-mobile)};
+  --#{$prefix}icon-short-with-body-large: #{px-to-rem($ouds-size-icon-with-body-large-size-short-mobile)};
+  --#{$prefix}icon-medium-with-body-large: #{px-to-rem($ouds-size-icon-with-body-large-size-medium-mobile)};
+  --#{$prefix}icon-tall-with-body-large: #{px-to-rem($ouds-size-icon-with-body-large-size-tall-mobile)};
+  --#{$prefix}icon-short-with-body-medium: #{px-to-rem($ouds-size-icon-with-body-medium-size-short-mobile)};
+  --#{$prefix}icon-medium-with-body-medium: #{px-to-rem($ouds-size-icon-with-body-medium-size-medium-mobile)};
+  --#{$prefix}icon-tall-with-body-medium: #{px-to-rem($ouds-size-icon-with-body-medium-size-tall-mobile)};
+  --#{$prefix}icon-short-with-body-small: #{px-to-rem($ouds-size-icon-with-body-small-size-short-mobile)};
+  --#{$prefix}icon-medium-with-body-small: #{px-to-rem($ouds-size-icon-with-body-small-size-medium-mobile)};
+  --#{$prefix}icon-tall-with-body-small: #{px-to-rem($ouds-size-icon-with-body-small-size-tall-mobile)};
+
+  @include media-breakpoint-up(md) {
+    --#{$prefix}icon-short-with-heading-xlarge: #{px-to-rem($ouds-size-icon-with-heading-xlarge-size-short-tablet)};
+    --#{$prefix}icon-medium-with-heading-xlarge: #{px-to-rem($ouds-size-icon-with-heading-xlarge-size-medium-tablet)};
+    --#{$prefix}icon-tall-with-heading-xlarge: #{px-to-rem($ouds-size-icon-with-heading-xlarge-size-tall-tablet)};
+    --#{$prefix}icon-short-with-heading-large: #{px-to-rem($ouds-size-icon-with-heading-large-size-short-tablet)};
+    --#{$prefix}icon-medium-with-heading-large: #{px-to-rem($ouds-size-icon-with-heading-large-size-medium-tablet)};
+    --#{$prefix}icon-tall-with-heading-large: #{px-to-rem($ouds-size-icon-with-heading-large-size-tall-tablet)};
+    --#{$prefix}icon-short-with-heading-medium: #{px-to-rem($ouds-size-icon-with-heading-medium-size-short-tablet)};
+    --#{$prefix}icon-medium-with-heading-medium: #{px-to-rem($ouds-size-icon-with-heading-medium-size-medium-tablet)};
+    --#{$prefix}icon-tall-with-heading-medium: #{px-to-rem($ouds-size-icon-with-heading-medium-size-tall-tablet)};
+    --#{$prefix}icon-short-with-heading-small: #{px-to-rem($ouds-size-icon-with-heading-small-size-short-tablet)};
+    --#{$prefix}icon-medium-with-heading-small: #{px-to-rem($ouds-size-icon-with-heading-small-size-medium-tablet)};
+    --#{$prefix}icon-tall-with-heading-small: #{px-to-rem($ouds-size-icon-with-heading-small-size-tall-tablet)};
+    --#{$prefix}icon-short-with-body-large: #{px-to-rem($ouds-size-icon-with-body-large-size-short-tablet)};
+    --#{$prefix}icon-medium-with-body-large: #{px-to-rem($ouds-size-icon-with-body-large-size-medium-tablet)};
+    --#{$prefix}icon-tall-with-body-large: #{px-to-rem($ouds-size-icon-with-body-large-size-tall-tablet)};
+    --#{$prefix}icon-short-with-body-medium: #{px-to-rem($ouds-size-icon-with-body-medium-size-short-tablet)};
+    --#{$prefix}icon-medium-with-body-medium: #{px-to-rem($ouds-size-icon-with-body-medium-size-medium-tablet)};
+    --#{$prefix}icon-tall-with-body-medium: #{px-to-rem($ouds-size-icon-with-body-medium-size-tall-tablet)};
+    --#{$prefix}icon-short-with-body-small: #{px-to-rem($ouds-size-icon-with-body-small-size-short-tablet)};
+    --#{$prefix}icon-medium-with-body-small: #{px-to-rem($ouds-size-icon-with-body-small-size-medium-tablet)};
+    --#{$prefix}icon-tall-with-body-small: #{px-to-rem($ouds-size-icon-with-body-small-size-tall-tablet)};
+  }
+
+  @include media-breakpoint-up(xl) {
+    --#{$prefix}icon-short-with-heading-xlarge: #{px-to-rem($ouds-size-icon-with-heading-xlarge-size-short-desktop)};
+    --#{$prefix}icon-medium-with-heading-xlarge: #{px-to-rem($ouds-size-icon-with-heading-xlarge-size-medium-desktop)};
+    --#{$prefix}icon-tall-with-heading-xlarge: #{px-to-rem($ouds-size-icon-with-heading-xlarge-size-tall-desktop)};
+    --#{$prefix}icon-short-with-heading-large: #{px-to-rem($ouds-size-icon-with-heading-large-size-short-desktop)};
+    --#{$prefix}icon-medium-with-heading-large: #{px-to-rem($ouds-size-icon-with-heading-large-size-medium-desktop)};
+    --#{$prefix}icon-tall-with-heading-large: #{px-to-rem($ouds-size-icon-with-heading-large-size-tall-desktop)};
+    --#{$prefix}icon-short-with-heading-medium: #{px-to-rem($ouds-size-icon-with-heading-medium-size-short-desktop)};
+    --#{$prefix}icon-medium-with-heading-medium: #{px-to-rem($ouds-size-icon-with-heading-medium-size-medium-desktop)};
+    --#{$prefix}icon-tall-with-heading-medium: #{px-to-rem($ouds-size-icon-with-heading-medium-size-tall-desktop)};
+    --#{$prefix}icon-short-with-heading-small: #{px-to-rem($ouds-size-icon-with-heading-small-size-short-desktop)};
+    --#{$prefix}icon-medium-with-heading-small: #{px-to-rem($ouds-size-icon-with-heading-small-size-medium-desktop)};
+    --#{$prefix}icon-tall-with-heading-small: #{px-to-rem($ouds-size-icon-with-heading-small-size-tall-desktop)};
+    --#{$prefix}icon-short-with-body-large: #{px-to-rem($ouds-size-icon-with-body-large-size-short-desktop)};
+    --#{$prefix}icon-medium-with-body-large: #{px-to-rem($ouds-size-icon-with-body-large-size-medium-desktop)};
+    --#{$prefix}icon-tall-with-body-large: #{px-to-rem($ouds-size-icon-with-body-large-size-tall-desktop)};
+    --#{$prefix}icon-short-with-body-medium: #{px-to-rem($ouds-size-icon-with-body-medium-size-short-desktop)};
+    --#{$prefix}icon-medium-with-body-medium: #{px-to-rem($ouds-size-icon-with-body-medium-size-medium-desktop)};
+    --#{$prefix}icon-tall-with-body-medium: #{px-to-rem($ouds-size-icon-with-body-medium-size-tall-desktop)};
+    --#{$prefix}icon-short-with-body-small: #{px-to-rem($ouds-size-icon-with-body-small-size-short-desktop)};
+    --#{$prefix}icon-medium-with-body-small: #{px-to-rem($ouds-size-icon-with-body-small-size-medium-desktop)};
+    --#{$prefix}icon-tall-with-body-small: #{px-to-rem($ouds-size-icon-with-body-small-size-tall-desktop)};
+  }
+  // scss-docs-end root-size-scaled-var-ouds
   // End mod
 
   // scss-docs-start root-border-var
diff --git a/scss/_title-bars.scss b/scss/_title-bars.scss
index 5b90722cab..3774390a0f 100644
--- a/scss/_title-bars.scss
+++ b/scss/_title-bars.scss
@@ -15,16 +15,6 @@
   background-color: var(--#{$prefix}title-bar-bg);
   border-bottom: var(--#{$prefix}title-bar-border-width) solid var(--#{$prefix}title-bar-border-color);
 
-  @include media-breakpoint-up(md) {
-    --#{$prefix}title-bar-font-size: #{$title-bar-font-size-md};
-    --#{$prefix}title-bar-letter-spacing: #{$title-bar-letter-spacing-md};
-  }
-
-  @include media-breakpoint-up(xl) {
-    --#{$prefix}title-bar-font-size: #{$title-bar-font-size-xl};
-    --#{$prefix}title-bar-letter-spacing: #{$title-bar-letter-spacing-xl};
-  }
-
   > [class*="container"] {
     display: flex;
     align-items: flex-end;
diff --git a/scss/_type.scss b/scss/_type.scss
index 8217542491..c1d1415238 100644
--- a/scss/_type.scss
+++ b/scss/_type.scss
@@ -26,187 +26,22 @@
 }
 
 
-// OUDS mod
-// Headings and displays together
-// = Add letter-spacing and line-height
-// = Reduce heading font-sizes for mobile (mobile first, obviously)
-[class*="display-"] {
-  @extend %heading;
-}
-
-.display-1 {
-  @include font-size($h2-font-size);
-  line-height: $h2-line-height;
-
-  /* rtl:remove */
-  letter-spacing: $h2-spacing;
-}
-
-h1,
-.display-2,
-.display-3 {
-  @include font-size($h3-font-size);
-  line-height: $h3-line-height;
-
-  /* rtl:remove */
-  letter-spacing: $mid-spacing;
-}
-
-/* rtl:begin:remove */
-.display-2 {
-  letter-spacing: $h3-spacing;
-}
-
-/* rtl:end:remove */
-
-h2,
-.display-4 {
-  @include font-size($h5-font-size);
-  line-height: $h5-line-height;
-
-  /* rtl:remove */
-  letter-spacing: $h5-spacing;
-}
-
 .lead {
-  @include font-size($h6-font-size);
+  @include get-font-size("body-large"); // OUDS mod: instead of `@include font-size($lead-font-size)`
   font-weight: $lead-font-weight;
-  line-height: $lead-line-height;
-
-  /* rtl:remove */
-  letter-spacing: $h6-spacing;
-}
-
-@include media-breakpoint-up(sm) {
-  h1,
-  .display-1,
-  .display-2,
-  .display-3 {
-    line-height: $display-line-height;
-  }
-
-  .display-1 {
-    @include font-size($display2-size);
-
-    /* rtl:remove */
-    letter-spacing: $display2-spacing;
-  }
-
-  .display-2 {
-    @include font-size($display3-size);
-
-    /* rtl:remove */
-    letter-spacing: $display3-spacing;
-  }
-
-  h1,
-  .display-3 {
-    @include font-size($display4-size);
-
-    /* rtl:remove */
-    letter-spacing: $display4-spacing;
-  }
-
-  h2,
-  h3,
-  .display-4 {
-    @include font-size($h3-font-size);
-    line-height: $h3-line-height;
-
-    /* rtl:remove */
-    letter-spacing: $h3-spacing;
-  }
-
-  h4,
-  h5,
-  h6 {
-    @include font-size($h5-font-size);
-    line-height: $h5-line-height;
-
-    /* rtl:remove */
-    letter-spacing: $h5-spacing;
-  }
-
-  .lead {
-    @include font-size($h5-font-size);
-
-    /* rtl:remove */
-    letter-spacing: $h5-spacing;
-  }
 }
 
-@include media-breakpoint-up(lg) {
-  .display-1 {
-    @include font-size($display1-size);
-
-    /* rtl:remove */
-    letter-spacing: $display1-spacing;
-  }
-
-  .display-2 {
-    @include font-size($display2-size);
-
-    /* rtl:remove */
-    letter-spacing: $display2-spacing;
-  }
-
-  .display-3 {
-    @include font-size($display3-size);
-
-    /* rtl:remove */
-    letter-spacing: $display3-spacing;
-  }
-
-  .display-4 {
-    @include font-size($display4-size);
+// Type display classes
+@each $display, $font-size in $display-font-sizes {
+  .display-#{$display} {
+    font-family: $display-font-family;
+    font-style: $display-font-style;
+    font-weight: $display-font-weight;
     line-height: $display-line-height;
-
-    /* rtl:remove */
-    letter-spacing: $display4-spacing;
-  }
-
-  h2 {
-    @include font-size($h2-font-size);
-    line-height: $h2-line-height;
-
-    /* rtl:remove */
-    letter-spacing: $h2-spacing;
-  }
-
-  h3 {
-    @include font-size($h3-font-size);
-    line-height: $h3-line-height;
-
-    /* rtl:remove */
-    letter-spacing: $h3-spacing;
-  }
-
-  h4 {
-    @include font-size($h4-font-size);
-    line-height: $h4-line-height;
-
-    /* rtl:remove */
-    letter-spacing: $h4-spacing;
-  }
-
-  h5,
-  h6 {
-    @include font-size($h5-font-size);
-    line-height: $h5-line-height;
-
-    /* rtl:remove */
-    letter-spacing: $h5-spacing;
-  }
-
-  .lead {
-    @include font-size($lead-font-size);
-
-    /* rtl:remove */
-    letter-spacing: $lead-letter-spacing;
+    @extend %heading; // OUDS mod
+    @include get-font-size($font-size); // OUDS mod: instead of `@include font-size($font-size)`
   }
 }
-// End mod
-
 
 //
 // Emphasis
@@ -244,19 +79,15 @@ h2,
 //
 
 // Builds on `abbr`
-.initialism {
-  @include font-size($initialism-font-size);
-  text-transform: uppercase;
-}
+// OUDS mod: no .initialism
 
 // Blockquotes
 .blockquote {
   margin-bottom: $blockquote-margin-y;
-  @include font-size($blockquote-font-size);
-  line-height: $blockquote-line-height; // OUDS mod
 
-  /* rtl:remove */
-  letter-spacing: $blockquote-letter-spacing; // OUDS mod
+  > p {
+    @include get-font-size("body-large"); // OUDS mod: instead of `@include font-size($blockquote-font-size)` in `.blockquote`
+  }
 
   > :last-child {
     margin-bottom: 0;
@@ -266,13 +97,9 @@ h2,
 .blockquote-footer {
   margin-top: -$blockquote-margin-y;
   margin-bottom: $blockquote-margin-y;
-  @include font-size($blockquote-footer-font-size);
-  line-height: $line-height-sm; // OUDS mod
+  @include get-font-size("body-small"); // OUDS mod: instead of `@include font-size($blockquote-footer-font-size)`
   color: $blockquote-footer-color;
 
-  /* rtl:remove */
-  letter-spacing: $letter-spacing-base; // OUDS mod
-
   &::before {
     content: "\2014\00A0"; // em dash, nbsp
   }
diff --git a/scss/_utilities.scss b/scss/_utilities.scss
index 144d15ed1f..8b3fcb310a 100644
--- a/scss/_utilities.scss
+++ b/scss/_utilities.scss
@@ -288,7 +288,10 @@ $utilities: map-merge(
     "max-width": (
       property: max-width,
       class: mw,
-      values: (100: 100%)
+      values: (
+        none: none,
+        100: 100%
+      )
     ),
     "viewport-width": (
       property: width,
@@ -884,7 +887,8 @@ $utilities: map-merge(
     "font-size": (
       property: font-size,
       class: fs,
-      values: $font-sizes
+      values: $font-sizes,
+      bootstrap-compatibility: true
     ),
     // OUDS mod: no font-style
     "font-weight": (
@@ -893,31 +897,24 @@ $utilities: map-merge(
       values: (
         lighter: $font-weight-lighter,
         light: $font-weight-light,
-        normal: $font-weight-normal,
+        // OUDS mod: no normal because handled by ouds map
         medium: $font-weight-medium,
         semibold: $font-weight-semibold,
-        bold: $font-weight-bold,
+        // OUDS mod: no bold because handled by ouds map
         bolder: $font-weight-bolder
-      )
+      ),
+      bootstrap-compatibility: true
     ),
-    // OUDS mod: use hardcoded values instead of variables since our variables can't fit utilities
     "line-height": (
       property: line-height,
       class: lh,
       values: (
         1: 1,
-        sm: 1.25, // OUDS mod: instead of `$line-height-sm`
-        base: 1.5, // OUDS mod: instead of `$line-height-base`
-        lg: 2, // OUDS mod: instead of `$line-height-lg`
-      )
-    ),
-    "line-length": (
-      property: max-width,
-      class: ll,
-      values: (
-        sm: $line-length-sm,
-        md: $line-length-md,
-      )
+        sm: $line-height-sm,
+        base: $line-height-base,
+        lg: $line-height-lg,
+      ),
+      bootstrap-compatibility: true
     ),
     "text-align": (
       responsive: true,
@@ -953,6 +950,18 @@ $utilities: map-merge(
       rtl: false
     ),
     // scss-docs-end utils-text
+    // scss-docs-start utils-text-ouds
+    "font-size-ouds": (
+      property: font-size,
+      class: fs,
+      values: $ouds-font-sizes
+    ),
+    "font-weight-ouds": (
+      property: font-weight,
+      class: fw,
+      values: $ouds-font-weights
+    ),
+    // scss-docs-end utils-text-ouds
     // scss-docs-start utils-color
     "color": (
       property: color,
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 8fbaf65bd0..68420fb680 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -540,7 +540,7 @@ $icon-link-icon-transform:    translate3d(.25em, 0, 0) !default;
 //
 // Style p element.
 
-$paragraph-margin-bottom:   1rem !default;
+$paragraph-margin-bottom: $ouds-space-fixed-medium !default; // OUDS mod: instead of `1rem`
 
 
 // Grid breakpoints
@@ -714,10 +714,8 @@ $aspect-ratios: (
 // Font, line-height, and color for body text, headings, and more.
 
 // scss-docs-start font-variables
-// stylelint-disable value-keyword-case
-$font-family-sans-serif:      "Helvetica Neue", Helvetica, "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
-$font-family-monospace:       SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
-// stylelint-enable value-keyword-case
+$font-family-sans-serif:      $ouds-font-family-sans-serif-stack !default; // OUDS mod
+$font-family-monospace:       $ouds-font-family-monospace-stack !default; // OUDS mod
 $font-family-base:            var(--#{$prefix}font-sans-serif) !default;
 $font-family-code:            var(--#{$prefix}font-monospace) !default;
 
@@ -728,38 +726,32 @@ $font-family-code:            var(--#{$prefix}font-monospace) !default;
 // $font-size-root affects the value of `rem`, which is used for as well font sizes, paddings and margins
 // $font-size-base affects the font size of the body text
 $font-size-root:              null !default;
-$font-size-base:              1rem !default; // Assumes the browser default, typically `16px`
-$font-size-sm:                $font-size-base * .875 !default;  // 14px
-$font-size-lg:                $font-size-base * 1.125 !default; // 18px
-$font-size-xlg:               $font-size-base * 1.25 !default;  // 20px
+$font-size-base:              var(--#{$prefix}font-size-body-medium) !default; // Assumes the browser default, typically `16px`
+$font-size-sm:                var(--#{$prefix}font-size-body-small) !default;  // 14px
+$font-size-lg:                var(--#{$prefix}font-size-body-large) !default; // 18px
 
 $font-weight-lighter:         null !default;
 $font-weight-light:           null !default;
-$font-weight-normal:          400 !default;
-$font-weight-medium:          500 !default;
-$font-weight-semibold:        600 !default;
-$font-weight-bold:            700 !default;
+$font-weight-normal:          $ouds-font-weight-default !default;
+$font-weight-medium:          null !default;
+$font-weight-semibold:        null !default;
+$font-weight-bold:            $ouds-font-weight-strong !default;
 $font-weight-bolder:          null !default;
 
 $font-weight-base:            $font-weight-normal !default;
 
-// stylelint-disable function-disallowed-list
-$line-height-base:            calc(18 / 16) !default;
-$line-height-sm:              calc(16 / 14) !default;
-$line-height-lg:              calc(30 / 16) !default;
-// stylelint-enable function-disallowed-list
+$line-height-base:            var(--#{$prefix}font-line-height-body-medium) !default;
+$line-height-sm:              var(--#{$prefix}font-line-height-body-small) !default;
+$line-height-lg:              var(--#{$prefix}font-line-height-body-large) !default;
 
-$line-length-sm:              40ch !default;
-$line-length-md:              80ch !default;
+$letter-spacing-base:         var(--#{$prefix}font-letter-spacing-body-medium) !default;
 
-$letter-spacing-base:         $spacer * -.005 !default; // -0.1px
-
-$h1-font-size:                $font-size-base * 2.125 !default;   // 34px
-$h2-font-size:                $font-size-base * 1.875 !default;   // 30px
-$h3-font-size:                $font-size-base * 1.5 !default;     // 24px
-$h4-font-size:                $font-size-xlg !default;            // 20px
-$h5-font-size:                $font-size-lg !default;             // 18px
-$h6-font-size:                $font-size-base !default;           // 16px
+$h1-font-size:                var(--#{$prefix}font-size-heading-xlarge) !default;
+$h2-font-size:                var(--#{$prefix}font-size-heading-large) !default;
+$h3-font-size:                var(--#{$prefix}font-size-heading-medium) !default;
+$h4-font-size:                var(--#{$prefix}font-size-heading-small) !default;
+$h5-font-size:                var(--#{$prefix}font-size-body-large) !default;
+$h6-font-size:                var(--#{$prefix}font-size-body-medium) !default;
 // scss-docs-end font-variables
 
 // scss-docs-start font-sizes
@@ -773,55 +765,47 @@ $font-sizes: (
 ) !default;
 // scss-docs-end font-sizes
 
-// scss-docs-start letter-spacing
-$h1-spacing:                  $letter-spacing-base * 10 !default; // -1px
-$h2-spacing:                  $letter-spacing-base * 8 !default;  // -0.8px
-$mid-spacing:                 $letter-spacing-base * 6 !default;  // -0.6px
-$h3-spacing:                  $letter-spacing-base * 5 !default;  // -0.5px
-$h4-spacing:                  $letter-spacing-base * 4 !default;  // -0.4px
-$h5-spacing:                  $letter-spacing-base * 2 !default;  // -0.2px
-$h6-spacing:                  $letter-spacing-base !default;
-// scss-docs-end letter-spacing
-
-// stylelint-disable function-disallowed-list
-// scss-docs-start line-height
-$h1-line-height:              1 !default;
-$h2-line-height:              calc(32 / 30) !default;
-$h3-line-height:              calc(26 / 24) !default;
-$h4-line-height:              calc(22 / 20) !default;
-$h5-line-height:              calc(20 / 18) !default;
-$h6-line-height:              $line-height-base !default;
-// scss-docs-end line-height
-// stylelint-enable function-disallowed-list
-
 // scss-docs-start headings-variables
-$headings-margin-bottom:      $spacer !default; // OUDS mod
+$headings-margin-bottom:      $ouds-space-fixed-medium !default; // OUDS mod: instead of `$spacer * .5`
 $headings-font-family:        null !default;
 $headings-font-style:         null !default;
-$headings-font-weight:        700 !default;
-$headings-line-height:        $h6-line-height !default;
+$headings-font-weight:        $ouds-font-weight-heading !default;
+$headings-line-height:        null !default;
 $headings-color:              inherit !default;
 // scss-docs-end headings-variables
 
 // scss-docs-start display-headings
-$display1-size:               $font-size-xlg * 3 !default;        // 60px
-$display2-size:               $font-size-xlg * 2.5 !default;      // 50px
-$display3-size:               $font-size-xlg * 2 !default;        // 40px
-$display4-size:               $h1-font-size !default;             // 34px
-$display1-spacing:            $letter-spacing-base * 20 !default; // -2px
-$display2-spacing:            $letter-spacing-base * 16 !default; // -1.6px
-$display3-spacing:            $h1-spacing !default;               // -1px
-$display4-spacing:            $h1-spacing !default;               // -1px
-$display-line-height:         $h1-line-height !default;
+$display-font-sizes: (
+  large: "display-large",
+  medium: "display-medium",
+  small: "display-small"
+) !default;
+
+@if $enable-bootstrap-compatibility {
+  $display-font-sizes: map-merge(
+    $display-font-sizes,
+    (
+      1: "display-large",
+      2: "display-medium",
+      3: "display-small",
+      4: "heading-xlarge",
+      5: "heading-large",
+      6: "heading-medium",
+    )
+  );
+}
+
+$display-font-family: null !default;
+$display-font-style:  null !default;
+$display-font-weight: $ouds-font-weight-display !default;
+$display-line-height: $headings-line-height !default;
 // scss-docs-end display-headings
 
 // scss-docs-start type-variables
-$lead-font-size:              $font-size-xlg !default;
-$lead-font-weight:            400 !default;
-$lead-line-height:            1.5 !default;
-$lead-letter-spacing:         $letter-spacing-base * 4 !default;
+$lead-font-size:              $h5-font-size !default;
+$lead-font-weight:            $ouds-font-weight-body-default !default;
 
-$small-font-size:             .875rem !default;
+// OUDS mod: no $small-font-size
 
 $sub-sup-font-size:           .75em !default;
 
@@ -829,16 +813,14 @@ $sub-sup-font-size:           .75em !default;
 $text-muted:                  var(--#{$prefix}secondary-color) !default; // Deprecated in Bootstrap 5.3.0
 // fusv-enable
 
-$initialism-font-size:        $small-font-size !default;
+// OUDS mod: no $initialism-font-size
 
-$blockquote-margin-y:         $spacer !default;
-$blockquote-font-size:        $font-size-xlg !default;
+$blockquote-margin-y:         $ouds-space-fixed-medium !default; // OUDS mod: instead of `1rem`
+// OUDS mod: no `$blockquote-font-size`
 $blockquote-footer-color:     var(--#{$prefix}secondary-color) !default; // OUDS mod: instead of `$gray-600`
-$blockquote-footer-font-size: $small-font-size !default;
-$blockquote-line-height:      1.5 !default; // OUDS mod
-$blockquote-letter-spacing:   $letter-spacing-base * .25 !default; // OUDS mod
+// OUDS mod: no `$blockquote-footer-font-size`
 
-$hr-margin-y:                 $spacer !default;
+$hr-margin-y:                 $ouds-space-fixed-medium !default;
 $hr-color:                    inherit !default;
 
 // fusv-disable
@@ -855,14 +837,14 @@ $vr-border-width:             2px !default; // OUDS mod: instead of `var(--#{$pr
 // scss-docs-end vr-variables
 
 $legend-margin-bottom:        $spacer * .25 !default;
-$legend-font-size:            $font-size-xlg !default;
+// OUDS mod: no `$legend-font-size`
 $legend-font-weight:          $font-weight-bold !default;
 
 $dt-font-weight:              $font-weight-bold !default;
 
 $list-inline-padding:         $spacer * .25 !default;
 
-$mark-padding:                0 .1875em !default; // OUDS mod
+$mark-padding:                .125em !default; // OUDS mod: instead of `.1875rem`
 $mark-color:                  $white !default; // OUDS mod: instead of `$body-color`
 $mark-bg:                     $black !default; // OUDS mod: instead of `$yellow-100`
 // scss-docs-end type-variables
@@ -989,8 +971,8 @@ $btn-letter-spacing-sm:       $letter-spacing-base !default; // OUDS mod
 $btn-padding-y-lg:            $input-btn-padding-y-lg !default;
 $btn-padding-x-lg:            $input-btn-padding-x-lg !default;
 $btn-font-size-lg:            $input-btn-font-size-lg !default;
-$btn-line-height-lg:          $h5-line-height !default; // OUDS mod
-$btn-letter-spacing-lg:       $letter-spacing-base * 2 !default; // OUDS mod
+$btn-line-height-lg:          var(--#{$prefix}font-line-height-body-large) !default; // OUDS mod
+$btn-letter-spacing-lg:       calc(#{$letter-spacing-base} * 2) !default; // stylelint-disable-line function-disallowed-list
 
 $btn-border-width:            $input-btn-border-width !default;
 
@@ -1095,7 +1077,7 @@ $btn-social-networks: (
 
 // scss-docs-start form-text-variables
 $form-text-margin-top:                  .4375rem !default; // OUDS mod
-$form-text-font-size:                   $small-font-size !default;
+$form-text-font-size:                   null !default; // OUDS mod: instead of `$small-font-size`
 $form-text-font-style:                  null !default;
 $form-text-font-weight:                 $font-weight-bold !default; // OUDS mod: instead of `null`
 $form-text-line-height:                 $line-height-sm !default; // OUDS mod
@@ -1106,7 +1088,7 @@ $form-text-color:                       var(--#{$prefix}secondary-color) !defaul
 $form-label-margin-bottom:              .5rem !default; // OUDS mod
 $form-label-font-size:                  null !default;
 $form-label-font-style:                 null !default;
-$form-label-font-weight:                $font-weight-bold !default;
+$form-label-font-weight:                null !default;
 $form-label-color:                      null !default;
 $form-label-disabled-color:             var(--#{$prefix}disabled-color) !default; // OUDS mod
 $form-label-required-margin-left:       .1875rem !default; // OUDS mod
@@ -1118,7 +1100,7 @@ $form-helper-size:                      1.25rem !default; // OUDS mod
 $form-helper-color:                     var(--#{$prefix}info) !default; // OUDS mod
 $form-helper-bg:                        var(--#{$prefix}highlight-color) !default; // OUDS mod
 $form-helper-icon:                      escape-svg($helper-icon) !default; // OUDS mod
-$form-helper-label-margin-bottom:       $form-label-margin-bottom - divide(($form-helper-size - $font-size-base), 2) !default; // OUDS mod
+$form-helper-label-margin-bottom:       $form-label-margin-bottom - divide(($form-helper-size - 1rem), 2) !default; // OUDS mod
 // scss-docs-end form-helper-variables
 
 // scss-docs-start form-input-variables
@@ -1169,7 +1151,7 @@ $input-height-inner-quarter:            map-get($spacers, 2) !default; // OUDS m
 $input-height:                          2.5rem !default;
 $input-height-sm:                       1.875rem !default;
 $input-height-lg:                       3.125rem !default;
-$input-line-height-lg:                  $h5-line-height !default; // OUDS mod
+$input-line-height-lg:                  var(--#{$prefix}font-line-height-body-large) !default; // OUDS mod
 
 $input-transition:                      border-color $transition-duration $transition-timing, $transition-focus !default;
 
@@ -1184,7 +1166,7 @@ $form-color-disabled-filter:            brightness(0) invert(1) brightness(.8) !
 
 // scss-docs-start form-check-variables
 $form-check-input-width:                  1em !default;
-$form-check-min-height:                   $font-size-base * $input-btn-line-height !default;
+$form-check-min-height:                   calc(#{$font-size-base} * #{$input-btn-line-height}) !default; // stylelint-disable-line function-disallowed-list
 $form-check-padding-start:                $form-check-input-width + .5em !default;
 $form-check-margin-bottom:                .125rem !default;
 $form-check-label-padding-top:            .4375rem !default; // OUDS mod
@@ -1365,7 +1347,7 @@ $form-file-button-hover-bg:       var(--#{$prefix}secondary-bg) !default;
 
 // scss-docs-start form-feedback-variables
 $form-feedback-margin-top:          $form-text-margin-top !default;
-$form-feedback-font-size:           $small-font-size !default;
+$form-feedback-font-size:           null !default; // OUDS mod: instead of `$small-font-size`
 $form-feedback-font-style:          null !default;
 // OUDS mod: deprecated in OUDS Web, kept for Bootstrap compatibility
 // fusv-disable
@@ -1538,15 +1520,15 @@ $navbar-border-color:                       var(--#{$prefix}border-color-subtle)
 $navbar-brand-margin-y-xs:                  $spacer * .5 !default;
 $navbar-brand-logo-size-xs:                 $spacer * 1.5 !default;
 $navbar-brand-font-size-xs:                 1.3125rem !default;
-$navbar-brand-letter-spacing-xs:            $letter-spacing-base * 5 !default;
+$navbar-brand-letter-spacing-xs:            calc(#{$letter-spacing-base} * 5) !default; // stylelint-disable-line function-disallowed-list
 $navbar-brand-font-size-two-lined-xs:       1.0625rem !default;
-$navbar-brand-letter-spacing-two-lined-xs:  $letter-spacing-base * 4 !default;
+$navbar-brand-letter-spacing-two-lined-xs:  calc(#{$letter-spacing-base} * 4) !default; // stylelint-disable-line function-disallowed-list
 
 $navbar-brand-margin-y:                     $spacer * .95 !default;
 $navbar-brand-logo-size:                    $spacer * 2.5 !default;
-$navbar-brand-letter-spacing:               $letter-spacing-base * 10 !default;
+$navbar-brand-letter-spacing:               calc(#{$letter-spacing-base} * 10) !default; // stylelint-disable-line function-disallowed-list
 $navbar-brand-font-size-two-lined:          1.8125rem !default;
-$navbar-brand-letter-spacing-two-lined:     $letter-spacing-base * 8 !default;
+$navbar-brand-letter-spacing-two-lined:     calc(#{$letter-spacing-base} * 8) !default; // stylelint-disable-line function-disallowed-list
 
 $navbar-icon-size-xs:                       $spacer * 1.25 !default;
 $navbar-icon-size:                          $spacer * 1.5 !default;
@@ -1790,13 +1772,13 @@ $accordion-icon-transform:                scaleY(-1) !default;
 $accordion-button-font-size:              $h3-font-size !default;
 $accordion-button-line-height:            null !default;
 $accordion-button-font-weight:            $font-weight-bold !default;
-$accordion-button-letter-spacing:         $h3-spacing !default;
+$accordion-button-letter-spacing:         var(--#{$prefix}font-letter-spacing-heading-medium) !default;
 $accordion-button-font-size-sm:           $h5-font-size !default;
-$accordion-button-line-height-sm:         $h5-line-height !default;
-$accordion-button-letter-spacing-sm:      $h5-spacing !default;
+$accordion-button-line-height-sm:         var(--#{$prefix}font-line-height-body-large) !default;
+$accordion-button-letter-spacing-sm:      var(--#{$prefix}font-letter-spacing-body-large) !default;
 $accordion-button-font-size-lg:           $h2-font-size !default;
 $accordion-button-line-height-lg:         calc(40 / 30) !default; // stylelint-disable-line function-disallowed-list
-$accordion-button-letter-spacing-lg:      $h2-spacing !default;
+$accordion-button-letter-spacing-lg:      var(--#{$prefix}font-letter-spacing-heading-large) !default;
 // End mod
 // scss-docs-end accordion-variables
 
@@ -2077,7 +2059,7 @@ $thumbnail-box-shadow:              var(--#{$prefix}box-shadow-sm) !default;
 // Figures
 
 // scss-docs-start figure-variables
-$figure-caption-font-size:          $small-font-size !default;
+$figure-caption-font-size:          null !default; // OUDS mod: instead of `$small-font-size`
 $figure-caption-color:              var(--#{$prefix}secondary-color) !default;
 // scss-docs-end figure-variables
 
@@ -2091,15 +2073,9 @@ $title-bar-image-ratio:             1.8em !default;
 $title-bar-padding-y:               .3333333em !default;
 $title-bar-font-size:               $h2-font-size !default;
 $title-bar-line-height:             $display-line-height !default;
-$title-bar-letter-spacing:          $h2-spacing !default;
+$title-bar-letter-spacing:          var(--#{$prefix}font-letter-spacing-heading-large) !default;
 $title-bar-border-width:            calc(var(--#{$prefix}border-width) * .5) !default; // stylelint-disable-line function-disallowed-list
 $title-bar-border-color:            var(--#{$prefix}border-color-subtle) !default;
-
-$title-bar-font-size-md:            $display2-size !default;
-$title-bar-letter-spacing-md:       $display2-spacing !default;
-
-$title-bar-font-size-xl:            $display1-size !default;
-$title-bar-letter-spacing-xl:       $display1-spacing !default;
 // scss-docs-end title-bars-variables
 // End mod
 
@@ -2252,18 +2228,17 @@ $offcanvas-backdrop-opacity:        $modal-backdrop-opacity !default;
 
 // Code
 // OUDS mod
-$code-font-size:                    .875em !default;
-$code-color:                        $gray-700 !default;
+$code-font-size:                    .875em !default; // OUDS mod: instead of `$small-font-size`
+$code-color:                        $gray-700 !default; // instead of `$pink`
 
-$kbd-padding-y:                     $spacer * .05 !default;
-$kbd-padding-x:                     $spacer * .05 !default;
+$kbd-padding-y:                     px-to-rem($ouds-space-fixed-smash) !default; // instead of `.1875rem`
+$kbd-padding-x:                     px-to-rem($ouds-space-fixed-shortest) !default; // instead of `.375rem`
 $kbd-font-size:                     $code-font-size !default;
-$kbd-color:                         var(--#{$prefix}kbd-color, $black) !default;
-$kbd-bg:                            var(--#{$prefix}kbd-bg, $gray-300) !default;
+$kbd-color:                         var(--#{$prefix}body-bg) !default;
+$kbd-bg:                            var(--#{$prefix}body-color) !default;
 $nested-kbd-font-weight:            null !default; // Deprecated in Bootstrap v5.2.0, removing in v6
 
-$pre-color:                         var(--#{$prefix}code-color) !default;
-$pre-line-height:                   1.25 !default;
+$pre-color:                         var(--#{$prefix}code-color) !default; // instead of `null`
 // End mod
 
 //
@@ -2295,7 +2270,7 @@ $back-to-top-icon-height:        subtract(1rem, 1px) !default;
 
 //// Stepped process
 // scss-docs-start stepped-process
-$stepped-process-font-size:   $small-font-size !default;
+$stepped-process-font-size:   null !default;
 $stepped-process-font-weight: $font-weight-bold !default;
 $stepped-process-max-items:   5 !default;
 $stepped-process-counter:     step !default; // Used as a counter name
diff --git a/scss/forms/_input-group.scss b/scss/forms/_input-group.scss
index cf077bf762..a8da772305 100644
--- a/scss/forms/_input-group.scss
+++ b/scss/forms/_input-group.scss
@@ -71,7 +71,7 @@
 .input-group-lg > .input-group-text,
 .input-group-lg > .btn {
   padding: $input-padding-y-lg $input-padding-x-lg;
-  line-height: $h5-line-height; // OUDS mod
+  line-height: var(--#{$prefix}font-line-height-body-large); // OUDS mod
   @include font-size($input-font-size-lg);
   @include border-radius($input-border-radius-lg);
 }
diff --git a/scss/helpers/_icon.scss b/scss/helpers/_icon.scss
new file mode 100644
index 0000000000..73730e8229
--- /dev/null
+++ b/scss/helpers/_icon.scss
@@ -0,0 +1,56 @@
+// scss-docs-start ouds-font-icon-common
+%icon-size {
+  display: inline-block;
+  flex-shrink: 0;
+  width: 1em;
+  height: 1em;
+  line-height: 1;
+  fill: currentcolor;
+}
+// scss-docs-end ouds-font-icon-common
+
+@each $font-ref, $font-name in $ouds-font-sizes {
+  @each $icon-size in $ouds-icon-sizes {
+    @if str-slice($font-name, 1, 5) != "/code" {
+      .#{$font-ref}-#{$icon-size}-icon {
+        @extend %icon-size;
+        font-size: var(--#{$prefix}icon-#{$icon-size}-with-#{str-slice($font-name, 2)}) if($enable-important-utilities, !important, null);
+      }
+    }
+  }
+}
+
+.decorative-shortest-icon {
+  @extend %icon-size;
+  font-size: $ouds-size-icon-decorative-shortest if($enable-important-utilities, !important, null);
+}
+
+.decorative-shorter-icon {
+  @extend %icon-size;
+  font-size: $ouds-size-icon-decorative-shorter if($enable-important-utilities, !important, null);
+}
+
+.decorative-short-icon {
+  @extend %icon-size;
+  font-size: $ouds-size-icon-decorative-short if($enable-important-utilities, !important, null);
+}
+
+.decorative-medium-icon {
+  @extend %icon-size;
+  font-size: $ouds-size-icon-decorative-medium if($enable-important-utilities, !important, null);
+}
+
+.decorative-tall-icon {
+  @extend %icon-size;
+  font-size: $ouds-size-icon-decorative-tall if($enable-important-utilities, !important, null);
+}
+
+.decorative-taller-icon {
+  @extend %icon-size;
+  font-size: $ouds-size-icon-decorative-taller if($enable-important-utilities, !important, null);
+}
+
+.decorative-tallest-icon {
+  @extend %icon-size;
+  font-size: $ouds-size-icon-decorative-tallest if($enable-important-utilities, !important, null);
+}
diff --git a/scss/mixins/_fonts.scss b/scss/mixins/_fonts.scss
new file mode 100644
index 0000000000..bb65a7480b
--- /dev/null
+++ b/scss/mixins/_fonts.scss
@@ -0,0 +1,14 @@
+// scss-docs-start ouds-mixin-font
+// $font-size-ref can be one of: "code-small", "code-medium", "label-small", "label-medium", "label-large", "label-xlarge", "body-small", "body-medium", "body-large", "heading-small", "heading-medium", "heading-large", "heading-xlarge", "display-small", "display-medium", "display-large"
+
+@mixin get-font-size($font-size-ref: "display-large") {
+  @if str-slice($font-size-ref, 1, 5) != "label" and str-slice($font-size-ref, 1, 4) != "code" {
+    max-width: var(--#{$prefix}font-max-width-#{$font-size-ref});
+  }
+  font-size: var(--#{$prefix}font-size-#{$font-size-ref});
+  line-height: var(--#{$prefix}font-line-height-#{$font-size-ref});
+
+  /* rtl:remove */
+  letter-spacing: var(--#{$prefix}font-letter-spacing-#{$font-size-ref});
+}
+// scss-docs-end ouds-mixin-font
diff --git a/scss/mixins/_utilities.scss b/scss/mixins/_utilities.scss
index 0b097acb68..22172f76b8 100644
--- a/scss/mixins/_utilities.scss
+++ b/scss/mixins/_utilities.scss
@@ -55,30 +55,25 @@
           /* rtl:begin:remove */
         }
 
-        @if $is-css-var {
+        // OUDS mod
+        @if type-of($value) == "string" and str-slice($value, 1, 1) == "/" {
           .#{$property-class + $infix + $property-class-modifier} {
-            --#{$prefix}#{$css-variable-name}: #{$value};
+            @include get-font-size(#{str-slice($value, 2)});
           }
-
-          @each $pseudo in $state {
-            .#{$property-class + $infix + $property-class-modifier}-#{$pseudo}:#{$pseudo} {
+          // End mod
+        } @else {
+          @if $is-css-var {
+            .#{$property-class + $infix + $property-class-modifier} {
               --#{$prefix}#{$css-variable-name}: #{$value};
             }
-          }
-        } @else {
-          .#{$property-class + $infix + $property-class-modifier} {
-            @each $property in $properties {
-              @if $is-local-vars {
-                @each $local-var, $variable in $is-local-vars {
-                  --#{$prefix}#{$local-var}: #{$variable};
-                }
+
+            @each $pseudo in $state {
+              .#{$property-class + $infix + $property-class-modifier}-#{$pseudo}:#{$pseudo} {
+                --#{$prefix}#{$css-variable-name}: #{$value};
               }
-              #{$property}: $value if($enable-important-utilities, !important, null);
             }
-          }
-
-          @each $pseudo in $state {
-            .#{$property-class + $infix + $property-class-modifier}-#{$pseudo}:#{$pseudo} {
+          } @else {
+            .#{$property-class + $infix + $property-class-modifier} {
               @each $property in $properties {
                 @if $is-local-vars {
                   @each $local-var, $variable in $is-local-vars {
@@ -88,11 +83,24 @@
                 #{$property}: $value if($enable-important-utilities, !important, null);
               }
             }
+
+            @each $pseudo in $state {
+              .#{$property-class + $infix + $property-class-modifier}-#{$pseudo}:#{$pseudo} {
+                @each $property in $properties {
+                  @if $is-local-vars {
+                    @each $local-var, $variable in $is-local-vars {
+                      --#{$prefix}#{$local-var}: #{$variable};
+                    }
+                  }
+                  #{$property}: $value if($enable-important-utilities, !important, null);
+                }
+              }
+            }
           }
-        }
 
-        @if $is-rtl == false {
-          /* rtl:end:remove */
+          @if $is-rtl == false {
+            /* rtl:end:remove */
+          }
         }
       }
     }
diff --git a/scss/tests/customize/_ouds-web-bootstrap-grid.test.scss b/scss/tests/customize/_ouds-web-bootstrap-grid.test.scss
new file mode 100644
index 0000000000..516cfc8623
--- /dev/null
+++ b/scss/tests/customize/_ouds-web-bootstrap-grid.test.scss
@@ -0,0 +1,5724 @@
+// stylelint-disable no-duplicate-at-import-rules
+
+$enable-bootstrap-compatibility: null !default;
+
+@include describe("customize/ouds-web-bootstrap") {
+  @include it("generates only OUDS containers") {
+    $enable-bootstrap-compatibility: false !global;
+    @import "../../functions";
+    @import "../../tokens/raw";
+    @import "../../tokens/semantic";
+    @import "../../tokens/composite";
+    @import "../../tokens/component";
+    @import "../../variables";
+    @import "../../maps";
+    @import "../../mixins";
+
+    @include assert() {
+      @include output() {
+        @import "../../containers";
+      }
+      @include expect() {
+        .container-fluid {
+          width: 100%;
+          padding-right: var(--bs-container-margin-x);
+          padding-left: var(--bs-container-margin-x);
+          margin-right: auto;
+          margin-left: auto;
+          --bs-container-margin-x: 16px;
+        }
+
+        @media (min-width: 390px) {
+          .container-fluid {
+            --bs-container-margin-x: 24px;
+          }
+        }
+
+        @media (min-width: 480px) {
+          .container-fluid {
+            --bs-container-margin-x: 28px;
+          }
+        }
+
+        @media (min-width: 736px) {
+          .container-fluid {
+            --bs-container-margin-x: 32px;
+          }
+        }
+
+        @media (min-width: 1024px) {
+          .container-fluid {
+            --bs-container-margin-x: 40px;
+          }
+        }
+
+        @media (min-width: 1320px) {
+          .container-fluid {
+            --bs-container-margin-x: 56px;
+          }
+        }
+
+        @media (min-width: 1640px) {
+          .container-fluid {
+            --bs-container-margin-x: 80px;
+          }
+        }
+
+        @media (min-width: 1880px) {
+          .container-fluid {
+            --bs-container-margin-x: 112px;
+          }
+        }
+
+        @media (min-width: 1640px) {
+          .container-max-width {
+            --bs-container-margin-x: 80px;
+            max-width: 1680px;
+          }
+
+          .container-max-width .row {
+            --bs-gutter-x: 32px;
+          }
+        }
+      }
+    }
+  }
+
+  @include it("generates OUDS and Bootstrap containers") {
+    $enable-bootstrap-compatibility: true !global;
+    @import "../../functions";
+    @import "../../tokens/raw";
+    @import "../../tokens/semantic";
+    @import "../../tokens/composite";
+    @import "../../tokens/component";
+    @import "../../variables";
+    @import "../../maps";
+    @import "../../mixins";
+
+    @include assert() {
+      @include output() {
+        @import "../../containers";
+      }
+      @include expect() {
+        .container-fluid,
+        .container-3xl,
+        .container-2xl,
+        .container-xxl,
+        .container-xl,
+        .container-lg,
+        .container-md,
+        .container-sm,
+        .container-xs {
+          width: 100%;
+          padding-right: var(--bs-container-margin-x);
+          padding-left: var(--bs-container-margin-x);
+          margin-right: auto;
+          margin-left: auto;
+          --bs-container-margin-x: 16px;
+        }
+
+        @media (min-width: 390px) {
+          .container-fluid,
+          .container-3xl,
+          .container-2xl,
+          .container-xxl,
+          .container-xl,
+          .container-lg,
+          .container-md,
+          .container-sm,
+          .container-xs {
+            --bs-container-margin-x: 24px;
+          }
+        }
+
+        @media (min-width: 480px) {
+          .container-fluid,
+          .container-3xl,
+          .container-2xl,
+          .container-xxl,
+          .container-xl,
+          .container-lg,
+          .container-md,
+          .container-sm,
+          .container-xs {
+            --bs-container-margin-x: 28px;
+          }
+        }
+
+        @media (min-width: 736px) {
+          .container-fluid,
+          .container-3xl,
+          .container-2xl,
+          .container-xxl,
+          .container-xl,
+          .container-lg,
+          .container-md,
+          .container-sm,
+          .container-xs {
+            --bs-container-margin-x: 32px;
+          }
+        }
+
+        @media (min-width: 1024px) {
+          .container-fluid,
+          .container-3xl,
+          .container-2xl,
+          .container-xxl,
+          .container-xl,
+          .container-lg,
+          .container-md,
+          .container-sm,
+          .container-xs {
+            --bs-container-margin-x: 40px;
+          }
+        }
+
+        @media (min-width: 1320px) {
+          .container-fluid,
+          .container-3xl,
+          .container-2xl,
+          .container-xxl,
+          .container-xl,
+          .container-lg,
+          .container-md,
+          .container-sm,
+          .container-xs {
+            --bs-container-margin-x: 56px;
+          }
+        }
+
+        @media (min-width: 1640px) {
+          .container-fluid,
+          .container-3xl,
+          .container-2xl,
+          .container-xxl,
+          .container-xl,
+          .container-lg,
+          .container-md,
+          .container-sm,
+          .container-xs {
+            --bs-container-margin-x: 80px;
+          }
+        }
+
+        @media (min-width: 1880px) {
+          .container-fluid,
+          .container-3xl,
+          .container-2xl,
+          .container-xxl,
+          .container-xl,
+          .container-lg,
+          .container-md,
+          .container-sm,
+          .container-xs {
+            --bs-container-margin-x: 112px;
+          }
+        }
+
+        .container {
+          width: 100%;
+          padding-right: var(--bs-container-margin-x);
+          padding-left: var(--bs-container-margin-x);
+          margin-right: auto;
+          margin-left: auto;
+          --bs-container-margin-x: 16px;
+        }
+
+        @media (min-width: 390px) {
+          .container {
+            --bs-container-margin-x: 24px;
+          }
+        }
+
+        @media (min-width: 480px) {
+          .container {
+            --bs-container-margin-x: 28px;
+          }
+        }
+
+        @media (min-width: 736px) {
+          .container {
+            --bs-container-margin-x: 32px;
+          }
+        }
+
+        @media (min-width: 1024px) {
+          .container {
+            --bs-container-margin-x: 40px;
+          }
+        }
+
+        @media (min-width: 1320px) {
+          .container {
+            --bs-container-margin-x: 56px;
+          }
+        }
+
+        @media (min-width: 1640px) {
+          .container {
+            --bs-container-margin-x: 80px;
+          }
+        }
+
+        @media (min-width: 1880px) {
+          .container {
+            --bs-container-margin-x: 112px;
+          }
+        }
+
+        @media (min-width: 390px) {
+          .container-xs,
+          .container {
+            max-width: 390px;
+          }
+        }
+
+        @media (min-width: 480px) {
+          .container-sm,
+          .container-xs,
+          .container {
+            max-width: 480px;
+          }
+        }
+
+        @media (min-width: 736px) {
+          .container-md,
+          .container-sm,
+          .container-xs,
+          .container {
+            max-width: 736px;
+          }
+        }
+
+        @media (min-width: 1024px) {
+          .container-lg,
+          .container-md,
+          .container-sm,
+          .container-xs,
+          .container {
+            max-width: 1024px;
+          }
+        }
+
+        @media (min-width: 1320px) {
+          .container-xl,
+          .container-lg,
+          .container-md,
+          .container-sm,
+          .container-xs,
+          .container {
+            max-width: 1320px;
+          }
+        }
+
+        @media (min-width: 1640px) {
+          .container-2xl,
+          .container-xxl,
+          .container-xl,
+          .container-lg,
+          .container-md,
+          .container-sm,
+          .container-xs,
+          .container {
+            max-width: 1640px;
+          }
+        }
+
+        @media (min-width: 1880px) {
+          .container-3xl,
+          .container-2xl,
+          .container-xxl,
+          .container-xl,
+          .container-lg,
+          .container-md,
+          .container-sm,
+          .container-xs,
+          .container {
+            max-width: 1880px;
+          }
+        }
+
+        @media (min-width: 1640px) {
+          .container-max-width {
+            --bs-container-margin-x: 80px;
+            max-width: 1680px;
+          }
+
+          .container-max-width .row {
+            --bs-gutter-x: 32px;
+          }
+        }
+      }
+    }
+  }
+
+  @include it("generates only OUDS grid classes") {
+    $enable-bootstrap-compatibility: false !global;
+    @import "../../functions";
+    @import "../../tokens/raw";
+    @import "../../tokens/semantic";
+    @import "../../tokens/composite";
+    @import "../../tokens/component";
+    @import "../../variables";
+    @import "../../maps";
+    @import "../../mixins";
+
+    @include assert() {
+      @include output() {
+        @import "../../grid";
+      }
+      @include expect() {
+        :root {
+          --bs-breakpoint-2xs: 0;
+          --bs-breakpoint-xs: 390px;
+          --bs-breakpoint-sm: 480px;
+          --bs-breakpoint-md: 736px;
+          --bs-breakpoint-lg: 1024px;
+          --bs-breakpoint-xl: 1320px;
+          --bs-breakpoint-2xl: 1640px;
+          --bs-breakpoint-3xl: 1880px;
+        }
+
+        .row {
+          --bs-gutter-y: 0;
+          display: flex;
+          flex-wrap: wrap;
+          margin-top: calc(-1 * var(--bs-gutter-y)); // stylelint-disable-line function-disallowed-list
+          margin-right: calc(-0.5 * var(--bs-gutter-x)); // stylelint-disable-line function-disallowed-list, @stylistic/number-leading-zero
+          margin-left: calc(-0.5 * var(--bs-gutter-x)); // stylelint-disable-line function-disallowed-list, @stylistic/number-leading-zero
+          --bs-gutter-x: 8px;
+        }
+
+        @media (min-width: 390px) {
+          .row {
+            --bs-gutter-x: 16px;
+          }
+        }
+
+        @media (min-width: 480px) {
+          .row {
+            --bs-gutter-x: 16px;
+          }
+        }
+
+        @media (min-width: 736px) {
+          .row {
+            --bs-gutter-x: 24px;
+          }
+        }
+
+        @media (min-width: 1024px) {
+          .row {
+            --bs-gutter-x: 24px;
+          }
+        }
+
+        @media (min-width: 1320px) {
+          .row {
+            --bs-gutter-x: 32px;
+          }
+        }
+
+        @media (min-width: 1640px) {
+          .row {
+            --bs-gutter-x: 32px;
+          }
+        }
+
+        @media (min-width: 1880px) {
+          .row {
+            --bs-gutter-x: 40px;
+          }
+        }
+
+        .row > * {
+          flex-shrink: 0;
+          width: 100%;
+          max-width: 100%;
+          padding-right: calc(var(--bs-gutter-x) * 0.5); // stylelint-disable-line function-disallowed-list, @stylistic/number-leading-zero
+          padding-left: calc(var(--bs-gutter-x) * 0.5); // stylelint-disable-line function-disallowed-list, @stylistic/number-leading-zero
+          margin-top: var(--bs-gutter-y);
+        }
+
+        .col {
+          flex: 1 0 0%;
+        }
+
+        .row-cols-auto > * {
+          flex: 0 0 auto;
+          width: auto;
+        }
+
+        .row-cols-1 > * {
+          flex: 0 0 auto;
+          width: 100%;
+        }
+
+        .row-cols-2 > * {
+          flex: 0 0 auto;
+          width: 50%;
+        }
+
+        .row-cols-3 > * {
+          flex: 0 0 auto;
+          width: 33.33333333%;
+        }
+
+        .row-cols-4 > * {
+          flex: 0 0 auto;
+          width: 25%;
+        }
+
+        .row-cols-5 > * {
+          flex: 0 0 auto;
+          width: 20%;
+        }
+
+        .row-cols-6 > * {
+          flex: 0 0 auto;
+          width: 16.66666667%;
+        }
+
+        .col-auto {
+          flex: 0 0 auto;
+          width: auto;
+        }
+
+        .col-1 {
+          flex: 0 0 auto;
+          width: 8.33333333%;
+        }
+
+        .col-2 {
+          flex: 0 0 auto;
+          width: 16.66666667%;
+        }
+
+        .col-3 {
+          flex: 0 0 auto;
+          width: 25%;
+        }
+
+        .col-4 {
+          flex: 0 0 auto;
+          width: 33.33333333%;
+        }
+
+        .col-5 {
+          flex: 0 0 auto;
+          width: 41.66666667%;
+        }
+
+        .col-6 {
+          flex: 0 0 auto;
+          width: 50%;
+        }
+
+        .col-7 {
+          flex: 0 0 auto;
+          width: 58.33333333%;
+        }
+
+        .col-8 {
+          flex: 0 0 auto;
+          width: 66.66666667%;
+        }
+
+        .col-9 {
+          flex: 0 0 auto;
+          width: 75%;
+        }
+
+        .col-10 {
+          flex: 0 0 auto;
+          width: 83.33333333%;
+        }
+
+        .col-11 {
+          flex: 0 0 auto;
+          width: 91.66666667%;
+        }
+
+        .col-12 {
+          flex: 0 0 auto;
+          width: 100%;
+        }
+
+        .offset-1 {
+          margin-left: 8.33333333%;
+        }
+
+        .offset-2 {
+          margin-left: 16.66666667%;
+        }
+
+        .offset-3 {
+          margin-left: 25%;
+        }
+
+        .offset-4 {
+          margin-left: 33.33333333%;
+        }
+
+        .offset-5 {
+          margin-left: 41.66666667%;
+        }
+
+        .offset-6 {
+          margin-left: 50%;
+        }
+
+        .offset-7 {
+          margin-left: 58.33333333%;
+        }
+
+        .offset-8 {
+          margin-left: 66.66666667%;
+        }
+
+        .offset-9 {
+          margin-left: 75%;
+        }
+
+        .offset-10 {
+          margin-left: 83.33333333%;
+        }
+
+        .offset-11 {
+          margin-left: 91.66666667%;
+        }
+
+        .g-none,
+        .gx-none {
+          --bs-gutter-x: 0 !important;
+        }
+
+        .g-none,
+        .gy-none {
+          --bs-gutter-y: 0 !important;
+        }
+
+        .g-smash,
+        .gx-smash {
+          --bs-gutter-x: 2px !important;
+        }
+
+        .g-smash,
+        .gy-smash {
+          --bs-gutter-y: 2px !important;
+        }
+
+        .g-shortest,
+        .gx-shortest {
+          --bs-gutter-x: 4px !important;
+        }
+
+        .g-shortest,
+        .gy-shortest {
+          --bs-gutter-y: 4px !important;
+        }
+
+        .g-shorter,
+        .gx-shorter {
+          --bs-gutter-x: 8px !important;
+        }
+
+        .g-shorter,
+        .gy-shorter {
+          --bs-gutter-y: 8px !important;
+        }
+
+        .g-short,
+        .gx-short {
+          --bs-gutter-x: 12px !important;
+        }
+
+        .g-short,
+        .gy-short {
+          --bs-gutter-y: 12px !important;
+        }
+
+        .g-medium,
+        .gx-medium {
+          --bs-gutter-x: 16px !important;
+        }
+
+        .g-medium,
+        .gy-medium {
+          --bs-gutter-y: 16px !important;
+        }
+
+        .g-tall,
+        .gx-tall {
+          --bs-gutter-x: 24px !important;
+        }
+
+        .g-tall,
+        .gy-tall {
+          --bs-gutter-y: 24px !important;
+        }
+
+        .g-taller,
+        .gx-taller {
+          --bs-gutter-x: 32px !important;
+        }
+
+        .g-taller,
+        .gy-taller {
+          --bs-gutter-y: 32px !important;
+        }
+
+        .g-tallest,
+        .gx-tallest {
+          --bs-gutter-x: 40px !important;
+        }
+
+        .g-tallest,
+        .gy-tallest {
+          --bs-gutter-y: 40px !important;
+        }
+
+        .g-spacious,
+        .gx-spacious {
+          --bs-gutter-x: 48px !important;
+        }
+
+        .g-spacious,
+        .gy-spacious {
+          --bs-gutter-y: 48px !important;
+        }
+
+        .g-huge,
+        .gx-huge {
+          --bs-gutter-x: 56px !important;
+        }
+
+        .g-huge,
+        .gy-huge {
+          --bs-gutter-y: 56px !important;
+        }
+
+        .g-jumbo,
+        .gx-jumbo {
+          --bs-gutter-x: 64px !important;
+        }
+
+        .g-jumbo,
+        .gy-jumbo {
+          --bs-gutter-y: 64px !important;
+        }
+
+        @media (min-width: 390px) {
+          .col-xs {
+            flex: 1 0 0%;
+          }
+
+          .row-cols-xs-auto > * {
+            flex: 0 0 auto;
+            width: auto;
+          }
+
+          .row-cols-xs-1 > * {
+            flex: 0 0 auto;
+            width: 100%;
+          }
+
+          .row-cols-xs-2 > * {
+            flex: 0 0 auto;
+            width: 50%;
+          }
+
+          .row-cols-xs-3 > * {
+            flex: 0 0 auto;
+            width: 33.33333333%;
+          }
+
+          .row-cols-xs-4 > * {
+            flex: 0 0 auto;
+            width: 25%;
+          }
+
+          .row-cols-xs-5 > * {
+            flex: 0 0 auto;
+            width: 20%;
+          }
+
+          .row-cols-xs-6 > * {
+            flex: 0 0 auto;
+            width: 16.66666667%;
+          }
+
+          .col-xs-auto {
+            flex: 0 0 auto;
+            width: auto;
+          }
+
+          .col-xs-1 {
+            flex: 0 0 auto;
+            width: 8.33333333%;
+          }
+
+          .col-xs-2 {
+            flex: 0 0 auto;
+            width: 16.66666667%;
+          }
+
+          .col-xs-3 {
+            flex: 0 0 auto;
+            width: 25%;
+          }
+
+          .col-xs-4 {
+            flex: 0 0 auto;
+            width: 33.33333333%;
+          }
+
+          .col-xs-5 {
+            flex: 0 0 auto;
+            width: 41.66666667%;
+          }
+
+          .col-xs-6 {
+            flex: 0 0 auto;
+            width: 50%;
+          }
+
+          .col-xs-7 {
+            flex: 0 0 auto;
+            width: 58.33333333%;
+          }
+
+          .col-xs-8 {
+            flex: 0 0 auto;
+            width: 66.66666667%;
+          }
+
+          .col-xs-9 {
+            flex: 0 0 auto;
+            width: 75%;
+          }
+
+          .col-xs-10 {
+            flex: 0 0 auto;
+            width: 83.33333333%;
+          }
+
+          .col-xs-11 {
+            flex: 0 0 auto;
+            width: 91.66666667%;
+          }
+
+          .col-xs-12 {
+            flex: 0 0 auto;
+            width: 100%;
+          }
+
+          .offset-xs-0 {
+            margin-left: 0;
+          }
+
+          .offset-xs-1 {
+            margin-left: 8.33333333%;
+          }
+
+          .offset-xs-2 {
+            margin-left: 16.66666667%;
+          }
+
+          .offset-xs-3 {
+            margin-left: 25%;
+          }
+
+          .offset-xs-4 {
+            margin-left: 33.33333333%;
+          }
+
+          .offset-xs-5 {
+            margin-left: 41.66666667%;
+          }
+
+          .offset-xs-6 {
+            margin-left: 50%;
+          }
+
+          .offset-xs-7 {
+            margin-left: 58.33333333%;
+          }
+
+          .offset-xs-8 {
+            margin-left: 66.66666667%;
+          }
+
+          .offset-xs-9 {
+            margin-left: 75%;
+          }
+
+          .offset-xs-10 {
+            margin-left: 83.33333333%;
+          }
+
+          .offset-xs-11 {
+            margin-left: 91.66666667%;
+          }
+
+          .g-xs-none,
+          .gx-xs-none {
+            --bs-gutter-x: 0 !important;
+          }
+
+          .g-xs-none,
+          .gy-xs-none {
+            --bs-gutter-y: 0 !important;
+          }
+
+          .g-xs-smash,
+          .gx-xs-smash {
+            --bs-gutter-x: 2px !important;
+          }
+
+          .g-xs-smash,
+          .gy-xs-smash {
+            --bs-gutter-y: 2px !important;
+          }
+
+          .g-xs-shortest,
+          .gx-xs-shortest {
+            --bs-gutter-x: 4px !important;
+          }
+
+          .g-xs-shortest,
+          .gy-xs-shortest {
+            --bs-gutter-y: 4px !important;
+          }
+
+          .g-xs-shorter,
+          .gx-xs-shorter {
+            --bs-gutter-x: 8px !important;
+          }
+
+          .g-xs-shorter,
+          .gy-xs-shorter {
+            --bs-gutter-y: 8px !important;
+          }
+
+          .g-xs-short,
+          .gx-xs-short {
+            --bs-gutter-x: 12px !important;
+          }
+
+          .g-xs-short,
+          .gy-xs-short {
+            --bs-gutter-y: 12px !important;
+          }
+
+          .g-xs-medium,
+          .gx-xs-medium {
+            --bs-gutter-x: 16px !important;
+          }
+
+          .g-xs-medium,
+          .gy-xs-medium {
+            --bs-gutter-y: 16px !important;
+          }
+
+          .g-xs-tall,
+          .gx-xs-tall {
+            --bs-gutter-x: 24px !important;
+          }
+
+          .g-xs-tall,
+          .gy-xs-tall {
+            --bs-gutter-y: 24px !important;
+          }
+
+          .g-xs-taller,
+          .gx-xs-taller {
+            --bs-gutter-x: 32px !important;
+          }
+
+          .g-xs-taller,
+          .gy-xs-taller {
+            --bs-gutter-y: 32px !important;
+          }
+
+          .g-xs-tallest,
+          .gx-xs-tallest {
+            --bs-gutter-x: 40px !important;
+          }
+
+          .g-xs-tallest,
+          .gy-xs-tallest {
+            --bs-gutter-y: 40px !important;
+          }
+
+          .g-xs-spacious,
+          .gx-xs-spacious {
+            --bs-gutter-x: 48px !important;
+          }
+
+          .g-xs-spacious,
+          .gy-xs-spacious {
+            --bs-gutter-y: 48px !important;
+          }
+
+          .g-xs-huge,
+          .gx-xs-huge {
+            --bs-gutter-x: 56px !important;
+          }
+
+          .g-xs-huge,
+          .gy-xs-huge {
+            --bs-gutter-y: 56px !important;
+          }
+
+          .g-xs-jumbo,
+          .gx-xs-jumbo {
+            --bs-gutter-x: 64px !important;
+          }
+
+          .g-xs-jumbo,
+          .gy-xs-jumbo {
+            --bs-gutter-y: 64px !important;
+          }
+        }
+
+        @media (min-width: 480px) {
+          .col-sm {
+            flex: 1 0 0%;
+          }
+
+          .row-cols-sm-auto > * {
+            flex: 0 0 auto;
+            width: auto;
+          }
+
+          .row-cols-sm-1 > * {
+            flex: 0 0 auto;
+            width: 100%;
+          }
+
+          .row-cols-sm-2 > * {
+            flex: 0 0 auto;
+            width: 50%;
+          }
+
+          .row-cols-sm-3 > * {
+            flex: 0 0 auto;
+            width: 33.33333333%;
+          }
+
+          .row-cols-sm-4 > * {
+            flex: 0 0 auto;
+            width: 25%;
+          }
+
+          .row-cols-sm-5 > * {
+            flex: 0 0 auto;
+            width: 20%;
+          }
+
+          .row-cols-sm-6 > * {
+            flex: 0 0 auto;
+            width: 16.66666667%;
+          }
+
+          .col-sm-auto {
+            flex: 0 0 auto;
+            width: auto;
+          }
+
+          .col-sm-1 {
+            flex: 0 0 auto;
+            width: 8.33333333%;
+          }
+
+          .col-sm-2 {
+            flex: 0 0 auto;
+            width: 16.66666667%;
+          }
+
+          .col-sm-3 {
+            flex: 0 0 auto;
+            width: 25%;
+          }
+
+          .col-sm-4 {
+            flex: 0 0 auto;
+            width: 33.33333333%;
+          }
+
+          .col-sm-5 {
+            flex: 0 0 auto;
+            width: 41.66666667%;
+          }
+
+          .col-sm-6 {
+            flex: 0 0 auto;
+            width: 50%;
+          }
+
+          .col-sm-7 {
+            flex: 0 0 auto;
+            width: 58.33333333%;
+          }
+
+          .col-sm-8 {
+            flex: 0 0 auto;
+            width: 66.66666667%;
+          }
+
+          .col-sm-9 {
+            flex: 0 0 auto;
+            width: 75%;
+          }
+
+          .col-sm-10 {
+            flex: 0 0 auto;
+            width: 83.33333333%;
+          }
+
+          .col-sm-11 {
+            flex: 0 0 auto;
+            width: 91.66666667%;
+          }
+
+          .col-sm-12 {
+            flex: 0 0 auto;
+            width: 100%;
+          }
+
+          .offset-sm-0 {
+            margin-left: 0;
+          }
+
+          .offset-sm-1 {
+            margin-left: 8.33333333%;
+          }
+
+          .offset-sm-2 {
+            margin-left: 16.66666667%;
+          }
+
+          .offset-sm-3 {
+            margin-left: 25%;
+          }
+
+          .offset-sm-4 {
+            margin-left: 33.33333333%;
+          }
+
+          .offset-sm-5 {
+            margin-left: 41.66666667%;
+          }
+
+          .offset-sm-6 {
+            margin-left: 50%;
+          }
+
+          .offset-sm-7 {
+            margin-left: 58.33333333%;
+          }
+
+          .offset-sm-8 {
+            margin-left: 66.66666667%;
+          }
+
+          .offset-sm-9 {
+            margin-left: 75%;
+          }
+
+          .offset-sm-10 {
+            margin-left: 83.33333333%;
+          }
+
+          .offset-sm-11 {
+            margin-left: 91.66666667%;
+          }
+
+          .g-sm-none,
+          .gx-sm-none {
+            --bs-gutter-x: 0 !important;
+          }
+
+          .g-sm-none,
+          .gy-sm-none {
+            --bs-gutter-y: 0 !important;
+          }
+
+          .g-sm-smash,
+          .gx-sm-smash {
+            --bs-gutter-x: 2px !important;
+          }
+
+          .g-sm-smash,
+          .gy-sm-smash {
+            --bs-gutter-y: 2px !important;
+          }
+
+          .g-sm-shortest,
+          .gx-sm-shortest {
+            --bs-gutter-x: 4px !important;
+          }
+
+          .g-sm-shortest,
+          .gy-sm-shortest {
+            --bs-gutter-y: 4px !important;
+          }
+
+          .g-sm-shorter,
+          .gx-sm-shorter {
+            --bs-gutter-x: 8px !important;
+          }
+
+          .g-sm-shorter,
+          .gy-sm-shorter {
+            --bs-gutter-y: 8px !important;
+          }
+
+          .g-sm-short,
+          .gx-sm-short {
+            --bs-gutter-x: 12px !important;
+          }
+
+          .g-sm-short,
+          .gy-sm-short {
+            --bs-gutter-y: 12px !important;
+          }
+
+          .g-sm-medium,
+          .gx-sm-medium {
+            --bs-gutter-x: 16px !important;
+          }
+
+          .g-sm-medium,
+          .gy-sm-medium {
+            --bs-gutter-y: 16px !important;
+          }
+
+          .g-sm-tall,
+          .gx-sm-tall {
+            --bs-gutter-x: 24px !important;
+          }
+
+          .g-sm-tall,
+          .gy-sm-tall {
+            --bs-gutter-y: 24px !important;
+          }
+
+          .g-sm-taller,
+          .gx-sm-taller {
+            --bs-gutter-x: 32px !important;
+          }
+
+          .g-sm-taller,
+          .gy-sm-taller {
+            --bs-gutter-y: 32px !important;
+          }
+
+          .g-sm-tallest,
+          .gx-sm-tallest {
+            --bs-gutter-x: 40px !important;
+          }
+
+          .g-sm-tallest,
+          .gy-sm-tallest {
+            --bs-gutter-y: 40px !important;
+          }
+
+          .g-sm-spacious,
+          .gx-sm-spacious {
+            --bs-gutter-x: 48px !important;
+          }
+
+          .g-sm-spacious,
+          .gy-sm-spacious {
+            --bs-gutter-y: 48px !important;
+          }
+
+          .g-sm-huge,
+          .gx-sm-huge {
+            --bs-gutter-x: 56px !important;
+          }
+
+          .g-sm-huge,
+          .gy-sm-huge {
+            --bs-gutter-y: 56px !important;
+          }
+
+          .g-sm-jumbo,
+          .gx-sm-jumbo {
+            --bs-gutter-x: 64px !important;
+          }
+
+          .g-sm-jumbo,
+          .gy-sm-jumbo {
+            --bs-gutter-y: 64px !important;
+          }
+        }
+
+        @media (min-width: 736px) {
+          .col-md {
+            flex: 1 0 0%;
+          }
+
+          .row-cols-md-auto > * {
+            flex: 0 0 auto;
+            width: auto;
+          }
+
+          .row-cols-md-1 > * {
+            flex: 0 0 auto;
+            width: 100%;
+          }
+
+          .row-cols-md-2 > * {
+            flex: 0 0 auto;
+            width: 50%;
+          }
+
+          .row-cols-md-3 > * {
+            flex: 0 0 auto;
+            width: 33.33333333%;
+          }
+
+          .row-cols-md-4 > * {
+            flex: 0 0 auto;
+            width: 25%;
+          }
+
+          .row-cols-md-5 > * {
+            flex: 0 0 auto;
+            width: 20%;
+          }
+
+          .row-cols-md-6 > * {
+            flex: 0 0 auto;
+            width: 16.66666667%;
+          }
+
+          .col-md-auto {
+            flex: 0 0 auto;
+            width: auto;
+          }
+
+          .col-md-1 {
+            flex: 0 0 auto;
+            width: 8.33333333%;
+          }
+
+          .col-md-2 {
+            flex: 0 0 auto;
+            width: 16.66666667%;
+          }
+
+          .col-md-3 {
+            flex: 0 0 auto;
+            width: 25%;
+          }
+
+          .col-md-4 {
+            flex: 0 0 auto;
+            width: 33.33333333%;
+          }
+
+          .col-md-5 {
+            flex: 0 0 auto;
+            width: 41.66666667%;
+          }
+
+          .col-md-6 {
+            flex: 0 0 auto;
+            width: 50%;
+          }
+
+          .col-md-7 {
+            flex: 0 0 auto;
+            width: 58.33333333%;
+          }
+
+          .col-md-8 {
+            flex: 0 0 auto;
+            width: 66.66666667%;
+          }
+
+          .col-md-9 {
+            flex: 0 0 auto;
+            width: 75%;
+          }
+
+          .col-md-10 {
+            flex: 0 0 auto;
+            width: 83.33333333%;
+          }
+
+          .col-md-11 {
+            flex: 0 0 auto;
+            width: 91.66666667%;
+          }
+
+          .col-md-12 {
+            flex: 0 0 auto;
+            width: 100%;
+          }
+
+          .offset-md-0 {
+            margin-left: 0;
+          }
+
+          .offset-md-1 {
+            margin-left: 8.33333333%;
+          }
+
+          .offset-md-2 {
+            margin-left: 16.66666667%;
+          }
+
+          .offset-md-3 {
+            margin-left: 25%;
+          }
+
+          .offset-md-4 {
+            margin-left: 33.33333333%;
+          }
+
+          .offset-md-5 {
+            margin-left: 41.66666667%;
+          }
+
+          .offset-md-6 {
+            margin-left: 50%;
+          }
+
+          .offset-md-7 {
+            margin-left: 58.33333333%;
+          }
+
+          .offset-md-8 {
+            margin-left: 66.66666667%;
+          }
+
+          .offset-md-9 {
+            margin-left: 75%;
+          }
+
+          .offset-md-10 {
+            margin-left: 83.33333333%;
+          }
+
+          .offset-md-11 {
+            margin-left: 91.66666667%;
+          }
+
+          .g-md-none,
+          .gx-md-none {
+            --bs-gutter-x: 0 !important;
+          }
+
+          .g-md-none,
+          .gy-md-none {
+            --bs-gutter-y: 0 !important;
+          }
+
+          .g-md-smash,
+          .gx-md-smash {
+            --bs-gutter-x: 2px !important;
+          }
+
+          .g-md-smash,
+          .gy-md-smash {
+            --bs-gutter-y: 2px !important;
+          }
+
+          .g-md-shortest,
+          .gx-md-shortest {
+            --bs-gutter-x: 4px !important;
+          }
+
+          .g-md-shortest,
+          .gy-md-shortest {
+            --bs-gutter-y: 4px !important;
+          }
+
+          .g-md-shorter,
+          .gx-md-shorter {
+            --bs-gutter-x: 8px !important;
+          }
+
+          .g-md-shorter,
+          .gy-md-shorter {
+            --bs-gutter-y: 8px !important;
+          }
+
+          .g-md-short,
+          .gx-md-short {
+            --bs-gutter-x: 12px !important;
+          }
+
+          .g-md-short,
+          .gy-md-short {
+            --bs-gutter-y: 12px !important;
+          }
+
+          .g-md-medium,
+          .gx-md-medium {
+            --bs-gutter-x: 16px !important;
+          }
+
+          .g-md-medium,
+          .gy-md-medium {
+            --bs-gutter-y: 16px !important;
+          }
+
+          .g-md-tall,
+          .gx-md-tall {
+            --bs-gutter-x: 24px !important;
+          }
+
+          .g-md-tall,
+          .gy-md-tall {
+            --bs-gutter-y: 24px !important;
+          }
+
+          .g-md-taller,
+          .gx-md-taller {
+            --bs-gutter-x: 32px !important;
+          }
+
+          .g-md-taller,
+          .gy-md-taller {
+            --bs-gutter-y: 32px !important;
+          }
+
+          .g-md-tallest,
+          .gx-md-tallest {
+            --bs-gutter-x: 40px !important;
+          }
+
+          .g-md-tallest,
+          .gy-md-tallest {
+            --bs-gutter-y: 40px !important;
+          }
+
+          .g-md-spacious,
+          .gx-md-spacious {
+            --bs-gutter-x: 48px !important;
+          }
+
+          .g-md-spacious,
+          .gy-md-spacious {
+            --bs-gutter-y: 48px !important;
+          }
+
+          .g-md-huge,
+          .gx-md-huge {
+            --bs-gutter-x: 56px !important;
+          }
+
+          .g-md-huge,
+          .gy-md-huge {
+            --bs-gutter-y: 56px !important;
+          }
+
+          .g-md-jumbo,
+          .gx-md-jumbo {
+            --bs-gutter-x: 64px !important;
+          }
+
+          .g-md-jumbo,
+          .gy-md-jumbo {
+            --bs-gutter-y: 64px !important;
+          }
+        }
+
+        @media (min-width: 1024px) {
+          .col-lg {
+            flex: 1 0 0%;
+          }
+
+          .row-cols-lg-auto > * {
+            flex: 0 0 auto;
+            width: auto;
+          }
+
+          .row-cols-lg-1 > * {
+            flex: 0 0 auto;
+            width: 100%;
+          }
+
+          .row-cols-lg-2 > * {
+            flex: 0 0 auto;
+            width: 50%;
+          }
+
+          .row-cols-lg-3 > * {
+            flex: 0 0 auto;
+            width: 33.33333333%;
+          }
+
+          .row-cols-lg-4 > * {
+            flex: 0 0 auto;
+            width: 25%;
+          }
+
+          .row-cols-lg-5 > * {
+            flex: 0 0 auto;
+            width: 20%;
+          }
+
+          .row-cols-lg-6 > * {
+            flex: 0 0 auto;
+            width: 16.66666667%;
+          }
+
+          .col-lg-auto {
+            flex: 0 0 auto;
+            width: auto;
+          }
+
+          .col-lg-1 {
+            flex: 0 0 auto;
+            width: 8.33333333%;
+          }
+
+          .col-lg-2 {
+            flex: 0 0 auto;
+            width: 16.66666667%;
+          }
+
+          .col-lg-3 {
+            flex: 0 0 auto;
+            width: 25%;
+          }
+
+          .col-lg-4 {
+            flex: 0 0 auto;
+            width: 33.33333333%;
+          }
+
+          .col-lg-5 {
+            flex: 0 0 auto;
+            width: 41.66666667%;
+          }
+
+          .col-lg-6 {
+            flex: 0 0 auto;
+            width: 50%;
+          }
+
+          .col-lg-7 {
+            flex: 0 0 auto;
+            width: 58.33333333%;
+          }
+
+          .col-lg-8 {
+            flex: 0 0 auto;
+            width: 66.66666667%;
+          }
+
+          .col-lg-9 {
+            flex: 0 0 auto;
+            width: 75%;
+          }
+
+          .col-lg-10 {
+            flex: 0 0 auto;
+            width: 83.33333333%;
+          }
+
+          .col-lg-11 {
+            flex: 0 0 auto;
+            width: 91.66666667%;
+          }
+
+          .col-lg-12 {
+            flex: 0 0 auto;
+            width: 100%;
+          }
+
+          .offset-lg-0 {
+            margin-left: 0;
+          }
+
+          .offset-lg-1 {
+            margin-left: 8.33333333%;
+          }
+
+          .offset-lg-2 {
+            margin-left: 16.66666667%;
+          }
+
+          .offset-lg-3 {
+            margin-left: 25%;
+          }
+
+          .offset-lg-4 {
+            margin-left: 33.33333333%;
+          }
+
+          .offset-lg-5 {
+            margin-left: 41.66666667%;
+          }
+
+          .offset-lg-6 {
+            margin-left: 50%;
+          }
+
+          .offset-lg-7 {
+            margin-left: 58.33333333%;
+          }
+
+          .offset-lg-8 {
+            margin-left: 66.66666667%;
+          }
+
+          .offset-lg-9 {
+            margin-left: 75%;
+          }
+
+          .offset-lg-10 {
+            margin-left: 83.33333333%;
+          }
+
+          .offset-lg-11 {
+            margin-left: 91.66666667%;
+          }
+
+          .g-lg-none,
+          .gx-lg-none {
+            --bs-gutter-x: 0 !important;
+          }
+
+          .g-lg-none,
+          .gy-lg-none {
+            --bs-gutter-y: 0 !important;
+          }
+
+          .g-lg-smash,
+          .gx-lg-smash {
+            --bs-gutter-x: 2px !important;
+          }
+
+          .g-lg-smash,
+          .gy-lg-smash {
+            --bs-gutter-y: 2px !important;
+          }
+
+          .g-lg-shortest,
+          .gx-lg-shortest {
+            --bs-gutter-x: 4px !important;
+          }
+
+          .g-lg-shortest,
+          .gy-lg-shortest {
+            --bs-gutter-y: 4px !important;
+          }
+
+          .g-lg-shorter,
+          .gx-lg-shorter {
+            --bs-gutter-x: 8px !important;
+          }
+
+          .g-lg-shorter,
+          .gy-lg-shorter {
+            --bs-gutter-y: 8px !important;
+          }
+
+          .g-lg-short,
+          .gx-lg-short {
+            --bs-gutter-x: 12px !important;
+          }
+
+          .g-lg-short,
+          .gy-lg-short {
+            --bs-gutter-y: 12px !important;
+          }
+
+          .g-lg-medium,
+          .gx-lg-medium {
+            --bs-gutter-x: 16px !important;
+          }
+
+          .g-lg-medium,
+          .gy-lg-medium {
+            --bs-gutter-y: 16px !important;
+          }
+
+          .g-lg-tall,
+          .gx-lg-tall {
+            --bs-gutter-x: 24px !important;
+          }
+
+          .g-lg-tall,
+          .gy-lg-tall {
+            --bs-gutter-y: 24px !important;
+          }
+
+          .g-lg-taller,
+          .gx-lg-taller {
+            --bs-gutter-x: 32px !important;
+          }
+
+          .g-lg-taller,
+          .gy-lg-taller {
+            --bs-gutter-y: 32px !important;
+          }
+
+          .g-lg-tallest,
+          .gx-lg-tallest {
+            --bs-gutter-x: 40px !important;
+          }
+
+          .g-lg-tallest,
+          .gy-lg-tallest {
+            --bs-gutter-y: 40px !important;
+          }
+
+          .g-lg-spacious,
+          .gx-lg-spacious {
+            --bs-gutter-x: 48px !important;
+          }
+
+          .g-lg-spacious,
+          .gy-lg-spacious {
+            --bs-gutter-y: 48px !important;
+          }
+
+          .g-lg-huge,
+          .gx-lg-huge {
+            --bs-gutter-x: 56px !important;
+          }
+
+          .g-lg-huge,
+          .gy-lg-huge {
+            --bs-gutter-y: 56px !important;
+          }
+
+          .g-lg-jumbo,
+          .gx-lg-jumbo {
+            --bs-gutter-x: 64px !important;
+          }
+
+          .g-lg-jumbo,
+          .gy-lg-jumbo {
+            --bs-gutter-y: 64px !important;
+          }
+        }
+
+        @media (min-width: 1320px) {
+          .col-xl {
+            flex: 1 0 0%;
+          }
+
+          .row-cols-xl-auto > * {
+            flex: 0 0 auto;
+            width: auto;
+          }
+
+          .row-cols-xl-1 > * {
+            flex: 0 0 auto;
+            width: 100%;
+          }
+
+          .row-cols-xl-2 > * {
+            flex: 0 0 auto;
+            width: 50%;
+          }
+
+          .row-cols-xl-3 > * {
+            flex: 0 0 auto;
+            width: 33.33333333%;
+          }
+
+          .row-cols-xl-4 > * {
+            flex: 0 0 auto;
+            width: 25%;
+          }
+
+          .row-cols-xl-5 > * {
+            flex: 0 0 auto;
+            width: 20%;
+          }
+
+          .row-cols-xl-6 > * {
+            flex: 0 0 auto;
+            width: 16.66666667%;
+          }
+
+          .col-xl-auto {
+            flex: 0 0 auto;
+            width: auto;
+          }
+
+          .col-xl-1 {
+            flex: 0 0 auto;
+            width: 8.33333333%;
+          }
+
+          .col-xl-2 {
+            flex: 0 0 auto;
+            width: 16.66666667%;
+          }
+
+          .col-xl-3 {
+            flex: 0 0 auto;
+            width: 25%;
+          }
+
+          .col-xl-4 {
+            flex: 0 0 auto;
+            width: 33.33333333%;
+          }
+
+          .col-xl-5 {
+            flex: 0 0 auto;
+            width: 41.66666667%;
+          }
+
+          .col-xl-6 {
+            flex: 0 0 auto;
+            width: 50%;
+          }
+
+          .col-xl-7 {
+            flex: 0 0 auto;
+            width: 58.33333333%;
+          }
+
+          .col-xl-8 {
+            flex: 0 0 auto;
+            width: 66.66666667%;
+          }
+
+          .col-xl-9 {
+            flex: 0 0 auto;
+            width: 75%;
+          }
+
+          .col-xl-10 {
+            flex: 0 0 auto;
+            width: 83.33333333%;
+          }
+
+          .col-xl-11 {
+            flex: 0 0 auto;
+            width: 91.66666667%;
+          }
+
+          .col-xl-12 {
+            flex: 0 0 auto;
+            width: 100%;
+          }
+
+          .offset-xl-0 {
+            margin-left: 0;
+          }
+
+          .offset-xl-1 {
+            margin-left: 8.33333333%;
+          }
+
+          .offset-xl-2 {
+            margin-left: 16.66666667%;
+          }
+
+          .offset-xl-3 {
+            margin-left: 25%;
+          }
+
+          .offset-xl-4 {
+            margin-left: 33.33333333%;
+          }
+
+          .offset-xl-5 {
+            margin-left: 41.66666667%;
+          }
+
+          .offset-xl-6 {
+            margin-left: 50%;
+          }
+
+          .offset-xl-7 {
+            margin-left: 58.33333333%;
+          }
+
+          .offset-xl-8 {
+            margin-left: 66.66666667%;
+          }
+
+          .offset-xl-9 {
+            margin-left: 75%;
+          }
+
+          .offset-xl-10 {
+            margin-left: 83.33333333%;
+          }
+
+          .offset-xl-11 {
+            margin-left: 91.66666667%;
+          }
+
+          .g-xl-none,
+          .gx-xl-none {
+            --bs-gutter-x: 0 !important;
+          }
+
+          .g-xl-none,
+          .gy-xl-none {
+            --bs-gutter-y: 0 !important;
+          }
+
+          .g-xl-smash,
+          .gx-xl-smash {
+            --bs-gutter-x: 2px !important;
+          }
+
+          .g-xl-smash,
+          .gy-xl-smash {
+            --bs-gutter-y: 2px !important;
+          }
+
+          .g-xl-shortest,
+          .gx-xl-shortest {
+            --bs-gutter-x: 4px !important;
+          }
+
+          .g-xl-shortest,
+          .gy-xl-shortest {
+            --bs-gutter-y: 4px !important;
+          }
+
+          .g-xl-shorter,
+          .gx-xl-shorter {
+            --bs-gutter-x: 8px !important;
+          }
+
+          .g-xl-shorter,
+          .gy-xl-shorter {
+            --bs-gutter-y: 8px !important;
+          }
+
+          .g-xl-short,
+          .gx-xl-short {
+            --bs-gutter-x: 12px !important;
+          }
+
+          .g-xl-short,
+          .gy-xl-short {
+            --bs-gutter-y: 12px !important;
+          }
+
+          .g-xl-medium,
+          .gx-xl-medium {
+            --bs-gutter-x: 16px !important;
+          }
+
+          .g-xl-medium,
+          .gy-xl-medium {
+            --bs-gutter-y: 16px !important;
+          }
+
+          .g-xl-tall,
+          .gx-xl-tall {
+            --bs-gutter-x: 24px !important;
+          }
+
+          .g-xl-tall,
+          .gy-xl-tall {
+            --bs-gutter-y: 24px !important;
+          }
+
+          .g-xl-taller,
+          .gx-xl-taller {
+            --bs-gutter-x: 32px !important;
+          }
+
+          .g-xl-taller,
+          .gy-xl-taller {
+            --bs-gutter-y: 32px !important;
+          }
+
+          .g-xl-tallest,
+          .gx-xl-tallest {
+            --bs-gutter-x: 40px !important;
+          }
+
+          .g-xl-tallest,
+          .gy-xl-tallest {
+            --bs-gutter-y: 40px !important;
+          }
+
+          .g-xl-spacious,
+          .gx-xl-spacious {
+            --bs-gutter-x: 48px !important;
+          }
+
+          .g-xl-spacious,
+          .gy-xl-spacious {
+            --bs-gutter-y: 48px !important;
+          }
+
+          .g-xl-huge,
+          .gx-xl-huge {
+            --bs-gutter-x: 56px !important;
+          }
+
+          .g-xl-huge,
+          .gy-xl-huge {
+            --bs-gutter-y: 56px !important;
+          }
+
+          .g-xl-jumbo,
+          .gx-xl-jumbo {
+            --bs-gutter-x: 64px !important;
+          }
+
+          .g-xl-jumbo,
+          .gy-xl-jumbo {
+            --bs-gutter-y: 64px !important;
+          }
+        }
+
+        @media (min-width: 1640px) {
+          .col-2xl {
+            flex: 1 0 0%;
+          }
+
+          .row-cols-2xl-auto > * {
+            flex: 0 0 auto;
+            width: auto;
+          }
+
+          .row-cols-2xl-1 > * {
+            flex: 0 0 auto;
+            width: 100%;
+          }
+
+          .row-cols-2xl-2 > * {
+            flex: 0 0 auto;
+            width: 50%;
+          }
+
+          .row-cols-2xl-3 > * {
+            flex: 0 0 auto;
+            width: 33.33333333%;
+          }
+
+          .row-cols-2xl-4 > * {
+            flex: 0 0 auto;
+            width: 25%;
+          }
+
+          .row-cols-2xl-5 > * {
+            flex: 0 0 auto;
+            width: 20%;
+          }
+
+          .row-cols-2xl-6 > * {
+            flex: 0 0 auto;
+            width: 16.66666667%;
+          }
+
+          .col-2xl-auto {
+            flex: 0 0 auto;
+            width: auto;
+          }
+
+          .col-2xl-1 {
+            flex: 0 0 auto;
+            width: 8.33333333%;
+          }
+
+          .col-2xl-2 {
+            flex: 0 0 auto;
+            width: 16.66666667%;
+          }
+
+          .col-2xl-3 {
+            flex: 0 0 auto;
+            width: 25%;
+          }
+
+          .col-2xl-4 {
+            flex: 0 0 auto;
+            width: 33.33333333%;
+          }
+
+          .col-2xl-5 {
+            flex: 0 0 auto;
+            width: 41.66666667%;
+          }
+
+          .col-2xl-6 {
+            flex: 0 0 auto;
+            width: 50%;
+          }
+
+          .col-2xl-7 {
+            flex: 0 0 auto;
+            width: 58.33333333%;
+          }
+
+          .col-2xl-8 {
+            flex: 0 0 auto;
+            width: 66.66666667%;
+          }
+
+          .col-2xl-9 {
+            flex: 0 0 auto;
+            width: 75%;
+          }
+
+          .col-2xl-10 {
+            flex: 0 0 auto;
+            width: 83.33333333%;
+          }
+
+          .col-2xl-11 {
+            flex: 0 0 auto;
+            width: 91.66666667%;
+          }
+
+          .col-2xl-12 {
+            flex: 0 0 auto;
+            width: 100%;
+          }
+
+          .offset-2xl-0 {
+            margin-left: 0;
+          }
+
+          .offset-2xl-1 {
+            margin-left: 8.33333333%;
+          }
+
+          .offset-2xl-2 {
+            margin-left: 16.66666667%;
+          }
+
+          .offset-2xl-3 {
+            margin-left: 25%;
+          }
+
+          .offset-2xl-4 {
+            margin-left: 33.33333333%;
+          }
+
+          .offset-2xl-5 {
+            margin-left: 41.66666667%;
+          }
+
+          .offset-2xl-6 {
+            margin-left: 50%;
+          }
+
+          .offset-2xl-7 {
+            margin-left: 58.33333333%;
+          }
+
+          .offset-2xl-8 {
+            margin-left: 66.66666667%;
+          }
+
+          .offset-2xl-9 {
+            margin-left: 75%;
+          }
+
+          .offset-2xl-10 {
+            margin-left: 83.33333333%;
+          }
+
+          .offset-2xl-11 {
+            margin-left: 91.66666667%;
+          }
+
+          .g-2xl-none,
+          .gx-2xl-none {
+            --bs-gutter-x: 0 !important;
+          }
+
+          .g-2xl-none,
+          .gy-2xl-none {
+            --bs-gutter-y: 0 !important;
+          }
+
+          .g-2xl-smash,
+          .gx-2xl-smash {
+            --bs-gutter-x: 2px !important;
+          }
+
+          .g-2xl-smash,
+          .gy-2xl-smash {
+            --bs-gutter-y: 2px !important;
+          }
+
+          .g-2xl-shortest,
+          .gx-2xl-shortest {
+            --bs-gutter-x: 4px !important;
+          }
+
+          .g-2xl-shortest,
+          .gy-2xl-shortest {
+            --bs-gutter-y: 4px !important;
+          }
+
+          .g-2xl-shorter,
+          .gx-2xl-shorter {
+            --bs-gutter-x: 8px !important;
+          }
+
+          .g-2xl-shorter,
+          .gy-2xl-shorter {
+            --bs-gutter-y: 8px !important;
+          }
+
+          .g-2xl-short,
+          .gx-2xl-short {
+            --bs-gutter-x: 12px !important;
+          }
+
+          .g-2xl-short,
+          .gy-2xl-short {
+            --bs-gutter-y: 12px !important;
+          }
+
+          .g-2xl-medium,
+          .gx-2xl-medium {
+            --bs-gutter-x: 16px !important;
+          }
+
+          .g-2xl-medium,
+          .gy-2xl-medium {
+            --bs-gutter-y: 16px !important;
+          }
+
+          .g-2xl-tall,
+          .gx-2xl-tall {
+            --bs-gutter-x: 24px !important;
+          }
+
+          .g-2xl-tall,
+          .gy-2xl-tall {
+            --bs-gutter-y: 24px !important;
+          }
+
+          .g-2xl-taller,
+          .gx-2xl-taller {
+            --bs-gutter-x: 32px !important;
+          }
+
+          .g-2xl-taller,
+          .gy-2xl-taller {
+            --bs-gutter-y: 32px !important;
+          }
+
+          .g-2xl-tallest,
+          .gx-2xl-tallest {
+            --bs-gutter-x: 40px !important;
+          }
+
+          .g-2xl-tallest,
+          .gy-2xl-tallest {
+            --bs-gutter-y: 40px !important;
+          }
+
+          .g-2xl-spacious,
+          .gx-2xl-spacious {
+            --bs-gutter-x: 48px !important;
+          }
+
+          .g-2xl-spacious,
+          .gy-2xl-spacious {
+            --bs-gutter-y: 48px !important;
+          }
+
+          .g-2xl-huge,
+          .gx-2xl-huge {
+            --bs-gutter-x: 56px !important;
+          }
+
+          .g-2xl-huge,
+          .gy-2xl-huge {
+            --bs-gutter-y: 56px !important;
+          }
+
+          .g-2xl-jumbo,
+          .gx-2xl-jumbo {
+            --bs-gutter-x: 64px !important;
+          }
+
+          .g-2xl-jumbo,
+          .gy-2xl-jumbo {
+            --bs-gutter-y: 64px !important;
+          }
+        }
+
+        @media (min-width: 1880px) {
+          .col-3xl {
+            flex: 1 0 0%;
+          }
+
+          .row-cols-3xl-auto > * {
+            flex: 0 0 auto;
+            width: auto;
+          }
+
+          .row-cols-3xl-1 > * {
+            flex: 0 0 auto;
+            width: 100%;
+          }
+
+          .row-cols-3xl-2 > * {
+            flex: 0 0 auto;
+            width: 50%;
+          }
+
+          .row-cols-3xl-3 > * {
+            flex: 0 0 auto;
+            width: 33.33333333%;
+          }
+
+          .row-cols-3xl-4 > * {
+            flex: 0 0 auto;
+            width: 25%;
+          }
+
+          .row-cols-3xl-5 > * {
+            flex: 0 0 auto;
+            width: 20%;
+          }
+
+          .row-cols-3xl-6 > * {
+            flex: 0 0 auto;
+            width: 16.66666667%;
+          }
+
+          .col-3xl-auto {
+            flex: 0 0 auto;
+            width: auto;
+          }
+
+          .col-3xl-1 {
+            flex: 0 0 auto;
+            width: 8.33333333%;
+          }
+
+          .col-3xl-2 {
+            flex: 0 0 auto;
+            width: 16.66666667%;
+          }
+
+          .col-3xl-3 {
+            flex: 0 0 auto;
+            width: 25%;
+          }
+
+          .col-3xl-4 {
+            flex: 0 0 auto;
+            width: 33.33333333%;
+          }
+
+          .col-3xl-5 {
+            flex: 0 0 auto;
+            width: 41.66666667%;
+          }
+
+          .col-3xl-6 {
+            flex: 0 0 auto;
+            width: 50%;
+          }
+
+          .col-3xl-7 {
+            flex: 0 0 auto;
+            width: 58.33333333%;
+          }
+
+          .col-3xl-8 {
+            flex: 0 0 auto;
+            width: 66.66666667%;
+          }
+
+          .col-3xl-9 {
+            flex: 0 0 auto;
+            width: 75%;
+          }
+
+          .col-3xl-10 {
+            flex: 0 0 auto;
+            width: 83.33333333%;
+          }
+
+          .col-3xl-11 {
+            flex: 0 0 auto;
+            width: 91.66666667%;
+          }
+
+          .col-3xl-12 {
+            flex: 0 0 auto;
+            width: 100%;
+          }
+
+          .offset-3xl-0 {
+            margin-left: 0;
+          }
+
+          .offset-3xl-1 {
+            margin-left: 8.33333333%;
+          }
+
+          .offset-3xl-2 {
+            margin-left: 16.66666667%;
+          }
+
+          .offset-3xl-3 {
+            margin-left: 25%;
+          }
+
+          .offset-3xl-4 {
+            margin-left: 33.33333333%;
+          }
+
+          .offset-3xl-5 {
+            margin-left: 41.66666667%;
+          }
+
+          .offset-3xl-6 {
+            margin-left: 50%;
+          }
+
+          .offset-3xl-7 {
+            margin-left: 58.33333333%;
+          }
+
+          .offset-3xl-8 {
+            margin-left: 66.66666667%;
+          }
+
+          .offset-3xl-9 {
+            margin-left: 75%;
+          }
+
+          .offset-3xl-10 {
+            margin-left: 83.33333333%;
+          }
+
+          .offset-3xl-11 {
+            margin-left: 91.66666667%;
+          }
+
+          .g-3xl-none,
+          .gx-3xl-none {
+            --bs-gutter-x: 0 !important;
+          }
+
+          .g-3xl-none,
+          .gy-3xl-none {
+            --bs-gutter-y: 0 !important;
+          }
+
+          .g-3xl-smash,
+          .gx-3xl-smash {
+            --bs-gutter-x: 2px !important;
+          }
+
+          .g-3xl-smash,
+          .gy-3xl-smash {
+            --bs-gutter-y: 2px !important;
+          }
+
+          .g-3xl-shortest,
+          .gx-3xl-shortest {
+            --bs-gutter-x: 4px !important;
+          }
+
+          .g-3xl-shortest,
+          .gy-3xl-shortest {
+            --bs-gutter-y: 4px !important;
+          }
+
+          .g-3xl-shorter,
+          .gx-3xl-shorter {
+            --bs-gutter-x: 8px !important;
+          }
+
+          .g-3xl-shorter,
+          .gy-3xl-shorter {
+            --bs-gutter-y: 8px !important;
+          }
+
+          .g-3xl-short,
+          .gx-3xl-short {
+            --bs-gutter-x: 12px !important;
+          }
+
+          .g-3xl-short,
+          .gy-3xl-short {
+            --bs-gutter-y: 12px !important;
+          }
+
+          .g-3xl-medium,
+          .gx-3xl-medium {
+            --bs-gutter-x: 16px !important;
+          }
+
+          .g-3xl-medium,
+          .gy-3xl-medium {
+            --bs-gutter-y: 16px !important;
+          }
+
+          .g-3xl-tall,
+          .gx-3xl-tall {
+            --bs-gutter-x: 24px !important;
+          }
+
+          .g-3xl-tall,
+          .gy-3xl-tall {
+            --bs-gutter-y: 24px !important;
+          }
+
+          .g-3xl-taller,
+          .gx-3xl-taller {
+            --bs-gutter-x: 32px !important;
+          }
+
+          .g-3xl-taller,
+          .gy-3xl-taller {
+            --bs-gutter-y: 32px !important;
+          }
+
+          .g-3xl-tallest,
+          .gx-3xl-tallest {
+            --bs-gutter-x: 40px !important;
+          }
+
+          .g-3xl-tallest,
+          .gy-3xl-tallest {
+            --bs-gutter-y: 40px !important;
+          }
+
+          .g-3xl-spacious,
+          .gx-3xl-spacious {
+            --bs-gutter-x: 48px !important;
+          }
+
+          .g-3xl-spacious,
+          .gy-3xl-spacious {
+            --bs-gutter-y: 48px !important;
+          }
+
+          .g-3xl-huge,
+          .gx-3xl-huge {
+            --bs-gutter-x: 56px !important;
+          }
+
+          .g-3xl-huge,
+          .gy-3xl-huge {
+            --bs-gutter-y: 56px !important;
+          }
+
+          .g-3xl-jumbo,
+          .gx-3xl-jumbo {
+            --bs-gutter-x: 64px !important;
+          }
+
+          .g-3xl-jumbo,
+          .gy-3xl-jumbo {
+            --bs-gutter-y: 64px !important;
+          }
+        }
+      }
+    }
+  }
+
+  @include it("generates OUDS and Bootstrap grid classes") {
+    $enable-bootstrap-compatibility: true !global;
+    @import "../../functions";
+    @import "../../tokens/raw";
+    @import "../../tokens/semantic";
+    @import "../../tokens/composite";
+    @import "../../tokens/component";
+    @import "../../variables";
+    @import "../../maps";
+    @import "../../mixins";
+
+    @include assert() {
+      @include output() {
+        @import "../../grid";
+      }
+      @include expect() {
+        :root {
+          --bs-breakpoint-2xs: 0;
+          --bs-breakpoint-xs: 390px;
+          --bs-breakpoint-sm: 480px;
+          --bs-breakpoint-md: 736px;
+          --bs-breakpoint-lg: 1024px;
+          --bs-breakpoint-xl: 1320px;
+          --bs-breakpoint-xxl: 1640px;
+          --bs-breakpoint-2xl: 1640px;
+          --bs-breakpoint-3xl: 1880px;
+        }
+
+        .row {
+          --bs-gutter-y: 0;
+          display: flex;
+          flex-wrap: wrap;
+          margin-top: calc(-1 * var(--bs-gutter-y)); // stylelint-disable-line function-disallowed-list
+          margin-right: calc(-0.5 * var(--bs-gutter-x)); // stylelint-disable-line function-disallowed-list, @stylistic/number-leading-zero
+          margin-left: calc(-0.5 * var(--bs-gutter-x)); // stylelint-disable-line function-disallowed-list, @stylistic/number-leading-zero
+          --bs-gutter-x: 8px;
+        }
+
+        @media (min-width: 390px) {
+          .row {
+            --bs-gutter-x: 16px;
+          }
+        }
+
+        @media (min-width: 480px) {
+          .row {
+            --bs-gutter-x: 16px;
+          }
+        }
+
+        @media (min-width: 736px) {
+          .row {
+            --bs-gutter-x: 24px;
+          }
+        }
+
+        @media (min-width: 1024px) {
+          .row {
+            --bs-gutter-x: 24px;
+          }
+        }
+
+        @media (min-width: 1320px) {
+          .row {
+            --bs-gutter-x: 32px;
+          }
+        }
+
+        @media (min-width: 1640px) {
+          .row {
+            --bs-gutter-x: 32px;
+          }
+        }
+
+        @media (min-width: 1880px) {
+          .row {
+            --bs-gutter-x: 40px;
+          }
+        }
+
+        .row > * {
+          flex-shrink: 0;
+          width: 100%;
+          max-width: 100%;
+          padding-right: calc(var(--bs-gutter-x) * 0.5); // stylelint-disable-line function-disallowed-list, @stylistic/number-leading-zero
+          padding-left: calc(var(--bs-gutter-x) * 0.5); // stylelint-disable-line function-disallowed-list, @stylistic/number-leading-zero
+          margin-top: var(--bs-gutter-y);
+        }
+
+        .col {
+          flex: 1 0 0%;
+        }
+
+        .row-cols-auto > * {
+          flex: 0 0 auto;
+          width: auto;
+        }
+
+        .row-cols-1 > * {
+          flex: 0 0 auto;
+          width: 100%;
+        }
+
+        .row-cols-2 > * {
+          flex: 0 0 auto;
+          width: 50%;
+        }
+
+        .row-cols-3 > * {
+          flex: 0 0 auto;
+          width: 33.33333333%;
+        }
+
+        .row-cols-4 > * {
+          flex: 0 0 auto;
+          width: 25%;
+        }
+
+        .row-cols-5 > * {
+          flex: 0 0 auto;
+          width: 20%;
+        }
+
+        .row-cols-6 > * {
+          flex: 0 0 auto;
+          width: 16.66666667%;
+        }
+
+        .col-auto {
+          flex: 0 0 auto;
+          width: auto;
+        }
+
+        .col-1 {
+          flex: 0 0 auto;
+          width: 8.33333333%;
+        }
+
+        .col-2 {
+          flex: 0 0 auto;
+          width: 16.66666667%;
+        }
+
+        .col-3 {
+          flex: 0 0 auto;
+          width: 25%;
+        }
+
+        .col-4 {
+          flex: 0 0 auto;
+          width: 33.33333333%;
+        }
+
+        .col-5 {
+          flex: 0 0 auto;
+          width: 41.66666667%;
+        }
+
+        .col-6 {
+          flex: 0 0 auto;
+          width: 50%;
+        }
+
+        .col-7 {
+          flex: 0 0 auto;
+          width: 58.33333333%;
+        }
+
+        .col-8 {
+          flex: 0 0 auto;
+          width: 66.66666667%;
+        }
+
+        .col-9 {
+          flex: 0 0 auto;
+          width: 75%;
+        }
+
+        .col-10 {
+          flex: 0 0 auto;
+          width: 83.33333333%;
+        }
+
+        .col-11 {
+          flex: 0 0 auto;
+          width: 91.66666667%;
+        }
+
+        .col-12 {
+          flex: 0 0 auto;
+          width: 100%;
+        }
+
+        .offset-1 {
+          margin-left: 8.33333333%;
+        }
+
+        .offset-2 {
+          margin-left: 16.66666667%;
+        }
+
+        .offset-3 {
+          margin-left: 25%;
+        }
+
+        .offset-4 {
+          margin-left: 33.33333333%;
+        }
+
+        .offset-5 {
+          margin-left: 41.66666667%;
+        }
+
+        .offset-6 {
+          margin-left: 50%;
+        }
+
+        .offset-7 {
+          margin-left: 58.33333333%;
+        }
+
+        .offset-8 {
+          margin-left: 66.66666667%;
+        }
+
+        .offset-9 {
+          margin-left: 75%;
+        }
+
+        .offset-10 {
+          margin-left: 83.33333333%;
+        }
+
+        .offset-11 {
+          margin-left: 91.66666667%;
+        }
+
+        .g-none,
+        .gx-none {
+          --bs-gutter-x: 0 !important;
+        }
+
+        .g-none,
+        .gy-none {
+          --bs-gutter-y: 0 !important;
+        }
+
+        .g-smash,
+        .gx-smash {
+          --bs-gutter-x: 2px !important;
+        }
+
+        .g-smash,
+        .gy-smash {
+          --bs-gutter-y: 2px !important;
+        }
+
+        .g-shortest,
+        .gx-shortest {
+          --bs-gutter-x: 4px !important;
+        }
+
+        .g-shortest,
+        .gy-shortest {
+          --bs-gutter-y: 4px !important;
+        }
+
+        .g-shorter,
+        .gx-shorter {
+          --bs-gutter-x: 8px !important;
+        }
+
+        .g-shorter,
+        .gy-shorter {
+          --bs-gutter-y: 8px !important;
+        }
+
+        .g-short,
+        .gx-short {
+          --bs-gutter-x: 12px !important;
+        }
+
+        .g-short,
+        .gy-short {
+          --bs-gutter-y: 12px !important;
+        }
+
+        .g-medium,
+        .gx-medium {
+          --bs-gutter-x: 16px !important;
+        }
+
+        .g-medium,
+        .gy-medium {
+          --bs-gutter-y: 16px !important;
+        }
+
+        .g-tall,
+        .gx-tall {
+          --bs-gutter-x: 24px !important;
+        }
+
+        .g-tall,
+        .gy-tall {
+          --bs-gutter-y: 24px !important;
+        }
+
+        .g-taller,
+        .gx-taller {
+          --bs-gutter-x: 32px !important;
+        }
+
+        .g-taller,
+        .gy-taller {
+          --bs-gutter-y: 32px !important;
+        }
+
+        .g-tallest,
+        .gx-tallest {
+          --bs-gutter-x: 40px !important;
+        }
+
+        .g-tallest,
+        .gy-tallest {
+          --bs-gutter-y: 40px !important;
+        }
+
+        .g-spacious,
+        .gx-spacious {
+          --bs-gutter-x: 48px !important;
+        }
+
+        .g-spacious,
+        .gy-spacious {
+          --bs-gutter-y: 48px !important;
+        }
+
+        .g-huge,
+        .gx-huge {
+          --bs-gutter-x: 56px !important;
+        }
+
+        .g-huge,
+        .gy-huge {
+          --bs-gutter-y: 56px !important;
+        }
+
+        .g-jumbo,
+        .gx-jumbo {
+          --bs-gutter-x: 64px !important;
+        }
+
+        .g-jumbo,
+        .gy-jumbo {
+          --bs-gutter-y: 64px !important;
+        }
+
+        .g-0,
+        .gx-0 {
+          --bs-gutter-x: 0 !important;
+        }
+
+        .g-0,
+        .gy-0 {
+          --bs-gutter-y: 0 !important;
+        }
+
+        .g-1,
+        .gx-1 {
+          --bs-gutter-x: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+        }
+
+        .g-1,
+        .gy-1 {
+          --bs-gutter-y: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+        }
+
+        .g-2,
+        .gx-2 {
+          --bs-gutter-x: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+        }
+
+        .g-2,
+        .gy-2 {
+          --bs-gutter-y: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+        }
+
+        .g-3,
+        .gx-3 {
+          --bs-gutter-x: 1.5rem !important;
+        }
+
+        .g-3,
+        .gy-3 {
+          --bs-gutter-y: 1.5rem !important;
+        }
+
+        .g-4,
+        .gx-4 {
+          --bs-gutter-x: 2.5rem !important;
+        }
+
+        .g-4,
+        .gy-4 {
+          --bs-gutter-y: 2.5rem !important;
+        }
+
+        .g-5,
+        .gx-5 {
+          --bs-gutter-x: 3.5rem !important;
+        }
+
+        .g-5,
+        .gy-5 {
+          --bs-gutter-y: 3.5rem !important;
+        }
+
+        @media (min-width: 390px) {
+          .col-xs {
+            flex: 1 0 0%;
+          }
+
+          .row-cols-xs-auto > * {
+            flex: 0 0 auto;
+            width: auto;
+          }
+
+          .row-cols-xs-1 > * {
+            flex: 0 0 auto;
+            width: 100%;
+          }
+
+          .row-cols-xs-2 > * {
+            flex: 0 0 auto;
+            width: 50%;
+          }
+
+          .row-cols-xs-3 > * {
+            flex: 0 0 auto;
+            width: 33.33333333%;
+          }
+
+          .row-cols-xs-4 > * {
+            flex: 0 0 auto;
+            width: 25%;
+          }
+
+          .row-cols-xs-5 > * {
+            flex: 0 0 auto;
+            width: 20%;
+          }
+
+          .row-cols-xs-6 > * {
+            flex: 0 0 auto;
+            width: 16.66666667%;
+          }
+
+          .col-xs-auto {
+            flex: 0 0 auto;
+            width: auto;
+          }
+
+          .col-xs-1 {
+            flex: 0 0 auto;
+            width: 8.33333333%;
+          }
+
+          .col-xs-2 {
+            flex: 0 0 auto;
+            width: 16.66666667%;
+          }
+
+          .col-xs-3 {
+            flex: 0 0 auto;
+            width: 25%;
+          }
+
+          .col-xs-4 {
+            flex: 0 0 auto;
+            width: 33.33333333%;
+          }
+
+          .col-xs-5 {
+            flex: 0 0 auto;
+            width: 41.66666667%;
+          }
+
+          .col-xs-6 {
+            flex: 0 0 auto;
+            width: 50%;
+          }
+
+          .col-xs-7 {
+            flex: 0 0 auto;
+            width: 58.33333333%;
+          }
+
+          .col-xs-8 {
+            flex: 0 0 auto;
+            width: 66.66666667%;
+          }
+
+          .col-xs-9 {
+            flex: 0 0 auto;
+            width: 75%;
+          }
+
+          .col-xs-10 {
+            flex: 0 0 auto;
+            width: 83.33333333%;
+          }
+
+          .col-xs-11 {
+            flex: 0 0 auto;
+            width: 91.66666667%;
+          }
+
+          .col-xs-12 {
+            flex: 0 0 auto;
+            width: 100%;
+          }
+
+          .offset-xs-0 {
+            margin-left: 0;
+          }
+
+          .offset-xs-1 {
+            margin-left: 8.33333333%;
+          }
+
+          .offset-xs-2 {
+            margin-left: 16.66666667%;
+          }
+
+          .offset-xs-3 {
+            margin-left: 25%;
+          }
+
+          .offset-xs-4 {
+            margin-left: 33.33333333%;
+          }
+
+          .offset-xs-5 {
+            margin-left: 41.66666667%;
+          }
+
+          .offset-xs-6 {
+            margin-left: 50%;
+          }
+
+          .offset-xs-7 {
+            margin-left: 58.33333333%;
+          }
+
+          .offset-xs-8 {
+            margin-left: 66.66666667%;
+          }
+
+          .offset-xs-9 {
+            margin-left: 75%;
+          }
+
+          .offset-xs-10 {
+            margin-left: 83.33333333%;
+          }
+
+          .offset-xs-11 {
+            margin-left: 91.66666667%;
+          }
+
+          .g-xs-none,
+          .gx-xs-none {
+            --bs-gutter-x: 0 !important;
+          }
+
+          .g-xs-none,
+          .gy-xs-none {
+            --bs-gutter-y: 0 !important;
+          }
+
+          .g-xs-smash,
+          .gx-xs-smash {
+            --bs-gutter-x: 2px !important;
+          }
+
+          .g-xs-smash,
+          .gy-xs-smash {
+            --bs-gutter-y: 2px !important;
+          }
+
+          .g-xs-shortest,
+          .gx-xs-shortest {
+            --bs-gutter-x: 4px !important;
+          }
+
+          .g-xs-shortest,
+          .gy-xs-shortest {
+            --bs-gutter-y: 4px !important;
+          }
+
+          .g-xs-shorter,
+          .gx-xs-shorter {
+            --bs-gutter-x: 8px !important;
+          }
+
+          .g-xs-shorter,
+          .gy-xs-shorter {
+            --bs-gutter-y: 8px !important;
+          }
+
+          .g-xs-short,
+          .gx-xs-short {
+            --bs-gutter-x: 12px !important;
+          }
+
+          .g-xs-short,
+          .gy-xs-short {
+            --bs-gutter-y: 12px !important;
+          }
+
+          .g-xs-medium,
+          .gx-xs-medium {
+            --bs-gutter-x: 16px !important;
+          }
+
+          .g-xs-medium,
+          .gy-xs-medium {
+            --bs-gutter-y: 16px !important;
+          }
+
+          .g-xs-tall,
+          .gx-xs-tall {
+            --bs-gutter-x: 24px !important;
+          }
+
+          .g-xs-tall,
+          .gy-xs-tall {
+            --bs-gutter-y: 24px !important;
+          }
+
+          .g-xs-taller,
+          .gx-xs-taller {
+            --bs-gutter-x: 32px !important;
+          }
+
+          .g-xs-taller,
+          .gy-xs-taller {
+            --bs-gutter-y: 32px !important;
+          }
+
+          .g-xs-tallest,
+          .gx-xs-tallest {
+            --bs-gutter-x: 40px !important;
+          }
+
+          .g-xs-tallest,
+          .gy-xs-tallest {
+            --bs-gutter-y: 40px !important;
+          }
+
+          .g-xs-spacious,
+          .gx-xs-spacious {
+            --bs-gutter-x: 48px !important;
+          }
+
+          .g-xs-spacious,
+          .gy-xs-spacious {
+            --bs-gutter-y: 48px !important;
+          }
+
+          .g-xs-huge,
+          .gx-xs-huge {
+            --bs-gutter-x: 56px !important;
+          }
+
+          .g-xs-huge,
+          .gy-xs-huge {
+            --bs-gutter-y: 56px !important;
+          }
+
+          .g-xs-jumbo,
+          .gx-xs-jumbo {
+            --bs-gutter-x: 64px !important;
+          }
+
+          .g-xs-jumbo,
+          .gy-xs-jumbo {
+            --bs-gutter-y: 64px !important;
+          }
+
+          .g-xs-0,
+          .gx-xs-0 {
+            --bs-gutter-x: 0 !important;
+          }
+
+          .g-xs-0,
+          .gy-xs-0 {
+            --bs-gutter-y: 0 !important;
+          }
+
+          .g-xs-1,
+          .gx-xs-1 {
+            --bs-gutter-x: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .g-xs-1,
+          .gy-xs-1 {
+            --bs-gutter-y: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .g-xs-2,
+          .gx-xs-2 {
+            --bs-gutter-x: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .g-xs-2,
+          .gy-xs-2 {
+            --bs-gutter-y: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .g-xs-3,
+          .gx-xs-3 {
+            --bs-gutter-x: 1.5rem !important;
+          }
+
+          .g-xs-3,
+          .gy-xs-3 {
+            --bs-gutter-y: 1.5rem !important;
+          }
+
+          .g-xs-4,
+          .gx-xs-4 {
+            --bs-gutter-x: 2.5rem !important;
+          }
+
+          .g-xs-4,
+          .gy-xs-4 {
+            --bs-gutter-y: 2.5rem !important;
+          }
+
+          .g-xs-5,
+          .gx-xs-5 {
+            --bs-gutter-x: 3.5rem !important;
+          }
+
+          .g-xs-5,
+          .gy-xs-5 {
+            --bs-gutter-y: 3.5rem !important;
+          }
+        }
+
+        @media (min-width: 480px) {
+          .col-sm {
+            flex: 1 0 0%;
+          }
+
+          .row-cols-sm-auto > * {
+            flex: 0 0 auto;
+            width: auto;
+          }
+
+          .row-cols-sm-1 > * {
+            flex: 0 0 auto;
+            width: 100%;
+          }
+
+          .row-cols-sm-2 > * {
+            flex: 0 0 auto;
+            width: 50%;
+          }
+
+          .row-cols-sm-3 > * {
+            flex: 0 0 auto;
+            width: 33.33333333%;
+          }
+
+          .row-cols-sm-4 > * {
+            flex: 0 0 auto;
+            width: 25%;
+          }
+
+          .row-cols-sm-5 > * {
+            flex: 0 0 auto;
+            width: 20%;
+          }
+
+          .row-cols-sm-6 > * {
+            flex: 0 0 auto;
+            width: 16.66666667%;
+          }
+
+          .col-sm-auto {
+            flex: 0 0 auto;
+            width: auto;
+          }
+
+          .col-sm-1 {
+            flex: 0 0 auto;
+            width: 8.33333333%;
+          }
+
+          .col-sm-2 {
+            flex: 0 0 auto;
+            width: 16.66666667%;
+          }
+
+          .col-sm-3 {
+            flex: 0 0 auto;
+            width: 25%;
+          }
+
+          .col-sm-4 {
+            flex: 0 0 auto;
+            width: 33.33333333%;
+          }
+
+          .col-sm-5 {
+            flex: 0 0 auto;
+            width: 41.66666667%;
+          }
+
+          .col-sm-6 {
+            flex: 0 0 auto;
+            width: 50%;
+          }
+
+          .col-sm-7 {
+            flex: 0 0 auto;
+            width: 58.33333333%;
+          }
+
+          .col-sm-8 {
+            flex: 0 0 auto;
+            width: 66.66666667%;
+          }
+
+          .col-sm-9 {
+            flex: 0 0 auto;
+            width: 75%;
+          }
+
+          .col-sm-10 {
+            flex: 0 0 auto;
+            width: 83.33333333%;
+          }
+
+          .col-sm-11 {
+            flex: 0 0 auto;
+            width: 91.66666667%;
+          }
+
+          .col-sm-12 {
+            flex: 0 0 auto;
+            width: 100%;
+          }
+
+          .offset-sm-0 {
+            margin-left: 0;
+          }
+
+          .offset-sm-1 {
+            margin-left: 8.33333333%;
+          }
+
+          .offset-sm-2 {
+            margin-left: 16.66666667%;
+          }
+
+          .offset-sm-3 {
+            margin-left: 25%;
+          }
+
+          .offset-sm-4 {
+            margin-left: 33.33333333%;
+          }
+
+          .offset-sm-5 {
+            margin-left: 41.66666667%;
+          }
+
+          .offset-sm-6 {
+            margin-left: 50%;
+          }
+
+          .offset-sm-7 {
+            margin-left: 58.33333333%;
+          }
+
+          .offset-sm-8 {
+            margin-left: 66.66666667%;
+          }
+
+          .offset-sm-9 {
+            margin-left: 75%;
+          }
+
+          .offset-sm-10 {
+            margin-left: 83.33333333%;
+          }
+
+          .offset-sm-11 {
+            margin-left: 91.66666667%;
+          }
+
+          .g-sm-none,
+          .gx-sm-none {
+            --bs-gutter-x: 0 !important;
+          }
+
+          .g-sm-none,
+          .gy-sm-none {
+            --bs-gutter-y: 0 !important;
+          }
+
+          .g-sm-smash,
+          .gx-sm-smash {
+            --bs-gutter-x: 2px !important;
+          }
+
+          .g-sm-smash,
+          .gy-sm-smash {
+            --bs-gutter-y: 2px !important;
+          }
+
+          .g-sm-shortest,
+          .gx-sm-shortest {
+            --bs-gutter-x: 4px !important;
+          }
+
+          .g-sm-shortest,
+          .gy-sm-shortest {
+            --bs-gutter-y: 4px !important;
+          }
+
+          .g-sm-shorter,
+          .gx-sm-shorter {
+            --bs-gutter-x: 8px !important;
+          }
+
+          .g-sm-shorter,
+          .gy-sm-shorter {
+            --bs-gutter-y: 8px !important;
+          }
+
+          .g-sm-short,
+          .gx-sm-short {
+            --bs-gutter-x: 12px !important;
+          }
+
+          .g-sm-short,
+          .gy-sm-short {
+            --bs-gutter-y: 12px !important;
+          }
+
+          .g-sm-medium,
+          .gx-sm-medium {
+            --bs-gutter-x: 16px !important;
+          }
+
+          .g-sm-medium,
+          .gy-sm-medium {
+            --bs-gutter-y: 16px !important;
+          }
+
+          .g-sm-tall,
+          .gx-sm-tall {
+            --bs-gutter-x: 24px !important;
+          }
+
+          .g-sm-tall,
+          .gy-sm-tall {
+            --bs-gutter-y: 24px !important;
+          }
+
+          .g-sm-taller,
+          .gx-sm-taller {
+            --bs-gutter-x: 32px !important;
+          }
+
+          .g-sm-taller,
+          .gy-sm-taller {
+            --bs-gutter-y: 32px !important;
+          }
+
+          .g-sm-tallest,
+          .gx-sm-tallest {
+            --bs-gutter-x: 40px !important;
+          }
+
+          .g-sm-tallest,
+          .gy-sm-tallest {
+            --bs-gutter-y: 40px !important;
+          }
+
+          .g-sm-spacious,
+          .gx-sm-spacious {
+            --bs-gutter-x: 48px !important;
+          }
+
+          .g-sm-spacious,
+          .gy-sm-spacious {
+            --bs-gutter-y: 48px !important;
+          }
+
+          .g-sm-huge,
+          .gx-sm-huge {
+            --bs-gutter-x: 56px !important;
+          }
+
+          .g-sm-huge,
+          .gy-sm-huge {
+            --bs-gutter-y: 56px !important;
+          }
+
+          .g-sm-jumbo,
+          .gx-sm-jumbo {
+            --bs-gutter-x: 64px !important;
+          }
+
+          .g-sm-jumbo,
+          .gy-sm-jumbo {
+            --bs-gutter-y: 64px !important;
+          }
+
+          .g-sm-0,
+          .gx-sm-0 {
+            --bs-gutter-x: 0 !important;
+          }
+
+          .g-sm-0,
+          .gy-sm-0 {
+            --bs-gutter-y: 0 !important;
+          }
+
+          .g-sm-1,
+          .gx-sm-1 {
+            --bs-gutter-x: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .g-sm-1,
+          .gy-sm-1 {
+            --bs-gutter-y: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .g-sm-2,
+          .gx-sm-2 {
+            --bs-gutter-x: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .g-sm-2,
+          .gy-sm-2 {
+            --bs-gutter-y: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .g-sm-3,
+          .gx-sm-3 {
+            --bs-gutter-x: 1.5rem !important;
+          }
+
+          .g-sm-3,
+          .gy-sm-3 {
+            --bs-gutter-y: 1.5rem !important;
+          }
+
+          .g-sm-4,
+          .gx-sm-4 {
+            --bs-gutter-x: 2.5rem !important;
+          }
+
+          .g-sm-4,
+          .gy-sm-4 {
+            --bs-gutter-y: 2.5rem !important;
+          }
+
+          .g-sm-5,
+          .gx-sm-5 {
+            --bs-gutter-x: 3.5rem !important;
+          }
+
+          .g-sm-5,
+          .gy-sm-5 {
+            --bs-gutter-y: 3.5rem !important;
+          }
+        }
+
+        @media (min-width: 736px) {
+          .col-md {
+            flex: 1 0 0%;
+          }
+
+          .row-cols-md-auto > * {
+            flex: 0 0 auto;
+            width: auto;
+          }
+
+          .row-cols-md-1 > * {
+            flex: 0 0 auto;
+            width: 100%;
+          }
+
+          .row-cols-md-2 > * {
+            flex: 0 0 auto;
+            width: 50%;
+          }
+
+          .row-cols-md-3 > * {
+            flex: 0 0 auto;
+            width: 33.33333333%;
+          }
+
+          .row-cols-md-4 > * {
+            flex: 0 0 auto;
+            width: 25%;
+          }
+
+          .row-cols-md-5 > * {
+            flex: 0 0 auto;
+            width: 20%;
+          }
+
+          .row-cols-md-6 > * {
+            flex: 0 0 auto;
+            width: 16.66666667%;
+          }
+
+          .col-md-auto {
+            flex: 0 0 auto;
+            width: auto;
+          }
+
+          .col-md-1 {
+            flex: 0 0 auto;
+            width: 8.33333333%;
+          }
+
+          .col-md-2 {
+            flex: 0 0 auto;
+            width: 16.66666667%;
+          }
+
+          .col-md-3 {
+            flex: 0 0 auto;
+            width: 25%;
+          }
+
+          .col-md-4 {
+            flex: 0 0 auto;
+            width: 33.33333333%;
+          }
+
+          .col-md-5 {
+            flex: 0 0 auto;
+            width: 41.66666667%;
+          }
+
+          .col-md-6 {
+            flex: 0 0 auto;
+            width: 50%;
+          }
+
+          .col-md-7 {
+            flex: 0 0 auto;
+            width: 58.33333333%;
+          }
+
+          .col-md-8 {
+            flex: 0 0 auto;
+            width: 66.66666667%;
+          }
+
+          .col-md-9 {
+            flex: 0 0 auto;
+            width: 75%;
+          }
+
+          .col-md-10 {
+            flex: 0 0 auto;
+            width: 83.33333333%;
+          }
+
+          .col-md-11 {
+            flex: 0 0 auto;
+            width: 91.66666667%;
+          }
+
+          .col-md-12 {
+            flex: 0 0 auto;
+            width: 100%;
+          }
+
+          .offset-md-0 {
+            margin-left: 0;
+          }
+
+          .offset-md-1 {
+            margin-left: 8.33333333%;
+          }
+
+          .offset-md-2 {
+            margin-left: 16.66666667%;
+          }
+
+          .offset-md-3 {
+            margin-left: 25%;
+          }
+
+          .offset-md-4 {
+            margin-left: 33.33333333%;
+          }
+
+          .offset-md-5 {
+            margin-left: 41.66666667%;
+          }
+
+          .offset-md-6 {
+            margin-left: 50%;
+          }
+
+          .offset-md-7 {
+            margin-left: 58.33333333%;
+          }
+
+          .offset-md-8 {
+            margin-left: 66.66666667%;
+          }
+
+          .offset-md-9 {
+            margin-left: 75%;
+          }
+
+          .offset-md-10 {
+            margin-left: 83.33333333%;
+          }
+
+          .offset-md-11 {
+            margin-left: 91.66666667%;
+          }
+
+          .g-md-none,
+          .gx-md-none {
+            --bs-gutter-x: 0 !important;
+          }
+
+          .g-md-none,
+          .gy-md-none {
+            --bs-gutter-y: 0 !important;
+          }
+
+          .g-md-smash,
+          .gx-md-smash {
+            --bs-gutter-x: 2px !important;
+          }
+
+          .g-md-smash,
+          .gy-md-smash {
+            --bs-gutter-y: 2px !important;
+          }
+
+          .g-md-shortest,
+          .gx-md-shortest {
+            --bs-gutter-x: 4px !important;
+          }
+
+          .g-md-shortest,
+          .gy-md-shortest {
+            --bs-gutter-y: 4px !important;
+          }
+
+          .g-md-shorter,
+          .gx-md-shorter {
+            --bs-gutter-x: 8px !important;
+          }
+
+          .g-md-shorter,
+          .gy-md-shorter {
+            --bs-gutter-y: 8px !important;
+          }
+
+          .g-md-short,
+          .gx-md-short {
+            --bs-gutter-x: 12px !important;
+          }
+
+          .g-md-short,
+          .gy-md-short {
+            --bs-gutter-y: 12px !important;
+          }
+
+          .g-md-medium,
+          .gx-md-medium {
+            --bs-gutter-x: 16px !important;
+          }
+
+          .g-md-medium,
+          .gy-md-medium {
+            --bs-gutter-y: 16px !important;
+          }
+
+          .g-md-tall,
+          .gx-md-tall {
+            --bs-gutter-x: 24px !important;
+          }
+
+          .g-md-tall,
+          .gy-md-tall {
+            --bs-gutter-y: 24px !important;
+          }
+
+          .g-md-taller,
+          .gx-md-taller {
+            --bs-gutter-x: 32px !important;
+          }
+
+          .g-md-taller,
+          .gy-md-taller {
+            --bs-gutter-y: 32px !important;
+          }
+
+          .g-md-tallest,
+          .gx-md-tallest {
+            --bs-gutter-x: 40px !important;
+          }
+
+          .g-md-tallest,
+          .gy-md-tallest {
+            --bs-gutter-y: 40px !important;
+          }
+
+          .g-md-spacious,
+          .gx-md-spacious {
+            --bs-gutter-x: 48px !important;
+          }
+
+          .g-md-spacious,
+          .gy-md-spacious {
+            --bs-gutter-y: 48px !important;
+          }
+
+          .g-md-huge,
+          .gx-md-huge {
+            --bs-gutter-x: 56px !important;
+          }
+
+          .g-md-huge,
+          .gy-md-huge {
+            --bs-gutter-y: 56px !important;
+          }
+
+          .g-md-jumbo,
+          .gx-md-jumbo {
+            --bs-gutter-x: 64px !important;
+          }
+
+          .g-md-jumbo,
+          .gy-md-jumbo {
+            --bs-gutter-y: 64px !important;
+          }
+
+          .g-md-0,
+          .gx-md-0 {
+            --bs-gutter-x: 0 !important;
+          }
+
+          .g-md-0,
+          .gy-md-0 {
+            --bs-gutter-y: 0 !important;
+          }
+
+          .g-md-1,
+          .gx-md-1 {
+            --bs-gutter-x: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .g-md-1,
+          .gy-md-1 {
+            --bs-gutter-y: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .g-md-2,
+          .gx-md-2 {
+            --bs-gutter-x: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .g-md-2,
+          .gy-md-2 {
+            --bs-gutter-y: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .g-md-3,
+          .gx-md-3 {
+            --bs-gutter-x: 1.5rem !important;
+          }
+
+          .g-md-3,
+          .gy-md-3 {
+            --bs-gutter-y: 1.5rem !important;
+          }
+
+          .g-md-4,
+          .gx-md-4 {
+            --bs-gutter-x: 2.5rem !important;
+          }
+
+          .g-md-4,
+          .gy-md-4 {
+            --bs-gutter-y: 2.5rem !important;
+          }
+
+          .g-md-5,
+          .gx-md-5 {
+            --bs-gutter-x: 3.5rem !important;
+          }
+
+          .g-md-5,
+          .gy-md-5 {
+            --bs-gutter-y: 3.5rem !important;
+          }
+        }
+
+        @media (min-width: 1024px) {
+          .col-lg {
+            flex: 1 0 0%;
+          }
+
+          .row-cols-lg-auto > * {
+            flex: 0 0 auto;
+            width: auto;
+          }
+
+          .row-cols-lg-1 > * {
+            flex: 0 0 auto;
+            width: 100%;
+          }
+
+          .row-cols-lg-2 > * {
+            flex: 0 0 auto;
+            width: 50%;
+          }
+
+          .row-cols-lg-3 > * {
+            flex: 0 0 auto;
+            width: 33.33333333%;
+          }
+
+          .row-cols-lg-4 > * {
+            flex: 0 0 auto;
+            width: 25%;
+          }
+
+          .row-cols-lg-5 > * {
+            flex: 0 0 auto;
+            width: 20%;
+          }
+
+          .row-cols-lg-6 > * {
+            flex: 0 0 auto;
+            width: 16.66666667%;
+          }
+
+          .col-lg-auto {
+            flex: 0 0 auto;
+            width: auto;
+          }
+
+          .col-lg-1 {
+            flex: 0 0 auto;
+            width: 8.33333333%;
+          }
+
+          .col-lg-2 {
+            flex: 0 0 auto;
+            width: 16.66666667%;
+          }
+
+          .col-lg-3 {
+            flex: 0 0 auto;
+            width: 25%;
+          }
+
+          .col-lg-4 {
+            flex: 0 0 auto;
+            width: 33.33333333%;
+          }
+
+          .col-lg-5 {
+            flex: 0 0 auto;
+            width: 41.66666667%;
+          }
+
+          .col-lg-6 {
+            flex: 0 0 auto;
+            width: 50%;
+          }
+
+          .col-lg-7 {
+            flex: 0 0 auto;
+            width: 58.33333333%;
+          }
+
+          .col-lg-8 {
+            flex: 0 0 auto;
+            width: 66.66666667%;
+          }
+
+          .col-lg-9 {
+            flex: 0 0 auto;
+            width: 75%;
+          }
+
+          .col-lg-10 {
+            flex: 0 0 auto;
+            width: 83.33333333%;
+          }
+
+          .col-lg-11 {
+            flex: 0 0 auto;
+            width: 91.66666667%;
+          }
+
+          .col-lg-12 {
+            flex: 0 0 auto;
+            width: 100%;
+          }
+
+          .offset-lg-0 {
+            margin-left: 0;
+          }
+
+          .offset-lg-1 {
+            margin-left: 8.33333333%;
+          }
+
+          .offset-lg-2 {
+            margin-left: 16.66666667%;
+          }
+
+          .offset-lg-3 {
+            margin-left: 25%;
+          }
+
+          .offset-lg-4 {
+            margin-left: 33.33333333%;
+          }
+
+          .offset-lg-5 {
+            margin-left: 41.66666667%;
+          }
+
+          .offset-lg-6 {
+            margin-left: 50%;
+          }
+
+          .offset-lg-7 {
+            margin-left: 58.33333333%;
+          }
+
+          .offset-lg-8 {
+            margin-left: 66.66666667%;
+          }
+
+          .offset-lg-9 {
+            margin-left: 75%;
+          }
+
+          .offset-lg-10 {
+            margin-left: 83.33333333%;
+          }
+
+          .offset-lg-11 {
+            margin-left: 91.66666667%;
+          }
+
+          .g-lg-none,
+          .gx-lg-none {
+            --bs-gutter-x: 0 !important;
+          }
+
+          .g-lg-none,
+          .gy-lg-none {
+            --bs-gutter-y: 0 !important;
+          }
+
+          .g-lg-smash,
+          .gx-lg-smash {
+            --bs-gutter-x: 2px !important;
+          }
+
+          .g-lg-smash,
+          .gy-lg-smash {
+            --bs-gutter-y: 2px !important;
+          }
+
+          .g-lg-shortest,
+          .gx-lg-shortest {
+            --bs-gutter-x: 4px !important;
+          }
+
+          .g-lg-shortest,
+          .gy-lg-shortest {
+            --bs-gutter-y: 4px !important;
+          }
+
+          .g-lg-shorter,
+          .gx-lg-shorter {
+            --bs-gutter-x: 8px !important;
+          }
+
+          .g-lg-shorter,
+          .gy-lg-shorter {
+            --bs-gutter-y: 8px !important;
+          }
+
+          .g-lg-short,
+          .gx-lg-short {
+            --bs-gutter-x: 12px !important;
+          }
+
+          .g-lg-short,
+          .gy-lg-short {
+            --bs-gutter-y: 12px !important;
+          }
+
+          .g-lg-medium,
+          .gx-lg-medium {
+            --bs-gutter-x: 16px !important;
+          }
+
+          .g-lg-medium,
+          .gy-lg-medium {
+            --bs-gutter-y: 16px !important;
+          }
+
+          .g-lg-tall,
+          .gx-lg-tall {
+            --bs-gutter-x: 24px !important;
+          }
+
+          .g-lg-tall,
+          .gy-lg-tall {
+            --bs-gutter-y: 24px !important;
+          }
+
+          .g-lg-taller,
+          .gx-lg-taller {
+            --bs-gutter-x: 32px !important;
+          }
+
+          .g-lg-taller,
+          .gy-lg-taller {
+            --bs-gutter-y: 32px !important;
+          }
+
+          .g-lg-tallest,
+          .gx-lg-tallest {
+            --bs-gutter-x: 40px !important;
+          }
+
+          .g-lg-tallest,
+          .gy-lg-tallest {
+            --bs-gutter-y: 40px !important;
+          }
+
+          .g-lg-spacious,
+          .gx-lg-spacious {
+            --bs-gutter-x: 48px !important;
+          }
+
+          .g-lg-spacious,
+          .gy-lg-spacious {
+            --bs-gutter-y: 48px !important;
+          }
+
+          .g-lg-huge,
+          .gx-lg-huge {
+            --bs-gutter-x: 56px !important;
+          }
+
+          .g-lg-huge,
+          .gy-lg-huge {
+            --bs-gutter-y: 56px !important;
+          }
+
+          .g-lg-jumbo,
+          .gx-lg-jumbo {
+            --bs-gutter-x: 64px !important;
+          }
+
+          .g-lg-jumbo,
+          .gy-lg-jumbo {
+            --bs-gutter-y: 64px !important;
+          }
+
+          .g-lg-0,
+          .gx-lg-0 {
+            --bs-gutter-x: 0 !important;
+          }
+
+          .g-lg-0,
+          .gy-lg-0 {
+            --bs-gutter-y: 0 !important;
+          }
+
+          .g-lg-1,
+          .gx-lg-1 {
+            --bs-gutter-x: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .g-lg-1,
+          .gy-lg-1 {
+            --bs-gutter-y: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .g-lg-2,
+          .gx-lg-2 {
+            --bs-gutter-x: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .g-lg-2,
+          .gy-lg-2 {
+            --bs-gutter-y: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .g-lg-3,
+          .gx-lg-3 {
+            --bs-gutter-x: 1.5rem !important;
+          }
+
+          .g-lg-3,
+          .gy-lg-3 {
+            --bs-gutter-y: 1.5rem !important;
+          }
+
+          .g-lg-4,
+          .gx-lg-4 {
+            --bs-gutter-x: 2.5rem !important;
+          }
+
+          .g-lg-4,
+          .gy-lg-4 {
+            --bs-gutter-y: 2.5rem !important;
+          }
+
+          .g-lg-5,
+          .gx-lg-5 {
+            --bs-gutter-x: 3.5rem !important;
+          }
+
+          .g-lg-5,
+          .gy-lg-5 {
+            --bs-gutter-y: 3.5rem !important;
+          }
+        }
+
+        @media (min-width: 1320px) {
+          .col-xl {
+            flex: 1 0 0%;
+          }
+
+          .row-cols-xl-auto > * {
+            flex: 0 0 auto;
+            width: auto;
+          }
+
+          .row-cols-xl-1 > * {
+            flex: 0 0 auto;
+            width: 100%;
+          }
+
+          .row-cols-xl-2 > * {
+            flex: 0 0 auto;
+            width: 50%;
+          }
+
+          .row-cols-xl-3 > * {
+            flex: 0 0 auto;
+            width: 33.33333333%;
+          }
+
+          .row-cols-xl-4 > * {
+            flex: 0 0 auto;
+            width: 25%;
+          }
+
+          .row-cols-xl-5 > * {
+            flex: 0 0 auto;
+            width: 20%;
+          }
+
+          .row-cols-xl-6 > * {
+            flex: 0 0 auto;
+            width: 16.66666667%;
+          }
+
+          .col-xl-auto {
+            flex: 0 0 auto;
+            width: auto;
+          }
+
+          .col-xl-1 {
+            flex: 0 0 auto;
+            width: 8.33333333%;
+          }
+
+          .col-xl-2 {
+            flex: 0 0 auto;
+            width: 16.66666667%;
+          }
+
+          .col-xl-3 {
+            flex: 0 0 auto;
+            width: 25%;
+          }
+
+          .col-xl-4 {
+            flex: 0 0 auto;
+            width: 33.33333333%;
+          }
+
+          .col-xl-5 {
+            flex: 0 0 auto;
+            width: 41.66666667%;
+          }
+
+          .col-xl-6 {
+            flex: 0 0 auto;
+            width: 50%;
+          }
+
+          .col-xl-7 {
+            flex: 0 0 auto;
+            width: 58.33333333%;
+          }
+
+          .col-xl-8 {
+            flex: 0 0 auto;
+            width: 66.66666667%;
+          }
+
+          .col-xl-9 {
+            flex: 0 0 auto;
+            width: 75%;
+          }
+
+          .col-xl-10 {
+            flex: 0 0 auto;
+            width: 83.33333333%;
+          }
+
+          .col-xl-11 {
+            flex: 0 0 auto;
+            width: 91.66666667%;
+          }
+
+          .col-xl-12 {
+            flex: 0 0 auto;
+            width: 100%;
+          }
+
+          .offset-xl-0 {
+            margin-left: 0;
+          }
+
+          .offset-xl-1 {
+            margin-left: 8.33333333%;
+          }
+
+          .offset-xl-2 {
+            margin-left: 16.66666667%;
+          }
+
+          .offset-xl-3 {
+            margin-left: 25%;
+          }
+
+          .offset-xl-4 {
+            margin-left: 33.33333333%;
+          }
+
+          .offset-xl-5 {
+            margin-left: 41.66666667%;
+          }
+
+          .offset-xl-6 {
+            margin-left: 50%;
+          }
+
+          .offset-xl-7 {
+            margin-left: 58.33333333%;
+          }
+
+          .offset-xl-8 {
+            margin-left: 66.66666667%;
+          }
+
+          .offset-xl-9 {
+            margin-left: 75%;
+          }
+
+          .offset-xl-10 {
+            margin-left: 83.33333333%;
+          }
+
+          .offset-xl-11 {
+            margin-left: 91.66666667%;
+          }
+
+          .g-xl-none,
+          .gx-xl-none {
+            --bs-gutter-x: 0 !important;
+          }
+
+          .g-xl-none,
+          .gy-xl-none {
+            --bs-gutter-y: 0 !important;
+          }
+
+          .g-xl-smash,
+          .gx-xl-smash {
+            --bs-gutter-x: 2px !important;
+          }
+
+          .g-xl-smash,
+          .gy-xl-smash {
+            --bs-gutter-y: 2px !important;
+          }
+
+          .g-xl-shortest,
+          .gx-xl-shortest {
+            --bs-gutter-x: 4px !important;
+          }
+
+          .g-xl-shortest,
+          .gy-xl-shortest {
+            --bs-gutter-y: 4px !important;
+          }
+
+          .g-xl-shorter,
+          .gx-xl-shorter {
+            --bs-gutter-x: 8px !important;
+          }
+
+          .g-xl-shorter,
+          .gy-xl-shorter {
+            --bs-gutter-y: 8px !important;
+          }
+
+          .g-xl-short,
+          .gx-xl-short {
+            --bs-gutter-x: 12px !important;
+          }
+
+          .g-xl-short,
+          .gy-xl-short {
+            --bs-gutter-y: 12px !important;
+          }
+
+          .g-xl-medium,
+          .gx-xl-medium {
+            --bs-gutter-x: 16px !important;
+          }
+
+          .g-xl-medium,
+          .gy-xl-medium {
+            --bs-gutter-y: 16px !important;
+          }
+
+          .g-xl-tall,
+          .gx-xl-tall {
+            --bs-gutter-x: 24px !important;
+          }
+
+          .g-xl-tall,
+          .gy-xl-tall {
+            --bs-gutter-y: 24px !important;
+          }
+
+          .g-xl-taller,
+          .gx-xl-taller {
+            --bs-gutter-x: 32px !important;
+          }
+
+          .g-xl-taller,
+          .gy-xl-taller {
+            --bs-gutter-y: 32px !important;
+          }
+
+          .g-xl-tallest,
+          .gx-xl-tallest {
+            --bs-gutter-x: 40px !important;
+          }
+
+          .g-xl-tallest,
+          .gy-xl-tallest {
+            --bs-gutter-y: 40px !important;
+          }
+
+          .g-xl-spacious,
+          .gx-xl-spacious {
+            --bs-gutter-x: 48px !important;
+          }
+
+          .g-xl-spacious,
+          .gy-xl-spacious {
+            --bs-gutter-y: 48px !important;
+          }
+
+          .g-xl-huge,
+          .gx-xl-huge {
+            --bs-gutter-x: 56px !important;
+          }
+
+          .g-xl-huge,
+          .gy-xl-huge {
+            --bs-gutter-y: 56px !important;
+          }
+
+          .g-xl-jumbo,
+          .gx-xl-jumbo {
+            --bs-gutter-x: 64px !important;
+          }
+
+          .g-xl-jumbo,
+          .gy-xl-jumbo {
+            --bs-gutter-y: 64px !important;
+          }
+
+          .g-xl-0,
+          .gx-xl-0 {
+            --bs-gutter-x: 0 !important;
+          }
+
+          .g-xl-0,
+          .gy-xl-0 {
+            --bs-gutter-y: 0 !important;
+          }
+
+          .g-xl-1,
+          .gx-xl-1 {
+            --bs-gutter-x: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .g-xl-1,
+          .gy-xl-1 {
+            --bs-gutter-y: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .g-xl-2,
+          .gx-xl-2 {
+            --bs-gutter-x: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .g-xl-2,
+          .gy-xl-2 {
+            --bs-gutter-y: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .g-xl-3,
+          .gx-xl-3 {
+            --bs-gutter-x: 1.5rem !important;
+          }
+
+          .g-xl-3,
+          .gy-xl-3 {
+            --bs-gutter-y: 1.5rem !important;
+          }
+
+          .g-xl-4,
+          .gx-xl-4 {
+            --bs-gutter-x: 2.5rem !important;
+          }
+
+          .g-xl-4,
+          .gy-xl-4 {
+            --bs-gutter-y: 2.5rem !important;
+          }
+
+          .g-xl-5,
+          .gx-xl-5 {
+            --bs-gutter-x: 3.5rem !important;
+          }
+
+          .g-xl-5,
+          .gy-xl-5 {
+            --bs-gutter-y: 3.5rem !important;
+          }
+        }
+
+        @media (min-width: 1640px) {
+          .col-xxl {
+            flex: 1 0 0%;
+          }
+
+          .row-cols-xxl-auto > * {
+            flex: 0 0 auto;
+            width: auto;
+          }
+
+          .row-cols-xxl-1 > * {
+            flex: 0 0 auto;
+            width: 100%;
+          }
+
+          .row-cols-xxl-2 > * {
+            flex: 0 0 auto;
+            width: 50%;
+          }
+
+          .row-cols-xxl-3 > * {
+            flex: 0 0 auto;
+            width: 33.33333333%;
+          }
+
+          .row-cols-xxl-4 > * {
+            flex: 0 0 auto;
+            width: 25%;
+          }
+
+          .row-cols-xxl-5 > * {
+            flex: 0 0 auto;
+            width: 20%;
+          }
+
+          .row-cols-xxl-6 > * {
+            flex: 0 0 auto;
+            width: 16.66666667%;
+          }
+
+          .col-xxl-auto {
+            flex: 0 0 auto;
+            width: auto;
+          }
+
+          .col-xxl-1 {
+            flex: 0 0 auto;
+            width: 8.33333333%;
+          }
+
+          .col-xxl-2 {
+            flex: 0 0 auto;
+            width: 16.66666667%;
+          }
+
+          .col-xxl-3 {
+            flex: 0 0 auto;
+            width: 25%;
+          }
+
+          .col-xxl-4 {
+            flex: 0 0 auto;
+            width: 33.33333333%;
+          }
+
+          .col-xxl-5 {
+            flex: 0 0 auto;
+            width: 41.66666667%;
+          }
+
+          .col-xxl-6 {
+            flex: 0 0 auto;
+            width: 50%;
+          }
+
+          .col-xxl-7 {
+            flex: 0 0 auto;
+            width: 58.33333333%;
+          }
+
+          .col-xxl-8 {
+            flex: 0 0 auto;
+            width: 66.66666667%;
+          }
+
+          .col-xxl-9 {
+            flex: 0 0 auto;
+            width: 75%;
+          }
+
+          .col-xxl-10 {
+            flex: 0 0 auto;
+            width: 83.33333333%;
+          }
+
+          .col-xxl-11 {
+            flex: 0 0 auto;
+            width: 91.66666667%;
+          }
+
+          .col-xxl-12 {
+            flex: 0 0 auto;
+            width: 100%;
+          }
+
+          .offset-xxl-0 {
+            margin-left: 0;
+          }
+
+          .offset-xxl-1 {
+            margin-left: 8.33333333%;
+          }
+
+          .offset-xxl-2 {
+            margin-left: 16.66666667%;
+          }
+
+          .offset-xxl-3 {
+            margin-left: 25%;
+          }
+
+          .offset-xxl-4 {
+            margin-left: 33.33333333%;
+          }
+
+          .offset-xxl-5 {
+            margin-left: 41.66666667%;
+          }
+
+          .offset-xxl-6 {
+            margin-left: 50%;
+          }
+
+          .offset-xxl-7 {
+            margin-left: 58.33333333%;
+          }
+
+          .offset-xxl-8 {
+            margin-left: 66.66666667%;
+          }
+
+          .offset-xxl-9 {
+            margin-left: 75%;
+          }
+
+          .offset-xxl-10 {
+            margin-left: 83.33333333%;
+          }
+
+          .offset-xxl-11 {
+            margin-left: 91.66666667%;
+          }
+
+          .g-xxl-none,
+          .gx-xxl-none {
+            --bs-gutter-x: 0 !important;
+          }
+
+          .g-xxl-none,
+          .gy-xxl-none {
+            --bs-gutter-y: 0 !important;
+          }
+
+          .g-xxl-smash,
+          .gx-xxl-smash {
+            --bs-gutter-x: 2px !important;
+          }
+
+          .g-xxl-smash,
+          .gy-xxl-smash {
+            --bs-gutter-y: 2px !important;
+          }
+
+          .g-xxl-shortest,
+          .gx-xxl-shortest {
+            --bs-gutter-x: 4px !important;
+          }
+
+          .g-xxl-shortest,
+          .gy-xxl-shortest {
+            --bs-gutter-y: 4px !important;
+          }
+
+          .g-xxl-shorter,
+          .gx-xxl-shorter {
+            --bs-gutter-x: 8px !important;
+          }
+
+          .g-xxl-shorter,
+          .gy-xxl-shorter {
+            --bs-gutter-y: 8px !important;
+          }
+
+          .g-xxl-short,
+          .gx-xxl-short {
+            --bs-gutter-x: 12px !important;
+          }
+
+          .g-xxl-short,
+          .gy-xxl-short {
+            --bs-gutter-y: 12px !important;
+          }
+
+          .g-xxl-medium,
+          .gx-xxl-medium {
+            --bs-gutter-x: 16px !important;
+          }
+
+          .g-xxl-medium,
+          .gy-xxl-medium {
+            --bs-gutter-y: 16px !important;
+          }
+
+          .g-xxl-tall,
+          .gx-xxl-tall {
+            --bs-gutter-x: 24px !important;
+          }
+
+          .g-xxl-tall,
+          .gy-xxl-tall {
+            --bs-gutter-y: 24px !important;
+          }
+
+          .g-xxl-taller,
+          .gx-xxl-taller {
+            --bs-gutter-x: 32px !important;
+          }
+
+          .g-xxl-taller,
+          .gy-xxl-taller {
+            --bs-gutter-y: 32px !important;
+          }
+
+          .g-xxl-tallest,
+          .gx-xxl-tallest {
+            --bs-gutter-x: 40px !important;
+          }
+
+          .g-xxl-tallest,
+          .gy-xxl-tallest {
+            --bs-gutter-y: 40px !important;
+          }
+
+          .g-xxl-spacious,
+          .gx-xxl-spacious {
+            --bs-gutter-x: 48px !important;
+          }
+
+          .g-xxl-spacious,
+          .gy-xxl-spacious {
+            --bs-gutter-y: 48px !important;
+          }
+
+          .g-xxl-huge,
+          .gx-xxl-huge {
+            --bs-gutter-x: 56px !important;
+          }
+
+          .g-xxl-huge,
+          .gy-xxl-huge {
+            --bs-gutter-y: 56px !important;
+          }
+
+          .g-xxl-jumbo,
+          .gx-xxl-jumbo {
+            --bs-gutter-x: 64px !important;
+          }
+
+          .g-xxl-jumbo,
+          .gy-xxl-jumbo {
+            --bs-gutter-y: 64px !important;
+          }
+
+          .g-xxl-0,
+          .gx-xxl-0 {
+            --bs-gutter-x: 0 !important;
+          }
+
+          .g-xxl-0,
+          .gy-xxl-0 {
+            --bs-gutter-y: 0 !important;
+          }
+
+          .g-xxl-1,
+          .gx-xxl-1 {
+            --bs-gutter-x: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .g-xxl-1,
+          .gy-xxl-1 {
+            --bs-gutter-y: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .g-xxl-2,
+          .gx-xxl-2 {
+            --bs-gutter-x: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .g-xxl-2,
+          .gy-xxl-2 {
+            --bs-gutter-y: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .g-xxl-3,
+          .gx-xxl-3 {
+            --bs-gutter-x: 1.5rem !important;
+          }
+
+          .g-xxl-3,
+          .gy-xxl-3 {
+            --bs-gutter-y: 1.5rem !important;
+          }
+
+          .g-xxl-4,
+          .gx-xxl-4 {
+            --bs-gutter-x: 2.5rem !important;
+          }
+
+          .g-xxl-4,
+          .gy-xxl-4 {
+            --bs-gutter-y: 2.5rem !important;
+          }
+
+          .g-xxl-5,
+          .gx-xxl-5 {
+            --bs-gutter-x: 3.5rem !important;
+          }
+
+          .g-xxl-5,
+          .gy-xxl-5 {
+            --bs-gutter-y: 3.5rem !important;
+          }
+        }
+
+        @media (min-width: 1640px) {
+          .col-2xl {
+            flex: 1 0 0%;
+          }
+
+          .row-cols-2xl-auto > * {
+            flex: 0 0 auto;
+            width: auto;
+          }
+
+          .row-cols-2xl-1 > * {
+            flex: 0 0 auto;
+            width: 100%;
+          }
+
+          .row-cols-2xl-2 > * {
+            flex: 0 0 auto;
+            width: 50%;
+          }
+
+          .row-cols-2xl-3 > * {
+            flex: 0 0 auto;
+            width: 33.33333333%;
+          }
+
+          .row-cols-2xl-4 > * {
+            flex: 0 0 auto;
+            width: 25%;
+          }
+
+          .row-cols-2xl-5 > * {
+            flex: 0 0 auto;
+            width: 20%;
+          }
+
+          .row-cols-2xl-6 > * {
+            flex: 0 0 auto;
+            width: 16.66666667%;
+          }
+
+          .col-2xl-auto {
+            flex: 0 0 auto;
+            width: auto;
+          }
+
+          .col-2xl-1 {
+            flex: 0 0 auto;
+            width: 8.33333333%;
+          }
+
+          .col-2xl-2 {
+            flex: 0 0 auto;
+            width: 16.66666667%;
+          }
+
+          .col-2xl-3 {
+            flex: 0 0 auto;
+            width: 25%;
+          }
+
+          .col-2xl-4 {
+            flex: 0 0 auto;
+            width: 33.33333333%;
+          }
+
+          .col-2xl-5 {
+            flex: 0 0 auto;
+            width: 41.66666667%;
+          }
+
+          .col-2xl-6 {
+            flex: 0 0 auto;
+            width: 50%;
+          }
+
+          .col-2xl-7 {
+            flex: 0 0 auto;
+            width: 58.33333333%;
+          }
+
+          .col-2xl-8 {
+            flex: 0 0 auto;
+            width: 66.66666667%;
+          }
+
+          .col-2xl-9 {
+            flex: 0 0 auto;
+            width: 75%;
+          }
+
+          .col-2xl-10 {
+            flex: 0 0 auto;
+            width: 83.33333333%;
+          }
+
+          .col-2xl-11 {
+            flex: 0 0 auto;
+            width: 91.66666667%;
+          }
+
+          .col-2xl-12 {
+            flex: 0 0 auto;
+            width: 100%;
+          }
+
+          .offset-2xl-0 {
+            margin-left: 0;
+          }
+
+          .offset-2xl-1 {
+            margin-left: 8.33333333%;
+          }
+
+          .offset-2xl-2 {
+            margin-left: 16.66666667%;
+          }
+
+          .offset-2xl-3 {
+            margin-left: 25%;
+          }
+
+          .offset-2xl-4 {
+            margin-left: 33.33333333%;
+          }
+
+          .offset-2xl-5 {
+            margin-left: 41.66666667%;
+          }
+
+          .offset-2xl-6 {
+            margin-left: 50%;
+          }
+
+          .offset-2xl-7 {
+            margin-left: 58.33333333%;
+          }
+
+          .offset-2xl-8 {
+            margin-left: 66.66666667%;
+          }
+
+          .offset-2xl-9 {
+            margin-left: 75%;
+          }
+
+          .offset-2xl-10 {
+            margin-left: 83.33333333%;
+          }
+
+          .offset-2xl-11 {
+            margin-left: 91.66666667%;
+          }
+
+          .g-2xl-none,
+          .gx-2xl-none {
+            --bs-gutter-x: 0 !important;
+          }
+
+          .g-2xl-none,
+          .gy-2xl-none {
+            --bs-gutter-y: 0 !important;
+          }
+
+          .g-2xl-smash,
+          .gx-2xl-smash {
+            --bs-gutter-x: 2px !important;
+          }
+
+          .g-2xl-smash,
+          .gy-2xl-smash {
+            --bs-gutter-y: 2px !important;
+          }
+
+          .g-2xl-shortest,
+          .gx-2xl-shortest {
+            --bs-gutter-x: 4px !important;
+          }
+
+          .g-2xl-shortest,
+          .gy-2xl-shortest {
+            --bs-gutter-y: 4px !important;
+          }
+
+          .g-2xl-shorter,
+          .gx-2xl-shorter {
+            --bs-gutter-x: 8px !important;
+          }
+
+          .g-2xl-shorter,
+          .gy-2xl-shorter {
+            --bs-gutter-y: 8px !important;
+          }
+
+          .g-2xl-short,
+          .gx-2xl-short {
+            --bs-gutter-x: 12px !important;
+          }
+
+          .g-2xl-short,
+          .gy-2xl-short {
+            --bs-gutter-y: 12px !important;
+          }
+
+          .g-2xl-medium,
+          .gx-2xl-medium {
+            --bs-gutter-x: 16px !important;
+          }
+
+          .g-2xl-medium,
+          .gy-2xl-medium {
+            --bs-gutter-y: 16px !important;
+          }
+
+          .g-2xl-tall,
+          .gx-2xl-tall {
+            --bs-gutter-x: 24px !important;
+          }
+
+          .g-2xl-tall,
+          .gy-2xl-tall {
+            --bs-gutter-y: 24px !important;
+          }
+
+          .g-2xl-taller,
+          .gx-2xl-taller {
+            --bs-gutter-x: 32px !important;
+          }
+
+          .g-2xl-taller,
+          .gy-2xl-taller {
+            --bs-gutter-y: 32px !important;
+          }
+
+          .g-2xl-tallest,
+          .gx-2xl-tallest {
+            --bs-gutter-x: 40px !important;
+          }
+
+          .g-2xl-tallest,
+          .gy-2xl-tallest {
+            --bs-gutter-y: 40px !important;
+          }
+
+          .g-2xl-spacious,
+          .gx-2xl-spacious {
+            --bs-gutter-x: 48px !important;
+          }
+
+          .g-2xl-spacious,
+          .gy-2xl-spacious {
+            --bs-gutter-y: 48px !important;
+          }
+
+          .g-2xl-huge,
+          .gx-2xl-huge {
+            --bs-gutter-x: 56px !important;
+          }
+
+          .g-2xl-huge,
+          .gy-2xl-huge {
+            --bs-gutter-y: 56px !important;
+          }
+
+          .g-2xl-jumbo,
+          .gx-2xl-jumbo {
+            --bs-gutter-x: 64px !important;
+          }
+
+          .g-2xl-jumbo,
+          .gy-2xl-jumbo {
+            --bs-gutter-y: 64px !important;
+          }
+
+          .g-2xl-0,
+          .gx-2xl-0 {
+            --bs-gutter-x: 0 !important;
+          }
+
+          .g-2xl-0,
+          .gy-2xl-0 {
+            --bs-gutter-y: 0 !important;
+          }
+
+          .g-2xl-1,
+          .gx-2xl-1 {
+            --bs-gutter-x: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .g-2xl-1,
+          .gy-2xl-1 {
+            --bs-gutter-y: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .g-2xl-2,
+          .gx-2xl-2 {
+            --bs-gutter-x: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .g-2xl-2,
+          .gy-2xl-2 {
+            --bs-gutter-y: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .g-2xl-3,
+          .gx-2xl-3 {
+            --bs-gutter-x: 1.5rem !important;
+          }
+
+          .g-2xl-3,
+          .gy-2xl-3 {
+            --bs-gutter-y: 1.5rem !important;
+          }
+
+          .g-2xl-4,
+          .gx-2xl-4 {
+            --bs-gutter-x: 2.5rem !important;
+          }
+
+          .g-2xl-4,
+          .gy-2xl-4 {
+            --bs-gutter-y: 2.5rem !important;
+          }
+
+          .g-2xl-5,
+          .gx-2xl-5 {
+            --bs-gutter-x: 3.5rem !important;
+          }
+
+          .g-2xl-5,
+          .gy-2xl-5 {
+            --bs-gutter-y: 3.5rem !important;
+          }
+        }
+
+        @media (min-width: 1880px) {
+          .col-3xl {
+            flex: 1 0 0%;
+          }
+
+          .row-cols-3xl-auto > * {
+            flex: 0 0 auto;
+            width: auto;
+          }
+
+          .row-cols-3xl-1 > * {
+            flex: 0 0 auto;
+            width: 100%;
+          }
+
+          .row-cols-3xl-2 > * {
+            flex: 0 0 auto;
+            width: 50%;
+          }
+
+          .row-cols-3xl-3 > * {
+            flex: 0 0 auto;
+            width: 33.33333333%;
+          }
+
+          .row-cols-3xl-4 > * {
+            flex: 0 0 auto;
+            width: 25%;
+          }
+
+          .row-cols-3xl-5 > * {
+            flex: 0 0 auto;
+            width: 20%;
+          }
+
+          .row-cols-3xl-6 > * {
+            flex: 0 0 auto;
+            width: 16.66666667%;
+          }
+
+          .col-3xl-auto {
+            flex: 0 0 auto;
+            width: auto;
+          }
+
+          .col-3xl-1 {
+            flex: 0 0 auto;
+            width: 8.33333333%;
+          }
+
+          .col-3xl-2 {
+            flex: 0 0 auto;
+            width: 16.66666667%;
+          }
+
+          .col-3xl-3 {
+            flex: 0 0 auto;
+            width: 25%;
+          }
+
+          .col-3xl-4 {
+            flex: 0 0 auto;
+            width: 33.33333333%;
+          }
+
+          .col-3xl-5 {
+            flex: 0 0 auto;
+            width: 41.66666667%;
+          }
+
+          .col-3xl-6 {
+            flex: 0 0 auto;
+            width: 50%;
+          }
+
+          .col-3xl-7 {
+            flex: 0 0 auto;
+            width: 58.33333333%;
+          }
+
+          .col-3xl-8 {
+            flex: 0 0 auto;
+            width: 66.66666667%;
+          }
+
+          .col-3xl-9 {
+            flex: 0 0 auto;
+            width: 75%;
+          }
+
+          .col-3xl-10 {
+            flex: 0 0 auto;
+            width: 83.33333333%;
+          }
+
+          .col-3xl-11 {
+            flex: 0 0 auto;
+            width: 91.66666667%;
+          }
+
+          .col-3xl-12 {
+            flex: 0 0 auto;
+            width: 100%;
+          }
+
+          .offset-3xl-0 {
+            margin-left: 0;
+          }
+
+          .offset-3xl-1 {
+            margin-left: 8.33333333%;
+          }
+
+          .offset-3xl-2 {
+            margin-left: 16.66666667%;
+          }
+
+          .offset-3xl-3 {
+            margin-left: 25%;
+          }
+
+          .offset-3xl-4 {
+            margin-left: 33.33333333%;
+          }
+
+          .offset-3xl-5 {
+            margin-left: 41.66666667%;
+          }
+
+          .offset-3xl-6 {
+            margin-left: 50%;
+          }
+
+          .offset-3xl-7 {
+            margin-left: 58.33333333%;
+          }
+
+          .offset-3xl-8 {
+            margin-left: 66.66666667%;
+          }
+
+          .offset-3xl-9 {
+            margin-left: 75%;
+          }
+
+          .offset-3xl-10 {
+            margin-left: 83.33333333%;
+          }
+
+          .offset-3xl-11 {
+            margin-left: 91.66666667%;
+          }
+
+          .g-3xl-none,
+          .gx-3xl-none {
+            --bs-gutter-x: 0 !important;
+          }
+
+          .g-3xl-none,
+          .gy-3xl-none {
+            --bs-gutter-y: 0 !important;
+          }
+
+          .g-3xl-smash,
+          .gx-3xl-smash {
+            --bs-gutter-x: 2px !important;
+          }
+
+          .g-3xl-smash,
+          .gy-3xl-smash {
+            --bs-gutter-y: 2px !important;
+          }
+
+          .g-3xl-shortest,
+          .gx-3xl-shortest {
+            --bs-gutter-x: 4px !important;
+          }
+
+          .g-3xl-shortest,
+          .gy-3xl-shortest {
+            --bs-gutter-y: 4px !important;
+          }
+
+          .g-3xl-shorter,
+          .gx-3xl-shorter {
+            --bs-gutter-x: 8px !important;
+          }
+
+          .g-3xl-shorter,
+          .gy-3xl-shorter {
+            --bs-gutter-y: 8px !important;
+          }
+
+          .g-3xl-short,
+          .gx-3xl-short {
+            --bs-gutter-x: 12px !important;
+          }
+
+          .g-3xl-short,
+          .gy-3xl-short {
+            --bs-gutter-y: 12px !important;
+          }
+
+          .g-3xl-medium,
+          .gx-3xl-medium {
+            --bs-gutter-x: 16px !important;
+          }
+
+          .g-3xl-medium,
+          .gy-3xl-medium {
+            --bs-gutter-y: 16px !important;
+          }
+
+          .g-3xl-tall,
+          .gx-3xl-tall {
+            --bs-gutter-x: 24px !important;
+          }
+
+          .g-3xl-tall,
+          .gy-3xl-tall {
+            --bs-gutter-y: 24px !important;
+          }
+
+          .g-3xl-taller,
+          .gx-3xl-taller {
+            --bs-gutter-x: 32px !important;
+          }
+
+          .g-3xl-taller,
+          .gy-3xl-taller {
+            --bs-gutter-y: 32px !important;
+          }
+
+          .g-3xl-tallest,
+          .gx-3xl-tallest {
+            --bs-gutter-x: 40px !important;
+          }
+
+          .g-3xl-tallest,
+          .gy-3xl-tallest {
+            --bs-gutter-y: 40px !important;
+          }
+
+          .g-3xl-spacious,
+          .gx-3xl-spacious {
+            --bs-gutter-x: 48px !important;
+          }
+
+          .g-3xl-spacious,
+          .gy-3xl-spacious {
+            --bs-gutter-y: 48px !important;
+          }
+
+          .g-3xl-huge,
+          .gx-3xl-huge {
+            --bs-gutter-x: 56px !important;
+          }
+
+          .g-3xl-huge,
+          .gy-3xl-huge {
+            --bs-gutter-y: 56px !important;
+          }
+
+          .g-3xl-jumbo,
+          .gx-3xl-jumbo {
+            --bs-gutter-x: 64px !important;
+          }
+
+          .g-3xl-jumbo,
+          .gy-3xl-jumbo {
+            --bs-gutter-y: 64px !important;
+          }
+
+          .g-3xl-0,
+          .gx-3xl-0 {
+            --bs-gutter-x: 0 !important;
+          }
+
+          .g-3xl-0,
+          .gy-3xl-0 {
+            --bs-gutter-y: 0 !important;
+          }
+
+          .g-3xl-1,
+          .gx-3xl-1 {
+            --bs-gutter-x: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .g-3xl-1,
+          .gy-3xl-1 {
+            --bs-gutter-y: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .g-3xl-2,
+          .gx-3xl-2 {
+            --bs-gutter-x: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .g-3xl-2,
+          .gy-3xl-2 {
+            --bs-gutter-y: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .g-3xl-3,
+          .gx-3xl-3 {
+            --bs-gutter-x: 1.5rem !important;
+          }
+
+          .g-3xl-3,
+          .gy-3xl-3 {
+            --bs-gutter-y: 1.5rem !important;
+          }
+
+          .g-3xl-4,
+          .gx-3xl-4 {
+            --bs-gutter-x: 2.5rem !important;
+          }
+
+          .g-3xl-4,
+          .gy-3xl-4 {
+            --bs-gutter-y: 2.5rem !important;
+          }
+
+          .g-3xl-5,
+          .gx-3xl-5 {
+            --bs-gutter-x: 3.5rem !important;
+          }
+
+          .g-3xl-5,
+          .gy-3xl-5 {
+            --bs-gutter-y: 3.5rem !important;
+          }
+        }
+      }
+    }
+  }
+}
+// stylelint-enable no-duplicate-at-import-rules
diff --git a/scss/tests/customize/_ouds-web-bootstrap.test.scss b/scss/tests/customize/_ouds-web-bootstrap-utilities.test.scss
similarity index 77%
rename from scss/tests/customize/_ouds-web-bootstrap.test.scss
rename to scss/tests/customize/_ouds-web-bootstrap-utilities.test.scss
index 2e72af7fae..2da0f26572 100644
--- a/scss/tests/customize/_ouds-web-bootstrap.test.scss
+++ b/scss/tests/customize/_ouds-web-bootstrap-utilities.test.scss
@@ -5,688 +5,765 @@ $utilities: ();
 
 @include describe("customize/ouds-web-bootstrap") {
   @include it("generates only OUDS utilities") {
-    $enable-bootstrap-compatibility: false !global;
-    @import "../../functions";
-    @import "../../tokens/raw";
-    @import "../../tokens/semantic";
-    @import "../../tokens/composite";
-    @import "../../tokens/component";
-    @import "../../variables";
-    @import "../../maps";
-    @import "../../mixins";
-
-    $utilities: (
-      "opacity": (
-        property: opacity,
-        values: (
-          0: 0,
-          25: .25,
-          50: .5,
-          75: .75,
-          100: 1,
-        ),
-        bootstrap-compatibility: true
-      ),
-      "opacity-ouds": (
-        property: opacity,
-        values: $ouds-opacities
-      ),
-      "border-ouds": (
-        property: border,
-        values: (
-          null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
-          "none": 0,
-        ),
-      ),
-      "border": (
-        property: border,
-        values: (
-          0: 0,
-        ),
-        bootstrap-compatibility: true
-      ),
-      "border-top": (
-        property: border-top,
-        values: (
-          0: 0,
-        ),
-        bootstrap-compatibility: true
-      ),
-      "border-end": (
-        property: border-right,
-        class: border-end,
-        values: (
-          0: 0,
-        ),
-        bootstrap-compatibility: true
-      ),
-      "border-bottom": (
-        property: border-bottom,
-        values: (
-          0: 0,
-        ),
-        bootstrap-compatibility: true
-      ),
-      "border-start": (
-        property: border-left,
-        class: border-start,
-        values: (
-          0: 0,
-        ),
-        bootstrap-compatibility: true
-      ),
-      "border-color": (
-        property: border-color,
-        class: border,
-        local-vars: (
-          "border-opacity": 1
-        ),
-        values: $utilities-border-colors
-      ),
-      "subtle-border-color": (
-        property: border-color,
-        class: border,
-        values: $utilities-border-subtle
-      ),
-      "border-width": (
-        property: border-width,
-        class: border,
-        values: $border-widths,
-        bootstrap-compatibility: true
-      ),
-      "border-opacity": (
-        css-var: true,
-        class: border-opacity,
-        values: (
-          10: .1,
-          25: .25,
-          50: .5,
-          75: .75,
-          100: 1
-        ),
-        bootstrap-compatibility: true
-      ),
-      "border-top-ouds": (
-        property: border-top,
-        values: (
-          null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
-          "none": $ouds-border-width-none,
-        ),
-      ),
-      "border-end-ouds": (
-        property: border-right,
-        class: border-end,
-        values: (
-          null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
-          "none": 0,
-        ),
-      ),
-      "border-bottom-ouds": (
-        property: border-bottom,
-        values: (
-          null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
-          "none": 0,
-        ),
-      ),
-      "border-start-ouds": (
-        property: border-left,
-        class: border-start,
-        values: (
-          null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
-          "none": 0,
-        ),
-      ),
-      "border-width-ouds": (
-        property: border-width,
-        class: border,
-        values: $ouds-border-widths
-      ),
-      "border-style-ouds": (
-        property: border-style,
-        class: border,
-        values: $ouds-border-styles
-      ),
-      "rounded": (
-        property: border-radius,
-        class: rounded,
-        values: (
-          0: 0,
-          1: var(--#{$prefix}border-radius-sm),
-          2: var(--#{$prefix}border-radius-lg),
-          3: var(--#{$prefix}border-radius-xl),
-          4: var(--#{$prefix}border-radius-xxl),
-          5: $border-radius-xxl * 1.5,
-        ),
-        bootstrap-compatibility: true
-      ),
-      "rounded-top": (
-        property: border-top-left-radius border-top-right-radius,
-        class: rounded-top,
-        values: (
-          0: 0,
-          1: var(--#{$prefix}border-radius-sm),
-          2: var(--#{$prefix}border-radius-lg),
-          3: var(--#{$prefix}border-radius-xl),
-          4: var(--#{$prefix}border-radius-xxl),
-          5: $border-radius-xxl * 1.5,
-        ),
-        bootstrap-compatibility: true
-      ),
-      "rounded-end": (
-        property: border-top-right-radius border-bottom-right-radius,
-        class: rounded-end,
-        values: (
-          0: 0,
-          1: var(--#{$prefix}border-radius-sm),
-          2: var(--#{$prefix}border-radius-lg),
-          3: var(--#{$prefix}border-radius-xl),
-          4: var(--#{$prefix}border-radius-xxl),
-          5: $border-radius-xxl * 1.5,
-        ),
-        bootstrap-compatibility: true
-      ),
-      "rounded-bottom": (
-        property: border-bottom-right-radius border-bottom-left-radius,
-        class: rounded-bottom,
-        values: (
-          0: 0,
-          1: var(--#{$prefix}border-radius-sm),
-          2: var(--#{$prefix}border-radius-lg),
-          3: var(--#{$prefix}border-radius-xl),
-          4: var(--#{$prefix}border-radius-xxl),
-          5: $border-radius-xxl * 1.5,
-        ),
-        bootstrap-compatibility: true
-      ),
-      "rounded-start": (
-        property: border-bottom-left-radius border-top-left-radius,
-        class: rounded-start,
-        values: (
-          0: 0,
-          1: var(--#{$prefix}border-radius-sm),
-          2: var(--#{$prefix}border-radius-lg),
-          3: var(--#{$prefix}border-radius-xl),
-          4: var(--#{$prefix}border-radius-xxl),
-          5: $border-radius-xxl * 1.5,
-        ),
-        bootstrap-compatibility: true
-      ),
-      "rounded-ouds": (
-        property: border-radius,
-        class: rounded,
-        values: $ouds-border-radiuses
-      ),
-      "rounded-top-ouds": (
-        property: border-top-left-radius border-top-right-radius,
-        class: rounded-top,
-        values: $ouds-border-radiuses
-      ),
-      "rounded-end-ouds": (
-        property: border-top-right-radius border-bottom-right-radius,
-        class: rounded-end,
-        values: $ouds-border-radiuses
-      ),
-      "rounded-bottom-ouds": (
-        property: border-bottom-right-radius border-bottom-left-radius,
-        class: rounded-bottom,
-        values: $ouds-border-radiuses
-      ),
-      "rounded-start-ouds": (
-        property: border-bottom-left-radius border-top-left-radius,
-        class: rounded-start,
-        values: $ouds-border-radiuses
-      ),
-      "margin": (
-        responsive: true,
-        property: margin,
-        class: m,
-        values: $spacers,
-        bootstrap-compatibility: true
-      ),
-      "margin-x": (
-        responsive: true,
-        property: margin-right margin-left,
-        class: mx,
-        values: $spacers,
-        bootstrap-compatibility: true
-      ),
-      "margin-y": (
-        responsive: true,
-        property: margin-top margin-bottom,
-        class: my,
-        values: $spacers,
-        bootstrap-compatibility: true
-      ),
-      "margin-top": (
-        responsive: true,
-        property: margin-top,
-        class: mt,
-        values: $spacers,
-        bootstrap-compatibility: true
-      ),
-      "margin-end": (
-        responsive: true,
-        property: margin-right,
-        class: me,
-        values: $spacers,
-        bootstrap-compatibility: true
-      ),
-      "margin-bottom": (
-        responsive: true,
-        property: margin-bottom,
-        class: mb,
-        values: $spacers,
-        bootstrap-compatibility: true
-      ),
-      "margin-start": (
-        responsive: true,
-        property: margin-left,
-        class: ms,
-        values: $spacers,
-        bootstrap-compatibility: true
-      ),
-      "negative-margin": (
-        responsive: true,
-        property: margin,
-        class: m,
-        values: $negative-spacers,
-        bootstrap-compatibility: true
-      ),
-      "negative-margin-x": (
-        responsive: true,
-        property: margin-right margin-left,
-        class: mx,
-        values: $negative-spacers,
-        bootstrap-compatibility: true
-      ),
-      "negative-margin-y": (
-        responsive: true,
-        property: margin-top margin-bottom,
-        class: my,
-        values: $negative-spacers,
-        bootstrap-compatibility: true
-      ),
-      "negative-margin-top": (
-        responsive: true,
-        property: margin-top,
-        class: mt,
-        values: $negative-spacers,
-        bootstrap-compatibility: true
-      ),
-      "negative-margin-end": (
-        responsive: true,
-        property: margin-right,
-        class: me,
-        values: $negative-spacers,
-        bootstrap-compatibility: true
-      ),
-      "negative-margin-bottom": (
-        responsive: true,
-        property: margin-bottom,
-        class: mb,
-        values: $negative-spacers,
-        bootstrap-compatibility: true
-      ),
-      "negative-margin-start": (
-        responsive: true,
-        property: margin-left,
-        class: ms,
-        values: $negative-spacers,
-        bootstrap-compatibility: true
-      ),
-      "padding": (
-        responsive: true,
-        property: padding,
-        class: p,
-        values: $spacers,
-        bootstrap-compatibility: true
-      ),
-      "padding-x": (
-        responsive: true,
-        property: padding-right padding-left,
-        class: px,
-        values: $spacers,
-        bootstrap-compatibility: true
-      ),
-      "padding-y": (
-        responsive: true,
-        property: padding-top padding-bottom,
-        class: py,
-        values: $spacers,
-        bootstrap-compatibility: true
-      ),
-      "padding-top": (
-        responsive: true,
-        property: padding-top,
-        class: pt,
-        values: $spacers,
-        bootstrap-compatibility: true
-      ),
-      "padding-end": (
-        responsive: true,
-        property: padding-right,
-        class: pe,
-        values: $spacers,
-        bootstrap-compatibility: true
-      ),
-      "padding-bottom": (
-        responsive: true,
-        property: padding-bottom,
-        class: pb,
-        values: $spacers,
-        bootstrap-compatibility: true
-      ),
-      "padding-start": (
-        responsive: true,
-        property: padding-left,
-        class: ps,
-        values: $spacers,
-        bootstrap-compatibility: true
-      ),
-      "gap": (
-        responsive: true,
-        property: gap,
-        class: gap,
-        values: $spacers,
-        bootstrap-compatibility: true
-      ),
-      "row-gap": (
-        responsive: true,
-        property: row-gap,
-        class: row-gap,
-        values: $spacers,
-        bootstrap-compatibility: true
-      ),
-      "column-gap": (
-        responsive: true,
-        property: column-gap,
-        class: column-gap,
-        values: $spacers,
-        bootstrap-compatibility: true
-      ),
-      "margin-ouds": (
-        responsive: true,
-        property: margin,
-        class: m,
-        values: map-merge($ouds-dimension-space-fixed, (auto: auto))
-      ),
-      "margin-scaled-ouds": (
-        property: margin,
-        class: m-scaled,
-        values: $ouds-dimension-space-scaled
-      ),
-      "margin-x-ouds": (
-        responsive: true,
-        property: margin-right margin-left,
-        class: mx,
-        values: map-merge($ouds-dimension-space-fixed, (auto: auto))
-      ),
-      "margin-x-scaled-ouds": (
-        property: margin-right margin-left,
-        class: mx-scaled,
-        values: $ouds-dimension-space-scaled
-      ),
-      "margin-y-ouds": (
-        responsive: true,
-        property: margin-top margin-bottom,
-        class: my,
-        values: map-merge($ouds-dimension-space-fixed, (auto: auto))
-      ),
-      "margin-y-scaled-ouds": (
-        property: margin-top margin-bottom,
-        class: my-scaled,
-        values: $ouds-dimension-space-scaled
-      ),
-      "margin-top-ouds": (
-        responsive: true,
-        property: margin-top,
-        class: mt,
-        values: map-merge($ouds-dimension-space-fixed, (auto: auto))
-      ),
-      "margin-top-scaled-ouds": (
-        property: margin-top,
-        class: mt-scaled,
-        values: $ouds-dimension-space-scaled
-      ),
-      "margin-end-ouds": (
-        responsive: true,
-        property: margin-right,
-        class: me,
-        values: map-merge($ouds-dimension-space-fixed, (auto: auto))
-      ),
-      "margin-end-scaled-ouds": (
-        property: margin-right,
-        class: me-scaled,
-        values: $ouds-dimension-space-scaled
-      ),
-      "margin-bottom-ouds": (
-        responsive: true,
-        property: margin-bottom,
-        class: mb,
-        values: map-merge($ouds-dimension-space-fixed, (auto: auto))
-      ),
-      "margin-bottom-scaled-ouds": (
-        property: margin-bottom,
-        class: mb-scaled,
-        values: $ouds-dimension-space-scaled
-      ),
-      "margin-start-ouds": (
-        responsive: true,
-        property: margin-left,
-        class: ms,
-        values: map-merge($ouds-dimension-space-fixed, (auto: auto))
-      ),
-      "margin-start-scaled-ouds": (
-        property: margin-left,
-        class: ms-scaled,
-        values: $ouds-dimension-space-scaled
-      ),
-      "negative-margin-ouds": (
-        responsive: true,
-        property: margin,
-        class: m,
-        values: $ouds-dimension-negative-space-fixed
-      ),
-      "negative-margin-scaled-ouds": (
-        property: margin,
-        class: m-scaled,
-        values: $ouds-dimension-negative-space-scaled
-      ),
-      "negative-margin-x-ouds": (
-        responsive: true,
-        property: margin-right margin-left,
-        class: mx,
-        values: $ouds-dimension-negative-space-fixed
-      ),
-      "negative-margin-x-scaled-ouds": (
-        property: margin-right margin-left,
-        class: mx-scaled,
-        values: $ouds-dimension-negative-space-scaled
-      ),
-      "negative-margin-y-ouds": (
-        responsive: true,
-        property: margin-top margin-bottom,
-        class: my,
-        values: $ouds-dimension-negative-space-fixed
-      ),
-      "negative-margin-y-scaled-ouds": (
-        property: margin-top margin-bottom,
-        class: my-scaled,
-        values: $ouds-dimension-negative-space-scaled
-      ),
-      "negative-margin-top-ouds": (
-        responsive: true,
-        property: margin-top,
-        class: mt,
-        values: $ouds-dimension-negative-space-fixed
-      ),
-      "negative-margin-top-scaled-ouds": (
-        property: margin-top,
-        class: mt-scaled,
-        values: $ouds-dimension-negative-space-scaled
-      ),
-      "negative-margin-end-ouds": (
-        responsive: true,
-        property: margin-right,
-        class: me,
-        values: $ouds-dimension-negative-space-fixed
-      ),
-      "negative-margin-end-scaled-ouds": (
-        property: margin-right,
-        class: me-scaled,
-        values: $ouds-dimension-negative-space-scaled
-      ),
-      "negative-margin-bottom-ouds": (
-        responsive: true,
-        property: margin-bottom,
-        class: mb,
-        values: $ouds-dimension-negative-space-fixed
-      ),
-      "negative-margin-bottom-scaled-ouds": (
-        property: margin-bottom,
-        class: mb-scaled,
-        values: $ouds-dimension-negative-space-scaled
-      ),
-      "negative-margin-start-ouds": (
-        responsive: true,
-        property: margin-left,
-        class: ms,
-        values: $ouds-dimension-negative-space-fixed
-      ),
-      "negative-margin-start-scaled-ouds": (
-        property: margin-left,
-        class: ms-scaled,
-        values: $ouds-dimension-negative-space-scaled
-      ),
-      "padding-ouds": (
-        responsive: true,
-        property: padding,
-        class: p,
-        values: $ouds-dimension-space-fixed
-      ),
-      "padding-scaled-ouds": (
-        property: padding,
-        class: p-scaled,
-        values: $ouds-dimension-space-scaled
-      ),
-      "padding-x-ouds": (
-        responsive: true,
-        property: padding-right padding-left,
-        class: px,
-        values: $ouds-dimension-space-fixed
-      ),
-      "padding-x-scaled-ouds": (
-        property: padding-right padding-left,
-        class: px-scaled,
-        values: $ouds-dimension-space-scaled
-      ),
-      "padding-y-ouds": (
-        responsive: true,
-        property: padding-top padding-bottom,
-        class: py,
-        values: $ouds-dimension-space-fixed
-      ),
-      "padding-y-scaled-ouds": (
-        property: padding-top padding-bottom,
-        class: py-scaled,
-        values: $ouds-dimension-space-scaled
-      ),
-      "padding-top-ouds": (
-        responsive: true,
-        property: padding-top,
-        class: pt,
-        values: $ouds-dimension-space-fixed
-      ),
-      "padding-top-scaled-ouds": (
-        property: padding-top,
-        class: pt-scaled,
-        values: $ouds-dimension-space-scaled
-      ),
-      "padding-end-ouds": (
-        responsive: true,
-        property: padding-right,
-        class: pe,
-        values: $ouds-dimension-space-fixed
-      ),
-      "padding-end-scaled-ouds": (
-        property: padding-right,
-        class: pe-scaled,
-        values: $ouds-dimension-space-scaled
-      ),
-      "padding-bottom-ouds": (
-        responsive: true,
-        property: padding-bottom,
-        class: pb,
-        values: $ouds-dimension-space-fixed
-      ),
-      "padding-bottom-scaled-ouds": (
-        property: padding-bottom,
-        class: pb-scaled,
-        values: $ouds-dimension-space-scaled
-      ),
-      "padding-start-ouds": (
-        responsive: true,
-        property: padding-left,
-        class: ps,
-        values: $ouds-dimension-space-fixed
-      ),
-      "padding-start-scaled-ouds": (
-        property: padding-left,
-        class: ps-scaled,
-        values: $ouds-dimension-space-scaled
-      ),
-      "gap-ouds": (
-        responsive: true,
-        property: gap,
-        class: gap,
-        values: $ouds-dimension-space-fixed
-      ),
-      "gap-scaled-ouds": (
-        property: gap,
-        class: gap-scaled,
-        values: $ouds-dimension-space-scaled
-      ),
-      "row-gap-ouds": (
-        responsive: true,
-        property: row-gap,
-        class: row-gap,
-        values: $ouds-dimension-space-fixed
-      ),
-      "row-gap-scaled-ouds": (
-        property: row-gap,
-        class: row-gap-scaled,
-        values: $ouds-dimension-space-scaled
-      ),
-      "column-gap-ouds": (
-        responsive: true,
-        property: column-gap,
-        class: column-gap,
-        values: $ouds-dimension-space-fixed
-      ),
-      "column-gap-scaled-ouds": (
-        property: column-gap,
-        class: column-gap-scaled,
-        values: $ouds-dimension-space-scaled
-      ),
-      "shadow": (
-        property: box-shadow,
-        class: shadow,
-        values: (
-          null: var(--#{$prefix}box-shadow),
-          sm: var(--#{$prefix}box-shadow-sm),
-          lg: var(--#{$prefix}box-shadow-lg),
-        ),
-        bootstrap-compatibility: true
-      ),
-      "shadow-ouds": (
-        property: box-shadow,
-        class: shadow,
-        values: $ouds-elevations
-      ),
-    ) !global;
-
     @include assert() {
       @include output() {
+        $enable-bootstrap-compatibility: false !global;
+        @import "../../functions";
+        @import "../../tokens/raw";
+        @import "../../tokens/semantic";
+        @import "../../tokens/composite";
+        @import "../../tokens/component";
+        @import "../../variables";
+        @import "../../maps";
+        @import "../../mixins";
+
+        $utilities: (
+          "opacity": (
+            property: opacity,
+            values: (
+              0: 0,
+              25: .25,
+              50: .5,
+              75: .75,
+              100: 1,
+            ),
+            bootstrap-compatibility: true
+          ),
+          "opacity-ouds": (
+            property: opacity,
+            values: $ouds-opacities
+          ),
+          "border-ouds": (
+            property: border,
+            values: (
+              null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
+              "none": 0,
+            ),
+          ),
+          "border": (
+            property: border,
+            values: (
+              0: 0,
+            ),
+            bootstrap-compatibility: true
+          ),
+          "border-top": (
+            property: border-top,
+            values: (
+              0: 0,
+            ),
+            bootstrap-compatibility: true
+          ),
+          "border-end": (
+            property: border-right,
+            class: border-end,
+            values: (
+              0: 0,
+            ),
+            bootstrap-compatibility: true
+          ),
+          "border-bottom": (
+            property: border-bottom,
+            values: (
+              0: 0,
+            ),
+            bootstrap-compatibility: true
+          ),
+          "border-start": (
+            property: border-left,
+            class: border-start,
+            values: (
+              0: 0,
+            ),
+            bootstrap-compatibility: true
+          ),
+          "border-color": (
+            property: border-color,
+            class: border,
+            local-vars: (
+              "border-opacity": 1
+            ),
+            values: $utilities-border-colors
+          ),
+          "subtle-border-color": (
+            property: border-color,
+            class: border,
+            values: $utilities-border-subtle
+          ),
+          "border-width": (
+            property: border-width,
+            class: border,
+            values: $border-widths,
+            bootstrap-compatibility: true
+          ),
+          "border-opacity": (
+            css-var: true,
+            class: border-opacity,
+            values: (
+              10: .1,
+              25: .25,
+              50: .5,
+              75: .75,
+              100: 1
+            ),
+            bootstrap-compatibility: true
+          ),
+          "border-top-ouds": (
+            property: border-top,
+            values: (
+              null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
+              "none": $ouds-border-width-none,
+            ),
+          ),
+          "border-end-ouds": (
+            property: border-right,
+            class: border-end,
+            values: (
+              null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
+              "none": 0,
+            ),
+          ),
+          "border-bottom-ouds": (
+            property: border-bottom,
+            values: (
+              null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
+              "none": 0,
+            ),
+          ),
+          "border-start-ouds": (
+            property: border-left,
+            class: border-start,
+            values: (
+              null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
+              "none": 0,
+            ),
+          ),
+          "border-width-ouds": (
+            property: border-width,
+            class: border,
+            values: $ouds-border-widths
+          ),
+          "border-style-ouds": (
+            property: border-style,
+            class: border,
+            values: $ouds-border-styles
+          ),
+          "rounded": (
+            property: border-radius,
+            class: rounded,
+            values: (
+              0: 0,
+              1: var(--#{$prefix}border-radius-sm),
+              2: var(--#{$prefix}border-radius-lg),
+              3: var(--#{$prefix}border-radius-xl),
+              4: var(--#{$prefix}border-radius-xxl),
+              5: $border-radius-xxl * 1.5,
+            ),
+            bootstrap-compatibility: true
+          ),
+          "rounded-top": (
+            property: border-top-left-radius border-top-right-radius,
+            class: rounded-top,
+            values: (
+              0: 0,
+              1: var(--#{$prefix}border-radius-sm),
+              2: var(--#{$prefix}border-radius-lg),
+              3: var(--#{$prefix}border-radius-xl),
+              4: var(--#{$prefix}border-radius-xxl),
+              5: $border-radius-xxl * 1.5,
+            ),
+            bootstrap-compatibility: true
+          ),
+          "rounded-end": (
+            property: border-top-right-radius border-bottom-right-radius,
+            class: rounded-end,
+            values: (
+              0: 0,
+              1: var(--#{$prefix}border-radius-sm),
+              2: var(--#{$prefix}border-radius-lg),
+              3: var(--#{$prefix}border-radius-xl),
+              4: var(--#{$prefix}border-radius-xxl),
+              5: $border-radius-xxl * 1.5,
+            ),
+            bootstrap-compatibility: true
+          ),
+          "rounded-bottom": (
+            property: border-bottom-right-radius border-bottom-left-radius,
+            class: rounded-bottom,
+            values: (
+              0: 0,
+              1: var(--#{$prefix}border-radius-sm),
+              2: var(--#{$prefix}border-radius-lg),
+              3: var(--#{$prefix}border-radius-xl),
+              4: var(--#{$prefix}border-radius-xxl),
+              5: $border-radius-xxl * 1.5,
+            ),
+            bootstrap-compatibility: true
+          ),
+          "rounded-start": (
+            property: border-bottom-left-radius border-top-left-radius,
+            class: rounded-start,
+            values: (
+              0: 0,
+              1: var(--#{$prefix}border-radius-sm),
+              2: var(--#{$prefix}border-radius-lg),
+              3: var(--#{$prefix}border-radius-xl),
+              4: var(--#{$prefix}border-radius-xxl),
+              5: $border-radius-xxl * 1.5,
+            ),
+            bootstrap-compatibility: true
+          ),
+          "rounded-ouds": (
+            property: border-radius,
+            class: rounded,
+            values: $ouds-border-radiuses
+          ),
+          "rounded-top-ouds": (
+            property: border-top-left-radius border-top-right-radius,
+            class: rounded-top,
+            values: $ouds-border-radiuses
+          ),
+          "rounded-end-ouds": (
+            property: border-top-right-radius border-bottom-right-radius,
+            class: rounded-end,
+            values: $ouds-border-radiuses
+          ),
+          "rounded-bottom-ouds": (
+            property: border-bottom-right-radius border-bottom-left-radius,
+            class: rounded-bottom,
+            values: $ouds-border-radiuses
+          ),
+          "rounded-start-ouds": (
+            property: border-bottom-left-radius border-top-left-radius,
+            class: rounded-start,
+            values: $ouds-border-radiuses
+          ),
+          "margin": (
+            responsive: true,
+            property: margin,
+            class: m,
+            values: $spacers,
+            bootstrap-compatibility: true
+          ),
+          "margin-x": (
+            responsive: true,
+            property: margin-right margin-left,
+            class: mx,
+            values: $spacers,
+            bootstrap-compatibility: true
+          ),
+          "margin-y": (
+            responsive: true,
+            property: margin-top margin-bottom,
+            class: my,
+            values: $spacers,
+            bootstrap-compatibility: true
+          ),
+          "margin-top": (
+            responsive: true,
+            property: margin-top,
+            class: mt,
+            values: $spacers,
+            bootstrap-compatibility: true
+          ),
+          "margin-end": (
+            responsive: true,
+            property: margin-right,
+            class: me,
+            values: $spacers,
+            bootstrap-compatibility: true
+          ),
+          "margin-bottom": (
+            responsive: true,
+            property: margin-bottom,
+            class: mb,
+            values: $spacers,
+            bootstrap-compatibility: true
+          ),
+          "margin-start": (
+            responsive: true,
+            property: margin-left,
+            class: ms,
+            values: $spacers,
+            bootstrap-compatibility: true
+          ),
+          "negative-margin": (
+            responsive: true,
+            property: margin,
+            class: m,
+            values: $negative-spacers,
+            bootstrap-compatibility: true
+          ),
+          "negative-margin-x": (
+            responsive: true,
+            property: margin-right margin-left,
+            class: mx,
+            values: $negative-spacers,
+            bootstrap-compatibility: true
+          ),
+          "negative-margin-y": (
+            responsive: true,
+            property: margin-top margin-bottom,
+            class: my,
+            values: $negative-spacers,
+            bootstrap-compatibility: true
+          ),
+          "negative-margin-top": (
+            responsive: true,
+            property: margin-top,
+            class: mt,
+            values: $negative-spacers,
+            bootstrap-compatibility: true
+          ),
+          "negative-margin-end": (
+            responsive: true,
+            property: margin-right,
+            class: me,
+            values: $negative-spacers,
+            bootstrap-compatibility: true
+          ),
+          "negative-margin-bottom": (
+            responsive: true,
+            property: margin-bottom,
+            class: mb,
+            values: $negative-spacers,
+            bootstrap-compatibility: true
+          ),
+          "negative-margin-start": (
+            responsive: true,
+            property: margin-left,
+            class: ms,
+            values: $negative-spacers,
+            bootstrap-compatibility: true
+          ),
+          "padding": (
+            responsive: true,
+            property: padding,
+            class: p,
+            values: $spacers,
+            bootstrap-compatibility: true
+          ),
+          "padding-x": (
+            responsive: true,
+            property: padding-right padding-left,
+            class: px,
+            values: $spacers,
+            bootstrap-compatibility: true
+          ),
+          "padding-y": (
+            responsive: true,
+            property: padding-top padding-bottom,
+            class: py,
+            values: $spacers,
+            bootstrap-compatibility: true
+          ),
+          "padding-top": (
+            responsive: true,
+            property: padding-top,
+            class: pt,
+            values: $spacers,
+            bootstrap-compatibility: true
+          ),
+          "padding-end": (
+            responsive: true,
+            property: padding-right,
+            class: pe,
+            values: $spacers,
+            bootstrap-compatibility: true
+          ),
+          "padding-bottom": (
+            responsive: true,
+            property: padding-bottom,
+            class: pb,
+            values: $spacers,
+            bootstrap-compatibility: true
+          ),
+          "padding-start": (
+            responsive: true,
+            property: padding-left,
+            class: ps,
+            values: $spacers,
+            bootstrap-compatibility: true
+          ),
+          "gap": (
+            responsive: true,
+            property: gap,
+            class: gap,
+            values: $spacers,
+            bootstrap-compatibility: true
+          ),
+          "row-gap": (
+            responsive: true,
+            property: row-gap,
+            class: row-gap,
+            values: $spacers,
+            bootstrap-compatibility: true
+          ),
+          "column-gap": (
+            responsive: true,
+            property: column-gap,
+            class: column-gap,
+            values: $spacers,
+            bootstrap-compatibility: true
+          ),
+          "margin-ouds": (
+            responsive: true,
+            property: margin,
+            class: m,
+            values: map-merge($ouds-dimension-space-fixed, (auto: auto))
+          ),
+          "margin-scaled-ouds": (
+            property: margin,
+            class: m-scaled,
+            values: $ouds-dimension-space-scaled
+          ),
+          "margin-x-ouds": (
+            responsive: true,
+            property: margin-right margin-left,
+            class: mx,
+            values: map-merge($ouds-dimension-space-fixed, (auto: auto))
+          ),
+          "margin-x-scaled-ouds": (
+            property: margin-right margin-left,
+            class: mx-scaled,
+            values: $ouds-dimension-space-scaled
+          ),
+          "margin-y-ouds": (
+            responsive: true,
+            property: margin-top margin-bottom,
+            class: my,
+            values: map-merge($ouds-dimension-space-fixed, (auto: auto))
+          ),
+          "margin-y-scaled-ouds": (
+            property: margin-top margin-bottom,
+            class: my-scaled,
+            values: $ouds-dimension-space-scaled
+          ),
+          "margin-top-ouds": (
+            responsive: true,
+            property: margin-top,
+            class: mt,
+            values: map-merge($ouds-dimension-space-fixed, (auto: auto))
+          ),
+          "margin-top-scaled-ouds": (
+            property: margin-top,
+            class: mt-scaled,
+            values: $ouds-dimension-space-scaled
+          ),
+          "margin-end-ouds": (
+            responsive: true,
+            property: margin-right,
+            class: me,
+            values: map-merge($ouds-dimension-space-fixed, (auto: auto))
+          ),
+          "margin-end-scaled-ouds": (
+            property: margin-right,
+            class: me-scaled,
+            values: $ouds-dimension-space-scaled
+          ),
+          "margin-bottom-ouds": (
+            responsive: true,
+            property: margin-bottom,
+            class: mb,
+            values: map-merge($ouds-dimension-space-fixed, (auto: auto))
+          ),
+          "margin-bottom-scaled-ouds": (
+            property: margin-bottom,
+            class: mb-scaled,
+            values: $ouds-dimension-space-scaled
+          ),
+          "margin-start-ouds": (
+            responsive: true,
+            property: margin-left,
+            class: ms,
+            values: map-merge($ouds-dimension-space-fixed, (auto: auto))
+          ),
+          "margin-start-scaled-ouds": (
+            property: margin-left,
+            class: ms-scaled,
+            values: $ouds-dimension-space-scaled
+          ),
+          "negative-margin-ouds": (
+            responsive: true,
+            property: margin,
+            class: m,
+            values: $ouds-dimension-negative-space-fixed
+          ),
+          "negative-margin-scaled-ouds": (
+            property: margin,
+            class: m-scaled,
+            values: $ouds-dimension-negative-space-scaled
+          ),
+          "negative-margin-x-ouds": (
+            responsive: true,
+            property: margin-right margin-left,
+            class: mx,
+            values: $ouds-dimension-negative-space-fixed
+          ),
+          "negative-margin-x-scaled-ouds": (
+            property: margin-right margin-left,
+            class: mx-scaled,
+            values: $ouds-dimension-negative-space-scaled
+          ),
+          "negative-margin-y-ouds": (
+            responsive: true,
+            property: margin-top margin-bottom,
+            class: my,
+            values: $ouds-dimension-negative-space-fixed
+          ),
+          "negative-margin-y-scaled-ouds": (
+            property: margin-top margin-bottom,
+            class: my-scaled,
+            values: $ouds-dimension-negative-space-scaled
+          ),
+          "negative-margin-top-ouds": (
+            responsive: true,
+            property: margin-top,
+            class: mt,
+            values: $ouds-dimension-negative-space-fixed
+          ),
+          "negative-margin-top-scaled-ouds": (
+            property: margin-top,
+            class: mt-scaled,
+            values: $ouds-dimension-negative-space-scaled
+          ),
+          "negative-margin-end-ouds": (
+            responsive: true,
+            property: margin-right,
+            class: me,
+            values: $ouds-dimension-negative-space-fixed
+          ),
+          "negative-margin-end-scaled-ouds": (
+            property: margin-right,
+            class: me-scaled,
+            values: $ouds-dimension-negative-space-scaled
+          ),
+          "negative-margin-bottom-ouds": (
+            responsive: true,
+            property: margin-bottom,
+            class: mb,
+            values: $ouds-dimension-negative-space-fixed
+          ),
+          "negative-margin-bottom-scaled-ouds": (
+            property: margin-bottom,
+            class: mb-scaled,
+            values: $ouds-dimension-negative-space-scaled
+          ),
+          "negative-margin-start-ouds": (
+            responsive: true,
+            property: margin-left,
+            class: ms,
+            values: $ouds-dimension-negative-space-fixed
+          ),
+          "negative-margin-start-scaled-ouds": (
+            property: margin-left,
+            class: ms-scaled,
+            values: $ouds-dimension-negative-space-scaled
+          ),
+          "padding-ouds": (
+            responsive: true,
+            property: padding,
+            class: p,
+            values: $ouds-dimension-space-fixed
+          ),
+          "padding-scaled-ouds": (
+            property: padding,
+            class: p-scaled,
+            values: $ouds-dimension-space-scaled
+          ),
+          "padding-x-ouds": (
+            responsive: true,
+            property: padding-right padding-left,
+            class: px,
+            values: $ouds-dimension-space-fixed
+          ),
+          "padding-x-scaled-ouds": (
+            property: padding-right padding-left,
+            class: px-scaled,
+            values: $ouds-dimension-space-scaled
+          ),
+          "padding-y-ouds": (
+            responsive: true,
+            property: padding-top padding-bottom,
+            class: py,
+            values: $ouds-dimension-space-fixed
+          ),
+          "padding-y-scaled-ouds": (
+            property: padding-top padding-bottom,
+            class: py-scaled,
+            values: $ouds-dimension-space-scaled
+          ),
+          "padding-top-ouds": (
+            responsive: true,
+            property: padding-top,
+            class: pt,
+            values: $ouds-dimension-space-fixed
+          ),
+          "padding-top-scaled-ouds": (
+            property: padding-top,
+            class: pt-scaled,
+            values: $ouds-dimension-space-scaled
+          ),
+          "padding-end-ouds": (
+            responsive: true,
+            property: padding-right,
+            class: pe,
+            values: $ouds-dimension-space-fixed
+          ),
+          "padding-end-scaled-ouds": (
+            property: padding-right,
+            class: pe-scaled,
+            values: $ouds-dimension-space-scaled
+          ),
+          "padding-bottom-ouds": (
+            responsive: true,
+            property: padding-bottom,
+            class: pb,
+            values: $ouds-dimension-space-fixed
+          ),
+          "padding-bottom-scaled-ouds": (
+            property: padding-bottom,
+            class: pb-scaled,
+            values: $ouds-dimension-space-scaled
+          ),
+          "padding-start-ouds": (
+            responsive: true,
+            property: padding-left,
+            class: ps,
+            values: $ouds-dimension-space-fixed
+          ),
+          "padding-start-scaled-ouds": (
+            property: padding-left,
+            class: ps-scaled,
+            values: $ouds-dimension-space-scaled
+          ),
+          "gap-ouds": (
+            responsive: true,
+            property: gap,
+            class: gap,
+            values: $ouds-dimension-space-fixed
+          ),
+          "gap-scaled-ouds": (
+            property: gap,
+            class: gap-scaled,
+            values: $ouds-dimension-space-scaled
+          ),
+          "row-gap-ouds": (
+            responsive: true,
+            property: row-gap,
+            class: row-gap,
+            values: $ouds-dimension-space-fixed
+          ),
+          "row-gap-scaled-ouds": (
+            property: row-gap,
+            class: row-gap-scaled,
+            values: $ouds-dimension-space-scaled
+          ),
+          "column-gap-ouds": (
+            responsive: true,
+            property: column-gap,
+            class: column-gap,
+            values: $ouds-dimension-space-fixed
+          ),
+          "column-gap-scaled-ouds": (
+            property: column-gap,
+            class: column-gap-scaled,
+            values: $ouds-dimension-space-scaled
+          ),
+          "font-family": (
+            property: font-family,
+            class: font,
+            values: (monospace: var(--#{$prefix}font-monospace))
+          ),
+          "font-size": (
+            property: font-size,
+            class: fs,
+            values: $font-sizes,
+            bootstrap-compatibility: true
+          ),
+          "font-weight": (
+            property: font-weight,
+            class: fw,
+            values: (
+              lighter: $font-weight-lighter,
+              light: $font-weight-light,
+              medium: $font-weight-medium,
+              semibold: $font-weight-semibold,
+              bolder: $font-weight-bolder
+            ),
+            bootstrap-compatibility: true
+          ),
+          "line-height": (
+            property: line-height,
+            class: lh,
+            values: (
+              1: 1,
+              sm: 1.25,
+              base: 1.5,
+              lg: 2,
+            ),
+            bootstrap-compatibility: true
+          ),
+          "text-align": (
+            responsive: true,
+            property: text-align,
+            class: text,
+            values: (
+              start: left,
+              end: right,
+              center: center,
+            )
+          ),
+          "text-decoration": (
+            property: text-decoration,
+            values: none underline line-through
+          ),
+          "text-transform": (
+            property: text-transform,
+            class: text,
+            values: lowercase uppercase capitalize
+          ),
+          "white-space": (
+            property: white-space,
+            class: text,
+            values: (
+              wrap: normal,
+              nowrap: nowrap,
+            )
+          ),
+          "word-wrap": (
+            property: word-break word-wrap,
+            class: text,
+            values: (break: break-word),
+            rtl: false
+          ),
+          "font-size-ouds": (
+            property: font-size,
+            class: fs,
+            values: $ouds-font-sizes
+          ),
+          "font-weight-ouds": (
+            property: font-weight,
+            class: fw,
+            values: $ouds-font-weights
+          ),
+          "shadow": (
+            property: box-shadow,
+            class: shadow,
+            values: (
+              null: var(--#{$prefix}box-shadow),
+              sm: var(--#{$prefix}box-shadow-sm),
+              lg: var(--#{$prefix}box-shadow-lg),
+            ),
+            bootstrap-compatibility: true
+          ),
+          "shadow-ouds": (
+            property: box-shadow,
+            class: shadow,
+            values: $ouds-elevations
+          ),
+        ) !global;
+
         @import "../../utilities/api";
       }
       @include expect() {
@@ -2908,6 +2985,176 @@ $utilities: ();
           column-gap: var(--bs-space-scaled-spacious) !important;
         }
 
+        .font-monospace {
+          font-family: var(--bs-font-monospace) !important;
+        }
+
+        .text-start {
+          text-align: left !important;
+        }
+
+        .text-end {
+          text-align: right !important;
+        }
+
+        .text-center {
+          text-align: center !important;
+        }
+
+        .text-decoration-none {
+          text-decoration: none !important;
+        }
+
+        .text-decoration-underline {
+          text-decoration: underline !important;
+        }
+
+        .text-decoration-line-through {
+          text-decoration: line-through !important;
+        }
+
+        .text-lowercase {
+          text-transform: lowercase !important;
+        }
+
+        .text-uppercase {
+          text-transform: uppercase !important;
+        }
+
+        .text-capitalize {
+          text-transform: capitalize !important;
+        }
+
+        .text-wrap {
+          white-space: normal !important;
+        }
+
+        .text-nowrap {
+          white-space: nowrap !important;
+        }
+
+        /* rtl:begin:remove */
+        .text-break {
+          word-break: break-word !important;
+          word-wrap: break-word !important;
+        }
+
+        /* rtl:end:remove */
+
+        .fs-cs {
+          font-size: var(--bs-font-size-code-small);
+          line-height: var(--bs-font-line-height-code-small);
+
+          /* rtl:remove */
+          letter-spacing: var(--bs-font-letter-spacing-code-small);
+        }
+
+        .fs-cm {
+          font-size: var(--bs-font-size-code-medium);
+          line-height: var(--bs-font-line-height-code-medium);
+
+          /* rtl:remove */
+          letter-spacing: var(--bs-font-letter-spacing-code-medium);
+        }
+
+        .fs-bs {
+          max-width: var(--bs-font-max-width-body-small);
+          font-size: var(--bs-font-size-body-small);
+          line-height: var(--bs-font-line-height-body-small);
+
+          /* rtl:remove */
+          letter-spacing: var(--bs-font-letter-spacing-body-small);
+        }
+
+        .fs-bm {
+          max-width: var(--bs-font-max-width-body-medium);
+          font-size: var(--bs-font-size-body-medium);
+          line-height: var(--bs-font-line-height-body-medium);
+
+          /* rtl:remove */
+          letter-spacing: var(--bs-font-letter-spacing-body-medium);
+        }
+
+        .fs-bl {
+          max-width: var(--bs-font-max-width-body-large);
+          font-size: var(--bs-font-size-body-large);
+          line-height: var(--bs-font-line-height-body-large);
+
+          /* rtl:remove */
+          letter-spacing: var(--bs-font-letter-spacing-body-large);
+        }
+
+        .fs-hs {
+          max-width: var(--bs-font-max-width-heading-small);
+          font-size: var(--bs-font-size-heading-small);
+          line-height: var(--bs-font-line-height-heading-small);
+
+          /* rtl:remove */
+          letter-spacing: var(--bs-font-letter-spacing-heading-small);
+        }
+
+        .fs-hm {
+          max-width: var(--bs-font-max-width-heading-medium);
+          font-size: var(--bs-font-size-heading-medium);
+          line-height: var(--bs-font-line-height-heading-medium);
+
+          /* rtl:remove */
+          letter-spacing: var(--bs-font-letter-spacing-heading-medium);
+        }
+
+        .fs-hl {
+          max-width: var(--bs-font-max-width-heading-large);
+          font-size: var(--bs-font-size-heading-large);
+          line-height: var(--bs-font-line-height-heading-large);
+
+          /* rtl:remove */
+          letter-spacing: var(--bs-font-letter-spacing-heading-large);
+        }
+
+        .fs-hxl {
+          max-width: var(--bs-font-max-width-heading-xlarge);
+          font-size: var(--bs-font-size-heading-xlarge);
+          line-height: var(--bs-font-line-height-heading-xlarge);
+
+          /* rtl:remove */
+          letter-spacing: var(--bs-font-letter-spacing-heading-xlarge);
+        }
+
+        .fs-ds {
+          max-width: var(--bs-font-max-width-display-small);
+          font-size: var(--bs-font-size-display-small);
+          line-height: var(--bs-font-line-height-display-small);
+
+          /* rtl:remove */
+          letter-spacing: var(--bs-font-letter-spacing-display-small);
+        }
+
+        .fs-dm {
+          max-width: var(--bs-font-max-width-display-medium);
+          font-size: var(--bs-font-size-display-medium);
+          line-height: var(--bs-font-line-height-display-medium);
+
+          /* rtl:remove */
+          letter-spacing: var(--bs-font-letter-spacing-display-medium);
+        }
+
+        .fs-dl {
+          max-width: var(--bs-font-max-width-display-large);
+          font-size: var(--bs-font-size-display-large);
+          line-height: var(--bs-font-line-height-display-large);
+
+          /* rtl:remove */
+          letter-spacing: var(--bs-font-letter-spacing-display-large);
+        }
+
+        .fw-normal {
+          font-weight: 400 !important;
+        }
+
+        .fw-bold {
+          font-weight: 700 !important;
+        }
+
         .shadow-none {
           box-shadow: 0 0 0 0 rgba(0, 0, 0, 0) !important;
         }
@@ -3834,6 +4081,18 @@ $utilities: ();
           .column-gap-xs-jumbo {
             column-gap: 64px !important;
           }
+
+          .text-xs-start {
+            text-align: left !important;
+          }
+
+          .text-xs-end {
+            text-align: right !important;
+          }
+
+          .text-xs-center {
+            text-align: center !important;
+          }
         }
 
         @media (min-width: 480px) {
@@ -4730,6 +4989,18 @@ $utilities: ();
           .column-gap-sm-jumbo {
             column-gap: 64px !important;
           }
+
+          .text-sm-start {
+            text-align: left !important;
+          }
+
+          .text-sm-end {
+            text-align: right !important;
+          }
+
+          .text-sm-center {
+            text-align: center !important;
+          }
         }
 
         @media (min-width: 736px) {
@@ -5626,6 +5897,18 @@ $utilities: ();
           .column-gap-md-jumbo {
             column-gap: 64px !important;
           }
+
+          .text-md-start {
+            text-align: left !important;
+          }
+
+          .text-md-end {
+            text-align: right !important;
+          }
+
+          .text-md-center {
+            text-align: center !important;
+          }
         }
 
         @media (min-width: 1024px) {
@@ -6522,6 +6805,18 @@ $utilities: ();
           .column-gap-lg-jumbo {
             column-gap: 64px !important;
           }
+
+          .text-lg-start {
+            text-align: left !important;
+          }
+
+          .text-lg-end {
+            text-align: right !important;
+          }
+
+          .text-lg-center {
+            text-align: center !important;
+          }
         }
 
         @media (min-width: 1320px) {
@@ -7418,6 +7713,18 @@ $utilities: ();
           .column-gap-xl-jumbo {
             column-gap: 64px !important;
           }
+
+          .text-xl-start {
+            text-align: left !important;
+          }
+
+          .text-xl-end {
+            text-align: right !important;
+          }
+
+          .text-xl-center {
+            text-align: center !important;
+          }
         }
 
         @media (min-width: 1640px) {
@@ -8314,6 +8621,18 @@ $utilities: ();
           .column-gap-2xl-jumbo {
             column-gap: 64px !important;
           }
+
+          .text-2xl-start {
+            text-align: left !important;
+          }
+
+          .text-2xl-end {
+            text-align: right !important;
+          }
+
+          .text-2xl-center {
+            text-align: center !important;
+          }
         }
 
         @media (min-width: 1880px) {
@@ -9210,694 +9529,783 @@ $utilities: ();
           .column-gap-3xl-jumbo {
             column-gap: 64px !important;
           }
+
+          .text-3xl-start {
+            text-align: left !important;
+          }
+
+          .text-3xl-end {
+            text-align: right !important;
+          }
+
+          .text-3xl-center {
+            text-align: center !important;
+          }
         }
       }
     }
   }
 
   @include it("generates OUDS and Bootstrap utilities") {
-    $enable-bootstrap-compatibility: true !global;
-    @import "../../functions";
-    @import "../../tokens/raw";
-    @import "../../tokens/semantic";
-    @import "../../tokens/composite";
-    @import "../../tokens/component";
-    @import "../../variables";
-    @import "../../maps";
-    @import "../../mixins";
-
-    $utilities: (
-      "opacity": (
-        property: opacity,
-        values: (
-          0: 0,
-          25: .25,
-          50: .5,
-          75: .75,
-          100: 1,
-        ),
-        bootstrap-compatibility: true
-      ),
-      "opacity-ouds": (
-        property: opacity,
-        values: $ouds-opacities
-      ),
-      "border-ouds": (
-        property: border,
-        values: (
-          null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
-          "none": 0,
-        ),
-      ),
-      "border": (
-        property: border,
-        values: (
-          0: 0,
-        ),
-        bootstrap-compatibility: true
-      ),
-      "border-top": (
-        property: border-top,
-        values: (
-          0: 0,
-        ),
-        bootstrap-compatibility: true
-      ),
-      "border-end": (
-        property: border-right,
-        class: border-end,
-        values: (
-          0: 0,
-        ),
-        bootstrap-compatibility: true
-      ),
-      "border-bottom": (
-        property: border-bottom,
-        values: (
-          0: 0,
-        ),
-        bootstrap-compatibility: true
-      ),
-      "border-start": (
-        property: border-left,
-        class: border-start,
-        values: (
-          0: 0,
-        ),
-        bootstrap-compatibility: true
-      ),
-      "border-color": (
-        property: border-color,
-        class: border,
-        local-vars: (
-          "border-opacity": 1
-        ),
-        values: $utilities-border-colors
-      ),
-      "subtle-border-color": (
-        property: border-color,
-        class: border,
-        values: $utilities-border-subtle
-      ),
-      "border-width": (
-        property: border-width,
-        class: border,
-        values: $border-widths,
-        bootstrap-compatibility: true
-      ),
-      "border-opacity": (
-        css-var: true,
-        class: border-opacity,
-        values: (
-          10: .1,
-          25: .25,
-          50: .5,
-          75: .75,
-          100: 1
-        ),
-        bootstrap-compatibility: true
-      ),
-      "border-top-ouds": (
-        property: border-top,
-        values: (
-          null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
-          "none": $ouds-border-width-none,
-        ),
-      ),
-      "border-end-ouds": (
-        property: border-right,
-        class: border-end,
-        values: (
-          null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
-          "none": 0,
-        ),
-      ),
-      "border-bottom-ouds": (
-        property: border-bottom,
-        values: (
-          null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
-          "none": 0,
-        ),
-      ),
-      "border-start-ouds": (
-        property: border-left,
-        class: border-start,
-        values: (
-          null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
-          "none": 0,
-        ),
-      ),
-      "border-width-ouds": (
-        property: border-width,
-        class: border,
-        values: $ouds-border-widths
-      ),
-      "border-style-ouds": (
-        property: border-style,
-        class: border,
-        values: $ouds-border-styles
-      ),
-      "rounded": (
-        property: border-radius,
-        class: rounded,
-        values: (
-          0: 0,
-          1: var(--#{$prefix}border-radius-sm),
-          2: var(--#{$prefix}border-radius-lg),
-          3: var(--#{$prefix}border-radius-xl),
-          4: var(--#{$prefix}border-radius-xxl),
-          5: $border-radius-xxl * 1.5,
-        ),
-        bootstrap-compatibility: true
-      ),
-      "rounded-top": (
-        property: border-top-left-radius border-top-right-radius,
-        class: rounded-top,
-        values: (
-          0: 0,
-          1: var(--#{$prefix}border-radius-sm),
-          2: var(--#{$prefix}border-radius-lg),
-          3: var(--#{$prefix}border-radius-xl),
-          4: var(--#{$prefix}border-radius-xxl),
-          5: $border-radius-xxl * 1.5,
-        ),
-        bootstrap-compatibility: true
-      ),
-      "rounded-end": (
-        property: border-top-right-radius border-bottom-right-radius,
-        class: rounded-end,
-        values: (
-          0: 0,
-          1: var(--#{$prefix}border-radius-sm),
-          2: var(--#{$prefix}border-radius-lg),
-          3: var(--#{$prefix}border-radius-xl),
-          4: var(--#{$prefix}border-radius-xxl),
-          5: $border-radius-xxl * 1.5,
-        ),
-        bootstrap-compatibility: true
-      ),
-      "rounded-bottom": (
-        property: border-bottom-right-radius border-bottom-left-radius,
-        class: rounded-bottom,
-        values: (
-          0: 0,
-          1: var(--#{$prefix}border-radius-sm),
-          2: var(--#{$prefix}border-radius-lg),
-          3: var(--#{$prefix}border-radius-xl),
-          4: var(--#{$prefix}border-radius-xxl),
-          5: $border-radius-xxl * 1.5,
-        ),
-        bootstrap-compatibility: true
-      ),
-      "rounded-start": (
-        property: border-bottom-left-radius border-top-left-radius,
-        class: rounded-start,
-        values: (
-          0: 0,
-          1: var(--#{$prefix}border-radius-sm),
-          2: var(--#{$prefix}border-radius-lg),
-          3: var(--#{$prefix}border-radius-xl),
-          4: var(--#{$prefix}border-radius-xxl),
-          5: $border-radius-xxl * 1.5,
-        ),
-        bootstrap-compatibility: true
-      ),
-      "rounded-ouds": (
-        property: border-radius,
-        class: rounded,
-        values: $ouds-border-radiuses
-      ),
-      "rounded-top-ouds": (
-        property: border-top-left-radius border-top-right-radius,
-        class: rounded-top,
-        values: $ouds-border-radiuses
-      ),
-      "rounded-end-ouds": (
-        property: border-top-right-radius border-bottom-right-radius,
-        class: rounded-end,
-        values: $ouds-border-radiuses
-      ),
-      "rounded-bottom-ouds": (
-        property: border-bottom-right-radius border-bottom-left-radius,
-        class: rounded-bottom,
-        values: $ouds-border-radiuses
-      ),
-      "rounded-start-ouds": (
-        property: border-bottom-left-radius border-top-left-radius,
-        class: rounded-start,
-        values: $ouds-border-radiuses
-      ),
-      "margin": (
-        responsive: true,
-        property: margin,
-        class: m,
-        values: $spacers,
-        bootstrap-compatibility: true
-      ),
-      "margin-x": (
-        responsive: true,
-        property: margin-right margin-left,
-        class: mx,
-        values: $spacers,
-        bootstrap-compatibility: true
-      ),
-      "margin-y": (
-        responsive: true,
-        property: margin-top margin-bottom,
-        class: my,
-        values: $spacers,
-        bootstrap-compatibility: true
-      ),
-      "margin-top": (
-        responsive: true,
-        property: margin-top,
-        class: mt,
-        values: $spacers,
-        bootstrap-compatibility: true
-      ),
-      "margin-end": (
-        responsive: true,
-        property: margin-right,
-        class: me,
-        values: $spacers,
-        bootstrap-compatibility: true
-      ),
-      "margin-bottom": (
-        responsive: true,
-        property: margin-bottom,
-        class: mb,
-        values: $spacers,
-        bootstrap-compatibility: true
-      ),
-      "margin-start": (
-        responsive: true,
-        property: margin-left,
-        class: ms,
-        values: $spacers,
-        bootstrap-compatibility: true
-      ),
-      "negative-margin": (
-        responsive: true,
-        property: margin,
-        class: m,
-        values: $negative-spacers,
-        bootstrap-compatibility: true
-      ),
-      "negative-margin-x": (
-        responsive: true,
-        property: margin-right margin-left,
-        class: mx,
-        values: $negative-spacers,
-        bootstrap-compatibility: true
-      ),
-      "negative-margin-y": (
-        responsive: true,
-        property: margin-top margin-bottom,
-        class: my,
-        values: $negative-spacers,
-        bootstrap-compatibility: true
-      ),
-      "negative-margin-top": (
-        responsive: true,
-        property: margin-top,
-        class: mt,
-        values: $negative-spacers,
-        bootstrap-compatibility: true
-      ),
-      "negative-margin-end": (
-        responsive: true,
-        property: margin-right,
-        class: me,
-        values: $negative-spacers,
-        bootstrap-compatibility: true
-      ),
-      "negative-margin-bottom": (
-        responsive: true,
-        property: margin-bottom,
-        class: mb,
-        values: $negative-spacers,
-        bootstrap-compatibility: true
-      ),
-      "negative-margin-start": (
-        responsive: true,
-        property: margin-left,
-        class: ms,
-        values: $negative-spacers,
-        bootstrap-compatibility: true
-      ),
-      "padding": (
-        responsive: true,
-        property: padding,
-        class: p,
-        values: $spacers,
-        bootstrap-compatibility: true
-      ),
-      "padding-x": (
-        responsive: true,
-        property: padding-right padding-left,
-        class: px,
-        values: $spacers,
-        bootstrap-compatibility: true
-      ),
-      "padding-y": (
-        responsive: true,
-        property: padding-top padding-bottom,
-        class: py,
-        values: $spacers,
-        bootstrap-compatibility: true
-      ),
-      "padding-top": (
-        responsive: true,
-        property: padding-top,
-        class: pt,
-        values: $spacers,
-        bootstrap-compatibility: true
-      ),
-      "padding-end": (
-        responsive: true,
-        property: padding-right,
-        class: pe,
-        values: $spacers,
-        bootstrap-compatibility: true
-      ),
-      "padding-bottom": (
-        responsive: true,
-        property: padding-bottom,
-        class: pb,
-        values: $spacers,
-        bootstrap-compatibility: true
-      ),
-      "padding-start": (
-        responsive: true,
-        property: padding-left,
-        class: ps,
-        values: $spacers,
-        bootstrap-compatibility: true
-      ),
-      "gap": (
-        responsive: true,
-        property: gap,
-        class: gap,
-        values: $spacers,
-        bootstrap-compatibility: true
-      ),
-      "row-gap": (
-        responsive: true,
-        property: row-gap,
-        class: row-gap,
-        values: $spacers,
-        bootstrap-compatibility: true
-      ),
-      "column-gap": (
-        responsive: true,
-        property: column-gap,
-        class: column-gap,
-        values: $spacers,
-        bootstrap-compatibility: true
-      ),
-      "margin-ouds": (
-        responsive: true,
-        property: margin,
-        class: m,
-        values: map-merge($ouds-dimension-space-fixed, (auto: auto))
-      ),
-      "margin-scaled-ouds": (
-        property: margin,
-        class: m-scaled,
-        values: $ouds-dimension-space-scaled
-      ),
-      "margin-x-ouds": (
-        responsive: true,
-        property: margin-right margin-left,
-        class: mx,
-        values: map-merge($ouds-dimension-space-fixed, (auto: auto))
-      ),
-      "margin-x-scaled-ouds": (
-        property: margin-right margin-left,
-        class: mx-scaled,
-        values: $ouds-dimension-space-scaled
-      ),
-      "margin-y-ouds": (
-        responsive: true,
-        property: margin-top margin-bottom,
-        class: my,
-        values: map-merge($ouds-dimension-space-fixed, (auto: auto))
-      ),
-      "margin-y-scaled-ouds": (
-        property: margin-top margin-bottom,
-        class: my-scaled,
-        values: $ouds-dimension-space-scaled
-      ),
-      "margin-top-ouds": (
-        responsive: true,
-        property: margin-top,
-        class: mt,
-        values: map-merge($ouds-dimension-space-fixed, (auto: auto))
-      ),
-      "margin-top-scaled-ouds": (
-        property: margin-top,
-        class: mt-scaled,
-        values: $ouds-dimension-space-scaled
-      ),
-      "margin-end-ouds": (
-        responsive: true,
-        property: margin-right,
-        class: me,
-        values: map-merge($ouds-dimension-space-fixed, (auto: auto))
-      ),
-      "margin-end-scaled-ouds": (
-        property: margin-right,
-        class: me-scaled,
-        values: $ouds-dimension-space-scaled
-      ),
-      "margin-bottom-ouds": (
-        responsive: true,
-        property: margin-bottom,
-        class: mb,
-        values: map-merge($ouds-dimension-space-fixed, (auto: auto))
-      ),
-      "margin-bottom-scaled-ouds": (
-        property: margin-bottom,
-        class: mb-scaled,
-        values: $ouds-dimension-space-scaled
-      ),
-      "margin-start-ouds": (
-        responsive: true,
-        property: margin-left,
-        class: ms,
-        values: map-merge($ouds-dimension-space-fixed, (auto: auto))
-      ),
-      "margin-start-scaled-ouds": (
-        property: margin-left,
-        class: ms-scaled,
-        values: $ouds-dimension-space-scaled
-      ),
-      "negative-margin-ouds": (
-        responsive: true,
-        property: margin,
-        class: m,
-        values: $ouds-dimension-negative-space-fixed
-      ),
-      "negative-margin-scaled-ouds": (
-        property: margin,
-        class: m-scaled,
-        values: $ouds-dimension-negative-space-scaled
-      ),
-      "negative-margin-x-ouds": (
-        responsive: true,
-        property: margin-right margin-left,
-        class: mx,
-        values: $ouds-dimension-negative-space-fixed
-      ),
-      "negative-margin-x-scaled-ouds": (
-        property: margin-right margin-left,
-        class: mx-scaled,
-        values: $ouds-dimension-negative-space-scaled
-      ),
-      "negative-margin-y-ouds": (
-        responsive: true,
-        property: margin-top margin-bottom,
-        class: my,
-        values: $ouds-dimension-negative-space-fixed
-      ),
-      "negative-margin-y-scaled-ouds": (
-        property: margin-top margin-bottom,
-        class: my-scaled,
-        values: $ouds-dimension-negative-space-scaled
-      ),
-      "negative-margin-top-ouds": (
-        responsive: true,
-        property: margin-top,
-        class: mt,
-        values: $ouds-dimension-negative-space-fixed
-      ),
-      "negative-margin-top-scaled-ouds": (
-        property: margin-top,
-        class: mt-scaled,
-        values: $ouds-dimension-negative-space-scaled
-      ),
-      "negative-margin-end-ouds": (
-        responsive: true,
-        property: margin-right,
-        class: me,
-        values: $ouds-dimension-negative-space-fixed
-      ),
-      "negative-margin-end-scaled-ouds": (
-        property: margin-right,
-        class: me-scaled,
-        values: $ouds-dimension-negative-space-scaled
-      ),
-      "negative-margin-bottom-ouds": (
-        responsive: true,
-        property: margin-bottom,
-        class: mb,
-        values: $ouds-dimension-negative-space-fixed
-      ),
-      "negative-margin-bottom-scaled-ouds": (
-        property: margin-bottom,
-        class: mb-scaled,
-        values: $ouds-dimension-negative-space-scaled
-      ),
-      "negative-margin-start-ouds": (
-        responsive: true,
-        property: margin-left,
-        class: ms,
-        values: $ouds-dimension-negative-space-fixed
-      ),
-      "negative-margin-start-scaled-ouds": (
-        property: margin-left,
-        class: ms-scaled,
-        values: $ouds-dimension-negative-space-scaled
-      ),
-      "padding-ouds": (
-        responsive: true,
-        property: padding,
-        class: p,
-        values: $ouds-dimension-space-fixed
-      ),
-      "padding-scaled-ouds": (
-        property: padding,
-        class: p-scaled,
-        values: $ouds-dimension-space-scaled
-      ),
-      "padding-x-ouds": (
-        responsive: true,
-        property: padding-right padding-left,
-        class: px,
-        values: $ouds-dimension-space-fixed
-      ),
-      "padding-x-scaled-ouds": (
-        property: padding-right padding-left,
-        class: px-scaled,
-        values: $ouds-dimension-space-scaled
-      ),
-      "padding-y-ouds": (
-        responsive: true,
-        property: padding-top padding-bottom,
-        class: py,
-        values: $ouds-dimension-space-fixed
-      ),
-      "padding-y-scaled-ouds": (
-        property: padding-top padding-bottom,
-        class: py-scaled,
-        values: $ouds-dimension-space-scaled
-      ),
-      "padding-top-ouds": (
-        responsive: true,
-        property: padding-top,
-        class: pt,
-        values: $ouds-dimension-space-fixed
-      ),
-      "padding-top-scaled-ouds": (
-        property: padding-top,
-        class: pt-scaled,
-        values: $ouds-dimension-space-scaled
-      ),
-      "padding-end-ouds": (
-        responsive: true,
-        property: padding-right,
-        class: pe,
-        values: $ouds-dimension-space-fixed
-      ),
-      "padding-end-scaled-ouds": (
-        property: padding-right,
-        class: pe-scaled,
-        values: $ouds-dimension-space-scaled
-      ),
-      "padding-bottom-ouds": (
-        responsive: true,
-        property: padding-bottom,
-        class: pb,
-        values: $ouds-dimension-space-fixed
-      ),
-      "padding-bottom-scaled-ouds": (
-        property: padding-bottom,
-        class: pb-scaled,
-        values: $ouds-dimension-space-scaled
-      ),
-      "padding-start-ouds": (
-        responsive: true,
-        property: padding-left,
-        class: ps,
-        values: $ouds-dimension-space-fixed
-      ),
-      "padding-start-scaled-ouds": (
-        property: padding-left,
-        class: ps-scaled,
-        values: $ouds-dimension-space-scaled
-      ),
-      "gap-ouds": (
-        responsive: true,
-        property: gap,
-        class: gap,
-        values: $ouds-dimension-space-fixed
-      ),
-      "gap-scaled-ouds": (
-        property: gap,
-        class: gap-scaled,
-        values: $ouds-dimension-space-scaled
-      ),
-      "row-gap-ouds": (
-        responsive: true,
-        property: row-gap,
-        class: row-gap,
-        values: $ouds-dimension-space-fixed
-      ),
-      "row-gap-scaled-ouds": (
-        property: row-gap,
-        class: row-gap-scaled,
-        values: $ouds-dimension-space-scaled
-      ),
-      "column-gap-ouds": (
-        responsive: true,
-        property: column-gap,
-        class: column-gap,
-        values: $ouds-dimension-space-fixed
-      ),
-      "column-gap-scaled-ouds": (
-        property: column-gap,
-        class: column-gap-scaled,
-        values: $ouds-dimension-space-scaled
-      ),
-      "shadow": (
-        property: box-shadow,
-        class: shadow,
-        values: (
-          null: var(--#{$prefix}box-shadow),
-          sm: var(--#{$prefix}box-shadow-sm),
-          lg: var(--#{$prefix}box-shadow-lg),
-        ),
-        bootstrap-compatibility: true
-      ),
-      "shadow-ouds": (
-        property: box-shadow,
-        class: shadow,
-        values: $ouds-elevations
-      ),
-    ) !global;
-
     @include assert() {
       @include output() {
+        $enable-bootstrap-compatibility: true !global;
+        @import "../../functions";
+        @import "../../tokens/raw";
+        @import "../../tokens/semantic";
+        @import "../../tokens/composite";
+        @import "../../tokens/component";
+        @import "../../variables";
+        @import "../../maps";
+        @import "../../mixins";
+
+        $utilities: (
+          "opacity": (
+            property: opacity,
+            values: (
+              0: 0,
+              25: .25,
+              50: .5,
+              75: .75,
+              100: 1,
+            ),
+            bootstrap-compatibility: true
+          ),
+          "opacity-ouds": (
+            property: opacity,
+            values: $ouds-opacities
+          ),
+          "border-ouds": (
+            property: border,
+            values: (
+              null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
+              "none": 0,
+            ),
+          ),
+          "border": (
+            property: border,
+            values: (
+              0: 0,
+            ),
+            bootstrap-compatibility: true
+          ),
+          "border-top": (
+            property: border-top,
+            values: (
+              0: 0,
+            ),
+            bootstrap-compatibility: true
+          ),
+          "border-end": (
+            property: border-right,
+            class: border-end,
+            values: (
+              0: 0,
+            ),
+            bootstrap-compatibility: true
+          ),
+          "border-bottom": (
+            property: border-bottom,
+            values: (
+              0: 0,
+            ),
+            bootstrap-compatibility: true
+          ),
+          "border-start": (
+            property: border-left,
+            class: border-start,
+            values: (
+              0: 0,
+            ),
+            bootstrap-compatibility: true
+          ),
+          "border-color": (
+            property: border-color,
+            class: border,
+            local-vars: (
+              "border-opacity": 1
+            ),
+            values: $utilities-border-colors
+          ),
+          "subtle-border-color": (
+            property: border-color,
+            class: border,
+            values: $utilities-border-subtle
+          ),
+          "border-width": (
+            property: border-width,
+            class: border,
+            values: $border-widths,
+            bootstrap-compatibility: true
+          ),
+          "border-opacity": (
+            css-var: true,
+            class: border-opacity,
+            values: (
+              10: .1,
+              25: .25,
+              50: .5,
+              75: .75,
+              100: 1
+            ),
+            bootstrap-compatibility: true
+          ),
+          "border-top-ouds": (
+            property: border-top,
+            values: (
+              null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
+              "none": $ouds-border-width-none,
+            ),
+          ),
+          "border-end-ouds": (
+            property: border-right,
+            class: border-end,
+            values: (
+              null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
+              "none": 0,
+            ),
+          ),
+          "border-bottom-ouds": (
+            property: border-bottom,
+            values: (
+              null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
+              "none": 0,
+            ),
+          ),
+          "border-start-ouds": (
+            property: border-left,
+            class: border-start,
+            values: (
+              null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
+              "none": 0,
+            ),
+          ),
+          "border-width-ouds": (
+            property: border-width,
+            class: border,
+            values: $ouds-border-widths
+          ),
+          "border-style-ouds": (
+            property: border-style,
+            class: border,
+            values: $ouds-border-styles
+          ),
+          "rounded": (
+            property: border-radius,
+            class: rounded,
+            values: (
+              0: 0,
+              1: var(--#{$prefix}border-radius-sm),
+              2: var(--#{$prefix}border-radius-lg),
+              3: var(--#{$prefix}border-radius-xl),
+              4: var(--#{$prefix}border-radius-xxl),
+              5: $border-radius-xxl * 1.5,
+            ),
+            bootstrap-compatibility: true
+          ),
+          "rounded-top": (
+            property: border-top-left-radius border-top-right-radius,
+            class: rounded-top,
+            values: (
+              0: 0,
+              1: var(--#{$prefix}border-radius-sm),
+              2: var(--#{$prefix}border-radius-lg),
+              3: var(--#{$prefix}border-radius-xl),
+              4: var(--#{$prefix}border-radius-xxl),
+              5: $border-radius-xxl * 1.5,
+            ),
+            bootstrap-compatibility: true
+          ),
+          "rounded-end": (
+            property: border-top-right-radius border-bottom-right-radius,
+            class: rounded-end,
+            values: (
+              0: 0,
+              1: var(--#{$prefix}border-radius-sm),
+              2: var(--#{$prefix}border-radius-lg),
+              3: var(--#{$prefix}border-radius-xl),
+              4: var(--#{$prefix}border-radius-xxl),
+              5: $border-radius-xxl * 1.5,
+            ),
+            bootstrap-compatibility: true
+          ),
+          "rounded-bottom": (
+            property: border-bottom-right-radius border-bottom-left-radius,
+            class: rounded-bottom,
+            values: (
+              0: 0,
+              1: var(--#{$prefix}border-radius-sm),
+              2: var(--#{$prefix}border-radius-lg),
+              3: var(--#{$prefix}border-radius-xl),
+              4: var(--#{$prefix}border-radius-xxl),
+              5: $border-radius-xxl * 1.5,
+            ),
+            bootstrap-compatibility: true
+          ),
+          "rounded-start": (
+            property: border-bottom-left-radius border-top-left-radius,
+            class: rounded-start,
+            values: (
+              0: 0,
+              1: var(--#{$prefix}border-radius-sm),
+              2: var(--#{$prefix}border-radius-lg),
+              3: var(--#{$prefix}border-radius-xl),
+              4: var(--#{$prefix}border-radius-xxl),
+              5: $border-radius-xxl * 1.5,
+            ),
+            bootstrap-compatibility: true
+          ),
+          "rounded-ouds": (
+            property: border-radius,
+            class: rounded,
+            values: $ouds-border-radiuses
+          ),
+          "rounded-top-ouds": (
+            property: border-top-left-radius border-top-right-radius,
+            class: rounded-top,
+            values: $ouds-border-radiuses
+          ),
+          "rounded-end-ouds": (
+            property: border-top-right-radius border-bottom-right-radius,
+            class: rounded-end,
+            values: $ouds-border-radiuses
+          ),
+          "rounded-bottom-ouds": (
+            property: border-bottom-right-radius border-bottom-left-radius,
+            class: rounded-bottom,
+            values: $ouds-border-radiuses
+          ),
+          "rounded-start-ouds": (
+            property: border-bottom-left-radius border-top-left-radius,
+            class: rounded-start,
+            values: $ouds-border-radiuses
+          ),
+          "margin": (
+            responsive: true,
+            property: margin,
+            class: m,
+            values: $spacers,
+            bootstrap-compatibility: true
+          ),
+          "margin-x": (
+            responsive: true,
+            property: margin-right margin-left,
+            class: mx,
+            values: $spacers,
+            bootstrap-compatibility: true
+          ),
+          "margin-y": (
+            responsive: true,
+            property: margin-top margin-bottom,
+            class: my,
+            values: $spacers,
+            bootstrap-compatibility: true
+          ),
+          "margin-top": (
+            responsive: true,
+            property: margin-top,
+            class: mt,
+            values: $spacers,
+            bootstrap-compatibility: true
+          ),
+          "margin-end": (
+            responsive: true,
+            property: margin-right,
+            class: me,
+            values: $spacers,
+            bootstrap-compatibility: true
+          ),
+          "margin-bottom": (
+            responsive: true,
+            property: margin-bottom,
+            class: mb,
+            values: $spacers,
+            bootstrap-compatibility: true
+          ),
+          "margin-start": (
+            responsive: true,
+            property: margin-left,
+            class: ms,
+            values: $spacers,
+            bootstrap-compatibility: true
+          ),
+          "negative-margin": (
+            responsive: true,
+            property: margin,
+            class: m,
+            values: $negative-spacers,
+            bootstrap-compatibility: true
+          ),
+          "negative-margin-x": (
+            responsive: true,
+            property: margin-right margin-left,
+            class: mx,
+            values: $negative-spacers,
+            bootstrap-compatibility: true
+          ),
+          "negative-margin-y": (
+            responsive: true,
+            property: margin-top margin-bottom,
+            class: my,
+            values: $negative-spacers,
+            bootstrap-compatibility: true
+          ),
+          "negative-margin-top": (
+            responsive: true,
+            property: margin-top,
+            class: mt,
+            values: $negative-spacers,
+            bootstrap-compatibility: true
+          ),
+          "negative-margin-end": (
+            responsive: true,
+            property: margin-right,
+            class: me,
+            values: $negative-spacers,
+            bootstrap-compatibility: true
+          ),
+          "negative-margin-bottom": (
+            responsive: true,
+            property: margin-bottom,
+            class: mb,
+            values: $negative-spacers,
+            bootstrap-compatibility: true
+          ),
+          "negative-margin-start": (
+            responsive: true,
+            property: margin-left,
+            class: ms,
+            values: $negative-spacers,
+            bootstrap-compatibility: true
+          ),
+          "padding": (
+            responsive: true,
+            property: padding,
+            class: p,
+            values: $spacers,
+            bootstrap-compatibility: true
+          ),
+          "padding-x": (
+            responsive: true,
+            property: padding-right padding-left,
+            class: px,
+            values: $spacers,
+            bootstrap-compatibility: true
+          ),
+          "padding-y": (
+            responsive: true,
+            property: padding-top padding-bottom,
+            class: py,
+            values: $spacers,
+            bootstrap-compatibility: true
+          ),
+          "padding-top": (
+            responsive: true,
+            property: padding-top,
+            class: pt,
+            values: $spacers,
+            bootstrap-compatibility: true
+          ),
+          "padding-end": (
+            responsive: true,
+            property: padding-right,
+            class: pe,
+            values: $spacers,
+            bootstrap-compatibility: true
+          ),
+          "padding-bottom": (
+            responsive: true,
+            property: padding-bottom,
+            class: pb,
+            values: $spacers,
+            bootstrap-compatibility: true
+          ),
+          "padding-start": (
+            responsive: true,
+            property: padding-left,
+            class: ps,
+            values: $spacers,
+            bootstrap-compatibility: true
+          ),
+          "gap": (
+            responsive: true,
+            property: gap,
+            class: gap,
+            values: $spacers,
+            bootstrap-compatibility: true
+          ),
+          "row-gap": (
+            responsive: true,
+            property: row-gap,
+            class: row-gap,
+            values: $spacers,
+            bootstrap-compatibility: true
+          ),
+          "column-gap": (
+            responsive: true,
+            property: column-gap,
+            class: column-gap,
+            values: $spacers,
+            bootstrap-compatibility: true
+          ),
+          "margin-ouds": (
+            responsive: true,
+            property: margin,
+            class: m,
+            values: map-merge($ouds-dimension-space-fixed, (auto: auto))
+          ),
+          "margin-scaled-ouds": (
+            property: margin,
+            class: m-scaled,
+            values: $ouds-dimension-space-scaled
+          ),
+          "margin-x-ouds": (
+            responsive: true,
+            property: margin-right margin-left,
+            class: mx,
+            values: map-merge($ouds-dimension-space-fixed, (auto: auto))
+          ),
+          "margin-x-scaled-ouds": (
+            property: margin-right margin-left,
+            class: mx-scaled,
+            values: $ouds-dimension-space-scaled
+          ),
+          "margin-y-ouds": (
+            responsive: true,
+            property: margin-top margin-bottom,
+            class: my,
+            values: map-merge($ouds-dimension-space-fixed, (auto: auto))
+          ),
+          "margin-y-scaled-ouds": (
+            property: margin-top margin-bottom,
+            class: my-scaled,
+            values: $ouds-dimension-space-scaled
+          ),
+          "margin-top-ouds": (
+            responsive: true,
+            property: margin-top,
+            class: mt,
+            values: map-merge($ouds-dimension-space-fixed, (auto: auto))
+          ),
+          "margin-top-scaled-ouds": (
+            property: margin-top,
+            class: mt-scaled,
+            values: $ouds-dimension-space-scaled
+          ),
+          "margin-end-ouds": (
+            responsive: true,
+            property: margin-right,
+            class: me,
+            values: map-merge($ouds-dimension-space-fixed, (auto: auto))
+          ),
+          "margin-end-scaled-ouds": (
+            property: margin-right,
+            class: me-scaled,
+            values: $ouds-dimension-space-scaled
+          ),
+          "margin-bottom-ouds": (
+            responsive: true,
+            property: margin-bottom,
+            class: mb,
+            values: map-merge($ouds-dimension-space-fixed, (auto: auto))
+          ),
+          "margin-bottom-scaled-ouds": (
+            property: margin-bottom,
+            class: mb-scaled,
+            values: $ouds-dimension-space-scaled
+          ),
+          "margin-start-ouds": (
+            responsive: true,
+            property: margin-left,
+            class: ms,
+            values: map-merge($ouds-dimension-space-fixed, (auto: auto))
+          ),
+          "margin-start-scaled-ouds": (
+            property: margin-left,
+            class: ms-scaled,
+            values: $ouds-dimension-space-scaled
+          ),
+          "negative-margin-ouds": (
+            responsive: true,
+            property: margin,
+            class: m,
+            values: $ouds-dimension-negative-space-fixed
+          ),
+          "negative-margin-scaled-ouds": (
+            property: margin,
+            class: m-scaled,
+            values: $ouds-dimension-negative-space-scaled
+          ),
+          "negative-margin-x-ouds": (
+            responsive: true,
+            property: margin-right margin-left,
+            class: mx,
+            values: $ouds-dimension-negative-space-fixed
+          ),
+          "negative-margin-x-scaled-ouds": (
+            property: margin-right margin-left,
+            class: mx-scaled,
+            values: $ouds-dimension-negative-space-scaled
+          ),
+          "negative-margin-y-ouds": (
+            responsive: true,
+            property: margin-top margin-bottom,
+            class: my,
+            values: $ouds-dimension-negative-space-fixed
+          ),
+          "negative-margin-y-scaled-ouds": (
+            property: margin-top margin-bottom,
+            class: my-scaled,
+            values: $ouds-dimension-negative-space-scaled
+          ),
+          "negative-margin-top-ouds": (
+            responsive: true,
+            property: margin-top,
+            class: mt,
+            values: $ouds-dimension-negative-space-fixed
+          ),
+          "negative-margin-top-scaled-ouds": (
+            property: margin-top,
+            class: mt-scaled,
+            values: $ouds-dimension-negative-space-scaled
+          ),
+          "negative-margin-end-ouds": (
+            responsive: true,
+            property: margin-right,
+            class: me,
+            values: $ouds-dimension-negative-space-fixed
+          ),
+          "negative-margin-end-scaled-ouds": (
+            property: margin-right,
+            class: me-scaled,
+            values: $ouds-dimension-negative-space-scaled
+          ),
+          "negative-margin-bottom-ouds": (
+            responsive: true,
+            property: margin-bottom,
+            class: mb,
+            values: $ouds-dimension-negative-space-fixed
+          ),
+          "negative-margin-bottom-scaled-ouds": (
+            property: margin-bottom,
+            class: mb-scaled,
+            values: $ouds-dimension-negative-space-scaled
+          ),
+          "negative-margin-start-ouds": (
+            responsive: true,
+            property: margin-left,
+            class: ms,
+            values: $ouds-dimension-negative-space-fixed
+          ),
+          "negative-margin-start-scaled-ouds": (
+            property: margin-left,
+            class: ms-scaled,
+            values: $ouds-dimension-negative-space-scaled
+          ),
+          "padding-ouds": (
+            responsive: true,
+            property: padding,
+            class: p,
+            values: $ouds-dimension-space-fixed
+          ),
+          "padding-scaled-ouds": (
+            property: padding,
+            class: p-scaled,
+            values: $ouds-dimension-space-scaled
+          ),
+          "padding-x-ouds": (
+            responsive: true,
+            property: padding-right padding-left,
+            class: px,
+            values: $ouds-dimension-space-fixed
+          ),
+          "padding-x-scaled-ouds": (
+            property: padding-right padding-left,
+            class: px-scaled,
+            values: $ouds-dimension-space-scaled
+          ),
+          "padding-y-ouds": (
+            responsive: true,
+            property: padding-top padding-bottom,
+            class: py,
+            values: $ouds-dimension-space-fixed
+          ),
+          "padding-y-scaled-ouds": (
+            property: padding-top padding-bottom,
+            class: py-scaled,
+            values: $ouds-dimension-space-scaled
+          ),
+          "padding-top-ouds": (
+            responsive: true,
+            property: padding-top,
+            class: pt,
+            values: $ouds-dimension-space-fixed
+          ),
+          "padding-top-scaled-ouds": (
+            property: padding-top,
+            class: pt-scaled,
+            values: $ouds-dimension-space-scaled
+          ),
+          "padding-end-ouds": (
+            responsive: true,
+            property: padding-right,
+            class: pe,
+            values: $ouds-dimension-space-fixed
+          ),
+          "padding-end-scaled-ouds": (
+            property: padding-right,
+            class: pe-scaled,
+            values: $ouds-dimension-space-scaled
+          ),
+          "padding-bottom-ouds": (
+            responsive: true,
+            property: padding-bottom,
+            class: pb,
+            values: $ouds-dimension-space-fixed
+          ),
+          "padding-bottom-scaled-ouds": (
+            property: padding-bottom,
+            class: pb-scaled,
+            values: $ouds-dimension-space-scaled
+          ),
+          "padding-start-ouds": (
+            responsive: true,
+            property: padding-left,
+            class: ps,
+            values: $ouds-dimension-space-fixed
+          ),
+          "padding-start-scaled-ouds": (
+            property: padding-left,
+            class: ps-scaled,
+            values: $ouds-dimension-space-scaled
+          ),
+          "gap-ouds": (
+            responsive: true,
+            property: gap,
+            class: gap,
+            values: $ouds-dimension-space-fixed
+          ),
+          "gap-scaled-ouds": (
+            property: gap,
+            class: gap-scaled,
+            values: $ouds-dimension-space-scaled
+          ),
+          "row-gap-ouds": (
+            responsive: true,
+            property: row-gap,
+            class: row-gap,
+            values: $ouds-dimension-space-fixed
+          ),
+          "row-gap-scaled-ouds": (
+            property: row-gap,
+            class: row-gap-scaled,
+            values: $ouds-dimension-space-scaled
+          ),
+          "column-gap-ouds": (
+            responsive: true,
+            property: column-gap,
+            class: column-gap,
+            values: $ouds-dimension-space-fixed
+          ),
+          "column-gap-scaled-ouds": (
+            property: column-gap,
+            class: column-gap-scaled,
+            values: $ouds-dimension-space-scaled
+          ),
+          "font-family": (
+            property: font-family,
+            class: font,
+            values: (monospace: var(--#{$prefix}font-monospace))
+          ),
+          "font-size": (
+            property: font-size,
+            class: fs,
+            values: $font-sizes,
+            bootstrap-compatibility: true
+          ),
+          "font-weight": (
+            property: font-weight,
+            class: fw,
+            values: (
+              lighter: $font-weight-lighter,
+              light: $font-weight-light,
+              medium: $font-weight-medium,
+              semibold: $font-weight-semibold,
+              bolder: $font-weight-bolder
+            ),
+            bootstrap-compatibility: true
+          ),
+          "line-height": (
+            property: line-height,
+            class: lh,
+            values: (
+              1: 1,
+              sm: 1.25,
+              base: 1.5,
+              lg: 2,
+            ),
+            bootstrap-compatibility: true
+          ),
+          "text-align": (
+            responsive: true,
+            property: text-align,
+            class: text,
+            values: (
+              start: left,
+              end: right,
+              center: center,
+            )
+          ),
+          "text-decoration": (
+            property: text-decoration,
+            values: none underline line-through
+          ),
+          "text-transform": (
+            property: text-transform,
+            class: text,
+            values: lowercase uppercase capitalize
+          ),
+          "white-space": (
+            property: white-space,
+            class: text,
+            values: (
+              wrap: normal,
+              nowrap: nowrap,
+            )
+          ),
+          "word-wrap": (
+            property: word-break word-wrap,
+            class: text,
+            values: (break: break-word),
+            rtl: false
+          ),
+          "font-size-ouds": (
+            property: font-size,
+            class: fs,
+            values: $ouds-font-sizes
+          ),
+          "font-weight-ouds": (
+            property: font-weight,
+            class: fw,
+            values: $ouds-font-weights
+          ),
+          "shadow": (
+            property: box-shadow,
+            class: shadow,
+            values: (
+              null: var(--#{$prefix}box-shadow),
+              sm: var(--#{$prefix}box-shadow-sm),
+              lg: var(--#{$prefix}box-shadow-lg),
+            ),
+            bootstrap-compatibility: true
+          ),
+          "shadow-ouds": (
+            property: box-shadow,
+            class: shadow,
+            values: $ouds-elevations
+          ),
+        ) !global;
+
         @import "../../utilities/api";
       }
       @include expect() {
@@ -12783,6 +13191,216 @@ $utilities: ();
           column-gap: var(--bs-space-scaled-spacious) !important;
         }
 
+        .font-monospace {
+          font-family: var(--bs-font-monospace) !important;
+        }
+
+        .fs-1 {
+          font-size: var(--bs-font-size-heading-xlarge) !important;
+        }
+
+        .fs-2 {
+          font-size: var(--bs-font-size-heading-large) !important;
+        }
+
+        .fs-3 {
+          font-size: var(--bs-font-size-heading-medium) !important;
+        }
+
+        .fs-4 {
+          font-size: var(--bs-font-size-heading-small) !important;
+        }
+
+        .fs-5 {
+          font-size: var(--bs-font-size-body-large) !important;
+        }
+
+        .fs-6 {
+          font-size: var(--bs-font-size-body-medium) !important;
+        }
+
+        .lh-1 {
+          line-height: 1 !important;
+        }
+
+        .lh-sm {
+          line-height: 1.25 !important;
+        }
+
+        .lh-base {
+          line-height: 1.5 !important;
+        }
+
+        .lh-lg {
+          line-height: 2 !important;
+        }
+
+        .text-start {
+          text-align: left !important;
+        }
+
+        .text-end {
+          text-align: right !important;
+        }
+
+        .text-center {
+          text-align: center !important;
+        }
+
+        .text-decoration-none {
+          text-decoration: none !important;
+        }
+
+        .text-decoration-underline {
+          text-decoration: underline !important;
+        }
+
+        .text-decoration-line-through {
+          text-decoration: line-through !important;
+        }
+
+        .text-lowercase {
+          text-transform: lowercase !important;
+        }
+
+        .text-uppercase {
+          text-transform: uppercase !important;
+        }
+
+        .text-capitalize {
+          text-transform: capitalize !important;
+        }
+
+        .text-wrap {
+          white-space: normal !important;
+        }
+
+        .text-nowrap {
+          white-space: nowrap !important;
+        }
+
+        /* rtl:begin:remove */
+        .text-break {
+          word-break: break-word !important;
+          word-wrap: break-word !important;
+        }
+
+        /* rtl:end:remove */
+
+        .fs-cs {
+          font-size: var(--bs-font-size-code-small);
+          line-height: var(--bs-font-line-height-code-small);
+
+          /* rtl:remove */
+          letter-spacing: var(--bs-font-letter-spacing-code-small);
+        }
+
+        .fs-cm {
+          font-size: var(--bs-font-size-code-medium);
+          line-height: var(--bs-font-line-height-code-medium);
+
+          /* rtl:remove */
+          letter-spacing: var(--bs-font-letter-spacing-code-medium);
+        }
+
+        .fs-bs {
+          max-width: var(--bs-font-max-width-body-small);
+          font-size: var(--bs-font-size-body-small);
+          line-height: var(--bs-font-line-height-body-small);
+
+          /* rtl:remove */
+          letter-spacing: var(--bs-font-letter-spacing-body-small);
+        }
+
+        .fs-bm {
+          max-width: var(--bs-font-max-width-body-medium);
+          font-size: var(--bs-font-size-body-medium);
+          line-height: var(--bs-font-line-height-body-medium);
+
+          /* rtl:remove */
+          letter-spacing: var(--bs-font-letter-spacing-body-medium);
+        }
+
+        .fs-bl {
+          max-width: var(--bs-font-max-width-body-large);
+          font-size: var(--bs-font-size-body-large);
+          line-height: var(--bs-font-line-height-body-large);
+
+          /* rtl:remove */
+          letter-spacing: var(--bs-font-letter-spacing-body-large);
+        }
+
+        .fs-hs {
+          max-width: var(--bs-font-max-width-heading-small);
+          font-size: var(--bs-font-size-heading-small);
+          line-height: var(--bs-font-line-height-heading-small);
+
+          /* rtl:remove */
+          letter-spacing: var(--bs-font-letter-spacing-heading-small);
+        }
+
+        .fs-hm {
+          max-width: var(--bs-font-max-width-heading-medium);
+          font-size: var(--bs-font-size-heading-medium);
+          line-height: var(--bs-font-line-height-heading-medium);
+
+          /* rtl:remove */
+          letter-spacing: var(--bs-font-letter-spacing-heading-medium);
+        }
+
+        .fs-hl {
+          max-width: var(--bs-font-max-width-heading-large);
+          font-size: var(--bs-font-size-heading-large);
+          line-height: var(--bs-font-line-height-heading-large);
+
+          /* rtl:remove */
+          letter-spacing: var(--bs-font-letter-spacing-heading-large);
+        }
+
+        .fs-hxl {
+          max-width: var(--bs-font-max-width-heading-xlarge);
+          font-size: var(--bs-font-size-heading-xlarge);
+          line-height: var(--bs-font-line-height-heading-xlarge);
+
+          /* rtl:remove */
+          letter-spacing: var(--bs-font-letter-spacing-heading-xlarge);
+        }
+
+        .fs-ds {
+          max-width: var(--bs-font-max-width-display-small);
+          font-size: var(--bs-font-size-display-small);
+          line-height: var(--bs-font-line-height-display-small);
+
+          /* rtl:remove */
+          letter-spacing: var(--bs-font-letter-spacing-display-small);
+        }
+
+        .fs-dm {
+          max-width: var(--bs-font-max-width-display-medium);
+          font-size: var(--bs-font-size-display-medium);
+          line-height: var(--bs-font-line-height-display-medium);
+
+          /* rtl:remove */
+          letter-spacing: var(--bs-font-letter-spacing-display-medium);
+        }
+
+        .fs-dl {
+          max-width: var(--bs-font-max-width-display-large);
+          font-size: var(--bs-font-size-display-large);
+          line-height: var(--bs-font-line-height-display-large);
+
+          /* rtl:remove */
+          letter-spacing: var(--bs-font-letter-spacing-display-large);
+        }
+
+        .fw-normal {
+          font-weight: 400 !important;
+        }
+
+        .fw-bold {
+          font-weight: 700 !important;
+        }
+
         .shadow {
           box-shadow: var(--bs-box-shadow) !important;
         }
@@ -14153,6 +14771,18 @@ $utilities: ();
           .column-gap-xs-jumbo {
             column-gap: 64px !important;
           }
+
+          .text-xs-start {
+            text-align: left !important;
+          }
+
+          .text-xs-end {
+            text-align: right !important;
+          }
+
+          .text-xs-center {
+            text-align: center !important;
+          }
         }
 
         @media (min-width: 480px) {
@@ -15481,6 +16111,18 @@ $utilities: ();
           .column-gap-sm-jumbo {
             column-gap: 64px !important;
           }
+
+          .text-sm-start {
+            text-align: left !important;
+          }
+
+          .text-sm-end {
+            text-align: right !important;
+          }
+
+          .text-sm-center {
+            text-align: center !important;
+          }
         }
 
         @media (min-width: 736px) {
@@ -16809,6 +17451,18 @@ $utilities: ();
           .column-gap-md-jumbo {
             column-gap: 64px !important;
           }
+
+          .text-md-start {
+            text-align: left !important;
+          }
+
+          .text-md-end {
+            text-align: right !important;
+          }
+
+          .text-md-center {
+            text-align: center !important;
+          }
         }
 
         @media (min-width: 1024px) {
@@ -18137,6 +18791,18 @@ $utilities: ();
           .column-gap-lg-jumbo {
             column-gap: 64px !important;
           }
+
+          .text-lg-start {
+            text-align: left !important;
+          }
+
+          .text-lg-end {
+            text-align: right !important;
+          }
+
+          .text-lg-center {
+            text-align: center !important;
+          }
         }
 
         @media (min-width: 1320px) {
@@ -19465,6 +20131,18 @@ $utilities: ();
           .column-gap-xl-jumbo {
             column-gap: 64px !important;
           }
+
+          .text-xl-start {
+            text-align: left !important;
+          }
+
+          .text-xl-end {
+            text-align: right !important;
+          }
+
+          .text-xl-center {
+            text-align: center !important;
+          }
         }
 
         @media (min-width: 1640px) {
@@ -20793,6 +21471,18 @@ $utilities: ();
           .column-gap-xxl-jumbo {
             column-gap: 64px !important;
           }
+
+          .text-xxl-start {
+            text-align: left !important;
+          }
+
+          .text-xxl-end {
+            text-align: right !important;
+          }
+
+          .text-xxl-center {
+            text-align: center !important;
+          }
         }
 
         @media (min-width: 1640px) {
@@ -22121,6 +22811,18 @@ $utilities: ();
           .column-gap-2xl-jumbo {
             column-gap: 64px !important;
           }
+
+          .text-2xl-start {
+            text-align: left !important;
+          }
+
+          .text-2xl-end {
+            text-align: right !important;
+          }
+
+          .text-2xl-center {
+            text-align: center !important;
+          }
         }
 
         @media (min-width: 1880px) {
@@ -23449,5723 +24151,17 @@ $utilities: ();
           .column-gap-3xl-jumbo {
             column-gap: 64px !important;
           }
-        }
-      }
-    }
-  }
-
-  @include it("generates only OUDS containers") {
-    $enable-bootstrap-compatibility: false !global;
-    @import "../../functions";
-    @import "../../tokens/raw";
-    @import "../../tokens/semantic";
-    @import "../../tokens/composite";
-    @import "../../tokens/component";
-    @import "../../variables";
-    @import "../../maps";
-    @import "../../mixins";
-
-    @include assert() {
-      @include output() {
-        @import "../../containers";
-      }
-      @include expect() {
-        .container-fluid {
-          width: 100%;
-          padding-right: var(--bs-container-margin-x);
-          padding-left: var(--bs-container-margin-x);
-          margin-right: auto;
-          margin-left: auto;
-          --bs-container-margin-x: 16px;
-        }
-
-        @media (min-width: 390px) {
-          .container-fluid {
-            --bs-container-margin-x: 24px;
-          }
-        }
-
-        @media (min-width: 480px) {
-          .container-fluid {
-            --bs-container-margin-x: 28px;
-          }
-        }
-
-        @media (min-width: 736px) {
-          .container-fluid {
-            --bs-container-margin-x: 32px;
-          }
-        }
-
-        @media (min-width: 1024px) {
-          .container-fluid {
-            --bs-container-margin-x: 40px;
-          }
-        }
-
-        @media (min-width: 1320px) {
-          .container-fluid {
-            --bs-container-margin-x: 56px;
-          }
-        }
-
-        @media (min-width: 1640px) {
-          .container-fluid {
-            --bs-container-margin-x: 80px;
-          }
-        }
-
-        @media (min-width: 1880px) {
-          .container-fluid {
-            --bs-container-margin-x: 112px;
-          }
-        }
-
-        @media (min-width: 1640px) {
-          .container-max-width {
-            --bs-container-margin-x: 80px;
-            max-width: 1680px;
-          }
-
-          .container-max-width .row {
-            --bs-gutter-x: 32px;
-          }
-        }
-      }
-    }
-  }
-
-  @include it("generates OUDS and Bootstrap containers") {
-    $enable-bootstrap-compatibility: true !global;
-    @import "../../functions";
-    @import "../../tokens/raw";
-    @import "../../tokens/semantic";
-    @import "../../tokens/composite";
-    @import "../../tokens/component";
-    @import "../../variables";
-    @import "../../maps";
-    @import "../../mixins";
-
-    @include assert() {
-      @include output() {
-        @import "../../containers";
-      }
-      @include expect() {
-        .container-fluid,
-        .container-3xl,
-        .container-2xl,
-        .container-xxl,
-        .container-xl,
-        .container-lg,
-        .container-md,
-        .container-sm,
-        .container-xs {
-          width: 100%;
-          padding-right: var(--bs-container-margin-x);
-          padding-left: var(--bs-container-margin-x);
-          margin-right: auto;
-          margin-left: auto;
-          --bs-container-margin-x: 16px;
-        }
-
-        @media (min-width: 390px) {
-          .container-fluid,
-          .container-3xl,
-          .container-2xl,
-          .container-xxl,
-          .container-xl,
-          .container-lg,
-          .container-md,
-          .container-sm,
-          .container-xs {
-            --bs-container-margin-x: 24px;
-          }
-        }
-
-        @media (min-width: 480px) {
-          .container-fluid,
-          .container-3xl,
-          .container-2xl,
-          .container-xxl,
-          .container-xl,
-          .container-lg,
-          .container-md,
-          .container-sm,
-          .container-xs {
-            --bs-container-margin-x: 28px;
-          }
-        }
-
-        @media (min-width: 736px) {
-          .container-fluid,
-          .container-3xl,
-          .container-2xl,
-          .container-xxl,
-          .container-xl,
-          .container-lg,
-          .container-md,
-          .container-sm,
-          .container-xs {
-            --bs-container-margin-x: 32px;
-          }
-        }
-
-        @media (min-width: 1024px) {
-          .container-fluid,
-          .container-3xl,
-          .container-2xl,
-          .container-xxl,
-          .container-xl,
-          .container-lg,
-          .container-md,
-          .container-sm,
-          .container-xs {
-            --bs-container-margin-x: 40px;
-          }
-        }
-
-        @media (min-width: 1320px) {
-          .container-fluid,
-          .container-3xl,
-          .container-2xl,
-          .container-xxl,
-          .container-xl,
-          .container-lg,
-          .container-md,
-          .container-sm,
-          .container-xs {
-            --bs-container-margin-x: 56px;
-          }
-        }
-
-        @media (min-width: 1640px) {
-          .container-fluid,
-          .container-3xl,
-          .container-2xl,
-          .container-xxl,
-          .container-xl,
-          .container-lg,
-          .container-md,
-          .container-sm,
-          .container-xs {
-            --bs-container-margin-x: 80px;
-          }
-        }
-
-        @media (min-width: 1880px) {
-          .container-fluid,
-          .container-3xl,
-          .container-2xl,
-          .container-xxl,
-          .container-xl,
-          .container-lg,
-          .container-md,
-          .container-sm,
-          .container-xs {
-            --bs-container-margin-x: 112px;
-          }
-        }
-
-        .container {
-          width: 100%;
-          padding-right: var(--bs-container-margin-x);
-          padding-left: var(--bs-container-margin-x);
-          margin-right: auto;
-          margin-left: auto;
-          --bs-container-margin-x: 16px;
-        }
-
-        @media (min-width: 390px) {
-          .container {
-            --bs-container-margin-x: 24px;
-          }
-        }
-
-        @media (min-width: 480px) {
-          .container {
-            --bs-container-margin-x: 28px;
-          }
-        }
-
-        @media (min-width: 736px) {
-          .container {
-            --bs-container-margin-x: 32px;
-          }
-        }
-
-        @media (min-width: 1024px) {
-          .container {
-            --bs-container-margin-x: 40px;
-          }
-        }
-
-        @media (min-width: 1320px) {
-          .container {
-            --bs-container-margin-x: 56px;
-          }
-        }
-
-        @media (min-width: 1640px) {
-          .container {
-            --bs-container-margin-x: 80px;
-          }
-        }
-
-        @media (min-width: 1880px) {
-          .container {
-            --bs-container-margin-x: 112px;
-          }
-        }
-
-        @media (min-width: 390px) {
-          .container-xs,
-          .container {
-            max-width: 390px;
-          }
-        }
-
-        @media (min-width: 480px) {
-          .container-sm,
-          .container-xs,
-          .container {
-            max-width: 480px;
-          }
-        }
-
-        @media (min-width: 736px) {
-          .container-md,
-          .container-sm,
-          .container-xs,
-          .container {
-            max-width: 736px;
-          }
-        }
-
-        @media (min-width: 1024px) {
-          .container-lg,
-          .container-md,
-          .container-sm,
-          .container-xs,
-          .container {
-            max-width: 1024px;
-          }
-        }
-
-        @media (min-width: 1320px) {
-          .container-xl,
-          .container-lg,
-          .container-md,
-          .container-sm,
-          .container-xs,
-          .container {
-            max-width: 1320px;
-          }
-        }
-
-        @media (min-width: 1640px) {
-          .container-2xl,
-          .container-xxl,
-          .container-xl,
-          .container-lg,
-          .container-md,
-          .container-sm,
-          .container-xs,
-          .container {
-            max-width: 1640px;
-          }
-        }
-
-        @media (min-width: 1880px) {
-          .container-3xl,
-          .container-2xl,
-          .container-xxl,
-          .container-xl,
-          .container-lg,
-          .container-md,
-          .container-sm,
-          .container-xs,
-          .container {
-            max-width: 1880px;
-          }
-        }
-
-        @media (min-width: 1640px) {
-          .container-max-width {
-            --bs-container-margin-x: 80px;
-            max-width: 1680px;
-          }
-
-          .container-max-width .row {
-            --bs-gutter-x: 32px;
-          }
-        }
-      }
-    }
-  }
-
-  @include it("generates only OUDS grid classes") {
-    $enable-bootstrap-compatibility: false !global;
-    @import "../../functions";
-    @import "../../tokens/raw";
-    @import "../../tokens/semantic";
-    @import "../../tokens/composite";
-    @import "../../tokens/component";
-    @import "../../variables";
-    @import "../../maps";
-    @import "../../mixins";
-
-    @include assert() {
-      @include output() {
-        @import "../../grid";
-      }
-      @include expect() {
-        :root {
-          --bs-breakpoint-2xs: 0;
-          --bs-breakpoint-xs: 390px;
-          --bs-breakpoint-sm: 480px;
-          --bs-breakpoint-md: 736px;
-          --bs-breakpoint-lg: 1024px;
-          --bs-breakpoint-xl: 1320px;
-          --bs-breakpoint-2xl: 1640px;
-          --bs-breakpoint-3xl: 1880px;
-        }
-
-        .row {
-          --bs-gutter-y: 0;
-          display: flex;
-          flex-wrap: wrap;
-          margin-top: calc(-1 * var(--bs-gutter-y)); // stylelint-disable-line function-disallowed-list
-          margin-right: calc(-0.5 * var(--bs-gutter-x)); // stylelint-disable-line function-disallowed-list, @stylistic/number-leading-zero
-          margin-left: calc(-0.5 * var(--bs-gutter-x)); // stylelint-disable-line function-disallowed-list, @stylistic/number-leading-zero
-          --bs-gutter-x: 8px;
-        }
-
-        @media (min-width: 390px) {
-          .row {
-            --bs-gutter-x: 16px;
-          }
-        }
-
-        @media (min-width: 480px) {
-          .row {
-            --bs-gutter-x: 16px;
-          }
-        }
-
-        @media (min-width: 736px) {
-          .row {
-            --bs-gutter-x: 24px;
-          }
-        }
-
-        @media (min-width: 1024px) {
-          .row {
-            --bs-gutter-x: 24px;
-          }
-        }
-
-        @media (min-width: 1320px) {
-          .row {
-            --bs-gutter-x: 32px;
-          }
-        }
-
-        @media (min-width: 1640px) {
-          .row {
-            --bs-gutter-x: 32px;
-          }
-        }
-
-        @media (min-width: 1880px) {
-          .row {
-            --bs-gutter-x: 40px;
-          }
-        }
-
-        .row > * {
-          flex-shrink: 0;
-          width: 100%;
-          max-width: 100%;
-          padding-right: calc(var(--bs-gutter-x) * 0.5); // stylelint-disable-line function-disallowed-list, @stylistic/number-leading-zero
-          padding-left: calc(var(--bs-gutter-x) * 0.5); // stylelint-disable-line function-disallowed-list, @stylistic/number-leading-zero
-          margin-top: var(--bs-gutter-y);
-        }
-
-        .col {
-          flex: 1 0 0%;
-        }
-
-        .row-cols-auto > * {
-          flex: 0 0 auto;
-          width: auto;
-        }
-
-        .row-cols-1 > * {
-          flex: 0 0 auto;
-          width: 100%;
-        }
-
-        .row-cols-2 > * {
-          flex: 0 0 auto;
-          width: 50%;
-        }
-
-        .row-cols-3 > * {
-          flex: 0 0 auto;
-          width: 33.33333333%;
-        }
-
-        .row-cols-4 > * {
-          flex: 0 0 auto;
-          width: 25%;
-        }
-
-        .row-cols-5 > * {
-          flex: 0 0 auto;
-          width: 20%;
-        }
-
-        .row-cols-6 > * {
-          flex: 0 0 auto;
-          width: 16.66666667%;
-        }
-
-        .col-auto {
-          flex: 0 0 auto;
-          width: auto;
-        }
-
-        .col-1 {
-          flex: 0 0 auto;
-          width: 8.33333333%;
-        }
-
-        .col-2 {
-          flex: 0 0 auto;
-          width: 16.66666667%;
-        }
-
-        .col-3 {
-          flex: 0 0 auto;
-          width: 25%;
-        }
-
-        .col-4 {
-          flex: 0 0 auto;
-          width: 33.33333333%;
-        }
-
-        .col-5 {
-          flex: 0 0 auto;
-          width: 41.66666667%;
-        }
-
-        .col-6 {
-          flex: 0 0 auto;
-          width: 50%;
-        }
-
-        .col-7 {
-          flex: 0 0 auto;
-          width: 58.33333333%;
-        }
-
-        .col-8 {
-          flex: 0 0 auto;
-          width: 66.66666667%;
-        }
-
-        .col-9 {
-          flex: 0 0 auto;
-          width: 75%;
-        }
-
-        .col-10 {
-          flex: 0 0 auto;
-          width: 83.33333333%;
-        }
-
-        .col-11 {
-          flex: 0 0 auto;
-          width: 91.66666667%;
-        }
-
-        .col-12 {
-          flex: 0 0 auto;
-          width: 100%;
-        }
-
-        .offset-1 {
-          margin-left: 8.33333333%;
-        }
-
-        .offset-2 {
-          margin-left: 16.66666667%;
-        }
-
-        .offset-3 {
-          margin-left: 25%;
-        }
-
-        .offset-4 {
-          margin-left: 33.33333333%;
-        }
-
-        .offset-5 {
-          margin-left: 41.66666667%;
-        }
-
-        .offset-6 {
-          margin-left: 50%;
-        }
-
-        .offset-7 {
-          margin-left: 58.33333333%;
-        }
-
-        .offset-8 {
-          margin-left: 66.66666667%;
-        }
-
-        .offset-9 {
-          margin-left: 75%;
-        }
-
-        .offset-10 {
-          margin-left: 83.33333333%;
-        }
-
-        .offset-11 {
-          margin-left: 91.66666667%;
-        }
-
-        .g-none,
-        .gx-none {
-          --bs-gutter-x: 0 !important;
-        }
-
-        .g-none,
-        .gy-none {
-          --bs-gutter-y: 0 !important;
-        }
-
-        .g-smash,
-        .gx-smash {
-          --bs-gutter-x: 2px !important;
-        }
-
-        .g-smash,
-        .gy-smash {
-          --bs-gutter-y: 2px !important;
-        }
-
-        .g-shortest,
-        .gx-shortest {
-          --bs-gutter-x: 4px !important;
-        }
-
-        .g-shortest,
-        .gy-shortest {
-          --bs-gutter-y: 4px !important;
-        }
-
-        .g-shorter,
-        .gx-shorter {
-          --bs-gutter-x: 8px !important;
-        }
-
-        .g-shorter,
-        .gy-shorter {
-          --bs-gutter-y: 8px !important;
-        }
-
-        .g-short,
-        .gx-short {
-          --bs-gutter-x: 12px !important;
-        }
-
-        .g-short,
-        .gy-short {
-          --bs-gutter-y: 12px !important;
-        }
-
-        .g-medium,
-        .gx-medium {
-          --bs-gutter-x: 16px !important;
-        }
-
-        .g-medium,
-        .gy-medium {
-          --bs-gutter-y: 16px !important;
-        }
-
-        .g-tall,
-        .gx-tall {
-          --bs-gutter-x: 24px !important;
-        }
-
-        .g-tall,
-        .gy-tall {
-          --bs-gutter-y: 24px !important;
-        }
-
-        .g-taller,
-        .gx-taller {
-          --bs-gutter-x: 32px !important;
-        }
-
-        .g-taller,
-        .gy-taller {
-          --bs-gutter-y: 32px !important;
-        }
-
-        .g-tallest,
-        .gx-tallest {
-          --bs-gutter-x: 40px !important;
-        }
-
-        .g-tallest,
-        .gy-tallest {
-          --bs-gutter-y: 40px !important;
-        }
-
-        .g-spacious,
-        .gx-spacious {
-          --bs-gutter-x: 48px !important;
-        }
-
-        .g-spacious,
-        .gy-spacious {
-          --bs-gutter-y: 48px !important;
-        }
-
-        .g-huge,
-        .gx-huge {
-          --bs-gutter-x: 56px !important;
-        }
-
-        .g-huge,
-        .gy-huge {
-          --bs-gutter-y: 56px !important;
-        }
-
-        .g-jumbo,
-        .gx-jumbo {
-          --bs-gutter-x: 64px !important;
-        }
-
-        .g-jumbo,
-        .gy-jumbo {
-          --bs-gutter-y: 64px !important;
-        }
-
-        @media (min-width: 390px) {
-          .col-xs {
-            flex: 1 0 0%;
-          }
-
-          .row-cols-xs-auto > * {
-            flex: 0 0 auto;
-            width: auto;
-          }
-
-          .row-cols-xs-1 > * {
-            flex: 0 0 auto;
-            width: 100%;
-          }
-
-          .row-cols-xs-2 > * {
-            flex: 0 0 auto;
-            width: 50%;
-          }
-
-          .row-cols-xs-3 > * {
-            flex: 0 0 auto;
-            width: 33.33333333%;
-          }
-
-          .row-cols-xs-4 > * {
-            flex: 0 0 auto;
-            width: 25%;
-          }
-
-          .row-cols-xs-5 > * {
-            flex: 0 0 auto;
-            width: 20%;
-          }
-
-          .row-cols-xs-6 > * {
-            flex: 0 0 auto;
-            width: 16.66666667%;
-          }
-
-          .col-xs-auto {
-            flex: 0 0 auto;
-            width: auto;
-          }
-
-          .col-xs-1 {
-            flex: 0 0 auto;
-            width: 8.33333333%;
-          }
-
-          .col-xs-2 {
-            flex: 0 0 auto;
-            width: 16.66666667%;
-          }
-
-          .col-xs-3 {
-            flex: 0 0 auto;
-            width: 25%;
-          }
-
-          .col-xs-4 {
-            flex: 0 0 auto;
-            width: 33.33333333%;
-          }
-
-          .col-xs-5 {
-            flex: 0 0 auto;
-            width: 41.66666667%;
-          }
-
-          .col-xs-6 {
-            flex: 0 0 auto;
-            width: 50%;
-          }
-
-          .col-xs-7 {
-            flex: 0 0 auto;
-            width: 58.33333333%;
-          }
-
-          .col-xs-8 {
-            flex: 0 0 auto;
-            width: 66.66666667%;
-          }
-
-          .col-xs-9 {
-            flex: 0 0 auto;
-            width: 75%;
-          }
-
-          .col-xs-10 {
-            flex: 0 0 auto;
-            width: 83.33333333%;
-          }
-
-          .col-xs-11 {
-            flex: 0 0 auto;
-            width: 91.66666667%;
-          }
-
-          .col-xs-12 {
-            flex: 0 0 auto;
-            width: 100%;
-          }
-
-          .offset-xs-0 {
-            margin-left: 0;
-          }
-
-          .offset-xs-1 {
-            margin-left: 8.33333333%;
-          }
-
-          .offset-xs-2 {
-            margin-left: 16.66666667%;
-          }
-
-          .offset-xs-3 {
-            margin-left: 25%;
-          }
-
-          .offset-xs-4 {
-            margin-left: 33.33333333%;
-          }
-
-          .offset-xs-5 {
-            margin-left: 41.66666667%;
-          }
-
-          .offset-xs-6 {
-            margin-left: 50%;
-          }
-
-          .offset-xs-7 {
-            margin-left: 58.33333333%;
-          }
-
-          .offset-xs-8 {
-            margin-left: 66.66666667%;
-          }
-
-          .offset-xs-9 {
-            margin-left: 75%;
-          }
-
-          .offset-xs-10 {
-            margin-left: 83.33333333%;
-          }
-
-          .offset-xs-11 {
-            margin-left: 91.66666667%;
-          }
-
-          .g-xs-none,
-          .gx-xs-none {
-            --bs-gutter-x: 0 !important;
-          }
-
-          .g-xs-none,
-          .gy-xs-none {
-            --bs-gutter-y: 0 !important;
-          }
-
-          .g-xs-smash,
-          .gx-xs-smash {
-            --bs-gutter-x: 2px !important;
-          }
-
-          .g-xs-smash,
-          .gy-xs-smash {
-            --bs-gutter-y: 2px !important;
-          }
-
-          .g-xs-shortest,
-          .gx-xs-shortest {
-            --bs-gutter-x: 4px !important;
-          }
-
-          .g-xs-shortest,
-          .gy-xs-shortest {
-            --bs-gutter-y: 4px !important;
-          }
-
-          .g-xs-shorter,
-          .gx-xs-shorter {
-            --bs-gutter-x: 8px !important;
-          }
-
-          .g-xs-shorter,
-          .gy-xs-shorter {
-            --bs-gutter-y: 8px !important;
-          }
-
-          .g-xs-short,
-          .gx-xs-short {
-            --bs-gutter-x: 12px !important;
-          }
-
-          .g-xs-short,
-          .gy-xs-short {
-            --bs-gutter-y: 12px !important;
-          }
-
-          .g-xs-medium,
-          .gx-xs-medium {
-            --bs-gutter-x: 16px !important;
-          }
-
-          .g-xs-medium,
-          .gy-xs-medium {
-            --bs-gutter-y: 16px !important;
-          }
-
-          .g-xs-tall,
-          .gx-xs-tall {
-            --bs-gutter-x: 24px !important;
-          }
-
-          .g-xs-tall,
-          .gy-xs-tall {
-            --bs-gutter-y: 24px !important;
-          }
-
-          .g-xs-taller,
-          .gx-xs-taller {
-            --bs-gutter-x: 32px !important;
-          }
-
-          .g-xs-taller,
-          .gy-xs-taller {
-            --bs-gutter-y: 32px !important;
-          }
-
-          .g-xs-tallest,
-          .gx-xs-tallest {
-            --bs-gutter-x: 40px !important;
-          }
-
-          .g-xs-tallest,
-          .gy-xs-tallest {
-            --bs-gutter-y: 40px !important;
-          }
-
-          .g-xs-spacious,
-          .gx-xs-spacious {
-            --bs-gutter-x: 48px !important;
-          }
-
-          .g-xs-spacious,
-          .gy-xs-spacious {
-            --bs-gutter-y: 48px !important;
-          }
-
-          .g-xs-huge,
-          .gx-xs-huge {
-            --bs-gutter-x: 56px !important;
-          }
-
-          .g-xs-huge,
-          .gy-xs-huge {
-            --bs-gutter-y: 56px !important;
-          }
-
-          .g-xs-jumbo,
-          .gx-xs-jumbo {
-            --bs-gutter-x: 64px !important;
-          }
-
-          .g-xs-jumbo,
-          .gy-xs-jumbo {
-            --bs-gutter-y: 64px !important;
-          }
-        }
-
-        @media (min-width: 480px) {
-          .col-sm {
-            flex: 1 0 0%;
-          }
-
-          .row-cols-sm-auto > * {
-            flex: 0 0 auto;
-            width: auto;
-          }
-
-          .row-cols-sm-1 > * {
-            flex: 0 0 auto;
-            width: 100%;
-          }
-
-          .row-cols-sm-2 > * {
-            flex: 0 0 auto;
-            width: 50%;
-          }
-
-          .row-cols-sm-3 > * {
-            flex: 0 0 auto;
-            width: 33.33333333%;
-          }
-
-          .row-cols-sm-4 > * {
-            flex: 0 0 auto;
-            width: 25%;
-          }
-
-          .row-cols-sm-5 > * {
-            flex: 0 0 auto;
-            width: 20%;
-          }
-
-          .row-cols-sm-6 > * {
-            flex: 0 0 auto;
-            width: 16.66666667%;
-          }
-
-          .col-sm-auto {
-            flex: 0 0 auto;
-            width: auto;
-          }
-
-          .col-sm-1 {
-            flex: 0 0 auto;
-            width: 8.33333333%;
-          }
-
-          .col-sm-2 {
-            flex: 0 0 auto;
-            width: 16.66666667%;
-          }
-
-          .col-sm-3 {
-            flex: 0 0 auto;
-            width: 25%;
-          }
-
-          .col-sm-4 {
-            flex: 0 0 auto;
-            width: 33.33333333%;
-          }
-
-          .col-sm-5 {
-            flex: 0 0 auto;
-            width: 41.66666667%;
-          }
-
-          .col-sm-6 {
-            flex: 0 0 auto;
-            width: 50%;
-          }
-
-          .col-sm-7 {
-            flex: 0 0 auto;
-            width: 58.33333333%;
-          }
-
-          .col-sm-8 {
-            flex: 0 0 auto;
-            width: 66.66666667%;
-          }
-
-          .col-sm-9 {
-            flex: 0 0 auto;
-            width: 75%;
-          }
-
-          .col-sm-10 {
-            flex: 0 0 auto;
-            width: 83.33333333%;
-          }
-
-          .col-sm-11 {
-            flex: 0 0 auto;
-            width: 91.66666667%;
-          }
-
-          .col-sm-12 {
-            flex: 0 0 auto;
-            width: 100%;
-          }
-
-          .offset-sm-0 {
-            margin-left: 0;
-          }
-
-          .offset-sm-1 {
-            margin-left: 8.33333333%;
-          }
-
-          .offset-sm-2 {
-            margin-left: 16.66666667%;
-          }
-
-          .offset-sm-3 {
-            margin-left: 25%;
-          }
-
-          .offset-sm-4 {
-            margin-left: 33.33333333%;
-          }
-
-          .offset-sm-5 {
-            margin-left: 41.66666667%;
-          }
-
-          .offset-sm-6 {
-            margin-left: 50%;
-          }
-
-          .offset-sm-7 {
-            margin-left: 58.33333333%;
-          }
-
-          .offset-sm-8 {
-            margin-left: 66.66666667%;
-          }
-
-          .offset-sm-9 {
-            margin-left: 75%;
-          }
-
-          .offset-sm-10 {
-            margin-left: 83.33333333%;
-          }
-
-          .offset-sm-11 {
-            margin-left: 91.66666667%;
-          }
-
-          .g-sm-none,
-          .gx-sm-none {
-            --bs-gutter-x: 0 !important;
-          }
-
-          .g-sm-none,
-          .gy-sm-none {
-            --bs-gutter-y: 0 !important;
-          }
-
-          .g-sm-smash,
-          .gx-sm-smash {
-            --bs-gutter-x: 2px !important;
-          }
-
-          .g-sm-smash,
-          .gy-sm-smash {
-            --bs-gutter-y: 2px !important;
-          }
-
-          .g-sm-shortest,
-          .gx-sm-shortest {
-            --bs-gutter-x: 4px !important;
-          }
-
-          .g-sm-shortest,
-          .gy-sm-shortest {
-            --bs-gutter-y: 4px !important;
-          }
-
-          .g-sm-shorter,
-          .gx-sm-shorter {
-            --bs-gutter-x: 8px !important;
-          }
-
-          .g-sm-shorter,
-          .gy-sm-shorter {
-            --bs-gutter-y: 8px !important;
-          }
-
-          .g-sm-short,
-          .gx-sm-short {
-            --bs-gutter-x: 12px !important;
-          }
-
-          .g-sm-short,
-          .gy-sm-short {
-            --bs-gutter-y: 12px !important;
-          }
-
-          .g-sm-medium,
-          .gx-sm-medium {
-            --bs-gutter-x: 16px !important;
-          }
-
-          .g-sm-medium,
-          .gy-sm-medium {
-            --bs-gutter-y: 16px !important;
-          }
-
-          .g-sm-tall,
-          .gx-sm-tall {
-            --bs-gutter-x: 24px !important;
-          }
-
-          .g-sm-tall,
-          .gy-sm-tall {
-            --bs-gutter-y: 24px !important;
-          }
-
-          .g-sm-taller,
-          .gx-sm-taller {
-            --bs-gutter-x: 32px !important;
-          }
-
-          .g-sm-taller,
-          .gy-sm-taller {
-            --bs-gutter-y: 32px !important;
-          }
-
-          .g-sm-tallest,
-          .gx-sm-tallest {
-            --bs-gutter-x: 40px !important;
-          }
-
-          .g-sm-tallest,
-          .gy-sm-tallest {
-            --bs-gutter-y: 40px !important;
-          }
-
-          .g-sm-spacious,
-          .gx-sm-spacious {
-            --bs-gutter-x: 48px !important;
-          }
-
-          .g-sm-spacious,
-          .gy-sm-spacious {
-            --bs-gutter-y: 48px !important;
-          }
-
-          .g-sm-huge,
-          .gx-sm-huge {
-            --bs-gutter-x: 56px !important;
-          }
-
-          .g-sm-huge,
-          .gy-sm-huge {
-            --bs-gutter-y: 56px !important;
-          }
-
-          .g-sm-jumbo,
-          .gx-sm-jumbo {
-            --bs-gutter-x: 64px !important;
-          }
-
-          .g-sm-jumbo,
-          .gy-sm-jumbo {
-            --bs-gutter-y: 64px !important;
-          }
-        }
-
-        @media (min-width: 736px) {
-          .col-md {
-            flex: 1 0 0%;
-          }
-
-          .row-cols-md-auto > * {
-            flex: 0 0 auto;
-            width: auto;
-          }
-
-          .row-cols-md-1 > * {
-            flex: 0 0 auto;
-            width: 100%;
-          }
-
-          .row-cols-md-2 > * {
-            flex: 0 0 auto;
-            width: 50%;
-          }
-
-          .row-cols-md-3 > * {
-            flex: 0 0 auto;
-            width: 33.33333333%;
-          }
-
-          .row-cols-md-4 > * {
-            flex: 0 0 auto;
-            width: 25%;
-          }
-
-          .row-cols-md-5 > * {
-            flex: 0 0 auto;
-            width: 20%;
-          }
-
-          .row-cols-md-6 > * {
-            flex: 0 0 auto;
-            width: 16.66666667%;
-          }
-
-          .col-md-auto {
-            flex: 0 0 auto;
-            width: auto;
-          }
-
-          .col-md-1 {
-            flex: 0 0 auto;
-            width: 8.33333333%;
-          }
-
-          .col-md-2 {
-            flex: 0 0 auto;
-            width: 16.66666667%;
-          }
-
-          .col-md-3 {
-            flex: 0 0 auto;
-            width: 25%;
-          }
-
-          .col-md-4 {
-            flex: 0 0 auto;
-            width: 33.33333333%;
-          }
-
-          .col-md-5 {
-            flex: 0 0 auto;
-            width: 41.66666667%;
-          }
-
-          .col-md-6 {
-            flex: 0 0 auto;
-            width: 50%;
-          }
-
-          .col-md-7 {
-            flex: 0 0 auto;
-            width: 58.33333333%;
-          }
-
-          .col-md-8 {
-            flex: 0 0 auto;
-            width: 66.66666667%;
-          }
-
-          .col-md-9 {
-            flex: 0 0 auto;
-            width: 75%;
-          }
-
-          .col-md-10 {
-            flex: 0 0 auto;
-            width: 83.33333333%;
-          }
-
-          .col-md-11 {
-            flex: 0 0 auto;
-            width: 91.66666667%;
-          }
-
-          .col-md-12 {
-            flex: 0 0 auto;
-            width: 100%;
-          }
-
-          .offset-md-0 {
-            margin-left: 0;
-          }
-
-          .offset-md-1 {
-            margin-left: 8.33333333%;
-          }
-
-          .offset-md-2 {
-            margin-left: 16.66666667%;
-          }
-
-          .offset-md-3 {
-            margin-left: 25%;
-          }
-
-          .offset-md-4 {
-            margin-left: 33.33333333%;
-          }
-
-          .offset-md-5 {
-            margin-left: 41.66666667%;
-          }
-
-          .offset-md-6 {
-            margin-left: 50%;
-          }
-
-          .offset-md-7 {
-            margin-left: 58.33333333%;
-          }
-
-          .offset-md-8 {
-            margin-left: 66.66666667%;
-          }
-
-          .offset-md-9 {
-            margin-left: 75%;
-          }
-
-          .offset-md-10 {
-            margin-left: 83.33333333%;
-          }
-
-          .offset-md-11 {
-            margin-left: 91.66666667%;
-          }
-
-          .g-md-none,
-          .gx-md-none {
-            --bs-gutter-x: 0 !important;
-          }
-
-          .g-md-none,
-          .gy-md-none {
-            --bs-gutter-y: 0 !important;
-          }
-
-          .g-md-smash,
-          .gx-md-smash {
-            --bs-gutter-x: 2px !important;
-          }
-
-          .g-md-smash,
-          .gy-md-smash {
-            --bs-gutter-y: 2px !important;
-          }
-
-          .g-md-shortest,
-          .gx-md-shortest {
-            --bs-gutter-x: 4px !important;
-          }
-
-          .g-md-shortest,
-          .gy-md-shortest {
-            --bs-gutter-y: 4px !important;
-          }
-
-          .g-md-shorter,
-          .gx-md-shorter {
-            --bs-gutter-x: 8px !important;
-          }
-
-          .g-md-shorter,
-          .gy-md-shorter {
-            --bs-gutter-y: 8px !important;
-          }
-
-          .g-md-short,
-          .gx-md-short {
-            --bs-gutter-x: 12px !important;
-          }
-
-          .g-md-short,
-          .gy-md-short {
-            --bs-gutter-y: 12px !important;
-          }
-
-          .g-md-medium,
-          .gx-md-medium {
-            --bs-gutter-x: 16px !important;
-          }
-
-          .g-md-medium,
-          .gy-md-medium {
-            --bs-gutter-y: 16px !important;
-          }
-
-          .g-md-tall,
-          .gx-md-tall {
-            --bs-gutter-x: 24px !important;
-          }
-
-          .g-md-tall,
-          .gy-md-tall {
-            --bs-gutter-y: 24px !important;
-          }
-
-          .g-md-taller,
-          .gx-md-taller {
-            --bs-gutter-x: 32px !important;
-          }
-
-          .g-md-taller,
-          .gy-md-taller {
-            --bs-gutter-y: 32px !important;
-          }
-
-          .g-md-tallest,
-          .gx-md-tallest {
-            --bs-gutter-x: 40px !important;
-          }
-
-          .g-md-tallest,
-          .gy-md-tallest {
-            --bs-gutter-y: 40px !important;
-          }
-
-          .g-md-spacious,
-          .gx-md-spacious {
-            --bs-gutter-x: 48px !important;
-          }
-
-          .g-md-spacious,
-          .gy-md-spacious {
-            --bs-gutter-y: 48px !important;
-          }
-
-          .g-md-huge,
-          .gx-md-huge {
-            --bs-gutter-x: 56px !important;
-          }
-
-          .g-md-huge,
-          .gy-md-huge {
-            --bs-gutter-y: 56px !important;
-          }
-
-          .g-md-jumbo,
-          .gx-md-jumbo {
-            --bs-gutter-x: 64px !important;
-          }
-
-          .g-md-jumbo,
-          .gy-md-jumbo {
-            --bs-gutter-y: 64px !important;
-          }
-        }
-
-        @media (min-width: 1024px) {
-          .col-lg {
-            flex: 1 0 0%;
-          }
-
-          .row-cols-lg-auto > * {
-            flex: 0 0 auto;
-            width: auto;
-          }
-
-          .row-cols-lg-1 > * {
-            flex: 0 0 auto;
-            width: 100%;
-          }
-
-          .row-cols-lg-2 > * {
-            flex: 0 0 auto;
-            width: 50%;
-          }
-
-          .row-cols-lg-3 > * {
-            flex: 0 0 auto;
-            width: 33.33333333%;
-          }
-
-          .row-cols-lg-4 > * {
-            flex: 0 0 auto;
-            width: 25%;
-          }
-
-          .row-cols-lg-5 > * {
-            flex: 0 0 auto;
-            width: 20%;
-          }
-
-          .row-cols-lg-6 > * {
-            flex: 0 0 auto;
-            width: 16.66666667%;
-          }
-
-          .col-lg-auto {
-            flex: 0 0 auto;
-            width: auto;
-          }
-
-          .col-lg-1 {
-            flex: 0 0 auto;
-            width: 8.33333333%;
-          }
-
-          .col-lg-2 {
-            flex: 0 0 auto;
-            width: 16.66666667%;
-          }
-
-          .col-lg-3 {
-            flex: 0 0 auto;
-            width: 25%;
-          }
-
-          .col-lg-4 {
-            flex: 0 0 auto;
-            width: 33.33333333%;
-          }
-
-          .col-lg-5 {
-            flex: 0 0 auto;
-            width: 41.66666667%;
-          }
-
-          .col-lg-6 {
-            flex: 0 0 auto;
-            width: 50%;
-          }
-
-          .col-lg-7 {
-            flex: 0 0 auto;
-            width: 58.33333333%;
-          }
-
-          .col-lg-8 {
-            flex: 0 0 auto;
-            width: 66.66666667%;
-          }
-
-          .col-lg-9 {
-            flex: 0 0 auto;
-            width: 75%;
-          }
-
-          .col-lg-10 {
-            flex: 0 0 auto;
-            width: 83.33333333%;
-          }
-
-          .col-lg-11 {
-            flex: 0 0 auto;
-            width: 91.66666667%;
-          }
-
-          .col-lg-12 {
-            flex: 0 0 auto;
-            width: 100%;
-          }
-
-          .offset-lg-0 {
-            margin-left: 0;
-          }
-
-          .offset-lg-1 {
-            margin-left: 8.33333333%;
-          }
-
-          .offset-lg-2 {
-            margin-left: 16.66666667%;
-          }
-
-          .offset-lg-3 {
-            margin-left: 25%;
-          }
-
-          .offset-lg-4 {
-            margin-left: 33.33333333%;
-          }
-
-          .offset-lg-5 {
-            margin-left: 41.66666667%;
-          }
-
-          .offset-lg-6 {
-            margin-left: 50%;
-          }
-
-          .offset-lg-7 {
-            margin-left: 58.33333333%;
-          }
-
-          .offset-lg-8 {
-            margin-left: 66.66666667%;
-          }
-
-          .offset-lg-9 {
-            margin-left: 75%;
-          }
-
-          .offset-lg-10 {
-            margin-left: 83.33333333%;
-          }
-
-          .offset-lg-11 {
-            margin-left: 91.66666667%;
-          }
-
-          .g-lg-none,
-          .gx-lg-none {
-            --bs-gutter-x: 0 !important;
-          }
-
-          .g-lg-none,
-          .gy-lg-none {
-            --bs-gutter-y: 0 !important;
-          }
-
-          .g-lg-smash,
-          .gx-lg-smash {
-            --bs-gutter-x: 2px !important;
-          }
-
-          .g-lg-smash,
-          .gy-lg-smash {
-            --bs-gutter-y: 2px !important;
-          }
-
-          .g-lg-shortest,
-          .gx-lg-shortest {
-            --bs-gutter-x: 4px !important;
-          }
-
-          .g-lg-shortest,
-          .gy-lg-shortest {
-            --bs-gutter-y: 4px !important;
-          }
-
-          .g-lg-shorter,
-          .gx-lg-shorter {
-            --bs-gutter-x: 8px !important;
-          }
-
-          .g-lg-shorter,
-          .gy-lg-shorter {
-            --bs-gutter-y: 8px !important;
-          }
-
-          .g-lg-short,
-          .gx-lg-short {
-            --bs-gutter-x: 12px !important;
-          }
-
-          .g-lg-short,
-          .gy-lg-short {
-            --bs-gutter-y: 12px !important;
-          }
-
-          .g-lg-medium,
-          .gx-lg-medium {
-            --bs-gutter-x: 16px !important;
-          }
-
-          .g-lg-medium,
-          .gy-lg-medium {
-            --bs-gutter-y: 16px !important;
-          }
-
-          .g-lg-tall,
-          .gx-lg-tall {
-            --bs-gutter-x: 24px !important;
-          }
-
-          .g-lg-tall,
-          .gy-lg-tall {
-            --bs-gutter-y: 24px !important;
-          }
-
-          .g-lg-taller,
-          .gx-lg-taller {
-            --bs-gutter-x: 32px !important;
-          }
-
-          .g-lg-taller,
-          .gy-lg-taller {
-            --bs-gutter-y: 32px !important;
-          }
-
-          .g-lg-tallest,
-          .gx-lg-tallest {
-            --bs-gutter-x: 40px !important;
-          }
-
-          .g-lg-tallest,
-          .gy-lg-tallest {
-            --bs-gutter-y: 40px !important;
-          }
-
-          .g-lg-spacious,
-          .gx-lg-spacious {
-            --bs-gutter-x: 48px !important;
-          }
-
-          .g-lg-spacious,
-          .gy-lg-spacious {
-            --bs-gutter-y: 48px !important;
-          }
-
-          .g-lg-huge,
-          .gx-lg-huge {
-            --bs-gutter-x: 56px !important;
-          }
-
-          .g-lg-huge,
-          .gy-lg-huge {
-            --bs-gutter-y: 56px !important;
-          }
-
-          .g-lg-jumbo,
-          .gx-lg-jumbo {
-            --bs-gutter-x: 64px !important;
-          }
-
-          .g-lg-jumbo,
-          .gy-lg-jumbo {
-            --bs-gutter-y: 64px !important;
-          }
-        }
-
-        @media (min-width: 1320px) {
-          .col-xl {
-            flex: 1 0 0%;
-          }
-
-          .row-cols-xl-auto > * {
-            flex: 0 0 auto;
-            width: auto;
-          }
-
-          .row-cols-xl-1 > * {
-            flex: 0 0 auto;
-            width: 100%;
-          }
-
-          .row-cols-xl-2 > * {
-            flex: 0 0 auto;
-            width: 50%;
-          }
-
-          .row-cols-xl-3 > * {
-            flex: 0 0 auto;
-            width: 33.33333333%;
-          }
-
-          .row-cols-xl-4 > * {
-            flex: 0 0 auto;
-            width: 25%;
-          }
-
-          .row-cols-xl-5 > * {
-            flex: 0 0 auto;
-            width: 20%;
-          }
-
-          .row-cols-xl-6 > * {
-            flex: 0 0 auto;
-            width: 16.66666667%;
-          }
-
-          .col-xl-auto {
-            flex: 0 0 auto;
-            width: auto;
-          }
-
-          .col-xl-1 {
-            flex: 0 0 auto;
-            width: 8.33333333%;
-          }
-
-          .col-xl-2 {
-            flex: 0 0 auto;
-            width: 16.66666667%;
-          }
-
-          .col-xl-3 {
-            flex: 0 0 auto;
-            width: 25%;
-          }
-
-          .col-xl-4 {
-            flex: 0 0 auto;
-            width: 33.33333333%;
-          }
-
-          .col-xl-5 {
-            flex: 0 0 auto;
-            width: 41.66666667%;
-          }
-
-          .col-xl-6 {
-            flex: 0 0 auto;
-            width: 50%;
-          }
-
-          .col-xl-7 {
-            flex: 0 0 auto;
-            width: 58.33333333%;
-          }
-
-          .col-xl-8 {
-            flex: 0 0 auto;
-            width: 66.66666667%;
-          }
-
-          .col-xl-9 {
-            flex: 0 0 auto;
-            width: 75%;
-          }
-
-          .col-xl-10 {
-            flex: 0 0 auto;
-            width: 83.33333333%;
-          }
-
-          .col-xl-11 {
-            flex: 0 0 auto;
-            width: 91.66666667%;
-          }
-
-          .col-xl-12 {
-            flex: 0 0 auto;
-            width: 100%;
-          }
-
-          .offset-xl-0 {
-            margin-left: 0;
-          }
-
-          .offset-xl-1 {
-            margin-left: 8.33333333%;
-          }
-
-          .offset-xl-2 {
-            margin-left: 16.66666667%;
-          }
-
-          .offset-xl-3 {
-            margin-left: 25%;
-          }
-
-          .offset-xl-4 {
-            margin-left: 33.33333333%;
-          }
-
-          .offset-xl-5 {
-            margin-left: 41.66666667%;
-          }
-
-          .offset-xl-6 {
-            margin-left: 50%;
-          }
-
-          .offset-xl-7 {
-            margin-left: 58.33333333%;
-          }
-
-          .offset-xl-8 {
-            margin-left: 66.66666667%;
-          }
-
-          .offset-xl-9 {
-            margin-left: 75%;
-          }
-
-          .offset-xl-10 {
-            margin-left: 83.33333333%;
-          }
-
-          .offset-xl-11 {
-            margin-left: 91.66666667%;
-          }
-
-          .g-xl-none,
-          .gx-xl-none {
-            --bs-gutter-x: 0 !important;
-          }
-
-          .g-xl-none,
-          .gy-xl-none {
-            --bs-gutter-y: 0 !important;
-          }
-
-          .g-xl-smash,
-          .gx-xl-smash {
-            --bs-gutter-x: 2px !important;
-          }
-
-          .g-xl-smash,
-          .gy-xl-smash {
-            --bs-gutter-y: 2px !important;
-          }
-
-          .g-xl-shortest,
-          .gx-xl-shortest {
-            --bs-gutter-x: 4px !important;
-          }
-
-          .g-xl-shortest,
-          .gy-xl-shortest {
-            --bs-gutter-y: 4px !important;
-          }
-
-          .g-xl-shorter,
-          .gx-xl-shorter {
-            --bs-gutter-x: 8px !important;
-          }
-
-          .g-xl-shorter,
-          .gy-xl-shorter {
-            --bs-gutter-y: 8px !important;
-          }
-
-          .g-xl-short,
-          .gx-xl-short {
-            --bs-gutter-x: 12px !important;
-          }
-
-          .g-xl-short,
-          .gy-xl-short {
-            --bs-gutter-y: 12px !important;
-          }
-
-          .g-xl-medium,
-          .gx-xl-medium {
-            --bs-gutter-x: 16px !important;
-          }
-
-          .g-xl-medium,
-          .gy-xl-medium {
-            --bs-gutter-y: 16px !important;
-          }
-
-          .g-xl-tall,
-          .gx-xl-tall {
-            --bs-gutter-x: 24px !important;
-          }
-
-          .g-xl-tall,
-          .gy-xl-tall {
-            --bs-gutter-y: 24px !important;
-          }
-
-          .g-xl-taller,
-          .gx-xl-taller {
-            --bs-gutter-x: 32px !important;
-          }
-
-          .g-xl-taller,
-          .gy-xl-taller {
-            --bs-gutter-y: 32px !important;
-          }
-
-          .g-xl-tallest,
-          .gx-xl-tallest {
-            --bs-gutter-x: 40px !important;
-          }
-
-          .g-xl-tallest,
-          .gy-xl-tallest {
-            --bs-gutter-y: 40px !important;
-          }
-
-          .g-xl-spacious,
-          .gx-xl-spacious {
-            --bs-gutter-x: 48px !important;
-          }
-
-          .g-xl-spacious,
-          .gy-xl-spacious {
-            --bs-gutter-y: 48px !important;
-          }
-
-          .g-xl-huge,
-          .gx-xl-huge {
-            --bs-gutter-x: 56px !important;
-          }
-
-          .g-xl-huge,
-          .gy-xl-huge {
-            --bs-gutter-y: 56px !important;
-          }
-
-          .g-xl-jumbo,
-          .gx-xl-jumbo {
-            --bs-gutter-x: 64px !important;
-          }
-
-          .g-xl-jumbo,
-          .gy-xl-jumbo {
-            --bs-gutter-y: 64px !important;
-          }
-        }
-
-        @media (min-width: 1640px) {
-          .col-2xl {
-            flex: 1 0 0%;
-          }
-
-          .row-cols-2xl-auto > * {
-            flex: 0 0 auto;
-            width: auto;
-          }
-
-          .row-cols-2xl-1 > * {
-            flex: 0 0 auto;
-            width: 100%;
-          }
-
-          .row-cols-2xl-2 > * {
-            flex: 0 0 auto;
-            width: 50%;
-          }
-
-          .row-cols-2xl-3 > * {
-            flex: 0 0 auto;
-            width: 33.33333333%;
-          }
-
-          .row-cols-2xl-4 > * {
-            flex: 0 0 auto;
-            width: 25%;
-          }
-
-          .row-cols-2xl-5 > * {
-            flex: 0 0 auto;
-            width: 20%;
-          }
-
-          .row-cols-2xl-6 > * {
-            flex: 0 0 auto;
-            width: 16.66666667%;
-          }
-
-          .col-2xl-auto {
-            flex: 0 0 auto;
-            width: auto;
-          }
-
-          .col-2xl-1 {
-            flex: 0 0 auto;
-            width: 8.33333333%;
-          }
-
-          .col-2xl-2 {
-            flex: 0 0 auto;
-            width: 16.66666667%;
-          }
-
-          .col-2xl-3 {
-            flex: 0 0 auto;
-            width: 25%;
-          }
-
-          .col-2xl-4 {
-            flex: 0 0 auto;
-            width: 33.33333333%;
-          }
-
-          .col-2xl-5 {
-            flex: 0 0 auto;
-            width: 41.66666667%;
-          }
-
-          .col-2xl-6 {
-            flex: 0 0 auto;
-            width: 50%;
-          }
-
-          .col-2xl-7 {
-            flex: 0 0 auto;
-            width: 58.33333333%;
-          }
-
-          .col-2xl-8 {
-            flex: 0 0 auto;
-            width: 66.66666667%;
-          }
-
-          .col-2xl-9 {
-            flex: 0 0 auto;
-            width: 75%;
-          }
-
-          .col-2xl-10 {
-            flex: 0 0 auto;
-            width: 83.33333333%;
-          }
-
-          .col-2xl-11 {
-            flex: 0 0 auto;
-            width: 91.66666667%;
-          }
-
-          .col-2xl-12 {
-            flex: 0 0 auto;
-            width: 100%;
-          }
-
-          .offset-2xl-0 {
-            margin-left: 0;
-          }
-
-          .offset-2xl-1 {
-            margin-left: 8.33333333%;
-          }
-
-          .offset-2xl-2 {
-            margin-left: 16.66666667%;
-          }
-
-          .offset-2xl-3 {
-            margin-left: 25%;
-          }
-
-          .offset-2xl-4 {
-            margin-left: 33.33333333%;
-          }
-
-          .offset-2xl-5 {
-            margin-left: 41.66666667%;
-          }
-
-          .offset-2xl-6 {
-            margin-left: 50%;
-          }
-
-          .offset-2xl-7 {
-            margin-left: 58.33333333%;
-          }
-
-          .offset-2xl-8 {
-            margin-left: 66.66666667%;
-          }
-
-          .offset-2xl-9 {
-            margin-left: 75%;
-          }
-
-          .offset-2xl-10 {
-            margin-left: 83.33333333%;
-          }
-
-          .offset-2xl-11 {
-            margin-left: 91.66666667%;
-          }
-
-          .g-2xl-none,
-          .gx-2xl-none {
-            --bs-gutter-x: 0 !important;
-          }
-
-          .g-2xl-none,
-          .gy-2xl-none {
-            --bs-gutter-y: 0 !important;
-          }
-
-          .g-2xl-smash,
-          .gx-2xl-smash {
-            --bs-gutter-x: 2px !important;
-          }
-
-          .g-2xl-smash,
-          .gy-2xl-smash {
-            --bs-gutter-y: 2px !important;
-          }
-
-          .g-2xl-shortest,
-          .gx-2xl-shortest {
-            --bs-gutter-x: 4px !important;
-          }
-
-          .g-2xl-shortest,
-          .gy-2xl-shortest {
-            --bs-gutter-y: 4px !important;
-          }
-
-          .g-2xl-shorter,
-          .gx-2xl-shorter {
-            --bs-gutter-x: 8px !important;
-          }
-
-          .g-2xl-shorter,
-          .gy-2xl-shorter {
-            --bs-gutter-y: 8px !important;
-          }
-
-          .g-2xl-short,
-          .gx-2xl-short {
-            --bs-gutter-x: 12px !important;
-          }
-
-          .g-2xl-short,
-          .gy-2xl-short {
-            --bs-gutter-y: 12px !important;
-          }
-
-          .g-2xl-medium,
-          .gx-2xl-medium {
-            --bs-gutter-x: 16px !important;
-          }
-
-          .g-2xl-medium,
-          .gy-2xl-medium {
-            --bs-gutter-y: 16px !important;
-          }
-
-          .g-2xl-tall,
-          .gx-2xl-tall {
-            --bs-gutter-x: 24px !important;
-          }
-
-          .g-2xl-tall,
-          .gy-2xl-tall {
-            --bs-gutter-y: 24px !important;
-          }
-
-          .g-2xl-taller,
-          .gx-2xl-taller {
-            --bs-gutter-x: 32px !important;
-          }
-
-          .g-2xl-taller,
-          .gy-2xl-taller {
-            --bs-gutter-y: 32px !important;
-          }
-
-          .g-2xl-tallest,
-          .gx-2xl-tallest {
-            --bs-gutter-x: 40px !important;
-          }
-
-          .g-2xl-tallest,
-          .gy-2xl-tallest {
-            --bs-gutter-y: 40px !important;
-          }
-
-          .g-2xl-spacious,
-          .gx-2xl-spacious {
-            --bs-gutter-x: 48px !important;
-          }
-
-          .g-2xl-spacious,
-          .gy-2xl-spacious {
-            --bs-gutter-y: 48px !important;
-          }
-
-          .g-2xl-huge,
-          .gx-2xl-huge {
-            --bs-gutter-x: 56px !important;
-          }
-
-          .g-2xl-huge,
-          .gy-2xl-huge {
-            --bs-gutter-y: 56px !important;
-          }
-
-          .g-2xl-jumbo,
-          .gx-2xl-jumbo {
-            --bs-gutter-x: 64px !important;
-          }
-
-          .g-2xl-jumbo,
-          .gy-2xl-jumbo {
-            --bs-gutter-y: 64px !important;
-          }
-        }
-
-        @media (min-width: 1880px) {
-          .col-3xl {
-            flex: 1 0 0%;
-          }
-
-          .row-cols-3xl-auto > * {
-            flex: 0 0 auto;
-            width: auto;
-          }
-
-          .row-cols-3xl-1 > * {
-            flex: 0 0 auto;
-            width: 100%;
-          }
-
-          .row-cols-3xl-2 > * {
-            flex: 0 0 auto;
-            width: 50%;
-          }
-
-          .row-cols-3xl-3 > * {
-            flex: 0 0 auto;
-            width: 33.33333333%;
-          }
-
-          .row-cols-3xl-4 > * {
-            flex: 0 0 auto;
-            width: 25%;
-          }
-
-          .row-cols-3xl-5 > * {
-            flex: 0 0 auto;
-            width: 20%;
-          }
-
-          .row-cols-3xl-6 > * {
-            flex: 0 0 auto;
-            width: 16.66666667%;
-          }
-
-          .col-3xl-auto {
-            flex: 0 0 auto;
-            width: auto;
-          }
-
-          .col-3xl-1 {
-            flex: 0 0 auto;
-            width: 8.33333333%;
-          }
-
-          .col-3xl-2 {
-            flex: 0 0 auto;
-            width: 16.66666667%;
-          }
-
-          .col-3xl-3 {
-            flex: 0 0 auto;
-            width: 25%;
-          }
-
-          .col-3xl-4 {
-            flex: 0 0 auto;
-            width: 33.33333333%;
-          }
-
-          .col-3xl-5 {
-            flex: 0 0 auto;
-            width: 41.66666667%;
-          }
-
-          .col-3xl-6 {
-            flex: 0 0 auto;
-            width: 50%;
-          }
-
-          .col-3xl-7 {
-            flex: 0 0 auto;
-            width: 58.33333333%;
-          }
-
-          .col-3xl-8 {
-            flex: 0 0 auto;
-            width: 66.66666667%;
-          }
-
-          .col-3xl-9 {
-            flex: 0 0 auto;
-            width: 75%;
-          }
-
-          .col-3xl-10 {
-            flex: 0 0 auto;
-            width: 83.33333333%;
-          }
-
-          .col-3xl-11 {
-            flex: 0 0 auto;
-            width: 91.66666667%;
-          }
-
-          .col-3xl-12 {
-            flex: 0 0 auto;
-            width: 100%;
-          }
-
-          .offset-3xl-0 {
-            margin-left: 0;
-          }
-
-          .offset-3xl-1 {
-            margin-left: 8.33333333%;
-          }
-
-          .offset-3xl-2 {
-            margin-left: 16.66666667%;
-          }
-
-          .offset-3xl-3 {
-            margin-left: 25%;
-          }
-
-          .offset-3xl-4 {
-            margin-left: 33.33333333%;
-          }
-
-          .offset-3xl-5 {
-            margin-left: 41.66666667%;
-          }
-
-          .offset-3xl-6 {
-            margin-left: 50%;
-          }
-
-          .offset-3xl-7 {
-            margin-left: 58.33333333%;
-          }
-
-          .offset-3xl-8 {
-            margin-left: 66.66666667%;
-          }
-
-          .offset-3xl-9 {
-            margin-left: 75%;
-          }
-
-          .offset-3xl-10 {
-            margin-left: 83.33333333%;
-          }
-
-          .offset-3xl-11 {
-            margin-left: 91.66666667%;
-          }
-
-          .g-3xl-none,
-          .gx-3xl-none {
-            --bs-gutter-x: 0 !important;
-          }
-
-          .g-3xl-none,
-          .gy-3xl-none {
-            --bs-gutter-y: 0 !important;
-          }
-
-          .g-3xl-smash,
-          .gx-3xl-smash {
-            --bs-gutter-x: 2px !important;
-          }
-
-          .g-3xl-smash,
-          .gy-3xl-smash {
-            --bs-gutter-y: 2px !important;
-          }
-
-          .g-3xl-shortest,
-          .gx-3xl-shortest {
-            --bs-gutter-x: 4px !important;
-          }
-
-          .g-3xl-shortest,
-          .gy-3xl-shortest {
-            --bs-gutter-y: 4px !important;
-          }
-
-          .g-3xl-shorter,
-          .gx-3xl-shorter {
-            --bs-gutter-x: 8px !important;
-          }
-
-          .g-3xl-shorter,
-          .gy-3xl-shorter {
-            --bs-gutter-y: 8px !important;
-          }
-
-          .g-3xl-short,
-          .gx-3xl-short {
-            --bs-gutter-x: 12px !important;
-          }
-
-          .g-3xl-short,
-          .gy-3xl-short {
-            --bs-gutter-y: 12px !important;
-          }
-
-          .g-3xl-medium,
-          .gx-3xl-medium {
-            --bs-gutter-x: 16px !important;
-          }
-
-          .g-3xl-medium,
-          .gy-3xl-medium {
-            --bs-gutter-y: 16px !important;
-          }
-
-          .g-3xl-tall,
-          .gx-3xl-tall {
-            --bs-gutter-x: 24px !important;
-          }
-
-          .g-3xl-tall,
-          .gy-3xl-tall {
-            --bs-gutter-y: 24px !important;
-          }
-
-          .g-3xl-taller,
-          .gx-3xl-taller {
-            --bs-gutter-x: 32px !important;
-          }
-
-          .g-3xl-taller,
-          .gy-3xl-taller {
-            --bs-gutter-y: 32px !important;
-          }
-
-          .g-3xl-tallest,
-          .gx-3xl-tallest {
-            --bs-gutter-x: 40px !important;
-          }
-
-          .g-3xl-tallest,
-          .gy-3xl-tallest {
-            --bs-gutter-y: 40px !important;
-          }
-
-          .g-3xl-spacious,
-          .gx-3xl-spacious {
-            --bs-gutter-x: 48px !important;
-          }
-
-          .g-3xl-spacious,
-          .gy-3xl-spacious {
-            --bs-gutter-y: 48px !important;
-          }
-
-          .g-3xl-huge,
-          .gx-3xl-huge {
-            --bs-gutter-x: 56px !important;
-          }
-
-          .g-3xl-huge,
-          .gy-3xl-huge {
-            --bs-gutter-y: 56px !important;
-          }
-
-          .g-3xl-jumbo,
-          .gx-3xl-jumbo {
-            --bs-gutter-x: 64px !important;
-          }
-
-          .g-3xl-jumbo,
-          .gy-3xl-jumbo {
-            --bs-gutter-y: 64px !important;
-          }
-        }
-      }
-    }
-  }
-
-  @include it("generates OUDS and Bootstrap grid classes") {
-    $enable-bootstrap-compatibility: true !global;
-    @import "../../functions";
-    @import "../../tokens/raw";
-    @import "../../tokens/semantic";
-    @import "../../tokens/composite";
-    @import "../../tokens/component";
-    @import "../../variables";
-    @import "../../maps";
-    @import "../../mixins";
-
-    @include assert() {
-      @include output() {
-        @import "../../grid";
-      }
-      @include expect() {
-        :root {
-          --bs-breakpoint-2xs: 0;
-          --bs-breakpoint-xs: 390px;
-          --bs-breakpoint-sm: 480px;
-          --bs-breakpoint-md: 736px;
-          --bs-breakpoint-lg: 1024px;
-          --bs-breakpoint-xl: 1320px;
-          --bs-breakpoint-xxl: 1640px;
-          --bs-breakpoint-2xl: 1640px;
-          --bs-breakpoint-3xl: 1880px;
-        }
-
-        .row {
-          --bs-gutter-y: 0;
-          display: flex;
-          flex-wrap: wrap;
-          margin-top: calc(-1 * var(--bs-gutter-y)); // stylelint-disable-line function-disallowed-list
-          margin-right: calc(-0.5 * var(--bs-gutter-x)); // stylelint-disable-line function-disallowed-list, @stylistic/number-leading-zero
-          margin-left: calc(-0.5 * var(--bs-gutter-x)); // stylelint-disable-line function-disallowed-list, @stylistic/number-leading-zero
-          --bs-gutter-x: 8px;
-        }
-
-        @media (min-width: 390px) {
-          .row {
-            --bs-gutter-x: 16px;
-          }
-        }
-
-        @media (min-width: 480px) {
-          .row {
-            --bs-gutter-x: 16px;
-          }
-        }
-
-        @media (min-width: 736px) {
-          .row {
-            --bs-gutter-x: 24px;
-          }
-        }
-
-        @media (min-width: 1024px) {
-          .row {
-            --bs-gutter-x: 24px;
-          }
-        }
-
-        @media (min-width: 1320px) {
-          .row {
-            --bs-gutter-x: 32px;
-          }
-        }
-
-        @media (min-width: 1640px) {
-          .row {
-            --bs-gutter-x: 32px;
-          }
-        }
-
-        @media (min-width: 1880px) {
-          .row {
-            --bs-gutter-x: 40px;
-          }
-        }
-
-        .row > * {
-          flex-shrink: 0;
-          width: 100%;
-          max-width: 100%;
-          padding-right: calc(var(--bs-gutter-x) * 0.5); // stylelint-disable-line function-disallowed-list, @stylistic/number-leading-zero
-          padding-left: calc(var(--bs-gutter-x) * 0.5); // stylelint-disable-line function-disallowed-list, @stylistic/number-leading-zero
-          margin-top: var(--bs-gutter-y);
-        }
-
-        .col {
-          flex: 1 0 0%;
-        }
-
-        .row-cols-auto > * {
-          flex: 0 0 auto;
-          width: auto;
-        }
-
-        .row-cols-1 > * {
-          flex: 0 0 auto;
-          width: 100%;
-        }
-
-        .row-cols-2 > * {
-          flex: 0 0 auto;
-          width: 50%;
-        }
-
-        .row-cols-3 > * {
-          flex: 0 0 auto;
-          width: 33.33333333%;
-        }
-
-        .row-cols-4 > * {
-          flex: 0 0 auto;
-          width: 25%;
-        }
-
-        .row-cols-5 > * {
-          flex: 0 0 auto;
-          width: 20%;
-        }
-
-        .row-cols-6 > * {
-          flex: 0 0 auto;
-          width: 16.66666667%;
-        }
-
-        .col-auto {
-          flex: 0 0 auto;
-          width: auto;
-        }
-
-        .col-1 {
-          flex: 0 0 auto;
-          width: 8.33333333%;
-        }
-
-        .col-2 {
-          flex: 0 0 auto;
-          width: 16.66666667%;
-        }
-
-        .col-3 {
-          flex: 0 0 auto;
-          width: 25%;
-        }
-
-        .col-4 {
-          flex: 0 0 auto;
-          width: 33.33333333%;
-        }
-
-        .col-5 {
-          flex: 0 0 auto;
-          width: 41.66666667%;
-        }
-
-        .col-6 {
-          flex: 0 0 auto;
-          width: 50%;
-        }
-
-        .col-7 {
-          flex: 0 0 auto;
-          width: 58.33333333%;
-        }
-
-        .col-8 {
-          flex: 0 0 auto;
-          width: 66.66666667%;
-        }
-
-        .col-9 {
-          flex: 0 0 auto;
-          width: 75%;
-        }
-
-        .col-10 {
-          flex: 0 0 auto;
-          width: 83.33333333%;
-        }
-
-        .col-11 {
-          flex: 0 0 auto;
-          width: 91.66666667%;
-        }
-
-        .col-12 {
-          flex: 0 0 auto;
-          width: 100%;
-        }
-
-        .offset-1 {
-          margin-left: 8.33333333%;
-        }
-
-        .offset-2 {
-          margin-left: 16.66666667%;
-        }
-
-        .offset-3 {
-          margin-left: 25%;
-        }
-
-        .offset-4 {
-          margin-left: 33.33333333%;
-        }
-
-        .offset-5 {
-          margin-left: 41.66666667%;
-        }
-
-        .offset-6 {
-          margin-left: 50%;
-        }
-
-        .offset-7 {
-          margin-left: 58.33333333%;
-        }
-
-        .offset-8 {
-          margin-left: 66.66666667%;
-        }
-
-        .offset-9 {
-          margin-left: 75%;
-        }
-
-        .offset-10 {
-          margin-left: 83.33333333%;
-        }
-
-        .offset-11 {
-          margin-left: 91.66666667%;
-        }
-
-        .g-none,
-        .gx-none {
-          --bs-gutter-x: 0 !important;
-        }
-
-        .g-none,
-        .gy-none {
-          --bs-gutter-y: 0 !important;
-        }
-
-        .g-smash,
-        .gx-smash {
-          --bs-gutter-x: 2px !important;
-        }
-
-        .g-smash,
-        .gy-smash {
-          --bs-gutter-y: 2px !important;
-        }
-
-        .g-shortest,
-        .gx-shortest {
-          --bs-gutter-x: 4px !important;
-        }
-
-        .g-shortest,
-        .gy-shortest {
-          --bs-gutter-y: 4px !important;
-        }
-
-        .g-shorter,
-        .gx-shorter {
-          --bs-gutter-x: 8px !important;
-        }
-
-        .g-shorter,
-        .gy-shorter {
-          --bs-gutter-y: 8px !important;
-        }
-
-        .g-short,
-        .gx-short {
-          --bs-gutter-x: 12px !important;
-        }
-
-        .g-short,
-        .gy-short {
-          --bs-gutter-y: 12px !important;
-        }
-
-        .g-medium,
-        .gx-medium {
-          --bs-gutter-x: 16px !important;
-        }
-
-        .g-medium,
-        .gy-medium {
-          --bs-gutter-y: 16px !important;
-        }
-
-        .g-tall,
-        .gx-tall {
-          --bs-gutter-x: 24px !important;
-        }
-
-        .g-tall,
-        .gy-tall {
-          --bs-gutter-y: 24px !important;
-        }
-
-        .g-taller,
-        .gx-taller {
-          --bs-gutter-x: 32px !important;
-        }
-
-        .g-taller,
-        .gy-taller {
-          --bs-gutter-y: 32px !important;
-        }
-
-        .g-tallest,
-        .gx-tallest {
-          --bs-gutter-x: 40px !important;
-        }
-
-        .g-tallest,
-        .gy-tallest {
-          --bs-gutter-y: 40px !important;
-        }
-
-        .g-spacious,
-        .gx-spacious {
-          --bs-gutter-x: 48px !important;
-        }
-
-        .g-spacious,
-        .gy-spacious {
-          --bs-gutter-y: 48px !important;
-        }
-
-        .g-huge,
-        .gx-huge {
-          --bs-gutter-x: 56px !important;
-        }
-
-        .g-huge,
-        .gy-huge {
-          --bs-gutter-y: 56px !important;
-        }
-
-        .g-jumbo,
-        .gx-jumbo {
-          --bs-gutter-x: 64px !important;
-        }
-
-        .g-jumbo,
-        .gy-jumbo {
-          --bs-gutter-y: 64px !important;
-        }
-
-        .g-0,
-        .gx-0 {
-          --bs-gutter-x: 0 !important;
-        }
-
-        .g-0,
-        .gy-0 {
-          --bs-gutter-y: 0 !important;
-        }
-
-        .g-1,
-        .gx-1 {
-          --bs-gutter-x: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
-        }
-
-        .g-1,
-        .gy-1 {
-          --bs-gutter-y: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
-        }
-
-        .g-2,
-        .gx-2 {
-          --bs-gutter-x: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
-        }
-
-        .g-2,
-        .gy-2 {
-          --bs-gutter-y: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
-        }
-
-        .g-3,
-        .gx-3 {
-          --bs-gutter-x: 1.5rem !important;
-        }
-
-        .g-3,
-        .gy-3 {
-          --bs-gutter-y: 1.5rem !important;
-        }
-
-        .g-4,
-        .gx-4 {
-          --bs-gutter-x: 2.5rem !important;
-        }
-
-        .g-4,
-        .gy-4 {
-          --bs-gutter-y: 2.5rem !important;
-        }
-
-        .g-5,
-        .gx-5 {
-          --bs-gutter-x: 3.5rem !important;
-        }
-
-        .g-5,
-        .gy-5 {
-          --bs-gutter-y: 3.5rem !important;
-        }
-
-        @media (min-width: 390px) {
-          .col-xs {
-            flex: 1 0 0%;
-          }
-
-          .row-cols-xs-auto > * {
-            flex: 0 0 auto;
-            width: auto;
-          }
-
-          .row-cols-xs-1 > * {
-            flex: 0 0 auto;
-            width: 100%;
-          }
-
-          .row-cols-xs-2 > * {
-            flex: 0 0 auto;
-            width: 50%;
-          }
-
-          .row-cols-xs-3 > * {
-            flex: 0 0 auto;
-            width: 33.33333333%;
-          }
-
-          .row-cols-xs-4 > * {
-            flex: 0 0 auto;
-            width: 25%;
-          }
-
-          .row-cols-xs-5 > * {
-            flex: 0 0 auto;
-            width: 20%;
-          }
-
-          .row-cols-xs-6 > * {
-            flex: 0 0 auto;
-            width: 16.66666667%;
-          }
-
-          .col-xs-auto {
-            flex: 0 0 auto;
-            width: auto;
-          }
-
-          .col-xs-1 {
-            flex: 0 0 auto;
-            width: 8.33333333%;
-          }
-
-          .col-xs-2 {
-            flex: 0 0 auto;
-            width: 16.66666667%;
-          }
-
-          .col-xs-3 {
-            flex: 0 0 auto;
-            width: 25%;
-          }
-
-          .col-xs-4 {
-            flex: 0 0 auto;
-            width: 33.33333333%;
-          }
-
-          .col-xs-5 {
-            flex: 0 0 auto;
-            width: 41.66666667%;
-          }
-
-          .col-xs-6 {
-            flex: 0 0 auto;
-            width: 50%;
-          }
-
-          .col-xs-7 {
-            flex: 0 0 auto;
-            width: 58.33333333%;
-          }
-
-          .col-xs-8 {
-            flex: 0 0 auto;
-            width: 66.66666667%;
-          }
-
-          .col-xs-9 {
-            flex: 0 0 auto;
-            width: 75%;
-          }
-
-          .col-xs-10 {
-            flex: 0 0 auto;
-            width: 83.33333333%;
-          }
-
-          .col-xs-11 {
-            flex: 0 0 auto;
-            width: 91.66666667%;
-          }
-
-          .col-xs-12 {
-            flex: 0 0 auto;
-            width: 100%;
-          }
-
-          .offset-xs-0 {
-            margin-left: 0;
-          }
-
-          .offset-xs-1 {
-            margin-left: 8.33333333%;
-          }
-
-          .offset-xs-2 {
-            margin-left: 16.66666667%;
-          }
-
-          .offset-xs-3 {
-            margin-left: 25%;
-          }
-
-          .offset-xs-4 {
-            margin-left: 33.33333333%;
-          }
-
-          .offset-xs-5 {
-            margin-left: 41.66666667%;
-          }
-
-          .offset-xs-6 {
-            margin-left: 50%;
-          }
-
-          .offset-xs-7 {
-            margin-left: 58.33333333%;
-          }
-
-          .offset-xs-8 {
-            margin-left: 66.66666667%;
-          }
-
-          .offset-xs-9 {
-            margin-left: 75%;
-          }
-
-          .offset-xs-10 {
-            margin-left: 83.33333333%;
-          }
-
-          .offset-xs-11 {
-            margin-left: 91.66666667%;
-          }
-
-          .g-xs-none,
-          .gx-xs-none {
-            --bs-gutter-x: 0 !important;
-          }
-
-          .g-xs-none,
-          .gy-xs-none {
-            --bs-gutter-y: 0 !important;
-          }
-
-          .g-xs-smash,
-          .gx-xs-smash {
-            --bs-gutter-x: 2px !important;
-          }
-
-          .g-xs-smash,
-          .gy-xs-smash {
-            --bs-gutter-y: 2px !important;
-          }
-
-          .g-xs-shortest,
-          .gx-xs-shortest {
-            --bs-gutter-x: 4px !important;
-          }
-
-          .g-xs-shortest,
-          .gy-xs-shortest {
-            --bs-gutter-y: 4px !important;
-          }
-
-          .g-xs-shorter,
-          .gx-xs-shorter {
-            --bs-gutter-x: 8px !important;
-          }
-
-          .g-xs-shorter,
-          .gy-xs-shorter {
-            --bs-gutter-y: 8px !important;
-          }
-
-          .g-xs-short,
-          .gx-xs-short {
-            --bs-gutter-x: 12px !important;
-          }
-
-          .g-xs-short,
-          .gy-xs-short {
-            --bs-gutter-y: 12px !important;
-          }
-
-          .g-xs-medium,
-          .gx-xs-medium {
-            --bs-gutter-x: 16px !important;
-          }
-
-          .g-xs-medium,
-          .gy-xs-medium {
-            --bs-gutter-y: 16px !important;
-          }
-
-          .g-xs-tall,
-          .gx-xs-tall {
-            --bs-gutter-x: 24px !important;
-          }
-
-          .g-xs-tall,
-          .gy-xs-tall {
-            --bs-gutter-y: 24px !important;
-          }
-
-          .g-xs-taller,
-          .gx-xs-taller {
-            --bs-gutter-x: 32px !important;
-          }
-
-          .g-xs-taller,
-          .gy-xs-taller {
-            --bs-gutter-y: 32px !important;
-          }
-
-          .g-xs-tallest,
-          .gx-xs-tallest {
-            --bs-gutter-x: 40px !important;
-          }
-
-          .g-xs-tallest,
-          .gy-xs-tallest {
-            --bs-gutter-y: 40px !important;
-          }
-
-          .g-xs-spacious,
-          .gx-xs-spacious {
-            --bs-gutter-x: 48px !important;
-          }
-
-          .g-xs-spacious,
-          .gy-xs-spacious {
-            --bs-gutter-y: 48px !important;
-          }
-
-          .g-xs-huge,
-          .gx-xs-huge {
-            --bs-gutter-x: 56px !important;
-          }
-
-          .g-xs-huge,
-          .gy-xs-huge {
-            --bs-gutter-y: 56px !important;
-          }
-
-          .g-xs-jumbo,
-          .gx-xs-jumbo {
-            --bs-gutter-x: 64px !important;
-          }
-
-          .g-xs-jumbo,
-          .gy-xs-jumbo {
-            --bs-gutter-y: 64px !important;
-          }
-
-          .g-xs-0,
-          .gx-xs-0 {
-            --bs-gutter-x: 0 !important;
-          }
-
-          .g-xs-0,
-          .gy-xs-0 {
-            --bs-gutter-y: 0 !important;
-          }
-
-          .g-xs-1,
-          .gx-xs-1 {
-            --bs-gutter-x: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
-          }
-
-          .g-xs-1,
-          .gy-xs-1 {
-            --bs-gutter-y: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
-          }
-
-          .g-xs-2,
-          .gx-xs-2 {
-            --bs-gutter-x: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
-          }
-
-          .g-xs-2,
-          .gy-xs-2 {
-            --bs-gutter-y: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
-          }
-
-          .g-xs-3,
-          .gx-xs-3 {
-            --bs-gutter-x: 1.5rem !important;
-          }
-
-          .g-xs-3,
-          .gy-xs-3 {
-            --bs-gutter-y: 1.5rem !important;
-          }
-
-          .g-xs-4,
-          .gx-xs-4 {
-            --bs-gutter-x: 2.5rem !important;
-          }
-
-          .g-xs-4,
-          .gy-xs-4 {
-            --bs-gutter-y: 2.5rem !important;
-          }
-
-          .g-xs-5,
-          .gx-xs-5 {
-            --bs-gutter-x: 3.5rem !important;
-          }
-
-          .g-xs-5,
-          .gy-xs-5 {
-            --bs-gutter-y: 3.5rem !important;
-          }
-        }
-
-        @media (min-width: 480px) {
-          .col-sm {
-            flex: 1 0 0%;
-          }
-
-          .row-cols-sm-auto > * {
-            flex: 0 0 auto;
-            width: auto;
-          }
-
-          .row-cols-sm-1 > * {
-            flex: 0 0 auto;
-            width: 100%;
-          }
-
-          .row-cols-sm-2 > * {
-            flex: 0 0 auto;
-            width: 50%;
-          }
-
-          .row-cols-sm-3 > * {
-            flex: 0 0 auto;
-            width: 33.33333333%;
-          }
-
-          .row-cols-sm-4 > * {
-            flex: 0 0 auto;
-            width: 25%;
-          }
-
-          .row-cols-sm-5 > * {
-            flex: 0 0 auto;
-            width: 20%;
-          }
-
-          .row-cols-sm-6 > * {
-            flex: 0 0 auto;
-            width: 16.66666667%;
-          }
-
-          .col-sm-auto {
-            flex: 0 0 auto;
-            width: auto;
-          }
-
-          .col-sm-1 {
-            flex: 0 0 auto;
-            width: 8.33333333%;
-          }
-
-          .col-sm-2 {
-            flex: 0 0 auto;
-            width: 16.66666667%;
-          }
-
-          .col-sm-3 {
-            flex: 0 0 auto;
-            width: 25%;
-          }
-
-          .col-sm-4 {
-            flex: 0 0 auto;
-            width: 33.33333333%;
-          }
-
-          .col-sm-5 {
-            flex: 0 0 auto;
-            width: 41.66666667%;
-          }
-
-          .col-sm-6 {
-            flex: 0 0 auto;
-            width: 50%;
-          }
-
-          .col-sm-7 {
-            flex: 0 0 auto;
-            width: 58.33333333%;
-          }
-
-          .col-sm-8 {
-            flex: 0 0 auto;
-            width: 66.66666667%;
-          }
-
-          .col-sm-9 {
-            flex: 0 0 auto;
-            width: 75%;
-          }
-
-          .col-sm-10 {
-            flex: 0 0 auto;
-            width: 83.33333333%;
-          }
-
-          .col-sm-11 {
-            flex: 0 0 auto;
-            width: 91.66666667%;
-          }
-
-          .col-sm-12 {
-            flex: 0 0 auto;
-            width: 100%;
-          }
-
-          .offset-sm-0 {
-            margin-left: 0;
-          }
-
-          .offset-sm-1 {
-            margin-left: 8.33333333%;
-          }
-
-          .offset-sm-2 {
-            margin-left: 16.66666667%;
-          }
-
-          .offset-sm-3 {
-            margin-left: 25%;
-          }
-
-          .offset-sm-4 {
-            margin-left: 33.33333333%;
-          }
-
-          .offset-sm-5 {
-            margin-left: 41.66666667%;
-          }
-
-          .offset-sm-6 {
-            margin-left: 50%;
-          }
-
-          .offset-sm-7 {
-            margin-left: 58.33333333%;
-          }
-
-          .offset-sm-8 {
-            margin-left: 66.66666667%;
-          }
-
-          .offset-sm-9 {
-            margin-left: 75%;
-          }
-
-          .offset-sm-10 {
-            margin-left: 83.33333333%;
-          }
-
-          .offset-sm-11 {
-            margin-left: 91.66666667%;
-          }
-
-          .g-sm-none,
-          .gx-sm-none {
-            --bs-gutter-x: 0 !important;
-          }
-
-          .g-sm-none,
-          .gy-sm-none {
-            --bs-gutter-y: 0 !important;
-          }
-
-          .g-sm-smash,
-          .gx-sm-smash {
-            --bs-gutter-x: 2px !important;
-          }
-
-          .g-sm-smash,
-          .gy-sm-smash {
-            --bs-gutter-y: 2px !important;
-          }
-
-          .g-sm-shortest,
-          .gx-sm-shortest {
-            --bs-gutter-x: 4px !important;
-          }
-
-          .g-sm-shortest,
-          .gy-sm-shortest {
-            --bs-gutter-y: 4px !important;
-          }
-
-          .g-sm-shorter,
-          .gx-sm-shorter {
-            --bs-gutter-x: 8px !important;
-          }
-
-          .g-sm-shorter,
-          .gy-sm-shorter {
-            --bs-gutter-y: 8px !important;
-          }
-
-          .g-sm-short,
-          .gx-sm-short {
-            --bs-gutter-x: 12px !important;
-          }
-
-          .g-sm-short,
-          .gy-sm-short {
-            --bs-gutter-y: 12px !important;
-          }
-
-          .g-sm-medium,
-          .gx-sm-medium {
-            --bs-gutter-x: 16px !important;
-          }
-
-          .g-sm-medium,
-          .gy-sm-medium {
-            --bs-gutter-y: 16px !important;
-          }
-
-          .g-sm-tall,
-          .gx-sm-tall {
-            --bs-gutter-x: 24px !important;
-          }
-
-          .g-sm-tall,
-          .gy-sm-tall {
-            --bs-gutter-y: 24px !important;
-          }
-
-          .g-sm-taller,
-          .gx-sm-taller {
-            --bs-gutter-x: 32px !important;
-          }
-
-          .g-sm-taller,
-          .gy-sm-taller {
-            --bs-gutter-y: 32px !important;
-          }
-
-          .g-sm-tallest,
-          .gx-sm-tallest {
-            --bs-gutter-x: 40px !important;
-          }
-
-          .g-sm-tallest,
-          .gy-sm-tallest {
-            --bs-gutter-y: 40px !important;
-          }
-
-          .g-sm-spacious,
-          .gx-sm-spacious {
-            --bs-gutter-x: 48px !important;
-          }
-
-          .g-sm-spacious,
-          .gy-sm-spacious {
-            --bs-gutter-y: 48px !important;
-          }
-
-          .g-sm-huge,
-          .gx-sm-huge {
-            --bs-gutter-x: 56px !important;
-          }
-
-          .g-sm-huge,
-          .gy-sm-huge {
-            --bs-gutter-y: 56px !important;
-          }
-
-          .g-sm-jumbo,
-          .gx-sm-jumbo {
-            --bs-gutter-x: 64px !important;
-          }
-
-          .g-sm-jumbo,
-          .gy-sm-jumbo {
-            --bs-gutter-y: 64px !important;
-          }
-
-          .g-sm-0,
-          .gx-sm-0 {
-            --bs-gutter-x: 0 !important;
-          }
-
-          .g-sm-0,
-          .gy-sm-0 {
-            --bs-gutter-y: 0 !important;
-          }
-
-          .g-sm-1,
-          .gx-sm-1 {
-            --bs-gutter-x: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
-          }
-
-          .g-sm-1,
-          .gy-sm-1 {
-            --bs-gutter-y: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
-          }
-
-          .g-sm-2,
-          .gx-sm-2 {
-            --bs-gutter-x: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
-          }
-
-          .g-sm-2,
-          .gy-sm-2 {
-            --bs-gutter-y: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
-          }
-
-          .g-sm-3,
-          .gx-sm-3 {
-            --bs-gutter-x: 1.5rem !important;
-          }
-
-          .g-sm-3,
-          .gy-sm-3 {
-            --bs-gutter-y: 1.5rem !important;
-          }
-
-          .g-sm-4,
-          .gx-sm-4 {
-            --bs-gutter-x: 2.5rem !important;
-          }
-
-          .g-sm-4,
-          .gy-sm-4 {
-            --bs-gutter-y: 2.5rem !important;
-          }
-
-          .g-sm-5,
-          .gx-sm-5 {
-            --bs-gutter-x: 3.5rem !important;
-          }
-
-          .g-sm-5,
-          .gy-sm-5 {
-            --bs-gutter-y: 3.5rem !important;
-          }
-        }
-
-        @media (min-width: 736px) {
-          .col-md {
-            flex: 1 0 0%;
-          }
-
-          .row-cols-md-auto > * {
-            flex: 0 0 auto;
-            width: auto;
-          }
-
-          .row-cols-md-1 > * {
-            flex: 0 0 auto;
-            width: 100%;
-          }
-
-          .row-cols-md-2 > * {
-            flex: 0 0 auto;
-            width: 50%;
-          }
-
-          .row-cols-md-3 > * {
-            flex: 0 0 auto;
-            width: 33.33333333%;
-          }
-
-          .row-cols-md-4 > * {
-            flex: 0 0 auto;
-            width: 25%;
-          }
-
-          .row-cols-md-5 > * {
-            flex: 0 0 auto;
-            width: 20%;
-          }
-
-          .row-cols-md-6 > * {
-            flex: 0 0 auto;
-            width: 16.66666667%;
-          }
-
-          .col-md-auto {
-            flex: 0 0 auto;
-            width: auto;
-          }
-
-          .col-md-1 {
-            flex: 0 0 auto;
-            width: 8.33333333%;
-          }
-
-          .col-md-2 {
-            flex: 0 0 auto;
-            width: 16.66666667%;
-          }
-
-          .col-md-3 {
-            flex: 0 0 auto;
-            width: 25%;
-          }
-
-          .col-md-4 {
-            flex: 0 0 auto;
-            width: 33.33333333%;
-          }
-
-          .col-md-5 {
-            flex: 0 0 auto;
-            width: 41.66666667%;
-          }
-
-          .col-md-6 {
-            flex: 0 0 auto;
-            width: 50%;
-          }
-
-          .col-md-7 {
-            flex: 0 0 auto;
-            width: 58.33333333%;
-          }
-
-          .col-md-8 {
-            flex: 0 0 auto;
-            width: 66.66666667%;
-          }
-
-          .col-md-9 {
-            flex: 0 0 auto;
-            width: 75%;
-          }
-
-          .col-md-10 {
-            flex: 0 0 auto;
-            width: 83.33333333%;
-          }
-
-          .col-md-11 {
-            flex: 0 0 auto;
-            width: 91.66666667%;
-          }
-
-          .col-md-12 {
-            flex: 0 0 auto;
-            width: 100%;
-          }
-
-          .offset-md-0 {
-            margin-left: 0;
-          }
-
-          .offset-md-1 {
-            margin-left: 8.33333333%;
-          }
-
-          .offset-md-2 {
-            margin-left: 16.66666667%;
-          }
-
-          .offset-md-3 {
-            margin-left: 25%;
-          }
-
-          .offset-md-4 {
-            margin-left: 33.33333333%;
-          }
-
-          .offset-md-5 {
-            margin-left: 41.66666667%;
-          }
-
-          .offset-md-6 {
-            margin-left: 50%;
-          }
-
-          .offset-md-7 {
-            margin-left: 58.33333333%;
-          }
-
-          .offset-md-8 {
-            margin-left: 66.66666667%;
-          }
-
-          .offset-md-9 {
-            margin-left: 75%;
-          }
-
-          .offset-md-10 {
-            margin-left: 83.33333333%;
-          }
-
-          .offset-md-11 {
-            margin-left: 91.66666667%;
-          }
-
-          .g-md-none,
-          .gx-md-none {
-            --bs-gutter-x: 0 !important;
-          }
-
-          .g-md-none,
-          .gy-md-none {
-            --bs-gutter-y: 0 !important;
-          }
-
-          .g-md-smash,
-          .gx-md-smash {
-            --bs-gutter-x: 2px !important;
-          }
-
-          .g-md-smash,
-          .gy-md-smash {
-            --bs-gutter-y: 2px !important;
-          }
-
-          .g-md-shortest,
-          .gx-md-shortest {
-            --bs-gutter-x: 4px !important;
-          }
-
-          .g-md-shortest,
-          .gy-md-shortest {
-            --bs-gutter-y: 4px !important;
-          }
-
-          .g-md-shorter,
-          .gx-md-shorter {
-            --bs-gutter-x: 8px !important;
-          }
-
-          .g-md-shorter,
-          .gy-md-shorter {
-            --bs-gutter-y: 8px !important;
-          }
-
-          .g-md-short,
-          .gx-md-short {
-            --bs-gutter-x: 12px !important;
-          }
-
-          .g-md-short,
-          .gy-md-short {
-            --bs-gutter-y: 12px !important;
-          }
-
-          .g-md-medium,
-          .gx-md-medium {
-            --bs-gutter-x: 16px !important;
-          }
-
-          .g-md-medium,
-          .gy-md-medium {
-            --bs-gutter-y: 16px !important;
-          }
-
-          .g-md-tall,
-          .gx-md-tall {
-            --bs-gutter-x: 24px !important;
-          }
-
-          .g-md-tall,
-          .gy-md-tall {
-            --bs-gutter-y: 24px !important;
-          }
-
-          .g-md-taller,
-          .gx-md-taller {
-            --bs-gutter-x: 32px !important;
-          }
-
-          .g-md-taller,
-          .gy-md-taller {
-            --bs-gutter-y: 32px !important;
-          }
-
-          .g-md-tallest,
-          .gx-md-tallest {
-            --bs-gutter-x: 40px !important;
-          }
-
-          .g-md-tallest,
-          .gy-md-tallest {
-            --bs-gutter-y: 40px !important;
-          }
-
-          .g-md-spacious,
-          .gx-md-spacious {
-            --bs-gutter-x: 48px !important;
-          }
-
-          .g-md-spacious,
-          .gy-md-spacious {
-            --bs-gutter-y: 48px !important;
-          }
-
-          .g-md-huge,
-          .gx-md-huge {
-            --bs-gutter-x: 56px !important;
-          }
-
-          .g-md-huge,
-          .gy-md-huge {
-            --bs-gutter-y: 56px !important;
-          }
-
-          .g-md-jumbo,
-          .gx-md-jumbo {
-            --bs-gutter-x: 64px !important;
-          }
-
-          .g-md-jumbo,
-          .gy-md-jumbo {
-            --bs-gutter-y: 64px !important;
-          }
-
-          .g-md-0,
-          .gx-md-0 {
-            --bs-gutter-x: 0 !important;
-          }
-
-          .g-md-0,
-          .gy-md-0 {
-            --bs-gutter-y: 0 !important;
-          }
-
-          .g-md-1,
-          .gx-md-1 {
-            --bs-gutter-x: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
-          }
-
-          .g-md-1,
-          .gy-md-1 {
-            --bs-gutter-y: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
-          }
-
-          .g-md-2,
-          .gx-md-2 {
-            --bs-gutter-x: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
-          }
-
-          .g-md-2,
-          .gy-md-2 {
-            --bs-gutter-y: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
-          }
-
-          .g-md-3,
-          .gx-md-3 {
-            --bs-gutter-x: 1.5rem !important;
-          }
-
-          .g-md-3,
-          .gy-md-3 {
-            --bs-gutter-y: 1.5rem !important;
-          }
-
-          .g-md-4,
-          .gx-md-4 {
-            --bs-gutter-x: 2.5rem !important;
-          }
-
-          .g-md-4,
-          .gy-md-4 {
-            --bs-gutter-y: 2.5rem !important;
-          }
-
-          .g-md-5,
-          .gx-md-5 {
-            --bs-gutter-x: 3.5rem !important;
-          }
-
-          .g-md-5,
-          .gy-md-5 {
-            --bs-gutter-y: 3.5rem !important;
-          }
-        }
-
-        @media (min-width: 1024px) {
-          .col-lg {
-            flex: 1 0 0%;
-          }
-
-          .row-cols-lg-auto > * {
-            flex: 0 0 auto;
-            width: auto;
-          }
-
-          .row-cols-lg-1 > * {
-            flex: 0 0 auto;
-            width: 100%;
-          }
-
-          .row-cols-lg-2 > * {
-            flex: 0 0 auto;
-            width: 50%;
-          }
-
-          .row-cols-lg-3 > * {
-            flex: 0 0 auto;
-            width: 33.33333333%;
-          }
-
-          .row-cols-lg-4 > * {
-            flex: 0 0 auto;
-            width: 25%;
-          }
-
-          .row-cols-lg-5 > * {
-            flex: 0 0 auto;
-            width: 20%;
-          }
-
-          .row-cols-lg-6 > * {
-            flex: 0 0 auto;
-            width: 16.66666667%;
-          }
-
-          .col-lg-auto {
-            flex: 0 0 auto;
-            width: auto;
-          }
-
-          .col-lg-1 {
-            flex: 0 0 auto;
-            width: 8.33333333%;
-          }
-
-          .col-lg-2 {
-            flex: 0 0 auto;
-            width: 16.66666667%;
-          }
-
-          .col-lg-3 {
-            flex: 0 0 auto;
-            width: 25%;
-          }
-
-          .col-lg-4 {
-            flex: 0 0 auto;
-            width: 33.33333333%;
-          }
-
-          .col-lg-5 {
-            flex: 0 0 auto;
-            width: 41.66666667%;
-          }
-
-          .col-lg-6 {
-            flex: 0 0 auto;
-            width: 50%;
-          }
-
-          .col-lg-7 {
-            flex: 0 0 auto;
-            width: 58.33333333%;
-          }
-
-          .col-lg-8 {
-            flex: 0 0 auto;
-            width: 66.66666667%;
-          }
-
-          .col-lg-9 {
-            flex: 0 0 auto;
-            width: 75%;
-          }
-
-          .col-lg-10 {
-            flex: 0 0 auto;
-            width: 83.33333333%;
-          }
-
-          .col-lg-11 {
-            flex: 0 0 auto;
-            width: 91.66666667%;
-          }
-
-          .col-lg-12 {
-            flex: 0 0 auto;
-            width: 100%;
-          }
-
-          .offset-lg-0 {
-            margin-left: 0;
-          }
-
-          .offset-lg-1 {
-            margin-left: 8.33333333%;
-          }
-
-          .offset-lg-2 {
-            margin-left: 16.66666667%;
-          }
-
-          .offset-lg-3 {
-            margin-left: 25%;
-          }
-
-          .offset-lg-4 {
-            margin-left: 33.33333333%;
-          }
-
-          .offset-lg-5 {
-            margin-left: 41.66666667%;
-          }
-
-          .offset-lg-6 {
-            margin-left: 50%;
-          }
-
-          .offset-lg-7 {
-            margin-left: 58.33333333%;
-          }
-
-          .offset-lg-8 {
-            margin-left: 66.66666667%;
-          }
-
-          .offset-lg-9 {
-            margin-left: 75%;
-          }
-
-          .offset-lg-10 {
-            margin-left: 83.33333333%;
-          }
-
-          .offset-lg-11 {
-            margin-left: 91.66666667%;
-          }
-
-          .g-lg-none,
-          .gx-lg-none {
-            --bs-gutter-x: 0 !important;
-          }
-
-          .g-lg-none,
-          .gy-lg-none {
-            --bs-gutter-y: 0 !important;
-          }
-
-          .g-lg-smash,
-          .gx-lg-smash {
-            --bs-gutter-x: 2px !important;
-          }
-
-          .g-lg-smash,
-          .gy-lg-smash {
-            --bs-gutter-y: 2px !important;
-          }
-
-          .g-lg-shortest,
-          .gx-lg-shortest {
-            --bs-gutter-x: 4px !important;
-          }
-
-          .g-lg-shortest,
-          .gy-lg-shortest {
-            --bs-gutter-y: 4px !important;
-          }
-
-          .g-lg-shorter,
-          .gx-lg-shorter {
-            --bs-gutter-x: 8px !important;
-          }
-
-          .g-lg-shorter,
-          .gy-lg-shorter {
-            --bs-gutter-y: 8px !important;
-          }
-
-          .g-lg-short,
-          .gx-lg-short {
-            --bs-gutter-x: 12px !important;
-          }
-
-          .g-lg-short,
-          .gy-lg-short {
-            --bs-gutter-y: 12px !important;
-          }
-
-          .g-lg-medium,
-          .gx-lg-medium {
-            --bs-gutter-x: 16px !important;
-          }
-
-          .g-lg-medium,
-          .gy-lg-medium {
-            --bs-gutter-y: 16px !important;
-          }
-
-          .g-lg-tall,
-          .gx-lg-tall {
-            --bs-gutter-x: 24px !important;
-          }
-
-          .g-lg-tall,
-          .gy-lg-tall {
-            --bs-gutter-y: 24px !important;
-          }
-
-          .g-lg-taller,
-          .gx-lg-taller {
-            --bs-gutter-x: 32px !important;
-          }
-
-          .g-lg-taller,
-          .gy-lg-taller {
-            --bs-gutter-y: 32px !important;
-          }
-
-          .g-lg-tallest,
-          .gx-lg-tallest {
-            --bs-gutter-x: 40px !important;
-          }
-
-          .g-lg-tallest,
-          .gy-lg-tallest {
-            --bs-gutter-y: 40px !important;
-          }
-
-          .g-lg-spacious,
-          .gx-lg-spacious {
-            --bs-gutter-x: 48px !important;
-          }
-
-          .g-lg-spacious,
-          .gy-lg-spacious {
-            --bs-gutter-y: 48px !important;
-          }
-
-          .g-lg-huge,
-          .gx-lg-huge {
-            --bs-gutter-x: 56px !important;
-          }
-
-          .g-lg-huge,
-          .gy-lg-huge {
-            --bs-gutter-y: 56px !important;
-          }
-
-          .g-lg-jumbo,
-          .gx-lg-jumbo {
-            --bs-gutter-x: 64px !important;
-          }
-
-          .g-lg-jumbo,
-          .gy-lg-jumbo {
-            --bs-gutter-y: 64px !important;
-          }
-
-          .g-lg-0,
-          .gx-lg-0 {
-            --bs-gutter-x: 0 !important;
-          }
-
-          .g-lg-0,
-          .gy-lg-0 {
-            --bs-gutter-y: 0 !important;
-          }
-
-          .g-lg-1,
-          .gx-lg-1 {
-            --bs-gutter-x: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
-          }
-
-          .g-lg-1,
-          .gy-lg-1 {
-            --bs-gutter-y: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
-          }
-
-          .g-lg-2,
-          .gx-lg-2 {
-            --bs-gutter-x: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
-          }
-
-          .g-lg-2,
-          .gy-lg-2 {
-            --bs-gutter-y: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
-          }
-
-          .g-lg-3,
-          .gx-lg-3 {
-            --bs-gutter-x: 1.5rem !important;
-          }
-
-          .g-lg-3,
-          .gy-lg-3 {
-            --bs-gutter-y: 1.5rem !important;
-          }
-
-          .g-lg-4,
-          .gx-lg-4 {
-            --bs-gutter-x: 2.5rem !important;
-          }
-
-          .g-lg-4,
-          .gy-lg-4 {
-            --bs-gutter-y: 2.5rem !important;
-          }
-
-          .g-lg-5,
-          .gx-lg-5 {
-            --bs-gutter-x: 3.5rem !important;
-          }
-
-          .g-lg-5,
-          .gy-lg-5 {
-            --bs-gutter-y: 3.5rem !important;
-          }
-        }
-
-        @media (min-width: 1320px) {
-          .col-xl {
-            flex: 1 0 0%;
-          }
-
-          .row-cols-xl-auto > * {
-            flex: 0 0 auto;
-            width: auto;
-          }
-
-          .row-cols-xl-1 > * {
-            flex: 0 0 auto;
-            width: 100%;
-          }
-
-          .row-cols-xl-2 > * {
-            flex: 0 0 auto;
-            width: 50%;
-          }
-
-          .row-cols-xl-3 > * {
-            flex: 0 0 auto;
-            width: 33.33333333%;
-          }
-
-          .row-cols-xl-4 > * {
-            flex: 0 0 auto;
-            width: 25%;
-          }
-
-          .row-cols-xl-5 > * {
-            flex: 0 0 auto;
-            width: 20%;
-          }
-
-          .row-cols-xl-6 > * {
-            flex: 0 0 auto;
-            width: 16.66666667%;
-          }
-
-          .col-xl-auto {
-            flex: 0 0 auto;
-            width: auto;
-          }
-
-          .col-xl-1 {
-            flex: 0 0 auto;
-            width: 8.33333333%;
-          }
-
-          .col-xl-2 {
-            flex: 0 0 auto;
-            width: 16.66666667%;
-          }
-
-          .col-xl-3 {
-            flex: 0 0 auto;
-            width: 25%;
-          }
-
-          .col-xl-4 {
-            flex: 0 0 auto;
-            width: 33.33333333%;
-          }
-
-          .col-xl-5 {
-            flex: 0 0 auto;
-            width: 41.66666667%;
-          }
-
-          .col-xl-6 {
-            flex: 0 0 auto;
-            width: 50%;
-          }
-
-          .col-xl-7 {
-            flex: 0 0 auto;
-            width: 58.33333333%;
-          }
-
-          .col-xl-8 {
-            flex: 0 0 auto;
-            width: 66.66666667%;
-          }
-
-          .col-xl-9 {
-            flex: 0 0 auto;
-            width: 75%;
-          }
-
-          .col-xl-10 {
-            flex: 0 0 auto;
-            width: 83.33333333%;
-          }
-
-          .col-xl-11 {
-            flex: 0 0 auto;
-            width: 91.66666667%;
-          }
-
-          .col-xl-12 {
-            flex: 0 0 auto;
-            width: 100%;
-          }
-
-          .offset-xl-0 {
-            margin-left: 0;
-          }
-
-          .offset-xl-1 {
-            margin-left: 8.33333333%;
-          }
-
-          .offset-xl-2 {
-            margin-left: 16.66666667%;
-          }
-
-          .offset-xl-3 {
-            margin-left: 25%;
-          }
-
-          .offset-xl-4 {
-            margin-left: 33.33333333%;
-          }
-
-          .offset-xl-5 {
-            margin-left: 41.66666667%;
-          }
-
-          .offset-xl-6 {
-            margin-left: 50%;
-          }
-
-          .offset-xl-7 {
-            margin-left: 58.33333333%;
-          }
-
-          .offset-xl-8 {
-            margin-left: 66.66666667%;
-          }
-
-          .offset-xl-9 {
-            margin-left: 75%;
-          }
-
-          .offset-xl-10 {
-            margin-left: 83.33333333%;
-          }
-
-          .offset-xl-11 {
-            margin-left: 91.66666667%;
-          }
-
-          .g-xl-none,
-          .gx-xl-none {
-            --bs-gutter-x: 0 !important;
-          }
-
-          .g-xl-none,
-          .gy-xl-none {
-            --bs-gutter-y: 0 !important;
-          }
-
-          .g-xl-smash,
-          .gx-xl-smash {
-            --bs-gutter-x: 2px !important;
-          }
-
-          .g-xl-smash,
-          .gy-xl-smash {
-            --bs-gutter-y: 2px !important;
-          }
-
-          .g-xl-shortest,
-          .gx-xl-shortest {
-            --bs-gutter-x: 4px !important;
-          }
-
-          .g-xl-shortest,
-          .gy-xl-shortest {
-            --bs-gutter-y: 4px !important;
-          }
-
-          .g-xl-shorter,
-          .gx-xl-shorter {
-            --bs-gutter-x: 8px !important;
-          }
-
-          .g-xl-shorter,
-          .gy-xl-shorter {
-            --bs-gutter-y: 8px !important;
-          }
-
-          .g-xl-short,
-          .gx-xl-short {
-            --bs-gutter-x: 12px !important;
-          }
-
-          .g-xl-short,
-          .gy-xl-short {
-            --bs-gutter-y: 12px !important;
-          }
-
-          .g-xl-medium,
-          .gx-xl-medium {
-            --bs-gutter-x: 16px !important;
-          }
-
-          .g-xl-medium,
-          .gy-xl-medium {
-            --bs-gutter-y: 16px !important;
-          }
-
-          .g-xl-tall,
-          .gx-xl-tall {
-            --bs-gutter-x: 24px !important;
-          }
-
-          .g-xl-tall,
-          .gy-xl-tall {
-            --bs-gutter-y: 24px !important;
-          }
-
-          .g-xl-taller,
-          .gx-xl-taller {
-            --bs-gutter-x: 32px !important;
-          }
-
-          .g-xl-taller,
-          .gy-xl-taller {
-            --bs-gutter-y: 32px !important;
-          }
-
-          .g-xl-tallest,
-          .gx-xl-tallest {
-            --bs-gutter-x: 40px !important;
-          }
-
-          .g-xl-tallest,
-          .gy-xl-tallest {
-            --bs-gutter-y: 40px !important;
-          }
-
-          .g-xl-spacious,
-          .gx-xl-spacious {
-            --bs-gutter-x: 48px !important;
-          }
-
-          .g-xl-spacious,
-          .gy-xl-spacious {
-            --bs-gutter-y: 48px !important;
-          }
-
-          .g-xl-huge,
-          .gx-xl-huge {
-            --bs-gutter-x: 56px !important;
-          }
-
-          .g-xl-huge,
-          .gy-xl-huge {
-            --bs-gutter-y: 56px !important;
-          }
-
-          .g-xl-jumbo,
-          .gx-xl-jumbo {
-            --bs-gutter-x: 64px !important;
-          }
-
-          .g-xl-jumbo,
-          .gy-xl-jumbo {
-            --bs-gutter-y: 64px !important;
-          }
-
-          .g-xl-0,
-          .gx-xl-0 {
-            --bs-gutter-x: 0 !important;
-          }
-
-          .g-xl-0,
-          .gy-xl-0 {
-            --bs-gutter-y: 0 !important;
-          }
-
-          .g-xl-1,
-          .gx-xl-1 {
-            --bs-gutter-x: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
-          }
-
-          .g-xl-1,
-          .gy-xl-1 {
-            --bs-gutter-y: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
-          }
-
-          .g-xl-2,
-          .gx-xl-2 {
-            --bs-gutter-x: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
-          }
-
-          .g-xl-2,
-          .gy-xl-2 {
-            --bs-gutter-y: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
-          }
-
-          .g-xl-3,
-          .gx-xl-3 {
-            --bs-gutter-x: 1.5rem !important;
-          }
-
-          .g-xl-3,
-          .gy-xl-3 {
-            --bs-gutter-y: 1.5rem !important;
-          }
-
-          .g-xl-4,
-          .gx-xl-4 {
-            --bs-gutter-x: 2.5rem !important;
-          }
-
-          .g-xl-4,
-          .gy-xl-4 {
-            --bs-gutter-y: 2.5rem !important;
-          }
-
-          .g-xl-5,
-          .gx-xl-5 {
-            --bs-gutter-x: 3.5rem !important;
-          }
-
-          .g-xl-5,
-          .gy-xl-5 {
-            --bs-gutter-y: 3.5rem !important;
-          }
-        }
-
-        @media (min-width: 1640px) {
-          .col-xxl {
-            flex: 1 0 0%;
-          }
-
-          .row-cols-xxl-auto > * {
-            flex: 0 0 auto;
-            width: auto;
-          }
-
-          .row-cols-xxl-1 > * {
-            flex: 0 0 auto;
-            width: 100%;
-          }
-
-          .row-cols-xxl-2 > * {
-            flex: 0 0 auto;
-            width: 50%;
-          }
-
-          .row-cols-xxl-3 > * {
-            flex: 0 0 auto;
-            width: 33.33333333%;
-          }
-
-          .row-cols-xxl-4 > * {
-            flex: 0 0 auto;
-            width: 25%;
-          }
-
-          .row-cols-xxl-5 > * {
-            flex: 0 0 auto;
-            width: 20%;
-          }
-
-          .row-cols-xxl-6 > * {
-            flex: 0 0 auto;
-            width: 16.66666667%;
-          }
-
-          .col-xxl-auto {
-            flex: 0 0 auto;
-            width: auto;
-          }
-
-          .col-xxl-1 {
-            flex: 0 0 auto;
-            width: 8.33333333%;
-          }
-
-          .col-xxl-2 {
-            flex: 0 0 auto;
-            width: 16.66666667%;
-          }
-
-          .col-xxl-3 {
-            flex: 0 0 auto;
-            width: 25%;
-          }
-
-          .col-xxl-4 {
-            flex: 0 0 auto;
-            width: 33.33333333%;
-          }
-
-          .col-xxl-5 {
-            flex: 0 0 auto;
-            width: 41.66666667%;
-          }
-
-          .col-xxl-6 {
-            flex: 0 0 auto;
-            width: 50%;
-          }
-
-          .col-xxl-7 {
-            flex: 0 0 auto;
-            width: 58.33333333%;
-          }
-
-          .col-xxl-8 {
-            flex: 0 0 auto;
-            width: 66.66666667%;
-          }
-
-          .col-xxl-9 {
-            flex: 0 0 auto;
-            width: 75%;
-          }
-
-          .col-xxl-10 {
-            flex: 0 0 auto;
-            width: 83.33333333%;
-          }
-
-          .col-xxl-11 {
-            flex: 0 0 auto;
-            width: 91.66666667%;
-          }
-
-          .col-xxl-12 {
-            flex: 0 0 auto;
-            width: 100%;
-          }
-
-          .offset-xxl-0 {
-            margin-left: 0;
-          }
-
-          .offset-xxl-1 {
-            margin-left: 8.33333333%;
-          }
-
-          .offset-xxl-2 {
-            margin-left: 16.66666667%;
-          }
-
-          .offset-xxl-3 {
-            margin-left: 25%;
-          }
-
-          .offset-xxl-4 {
-            margin-left: 33.33333333%;
-          }
-
-          .offset-xxl-5 {
-            margin-left: 41.66666667%;
-          }
-
-          .offset-xxl-6 {
-            margin-left: 50%;
-          }
-
-          .offset-xxl-7 {
-            margin-left: 58.33333333%;
-          }
-
-          .offset-xxl-8 {
-            margin-left: 66.66666667%;
-          }
-
-          .offset-xxl-9 {
-            margin-left: 75%;
-          }
-
-          .offset-xxl-10 {
-            margin-left: 83.33333333%;
-          }
-
-          .offset-xxl-11 {
-            margin-left: 91.66666667%;
-          }
-
-          .g-xxl-none,
-          .gx-xxl-none {
-            --bs-gutter-x: 0 !important;
-          }
-
-          .g-xxl-none,
-          .gy-xxl-none {
-            --bs-gutter-y: 0 !important;
-          }
-
-          .g-xxl-smash,
-          .gx-xxl-smash {
-            --bs-gutter-x: 2px !important;
-          }
-
-          .g-xxl-smash,
-          .gy-xxl-smash {
-            --bs-gutter-y: 2px !important;
-          }
-
-          .g-xxl-shortest,
-          .gx-xxl-shortest {
-            --bs-gutter-x: 4px !important;
-          }
-
-          .g-xxl-shortest,
-          .gy-xxl-shortest {
-            --bs-gutter-y: 4px !important;
-          }
-
-          .g-xxl-shorter,
-          .gx-xxl-shorter {
-            --bs-gutter-x: 8px !important;
-          }
-
-          .g-xxl-shorter,
-          .gy-xxl-shorter {
-            --bs-gutter-y: 8px !important;
-          }
-
-          .g-xxl-short,
-          .gx-xxl-short {
-            --bs-gutter-x: 12px !important;
-          }
-
-          .g-xxl-short,
-          .gy-xxl-short {
-            --bs-gutter-y: 12px !important;
-          }
-
-          .g-xxl-medium,
-          .gx-xxl-medium {
-            --bs-gutter-x: 16px !important;
-          }
-
-          .g-xxl-medium,
-          .gy-xxl-medium {
-            --bs-gutter-y: 16px !important;
-          }
-
-          .g-xxl-tall,
-          .gx-xxl-tall {
-            --bs-gutter-x: 24px !important;
-          }
-
-          .g-xxl-tall,
-          .gy-xxl-tall {
-            --bs-gutter-y: 24px !important;
-          }
-
-          .g-xxl-taller,
-          .gx-xxl-taller {
-            --bs-gutter-x: 32px !important;
-          }
-
-          .g-xxl-taller,
-          .gy-xxl-taller {
-            --bs-gutter-y: 32px !important;
-          }
-
-          .g-xxl-tallest,
-          .gx-xxl-tallest {
-            --bs-gutter-x: 40px !important;
-          }
-
-          .g-xxl-tallest,
-          .gy-xxl-tallest {
-            --bs-gutter-y: 40px !important;
-          }
-
-          .g-xxl-spacious,
-          .gx-xxl-spacious {
-            --bs-gutter-x: 48px !important;
-          }
-
-          .g-xxl-spacious,
-          .gy-xxl-spacious {
-            --bs-gutter-y: 48px !important;
-          }
-
-          .g-xxl-huge,
-          .gx-xxl-huge {
-            --bs-gutter-x: 56px !important;
-          }
-
-          .g-xxl-huge,
-          .gy-xxl-huge {
-            --bs-gutter-y: 56px !important;
-          }
-
-          .g-xxl-jumbo,
-          .gx-xxl-jumbo {
-            --bs-gutter-x: 64px !important;
-          }
-
-          .g-xxl-jumbo,
-          .gy-xxl-jumbo {
-            --bs-gutter-y: 64px !important;
-          }
-
-          .g-xxl-0,
-          .gx-xxl-0 {
-            --bs-gutter-x: 0 !important;
-          }
-
-          .g-xxl-0,
-          .gy-xxl-0 {
-            --bs-gutter-y: 0 !important;
-          }
-
-          .g-xxl-1,
-          .gx-xxl-1 {
-            --bs-gutter-x: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
-          }
-
-          .g-xxl-1,
-          .gy-xxl-1 {
-            --bs-gutter-y: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
-          }
-
-          .g-xxl-2,
-          .gx-xxl-2 {
-            --bs-gutter-x: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
-          }
-
-          .g-xxl-2,
-          .gy-xxl-2 {
-            --bs-gutter-y: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
-          }
-
-          .g-xxl-3,
-          .gx-xxl-3 {
-            --bs-gutter-x: 1.5rem !important;
-          }
-
-          .g-xxl-3,
-          .gy-xxl-3 {
-            --bs-gutter-y: 1.5rem !important;
-          }
-
-          .g-xxl-4,
-          .gx-xxl-4 {
-            --bs-gutter-x: 2.5rem !important;
-          }
-
-          .g-xxl-4,
-          .gy-xxl-4 {
-            --bs-gutter-y: 2.5rem !important;
-          }
-
-          .g-xxl-5,
-          .gx-xxl-5 {
-            --bs-gutter-x: 3.5rem !important;
-          }
-
-          .g-xxl-5,
-          .gy-xxl-5 {
-            --bs-gutter-y: 3.5rem !important;
-          }
-        }
-
-        @media (min-width: 1640px) {
-          .col-2xl {
-            flex: 1 0 0%;
-          }
-
-          .row-cols-2xl-auto > * {
-            flex: 0 0 auto;
-            width: auto;
-          }
-
-          .row-cols-2xl-1 > * {
-            flex: 0 0 auto;
-            width: 100%;
-          }
-
-          .row-cols-2xl-2 > * {
-            flex: 0 0 auto;
-            width: 50%;
-          }
-
-          .row-cols-2xl-3 > * {
-            flex: 0 0 auto;
-            width: 33.33333333%;
-          }
-
-          .row-cols-2xl-4 > * {
-            flex: 0 0 auto;
-            width: 25%;
-          }
-
-          .row-cols-2xl-5 > * {
-            flex: 0 0 auto;
-            width: 20%;
-          }
-
-          .row-cols-2xl-6 > * {
-            flex: 0 0 auto;
-            width: 16.66666667%;
-          }
-
-          .col-2xl-auto {
-            flex: 0 0 auto;
-            width: auto;
-          }
-
-          .col-2xl-1 {
-            flex: 0 0 auto;
-            width: 8.33333333%;
-          }
-
-          .col-2xl-2 {
-            flex: 0 0 auto;
-            width: 16.66666667%;
-          }
-
-          .col-2xl-3 {
-            flex: 0 0 auto;
-            width: 25%;
-          }
-
-          .col-2xl-4 {
-            flex: 0 0 auto;
-            width: 33.33333333%;
-          }
-
-          .col-2xl-5 {
-            flex: 0 0 auto;
-            width: 41.66666667%;
-          }
-
-          .col-2xl-6 {
-            flex: 0 0 auto;
-            width: 50%;
-          }
-
-          .col-2xl-7 {
-            flex: 0 0 auto;
-            width: 58.33333333%;
-          }
-
-          .col-2xl-8 {
-            flex: 0 0 auto;
-            width: 66.66666667%;
-          }
-
-          .col-2xl-9 {
-            flex: 0 0 auto;
-            width: 75%;
-          }
-
-          .col-2xl-10 {
-            flex: 0 0 auto;
-            width: 83.33333333%;
-          }
-
-          .col-2xl-11 {
-            flex: 0 0 auto;
-            width: 91.66666667%;
-          }
-
-          .col-2xl-12 {
-            flex: 0 0 auto;
-            width: 100%;
-          }
-
-          .offset-2xl-0 {
-            margin-left: 0;
-          }
-
-          .offset-2xl-1 {
-            margin-left: 8.33333333%;
-          }
-
-          .offset-2xl-2 {
-            margin-left: 16.66666667%;
-          }
-
-          .offset-2xl-3 {
-            margin-left: 25%;
-          }
-
-          .offset-2xl-4 {
-            margin-left: 33.33333333%;
-          }
-
-          .offset-2xl-5 {
-            margin-left: 41.66666667%;
-          }
-
-          .offset-2xl-6 {
-            margin-left: 50%;
-          }
-
-          .offset-2xl-7 {
-            margin-left: 58.33333333%;
-          }
-
-          .offset-2xl-8 {
-            margin-left: 66.66666667%;
-          }
-
-          .offset-2xl-9 {
-            margin-left: 75%;
-          }
-
-          .offset-2xl-10 {
-            margin-left: 83.33333333%;
-          }
-
-          .offset-2xl-11 {
-            margin-left: 91.66666667%;
-          }
-
-          .g-2xl-none,
-          .gx-2xl-none {
-            --bs-gutter-x: 0 !important;
-          }
-
-          .g-2xl-none,
-          .gy-2xl-none {
-            --bs-gutter-y: 0 !important;
-          }
-
-          .g-2xl-smash,
-          .gx-2xl-smash {
-            --bs-gutter-x: 2px !important;
-          }
-
-          .g-2xl-smash,
-          .gy-2xl-smash {
-            --bs-gutter-y: 2px !important;
-          }
-
-          .g-2xl-shortest,
-          .gx-2xl-shortest {
-            --bs-gutter-x: 4px !important;
-          }
-
-          .g-2xl-shortest,
-          .gy-2xl-shortest {
-            --bs-gutter-y: 4px !important;
-          }
-
-          .g-2xl-shorter,
-          .gx-2xl-shorter {
-            --bs-gutter-x: 8px !important;
-          }
-
-          .g-2xl-shorter,
-          .gy-2xl-shorter {
-            --bs-gutter-y: 8px !important;
-          }
-
-          .g-2xl-short,
-          .gx-2xl-short {
-            --bs-gutter-x: 12px !important;
-          }
-
-          .g-2xl-short,
-          .gy-2xl-short {
-            --bs-gutter-y: 12px !important;
-          }
-
-          .g-2xl-medium,
-          .gx-2xl-medium {
-            --bs-gutter-x: 16px !important;
-          }
-
-          .g-2xl-medium,
-          .gy-2xl-medium {
-            --bs-gutter-y: 16px !important;
-          }
-
-          .g-2xl-tall,
-          .gx-2xl-tall {
-            --bs-gutter-x: 24px !important;
-          }
-
-          .g-2xl-tall,
-          .gy-2xl-tall {
-            --bs-gutter-y: 24px !important;
-          }
-
-          .g-2xl-taller,
-          .gx-2xl-taller {
-            --bs-gutter-x: 32px !important;
-          }
-
-          .g-2xl-taller,
-          .gy-2xl-taller {
-            --bs-gutter-y: 32px !important;
-          }
-
-          .g-2xl-tallest,
-          .gx-2xl-tallest {
-            --bs-gutter-x: 40px !important;
-          }
-
-          .g-2xl-tallest,
-          .gy-2xl-tallest {
-            --bs-gutter-y: 40px !important;
-          }
-
-          .g-2xl-spacious,
-          .gx-2xl-spacious {
-            --bs-gutter-x: 48px !important;
-          }
-
-          .g-2xl-spacious,
-          .gy-2xl-spacious {
-            --bs-gutter-y: 48px !important;
-          }
-
-          .g-2xl-huge,
-          .gx-2xl-huge {
-            --bs-gutter-x: 56px !important;
-          }
-
-          .g-2xl-huge,
-          .gy-2xl-huge {
-            --bs-gutter-y: 56px !important;
-          }
-
-          .g-2xl-jumbo,
-          .gx-2xl-jumbo {
-            --bs-gutter-x: 64px !important;
-          }
-
-          .g-2xl-jumbo,
-          .gy-2xl-jumbo {
-            --bs-gutter-y: 64px !important;
-          }
-
-          .g-2xl-0,
-          .gx-2xl-0 {
-            --bs-gutter-x: 0 !important;
-          }
-
-          .g-2xl-0,
-          .gy-2xl-0 {
-            --bs-gutter-y: 0 !important;
-          }
-
-          .g-2xl-1,
-          .gx-2xl-1 {
-            --bs-gutter-x: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
-          }
-
-          .g-2xl-1,
-          .gy-2xl-1 {
-            --bs-gutter-y: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
-          }
-
-          .g-2xl-2,
-          .gx-2xl-2 {
-            --bs-gutter-x: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
-          }
-
-          .g-2xl-2,
-          .gy-2xl-2 {
-            --bs-gutter-y: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
-          }
-
-          .g-2xl-3,
-          .gx-2xl-3 {
-            --bs-gutter-x: 1.5rem !important;
-          }
-
-          .g-2xl-3,
-          .gy-2xl-3 {
-            --bs-gutter-y: 1.5rem !important;
-          }
-
-          .g-2xl-4,
-          .gx-2xl-4 {
-            --bs-gutter-x: 2.5rem !important;
-          }
-
-          .g-2xl-4,
-          .gy-2xl-4 {
-            --bs-gutter-y: 2.5rem !important;
-          }
-
-          .g-2xl-5,
-          .gx-2xl-5 {
-            --bs-gutter-x: 3.5rem !important;
-          }
-
-          .g-2xl-5,
-          .gy-2xl-5 {
-            --bs-gutter-y: 3.5rem !important;
-          }
-        }
-
-        @media (min-width: 1880px) {
-          .col-3xl {
-            flex: 1 0 0%;
-          }
-
-          .row-cols-3xl-auto > * {
-            flex: 0 0 auto;
-            width: auto;
-          }
-
-          .row-cols-3xl-1 > * {
-            flex: 0 0 auto;
-            width: 100%;
-          }
-
-          .row-cols-3xl-2 > * {
-            flex: 0 0 auto;
-            width: 50%;
-          }
-
-          .row-cols-3xl-3 > * {
-            flex: 0 0 auto;
-            width: 33.33333333%;
-          }
-
-          .row-cols-3xl-4 > * {
-            flex: 0 0 auto;
-            width: 25%;
-          }
-
-          .row-cols-3xl-5 > * {
-            flex: 0 0 auto;
-            width: 20%;
-          }
-
-          .row-cols-3xl-6 > * {
-            flex: 0 0 auto;
-            width: 16.66666667%;
-          }
-
-          .col-3xl-auto {
-            flex: 0 0 auto;
-            width: auto;
-          }
-
-          .col-3xl-1 {
-            flex: 0 0 auto;
-            width: 8.33333333%;
-          }
-
-          .col-3xl-2 {
-            flex: 0 0 auto;
-            width: 16.66666667%;
-          }
-
-          .col-3xl-3 {
-            flex: 0 0 auto;
-            width: 25%;
-          }
-
-          .col-3xl-4 {
-            flex: 0 0 auto;
-            width: 33.33333333%;
-          }
-
-          .col-3xl-5 {
-            flex: 0 0 auto;
-            width: 41.66666667%;
-          }
-
-          .col-3xl-6 {
-            flex: 0 0 auto;
-            width: 50%;
-          }
-
-          .col-3xl-7 {
-            flex: 0 0 auto;
-            width: 58.33333333%;
-          }
-
-          .col-3xl-8 {
-            flex: 0 0 auto;
-            width: 66.66666667%;
-          }
-
-          .col-3xl-9 {
-            flex: 0 0 auto;
-            width: 75%;
-          }
-
-          .col-3xl-10 {
-            flex: 0 0 auto;
-            width: 83.33333333%;
-          }
-
-          .col-3xl-11 {
-            flex: 0 0 auto;
-            width: 91.66666667%;
-          }
-
-          .col-3xl-12 {
-            flex: 0 0 auto;
-            width: 100%;
-          }
-
-          .offset-3xl-0 {
-            margin-left: 0;
-          }
-
-          .offset-3xl-1 {
-            margin-left: 8.33333333%;
-          }
-
-          .offset-3xl-2 {
-            margin-left: 16.66666667%;
-          }
-
-          .offset-3xl-3 {
-            margin-left: 25%;
-          }
-
-          .offset-3xl-4 {
-            margin-left: 33.33333333%;
-          }
-
-          .offset-3xl-5 {
-            margin-left: 41.66666667%;
-          }
-
-          .offset-3xl-6 {
-            margin-left: 50%;
-          }
-
-          .offset-3xl-7 {
-            margin-left: 58.33333333%;
-          }
-
-          .offset-3xl-8 {
-            margin-left: 66.66666667%;
-          }
-
-          .offset-3xl-9 {
-            margin-left: 75%;
-          }
-
-          .offset-3xl-10 {
-            margin-left: 83.33333333%;
-          }
-
-          .offset-3xl-11 {
-            margin-left: 91.66666667%;
-          }
-
-          .g-3xl-none,
-          .gx-3xl-none {
-            --bs-gutter-x: 0 !important;
-          }
-
-          .g-3xl-none,
-          .gy-3xl-none {
-            --bs-gutter-y: 0 !important;
-          }
-
-          .g-3xl-smash,
-          .gx-3xl-smash {
-            --bs-gutter-x: 2px !important;
-          }
-
-          .g-3xl-smash,
-          .gy-3xl-smash {
-            --bs-gutter-y: 2px !important;
-          }
-
-          .g-3xl-shortest,
-          .gx-3xl-shortest {
-            --bs-gutter-x: 4px !important;
-          }
-
-          .g-3xl-shortest,
-          .gy-3xl-shortest {
-            --bs-gutter-y: 4px !important;
-          }
-
-          .g-3xl-shorter,
-          .gx-3xl-shorter {
-            --bs-gutter-x: 8px !important;
-          }
-
-          .g-3xl-shorter,
-          .gy-3xl-shorter {
-            --bs-gutter-y: 8px !important;
-          }
-
-          .g-3xl-short,
-          .gx-3xl-short {
-            --bs-gutter-x: 12px !important;
-          }
-
-          .g-3xl-short,
-          .gy-3xl-short {
-            --bs-gutter-y: 12px !important;
-          }
-
-          .g-3xl-medium,
-          .gx-3xl-medium {
-            --bs-gutter-x: 16px !important;
-          }
-
-          .g-3xl-medium,
-          .gy-3xl-medium {
-            --bs-gutter-y: 16px !important;
-          }
-
-          .g-3xl-tall,
-          .gx-3xl-tall {
-            --bs-gutter-x: 24px !important;
-          }
-
-          .g-3xl-tall,
-          .gy-3xl-tall {
-            --bs-gutter-y: 24px !important;
-          }
-
-          .g-3xl-taller,
-          .gx-3xl-taller {
-            --bs-gutter-x: 32px !important;
-          }
-
-          .g-3xl-taller,
-          .gy-3xl-taller {
-            --bs-gutter-y: 32px !important;
-          }
-
-          .g-3xl-tallest,
-          .gx-3xl-tallest {
-            --bs-gutter-x: 40px !important;
-          }
-
-          .g-3xl-tallest,
-          .gy-3xl-tallest {
-            --bs-gutter-y: 40px !important;
-          }
-
-          .g-3xl-spacious,
-          .gx-3xl-spacious {
-            --bs-gutter-x: 48px !important;
-          }
-
-          .g-3xl-spacious,
-          .gy-3xl-spacious {
-            --bs-gutter-y: 48px !important;
-          }
-
-          .g-3xl-huge,
-          .gx-3xl-huge {
-            --bs-gutter-x: 56px !important;
-          }
-
-          .g-3xl-huge,
-          .gy-3xl-huge {
-            --bs-gutter-y: 56px !important;
-          }
-
-          .g-3xl-jumbo,
-          .gx-3xl-jumbo {
-            --bs-gutter-x: 64px !important;
-          }
-
-          .g-3xl-jumbo,
-          .gy-3xl-jumbo {
-            --bs-gutter-y: 64px !important;
-          }
-
-          .g-3xl-0,
-          .gx-3xl-0 {
-            --bs-gutter-x: 0 !important;
-          }
-
-          .g-3xl-0,
-          .gy-3xl-0 {
-            --bs-gutter-y: 0 !important;
-          }
-
-          .g-3xl-1,
-          .gx-3xl-1 {
-            --bs-gutter-x: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
-          }
-
-          .g-3xl-1,
-          .gy-3xl-1 {
-            --bs-gutter-y: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
-          }
-
-          .g-3xl-2,
-          .gx-3xl-2 {
-            --bs-gutter-x: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
-          }
-
-          .g-3xl-2,
-          .gy-3xl-2 {
-            --bs-gutter-y: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
-          }
-
-          .g-3xl-3,
-          .gx-3xl-3 {
-            --bs-gutter-x: 1.5rem !important;
-          }
-
-          .g-3xl-3,
-          .gy-3xl-3 {
-            --bs-gutter-y: 1.5rem !important;
-          }
-
-          .g-3xl-4,
-          .gx-3xl-4 {
-            --bs-gutter-x: 2.5rem !important;
-          }
 
-          .g-3xl-4,
-          .gy-3xl-4 {
-            --bs-gutter-y: 2.5rem !important;
+          .text-3xl-start {
+            text-align: left !important;
           }
 
-          .g-3xl-5,
-          .gx-3xl-5 {
-            --bs-gutter-x: 3.5rem !important;
+          .text-3xl-end {
+            text-align: right !important;
           }
 
-          .g-3xl-5,
-          .gy-3xl-5 {
-            --bs-gutter-y: 3.5rem !important;
+          .text-3xl-center {
+            text-align: center !important;
           }
         }
       }
diff --git a/scss/tokens/_composite.scss b/scss/tokens/_composite.scss
index 92b9974652..806658c05b 100644
--- a/scss/tokens/_composite.scss
+++ b/scss/tokens/_composite.scss
@@ -13,3 +13,10 @@ $ouds-elevation-sticky-default: $ouds-elevation-x-sticky-default $ouds-elevation
 $ouds-elevation-sticky-emphasized: $ouds-elevation-x-sticky-emphasized $ouds-elevation-y-sticky-emphasized $ouds-elevation-blur-sticky-emphasized $ouds-elevation-spread-sticky-emphasized $ouds-elevation-color-sticky-emphasized-light !default;
 $ouds-elevation-sticky-navigation-scrolled: $ouds-elevation-x-sticky-navigation-scrolled $ouds-elevation-y-sticky-navigation-scrolled $ouds-elevation-blur-sticky-navigation-scrolled $ouds-elevation-spread-sticky-navigation-scrolled $ouds-elevation-color-sticky-navigation-scrolled-light !default;
 // scss-docs-end ouds-composite-elevation
+
+// stylelint-disable value-keyword-case
+// scss-docs-start ouds-composite-font
+$ouds-font-family-sans-serif-stack: "Helvetica Neue", Helvetica, "SF Pro", Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
+$ouds-font-family-monospace-stack: Consolas, "SFMono-Regular", "Roboto Mono", "Liberation Mono", Menlo, monospace !default;
+// scss-docs-end ouds-composite-font
+// stylelint-enable value-keyword-case
diff --git a/site/assets/scss/_colors.scss b/site/assets/scss/_colors.scss
index 9ee7abbd13..4236193637 100644
--- a/site/assets/scss/_colors.scss
+++ b/site/assets/scss/_colors.scss
@@ -15,8 +15,8 @@
       top: 1rem;
       right: 1rem;
       padding-left: 1rem;
-      font-size: .75rem;
-      line-height: 1.35;
+      @include get-font-size("label-small"); // OUDS mod: instead of `.75rem`
+      // OUDS mod: no line-height
       white-space: pre;
       content:
         str-slice($contrast-ratio, 1, 4) "\A"
diff --git a/site/assets/scss/_content.scss b/site/assets/scss/_content.scss
index d4e4e1f189..34009f615f 100644
--- a/site/assets/scss/_content.scss
+++ b/site/assets/scss/_content.scss
@@ -47,14 +47,13 @@
     white-space: nowrap;
 
     .bs-text-standard {
-      font-size: $font-size-base;
-      line-height: $line-height-base;
+      @include get-font-size("body-medium");
     }
   }
 
   > details {
+    @include get-font-size("label-large");
     padding: 0 10px; // static even when zoomed
-    font-size: 1rem;
     line-height: 1.5;
     border: var(--bs-border-color) dashed calc(var(--bs-border-width) * .5); // stylelint-disable-line function-disallowed-list
   }
@@ -112,11 +111,11 @@
 
 .bd-title {
   --bs-heading-color: var(--bs-emphasis-color);
-  @include font-size(3rem);
+  @include get-font-size("display-small"); // OUDS mod: instead of `3rem`
 }
 
 .bd-lead {
-  @include font-size(1.5rem);
+  @include get-font-size("heading-small"); // OUDS mod: instead of `1.5rem`
   font-weight: 400;
 }
 
diff --git a/site/assets/scss/_masthead.scss b/site/assets/scss/_masthead.scss
index 560b9a4059..3d7cf4d929 100644
--- a/site/assets/scss/_masthead.scss
+++ b/site/assets/scss/_masthead.scss
@@ -9,7 +9,7 @@
   }
 
   .lead {
-    @include font-size(1rem);
+    @include get-font-size("heading-small"); // OUDS mod: instead of `@include font-size(1rem)`
     font-weight: 400;
     color: var(--bs-secondary-color);
   }
@@ -48,12 +48,7 @@
   }
 
   // OUDS mod: no `#carbonads`
-
-  @include media-breakpoint-up(md) {
-    .lead {
-      @include font-size(1.5rem);
-    }
-  }
+  // OUDS mod: no @media query
 }
 
 .masthead-followup {
@@ -64,14 +59,10 @@
   }
 
   .lead {
-    @include font-size(1rem);
+    @include get-font-size("heading-small"); // OUDS mod: instead of `@include font-size(1rem)`
   }
 
-  @include media-breakpoint-up(md) {
-    .lead {
-      @include font-size(1.25rem);
-    }
-  }
+  // OUDS mod: no @media query
 }
 
 .masthead-followup-icon {
diff --git a/site/assets/scss/_ouds-web.scss b/site/assets/scss/_ouds-web.scss
index b3ec661888..65c002a62e 100644
--- a/site/assets/scss/_ouds-web.scss
+++ b/site/assets/scss/_ouds-web.scss
@@ -13,7 +13,7 @@ body {
 }
 
 .display-0 {
-  font-size: 5.25em;
+  @include get-font-size("display-large"); // OUDS mod: instead of `5.25em`
   backface-visibility: hidden;
   transform-style: preserve-3d;
   -webkit-font-smoothing: antialiased;
diff --git a/site/assets/scss/_placeholder-img.scss b/site/assets/scss/_placeholder-img.scss
index 6f5bbe4189..d663b4efa3 100644
--- a/site/assets/scss/_placeholder-img.scss
+++ b/site/assets/scss/_placeholder-img.scss
@@ -5,11 +5,11 @@
 // Remember to update `site/_layouts/examples.html` too if this changes!
 
 .bd-placeholder-img {
-  @include font-size(1.125rem);
+  @include get-font-size("body-large"); // OUDS mod: instead of `1.125rem`
   user-select: none;
   text-anchor: middle;
 }
 
 .bd-placeholder-img-lg {
-  @include font-size(3.5rem);
+  @include get-font-size("display-medium"); // OUDS mod: instead of `3.5rem`
 }
diff --git a/site/assets/scss/_sidebar.scss b/site/assets/scss/_sidebar.scss
index 6ce66af533..58d10905a0 100644
--- a/site/assets/scss/_sidebar.scss
+++ b/site/assets/scss/_sidebar.scss
@@ -25,15 +25,13 @@
 
   // OUDS mod
   svg {
-    font-size: 1.5625rem;
+    font-size: var(--#{$prefix}icon-medium-with-body-medium);
   }
   // End mod
 }
 
 .bd-links-nav {
-  @include media-breakpoint-down(lg) {
-    font-size: .875rem;
-  }
+  @include get-font-size("body-medium"); // OUDS mod: instead of media query
 
   @include media-breakpoint-between(xs, lg) {
     column-count: 2;
diff --git a/site/assets/scss/_tarteaucitron.scss b/site/assets/scss/_tarteaucitron.scss
index c76ac9743c..bace60c7fd 100644
--- a/site/assets/scss/_tarteaucitron.scss
+++ b/site/assets/scss/_tarteaucitron.scss
@@ -54,7 +54,7 @@
 }
 
 @include tac("DisclaimerAlert") {
-  font-size: $font-size-sm;
+  @include get-font-size("label-small");
 }
 
 @include tac("ClosePanel") {
@@ -81,20 +81,17 @@
 }
 
 @include tac("H1", true) {
+  @include get-font-size("heading-xlarge");
   margin-bottom: $spacer;
-  font-size: $h2-font-size;
-  letter-spacing: $h2-spacing;
 }
 
 @include tac("H2", true) {
+  @include get-font-size("heading-large");
   padding-top: $spacer / 10;
-  font-size: $h4-font-size;
-  letter-spacing: $h4-spacing;
 }
 
 @include tac("H3", true) {
-  font-size: $h6-font-size;
-  letter-spacing: $h6-spacing;
+  @include get-font-size("heading-small");
 }
 
 @include tac("Info") {
@@ -104,7 +101,7 @@
 }
 
 @include tac("Name", true) {
-  font-size: $font-size-sm;
+  @include get-font-size("label-small");
   color: var(--bs-secondary-color);
 }
 
diff --git a/site/assets/scss/_toc.scss b/site/assets/scss/_toc.scss
index 8dbfcb473e..0d7460c6c2 100644
--- a/site/assets/scss/_toc.scss
+++ b/site/assets/scss/_toc.scss
@@ -11,7 +11,7 @@
   }
 
   nav {
-    @include font-size(.875rem);
+    @include get-font-size("label-medium"); // OUDS mod: instead of `.875rem`
 
     ul {
       padding-left: 0;
@@ -20,16 +20,16 @@
 
       ul {
         padding-left: 1rem;
-        margin-left: -.5rem; // OUDS mod
+        margin-left: -$ouds-space-fixed-shorter; // OUDS mod
       }
     }
 
     a {
       display: block;
-      padding: .3125rem 0 .3125rem .75rem; // OUDS mod
+      padding: $ouds-space-fixed-shortest 0 $ouds-space-fixed-shortest $ouds-space-fixed-medium; // OUDS mod
       color: inherit;
       text-decoration: none;
-      border-left: .125rem solid transparent;
+      // OUDS mod: no border-left
 
       &:hover,
       &.active {
@@ -64,7 +64,7 @@
 .bd-toc-collapse {
   @include media-breakpoint-down(md) {
     nav {
-      padding: 1.25rem 1.25rem 1.25rem 1rem;
+      padding: $ouds-space-fixed-medium; // OUDS mod: instead of `1.25rem 1.25rem 1.25rem 1rem`
       background-color: var(--bs-tertiary-bg);
       border: 1px solid var(--bs-border-color);
       @include border-radius(var(--bs-border-radius));
diff --git a/site/assets/scss/docs.scss b/site/assets/scss/docs.scss
index 0ef3dfdb63..3b661f047b 100644
--- a/site/assets/scss/docs.scss
+++ b/site/assets/scss/docs.scss
@@ -64,3 +64,5 @@ $enable-cssgrid: true;
 @import "mixins";
 @import "ouds-web";
 @import "tarteaucitron";
+
+@import "../../static/docs/0.0/assets/fonts/solaris-icons";
diff --git a/site/content/404.md b/site/content/404.md
index b63ed73794..b3ede345f7 100644
--- a/site/content/404.md
+++ b/site/content/404.md
@@ -9,6 +9,6 @@ sitemap:
 ---
 
 <div class="text-center py-huge">
-  <h1 class="display-1">404</h1>
-  <h2>File not found</h2>
+  <h1 class="mx-auto display-1">404</h1>
+  <h2 class="mx-auto">File not found</h2>
 </div>
diff --git a/site/content/docs/0.0/content/reboot.md b/site/content/docs/0.0/content/reboot.md
index 5ece016074..b9bfa0a81d 100644
--- a/site/content/docs/0.0/content/reboot.md
+++ b/site/content/docs/0.0/content/reboot.md
@@ -11,4 +11,473 @@ aliases:
 toc: true
 ---
 
-{{< callout-soon "page" >}}
+## Approach
+
+Reboot builds upon Normalize, providing many HTML elements with somewhat opinionated styles using only element selectors. Additional styling is done only with classes. For example, we reboot some `<table>` styles for a simpler baseline and later provide `.table`, `.table-bordered`, and more.
+
+Here are our guidelines and reasons for choosing what to override in Reboot:
+
+- Update some browser default values to use `px`s instead of `em`s for fixed component spacing, to keep as much space as possible for meaningful content on zoom.
+- Avoid `margin-top`. Vertical margins can collapse, yielding unexpected results. More importantly though, a single direction of `margin` is a simpler mental model.
+- For easier scaling across device sizes, block elements should use `px`s for `margin`s.
+- Keep declarations of `font`-related properties to a minimum, using `inherit` whenever possible. We use `max-width` on all font references for readability reasons. If you want to get rid of the `max-width`, please make sure to use our `.mw-none` [width utility]({{< docsref "/utilities/sizing" >}}).
+
+## CSS variables
+
+OUDS Web standards require `@import`s across all our CSS bundles (including `ouds-web.css`, `ouds-web-reboot.css`, and `ouds-web-grid.css`) to include `_root.scss`. This adds `:root` level CSS variables to all bundles, regardless of how many of them are used in that bundle. Ultimately OUDS Web will continue to see more [CSS variables]({{< docsref "/customize/css-variables" >}}) added over time, in order to provide more real-time customization without the need to always recompile Sass. Our approach is to take our source Sass variables and transform them into CSS variables. That way, even if you don't use CSS variables, you still have all the power of Sass. **This is still in-progress and will take time to fully implement.**
+
+For example, consider these `:root` CSS variables for common `<body>` styles:
+
+{{< scss-docs name="root-body-variables" file="scss/_root.scss" >}}
+
+In practice, those variables are then applied in Reboot like so:
+
+{{< scss-docs name="reboot-body-rules" file="scss/_reboot.scss" >}}
+
+Which allows you to make real-time customizations however you like:
+
+```html
+<body style="--bs-body-color: #333;">
+  <!-- ... -->
+</body>
+```
+
+## Page defaults
+
+The `<html>` and `<body>` elements are updated to provide better page-wide defaults. More specifically:
+
+- The `box-sizing` is globally set on every element—including `*::before` and `*::after`, to `border-box`. This ensures that the declared width of element is never exceeded due to padding or border.
+  - No base `font-size` is declared on the `<html>`, but `16px` is assumed (the browser default). `font-size: 1rem` is applied on the `<body>` for easy responsive type-scaling via media queries while respecting user preferences and ensuring a more accessible approach. This browser default can be overridden by modifying the `$font-size-root` variable.
+- The `<body>` also sets a global `font-family`, `font-weight`, `line-height`, and `color`. This is inherited later by some form elements to prevent font inconsistencies.
+- For safety, the `<body>` has a declared `background-color`, defaulting to `#fff`.
+
+## Native font stack
+
+OUDS Web utilizes a "native font stack" or "system font stack" for optimum text rendering on every device and OS. These system fonts have been designed specifically with today's devices in mind, with improved rendering on screens, variable font support, and more. Read more about [native font stacks in this *Smashing Magazine* article](https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/).
+
+```scss
+$font-family-sans-serif:
+  // Safari for macOS and iOS (San Francisco)
+  "SF Pro",
+  // Android
+  Roboto,
+  // older macOS and iOS
+  "Helvetica Neue",
+  // Windows
+  Helvetica
+  // Basic web fallback
+  Arial,
+  // Sans serif fallback
+  sans-serif !default;
+```
+
+This `font-family` is applied to the `<body>` and automatically inherited globally throughout OUDS Web. To switch the global `font-family`, update `$font-family-base` and recompile OUDS Web.
+
+The following `font-family` is applied on every code basis element. To switch the global `font-family`, update `$font-family-code` and recompile OUDS Web.
+
+```scss
+$font-family-sans-serif:
+  // Safari for macOS and iOS (San Francisco)
+  "SF Mono",
+  // Android
+  "Roboto Mono",
+  // Windows
+  Consolas,
+  // Basic web fallback
+  Menlo,
+  // Monospace fallback
+  monospace !default;
+```
+
+## Headings
+
+All heading elements—`<h1>`—`<h6>` have their `margin-top` removed, `margin-bottom: 16px` set, and `line-height` tightened. While headings inherit their `color` by default, you can also override it via optional CSS variable, `--bs-heading-color`.
+
+{{< bs-table "table" >}}
+| Heading | Example |
+| --- | --- |
+| `<h1></h1>` | <span class="h1">h1. OUDS Web heading</span> |
+| `<h2></h2>` | <span class="h2">h2. OUDS Web heading</span> |
+| `<h3></h3>` | <span class="h3">h3. OUDS Web heading</span> |
+| `<h4></h4>` | <span class="h4">h4. OUDS Web heading</span> |
+| `<h5></h5>` | <span class="h5">h5. OUDS Web heading</span> |
+| `<h6></h6>` | <span class="h6">h6. OUDS Web heading</span> |
+{{< /bs-table >}}
+
+## Paragraphs
+
+All `<p>` elements have their `margin-top` removed and `margin-bottom: 16px` set for easy spacing. If you want to get rid of the `margin-bottom`, please make sure to use our `.mb-none` [spacing utilities]({{< docsref "/utilities/spacing" >}}).
+
+{{< example >}}
+<p class="mw-none mb-none">This is an example paragraph which is long enough so it's easy to see and compare the <code>max-width</code> in action and compare it to the one below.</p>
+<p>This is an example paragraph which is long enough so it's easy to see and compare the <code>max-width</code> in action and compare it to the one above.</p>
+<p>This is an example paragraph.</p>
+{{< /example >}}
+
+<!-- ## Links
+
+Links have a default `color` and underline applied. While links change on `:hover`, they don't change based on whether someone `:visited` the link. They also receive no special `:focus` styles.
+
+{{< example >}}
+<a href="#">This is an example link</a>
+{{< /example >}}
+
+As of Bootstrap v5.3.x, link `color` is set using `rgba()` and new `-rgb` CSS variables, allowing for easy customization of link color opacity. Change the link color opacity with the `-bs-link-opacity` CSS variable:
+
+{{< example >}}
+<a href="#" style="-bs-link-opacity: .5">This is an example link</a>
+{{< /example >}}
+
+Placeholder links—those without an `href`—are targeted with a more specific selector and have their `color` and `text-decoration` reset to their default values.
+
+{{< example >}}
+<a>This is a placeholder link</a>
+{{< /example >}} -->
+
+## Horizontal rules
+
+The `<hr>` element has been simplified. Similar to browser defaults, `<hr>`s are styled via `border-top`, have a default `opacity: .25`, and automatically inherit their `border-color` via `color`, including when `color` is set via the parent. They can be modified with text, border, and opacity utilities.
+
+{{< example >}}
+<hr>
+{{< /example >}}
+
+<!-- Should be in example above <div class="text-success">
+  <hr>
+</div>
+
+<hr class="border border-danger border-2 opacity-50">
+<hr class="border border-primary border-3 opacity-75">-->
+
+<!-- ## Lists
+
+All lists—`<ul>`, `<ol>`, and `<dl>`—have their `margin-top` removed and a `margin-bottom: 16px`. Nested lists have no `margin-bottom`. We've also reset the `padding-left` on `<ul>` and `<ol>` elements.
+
+<div class="bd-example">
+{{< markdown >}}
+* All lists have their top margin removed
+* And their bottom margin normalized
+* Nested lists have no bottom margin
+  * This way they have a more even appearance
+  * Particularly when followed by more list items
+* The left padding has also been reset
+
+1. Here's an ordered list
+2. With a few list items
+3. It has the same overall look
+4. As the previous unordered list
+{{< /markdown >}}
+</div>
+
+For simpler styling, clear hierarchy, and better spacing, description lists have updated `margin`s. `<dd>`s reset `margin-left` to `0` and add `margin-bottom: 8px`. `<dt>`s are **bolded**.
+
+<div class="bd-example">
+  <dl>
+    <dt>Description lists</dt>
+    <dd>A description list is perfect for defining terms.</dd>
+    <dt>Term</dt>
+    <dd>Definition for the term.</dd>
+    <dd>A second definition for the same term.</dd>
+    <dt>Another term</dt>
+    <dd>Definition for this other term.</dd>
+  </dl>
+</div> -->
+
+## Inline code
+
+Wrap inline snippets of code with `<code>`. Be sure to escape HTML angle brackets.
+
+{{< example >}}
+For example, <code>&lt;section&gt;</code> should be wrapped as inline.
+{{< /example >}}
+
+## Code blocks
+
+Use `<pre>`s for multiple lines of code. Once again, be sure to escape any angle brackets in the code for proper rendering. The `<pre>` element is reset to remove its `margin-top` and use `px` units for its `margin-bottom`.
+
+{{< example >}}
+<pre><code>&lt;p&gt;Sample text here...&lt;/p&gt;
+&lt;p&gt;And another line of sample text here...&lt;/p&gt;
+</code></pre>
+{{< /example >}}
+
+## Variables
+
+For indicating variables use the `<var>` tag.
+
+{{< example >}}
+<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
+{{< /example >}}
+
+## User input
+
+Use the `<kbd>` to indicate input that is typically entered via keyboard.
+
+{{< example >}}
+To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
+To edit settings, press <kbd><kbd>Ctrl</kbd> + <kbd>,</kbd></kbd>
+{{< /example >}}
+
+## Sample output
+
+For indicating sample output from a program use the `<samp>` tag.
+
+{{< example >}}
+<samp>This text is meant to be treated as sample output from a computer program.</samp>
+{{< /example >}}
+
+## Tables
+
+Tables are slightly adjusted to style `<caption>`s, collapse borders, and ensure consistent `text-align` throughout. Additional changes for borders, padding, and more come with [the `.table` class]({{< docsref "/content/tables" >}}).
+
+{{< example >}}
+<table>
+  <caption>
+    This is an example table, and this is its caption to describe the contents.
+  </caption>
+  <thead>
+    <tr>
+      <th>Table heading</th>
+      <th>Table heading</th>
+      <th>Table heading</th>
+      <th>Table heading</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Table cell</td>
+      <td>Table cell</td>
+      <td>Table cell</td>
+      <td>Table cell</td>
+    </tr>
+    <tr>
+      <td>Table cell</td>
+      <td>Table cell</td>
+      <td>Table cell</td>
+      <td>Table cell</td>
+    </tr>
+    <tr>
+      <td>Table cell</td>
+      <td>Table cell</td>
+      <td>Table cell</td>
+      <td>Table cell</td>
+    </tr>
+  </tbody>
+</table>
+{{< /example >}}
+
+## Forms
+
+Various form elements have been rebooted for simpler base styles. Here are some of the most notable changes:
+
+- `<fieldset>`s have no borders, padding, or margin so they can be easily used as wrappers for individual inputs or groups of inputs.
+- `<legend>`s, like fieldsets, have also been restyled to be displayed as a heading of sorts.
+- `<label>`s are set to `display: inline-block` to allow `margin` to be applied.
+- `<input>`s, `<select>`s, `<textarea>`s, and `<button>`s are mostly addressed by Normalize, but Reboot removes their `margin` and sets `line-height: inherit`, too.
+- `<textarea>`s are modified to only be resizable vertically as horizontal resizing often "breaks" page layout.
+- `<button>`s and `<input>` button elements have `cursor: pointer` when `:not(:disabled)`.
+
+These changes, and more, are demonstrated below.
+
+{{< callout warning >}}
+{{< partial "callouts/warning-input-support.md" >}}
+{{< /callout >}}
+
+<form class="bd-example">
+  <fieldset>
+    <legend>Example legend</legend>
+    <p>
+      <label for="input">Example input</label>
+      <input type="text" id="input" placeholder="Example input">
+    </p>
+    <p>
+      <label for="email">Example email</label>
+      <input type="email" id="email" placeholder="test@example.com">
+    </p>
+    <p>
+      <label for="tel">Example telephone</label>
+      <input type="tel" id="tel">
+    </p>
+    <p>
+      <label for="url">Example url</label>
+      <input type="url" id="url">
+    </p>
+    <p>
+      <label for="number">Example number</label>
+      <input type="number" id="number">
+    </p>
+    <p>
+      <label for="search">Example search</label>
+      <input type="search" id="search">
+    </p>
+    <p>
+      <label for="range">Example range</label>
+      <input type="range" id="range" min="0" max="10">
+    </p>
+    <p>
+      <label for="file">Example file input</label>
+      <input type="file" id="file">
+    </p>
+    <p>
+      <label for="select">Example select</label>
+      <select id="select">
+        <option value="">Choose...</option>
+        <optgroup label="Option group 1">
+          <option value="">Option 1</option>
+          <option value="">Option 2</option>
+          <option value="">Option 3</option>
+        </optgroup>
+        <optgroup label="Option group 2">
+          <option value="">Option 4</option>
+          <option value="">Option 5</option>
+          <option value="">Option 6</option>
+        </optgroup>
+      </select>
+    </p>
+    <p>
+      <label>
+        <input type="checkbox" value="">
+        Check this checkbox
+      </label>
+    </p>
+    <p>
+      <label>
+        <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
+        Option one is this and that
+      </label>
+      <label>
+        <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
+        Option two is something else that's also super long to demonstrate the wrapping of these fancy form controls.
+      </label>
+      <label>
+        <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
+        Option three is disabled
+      </label>
+    </p>
+    <p>
+      <label for="textarea">Example textarea</label>
+      <textarea id="textarea" rows="3"></textarea>
+    </p>
+    <p>
+      <label for="date">Example date</label>
+      <input type="date" id="date">
+    </p>
+    <p>
+      <label for="time">Example time</label>
+      <input type="time" id="time">
+    </p>
+    <p>
+      <label for="password">Example password</label>
+      <input type="password" id="password">
+    </p>
+    <p>
+      <label for="datetime-local">Example datetime-local</label>
+      <input type="datetime-local" id="datetime-local">
+    </p>
+    <p>
+      <label for="week">Example week</label>
+      <input type="week" id="week">
+    </p>
+    <p>
+      <label for="month">Example month</label>
+      <input type="month" id="month">
+    </p>
+    <p>
+      <label for="color">Example color</label>
+      <input type="color" id="color">
+    </p>
+    <p>
+      <label for="output">Example output</label>
+      <output name="result" id="output">100</output>
+    </p>
+    <p>
+      <button type="submit">Button submit</button>
+      <input type="submit" value="Input submit button">
+      <input type="reset" value="Input reset button">
+      <input type="button" value="Input button">
+    </p>
+    <p>
+      <button type="submit" disabled>Button submit</button>
+      <input type="submit" value="Input submit button" disabled>
+      <input type="reset" value="Input reset button" disabled>
+      <input type="button" value="Input button" disabled>
+    </p>
+  </fieldset>
+</form>
+
+### Pointers on buttons
+
+Reboot includes an enhancement for `role="button"` to change the default cursor to `pointer`. Add this attribute to elements to help indicate elements are interactive. This role isn't necessary for `<button>` elements, which get their own `cursor` change.
+
+{{< example >}}
+<span role="button" tabindex="0">Non-button element button</span>
+{{< /example >}}
+
+## Misc elements
+
+### Address
+
+The `<address>` element is updated to reset the browser default `font-style` from `italic` to `normal`. `line-height` is also now inherited, and `margin-bottom: 16px` has been added. `<address>`s are for presenting contact information for the nearest ancestor (or an entire body of work). Preserve formatting by ending lines with `<br>`.
+
+<div class="bd-example">
+  <address>
+    <strong>ACME Corporation</strong><br>
+    1123 Fictional St,<br>
+    San Francisco, CA 94103<br>
+    <abbr title="Phone">P:</abbr> (123) 456-7890
+  </address>
+
+  <address>
+    <strong>Full Name</strong><br>
+    <a href="mailto:first.last@example.com">first.last@example.com</a>
+  </address>
+</div>
+
+### Blockquote
+
+The default `margin` on blockquotes is `1em 40px`, so we reset that to `0 0 16px` for something more consistent with other elements.
+
+<div class="bd-example">
+  <blockquote class="blockquote">
+    <p>A well-known quote, contained in a blockquote element.</p>
+  </blockquote>
+  <p>Someone famous in <cite title="Source Title">Source Title</cite></p>
+</div>
+
+### Inline elements
+
+The `<abbr>` element receives basic styling to make it stand out amongst paragraph text.
+
+<div class="bd-example">
+  The <abbr title="HyperText Markup Language">HTML</abbr> abbreviation element.
+</div>
+
+### Summary
+
+The default `cursor` on summary is `text`, so we reset that to `pointer` to convey that the element can be interacted with by clicking on it.
+
+<div class="bd-example">
+  <details>
+    <summary>Some details</summary>
+    <p>More info about the details.</p>
+  </details>
+
+  <details open>
+    <summary>Even more details</summary>
+    <p>Here are even more details about the details.</p>
+  </details>
+</div>
+
+## HTML5 `[hidden]` attribute
+
+HTML5 adds [a new global attribute named `[hidden]`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden), which is styled as `display: none` by default. Borrowing an idea from [PureCSS](https://purecss.io/), we improve upon this default by making `[hidden] { display: none !important; }` to help prevent its `display` from getting accidentally overridden.
+
+```html
+<input type="text" hidden>
+```
+
+{{< callout info >}}
+Since `[hidden]` is not compatible with jQuery's `$(...).hide()` and `$(...).show()` methods, we don't specifically endorse `[hidden]` over other techniques for managing the `display` of elements.
+{{< /callout >}}
+
+To merely toggle the visibility of an element, meaning its `display` is not modified and the element can still affect the flow of the document, use [the `.invisible` class]({{< docsref "/utilities/visibility" >}}) instead.
diff --git a/site/content/docs/0.0/content/typography.md b/site/content/docs/0.0/content/typography.md
index 89df4d2f79..eb1e842dfa 100644
--- a/site/content/docs/0.0/content/typography.md
+++ b/site/content/docs/0.0/content/typography.md
@@ -1,11 +1,418 @@
 ---
 layout: docs
 title: Typography
-description: Documentation and examples for OUDS Web typography, including global settings, headings, body text, lists, and more.
+description: Documentation and examples for OUDS Web typography, including global settings, headings, body text, <!--lists, -->and more.
 group: content
 aliases:
   - "/docs/content/typography/"
 toc: true
 ---
 
-{{< callout-soon "page" >}}
+## Global settings
+
+OUDS Web sets basic global display, typography<!--, and link styles-->. When more control is needed, check out the [textual utility classes]({{< docsref "/utilities/text" >}}).
+
+- Use a [native font stack]({{< docsref "/content/reboot#native-font-stack" >}}) that selects the best `font-family` for each OS and device.
+- For a more inclusive and accessible type scale, we use the browser's default root `font-size` (typically 16px) so visitors can customize their browser defaults as needed.
+- Use the `$font-family-base`, `$font-size-base`, and `$line-height-base` attributes as our typographic base applied to the `<body>`.
+- Use `max-width` on all font references for readability reasons. If you want to get rid of the `max-width`, please make sure to use our `.mw-none` [width utility]({{< docsref "/utilities/sizing" >}}).
+<!--- Set the global link color via `$link-color`.
+- Use `$body-bg` to set a `background-color` on the `<body>` (`#fff` by default).-->
+
+These styles can be found within `_reboot.scss`, and the global variables are defined in `_variables.scss`. Make sure to set `$font-size-base` in `rem`.
+
+{{< callout info >}}
+If you need need to include a font reference inside a custom component, please refer to our [font mixin section](#sass-mixins).
+{{< /callout >}}
+
+## Headings
+
+All HTML headings, `<h1>` through `<h6>`, are available. Each class sets `font-size` but also `line-height`, `letter-spacing`, `font-weight: bold`, and `max-width`. Here are the associated `font-size`s depending on the breakpoints. If you want to get rid of the `max-width`, please make sure to use our `.mw-none` [width utility]({{< docsref "/utilities/sizing" >}}).
+
+{{< bs-table >}}
+| Heading reference | Values from `2xs` to `sm` | Values from `md` to `lg` | Values for `xl` and upper |
+| --- | --- | --- | --- |
+| Heading xlarge (`<h1></h1>`) | `1.75rem` (28px) | `2.25rem` (36px) | `2.5rem` (40px) |
+| Heading large (`<h2></h2>`) | `1.5rem` (24px) | `1.75rem` (28px) | `2rem` (32px) |
+| Heading medium (`<h3></h3>`) | `1.25rem` (20px) | `1.5rem` (24px) | `1.75rem` (28px) |
+| Heading small (`<h4></h4>`) | `1.125rem` (18px) | `1.25rem` (20px) | `1.5rem` (24px) |
+| Body large (`<h5></h5>`) | `1rem` (16px) | `1.125rem` (18px) | `1.25rem` (20px) |
+| Body medium (`<h6></h6>`) | `1rem` (16px) | `1rem` (16px) | `1.125rem` (18px) |
+{{< /bs-table >}}
+
+<details class="mb-medium">
+  <summary>See more details about the heading classes</summary>
+
+{{< bs-table >}}
+| Heading reference | Values from `2xs` to `sm` | Values from `md` to `lg` | Values for `xl` and upper |
+| --- | --- | --- | --- |
+| Heading xlarge (`<h1></h1>`) | <ul class="mb-none ps-medium"><li><code class="text-body">font-size</code>: <b>1.75rem</b></li><li><code>line-height</code>: 1.2857</li><li><code>letter-spacing</code>: -0.0175rem</li><li><code>max-width</code>: 55rem</li></ul> | <ul class="mb-none ps-medium"><li><code class="text-body">font-size</code>: <b>2.25rem</b></li><li><code>line-height</code>: 1.2222</li><li><code>letter-spacing</code>: -.0225rem</li><li><code>max-width</code>: 55rem</li></ul> | <ul class="mb-none ps-medium"><li><code class="text-body">font-size</code>: <b>2.5rem</b></li><li><code>line-height</code>: 1.2</li><li><code>letter-spacing</code>: -0.025rem</li><li><code>max-width</code>: 65rem</li></ul> |
+| Heading large (`<h2></h2>`) | <ul class="mb-none ps-medium"><li><code class="text-body">font-size</code>: <b>1.5rem</b></li><li><code>line-height</code>: 1.3333</li><li><code>letter-spacing</code>: -0.0075rem</li><li><code>max-width</code>: 55rem</li></ul> | <ul class="mb-none ps-medium"><li><code class="text-body">font-size</code>: <b>1.75rem</b></li><li><code>line-height</code>: 1.2857</li><li><code>letter-spacing</code>: -0.0175rem</li><li><code>max-width</code>: 55rem</li></ul> | <ul class="mb-none ps-medium"><li><code class="text-body">font-size</code>: <b>2rem</b></li><li><code>line-height</code>: 1.25</li><li><code>letter-spacing</code>: -0.02rem</li><li><code>max-width</code>: 65rem</li></ul> |
+| Heading medium (`<h3></h3>`) | <ul class="mb-none ps-medium"><li><code class="text-body">font-size</code>: <b>1.25rem</b></li><li><code>line-height</code>: 1.4</li><li><code>letter-spacing</code>: 0</li><li><code>max-width</code>: 55rem</li></ul> | <ul class="mb-none ps-medium"><li><code class="text-body">font-size</code>: <b>1.5rem</b></li><li><code>line-height</code>: 1.3333</li><li><code>letter-spacing</code>: -0.0075rem</li><li><code>max-width</code>: 55rem</li></ul> | <ul class="mb-none ps-medium"><li><code class="text-body">font-size</code>: <b>1.75rem</b></li><li><code>line-height</code>: 1.2857</li><li><code>letter-spacing</code>: -0.0175rem</li><li><code>max-width</code>: 65rem</li></ul> |
+| Heading small (`<h4></h4>`) | <ul class="mb-none ps-medium"><li><code class="text-body">font-size</code>: <b>1.125rem</b></li><li><code>line-height</code>: 1.3333</li><li><code>letter-spacing</code>: 0.01125rem</li><li><code>max-width</code>: 40rem</li></ul> | <ul class="mb-none ps-medium"><li><code class="text-body">font-size</code>: <b>1.25rem</b></li><li><code>line-height</code>: 1.4</li><li><code>letter-spacing</code>: 0</li><li><code>max-width</code>: 40rem</li></ul> | <ul class="mb-none ps-medium"><li><code class="text-body">font-size</code>: <b>1.5rem</b></li><li><code>line-height</code>: 1.3333</li><li><code>letter-spacing</code>: -0.0075rem</li><li><code>max-width</code>: 45rem</li></ul> |
+| Body large (`<h5></h5>`) | <ul class="mb-none ps-medium"><li><code class="text-body">font-size</code>: <b>1rem</b></li><li><code>line-height</code>: 1.5</li><li><code>letter-spacing</code>: 0.0125rem</li><li><code>max-width</code>: 40rem</li></ul> | <ul class="mb-none ps-medium"><li><code class="text-body">font-size</code>: <b>1.125rem</b></li><li><code>line-height</code>: 1.3333</li><li><code>letter-spacing</code>: 0.01125rem</li><li><code>max-width</code>: 40rem</li></ul> | <ul class="mb-none ps-medium"><li><code class="text-body">font-size</code>: <b>1.25rem</b></li><li><code>line-height</code>: 1.4</li><li><code>letter-spacing</code>: 0</li><li><code>max-width</code>: 45rem</li></ul> |
+| Body medium (`<h6></h6>`) | <ul class="mb-none ps-medium"><li><code class="text-body">font-size</code>: <b>1rem</b></li><li><code>line-height</code>: 1.5</li><li><code>letter-spacing</code>: 0.0125rem</li><li><code>max-width</code>: 40rem</li></ul> | <ul class="mb-none ps-medium"><li><code class="text-body">font-size</code>: <b>1rem</b></li><li><code>line-height</code>: 1.5</li><li><code>letter-spacing</code>: 0.0125rem</li><li><code>max-width</code>: 40rem</li></ul> | <ul class="mb-none ps-medium"><li><code class="text-body">font-size</code>: <b>1.125rem</b></li><li><code>line-height</code>: 1.3333</li><li><code>letter-spacing</code>: 0.01125rem</li><li><code>max-width</code>: 45rem</li></ul> |
+{{< /bs-table >}}
+
+</details>
+
+{{< example >}}
+<h1>h1. OUDS Web heading</h1>
+<h2>h2. OUDS Web heading</h2>
+<h3>h3. OUDS Web heading</h3>
+<h4>h4. OUDS Web heading</h4>
+<h5>h5. OUDS Web heading</h5>
+<h6>h6. OUDS Web heading</h6>
+{{< /example >}}
+
+`.h1` through `.h6` classes are also available, for when you want to match the font styling of a heading but cannot use the associated HTML element.
+
+{{< example >}}
+<p class="h1">h1. OUDS Web heading</p>
+<p class="h2">h2. OUDS Web heading</p>
+<p class="h3">h3. OUDS Web heading</p>
+<p class="h4">h4. OUDS Web heading</p>
+<p class="h5">h5. OUDS Web heading</p>
+<p class="h6">h6. OUDS Web heading</p>
+{{< /example >}}
+
+You can easily add an icon with your font reference using [our icon helper]({{< docsref "/helpers/icon" >}}).
+
+<!-- OUDS mod: No customizing heading -->
+
+## Display headings
+
+Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using a **display heading**—a larger, slightly more opinionated heading style.
+
+We provide `.display-*` from `1` through `3`. Each class sets `font-size` but also `line-height`, `letter-spacing`, `font-weight: bold`, and `max-width`. If you want to get rid of the `max-width`, please make sure to use our `.mw-none` [width utility]({{< docsref "/utilities/sizing" >}}). Here are the associated `font-size`s depending on the breakpoints.
+
+{{< bs-table >}}
+| Display reference | Values from `2xs` to `sm` | Values from `md` to `lg` | Values for `xl` and upper |
+| --- | --- | --- | --- |
+| Display large (`.display-large`) | `2.5rem` (40px) | `4rem` (64px) | `4.5rem` (72px) |
+| Display medium (`.display-medium`) | `2.25rem` (36px) | `3rem` (48px) | `3.5rem` (56px) |
+| Display small (`.display-small`) | `2rem` (32px) | `2.5rem` (40px) | `3rem` (48px) |
+{{< /bs-table >}}
+
+<details class="mb-medium">
+  <summary>See more details about the `.display` classes</summary>
+
+{{< bs-table >}}
+| Display reference | Values from `2xs` to `sm` | Values from `md` to `lg` | Values for `xl` and upper |
+| --- | --- | --- | --- |
+| Display large (`.display-large`) | <ul class="mb-none ps-medium"><li><code class="text-body">font-size</code>: <b>2.5rem</b></li><li><code>line-height</code>: 1.2</li><li><code>letter-spacing</code>: -0.025rem</li><li><code>max-width</code>: 55rem</li></ul> | <ul class="mb-none ps-medium"><li><code class="text-body">font-size</code>: <b>4rem</b></li><li><code>line-height</code>: 1.125</li><li><code>letter-spacing</code>: -0.06rem</li><li><code>max-width</code>: 55rem</li></ul> | <ul class="mb-none ps-medium"><li><code class="text-body">font-size</code>: <b>4.5rem</b></li><li><code>line-height</code>: 1.1111</li><li><code>letter-spacing</code>: -0.0675rem</li><li><code>max-width</code>: 65rem</li></ul> |
+| Display medium (`.display-medium`) | <ul class="mb-none ps-medium"><li><code class="text-body">font-size</code>: <b>2.25rem</b></li><li><code>line-height</code>: 1.2222</li><li><code>letter-spacing</code>: -0.0225rem</li><li><code>max-width</code>: 55rem</li></ul> | <ul class="mb-none ps-medium"><li><code class="text-body">font-size</code>: <b>3rem</b></li><li><code>line-height</code>: 1.1667</li><li><code>letter-spacing</code>: -0.0375rem</li><li><code>max-width</code>: 55rem</li></ul> | <ul class="mb-none ps-medium"><li><code class="text-body">font-size</code>: <b>3.5rem</b></li><li><code>line-height</code>: 1.1429</li><li><code>letter-spacing</code>: -0.04375rem</li><li><code>max-width</code>: 65rem</li></ul> |
+| Display small (`.display-small`) | <ul class="mb-none ps-medium"><li><code class="text-body">font-size</code>: <b>2rem</b></li><li><code>line-height</code>: 1.25</li><li><code>letter-spacing</code>: -0.02rem</li><li><code>max-width</code>: 55rem</li></ul> | <ul class="mb-none ps-medium"><li><code class="text-body">font-size</code>: <b>2.5rem</b></li><li><code>line-height</code>: 1.2</li><li><code>letter-spacing</code>: -0.025rem</li><li><code>max-width</code>: 55rem</li></ul> | <ul class="mb-none ps-medium"><li><code class="text-body">font-size</code>: <b>3rem</b></li><li><code>line-height</code>: 1.1667</li><li><code>letter-spacing</code>: -0.0375rem</li><li><code>max-width</code>: 65rem</li></ul> |
+{{< /bs-table >}}
+
+</details>
+
+<div class="bd-example">
+  <div class="display-large pb-tall mb-tall border-bottom">Display large</div>
+  <div class="display-medium pb-tall mb-tall border-bottom">Display medium</div>
+  <div class="display-small">Display small</div>
+</div>
+
+```html
+<h1 class="display-large">Display large</h1>
+<h1 class="display-medium">Display medium</h1>
+<h1 class="display-small">Display small</h1>
+```
+
+Display headings are configured via the `$display-font-sizes` Sass map and the variable `$display-font-weight`.
+
+Display headings are customizable via three variables, `$display-font-family`, `$display-font-style` and `$display-line-height`.
+
+{{< bootstrap-compatibility >}}
+
+Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using a **display heading**—a larger, slightly more opinionated heading style.
+
+<div class="bd-example">
+  <div class="display-1 pb-3 mb-3 border-bottom">Display 1</div>
+  <div class="display-2 pb-3 mb-3 border-bottom">Display 2</div>
+  <div class="display-3 pb-3 mb-3 border-bottom">Display 3</div>
+  <div class="display-4 pb-3 mb-3 border-bottom">Display 4</div>
+  <div class="display-5 pb-3 mb-3 border-bottom">Display 5</div>
+  <div class="display-6">Display 6</div>
+</div>
+
+```html
+<h1 class="display-1">Display 1</h1>
+<h1 class="display-2">Display 2</h1>
+<h1 class="display-3">Display 3</h1>
+<h1 class="display-4">Display 4</h1>
+<h1 class="display-5">Display 5</h1>
+<h1 class="display-6">Display 6</h1>
+```
+
+Display headings are configured via the `$display-font-sizes` Sass map and two variables, `$display-font-weight` and `$display-line-height`.
+
+Display headings are customizable via two variables, `$display-font-family` and `$display-font-style`.
+
+{{< /bootstrap-compatibility >}}
+
+{{< scss-docs name="display-headings" file="scss/_variables.scss" >}}
+
+## Regular texts
+
+Since only [headings](#headings), [display headings](#display-headings) and `strong` text are meant to use **Bold** in main content, other contents should use `normal` font-weight. Each class sets `font-size` but also `line-height`, `letter-spacing`, and `max-width`. If you want to get rid of the `max-width`, please make sure to use our `.mw-none` [width utility]({{< docsref "/utilities/sizing" >}}). Here are the associated `font-size`s depending on the breakpoints. See our [Font utilities]({{< docsref "/utilities/text#font-size" >}}).
+
+{{< callout info >}}
+Body medium is set by default on `body` but we don't set the `max-width` property for usability reasons.
+{{< /callout >}}
+
+{{< bs-table >}}
+| Regular text reference | Values from `2xs` to `sm` | Values from `md` to `lg` | Values for `xl` and upper |
+| --- | --- | --- | --- |
+| Body large (`.lead`) | `1rem` (16px) | `1rem` (16px) | `1.125rem` (18px) |
+| Body medium (default `<p>`) | `.875rem` (14px) | `.875rem` (14px) | `1rem` (16px) |
+| Body small (`.small`) | `.75rem` (12px) | `.75rem` (12px) | `.875rem` (14px) |
+{{< /bs-table >}}
+
+<details class="mb-medium">
+  <summary>See more details about the regular text classes</summary>
+
+{{< bs-table >}}
+| Regular text reference | Values from `2xs` to `sm` | Values from `md` to `lg` | Values for `xl` and upper |
+| --- | --- | --- | --- |
+| Body large (`.lead`) | <ul class="mb-none ps-medium"><li><code class="text-body">font-size</code>: <b>1rem</b></li><li><code>line-height</code>: 1.5</li><li><code>letter-spacing</code>: 0.0125rem</li><li><code>max-width</code>: 40rem</li></ul> | <ul class="mb-none ps-medium"><li><code class="text-body">font-size</code>: <b>1rem</b></li><li><code>line-height</code>: 1.5</li><li><code>letter-spacing</code>: 0.0125rem</li><li><code>max-width</code>: 40rem</li></ul> | <ul class="mb-none ps-medium"><li><code class="text-body">font-size</code>: <b>1.125rem</b></li><li><code>line-height</code>: 1.3333</li><li><code>letter-spacing</code>: 0.01125rem</li><li><code>max-width</code>: 45rem</li></ul> |
+| Body medium (default) | <ul class="mb-none ps-medium"><li><code class="text-body">font-size</code>: <b>.875rem</b></li><li><code>line-height</code>: 1.4286</li><li><code>letter-spacing</code>: 0.010625rem</li><li><code>max-width</code>: 40rem</li></ul> | <ul class="mb-none ps-medium"><li><code class="text-body">font-size</code>: <b>.875rem</b></li><li><code>line-height</code>: 1.4286</li><li><code>letter-spacing</code>: 0.010625rem</li><li><code>max-width</code>: 40rem</li></ul> | <ul class="mb-none ps-medium"><li><code class="text-body">font-size</code>: <b>1rem</b></li><li><code>line-height</code>: 1.5</li><li><code>letter-spacing</code>: 0.0125rem</li><li><code>max-width</code>: 45rem</li></ul> |
+| Body small (`.small`) | <ul class="mb-none ps-medium"><li><code class="text-body">font-size</code>: <b>.75rem</b></li><li><code>line-height</code>: 1.3333</li><li><code>letter-spacing</code>: 0.01125rem</li><li><code>max-width</code>: 40rem</li></ul> | <ul class="mb-none ps-medium"><li><code class="text-body">font-size</code>: <b>.75rem</b></li><li><code>line-height</code>: 1.3333</li><li><code>letter-spacing</code>: 0.01125rem</li><li><code>max-width</code>: 40rem</li></ul> | <ul class="mb-none ps-medium"><li><code class="text-body">font-size</code>: <b>.875rem</b></li><li><code>line-height</code>: 1.4286</li><li><code>letter-spacing</code>: 0.010625rem</li><li><code>max-width</code>: 45rem</li></ul> |
+{{< /bs-table >}}
+
+</details>
+
+You can easily add an icon with your font reference using [our icon helper]({{< docsref "/helpers/icon" >}}).
+
+### Lead
+
+Make a paragraph stand out by adding `.lead`. It uses [Regular text](#regular-texts) body large.
+
+{{< example >}}
+<p class="lead">
+  This is a lead paragraph. It stands out from regular paragraphs.
+</p>
+{{< /example >}}
+
+### Small
+
+Render a paragraph with a small `font-size` by adding `.small` or use `<small>`. It uses [Regular text](#regular-texts) body small.
+
+{{< example >}}
+<p>
+  <small>This is a small paragraph.</small>
+</p>
+<p class="small">
+  This is a small paragraph.
+</p>
+{{< /example >}}
+
+## Inline text elements
+
+Styling for common inline HTML5 elements.
+
+{{< example >}}
+<p>You can use the mark tag to <mark>highlight</mark> text.</p>
+<p><del>This line of text is meant to be treated as deleted text.</del></p>
+<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
+<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
+<p><u>This line of text will render as underlined.</u></p>
+<p><small>This line of text is meant to be treated as fine print.</small></p>
+<p><strong>This line rendered as bold text.</strong></p>
+<p><em>This line rendered as bold text too,</em> but would natively be italicized.</p>
+{{< /example >}}
+
+Beware that those tags should be used for semantic purpose:
+
+- `<mark>` represents text which is marked or highlighted for reference or notation purposes.
+- `<small>` represents side-comments and small print, like copyright and legal text. It uses [Regular text](#regular-texts) body small.
+- `<s>` represents element that are no longer relevant or no longer accurate.
+- `<u>` represents a span of inline text which should be rendered in a way that indicates that it has a non-textual annotation.
+
+If you want to style your text, you should use the following classes instead:
+
+- `.mark` will apply the same styles as `<mark>`.
+- `.small` will apply the same styles as `<small>`.
+- `.text-decoration-underline` will apply the same styles as `<u>`.
+- `.text-decoration-line-through` will apply the same styles as `<s>`.
+
+While not shown above, feel free to use `<b>` and `<i>` in HTML5. `<b>` is meant to highlight words or phrases without conveying additional importance, while `<i>` is mostly for voice, technical terms, etc.
+
+## Text utilities
+
+Change text alignment, transform, style, weight, line-height, decoration<!-- and color--> with our [text utilities]({{< docsref "/utilities/text" >}})<!-- and [color utilities]({{< docsref "/utilities/colors" >}})-->.
+
+## Abbreviations
+
+Stylized implementation of HTML's `<abbr>` element for abbreviations and acronyms to show the expanded version on hover. Abbreviations have a default underline and gain a help cursor to provide additional context on hover and to users of assistive technologies.
+
+{{< example >}}
+<p><abbr title="attribute">attr</abbr></p>
+{{< /example >}}
+
+## Blockquotes
+
+For quoting blocks of content from another source within your document. Wrap `<blockquote class="blockquote">` around any HTML as the quote. It uses [Regular text](#regular-texts) body large.
+
+{{< example >}}
+<blockquote class="blockquote">
+  <p>A well-known quote, contained in a blockquote element.</p>
+</blockquote>
+{{< /example >}}
+
+### Naming a source
+
+The HTML spec requires that blockquote attribution be placed outside the `<blockquote>`. When providing attribution, wrap your `<blockquote>` in a `<figure>` and use a `<figcaption>` or a block level element (e.g., `<p>`) with the `.blockquote-footer` class. Be sure to wrap the name of the source work in `<cite>` as well. It uses [Regular text](#regular-texts) body small.
+
+{{< example >}}
+<figure>
+  <blockquote class="blockquote">
+    <p>A well-known quote, contained in a blockquote element.</p>
+  </blockquote>
+  <figcaption class="blockquote-footer">
+    Someone famous in <cite title="Source Title">Source Title</cite>
+  </figcaption>
+</figure>
+{{< /example >}}
+
+### Alignment
+
+Use text utilities as needed to change the alignment of your blockquote.
+
+{{< example >}}
+<figure class="text-center">
+  <blockquote class="blockquote">
+    <p class="mx-auto">A well-known quote, contained in a blockquote element.</p>
+  </blockquote>
+  <figcaption class="blockquote-footer mx-auto">
+    Someone famous in <cite title="Source Title">Source Title</cite>
+  </figcaption>
+</figure>
+{{< /example >}}
+
+{{< example >}}
+<figure class="text-end">
+  <blockquote class="blockquote">
+    <p class="ms-auto">A well-known quote, contained in a blockquote element.</p>
+  </blockquote>
+  <figcaption class="blockquote-footer ms-auto">
+    Someone famous in <cite title="Source Title">Source Title</cite>
+  </figcaption>
+</figure>
+{{< /example >}}
+
+<!-- ## Links
+
+Links in content are black and underlined. They adapt to their context otherwise, mainly in navigation components like [Navs & tabs]({{< docsref "/components/navs-tabs" >}}) or [Navbar]({{< docsref "/components/navbar" >}}).
+
+### With chevron
+
+Use our [link chevron helper]({{< docsref "/helpers/icon-link#link-chevron" >}}) to bold your link and enhance them with a chevron. -->
+
+<!-- ## Lists
+
+### Unstyled
+
+Remove the default `list-style` and left margin on list items (immediate children only). **This only applies to immediate children list items**, meaning you will need to add the class for any nested lists as well.
+
+{{< example >}}
+<ul class="list-unstyled">
+  <li>This is a list.</li>
+  <li>It appears completely unstyled.</li>
+  <li>Structurally, it's still a list.</li>
+  <li>However, this style only applies to immediate child elements.</li>
+  <li>Nested lists:
+    <ul>
+      <li>are unaffected by this style</li>
+      <li>will still show a bullet</li>
+      <li>and have appropriate left margin</li>
+    </ul>
+  </li>
+  <li>This may still come in handy in some situations.</li>
+</ul>
+{{< /example >}}
+
+### Inline
+
+Remove a list's bullets and apply some light `margin` with a combination of two classes, `.list-inline` and `.list-inline-item`.
+
+{{< example >}}
+<ul class="list-inline">
+  <li class="list-inline-item">This is a list item.</li>
+  <li class="list-inline-item">And another one.</li>
+  <li class="list-inline-item">But they're displayed inline.</li>
+</ul>
+{{< /example >}}
+
+### Description list alignment
+
+Align terms and descriptions horizontally by using our grid system's predefined classes (or semantic mixins). For longer terms, you can optionally add a `.text-truncate` class to truncate the text with an ellipsis.
+
+{{< example >}}
+<dl class="row">
+  <dt class="col-sm-3">Description lists</dt>
+  <dd class="col-sm-9">A description list is perfect for defining terms.</dd>
+
+  <dt class="col-sm-3">Term</dt>
+  <dd class="col-sm-9">
+    <p>Definition for the term.</p>
+    <p>And some more placeholder definition text.</p>
+  </dd>
+
+  <dt class="col-sm-3">Another term</dt>
+  <dd class="col-sm-9">This definition is short, so no extra paragraphs or anything.</dd>
+
+  <dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
+  <dd class="col-sm-9">This can be useful when space is tight. Adds an ellipsis at the end.</dd>
+
+  <dt class="col-sm-3">Nesting</dt>
+  <dd class="col-sm-9">
+    <dl class="row">
+      <dt class="col-sm-4">Nested definition list</dt>
+      <dd class="col-sm-8">I heard you like definition lists. Let me put a definition list inside your definition list.</dd>
+    </dl>
+  </dd>
+</dl>
+{{< /example >}} -->
+
+## CSS
+
+### Variables
+
+{{< scss-docs name="root-font-variables-ouds" file="scss/_root.scss" >}}
+
+### Sass tokens
+
+#### Raw tokens
+
+Font raw tokens as Sass variables. **Not to be used as-is**.
+
+{{< scss-docs name="ouds-raw-font" file="scss/tokens/_raw.scss" >}}
+
+#### Semantic tokens
+
+Font semantic tokens are defined as Sass variables.
+
+{{< scss-docs name="ouds-semantic-font" file="scss/tokens/_semantic.scss" >}}
+
+#### Semantic tokens
+
+Font semantic tokens are defined as Sass variables.
+
+{{< scss-docs name="ouds-semantic-font" file="scss/tokens/_semantic.scss" >}}
+
+### Sass maps
+
+The typography utilities are declared through this map and generated using our utilities API. Please refer to [our text utility page]({{< docsref "/utilities/text" >}}) for more information.
+
+{{< scss-docs name="ouds-maps-font" file="scss/_maps.scss" >}}
+
+### Sass mixins
+
+We provide a dedicated mixin for font reference. For instance, the mixin is `get-font-size($font-size-ref)`.
+
+{{< scss-docs name="ouds-mixin-font" file="scss/mixins/_fonts.scss" >}}
+
+Whenever you need a font reference inside a custom component or for whatever reason, please follow the same process as us, so you don't miss any information about a font reference.
+
+{{< scss-docs name="ouds-font-implementation" file="scss/_reboot.scss" >}}
diff --git a/site/content/docs/0.0/examples/font/index.html b/site/content/docs/0.0/examples/font/index.html
new file mode 100644
index 0000000000..f7db001ed7
--- /dev/null
+++ b/site/content/docs/0.0/examples/font/index.html
@@ -0,0 +1,62 @@
+---
+layout: examples
+title: Font
+aliases:
+- "/examples/font"
+- "/docs/examples/font"
+---
+
+<main class="container-fluid container-max-width">
+  <h1 class="display-large">Page title.</h1>
+  <p class="lead">Description paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam molestie urna eget congue congue.</p>
+  <h2>H2 title with <code>code</code> and a very very very very very very very very very very very very very very very very very very very very very very very very very very very long title</h2>
+  <p>Default body paragraph. <code>Code.</code> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam molestie urna eget congue congue. Integer malesuada ullamcorper sem eu dignissim. Proin tristique <del>bibendum</del> tellus. Donec auctor in lectus non laoreet. Morbi placerat velit neque, vitae elementum justo blandit eu. Pellentesque ut blandit tellus. <abbr title="HyperText Markup Language">HTML</abbr> Nunc blandit dolor lacus, sed venenatis erat maximus et. <a href="#">Default link</a> Vestibulum eu mi nec elit finibus feugiat. Vestibulum commodo, leo quis hendrerit egestas, <mark>turpis eros</mark> ultrices diam, vitae volutpat leo nisl nec mauris. <b>Vestibulum in quam et mauris bibendum efficitur.</b> <small>hIn porttitor enim consectetur odio mollis, at fermentum velit volutpat.</small> Vestibulum facilisis, mauris eu viverra vestibulum, erat nunc volutpat justo, id finibus nisi purus ultricies ante. Mauris consectetur magna vel mollis fermentum. Aenean lacus mi, tempor at mi in, efficitur gravida lectus. Curabitur in massa ultrices, hendrerit nisl ut, lobortis elit. <kbd><kbd>Ctrl</kbd> \+ <kbd>,</kbd></kbd> Nunc sagittis nisi ut nulla eleifend iaculis. CO<sub>2</sub> and 3m<sup>2</sup></p>
+  <figure class="text-end">
+    <blockquote class="blockquote ms-auto">
+      <p>A well-known quote, contained in a blockquote element.</p>
+    </blockquote>
+    <figcaption class="blockquote-footer ms-auto">
+      Someone famous in <cite title="Source Title">Source Title</cite>
+    </figcaption>
+  </figure>
+
+  <h3>H3 title - Limited paragraph</h3>
+  <p class="fs-bl ll-md">Limited large paragraph (md). <code>Code.</code> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam molestie urna eget congue congue. Integer malesuada ullamcorper sem eu dignissim. Proin tristique <del>bibendum</del> tellus. Donec auctor in lectus non laoreet. Morbi placerat velit neque, vitae elementum justo blandit eu. Pellentesque ut blandit tellus. <abbr title="HyperText Markup Language">HTML</abbr> Nunc blandit dolor lacus, sed venenatis erat maximus et. <a href="#">Default link</a> Vestibulum eu mi nec elit finibus feugiat. Vestibulum commodo, leo quis hendrerit egestas, <mark>turpis eros</mark> ultrices diam, vitae volutpat leo nisl nec mauris. <b>Vestibulum in quam et mauris bibendum efficitur.</b> <small>hIn porttitor enim consectetur odio mollis, at fermentum velit volutpat.</small> Vestibulum facilisis, mauris eu viverra vestibulum, erat nunc volutpat justo, id finibus nisi purus ultricies ante. Mauris consectetur magna vel mollis fermentum. Aenean lacus mi, tempor at mi in, efficitur gravida lectus. Curabitur in massa ultrices, hendrerit nisl ut, lobortis elit. <kbd><kbd>Ctrl</kbd> \+ <kbd>,</kbd></kbd> Nunc sagittis nisi ut nulla eleifend iaculis. CO<sub>2</sub> and 3m<sup>2</sup></p>
+  <p class="fs-bl ll-sm">Limited large paragraph (sm). <code>Code.</code> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam molestie urna eget congue congue. Integer malesuada ullamcorper sem eu dignissim. Proin tristique <del>bibendum</del> tellus. Donec auctor in lectus non laoreet. Morbi placerat velit neque, vitae elementum justo blandit eu. Pellentesque ut blandit tellus. <abbr title="HyperText Markup Language">HTML</abbr> Nunc blandit dolor lacus, sed venenatis erat maximus et. <a href="#">Default link</a> Vestibulum eu mi nec elit finibus feugiat. Vestibulum commodo, leo quis hendrerit egestas, <mark>turpis eros</mark> ultrices diam, vitae volutpat leo nisl nec mauris. <b>Vestibulum in quam et mauris bibendum efficitur.</b> <small>hIn porttitor enim consectetur odio mollis, at fermentum velit volutpat.</small> Vestibulum facilisis, mauris eu viverra vestibulum, erat nunc volutpat justo, id finibus nisi purus ultricies ante. Mauris consectetur magna vel mollis fermentum. Aenean lacus mi, tempor at mi in, efficitur gravida lectus. Curabitur in massa ultrices, hendrerit nisl ut, lobortis elit. <kbd><kbd>Ctrl</kbd> \+ <kbd>,</kbd></kbd> Nunc sagittis nisi ut nulla eleifend iaculis. CO<sub>2</sub> and 3m<sup>2</sup></p>
+  <p class="fs-bm ll-md">Limited medium paragraph (md). <code>Code.</code> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam molestie urna eget congue congue. Integer malesuada ullamcorper sem eu dignissim. Proin tristique <del>bibendum</del> tellus. Donec auctor in lectus non laoreet. Morbi placerat velit neque, vitae elementum justo blandit eu. Pellentesque ut blandit tellus. <abbr title="HyperText Markup Language">HTML</abbr> Nunc blandit dolor lacus, sed venenatis erat maximus et. <a href="#">Default link</a> Vestibulum eu mi nec elit finibus feugiat. Vestibulum commodo, leo quis hendrerit egestas, <mark>turpis eros</mark> ultrices diam, vitae volutpat leo nisl nec mauris. <b>Vestibulum in quam et mauris bibendum efficitur.</b> <small>hIn porttitor enim consectetur odio mollis, at fermentum velit volutpat.</small> Vestibulum facilisis, mauris eu viverra vestibulum, erat nunc volutpat justo, id finibus nisi purus ultricies ante. Mauris consectetur magna vel mollis fermentum. Aenean lacus mi, tempor at mi in, efficitur gravida lectus. Curabitur in massa ultrices, hendrerit nisl ut, lobortis elit. <kbd><kbd>Ctrl</kbd> \+ <kbd>,</kbd></kbd> Nunc sagittis nisi ut nulla eleifend iaculis. CO<sub>2</sub> and 3m<sup>2</sup></p>
+  <p class="fs-bm ll-sm">Limited medium paragraph (sm). <code>Code.</code> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam molestie urna eget congue congue. Integer malesuada ullamcorper sem eu dignissim. Proin tristique <del>bibendum</del> tellus. Donec auctor in lectus non laoreet. Morbi placerat velit neque, vitae elementum justo blandit eu. Pellentesque ut blandit tellus. <abbr title="HyperText Markup Language">HTML</abbr> Nunc blandit dolor lacus, sed venenatis erat maximus et. <a href="#">Default link</a> Vestibulum eu mi nec elit finibus feugiat. Vestibulum commodo, leo quis hendrerit egestas, <mark>turpis eros</mark> ultrices diam, vitae volutpat leo nisl nec mauris. <b>Vestibulum in quam et mauris bibendum efficitur.</b> <small>hIn porttitor enim consectetur odio mollis, at fermentum velit volutpat.</small> Vestibulum facilisis, mauris eu viverra vestibulum, erat nunc volutpat justo, id finibus nisi purus ultricies ante. Mauris consectetur magna vel mollis fermentum. Aenean lacus mi, tempor at mi in, efficitur gravida lectus. Curabitur in massa ultrices, hendrerit nisl ut, lobortis elit. <kbd><kbd>Ctrl</kbd> \+ <kbd>,</kbd></kbd> Nunc sagittis nisi ut nulla eleifend iaculis. CO<sub>2</sub> and 3m<sup>2</sup></p>
+  <p class="fs-bs ll-md">Limited small paragraph (md). <code>Code.</code> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam molestie urna eget congue congue. Integer malesuada ullamcorper sem eu dignissim. Proin tristique <del>bibendum</del> tellus. Donec auctor in lectus non laoreet. Morbi placerat velit neque, vitae elementum justo blandit eu. Pellentesque ut blandit tellus. <abbr title="HyperText Markup Language">HTML</abbr> Nunc blandit dolor lacus, sed venenatis erat maximus et. <a href="#">Default link</a> Vestibulum eu mi nec elit finibus feugiat. Vestibulum commodo, leo quis hendrerit egestas, <mark>turpis eros</mark> ultrices diam, vitae volutpat leo nisl nec mauris. <b>Vestibulum in quam et mauris bibendum efficitur.</b> <small>hIn porttitor enim consectetur odio mollis, at fermentum velit volutpat.</small> Vestibulum facilisis, mauris eu viverra vestibulum, erat nunc volutpat justo, id finibus nisi purus ultricies ante. Mauris consectetur magna vel mollis fermentum. Aenean lacus mi, tempor at mi in, efficitur gravida lectus. Curabitur in massa ultrices, hendrerit nisl ut, lobortis elit. <kbd><kbd>Ctrl</kbd> \+ <kbd>,</kbd></kbd> Nunc sagittis nisi ut nulla eleifend iaculis. CO<sub>2</sub> and 3m<sup>2</sup></p>
+  <p class="fs-bs ll-sm">Limited small paragraph (sm). <code>Code.</code> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam molestie urna eget congue congue. Integer malesuada ullamcorper sem eu dignissim. Proin tristique <del>bibendum</del> tellus. Donec auctor in lectus non laoreet. Morbi placerat velit neque, vitae elementum justo blandit eu. Pellentesque ut blandit tellus. <abbr title="HyperText Markup Language">HTML</abbr> Nunc blandit dolor lacus, sed venenatis erat maximus et. <a href="#">Default link</a> Vestibulum eu mi nec elit finibus feugiat. Vestibulum commodo, leo quis hendrerit egestas, <mark>turpis eros</mark> ultrices diam, vitae volutpat leo nisl nec mauris. <b>Vestibulum in quam et mauris bibendum efficitur.</b> <small>hIn porttitor enim consectetur odio mollis, at fermentum velit volutpat.</small> Vestibulum facilisis, mauris eu viverra vestibulum, erat nunc volutpat justo, id finibus nisi purus ultricies ante. Mauris consectetur magna vel mollis fermentum. Aenean lacus mi, tempor at mi in, efficitur gravida lectus. Curabitur in massa ultrices, hendrerit nisl ut, lobortis elit. <kbd><kbd>Ctrl</kbd> \+ <kbd>,</kbd></kbd> Nunc sagittis nisi ut nulla eleifend iaculis. CO<sub>2</sub> and 3m<sup>2</sup></p>
+  <h3>H3 title - Paragraph size</h3>
+  <h4>H4 title</h4>
+  <h5>H5 title</h5>
+  <p class="lead">Lead paragraph. <code>Code.</code> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam molestie urna eget congue congue. Integer malesuada ullamcorper sem eu dignissim. Proin tristique <del>bibendum</del> tellus. Donec auctor in lectus non laoreet. Morbi placerat velit neque, vitae elementum justo blandit eu. Pellentesque ut blandit tellus. <abbr title="HyperText Markup Language">HTML</abbr> Nunc blandit dolor lacus, sed venenatis erat maximus et. <a href="#">Default link</a> Vestibulum eu mi nec elit finibus feugiat. Vestibulum commodo, leo quis hendrerit egestas, <mark>turpis eros</mark> ultrices diam, vitae volutpat leo nisl nec mauris. <b>Vestibulum in quam et mauris bibendum efficitur.</b> <small>hIn porttitor enim consectetur odio mollis, at fermentum velit volutpat.</small> Vestibulum facilisis, mauris eu viverra vestibulum, erat nunc volutpat justo, id finibus nisi purus ultricies ante. Mauris consectetur magna vel mollis fermentum. Aenean lacus mi, tempor at mi in, efficitur gravida lectus. Curabitur in massa ultrices, hendrerit nisl ut, lobortis elit. <kbd><kbd>Ctrl</kbd> \+ <kbd>,</kbd></kbd> Nunc sagittis nisi ut nulla eleifend iaculis. CO<sub>2</sub> and 3m<sup>2</sup> </p>
+  <h6>H6 title</h6>
+  <p class="fs-bl">Large paragraph. <code>Code.</code> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam molestie urna eget congue congue. Integer malesuada ullamcorper sem eu dignissim. Proin tristique <del>bibendum</del> tellus. Donec auctor in lectus non laoreet. Morbi placerat velit neque, vitae elementum justo blandit eu. Pellentesque ut blandit tellus. <abbr title="HyperText Markup Language">HTML</abbr> Nunc blandit dolor lacus, sed venenatis erat maximus et. <a href="#">Default link</a> Vestibulum eu mi nec elit finibus feugiat. Vestibulum commodo, leo quis hendrerit egestas, <mark>turpis eros</mark> ultrices diam, vitae volutpat leo nisl nec mauris. <b>Vestibulum in quam et mauris bibendum efficitur.</b> <small>hIn porttitor enim consectetur odio mollis, at fermentum velit volutpat.</small> Vestibulum facilisis, mauris eu viverra vestibulum, erat nunc volutpat justo, id finibus nisi purus ultricies ante. Mauris consectetur magna vel mollis fermentum. Aenean lacus mi, tempor at mi in, efficitur gravida lectus. Curabitur in massa ultrices, hendrerit nisl ut, lobortis elit. <kbd><kbd>Ctrl</kbd> \+ <kbd>,</kbd></kbd> Nunc sagittis nisi ut nulla eleifend iaculis. CO<sub>2</sub> and 3m<sup>2</sup></p>
+  <p class="fs-bm">Medium paragraph. <code>Code.</code> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam molestie urna eget congue congue. Integer malesuada ullamcorper sem eu dignissim. Proin tristique <del>bibendum</del> tellus. Donec auctor in lectus non laoreet. Morbi placerat velit neque, vitae elementum justo blandit eu. Pellentesque ut blandit tellus. <abbr title="HyperText Markup Language">HTML</abbr> Nunc blandit dolor lacus, sed venenatis erat maximus et. <a href="#">Default link</a> Vestibulum eu mi nec elit finibus feugiat. Vestibulum commodo, leo quis hendrerit egestas, <mark>turpis eros</mark> ultrices diam, vitae volutpat leo nisl nec mauris. <b>Vestibulum in quam et mauris bibendum efficitur.</b> <small>hIn porttitor enim consectetur odio mollis, at fermentum velit volutpat.</small> Vestibulum facilisis, mauris eu viverra vestibulum, erat nunc volutpat justo, id finibus nisi purus ultricies ante. Mauris consectetur magna vel mollis fermentum. Aenean lacus mi, tempor at mi in, efficitur gravida lectus. Curabitur in massa ultrices, hendrerit nisl ut, lobortis elit. <kbd><kbd>Ctrl</kbd> \+ <kbd>,</kbd></kbd> Nunc sagittis nisi ut nulla eleifend iaculis. CO<sub>2</sub> and 3m<sup>2</sup></p>
+  <p class="fs-bs">Small paragraph. <code>Code.</code> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam molestie urna eget congue congue. Integer malesuada ullamcorper sem eu dignissim. Proin tristique <del>bibendum</del> tellus. Donec auctor in lectus non laoreet. Morbi placerat velit neque, vitae elementum justo blandit eu. Pellentesque ut blandit tellus. <abbr title="HyperText Markup Language">HTML</abbr> Nunc blandit dolor lacus, sed venenatis erat maximus et. <a href="#">Default link</a> Vestibulum eu mi nec elit finibus feugiat. Vestibulum commodo, leo quis hendrerit egestas, <mark>turpis eros</mark> ultrices diam, vitae volutpat leo nisl nec mauris. <b>Vestibulum in quam et mauris bibendum efficitur.</b> <small>hIn porttitor enim consectetur odio mollis, at fermentum velit volutpat.</small> Vestibulum facilisis, mauris eu viverra vestibulum, erat nunc volutpat justo, id finibus nisi purus ultricies ante. Mauris consectetur magna vel mollis fermentum. Aenean lacus mi, tempor at mi in, efficitur gravida lectus. Curabitur in massa ultrices, hendrerit nisl ut, lobortis elit. <kbd><kbd>Ctrl</kbd> \+ <kbd>,</kbd></kbd> Nunc sagittis nisi ut nulla eleifend iaculis. CO<sub>2</sub> and 3m<sup>2</sup></p>
+  <ul>
+    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
+    <li>Etiam molestie urna eget congue congue. Integer malesuada ullamcorper sem eu dignissim. Proin tristique bibendum tellus. Donec auctor in lectus non laoreet. Morbi placerat velit neque, vitae elementum justo blandit eu. Pellentesque ut blandit tellus. Nunc blandit dolor lacus, sed venenatis erat maximus et. Vestibulum eu mi nec elit finibus feugiat.</li>
+    <li>Vestibulum commodo, leo quis hendrerit egestas, turpis eros ultrices diam, vitae volutpat leo nisl nec mauris.</li>
+  </ul>
+  <hr>
+  <h4>H4 title - body medium block</h4>
+  <div class="fs-bl">
+    <p>Large block paragraph. <code>Code.</code> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam molestie urna eget congue congue. Integer malesuada ullamcorper sem eu dignissim. Proin tristique <del>bibendum</del> tellus. Donec auctor in lectus non laoreet. Morbi placerat velit neque, vitae elementum justo blandit eu. Pellentesque ut blandit tellus. <abbr title="HyperText Markup Language">HTML</abbr> Nunc blandit dolor lacus, sed venenatis erat maximus et. <a href="#">Default link</a> Vestibulum eu mi nec elit finibus feugiat. Vestibulum commodo, leo quis hendrerit egestas, <mark>turpis eros</mark> ultrices diam, vitae volutpat leo nisl nec mauris. <b>Vestibulum in quam et mauris bibendum efficitur.</b> <small>hIn porttitor enim consectetur odio mollis, at fermentum velit volutpat.</small> Vestibulum facilisis, mauris eu viverra vestibulum, erat nunc volutpat justo, id finibus nisi purus ultricies ante. Mauris consectetur magna vel mollis fermentum. Aenean lacus mi, tempor at mi in, efficitur gravida lectus. Curabitur in massa ultrices, hendrerit nisl ut, lobortis elit. <kbd><kbd>Ctrl</kbd> \+ <kbd>,</kbd></kbd> Nunc sagittis nisi ut nulla eleifend iaculis. CO<sub>2</sub> and 3m<sup>2</sup></p>
+    <figure class="text-end">
+      <blockquote class="blockquote ms-auto">
+        <p>A well-known quote, contained in a blockquote element.</p>
+      </blockquote>
+      <figcaption class="blockquote-footer ms-auto">
+        Someone famous in <cite title="Source Title">Source Title</cite>
+      </figcaption>
+    </figure>
+    <ul>
+      <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
+      <li>Etiam molestie urna eget congue congue. Integer malesuada ullamcorper sem eu dignissim. Proin tristique bibendum tellus. Donec auctor in lectus non laoreet. Morbi placerat velit neque, vitae elementum justo blandit eu. Pellentesque ut blandit tellus. Nunc blandit dolor lacus, sed venenatis erat maximus et. Vestibulum eu mi nec elit finibus feugiat.</li>
+      <li>Vestibulum commodo, leo quis hendrerit egestas, turpis eros ultrices diam, vitae volutpat leo nisl nec mauris.</li>
+    </ul>
+    <hr>
+  </div>
+</main>
diff --git a/site/content/docs/0.0/helpers/icon.md b/site/content/docs/0.0/helpers/icon.md
new file mode 100644
index 0000000000..1b7d521621
--- /dev/null
+++ b/site/content/docs/0.0/helpers/icon.md
@@ -0,0 +1,490 @@
+---
+layout: docs
+title: Icon
+description: Quickly see the right icon sizes with a specific typography reference.
+group: helpers
+aliases:
+  - "/docs/helpers/icon/"
+toc: true
+---
+
+## Approach
+
+The icon classes are done to be used upon `<img>`, `<svg>` or even icon font wherever the icon is. Please make sure to either the rules described in this page or follow the design.
+
+Every icon class presented in here has the common following code:
+
+{{< scss-docs name="ouds-font-icon-common" file="scss/helpers/_icon.scss" >}}
+
+## Headings
+
+Here are the rules to follow for headings. These icons' sizes are responsive.
+
+<details class="mb-medium">
+  <summary>See the <strong>sizes</strong> associated to classes</summary>
+
+{{< bs-table >}}
+| Icon class | Values from `2xs` to `sm` | Values from `md` to `lg` | Values for `xl` and upper |
+| --- | --- | --- | --- |
+| `.hxl-tall-icon` | `3.25rem` (52px) | `4rem` (64px) | `4rem` (64px) |
+| `.hxl-medium-icon` | `3rem` (48px) | `3.5rem` (56px) | `3.75rem` (60px) |
+| `.hxl-short-icon` | `2.75rem` (44px) | `3.25rem` (52px) | `3.5rem` (56px) |
+| `.hl-tall-icon` | `3rem` (48px) | `3.25rem` (52px) | `3.5rem` (56px) |
+| `.hl-medium-icon` | `2.75rem` (44px) | `3rem` (48px) | `3.25rem` (52px) |
+| `.hl-short-icon` | `2.5rem` (40px) | `2.75rem` (44px) | `3rem` (48px) |
+| `.hm-tall-icon` | `2.75rem` (44px) | `3rem` (48px) | `3.25rem` (52px) |
+| `.hm-medium-icon` | `2.5rem` (40px) | `2.75rem` (44px) | `3rem` (48px) |
+| `.hm-short-icon` | `2rem` (32px) | `2.5rem` (40px) | `2.75rem` (44px) |
+| `.hs-tall-icon` | `2.75rem` (44px) | `2.75rem` (44px) | `3rem` (48px) |
+| `.hs-medium-icon` | `2.5rem` (40px) | `2.5rem` (40px) | `2.75rem` (44px) |
+| `.hs-short-icon` | `2rem` (32px) | `2rem` (32px) | `2.5rem` (40px) |
+| `.bl-tall-icon` | `1.75rem` (28px) | `1.75rem` (28px) | `2.75rem` (44px) |
+| `.bl-medium-icon` | `1.5rem` (24px) | `1.5rem` (24px) | `2.5rem` (40px) |
+| `.bl-short-icon` | `1.25rem` (20px) | `1.25rem` (20px) | `2rem` (32px) |
+| `.bm-tall-icon` | `1.5rem` (24px) | `1.5rem` (24px) | `1.75rem` (28px) |
+| `.bm-medium-icon` | `1.25rem` (20px) | `1.25rem` (20px) | `1.5rem` (24px) |
+| `.bm-short-icon` | `1rem` (16px) | `1rem` (16px) | `1.25rem` (20px) |
+{{< /bs-table >}}
+
+</details>
+
+{{< example >}}
+<!-- h1 uses heading-xlarge font reference like all related classes as `.h1`, `.fs-hxl`, etc... -->
+<div class="d-flex align-items-center mb-medium">
+  <svg class="hxl-tall-icon me-scaled-short text-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
+    <use xlink:href="/docs/{{< param docs_version >}}/assets/img/ouds-web-sprite.svg#vector"/>
+  </svg>
+  <h1 class="mb-none">H1 with tall icon</h1>
+</div>
+<div class="d-flex align-items-center mb-medium">
+  <svg class="hxl-medium-icon me-scaled-short text-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
+    <use xlink:href="/docs/{{< param docs_version >}}/assets/img/ouds-web-sprite.svg#vector"/>
+  </svg>
+  <h1 class="mb-none">H1 with medium icon</h1>
+</div>
+<div class="d-flex align-items-center mb-medium">
+  <svg class="hxl-short-icon me-scaled-short text-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
+    <use xlink:href="/docs/{{< param docs_version >}}/assets/img/ouds-web-sprite.svg#vector"/>
+  </svg>
+  <h1 class="mb-none">H1 with short icon</h1>
+</div>
+
+<hr>
+
+<!-- h2 uses heading-large font reference like all related classes as `.h2`, `.fs-hl`, etc... -->
+<div class="d-flex align-items-center mb-medium">
+  <svg class="hl-tall-icon me-scaled-short text-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
+    <use xlink:href="/docs/{{< param docs_version >}}/assets/img/ouds-web-sprite.svg#vector"/>
+  </svg>
+  <h2 class="mb-none">H2 with tall icon</h2>
+</div>
+<div class="d-flex align-items-center mb-medium">
+  <svg class="hl-medium-icon me-scaled-short text-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
+    <use xlink:href="/docs/{{< param docs_version >}}/assets/img/ouds-web-sprite.svg#vector"/>
+  </svg>
+  <h2 class="mb-none">H2 with medium icon</h2>
+</div>
+<div class="d-flex align-items-center mb-medium">
+  <svg class="hl-short-icon me-scaled-short text-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
+    <use xlink:href="/docs/{{< param docs_version >}}/assets/img/ouds-web-sprite.svg#vector"/>
+  </svg>
+  <h2 class="mb-none">H2 with short icon</h2>
+</div>
+
+<hr>
+
+<!-- h3 uses heading-medium font reference like all related classes as `.h3`, `.fs-hm`, etc... -->
+<div class="d-flex align-items-center mb-medium">
+  <svg class="hm-tall-icon me-scaled-short text-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
+    <use xlink:href="/docs/{{< param docs_version >}}/assets/img/ouds-web-sprite.svg#vector"/>
+  </svg>
+  <h3 class="mb-none">H3 with tall icon</h3>
+</div>
+<div class="d-flex align-items-center mb-medium">
+  <svg class="hm-medium-icon me-scaled-short text-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
+    <use xlink:href="/docs/{{< param docs_version >}}/assets/img/ouds-web-sprite.svg#vector"/>
+  </svg>
+  <h3 class="mb-none">H3 with medium icon</h3>
+</div>
+<div class="d-flex align-items-center mb-medium">
+  <svg class="hm-short-icon me-scaled-short text-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
+    <use xlink:href="/docs/{{< param docs_version >}}/assets/img/ouds-web-sprite.svg#vector"/>
+  </svg>
+  <h3 class="mb-none">H3 with short icon</h3>
+</div>
+
+<hr>
+
+<!-- h4 uses heading-small font reference like all related classes as `.h4`, `.fs-hs`, etc... -->
+<div class="d-flex align-items-center mb-medium">
+  <svg class="hs-tall-icon me-scaled-short text-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
+    <use xlink:href="/docs/{{< param docs_version >}}/assets/img/ouds-web-sprite.svg#vector"/>
+  </svg>
+  <h4 class="mb-none">H4 with tall icon</h4>
+</div>
+<div class="d-flex align-items-center mb-medium">
+  <svg class="hs-medium-icon me-scaled-short text-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
+    <use xlink:href="/docs/{{< param docs_version >}}/assets/img/ouds-web-sprite.svg#vector"/>
+  </svg>
+  <h4 class="mb-none">H4 with medium icon</h4>
+</div>
+<div class="d-flex align-items-center mb-medium">
+  <svg class="hs-short-icon me-scaled-short text-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
+    <use xlink:href="/docs/{{< param docs_version >}}/assets/img/ouds-web-sprite.svg#vector"/>
+  </svg>
+  <h4 class="mb-none">H4 with short icon</h4>
+</div>
+
+<hr>
+
+<!-- h5 uses body-large font reference like all related classes as `.h5`, `.fs-bl`, etc... -->
+<div class="d-flex align-items-center mb-medium">
+  <svg class="bl-tall-icon me-scaled-short text-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
+    <use xlink:href="/docs/{{< param docs_version >}}/assets/img/ouds-web-sprite.svg#vector"/>
+  </svg>
+  <h5 class="mb-none">H5 with tall icon</h5>
+</div>
+<div class="d-flex align-items-center mb-medium">
+  <svg class="bl-medium-icon me-scaled-short text-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
+    <use xlink:href="/docs/{{< param docs_version >}}/assets/img/ouds-web-sprite.svg#vector"/>
+  </svg>
+  <h5 class="mb-none">H5 with medium icon</h5>
+</div>
+<div class="d-flex align-items-center mb-medium">
+  <svg class="bl-short-icon me-scaled-short text-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
+    <use xlink:href="/docs/{{< param docs_version >}}/assets/img/ouds-web-sprite.svg#vector"/>
+  </svg>
+  <h5 class="mb-none">H5 with short icon</h5>
+</div>
+
+<hr>
+
+<!-- h6 uses body-medium font reference like all related classes as `.h6`, `.fs-bm`, etc... -->
+<div class="d-flex align-items-center mb-medium">
+  <svg class="bm-tall-icon me-scaled-short text-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
+    <use xlink:href="/docs/{{< param docs_version >}}/assets/img/ouds-web-sprite.svg#vector"/>
+  </svg>
+  <h6 class="mb-none">H6 with tall icon</h6>
+</div>
+<div class="d-flex align-items-center mb-medium">
+  <svg class="bm-medium-icon me-scaled-short text-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
+    <use xlink:href="/docs/{{< param docs_version >}}/assets/img/ouds-web-sprite.svg#vector"/>
+  </svg>
+  <h6 class="mb-none">H6 with medium icon</h6>
+</div>
+<div class="d-flex align-items-center mb-medium">
+  <svg class="bm-short-icon me-scaled-short text-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
+    <use xlink:href="/docs/{{< param docs_version >}}/assets/img/ouds-web-sprite.svg#vector"/>
+  </svg>
+  <h6 class="mb-none">H6 with short icon</h6>
+</div>
+{{< /example >}}
+
+## Display headings
+
+You should not use any icon with our `.display-*` font sizes, because we prefer to keep the place for the text.
+
+## Regular texts
+
+Here are the rules to follow for regular texts. These icons' sizes are responsive.
+
+<details class="mb-medium">
+  <summary>See the <strong>sizes</strong> associated to classes</summary>
+
+{{< bs-table >}}
+| Icon class | Values from `2xs` to `sm` | Values from `md` to `lg` | Values for `xl` and upper |
+| --- | --- | --- | --- |
+| `.bl-tall-icon` | `1.75rem` (28px) | `1.75rem` (28px) | `2.75rem` (44px) |
+| `.bl-medium-icon` | `1.5rem` (24px) | `1.5rem` (24px) | `2.5rem` (40px) |
+| `.bl-short-icon` | `1.25rem` (20px) | `1.25rem` (20px) | `2rem` (32px) |
+| `.bm-tall-icon` | `1.5rem` (24px) | `1.5rem` (24px) | `1.75rem` (28px) |
+| `.bm-medium-icon` | `1.25rem` (20px) | `1.25rem` (20px) | `1.5rem` (24px) |
+| `.bm-short-icon` | `1rem` (16px) | `1rem` (16px) | `1.25rem` (20px) |
+| `.bs-tall-icon` | `1.25rem` (20px) | `1.25rem` (20px) | `1.5rem` (24px) |
+| `.bs-medium-icon` | `1rem` (16px) | `1rem` (16px) | `1.25rem` (20px) |
+| `.bs-short-icon` | `.75rem` (12px) | `.75rem` (12px) | `1rem` (16px) |
+{{< /bs-table >}}
+
+</details>
+
+{{< example >}}
+<!-- .lead uses body-large font reference like all related classes as `.lead`, `.fs-bl`, etc... -->
+<div class="d-flex align-items-center mb-medium">
+  <svg class="bl-tall-icon me-scaled-short text-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
+    <use xlink:href="/docs/{{< param docs_version >}}/assets/img/ouds-web-sprite.svg#vector"/>
+  </svg>
+  <p class="lead mb-none">
+    Lead paragraph with tall icon
+  </p>
+</div>
+<div class="d-flex align-items-center mb-medium">
+  <svg class="bl-medium-icon me-scaled-short text-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
+    <use xlink:href="/docs/{{< param docs_version >}}/assets/img/ouds-web-sprite.svg#vector"/>
+  </svg>
+  <p class="lead mb-none">
+    Lead paragraph with medium icon
+  </p>
+</div>
+<div class="d-flex align-items-center mb-medium">
+  <svg class="bl-short-icon me-scaled-short text-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
+    <use xlink:href="/docs/{{< param docs_version >}}/assets/img/ouds-web-sprite.svg#vector"/>
+  </svg>
+  <p class="lead mb-none">
+    Lead paragraph with short icon
+  </p>
+</div>
+
+<hr>
+
+<!-- default paragraph uses body-medium font reference like all related classes as `.fs-bm`, etc... -->
+<div class="d-flex align-items-center mb-medium">
+  <svg class="bm-tall-icon me-scaled-short text-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
+    <use xlink:href="/docs/{{< param docs_version >}}/assets/img/ouds-web-sprite.svg#vector"/>
+  </svg>
+  <p class="mb-none">
+    Default paragraph with tall icon
+  </p>
+</div>
+<div class="d-flex align-items-center mb-medium">
+  <svg class="bm-medium-icon me-scaled-short text-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
+    <use xlink:href="/docs/{{< param docs_version >}}/assets/img/ouds-web-sprite.svg#vector"/>
+  </svg>
+  <p class="mb-none">
+    Default paragraph with medium icon
+  </p>
+</div>
+<div class="d-flex align-items-center mb-medium">
+  <svg class="bm-short-icon me-scaled-short text-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
+    <use xlink:href="/docs/{{< param docs_version >}}/assets/img/ouds-web-sprite.svg#vector"/>
+  </svg>
+  <p class="mb-none">
+    Default paragraph with short icon
+  </p>
+</div>
+
+<hr>
+
+<!-- .small paragraph uses body-small font reference like all related classes as `.small`, `.fs-bs`, etc... -->
+<div class="d-flex align-items-center mb-medium">
+  <svg class="bs-tall-icon me-scaled-short text-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
+    <use xlink:href="/docs/{{< param docs_version >}}/assets/img/ouds-web-sprite.svg#vector"/>
+  </svg>
+  <p class="small mb-none">
+    Small paragraph with tall icon
+  </p>
+</div>
+<div class="d-flex align-items-center mb-medium">
+  <svg class="bs-medium-icon me-scaled-short text-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
+    <use xlink:href="/docs/{{< param docs_version >}}/assets/img/ouds-web-sprite.svg#vector"/>
+  </svg>
+  <p class="small mb-none">
+    Small paragraph with medium icon
+  </p>
+</div>
+<div class="d-flex align-items-center mb-medium">
+  <svg class="bs-short-icon me-scaled-short text-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
+    <use xlink:href="/docs/{{< param docs_version >}}/assets/img/ouds-web-sprite.svg#vector"/>
+  </svg>
+  <p class="small mb-none">
+    Small paragraph with short icon
+  </p>
+</div>
+{{< /example >}}
+
+## Decorative
+
+Here are the rules to follow for decorative icons. Be careful using these icons' sizes because they are not responsive. <!-- Check out for more information about accessibility in [our documentation]({{< docsref "/extend/icons" >}}). -->
+
+<details class="mb-medium">
+  <summary>See the <strong>sizes</strong> associated to classes</summary>
+
+{{< bs-table >}}
+| Icon class | Value |
+| --- | --- |
+| `.decorative-shortest-icon` | `1rem` (16px) |
+| `.decorative-shorter-icon` | `1.5rem` (24px) |
+| `.decorative-short-icon` | `2rem` (32px) |
+| `.decorative-medium-icon` | `2.5rem` (40px) |
+| `.decorative-tall-icon` | `3rem` (48px) |
+| `.decorative-taller-icon` | `3.5rem` (56px) |
+| `.decorative-tallest-icon` | `4.5rem` (72px) |
+{{< /bs-table >}}
+
+</details>
+
+<div class="bd-example">
+  <div class="d-flex mb-medium">
+    <div class="bg-secondary d-inline-flex align-items-center justify-content-center me-medium flex-shrink-0" style="width: 6.25rem; height: 6.25rem;">
+      <svg class="decorative-shortest-icon text-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
+        <use xlink:href="/docs/{{< param docs_version >}}/assets/img/ouds-web-sprite.svg#vector"/>
+      </svg>
+    </div>
+    <div>
+      <p class="lead mb-shortest fw-bold">Shortest decorative icon</p>
+      <p class="mb-none">coreGlobalDimension200 (<code>1rem</code> or <code>16px</code> at zoom 100%)</p>
+    </div>
+  </div>
+  <div class="d-flex mb-medium">
+    <div class="bg-secondary d-inline-flex align-items-center justify-content-center me-medium flex-shrink-0" style="width: 6.25rem; height: 6.25rem;">
+      <svg class="decorative-shorter-icon text-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
+        <use xlink:href="/docs/{{< param docs_version >}}/assets/img/ouds-web-sprite.svg#vector"/>
+      </svg>
+    </div>
+    <div>
+      <p class="lead mb-shortest fw-bold">Shorter decorative icon</p>
+      <p class="mb-none">coreGlobalDimension300 (<code>1.5rem</code> or <code>24px</code> at zoom 100%)</p>
+    </div>
+  </div>
+  <div class="d-flex mb-medium">
+    <div class="bg-secondary d-inline-flex align-items-center justify-content-center me-medium flex-shrink-0" style="width: 6.25rem; height: 6.25rem;">
+      <svg class="decorative-short-icon text-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
+        <use xlink:href="/docs/{{< param docs_version >}}/assets/img/ouds-web-sprite.svg#vector"/>
+      </svg>
+    </div>
+    <div>
+      <p class="lead mb-shortest fw-bold">Short decorative icon</p>
+      <p class="mb-none">coreGlobalDimension400 (<code>2rem</code> or <code>32px</code> at zoom 100%)</p>
+    </div>
+  </div>
+  <div class="d-flex mb-medium">
+    <div class="bg-secondary d-inline-flex align-items-center justify-content-center me-medium flex-shrink-0" style="width: 6.25rem; height: 6.25rem;">
+      <svg class="decorative-medium-icon text-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
+        <use xlink:href="/docs/{{< param docs_version >}}/assets/img/ouds-web-sprite.svg#vector"/>
+      </svg>
+    </div>
+    <div>
+      <p class="lead mb-shortest fw-bold">Medium decorative icon</p>
+      <p class="mb-none">coreGlobalDimension500 (<code>2.5rem</code> or <code>40px</code> at zoom 100%)</p>
+    </div>
+  </div>
+  <div class="d-flex mb-medium">
+    <div class="bg-secondary d-inline-flex align-items-center justify-content-center me-medium flex-shrink-0" style="width: 6.25rem; height: 6.25rem;">
+      <svg class="decorative-tall-icon text-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
+        <use xlink:href="/docs/{{< param docs_version >}}/assets/img/ouds-web-sprite.svg#vector"/>
+      </svg>
+    </div>
+    <div>
+      <p class="lead mb-shortest fw-bold">Tall decorative icon</p>
+      <p class="mb-none">coreGlobalDimension600 (<code>3rem</code> or <code>48px</code> at zoom 100%)</p>
+    </div>
+  </div>
+  <div class="d-flex mb-medium">
+    <div class="bg-secondary d-inline-flex align-items-center justify-content-center me-medium flex-shrink-0" style="width: 6.25rem; height: 6.25rem;">
+      <svg class="decorative-taller-icon text-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
+        <use xlink:href="/docs/{{< param docs_version >}}/assets/img/ouds-web-sprite.svg#vector"/>
+      </svg>
+    </div>
+    <div>
+      <p class="lead mb-shortest fw-bold">Taller decorative icon</p>
+      <p class="mb-none">coreGlobalDimension700 (<code>3.5rem</code> or <code>56px</code> at zoom 100%)</p>
+    </div>
+  </div>
+  <div class="d-flex mb-medium">
+    <div class="bg-secondary d-inline-flex align-items-center justify-content-center me-medium flex-shrink-0" style="width: 6.25rem; height: 6.25rem;">
+      <svg class="decorative-tallest-icon text-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
+        <use xlink:href="/docs/{{< param docs_version >}}/assets/img/ouds-web-sprite.svg#vector"/>
+      </svg>
+    </div>
+    <div>
+      <p class="lead mb-shortest fw-bold">Tallest decorative icon</p>
+      <p class="mb-none">coreGlobalDimension900 (<code>4.5rem</code> or <code>72px</code> at zoom 100%)</p>
+    </div>
+  </div>
+</div>
+
+```html
+<svg class="decorative-shortest-icon text-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true"></svg>
+<svg class="decorative-shorter-icon text-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true"></svg>
+<svg class="decorative-short-icon text-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true"></svg>
+<svg class="decorative-medium-icon text-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true"></svg>
+<svg class="decorative-tall-icon text-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true"></svg>
+<svg class="decorative-taller-icon text-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true"></svg>
+<svg class="decorative-tallest-icon text-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true"></svg>
+```
+
+## Multiple lines
+
+Sometimes you need a different structure to handle larger titles, or paragraphs that wrap over several lines. Here are some examples to handle these use cases. We've set arbitrary spacings, but align them with your design.
+
+### Centered on text block
+
+This is the default behavior of our DOM.
+
+{{< example >}}
+<div class="d-flex align-items-center">
+  <svg class="hxl-tall-icon me-scaled-short text-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
+    <use xlink:href="/docs/{{< param docs_version >}}/assets/img/ouds-web-sprite.svg#vector"/>
+  </svg>
+  <h1 class="mb-none">H1 with tall icon and a very long title to see how it behaves while being wrapped</h1>
+</div>
+{{< /example >}}
+
+{{< example >}}
+<div class="d-flex align-items-center">
+  <svg class="bm-tall-icon me-scaled-short text-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
+    <use xlink:href="/docs/{{< param docs_version >}}/assets/img/ouds-web-sprite.svg#vector"/>
+  </svg>
+  <p class="mb-none">
+    Default long paragraph with tall icon. It stands here in order for you to see how the icon should behave when it's placed next to a long paragraph. Whenever the paragraph stands on multiple lines please prefer using a block element and not an inline element so there will no strange behaviors.
+  </p>
+</div>
+{{< /example >}}
+
+### Above text block
+
+You can also have the icon above the text block.
+
+{{< example >}}
+<div>
+  <svg class="hxl-tall-icon mb-scaled-shorter text-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
+    <use xlink:href="/docs/{{< param docs_version >}}/assets/img/ouds-web-sprite.svg#vector"/>
+  </svg>
+  <h1 class="mb-none">H1 with tall icon and a very long title to see how it behaves while being wrapped</h1>
+</div>
+{{< /example >}}
+
+{{< example >}}
+<div>
+  <svg class="bm-tall-icon mb-scaled-shortest text-info" width="1rem" height="1rem" fill="currentColor" aria-hidden="true">
+    <use xlink:href="/docs/{{< param docs_version >}}/assets/img/ouds-web-sprite.svg#vector"/>
+  </svg>
+  <p class="mb-none">
+    Default long paragraph with tall icon. It stands here in order for you to see how the icon should behave when it's placed next to a long paragraph. Whenever the paragraph stands on multiple lines please prefer using a block element and not an inline element so there will no strange behaviors.
+  </p>
+</div>
+{{< /example >}}
+
+## `<img>` and font icon
+
+SVG Sprite is the preferred choice for flexibility, performance and accessibility, and this is why all our examples use this method but there are other ways to display icons. They should all behave the same due to our CSS. If you are experimenting any trouble, feel free to search or fill in a new [Github discussion](https://github.com/Orange-OpenSource/Orange-Boosted-Bootstrap/discussions) or contact [our team]({{< docsref "/about/team" >}}). <!-- Check out for more information in [our documentation]({{< docsref "/extend/icons" >}}). -->
+
+{{< example >}}
+<div class="d-flex align-items-center mb-medium">
+  <img class="hxl-tall-icon me-short" alt="" src="/docs/{{< param docs_version >}}/assets/img/vite.svg">
+  <h1 class="mb-none">H1 with tall icon</h1>
+</div>
+<div class="d-flex align-items-center mb-medium">
+  <span class="hxl-tall-icon me-short si si-settings" aria-hidden="true"></span>
+  <h1 class="mb-none">H1 with tall icon</h1>
+</div>
+{{< /example >}}
+
+## CSS
+
+### Variables
+
+{{< scss-docs name="root-size-scaled-var-ouds" file="scss/_root.scss" >}}
+
+### Sass tokens
+
+#### Raw tokens
+
+Dimension raw tokens as Sass variables. **Not to be used as-is**.
+
+{{< scss-docs name="ouds-raw-dimension" file="scss/tokens/_raw.scss" >}}
+
+#### Semantic tokens
+
+Size semantic tokens are defined as Sass variables.
+
+{{< scss-docs name="ouds-semantic-size" file="scss/tokens/_semantic.scss" >}}
diff --git a/site/content/docs/0.0/migration-from-boosted.md b/site/content/docs/0.0/migration-from-boosted.md
index 9f835b622f..2ff0395a60 100644
--- a/site/content/docs/0.0/migration-from-boosted.md
+++ b/site/content/docs/0.0/migration-from-boosted.md
@@ -34,13 +34,29 @@ From now on, OUDS Web won't embed Bootstrap elements that are not part of Orange
 
 ## Fonts
 
-OUDS Web doesn't use the Helvetica Neue font. Instead, it uses the system font stack. This means that the font will be different depending on the operating system and browser being used.
+OUDS Web doesn't use the Helvetica Neue font. Instead, it uses the system font stack. This means that the font will be slightly different depending on the operating system and browser being used.
 
 Technically, it means that you can get rid of the following things:
 - Helvetica Neue woff2 files: `fonts/HelvNeue55_W1G.woff2`, `fonts/HelvNeue75_W1G.woff2`, `fonts/HelveticaNeueW20-55Roman.woff2`, and `fonts/HelveticaNeueW20-75Bold.woff2`.
 - `orange-helvetica.*.css` file (default, RTL, or minified version).
 - If you were customizing your Sass compilation, you can remove the `@import "orange-helvetica";` line from your Sass files if it was there.
 
+## Content styles
+
+### Typography
+
+- <span class="badge text-bg-success">New</span> Body fonts' sizes are now responsive and can change depending on the screen size. See [Typography]({{< docsref "/content/typography/" >}}) for more details.
+
+- <span class="badge text-bg-success">New</span> A `max-width` has been added on all font references for readability reasons. If you want to get rid of the `max-width`, please use our `.mw-none` width utility.
+
+- <span class="badge text-bg-success">New</span> Selected text is now styled with a specific text `color` and `background-color`, making it easier to spot and to read.
+
+- <span class="badge text-bg-danger">Breaking</span> Display headings classes `.display-{1|2|3|4|5|6}` have been removed and replaced by `.display-{small|medium|large}`. You can still have them using `$enable-bootstrap-compatibility`.
+
+- <span class="badge text-bg-danger">Breaking</span> Abbreviation class `.initialism` has been removed.
+
+- <span class="badge text-bg-warning">Warning</span> Default spacing values now use `px`s instead of `em`s for fixed component spacing, to keep as much space as possible for meaningful content on zoom.
+
 ## Layout
 
 - <span class="badge text-bg-danger">Breaking</span> Responsive breakpoints have changed:
@@ -70,9 +86,19 @@ All responsive classes, helpers, and utilities have been updated accordingly to
 
 ## Helpers
 
+### Icon
+
+- <span class="badge text-bg-success">New</span> Icons' sizes helpers have been added to help choose the right icon size with a specific typography reference. If you need these helpers, and you are using a custom import stack for helpers, don't forget to add the needed file `helpers/_icon.scss`:
+  - Responsive icons' sizes in headings:
+    - `.h{size}-short-icon`, `.h{size}-medium-icon`, `.h{size}-tall-icon`, where `h` stands for heading and size is one of `s` for small, `m` for medium, `l` for large, or `xl` for x-large
+    - `.b{size}-short-icon`, `.b{size}-medium-icon`, , `.h{size}-tall-icon`, where `b` stands for body and size is one of `m` for medium, or `l` for large
+  - Responsive icons' sizes in regular texts: `.b{size}-short-icon`, `.b{size}-medium-icon`, `.b{size}-tall-icon`, where `b` stands for body and size is one of `s` for small, `m` for medium, or `l` for large
+  - Fixed icons' sizes for decorative standalone icons: `.decorative-{size}-icon` where size is one of `shortest|shorter|short|medium|tall|taller|tallest`
+
 ### Position
 
 - <span class="badge text-bg-danger">Breaking</span> Responsive sticky helpers `.sticky-xxl-{top|bottom}` have been removed and replaced by their equivalent `.sticky-2xl-{top|bottom}`. You can still have them using `$enable-bootstrap-compatibility`.
+
 - <span class="badge text-bg-success">New</span> Responsive sticky helpers: `.sticky-xs-{top|bottom}`, `.sticky-2xl-{top|bottom}` and `.sticky-3xl-{top|bottom}`.
 
 ## Utilities
@@ -135,6 +161,10 @@ All responsive classes, helpers, and utilities have been updated accordingly to
 - <span class="badge text-bg-success">New</span> Shadows utilities:
 `.shadow-none`, `.shadow-raised`, `.shadow-drag`, `.shadow-overlay-default`, `.shadow-overlay-emphasized`, `.shadow-sticky-default`, `.shadow-sticky-emphasized` and `.shadow-sticky-navigation-scrolled`.
 
+### Sizing
+
+- <span class="badge text-bg-success">New</span> Sizing utility `.mw-none` to set `max-width: none`. This utility is particularly useful now that a `max-width` has been added on all font references (for readability reasons), if you want to omit it in some special cases.
+
 ### Spacings
 
 - <span class="badge text-bg-danger">Breaking</span> The following margin spacing utilities have been removed from the default build (`.m{position}-{breakpoint}-{negative}{value}`). Please check the new [spacing values]({{< docsref "/utilities/spacing" >}}) directly in the documentation and adapt your websites to them. You can still have them using `$enable-bootstrap-compatibility`:
@@ -256,8 +286,28 @@ All responsive classes, helpers, and utilities have been updated accordingly to
     1. **Mixing Bootstrap numbers**: Search for `([" \.][mp]|-?gap)[tblrsexy]?-[a-z]{0,3}-?n?\d`, when you match multiple on one line, consider using one of our [scaled spacing utilities]({{< docsref "/utilities/spacing#notation-for-scaled-values" >}}) (for example, `.mb-1.mb-md-2` → `.mb-scaled-shortest`).
     2. **Remaining standalone classes**: Follow the previous guide going through all the standalone classes.
 
+### Text
+
+- <span class="badge text-bg-danger">Breaking</span> `.text-xxl-{start|end|none}` responsive alignment text utility has been replaced by `.text-2xl-{start|end|none}`. Please refer to the [new breakpoints' names]({{< docsref "/layout/breakpoints/#available-breakpoints" >}}). You can still have it using `$enable-bootstrap-compatibility`.
+
+- <span class="badge text-bg-success">New</span> `.text-xs-{start|end|none}` and `.text-3xl-{start|end|none}` responsive alignment text utilities have been added. Please refer to the [new breakpoints' names]({{< docsref "/layout/breakpoints/#available-breakpoints" >}}).
+
+- <span class="badge text-bg-danger">Breaking</span> Font size text utilities `.fs-{1|2|3|4|5|6}` have been removed and replaced by new ones. You can still have them using `$enable-bootstrap-compatibility`:
+  - **Display headings**: `.fs-dl`, `.fs-dm`, `.fs-ds`
+  - **Headings**: `.fs-hxl`, `.fs-hl`, `.fs-hm`, `.fs-hs`
+  - **Body**: `.fs-bl`, `.fs-bm`, `.fs-bs`
+  - **Code**: `.fs-cm`, `.fs-cs`
+
+- <span class="badge text-bg-danger">Breaking</span> Font weight text utilities `.fw-semibold` and `.fw-medium` have been removed.
+
+- <span class="badge text-bg-danger">Breaking</span> Line height text utilities `.lh-1`, `.lh-sm`, `.lh-base`, and `.lh-lg` have been removed, since our font references already have defined `line-height`s. You can still have them using `$enable-bootstrap-compatibility`.
+
+- <span class="badge text-bg-danger">Breaking</span> Line length text utilities `.ll-sm` and `.ll-md` have been removed, since there is already a default `max-width`.
+
 ## Examples
 
+- <span class="badge text-bg-success">New</span> New [Font example]({{< docsref "/examples/font" >}}).
+
 - <span class="badge text-bg-success">New</span> New [Grid system example]({{< docsref "/examples/grid-system" >}}).
 
 ## CSS and Sass variables
@@ -402,6 +452,8 @@ All responsive classes, helpers, and utilities have been updated accordingly to
       <li><code>$ouds-elevation-y-sticky-default</code></li>
       <li><code>$ouds-elevation-y-sticky-emphasized</code></li>
       <li><code>$ouds-elevation-y-sticky-navigation-scrolled</code></li>
+      <li><code>$ouds-font-family-monospace-stack</code></li>
+      <li><code>$ouds-font-family-sans-serif-stack</code></li>
       <li><code>$ouds-grid-2xl-column-gap</code></li>
       <li><code>$ouds-grid-2xl-margin</code></li>
       <li><code>$ouds-grid-2xl-min-width</code></li>
@@ -515,6 +567,9 @@ All responsive classes, helpers, and utilities have been updated accordingly to
       <li><code>$ouds-dimension-space-fixed</code></li>
       <li><code>$ouds-dimension-space-scaled</code></li>
       <li><code>$ouds-elevations</code></li>
+      <li><code>$ouds-font-sizes</code></li>
+      <li><code>$ouds-font-weights</code></li>
+      <li><code>$ouds-icon-sizes</code></li>
       <li><code>$ouds-opacities</code></li>
     </ul>
   </details>
@@ -522,12 +577,12 @@ All responsive classes, helpers, and utilities have been updated accordingly to
 - <details class="mb-short">
     <summary><span class="badge text-bg-success">New</span> Sass mixins:</summary>
     <ul>
-      <li><code>get-breakpoint-from-width()</code></li>
+      <li><code>get-font-size()</code></li>
     </ul>
   </details>
 
 - <details class="mb-short">
-    <summary><span class="badge text-bg-success">New</span> keys in <code>$utilities</code> map:</summary>
+    <summary><span class="badge text-bg-success">New</span> Keys in <code>$utilities</code> map:</summary>
     <ul>
       <li><code>border-bottom-ouds</code></li>
       <li><code>border-end-ouds</code></li>
@@ -538,6 +593,8 @@ All responsive classes, helpers, and utilities have been updated accordingly to
       <li><code>border-width-ouds</code></li>
       <li><code>column-gap-ouds</code></li>
       <li><code>column-gap-scaled-ouds</code></li>
+      <li><code>font-size-ouds</code></li>
+      <li><code>font-weight-ouds</code></li>
       <li><code>gap-ouds</code></li>
       <li><code>gap-scaled-ouds</code></li>
       <li><code>margin-bottom-ouds</code></li>
@@ -597,13 +654,104 @@ All responsive classes, helpers, and utilities have been updated accordingly to
 - <details class="mb-short">
     <summary><span class="badge text-bg-success">New</span> CSS variable:</summary>
     <ul>
+      <li><code>--bs-body-letter-spacing</code></li>
       <li><code>--bs-container-margin-x</code></li>
+      <li><code>--bs-font-size-display-large</code></li>
+      <li><code>--bs-font-size-display-medium</code></li>
+      <li><code>--bs-font-size-display-small</code></li>
+      <li><code>--bs-font-size-heading-xlarge</code></li>
+      <li><code>--bs-font-size-heading-large</code></li>
+      <li><code>--bs-font-size-heading-medium</code></li>
+      <li><code>--bs-font-size-heading-small</code></li>
+      <li><code>--bs-font-size-body-large</code></li>
+      <li><code>--bs-font-size-body-medium</code></li>
+      <li><code>--bs-font-size-body-small</code></li>
+      <li><code>--bs-font-size-label-xlarge</code></li>
+      <li><code>--bs-font-size-label-large</code></li>
+      <li><code>--bs-font-size-label-medium</code></li>
+      <li><code>--bs-font-size-label-small</code></li>
+      <li><code>--bs-font-size-code-medium</code></li>
+      <li><code>--bs-font-line-height-display-large</code></li>
+      <li><code>--bs-font-line-height-display-medium</code></li>
+      <li><code>--bs-font-line-height-display-small</code></li>
+      <li><code>--bs-font-line-height-heading-xlarge</code></li>
+      <li><code>--bs-font-line-height-heading-large</code></li>
+      <li><code>--bs-font-line-height-heading-medium</code></li>
+      <li><code>--bs-font-line-height-heading-small</code></li>
+      <li><code>--bs-font-line-height-body-large</code></li>
+      <li><code>--bs-font-line-height-body-medium</code></li>
+      <li><code>--bs-font-line-height-body-small</code></li>
+      <li><code>--bs-font-line-height-label-xlarge</code></li>
+      <li><code>--bs-font-line-height-label-large</code></li>
+      <li><code>--bs-font-line-height-label-medium</code></li>
+      <li><code>--bs-font-line-height-label-small</code></li>
+      <li><code>--bs-font-line-height-code-medium</code></li>
+      <li><code>--bs-font-letter-spacing-display-large</code></li>
+      <li><code>--bs-font-letter-spacing-display-medium</code></li>
+      <li><code>--bs-font-letter-spacing-display-small</code></li>
+      <li><code>--bs-font-letter-spacing-heading-xlarge</code></li>
+      <li><code>--bs-font-letter-spacing-heading-large</code></li>
+      <li><code>--bs-font-letter-spacing-heading-medium</code></li>
+      <li><code>--bs-font-letter-spacing-heading-small</code></li>
+      <li><code>--bs-font-letter-spacing-body-large</code></li>
+      <li><code>--bs-font-letter-spacing-body-medium</code></li>
+      <li><code>--bs-font-letter-spacing-body-small</code></li>
+      <li><code>--bs-font-letter-spacing-label-xlarge</code></li>
+      <li><code>--bs-font-letter-spacing-label-large</code></li>
+      <li><code>--bs-font-letter-spacing-label-medium</code></li>
+      <li><code>--bs-font-letter-spacing-label-small</code></li>
+      <li><code>--bs-font-letter-spacing-code-medium</code></li>
+      <li><code>--bs-font-max-width-display-large</code></li>
+      <li><code>--bs-font-max-width-display-medium</code></li>
+      <li><code>--bs-font-max-width-display-small</code></li>
+      <li><code>--bs-font-max-width-heading-xlarge</code></li>
+      <li><code>--bs-font-max-width-heading-large</code></li>
+      <li><code>--bs-font-max-width-heading-medium</code></li>
+      <li><code>--bs-font-max-width-heading-small</code></li>
+      <li><code>--bs-font-max-width-body-large</code></li>
+      <li><code>--bs-font-max-width-body-medium</code></li>
+      <li><code>--bs-font-max-width-body-small</code></li>
+      <li><code>--bs-icon-short-with-heading-xlarge</code></li>
+      <li><code>--bs-icon-medium-with-heading-xlarge</code></li>
+      <li><code>--bs-icon-tall-with-heading-xlarge</code></li>
+      <li><code>--bs-icon-short-with-heading-large</code></li>
+      <li><code>--bs-icon-medium-with-heading-large</code></li>
+      <li><code>--bs-icon-tall-with-heading-large</code></li>
+      <li><code>--bs-icon-short-with-heading-medium</code></li>
+      <li><code>--bs-icon-medium-with-heading-medium</code></li>
+      <li><code>--bs-icon-tall-with-heading-medium</code></li>
+      <li><code>--bs-icon-short-with-heading-small</code></li>
+      <li><code>--bs-icon-medium-with-heading-small</code></li>
+      <li><code>--bs-icon-tall-with-heading-small</code></li>
+      <li><code>--bs-icon-short-with-body-large</code></li>
+      <li><code>--bs-icon-medium-with-body-large</code></li>
+      <li><code>--bs-icon-tall-with-body-large</code></li>
+      <li><code>--bs-icon-short-with-body-medium</code></li>
+      <li><code>--bs-icon-medium-with-body-medium</code></li>
+      <li><code>--bs-icon-tall-with-body-medium</code></li>
+      <li><code>--bs-icon-short-with-body-small</code></li>
+      <li><code>--bs-icon-medium-with-body-small</code></li>
+      <li><code>--bs-icon-tall-with-body-small</code></li>
+      <li><code>--bs-space-scaled-medium</code></li>
+      <li><code>--bs-space-scaled-none</code></li>
+      <li><code>--bs-space-scaled-short</code></li>
+      <li><code>--bs-space-scaled-shorter</code></li>
+      <li><code>--bs-space-scaled-shortest</code></li>
+      <li><code>--bs-space-scaled-smash</code></li>
+      <li><code>--bs-space-scaled-spacious</code></li>
+      <li><code>--bs-space-scaled-tall</code></li>
+      <li><code>--bs-space-scaled-taller</code></li>
+      <li><code>--bs-space-scaled-tallest</code></li>
     </ul>
   </details>
 
 - <details class="mb-short">
     <summary><span class="badge text-bg-warning">Warning</span> Dropped Sass variables:</summary>
     <ul>
+      <li><code>$blockquote-font-size</code></li>
+      <li><code>$blockquote-footer-font-size</code></li>
+      <li><code>$blockquote-line-height</code></li>
+      <li><code>$blockquote-letter-spacing</code></li>
       <li><code>$boosted-prefix</code></li>
       <li><code>$boosted-variable-prefix</code></li>
       <li><code>$btn-close-white-active-border-color</code></li>
@@ -613,18 +761,51 @@ All responsive classes, helpers, and utilities have been updated accordingly to
       <li><code>$btn-close-white-color</code></li>
       <li><code>$btn-close-white-disabled-color</code></li>
       <li><code>$btn-close-white-hover-color</code></li>
+      <li><code>$display1-size</code></li>
+      <li><code>$display1-spacing</code></li>
+      <li><code>$display2-size</code></li>
+      <li><code>$display2-spacing</code></li>
+      <li><code>$display3-size</code></li>
+      <li><code>$display3-spacing</code></li>
+      <li><code>$display4-size</code></li>
+      <li><code>$display4-spacing</code></li>
       <li><code>$footer-nav-link-font-weight</code></li>
+      <li><code>$font-size-xlg</code></li>
       <li><code>$form-star-focus-box-shadow</code></li>
       <li><code>$form-star-focus-color</code></li>
       <li><code>$form-star-focus-color-dark</code></li>
       <li><code>$form-star-focus-outline</code></li>
       <li><code>$form-star-focus-outline-dark</code></li>
       <li><code>$grid-gutter-breakpoint</code></li>
+      <li><code>$h1-line-height</code></li>
+      <li><code>$h1-spacing</code></li>
+      <li><code>$h2-line-height</code></li>
+      <li><code>$h2-spacing</code></li>
+      <li><code>$h3-line-height</code></li>
+      <li><code>$h3-spacing</code></li>
+      <li><code>$h4-line-height</code></li>
+      <li><code>$h4-spacing</code></li>
+      <li><code>$h5-line-height</code></li>
+      <li><code>$h5-spacing</code></li>
+      <li><code>$h6-line-height</code></li>
+      <li><code>$h6-spacing</code></li>
+      <li><code>$initialism-font-size</code></li>
+      <li><code>$lead-letter-spacing</code></li>
+      <li><code>$lead-line-height</code></li>
+      <li><code>$legend-font-size</code></li>
+      <li><code>$line-length-sm</code></li>
+      <li><code>$line-length-md</code></li>
+      <li><code>$mid-spacing</code></li>
       <li><code>$orange-filter</code></li>
       <li><code>$outline-offset</code></li>
       <li><code>$outline-width</code></li>
+      <li><code>$pre-line-height</code></li>
       <li><code>$step-item-padding-end</code></li>
       <li><code>$title-bar-border-color-dark</code></li>
+      <li><code>$title-bar-font-size-md</code></li>
+      <li><code>$title-bar-font-size-xl</code></li>
+      <li><code>$title-bar-line-height-md</code></li>
+      <li><code>$title-bar-line-height-xl</code></li>
     </ul>
   </details>
 
@@ -638,16 +819,6 @@ All responsive classes, helpers, and utilities have been updated accordingly to
       <li><code>--bs-btn-close-color</code></li>
       <li><code>--bs-btn-close-disabled-color</code></li>
       <li><code>--bs-btn-close-hover-color</code></li>
-      <li><code>--bs-space-scaled-medium</code></li>
-      <li><code>--bs-space-scaled-none</code></li>
-      <li><code>--bs-space-scaled-short</code></li>
-      <li><code>--bs-space-scaled-shorter</code></li>
-      <li><code>--bs-space-scaled-shortest</code></li>
-      <li><code>--bs-space-scaled-smash</code></li>
-      <li><code>--bs-space-scaled-spacious</code></li>
-      <li><code>--bs-space-scaled-tall</code></li>
-      <li><code>--bs-space-scaled-taller</code></li>
-      <li><code>--bs-space-scaled-tallest</code></li>
     </ul>
   </details>
 
@@ -676,7 +847,7 @@ All responsive classes, helpers, and utilities have been updated accordingly to
   </details>
 
 - <details class="mb-short">
-    <summary><span class="badge text-bg-danger">Breaking</span> keys in <code>$utilities</code> map only available when <code>$enable-bootstrap-compatibility</code> is on:</summary>
+    <summary><span class="badge text-bg-danger">Breaking</span> Keys in <code>$utilities</code> map only available when <code>$enable-bootstrap-compatibility</code> is on:</summary>
     <ul>
       <li><code>border</code></li>
       <li><code>border-bottom</code></li>
@@ -686,7 +857,10 @@ All responsive classes, helpers, and utilities have been updated accordingly to
       <li><code>border-top</code></li>
       <li><code>border-width</code></li>
       <li><code>column-gap</code></li>
+      <li><code>font-size</code></li>
+      <li><code>font-weight</code></li>
       <li><code>gap</code></li>
+      <li><code>line-height</code></li>
       <li><code>margin-bottom</code></li>
       <li><code>margin-end</code></li>
       <li><code>margin</code></li>
@@ -719,4 +893,15 @@ All responsive classes, helpers, and utilities have been updated accordingly to
     </ul>
   </details>
 
+- <details class="mb-short">
+    <summary><span class="badge text-bg-warning">Warning</span> Dropped keys in <code>$utilities</code> map:</summary>
+    <ul>
+      <li><code>line-length</code></li>
+    </ul>
+  </details>
+
 - <span class="badge text-bg-warning">Warning</span> Signature of `make-row($gutter, $gutter-sm)` is now `make-row($gutter)`.
+
+## Sass mixins
+
+- <span class="badge text-bg-success">New</span> The mixin `get-font-size({font-size-ref})` has been added, where `font-size-ref` is one of:  `"code-small"`,  `"code-medium"`,  `"label-small"`,  `"label-medium"`,  `"label-large"`,  `"label-xlarge"`,  `"body-small"`,  `"body-medium"`,  `"body-large"`,  `"heading-small"`,  `"heading-medium"`,  `"heading-large"`,  `"heading-xlarge"`,  `"display-small"`,  `"display-medium"`,  `"display-large"`. If you have/need any `font-size` in one of your SCSS classes, please consider using this mixin instead. See [Typography Sass mixins]({{< docsref "/content/typography/#sass-mixins" >}}) for more details.
diff --git a/site/content/docs/0.0/migration.md b/site/content/docs/0.0/migration.md
index 3ad8408c11..2810b5b866 100644
--- a/site/content/docs/0.0/migration.md
+++ b/site/content/docs/0.0/migration.md
@@ -11,6 +11,29 @@ toc: true
 
 ## v0.0.4
 
+### Content styles
+
+#### Default styles
+
+- <span class="badge text-bg-success">New</span> Default styles have be added to HTML elements:
+  - Default guidelines that guide our choices like spacing units, text `max-width`, or avoiding `margin-top`
+  - `box-sizing: border-box` set on every element
+  - Default font parameters using native font stack
+  - Default `background-color`
+
+#### Typography
+
+- <span class="badge text-bg-success">New</span> All typography global settings have been set for:
+  - Headings
+  - Display headings
+  - Regular texts
+  - Inline text elements (`<mark>`, `<del>`, `<s>`, `<ins>`, `<u>`, `<small>`, `<strong>`, `<em>`, `<abbr>`, `<hr>`, `<var>`, `<kbd>`, `<samp>`, `<address>`)
+  - Code parts (inline, blocks)
+  - Abbreviations (`<abbr>`)
+  - Blockquotes
+  - Summaries (`<summary>`)
+  - Hidden elements
+
 ### Layout
 
 - <span class="badge text-bg-success">New</span> Responsive flexbox grid system is now available with eight default responsive tiers defined at breakpoints `2xs`, `xs`, `sm`, `md`, `xl`, `2xl`, and `3xl`.
@@ -24,9 +47,18 @@ toc: true
 
 ### Helpers
 
+#### Icon
+
+- <span class="badge text-bg-success">New</span> Icons' sizes utilities are now available to help choose the right icon size with a specific typography reference:
+  - Responsive icons' sizes in headings:
+    - `.h{size}-short-icon`, `.h{size}-medium-icon`, `.h{size}-tall-icon`, where `h` stands for heading and size is one of `s` for small, `m` for medium, `l` for large, or `xl` for x-large
+    - `.b{size}-short-icon`, `.b{size}-medium-icon`, , `.h{size}-tall-icon`, where `b` stands for body and size is one of `m` for medium, or `l` for large
+  - Responsive icons' sizes in regular texts: `.b{size}-short-icon`, `.b{size}-medium-icon`, `.b{size}-tall-icon`, where `b` stands for body and  size is one of `s` for small, `m` for medium, or `l` for large
+  - Fixed icons' sizes for decorative standalone icons: `.decorative-{size}-icon` where size is one of `shortest|shorter|short|medium|tall|taller|tallest`
+
 #### Position
 
-- <span class="badge text-bg-success">New</span> Responsive sticky helpers: `.sticky-{breakpoint}-top` and `.sticky-{breakpoint}-bottom` where `breakpoint` is in `|xs|sm|md|lg|xl|2xl|3xl`.
+- <span class="badge text-bg-success">New</span> Responsive sticky helpers: `.sticky-{value}`, and `.sticky-{breakpoint}-{value}` where `breakpoint` is in `xs|sm|md|lg|xl|2xl|3xl`, and `value` is in `top|bottom`.
 
 ### Utilities
 
@@ -53,20 +85,20 @@ toc: true
 
 #### Display
 
-- <span class="badge text-bg-success">New</span> Responsive display utilities: `.d-{breakpoint}-{value}` where `breakpoint` is in `|xs|sm|md|lg|xl|2xl|3xl`.
+- <span class="badge text-bg-success">New</span> Responsive display utilities: `.d-{value}`, `.d-{breakpoint}-{value}` where `breakpoint` is in `xs|sm|md|lg|xl|2xl|3xl`, and `value` is in `none|inline|inline-block|block|grid|inline-grid|table|table-cell|table-row|flex|inline-flex`.
 
 #### Flex
 
-- <span class="badge text-bg-success">New</span> Responsive flex utilities where `breakpoint` is in `|xs|sm|md|lg|xl|2xl|3xl`:
+- <span class="badge text-bg-success">New</span> Responsive flex utilities without `breakpoint` for `2xs`, and where `breakpoint` is in `xs|sm|md|lg|xl|2xl|3xl`:
   `.d-{breakpoint}-flex`, `.d-{breakpoint}-inline-flex`, `.flex-{breakpoint}-{row|column}`, `.flex-{breakpoint}-{row|column}-reverse`, `.justify-content-{breakpoint}-{start|end|center|between|around|evenly}`, `.align-items-{breakpoint}-{start|end|center|baseline|stretch}`, `.align-self-{breakpoint}-{start|end|center|baseline|stretch}`, `.flex-{breakpoint}-fill`, `.flex-{breakpoint}-{grow|shrink}-{0|1}`, `.flex-{breakpoint}-{nowrap|wrap|wrap-reverse}`, `.order-{breakpoint}-{number}`, `.order-{breakpoint}-{first|last}` and `.align-content-{breakpoint}-{start|end|center|between|around|stretch}`.
 
 #### Float
 
-- <span class="badge text-bg-success">New</span> Responsive float utilities: `.float-{breakpoint}-{start|end|none}` where `breakpoint` is in `|xs|sm|md|lg|xl|2xl|3xl`.
+- <span class="badge text-bg-success">New</span> Responsive float utilities: `.float-{start|end|none}`, `.float-{breakpoint}-{start|end|none}` where `breakpoint` is in `xs|sm|md|lg|xl|2xl|3xl`.
 
 #### Object fit
 
-- <span class="badge text-bg-success">New</span> Responsive object fit utilities: `.object-fit-{breakpoint}-{contain|cover|fill|scale|none}` where `breakpoint` is in `|xs|sm|md|lg|xl|2xl|3xl`.
+- <span class="badge text-bg-success">New</span> Responsive object fit utilities: `.object-fit-{contain|cover|fill|scale|none}`, `.object-fit-{breakpoint}-{contain|cover|fill|scale|none}` where `breakpoint` is in `xs|sm|md|lg|xl|2xl|3xl`.
 
 #### Opacity
 
@@ -77,9 +109,13 @@ toc: true
 - <span class="badge text-bg-success">New</span> Shadows utilities:
   `.shadow-none`, `.shadow-raised`, `.shadow-drag`, `.shadow-overlay-default`, `.shadow-overlay-emphasized`, `.shadow-sticky-default`, `.shadow-sticky-emphasized` and `.shadow-sticky-navigation-scrolled`.
 
+#### Sizing
+
+- <span class="badge text-bg-success">New</span> Sizing utility `.mw-none` to set `max-width: none`. This utility is particularly useful to reset the `max-width` of our font references in some special cases.
+
 #### Spacings
 
-- <span class="badge text-bg-success">New</span> fixed margin spacing utilities:
+- <span class="badge text-bg-success">New</span> Fixed margin spacing utilities:
   - **None**: `.m-none`, `.mx-none`, `.my-none`, `.mt-none`, `.mb-none`, `.ms-none`, `.me-none`, `.m-xs-none`, etc...
   - **Smash**: `.m-smash`, `.mx-smash`, `.my-smash`, `.mt-smash`, `.mb-smash`, `.ms-smash`, `.me-smash`, `.m-xs-smash`, etc...
   - **Shortest**: `.m-shortest`, `.mx-shortest`, `.my-shortest`, `.mt-shortest`, `.mb-shortest`, `.ms-shortest`, `.me-shortest`, `.m-xs-shortest`, etc...
@@ -94,7 +130,7 @@ toc: true
   - **Jumbo**: `.m-jumbo`, `.mx-jumbo`, `.my-jumbo`, `.mt-jumbo`, `.mb-jumbo`, `.ms-jumbo`, `.me-jumbo`, `.m-xs-jumbo`, etc...
   - **Auto**: `.m-auto`, `.mx-auto`, `.my-auto`, `.mt-auto`, `.mb-auto`, `.ms-auto`, `.me-auto`, `.m-xs-auto`, etc...
 
-- <span class="badge text-bg-success">New</span> scaled margin spacing utilities:
+- <span class="badge text-bg-success">New</span> Scaled margin spacing utilities:
   - **None**: `.m-scaled-none`, `.mx-scaled-none`, `.my-scaled-none`, `.mt-scaled-none`, `.mb-scaled-none`, `.ms-scaled-none`, `.me-scaled-none`,
   - **Smash**: `.m-scaled-smash`, `.mx-scaled-smash`, `.my-scaled-smash`, `.mt-scaled-smash`, `.mb-scaled-smash`, `.ms-scaled-smash`, `.me-scaled-smash`,
   - **Shortest**: `.m-scaled-shortest`, `.mx-scaled-shortest`, `.my-scaled-shortest`, `.mt-scaled-shortest`, `.mb-scaled-shortest`, `.ms-scaled-shortest`, `.me-scaled-shortest`,
@@ -106,7 +142,7 @@ toc: true
   - **Tallest**: `.m-scaled-tallest`, `.mx-scaled-tallest`, `.my-scaled-tallest`, `.mt-scaled-tallest`, `.mb-scaled-tallest`, `.ms-scaled-tallest`, `.me-scaled-tallest`,
   - **Spacious**: `.m-scaled-spacious`, `.mx-scaled-spacious`, `.my-scaled-spacious`, `.mt-scaled-spacious`, `.mb-scaled-spacious`, `.ms-scaled-spacious`, `.me-scaled-spacious`
 
-- <span class="badge text-bg-success">New</span> fixed padding spacing utilities:
+- <span class="badge text-bg-success">New</span> Fixed padding spacing utilities:
   - **None**: `.p-none`, `.px-none`, `.py-none`, `.pt-none`, `.pb-none`, `.ps-none`, `.pe-none`, `.p-xs-none`, etc...
   - **Smash**: `.p-smash`, `.px-smash`, `.py-smash`, `.pt-smash`, `.pb-smash`, `.ps-smash`, `.pe-smash`, `.p-xs-smash`, etc...
   - **Shortest**: `.p-shortest`, `.px-shortest`, `.py-shortest`, `.pt-shortest`, `.pb-shortest`, `.ps-shortest`, `.pe-shortest`, `.p-xs-shortest`, etc...
@@ -120,7 +156,7 @@ toc: true
   - **Huge**: `.p-huge`, `.px-huge`, `.py-huge`, `.pt-huge`, `.pb-huge`, `.ps-huge`, `.pe-huge`, `.p-xs-huge`, etc...
   - **Jumbo**: `.p-jumbo`, `.px-jumbo`, `.py-jumbo`, `.pt-jumbo`, `.pb-jumbo`, `.ps-jumbo`, `.pe-jumbo`, `.p-xs-jumbo`, etc...
 
-- <span class="badge text-bg-success">New</span> scaled padding spacing utilities:
+- <span class="badge text-bg-success">New</span> Scaled padding spacing utilities:
   - **None**: `.p-scaled-none`, `.px-scaled-none`, `.py-scaled-none`, `.pt-scaled-none`, `.pb-scaled-none`, `.ps-scaled-none`, `.pe-scaled-none`,
   - **Smash**: `.p-scaled-smash`, `.px-scaled-smash`, `.py-scaled-smash`, `.pt-scaled-smash`, `.pb-scaled-smash`, `.ps-scaled-smash`, `.pe-scaled-smash`,
   - **Shortest**: `.p-scaled-shortest`, `.px-scaled-shortest`, `.py-scaled-shortest`, `.pt-scaled-shortest`, `.pb-scaled-shortest`, `.ps-scaled-shortest`, `.pe-scaled-shortest`,
@@ -132,7 +168,7 @@ toc: true
   - **Tallest**: `.p-scaled-tallest`, `.px-scaled-tallest`, `.py-scaled-tallest`, `.pt-scaled-tallest`, `.pb-scaled-tallest`, `.ps-scaled-tallest`, `.pe-scaled-tallest`,
   - **Spacious**: `.p-scaled-spacious`, `.px-scaled-spacious`, `.py-scaled-spacious`, `.pt-scaled-spacious`, `.pb-scaled-spacious`, `.ps-scaled-spacious`, `.pe-scaled-spacious`
 
-- <span class="badge text-bg-success">New</span> fixed gap spacing utilities:
+- <span class="badge text-bg-success">New</span> Fixed gap spacing utilities:
   - **None**: `.gap-none`, `.row-gap-none`, `.column-gap-none`, `.gap-xs-none`, etc...
   - **Smash**: `.gap-smash`, `.row-gap-smash`, `.column-gap-smash`, `.gap-xs-smash`, etc...
   - **Shortest**: `.gap-shortest`, `.row-gap-shortest`, `.column-gap-shortest`, `.gap-xs-shortest`, etc...
@@ -146,7 +182,7 @@ toc: true
   - **Huge**: `.gap-huge`, `.row-gap-huge`, `.column-gap-huge`, `.gap-xs-huge`, etc...
   - **Jumbo**: `.gap-jumbo`, `.row-gap-jumbo`, `.column-gap-jumbo`, `.gap-xs-jumbo`, etc...
 
-- <span class="badge text-bg-success">New</span> scaled gap spacing utilities:
+- <span class="badge text-bg-success">New</span> Scaled gap spacing utilities:
   - **None**: `.gap-scaled-none`, `.row-gap-scaled-none`, `.column-gap-scaled-none`
   - **Smash**: `.gap-scaled-smash`, `.row-gap-scaled-smash`, `.column-gap-scaled-smash`
   - **Shortest**: `.gap-scaled-shortest`, `.row-gap-scaled-shortest`, `.column-gap-scaled-shortest`
@@ -158,8 +194,30 @@ toc: true
   - **Tallest**: `.gap-scaled-tallest`, `.row-gap-scaled-tallest`, `.column-gap-scaled-tallest`
   - **Spacious**: `.gap-scaled-spacious`, `.row-gap-scaled-spacious`, `.column-gap-scaled-spacious`
 
+#### Text
+
+- <span class="badge text-bg-success">New</span> Alignment text utilities: `.text-start`, `.text-center`, `.text-end`, and responsive versions like `.text-{breakpoint}-{start|center|end}` where `breakpoint` is in `xs|sm|md|lg|xl|2xl|3xl`.
+
+- <span class="badge text-bg-success">New</span> Wrapping and overflow text utilities: `.text-wrap` and `.text-nowrap`.
+
+- <span class="badge text-bg-success">New</span> Word break text utility: `.text-break`.
+
+- <span class="badge text-bg-success">New</span> Text transform text utilities: `.text-lowercase`, `.text-uppercase`, and `.text-capitalize`.
+
+- <span class="badge text-bg-success">New</span> Font size text utilities:
+  - **Display headings**: `.fs-dl`, `.fs-dm`, `.fs-ds`
+  - **Headings**: `.fs-hxl`, `.fs-hl`, `.fs-hm`, `.fs-hs`
+  - **Body**: `.fs-bl`, `.fs-bm`, `.fs-bs`
+  - **Code**: `.fs-cm`, `.fs-cs`
+
+- <span class="badge text-bg-success">New</span> Font weight text utilities: `.fw-normal` and `.fw-bold`.
+
+- <span class="badge text-bg-success">New</span> Text decoration utilities: `.text-decoration-underline`, `.text-decoration-line-through`, and `.text-decoration-none`.
+
 ### Examples
 
+- <span class="badge text-bg-success">New</span> New [Font example]({{< docsref "/examples/font" >}}).
+
 - <span class="badge text-bg-success">New</span> New [Grid example]({{< docsref "/examples/grid" >}}).
 
 - <span class="badge text-bg-success">New</span> New [Grid system example]({{< docsref "/examples/grid-system" >}}).
@@ -172,6 +230,8 @@ toc: true
     <summary>See the new import stack</summary>
 
     ```diff
+      @import "functions";
+      @import "tokens/raw";
       @import "tokens/semantic";
     + @import "tokens/composite";
       @import "tokens/component";
@@ -304,6 +364,8 @@ toc: true
       <li><code>$ouds-elevation-y-sticky-default</code></li>
       <li><code>$ouds-elevation-y-sticky-emphasized</code></li>
       <li><code>$ouds-elevation-y-sticky-navigation-scrolled</code></li>
+      <li><code>$ouds-font-family-monospace-stack</code></li>
+      <li><code>$ouds-font-family-sans-serif-stack</code></li>
       <li><code>$ouds-grid-2xl-column-gap</code></li>
       <li><code>$ouds-grid-2xl-margin</code></li>
       <li><code>$ouds-grid-2xl-min-width</code></li>
@@ -328,7 +390,6 @@ toc: true
       <li><code>$ouds-grid-margin-400</code></li>
       <li><code>$ouds-grid-margin-500</code></li>
       <li><code>$ouds-grid-margin-700</code></li>
-      <li><code>$ouds-size-max-width-grid</code></li>
       <li><code>$ouds-grid-md-column-gap</code></li>
       <li><code>$ouds-grid-md-margin</code></li>
       <li><code>$ouds-grid-md-min-width</code></li>
@@ -354,6 +415,7 @@ toc: true
       <li><code>$ouds-opacity-transparent</code></li>
       <li><code>$ouds-opacity-weak</code></li>
       <li><code>$ouds-opacity-weaker</code></li>
+      <li><code>$ouds-size-max-width-grid</code></li>
       <li><code>$ouds-space-fixed-huge</code></li>
       <li><code>$ouds-space-fixed-jumbo</code></li>
       <li><code>$ouds-space-fixed-medium</code></li>
@@ -415,6 +477,9 @@ toc: true
       <li><code>$ouds-dimension-space-fixed</code></li>
       <li><code>$ouds-dimension-space-scaled</code></li>
       <li><code>$ouds-elevations</code></li>
+      <li><code>$ouds-font-sizes</code></li>
+      <li><code>$ouds-font-weights</code></li>
+      <li><code>$ouds-icon-sizes</code></li>
     </ul>
   </details>
 
@@ -425,7 +490,7 @@ toc: true
       <li><code>breakpoint-min()</code></li>
       <li><code>breakpoint-max()</code></li>
       <li><code>breakpoint-next()</code></li>
-      <li><code>get-breakpoint-from-width()</code></li>
+      <li><code>get-font-size()</code></li>
       <li><code>make-container()</code></li>
       <li><code>make-col()</code></li>
       <li><code>make-col-offset()</code></li>
@@ -439,7 +504,7 @@ toc: true
   </details>
 
 - <details class="mb-short">
-    <summary><span class="badge text-bg-success">New</span> keys in <code>$utilities</code> map:</summary>
+    <summary><span class="badge text-bg-success">New</span> Keys in <code>$utilities</code> map:</summary>
     <ul>
       <li><code>border-bottom-ouds</code></li>
       <li><code>border-end-ouds</code></li>
@@ -450,6 +515,8 @@ toc: true
       <li><code>border-width-ouds</code></li>
       <li><code>column-gap-ouds</code></li>
       <li><code>column-gap-scaled-ouds</code></li>
+      <li><code>font-size-ouds</code></li>
+      <li><code>font-weight-ouds</code></li>
       <li><code>gap-ouds</code></li>
       <li><code>gap-scaled-ouds</code></li>
       <li><code>margin-bottom-ouds</code></li>
@@ -509,23 +576,83 @@ toc: true
     <summary><span class="badge text-bg-success">New</span> CSS variable:</summary>
     <ul>
       <li><code>--bs-container-margin-x</code></li>
-    </ul>
-  </details>
-
-- <details class="mb-short">
-    <summary><span class="badge text-bg-danger">Breaking</span> CSS variables only available when <code>$enable-bootstrap-compatibility</code> is on:</summary>
-    <ul>
-      <li><code>--bs-border-radius</code></li>
-      <li><code>--bs-border-radius-2xl</code></li>
-      <li><code>--bs-border-radius-lg</code></li>
-      <li><code>--bs-border-radius-pill</code></li>
-      <li><code>--bs-border-radius-sm</code></li>
-      <li><code>--bs-border-radius-xl</code></li>
-      <li><code>--bs-border-radius-xxl</code></li>
-      <li><code>--bs-box-shadow</code></li>
-      <li><code>--bs-box-shadow-inset</code></li>
-      <li><code>--bs-box-shadow-lg</code></li>
-      <li><code>--bs-box-shadow-sm</code></li>
+      <li><code>--bs-body-letter-spacing</code></li>
+      <li><code>--bs-font-size-display-large</code></li>
+      <li><code>--bs-font-size-display-medium</code></li>
+      <li><code>--bs-font-size-display-small</code></li>
+      <li><code>--bs-font-size-heading-xlarge</code></li>
+      <li><code>--bs-font-size-heading-large</code></li>
+      <li><code>--bs-font-size-heading-medium</code></li>
+      <li><code>--bs-font-size-heading-small</code></li>
+      <li><code>--bs-font-size-body-large</code></li>
+      <li><code>--bs-font-size-body-medium</code></li>
+      <li><code>--bs-font-size-body-small</code></li>
+      <li><code>--bs-font-size-label-xlarge</code></li>
+      <li><code>--bs-font-size-label-large</code></li>
+      <li><code>--bs-font-size-label-medium</code></li>
+      <li><code>--bs-font-size-label-small</code></li>
+      <li><code>--bs-font-size-code-medium</code></li>
+      <li><code>--bs-font-line-height-display-large</code></li>
+      <li><code>--bs-font-line-height-display-medium</code></li>
+      <li><code>--bs-font-line-height-display-small</code></li>
+      <li><code>--bs-font-line-height-heading-xlarge</code></li>
+      <li><code>--bs-font-line-height-heading-large</code></li>
+      <li><code>--bs-font-line-height-heading-medium</code></li>
+      <li><code>--bs-font-line-height-heading-small</code></li>
+      <li><code>--bs-font-line-height-body-large</code></li>
+      <li><code>--bs-font-line-height-body-medium</code></li>
+      <li><code>--bs-font-line-height-body-small</code></li>
+      <li><code>--bs-font-line-height-label-xlarge</code></li>
+      <li><code>--bs-font-line-height-label-large</code></li>
+      <li><code>--bs-font-line-height-label-medium</code></li>
+      <li><code>--bs-font-line-height-label-small</code></li>
+      <li><code>--bs-font-line-height-code-medium</code></li>
+      <li><code>--bs-font-letter-spacing-display-large</code></li>
+      <li><code>--bs-font-letter-spacing-display-medium</code></li>
+      <li><code>--bs-font-letter-spacing-display-small</code></li>
+      <li><code>--bs-font-letter-spacing-heading-xlarge</code></li>
+      <li><code>--bs-font-letter-spacing-heading-large</code></li>
+      <li><code>--bs-font-letter-spacing-heading-medium</code></li>
+      <li><code>--bs-font-letter-spacing-heading-small</code></li>
+      <li><code>--bs-font-letter-spacing-body-large</code></li>
+      <li><code>--bs-font-letter-spacing-body-medium</code></li>
+      <li><code>--bs-font-letter-spacing-body-small</code></li>
+      <li><code>--bs-font-letter-spacing-label-xlarge</code></li>
+      <li><code>--bs-font-letter-spacing-label-large</code></li>
+      <li><code>--bs-font-letter-spacing-label-medium</code></li>
+      <li><code>--bs-font-letter-spacing-label-small</code></li>
+      <li><code>--bs-font-letter-spacing-code-medium</code></li>
+      <li><code>--bs-font-max-width-display-large</code></li>
+      <li><code>--bs-font-max-width-display-medium</code></li>
+      <li><code>--bs-font-max-width-display-small</code></li>
+      <li><code>--bs-font-max-width-heading-xlarge</code></li>
+      <li><code>--bs-font-max-width-heading-large</code></li>
+      <li><code>--bs-font-max-width-heading-medium</code></li>
+      <li><code>--bs-font-max-width-heading-small</code></li>
+      <li><code>--bs-font-max-width-body-large</code></li>
+      <li><code>--bs-font-max-width-body-medium</code></li>
+      <li><code>--bs-font-max-width-body-small</code></li>
+      <li><code>--bs-icon-short-with-heading-xlarge</code></li>
+      <li><code>--bs-icon-medium-with-heading-xlarge</code></li>
+      <li><code>--bs-icon-tall-with-heading-xlarge</code></li>
+      <li><code>--bs-icon-short-with-heading-large</code></li>
+      <li><code>--bs-icon-medium-with-heading-large</code></li>
+      <li><code>--bs-icon-tall-with-heading-large</code></li>
+      <li><code>--bs-icon-short-with-heading-medium</code></li>
+      <li><code>--bs-icon-medium-with-heading-medium</code></li>
+      <li><code>--bs-icon-tall-with-heading-medium</code></li>
+      <li><code>--bs-icon-short-with-heading-small</code></li>
+      <li><code>--bs-icon-medium-with-heading-small</code></li>
+      <li><code>--bs-icon-tall-with-heading-small</code></li>
+      <li><code>--bs-icon-short-with-body-large</code></li>
+      <li><code>--bs-icon-medium-with-body-large</code></li>
+      <li><code>--bs-icon-tall-with-body-large</code></li>
+      <li><code>--bs-icon-short-with-body-medium</code></li>
+      <li><code>--bs-icon-medium-with-body-medium</code></li>
+      <li><code>--bs-icon-tall-with-body-medium</code></li>
+      <li><code>--bs-icon-short-with-body-small</code></li>
+      <li><code>--bs-icon-medium-with-body-small</code></li>
+      <li><code>--bs-icon-tall-with-body-small</code></li>
       <li><code>--bs-space-scaled-medium</code></li>
       <li><code>--bs-space-scaled-none</code></li>
       <li><code>--bs-space-scaled-short</code></li>
@@ -539,48 +666,10 @@ toc: true
     </ul>
   </details>
 
-- <details class="mb-short">
-    <summary><span class="badge text-bg-danger">Breaking</span> keys in <code>$utilities</code> map only available when <code>$enable-bootstrap-compatibility</code> is on:</summary>
-    <ul>
-      <li><code>border</code></li>
-      <li><code>border-bottom</code></li>
-      <li><code>border-end</code></li>
-      <li><code>border-opacity</code></li>
-      <li><code>border-start</code></li>
-      <li><code>border-top</code></li>
-      <li><code>border-width</code></li>
-      <li><code>column-gap</code></li>
-      <li><code>gap</code></li>
-      <li><code>margin-bottom</code></li>
-      <li><code>margin-end</code></li>
-      <li><code>margin</code></li>
-      <li><code>margin-start</code></li>
-      <li><code>margin-top</code></li>
-      <li><code>margin-x</code></li>
-      <li><code>margin-y</code></li>
-      <li><code>negative-margin-bottom</code></li>
-      <li><code>negative-margin-end</code></li>
-      <li><code>negative-margin</code></li>
-      <li><code>negative-margin-start</code></li>
-      <li><code>negative-margin-top</code></li>
-      <li><code>negative-margin-x</code></li>
-      <li><code>negative-margin-y</code></li>
-      <li><code>padding-bottom</code></li>
-      <li><code>padding-end</code></li>
-      <li><code>padding</code></li>
-      <li><code>padding-start</code></li>
-      <li><code>padding-top</code></li>
-      <li><code>padding-x</code></li>
-      <li><code>padding-y</code></li>
-      <li><code>rounded</code></li>
-      <li><code>rounded-bottom</code></li>
-      <li><code>rounded-end</code></li>
-      <li><code>rounded-start</code></li>
-      <li><code>rounded-top</code></li>
-      <li><code>row-gap</code></li>
-      <li><code>shadow</code></li>
-    </ul>
-  </details>
+### Sass mixins
+
+- <span class="badge text-bg-success">New</span> The mixin `get-font-size({font-size-ref})` has been added, where `font-size-ref` is one of:  `"code-small"`,  `"code-medium"`,  `"label-small"`,  `"label-medium"`,  `"label-large"`,  `"label-xlarge"`,  `"body-small"`,  `"body-medium"`,  `"body-large"`,  `"heading-small"`,  `"heading-medium"`,  `"heading-large"`,  `"heading-xlarge"`,  `"display-small"`,  `"display-medium"`,  `"display-large"`. If you have/need any `font-size` in one of your SCSS classes, please consider using this mixin instead. See [Typography Sass mixins]({{< docsref "/content/typography/#sass-mixins" >}}) for more details.
+
 
 ## v0.0.3
 
@@ -635,14 +724,14 @@ From now on, by default, OUDS Web won't embed Bootstrap elements (like helpers,
   </details>
 
 - <details class="mb-short">
-    <summary><span class="badge text-bg-success">New</span> keys in <code>$utilities</code> map:</summary>
+    <summary><span class="badge text-bg-success">New</span> Keys in <code>$utilities</code> map:</summary>
     <ul>
       <li><code>opacity-ouds</code></li>
     </ul>
   </details>
 
 - <details class="mb-short">
-    <summary><span class="badge text-bg-danger">Breaking</span> keys in <code>$utilities</code> map only available when <code>$enable-bootstrap-compatibility</code> is on:</summary>
+    <summary><span class="badge text-bg-danger">Breaking</span> Keys in <code>$utilities</code> map only available when <code>$enable-bootstrap-compatibility</code> is on:</summary>
     <ul>
       <li><code>opacity</code></li>
     </ul>
diff --git a/site/content/docs/0.0/utilities/sizing.md b/site/content/docs/0.0/utilities/sizing.md
index 008306aa83..28557ad4af 100644
--- a/site/content/docs/0.0/utilities/sizing.md
+++ b/site/content/docs/0.0/utilities/sizing.md
@@ -44,6 +44,14 @@ You can also use `max-width: 100%;` and `max-height: 100%;` utilities as needed.
 </div>
 {{< /example >}}
 
+You can also use in some cases (mainly [font references]({{< docsref "/content/typography" >}})) `max-width: none` utility as needed.
+
+{{< example class="bd-example-flex" >}}
+<div style="width: 50%; height: 100px;">
+  <div class="mw-none" style="width: 200%;">Max-width none</div>
+</div>
+{{< /example >}}
+
 ## Relative to the viewport
 
 You can also use utilities to set the width and height relative to the viewport.
diff --git a/site/content/docs/0.0/utilities/text.md b/site/content/docs/0.0/utilities/text.md
index bbd1e66ef2..84ce8425a4 100644
--- a/site/content/docs/0.0/utilities/text.md
+++ b/site/content/docs/0.0/utilities/text.md
@@ -8,4 +8,287 @@ aliases:
 toc: true
 ---
 
-{{< callout-soon "page" >}}
+## Text alignment
+
+Easily realign text to components with text alignment classes. For start, end, and center alignment, responsive classes are available that use the same viewport width breakpoints as the grid system.
+
+{{< callout info >}}
+We recommend to avoid using center and end alignment but in very specific cases. However, please note that you may use `.ms-{breakpoint}-auto` (respectively `.mx-{breakpoint}-auto`) in addition of `.text-{breakpoint}-end` (respectively `.text-{breakpoint}-center`) in these cases.
+{{< /callout >}}
+
+{{< example >}}
+<p class="text-start">Start aligned text on all viewport sizes.</p>
+<p class="text-center mx-auto">Center aligned text on all viewport sizes.</p>
+<p class="text-end ms-auto">End aligned text on all viewport sizes.</p>
+
+<p class="text-xs-end ms-xs-auto">End aligned text on viewports sized XS (x-small) or wider.</p>
+<p class="text-sm-end ms-sm-auto">End aligned text on viewports sized SM (small) or wider.</p>
+<p class="text-md-end ms-md-auto">End aligned text on viewports sized MD (medium) or wider.</p>
+<p class="text-lg-end ms-lg-auto">End aligned text on viewports sized LG (large) or wider.</p>
+<p class="text-xl-end ms-xl-auto">End aligned text on viewports sized XL (x-large) or wider.</p>
+<p class="text-2xl-end ms-2xl-auto">End aligned text on viewports sized 2XL (2x-large) or wider.</p>
+<p class="text-3xl-end ms-3xl-auto">End aligned text on viewports sized 3XL (3x-large) or wider.</p>
+{{< /example >}}
+
+{{< callout info >}}
+Note that we don't provide utility classes for justified text. While, aesthetically, justified text might look more appealing, it does make word-spacing more random and therefore harder to read.
+{{< /callout >}}
+
+## Text wrapping and overflow
+
+Wrap text with a `.text-wrap` class.
+
+{{< example >}}
+<div class="badge text-bg-primary text-wrap" style="width: 6rem;">
+  This text should wrap.
+</div>
+{{< /example >}}
+
+Prevent text from wrapping with a `.text-nowrap` class.
+
+{{< example >}}
+<div class="text-nowrap bg-body-secondary border border-dark" style="width: 8rem;">
+  This text should overflow the parent.
+</div>
+{{< /example >}}
+
+## Word break
+
+Prevent long strings of text from breaking your components' layout by using `.text-break` to set `word-wrap: break-word` and `word-break: break-word`. We use `word-wrap` instead of the more common `overflow-wrap` for wider browser support, and add the deprecated `word-break: break-word` to avoid issues with flex containers.
+
+{{< example >}}
+<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>
+{{< /example >}}
+
+{{< callout warning >}}
+Note that [breaking words isn't possible in Arabic](https://rtlstyling.com/posts/rtl-styling#3.-line-break), which is the most used RTL language. Therefore `.text-break` is removed from our RTL compiled CSS.
+{{< /callout >}}
+
+## Text transform
+
+Transform text in components with our text capitalization classes: `text-lowercase`, `text-uppercase` or `text-capitalize`.
+
+{{< example >}}
+<p class="text-lowercase">Lowercased text.</p>
+<p class="text-uppercase">Uppercased text.</p>
+<p class="text-capitalize">CapiTaliZed text.</p>
+{{< /example >}}
+
+Note how `.text-capitalize` only changes the first letter of each word, leaving the case of any other letters unaffected.
+
+## Font size
+
+Quickly change the `font-size` of text. Sizing for these utilities matches our predefined typography placeholders. Don't forget to add one of our [`font-weight`](#font-weight) utility when needed.
+
+These classes change the `font-size` but also the `line-height`, the `letter-spacing` and the `max-width`. If you want to get rid of the `max-width`, please make sure to use our `.mw-none` [width utility]({{< docsref "/utilities/sizing" >}}).
+
+<details class="mb-medium">
+  <summary>See the <code>font-size</code> associated to classes</summary>
+
+{{< bs-table >}}
+| Font reference | Values for `xl` and upper | Values from `md` to `lg` | Values from `2xs` to `sm` |
+| --- | --- | --- | --- |
+| Display large (`.fs-dl`) | `4.5rem` (72px) | `4rem` (64px) | `2.5rem` (40px) |
+| Display medium (`.fs-dm`) | `3.5rem` (56px) | `3rem` (48px) | `2.25rem` (36px) |
+| Display small (`.fs-ds`) | `3rem` (48px) | `2.5rem` (40px) | `2rem` (32px) |
+| Heading xlarge (`.fs-hxl`) | `2.5rem` (40px) | `2.25rem` (36px) | `1.75rem` (28px) |
+| Heading large (`.fs-hl`) | `2rem` (32px) | `1.75rem` (28px) | `1.5rem` (24px) |
+| Heading medium (`.fs-hm`) | `1.75rem` (28px) | `1.5rem` (24px) | `1.25rem` (20px) |
+| Heading small (`.fs-hs`) | `1.5rem` (24px) | `1.25rem` (20px) | `1.125rem` (18px) |
+| Body large (`.fs-bl`) | `1.125rem` (18px) | `1rem` (16px) | `1rem` (16px) |
+| Body medium (`.fs-bm`) | `1rem` (16px) | `.875rem` (14px) | `.875rem` (14px) |
+| Body small (`.fs-bs`) | `.875rem` (14px) | `.75rem` (12px) | `.75rem` (12px) |
+| Code medium (`.fs-cm`) | `.875rem` (14px) | `.875rem` (14px) | `.875rem` (14px) |
+| Code small (`.fs-cs`) | `.75rem` (12px) | `.75rem` (12px) | `.75rem` (12px) |
+{{< /bs-table >}}
+
+</details>
+
+<details class="mb-medium">
+  <summary>See more details about the <code>font-size</code> classes</summary>
+
+{{< bs-table >}}
+| Font reference | Values for `xl` and upper | Values from `md` to `lg` | Values from `2xs` to `sm` |
+| --- | --- | --- | --- |
+| Display large (`.fs-dl`) | <ul class="mb-none ps-medium"><li><code class="text-body">font-size</code>: <b>4.5rem</b></li><li><code>line-height</code>: 1.1111</li><li><code>letter-spacing</code>: -0.0675rem</li><li><code>max-width</code>: 65rem</li></ul> | <ul class="mb-none ps-medium"><li><code class="text-body">font-size</code>: <b>4rem</b></li><li><code>line-height</code>: 1.125</li><li><code>letter-spacing</code>: -0.06rem</li><li><code>max-width</code>: 55rem</li></ul> | <ul class="mb-none ps-medium"><li><code class="text-body">font-size</code>: <b>2.5rem</b></li><li><code>line-height</code>: 1.2</li><li><code>letter-spacing</code>: -0.025rem</li><li><code>max-width</code>: 55rem</li></ul> |
+| Display medium (`.fs-dm`) | <ul class="mb-none ps-medium"><li><code class="text-body">font-size</code>: <b>3.5rem</b></li><li><code>line-height</code>: 1.1429</li><li><code>letter-spacing</code>: -0.04375rem</li><li><code>max-width</code>: 65rem</li></ul> | <ul class="mb-none ps-medium"><li><code class="text-body">font-size</code>: <b>3rem</b></li><li><code>line-height</code>: 1.1667</li><li><code>letter-spacing</code>: -0.0375rem</li><li><code>max-width</code>: 55rem</li></ul> | <ul class="mb-none ps-medium"><li><code class="text-body">font-size</code>: <b>2.25rem</b></li><li><code>line-height</code>: 1.2222</li><li><code>letter-spacing</code>: -0.0225rem</li><li><code>max-width</code>: 55rem</li></ul> |
+| Display small (`.fs-ds`) | <ul class="mb-none ps-medium"><li><code class="text-body">font-size</code>: <b>3rem</b></li><li><code>line-height</code>: 1.1667</li><li><code>letter-spacing</code>: -0.0375rem</li><li><code>max-width</code>: 65rem</li></ul> | <ul class="mb-none ps-medium"><li><code class="text-body">font-size</code>: <b>2.5rem</b></li><li><code>line-height</code>: 1.2</li><li><code>letter-spacing</code>: -0.025rem</li><li><code>max-width</code>: 55rem</li></ul> | <ul class="mb-none ps-medium"><li><code class="text-body">font-size</code>: <b>2rem</b></li><li><code>line-height</code>: 1.25</li><li><code>letter-spacing</code>: -0.02rem</li><li><code>max-width</code>: 55rem</li></ul> |
+| Heading xlarge (`.fs-hxl`) | <ul class="mb-none ps-medium"><li><code class="text-body">font-size</code>: <b>2.5rem</b></li><li><code>line-height</code>: 1.2</li><li><code>letter-spacing</code>: -0.025rem</li><li><code>max-width</code>: 65rem</li></ul> | <ul class="mb-none ps-medium"><li><code class="text-body">font-size</code>: <b>2.25rem</b></li><li><code>line-height</code>: 1.2222</li><li><code>letter-spacing</code>: -.0225rem</li><li><code>max-width</code>: 55rem</li></ul> | <ul class="mb-none ps-medium"><li><code class="text-body">font-size</code>: <b>1.75rem</b></li><li><code>line-height</code>: 1.2857</li><li><code>letter-spacing</code>: -0.0175rem</li><li><code>max-width</code>: 55rem</li></ul> |
+| Heading large (`.fs-hl`) | <ul class="mb-none ps-medium"><li><code class="text-body">font-size</code>: <b>2rem</b></li><li><code>line-height</code>: 1.25</li><li><code>letter-spacing</code>: -0.02rem</li><li><code>max-width</code>: 65rem</li></ul> | <ul class="mb-none ps-medium"><li><code class="text-body">font-size</code>: <b>1.75rem</b></li><li><code>line-height</code>: 1.2857</li><li><code>letter-spacing</code>: -0.0175rem</li><li><code>max-width</code>: 55rem</li></ul> | <ul class="mb-none ps-medium"><li><code class="text-body">font-size</code>: <b>1.5rem</b></li><li><code>line-height</code>: 1.3333</li><li><code>letter-spacing</code>: -0.0075rem</li><li><code>max-width</code>: 55rem</li></ul> |
+| Heading medium (`.fs-hm`) | <ul class="mb-none ps-medium"><li><code class="text-body">font-size</code>: <b>1.75rem</b></li><li><code>line-height</code>: 1.2857</li><li><code>letter-spacing</code>: -0.0175rem</li><li><code>max-width</code>: 65rem</li></ul> | <ul class="mb-none ps-medium"><li><code class="text-body">font-size</code>: <b>1.5rem</b></li><li><code>line-height</code>: 1.3333</li><li><code>letter-spacing</code>: -0.0075rem</li><li><code>max-width</code>: 55rem</li></ul> | <ul class="mb-none ps-medium"><li><code class="text-body">font-size</code>: <b>1.25rem</b></li><li><code>line-height</code>: 1.4</li><li><code>letter-spacing</code>: 0</li><li><code>max-width</code>: 55rem</li></ul> |
+| Heading small (`.fs-hs`) | <ul class="mb-none ps-medium"><li><code class="text-body">font-size</code>: <b>1.5rem</b></li><li><code>line-height</code>: 1.3333</li><li><code>letter-spacing</code>: -0.0075rem</li><li><code>max-width</code>: 45rem</li></ul> | <ul class="mb-none ps-medium"><li><code class="text-body">font-size</code>: <b>1.25rem</b></li><li><code>line-height</code>: 1.4</li><li><code>letter-spacing</code>: 0</li><li><code>max-width</code>: 40rem</li></ul> | <ul class="mb-none ps-medium"><li><code class="text-body">font-size</code>: <b>1.125rem</b></li><li><code>line-height</code>: 1.3333</li><li><code>letter-spacing</code>: 0.01125rem</li><li><code>max-width</code>: 40rem</li></ul> |
+| Body large (`.fs-bl`) | <ul class="mb-none ps-medium"><li><code class="text-body">font-size</code>: <b>1.125rem</b></li><li><code>line-height</code>: 1.3333</li><li><code>letter-spacing</code>: 0.01125rem</li><li><code>max-width</code>: 45rem</li></ul> | <ul class="mb-none ps-medium"><li><code class="text-body">font-size</code>: <b>1rem</b></li><li><code>line-height</code>: 1.5</li><li><code>letter-spacing</code>: 0.0125rem</li><li><code>max-width</code>: 40rem</li></ul> | <ul class="mb-none ps-medium"><li><code class="text-body">font-size</code>: <b>1rem</b></li><li><code>line-height</code>: 1.5</li><li><code>letter-spacing</code>: 0.0125rem</li><li><code>max-width</code>: 40rem</li></ul> |
+| Body medium (`.fs-bm`) | <ul class="mb-none ps-medium"><li><code class="text-body">font-size</code>: <b>1rem</b></li><li><code>line-height</code>: 1.5</li><li><code>letter-spacing</code>: 0.0125rem</li><li><code>max-width</code>: 45rem</li></ul> | <ul class="mb-none ps-medium"><li><code class="text-body">font-size</code>: <b>.875rem</b></li><li><code>line-height</code>: 1.4286</li><li><code>letter-spacing</code>: 0.010625rem</li><li><code>max-width</code>: 40rem</li></ul> | <ul class="mb-none ps-medium"><li><code class="text-body">font-size</code>: <b>.875rem</b></li><li><code>line-height</code>: 1.4286</li><li><code>letter-spacing</code>: 0.010625rem</li><li><code>max-width</code>: 40rem</li></ul> |
+| Body small (`.fs-bs`) | <ul class="mb-none ps-medium"><li><code class="text-body">font-size</code>: <b>.875rem</b></li><li><code>line-height</code>: 1.4286</li><li><code>letter-spacing</code>: 0.010625rem</li><li><code>max-width</code>: 45rem</li></ul> | <ul class="mb-none ps-medium"><li><code class="text-body">font-size</code>: <b>.75rem</b></li><li><code>line-height</code>: 1.3333</li><li><code>letter-spacing</code>: 0.01125rem</li><li><code>max-width</code>: 40rem</li></ul> | <ul class="mb-none ps-medium"><li><code class="text-body">font-size</code>: <b>.75rem</b></li><li><code>line-height</code>: 1.3333</li><li><code>letter-spacing</code>: 0.01125rem</li><li><code>max-width</code>: 40rem</li></ul> |
+| Code medium (`.fs-cm`) | <ul class="mb-none ps-medium"><li><code class="text-body">font-size</code>: <b>0.875rem</b></li><li><code>line-height</code>: 1.4286</li><li><code>letter-spacing</code>: 0.010625rem</li></ul> | <ul class="mb-none ps-medium"><li><code class="text-body">font-size</code>: <b>0.875rem</b></li><li><code>line-height</code>: 1.4286</li><li><code>letter-spacing</code>: 0.010625rem</li></ul> | <ul class="mb-none ps-medium"><li><code class="text-body">font-size</code>: <b>0.875rem</b></li><li><code>line-height</code>: 1.4286</li><li><code>letter-spacing</code>: 0.010625rem</li></ul> |
+| Code small (`.fs-cs`) | <ul class="mb-none ps-medium"><li><code class="text-body">font-size</code>: <b>0.75rem</b></li><li><code>line-height</code>: 1.3333</li><li><code>letter-spacing</code>: 0.01125rem</li></ul> | <ul class="mb-none ps-medium"><li><code class="text-body">font-size</code>: <b>0.75rem</b></li><li><code>line-height</code>: 1.3333</li><li><code>letter-spacing</code>: 0.01125rem</li></ul> | <ul class="mb-none ps-medium"><li><code class="text-body">font-size</code>: <b>0.75rem</b></li><li><code>line-height</code>: 1.3333</li><li><code>letter-spacing</code>: 0.01125rem</li></ul> |
+{{< /bs-table >}}
+
+</details>
+
+{{< example >}}
+<p class="fs-dl">.fs-dl text</p>
+<p class="fs-dm">.fs-dm text</p>
+<p class="fs-ds">.fs-ds text</p>
+<p class="fs-hxl">.fs-hxl text</p>
+<p class="fs-hl">.fs-hl text</p>
+<p class="fs-hm">.fs-hm text</p>
+<p class="fs-hs">.fs-hs text</p>
+<p class="fs-bl">.fs-bl text</p>
+<p class="fs-bm">.fs-bm text</p>
+<p class="fs-bs">.fs-bs text</p>
+<p class="fs-cm font-monospace">.fs-cm.font-monospace text</p>
+<p class="fs-cs font-monospace">.fs-cs.font-monospace text</p>
+{{< /example >}}
+
+Customize your available `font-size`s by modifying the `$ouds-font-sizes` Sass map.
+
+You can easily add an icon with your font reference using [our icon helper]({{< docsref "/helpers/icon" >}}).
+
+{{< bootstrap-compatibility >}}
+
+Quickly change the `font-size` of text. While our heading classes (e.g., `.h1`–`.h6`) apply `font-size`, `font-weight`, and `line-height`, these utilities _only_ apply `font-size`. Sizing for these utilities matches HTML's heading elements, so as the number increases, their size decreases.
+
+{{< example class="lh-1" >}}
+<p class="fs-1">.fs-1 text</p>
+<p class="fs-2">.fs-2 text</p>
+<p class="fs-3">.fs-3 text</p>
+<p class="fs-4">.fs-4 text</p>
+<p class="fs-5">.fs-5 text</p>
+<p class="fs-6">.fs-6 text</p>
+{{< /example >}}
+
+Customize your available `font-size`s by modifying the `$font-sizes` Sass map.
+
+{{< /bootstrap-compatibility >}}
+
+## Font weight
+
+Quickly change the `font-weight` of text with these utilities. `font-weight` utilities are abbreviated as `.fw-*`.
+
+{{< example >}}
+<p class="fw-bold">Bold text.</p>
+<p class="fw-normal">Normal weight text.</p>
+{{< /example >}}
+
+{{< bootstrap-compatibility >}}
+
+{{< example >}}
+<p class="fw-bold">Bold text.</p>
+<p class="fw-bolder">Bolder weight text (relative to the parent element).</p>
+<p class="fw-semibold">Semibold weight text.</p>
+<p class="fw-medium">Medium weight text.</p>
+<p class="fw-normal">Normal weight text.</p>
+<p class="fw-light">Light weight text.</p>
+<p class="fw-lighter">Lighter weight text (relative to the parent element).</p>
+{{< /example >}}
+
+{{< /bootstrap-compatibility >}}
+
+## Line height
+
+Change the line height with `.lh-*` utilities. You need to enable Bootstrap compatibility to use these utilities since most of our font embed a proper line-height.
+
+{{< bootstrap-compatibility >}}
+
+{{< example >}}
+<p class="lh-1">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.</p>
+<p class="lh-sm">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.</p>
+<p class="lh-base">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.</p>
+<p class="lh-lg">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.</p>
+{{< /example >}}
+
+{{< /bootstrap-compatibility >}}
+
+## Monospace
+
+Change a selection to our monospace font stack with `.font-monospace`.
+
+{{< example >}}
+<p class="font-monospace">This is in monospace</p>
+{{< /example >}}
+
+<!--## Reset color
+
+Reset a text or link's color with `.text-reset`, so that it inherits the color from its parent.
+
+{{< example >}}
+<p class="text-body-secondary">
+  Secondary body text with a <a href="#" class="text-reset">reset link</a>.
+</p>
+{{< /example >}}-->
+
+## Text decoration
+
+Decorate text in components with text decoration classes.
+
+{{< example >}}
+<p class="text-decoration-underline">This text has a line underneath it.</p>
+<p class="text-decoration-line-through">This text has a line going through it.</p>
+<a href="#" class="text-decoration-none">This link has its text decoration removed</a>
+{{< /example >}}
+
+## CSS
+
+### Variables
+
+{{< scss-docs name="root-font-variables-ouds" file="scss/_root.scss" >}}
+
+### Sass tokens
+
+#### Raw tokens
+
+Font raw tokens as Sass variables. **Not to be used as-is**.
+
+{{< scss-docs name="ouds-raw-font" file="scss/tokens/_raw.scss" >}}
+
+#### Semantic tokens
+
+Font semantic tokens are defined as Sass variables.
+
+{{< scss-docs name="ouds-semantic-font" file="scss/tokens/_semantic.scss" >}}
+
+#### Composite tokens
+
+Font composite tokens are defined as Sass variables.
+
+{{< scss-docs name="ouds-composite-font" file="scss/tokens/_composite.scss" >}}
+
+### Sass variables
+
+Default type and font related Sass variables:
+
+{{< scss-docs name="font-variables" file="scss/_variables.scss" >}}
+
+### Sass maps
+
+Font-size utilities are generated from these maps, in combination with our utilities API.
+
+{{< scss-docs name="ouds-maps-font" file="scss/_maps.scss" >}}
+
+{{< bootstrap-compatibility false >}}
+
+{{< scss-docs name="font-sizes" file="scss/_variables.scss" >}}
+
+<!--{{< scss-docs name="theme-text-map" file="scss/_maps.scss" >}}-->
+
+{{< /bootstrap-compatibility >}}
+
+### Sass mixins
+
+We provide a dedicated mixin for font reference called `get-font-size($font-size-reference)`.
+
+{{< scss-docs name="ouds-mixin-font" file="scss/mixins/_fonts.scss" >}}
+
+Whenever you need a font reference inside a custom component or for whatever reason, please follow the same process as us, so you don't miss any information about a font reference.
+
+{{< scss-docs name="ouds-font-implementation" file="scss/_reboot.scss" >}}
+
+
+### Sass utilities API
+
+Font and text utilities are declared in our utilities API in `scss/_utilities.scss`. [Learn how to use the utilities API.]({{< docsref "/utilities/api#using-the-api" >}})
+
+{{< scss-docs name="utils-text-ouds" file="scss/_utilities.scss" >}}
+
+{{< scss-docs name="utils-text" file="scss/_utilities.scss" >}}
diff --git a/site/data/examples.yml b/site/data/examples.yml
index b777dab722..cd25a173b0 100644
--- a/site/data/examples.yml
+++ b/site/data/examples.yml
@@ -40,6 +40,8 @@
 - category: Framework
   description: "Examples that focus on implementing uses of built-in components provided by OUDS Web."
   examples:
+    - name: Font
+      description: "Multiple examples of fonts to see them in action."
     - name: Grid
       description: "Multiple examples of grid layouts with all four tiers, nesting, and more."
     - name: Grid system
diff --git a/site/data/sidebar.yml b/site/data/sidebar.yml
index ddc9cccc1e..d77d6b30d4 100644
--- a/site/data/sidebar.yml
+++ b/site/data/sidebar.yml
@@ -66,9 +66,7 @@
   icon_color: body-color
   pages:
     - title: Reboot
-      draft: true
     - title: Typography
-      draft: true
     - title: Images
       draft: true
     - title: Tables
@@ -179,6 +177,7 @@
       draft: true
     - title: Focus ring
       draft: true
+    - title: Icon
     - title: Icon link
       draft: true
     - title: Position
@@ -214,7 +213,6 @@
     - title: Sizing
     - title: Spacing
     - title: Text
-      draft: true
     - title: Vertical align
     - title: Visibility
     - title: Z-index
diff --git a/site/layouts/_default/docs.html b/site/layouts/_default/docs.html
index ce65fc026d..e178d3c6ad 100644
--- a/site/layouts/_default/docs.html
+++ b/site/layouts/_default/docs.html
@@ -42,7 +42,7 @@ <h2 class="mb-none">
             <span class="d-none d-md-block h6 my-short ms-tall">On this page</span>
           </h2>
           <hr class="d-none d-md-block my-short ms-tall">
-          <div class="collapse bd-toc-collapse ms-md-shortest" id="tocContents">
+          <div class="collapse bd-toc-collapse ms-shorter" id="tocContents">
             {{ .TableOfContents }}
           </div>
         </div>
diff --git a/site/layouts/_default/single.html b/site/layouts/_default/single.html
index 7ae2b3cdc0..c1f934c157 100644
--- a/site/layouts/_default/single.html
+++ b/site/layouts/_default/single.html
@@ -5,7 +5,7 @@
   <main class="bd-content order-1" id="content">
     <div class="title-bar mb-short mb-md-none">
       <div class="container-fluid container-max-width">
-        <h1 class="display-1">{{ .Title | markdownify }}</h1>
+        <h1 class="display-large">{{ .Title | markdownify }}</h1>
       </div>
     </div>
     <div class="pb-tallest pb-md-short">
diff --git a/site/layouts/partials/docs-sidebar.html b/site/layouts/partials/docs-sidebar.html
index 7fbacb09b0..75ae6c14f4 100644
--- a/site/layouts/partials/docs-sidebar.html
+++ b/site/layouts/partials/docs-sidebar.html
@@ -18,7 +18,7 @@
     <li class="bd-links-group py-short">
       <strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
         {{- if $group.icon }}
-          <svg class="bi me-shortest"{{- if $group.icon_color }} style="color: var(--bs-{{ $group.icon_color }});"{{- end }} aria-hidden="true"><use xlink:href="#{{ $group.icon }}"></use></svg>
+          <svg class="bm-medium-icon me-shortest"{{- if $group.icon_color }} style="color: var(--bs-{{ $group.icon_color }});"{{- end }} aria-hidden="true"><use xlink:href="#{{ $group.icon }}"></use></svg>
         {{- end }}
         {{ $group.title }}
       </strong>
diff --git a/site/layouts/partials/home/customize.html b/site/layouts/partials/home/customize.html
index 65056e50ca..065bea6f13 100644
--- a/site/layouts/partials/home/customize.html
+++ b/site/layouts/partials/home/customize.html
@@ -31,7 +31,8 @@ <h3>Include all of OUDS Web's Sass</h3>
   <div class="col-lg-6">
     <h3>Include what you need</h3>
     <p>The easiest way to customize OUDS Web—include only the CSS you need.</p>
-{{ highlight (printf `// Functions first
+{{ highlight (printf `// Functions and config first
+@import "../node_modules/@ouds/web/scss/config";
 @import "../node_modules/@ouds/web/scss/functions";
 
 // Variable overrides second
diff --git a/site/layouts/partials/home/get-started.html b/site/layouts/partials/home/get-started.html
index 8323dd9b01..c649f4fe4a 100644
--- a/site/layouts/partials/home/get-started.html
+++ b/site/layouts/partials/home/get-started.html
@@ -3,10 +3,10 @@
     <svg class="bi fs-1"><use xlink:href="#code"></use></svg>
   </div>
   <h2 class="mb-tall lh-sm fw-semibold">Get started any way you&nbsp;want</h2>
-  <p class="lead fw-normal">
+  <p class="lead mx-md-auto fw-normal">
     Jump right into building with OUDS Web—use the CDN, install it via package manager, or download the source code.
   </p>
-  <p class="d-flex justify-content-md-start justify-content-md-center lead fw-normal">
+  <p class="d-flex justify-content-md-start justify-content-md-center lead mx-auto fw-normal">
     <a href="/docs/{{ .Site.Params.docs_version }}/getting-started/download/" class="icon-link icon-link-hover fw-semibold ps-md-tallest">
       Read installation docs
       <svg class="bi"><use xlink:href="#arrow-right"></use></svg>
diff --git a/site/layouts/partials/home/masthead.html b/site/layouts/partials/home/masthead.html
index 244ac0f85a..8b37b6d2e5 100644
--- a/site/layouts/partials/home/masthead.html
+++ b/site/layouts/partials/home/masthead.html
@@ -7,11 +7,11 @@
         <span class="text-body-secondary">Color mode support, expanded color palette, and more!</span>
       </p>
       -->
-      <h1 class="mb-tall display-1">Build fast, responsive sites with OUDS Web</h1>
-      <p class="lead mb-short">
+      <h1 class="mb-tall display-large">Build fast, responsive sites with OUDS Web</h1>
+      <p class="lead mx-auto mb-short">
         Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins.
       </p>
-      <p class="lead mb-tallest">
+      <p class="lead mx-auto mb-tallest">
         OUDS Web is a Bootstrap based, Orange branded accessible and ergonomic components library.
       </p>
       <div class="d-flex flex-column flex-lg-row align-items-md-stretch justify-content-md-center gap-tall mb-tallest">
@@ -23,7 +23,7 @@ <h1 class="mb-tall display-1">Build fast, responsive sites with OUDS Web</h1>
           Read the docs
         </a>
       </div>
-      <p class="text-body-secondary mb-none">
+      <p class="text-body-secondary mx-auto mb-none">
         Currently <strong>v{{ .Site.Params.current_version }}</strong>
         <span class="px-shortest">&middot;</span>
         <a href="/docs/{{ .Site.Params.docs_version }}/getting-started/download/" class="link-secondary">Download</a>
diff --git a/site/layouts/shortcodes/svg-docs.html b/site/layouts/shortcodes/svg-docs.html
index 4d7501c1d4..a7b9fc1bcb 100644
--- a/site/layouts/shortcodes/svg-docs.html
+++ b/site/layouts/shortcodes/svg-docs.html
@@ -33,7 +33,7 @@
   {{ $target = replace $target "(" "%28" }}
   {{ $target = replace $target ")" "%29" }}
 
-  <p class="text-end">
+  <p class="ms-auto text-end">
     <a class="btn btn-primary" href="data:image/svg+xml,{{ $target }}" download="{{ delimit $output "" }}">
       Download<span class="small ms-shortest">(SVG, {{div $size 1000}}ko)</span>
     </a>
diff --git a/site/static/docs/0.0/assets/fonts/solaris-icons.css b/site/static/docs/0.0/assets/fonts/solaris-icons.css
new file mode 100644
index 0000000000..e1188f0861
--- /dev/null
+++ b/site/static/docs/0.0/assets/fonts/solaris-icons.css
@@ -0,0 +1,27 @@
+/*!
+ * Solaris Icons
+ */
+
+@font-face {
+  font-family: solaris-icons;
+  src: url("../fonts/solaris-icons.woff2?6f20fa3dc5b85657bd097bf634024015") format("woff2");
+  font-display: block;
+}
+
+.si::before,
+[class^="si-"]::before,
+[class*="si-"]::before {
+  display: inline-block;
+  font-family: solaris-icons !important; /* stylelint-disable-line declaration-no-important,font-family-no-missing-generic-family-keyword */
+  font-size: 1em;
+  font-style: normal;
+  font-weight: 400 !important; /* stylelint-disable-line declaration-no-important */
+  font-variant: normal;
+  line-height: 1;
+  text-transform: none;
+  vertical-align: text-top;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.si-settings::before { content: "\f101"; }
diff --git a/site/static/docs/0.0/assets/fonts/solaris-icons.woff2 b/site/static/docs/0.0/assets/fonts/solaris-icons.woff2
new file mode 100644
index 0000000000..f3f4ea1cbe
Binary files /dev/null and b/site/static/docs/0.0/assets/fonts/solaris-icons.woff2 differ
diff --git a/site/static/docs/0.0/assets/img/examples/font.png b/site/static/docs/0.0/assets/img/examples/font.png
new file mode 100644
index 0000000000..0ccfd5674a
Binary files /dev/null and b/site/static/docs/0.0/assets/img/examples/font.png differ
diff --git a/site/static/docs/0.0/assets/img/examples/font@2x.png b/site/static/docs/0.0/assets/img/examples/font@2x.png
new file mode 100644
index 0000000000..95337d7110
Binary files /dev/null and b/site/static/docs/0.0/assets/img/examples/font@2x.png differ
diff --git a/site/static/docs/0.0/assets/img/ouds-web-sprite.svg b/site/static/docs/0.0/assets/img/ouds-web-sprite.svg
index e0af766e8f..d290d24ced 100644
--- a/site/static/docs/0.0/assets/img/ouds-web-sprite.svg
+++ b/site/static/docs/0.0/assets/img/ouds-web-sprite.svg
@@ -1,2 +1,5 @@
 <svg xmlns="http://www.w3.org/2000/svg">
+  <symbol id="vector" viewBox="0 0 46 48" fill="currentColor">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M45.9904 12.6121C45.9727 12.3798 45.8933 12.1551 45.7592 11.9578C45.6251 11.7604 45.4403 11.5965 45.2213 11.4804L23.7573 0.186037C23.5256 0.0641222 23.2634 0 22.9966 0C22.7299 0 22.4677 0.0641222 22.236 0.186037L0.772225 11.4804C0.538301 11.6045 0.343845 11.783 0.20832 11.9981C0.0727954 12.2133 0.000958303 12.4574 0 12.7061V35.2951C2.44038e-05 35.544 0.071468 35.7884 0.207087 36.0037C0.342705 36.219 0.537675 36.3973 0.772225 36.5207L22.2361 47.8153C22.4681 47.9364 22.7302 48 22.9968 48C23.2634 48 23.5254 47.9364 23.7574 47.8153L45.2213 36.5209C45.4558 36.3974 45.6508 36.2191 45.7864 36.0038C45.9221 35.7886 45.9935 35.5441 45.9935 35.2952C45.9588 35.181 46.0231 12.7124 45.9904 12.6121ZM22.9968 3.03787L41.3708 12.7062L30.1113 18.6309C26.5566 14.5196 19.4353 14.5213 15.8822 18.6309L4.62324 12.7062L22.9968 3.03787ZM29.1293 24.0005C29.1472 27.1344 26.2967 29.6711 22.9967 29.6477C19.6968 29.6709 16.8463 27.1346 16.8642 24.0005C16.838 20.9466 19.623 18.3303 22.9968 18.3534C26.3702 18.3302 29.1559 20.9467 29.1293 24.0005ZM21.4636 44.1567L3.06598 34.4755V15.139L14.3588 21.0814C12.3232 25.9841 15.9333 31.5789 21.4636 32.3535V44.1567ZM42.9275 34.4755L24.5299 44.1567V32.3536C30.0608 31.5789 33.67 25.9833 31.6347 21.0815L42.9275 15.1391V34.4755Z"/>
+  </symbol>
 </svg>