diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json
index 1505b2be6f..7a3b7c0256 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": "61.5 kB"
     },
     {
       "path": "./dist/css/ouds-web-bootstrap.min.css",
-      "maxSize": "58.0 kB"
+      "maxSize": "58.75 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.5 kB"
     },
     {
       "path": "./dist/css/ouds-web-reboot.min.css",
-      "maxSize": "4.5 kB"
+      "maxSize": "5.25 kB"
     },
     {
       "path": "./dist/css/ouds-web-utilities.css",
-      "maxSize": "20.75 kB"
+      "maxSize": "21.5 kB"
     },
     {
       "path": "./dist/css/ouds-web-utilities.min.css",
-      "maxSize": "19.75 kB"
+      "maxSize": "20.5 kB"
     },
     {
       "path": "./dist/css/ouds-web.css",
-      "maxSize": "54.75 kB"
+      "maxSize": "55.5 kB"
     },
     {
       "path": "./dist/css/ouds-web.min.css",
-      "maxSize": "51.5 kB"
+      "maxSize": "52.25 kB"
     },
     {
       "path": "./dist/js/ouds-web.bundle.js",
diff --git a/.cspell.json b/.cspell.json
index 1ed62dcfa0..53d8b86ece 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",
diff --git a/scss/_config.scss b/scss/_config.scss
new file mode 100644
index 0000000000..f625993503
--- /dev/null
+++ b/scss/_config.scss
@@ -0,0 +1,3 @@
+// Configuration file for OUDS Web
+
+$prefix: bs- !default;
diff --git a/scss/_maps.scss b/scss/_maps.scss
index 31e2fc3935..6b6bfb09aa 100644
--- a/scss/_maps.scss
+++ b/scss/_maps.scss
@@ -83,6 +83,37 @@ $ouds-elevations: (
 ) !default;
 // scss-docs-end ouds-maps-elevations
 
+// scss-docs-start ouds-maps-fonts
+$ouds-font-sizes: (
+  dl: "%display-large",
+  dm: "%display-medium",
+  ds: "%display-small",
+  hxl: "%heading-xlarge",
+  hl: "%heading-large",
+  hm: "%heading-medium",
+  hs: "%heading-small",
+  bl: "%body-large",
+  bm: "%body-medium",
+  bs: "%body-small",
+  lxl: "%label-xlarge",
+  ll: "%label-large",
+  lm: "%label-medium",
+  ls: "%label-small",
+  cm: "%code-medium",
+  cs: "%code-small"
+) !default;
+
+$ouds-font-weights: (
+  normal: $ouds-font-weight-web-default,
+  bold: $ouds-font-weight-web-strong
+) !default;
+
+$ouds-line-lengths: (
+  sm: 40ch,
+  md: 80ch
+) !default;
+// scss-docs-end ouds-maps-fonts
+
 // scss-docs-start ouds-maps-opacities
 $ouds-opacities: (
   "transparent": $ouds-opacity-transparent,
diff --git a/scss/_reboot.scss b/scss/_reboot.scss
index b1fdf59e4e..b58a84b096 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 maybe 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
@@ -134,7 +134,6 @@ hr {
 %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 +141,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,27 +148,32 @@ hr {
 
 h1 {
   @extend %heading;
-  @include font-size($h4-font-size);
-  line-height: $h4-line-height;
+  @extend %heading-xlarge; // OUDS mod: instead of `@include font-size($h1-font-size)`
+}
 
-  /* rtl:remove */
-  letter-spacing: $h4-spacing;
+h2 {
+  @extend %heading;
+  @extend %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;
+  @extend %heading-medium; // OUDS mod: instead of `@include font-size($h3-font-size)`
+}
 
-  /* rtl:remove */
-  letter-spacing: $h5-spacing;
+h4 {
+  @extend %heading;
+  @extend %heading-small; // OUDS mod: instead of `@include font-size($h4-font-size)`
+}
+
+h5 {
+  @extend %heading;
+  @extend %body-large; // OUDS mod: instead of `@include font-size($h5-font-size)`
 }
 
-h4,
-h5,
 h6 {
   @extend %heading;
+  @extend %body-medium; // OUDS mod: instead of `@include font-size($h6-font-size)`
 }
 
 
@@ -286,6 +289,13 @@ blockquote {
   margin: 0 0 1rem;
 }
 
+// OUDS mod: No italic
+em,
+cite {
+  font-style: normal; // OUDS mod: remove italic.
+}
+// End mod
+
 
 // Strong
 //
@@ -304,10 +314,6 @@ strong {
 
 small {
   @include font-size($small-font-size);
-  // OUDS mod
-  font-weight: $font-weight-normal;
-  line-height: $line-height-sm;
-  // End mod
 }
 
 
@@ -383,8 +389,7 @@ pre {
   margin-top: 0; // 1
   margin-bottom: 1rem; // 2
   overflow: auto; // 3
-  @include font-size($code-font-size);
-  line-height: $pre-line-height; // OUDS mod
+  @extend %code-small; // 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 +404,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;
 
@@ -460,13 +464,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
+  @extend %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 +501,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 +626,8 @@ legend {
   width: 100%;
   padding: 0;
   margin-bottom: $legend-margin-bottom;
-  @include font-size($legend-font-size);
+  @extend %body-large; // OUDS mod: instead of `@include font-size($legend-font-size)`
   font-weight: $legend-font-weight;
-  line-height: inherit;
 
   + * {
     clear: left; // 2
diff --git a/scss/_root.scss b/scss/_root.scss
index c4f23e8ff4..79ff31b5e8 100644
--- a/scss/_root.scss
+++ b/scss/_root.scss
@@ -63,6 +63,135 @@
   --#{$prefix}font-monospace: #{inspect($font-family-monospace)};
   --#{$prefix}gradient: #{$gradient};
 
+  // 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-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-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-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
+
   // Root and body
   // scss-docs-start root-body-variables
   @if $font-size-root != null {
@@ -72,6 +201,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};
   @if $body-text-align != null {
     --#{$prefix}body-text-align: #{$body-text-align};
   }
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..3e141c4c94 100644
--- a/scss/_type.scss
+++ b/scss/_type.scss
@@ -26,185 +26,41 @@
 }
 
 
-// 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);
+  @extend %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 {
+// OUDS mod: no @each
+// 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;
-  }
-
-  .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;
+    @extend %heading; // OUDS mod
+    @extend #{$font-size}; // OUDS mod: instead of `@include font-size($font-size)`
   }
 }
 
-@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);
-    line-height: $display-line-height;
-
-    /* rtl:remove */
-    letter-spacing: $display4-spacing;
-  }
-
-  h2 {
-    @include font-size($h2-font-size);
-    line-height: $h2-line-height;
+// .display-1 {
+//   @extend %heading;
+//   font-weight: $display-font-weight;
+//   @extend %display-large;
+// }
 
-    /* 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;
+// .display-2 {
+//   @extend %heading;
+//   font-weight: $display-font-weight;
+//   @extend %display-medium;
+// }
 
-    /* rtl:remove */
-    letter-spacing: $h5-spacing;
-  }
-
-  .lead {
-    @include font-size($lead-font-size);
-
-    /* rtl:remove */
-    letter-spacing: $lead-letter-spacing;
-  }
-}
+// .display-3 {
+//   @extend %heading;
+//   font-weight: $display-font-weight;
+//   @extend %display-small;
+// }
 // End mod
 
 
@@ -252,11 +108,7 @@ h2,
 // 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
+  @extend %body-large; // OUDS mod: instead of `@include font-size($blockquote-font-size)`
 
   > :last-child {
     margin-bottom: 0;
@@ -266,13 +118,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
+  @extend %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 7134069f08..7c45f17f70 100644
--- a/scss/_utilities.scss
+++ b/scss/_utilities.scss
@@ -882,7 +882,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": (
@@ -891,31 +892,18 @@ $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,
-      )
+      values: $line-heights // OUDS mod: use map instead of variables to ease the customization
     ),
     "text-align": (
       responsive: true,
@@ -951,6 +939,23 @@ $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
+    ),
+    "line-length-ouds": (
+      property: max-width,
+      class: ll,
+      values: $ouds-line-lengths
+    ),
+    // 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 7f223e8056..3b09233d34 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -444,10 +444,7 @@ $enable-bootstrap-compatibility:  false !default; // OUDS mod: used to enforce B
 $enable-dark-mode:            true !default;
 $color-mode-type:             data !default; // `data` or `media-query`
 
-// Prefix for :root CSS variables
-
-$variable-prefix:             bs- !default; // Deprecated in Bootstrap v5.2.0 for the shorter `$prefix`
-$prefix:                      $variable-prefix !default;
+// Prefix for :root CSS variables has been moved to `_config.scss`
 
 // Gradient
 //
@@ -717,52 +714,46 @@ $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;
+$font-family-monospace:       $ouds-font-family-monospace-stack !default;
 $font-family-base:            var(--#{$prefix}font-sans-serif) !default;
 $font-family-code:            var(--#{$prefix}font-monospace) !default;
 
 
 // OUDS mod
 //// Type scale & vertical rhythm completely revamped to match Orange Web Guidelines
-
+// TODO LM: Check for spacings and colors
 // $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-web-default !default;
+$font-weight-medium:          null !default;
+$font-weight-semibold:        null !default;
+$font-weight-bold:            $ouds-font-weight-web-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-sm:           var(--#{$prefix}font-letter-spacing-body-small) !default;
+$letter-spacing-lg:           var(--#{$prefix}font-letter-spacing-body-large) !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
@@ -775,56 +766,52 @@ $font-sizes: (
   6: $h6-font-size
 ) !default;
 // scss-docs-end font-sizes
-
+// TODO LM: Decide if we should have them or not
 // 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;
+$h2-spacing: var(--#{$prefix}font-letter-spacing-heading-large) !default;
+$h3-spacing: var(--#{$prefix}font-letter-spacing-heading-medium) !default;
+$h5-spacing: var(--#{$prefix}font-letter-spacing-body-large) !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;
+$line-heights: (
+  1: 1,
+  sm: 1.25,
+  base: 1.5,
+  lg: 2,
+) !default;
+$h5-line-height: var(--#{$prefix}font-line-height-body-large) !default;
 // scss-docs-end line-height
-// stylelint-enable function-disallowed-list
 
 // scss-docs-start headings-variables
 $headings-margin-bottom:      $spacer !default; // OUDS mod
 $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-web-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: (
+  1: "%display-large",
+  2: "%display-medium",
+  3: "%display-small"
+) !default;
+
+$display-font-family: null !default;
+$display-font-style:  null !default;
+$display-font-weight: $ouds-font-weight-web-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-web-body-default !default;
+// $lead-line-height:            $line-height-lg !default;
+// $lead-letter-spacing:         $letter-spacing-lg !default;
 
-$small-font-size:             .875rem !default;
+$small-font-size:             .875em !default;
 
 $sub-sup-font-size:           .75em !default;
 
@@ -835,11 +822,9 @@ $text-muted:                  var(--#{$prefix}secondary-color) !default; // Depr
 $initialism-font-size:        $small-font-size !default;
 
 $blockquote-margin-y:         $spacer !default;
-$blockquote-font-size:        $font-size-xlg !default;
+// $blockquote-font-size:        $font-size-lg !default;
 $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
+// $blockquote-footer-font-size: $small-font-size !default;
 
 $hr-margin-y:                 $spacer !default;
 $hr-color:                    inherit !default;
@@ -858,14 +843,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;
+// $legend-font-size:            $font-size-lg !default;
 $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 .1875em !default; // OUDS mod
 $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
@@ -993,7 +978,7 @@ $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-letter-spacing-lg:       calc(#{$letter-spacing-base} * 2) !default; // stylelint-disable-line function-disallowed-list
 
 $btn-border-width:            $input-btn-border-width !default;
 
@@ -1109,7 +1094,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
@@ -1121,7 +1106,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
@@ -1187,7 +1172,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
@@ -1541,15 +1526,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;
@@ -2097,12 +2082,6 @@ $title-bar-line-height:             $display-line-height !default;
 $title-bar-letter-spacing:          $h2-spacing !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
 
@@ -2255,18 +2234,17 @@ $offcanvas-backdrop-opacity:        $modal-backdrop-opacity !default;
 
 // Code
 // OUDS mod
-$code-font-size:                    .875em !default;
-$code-color:                        $gray-700 !default;
+$code-font-size:                    $small-font-size !default;
+$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
 
 //
diff --git a/scss/mixins/_utilities.scss b/scss/mixins/_utilities.scss
index 0b097acb68..0412d11244 100644
--- a/scss/mixins/_utilities.scss
+++ b/scss/mixins/_utilities.scss
@@ -55,30 +55,23 @@
           /* rtl:begin:remove */
         }
 
-        @if $is-css-var {
+        @if type-of($value) == "string" and str-slice($value, 1, 1) == "%" {
           .#{$property-class + $infix + $property-class-modifier} {
-            --#{$prefix}#{$css-variable-name}: #{$value};
+            @extend #{$value};
           }
-
-          @each $pseudo in $state {
-            .#{$property-class + $infix + $property-class-modifier}-#{$pseudo}:#{$pseudo} {
+        } @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 +81,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/ouds-web-grid.scss b/scss/ouds-web-grid.scss
index bf06302c33..beaf99bcb4 100644
--- a/scss/ouds-web-grid.scss
+++ b/scss/ouds-web-grid.scss
@@ -3,6 +3,7 @@
 
 $include-column-box-sizing: true !default;
 
+@import "config";
 @import "functions";
 @import "tokens/raw";
 @import "tokens/semantic";
diff --git a/scss/ouds-web-reboot.scss b/scss/ouds-web-reboot.scss
index 6ea8a0e0cf..87ccf77697 100644
--- a/scss/ouds-web-reboot.scss
+++ b/scss/ouds-web-reboot.scss
@@ -1,6 +1,7 @@
 @import "mixins/banner";
 @include bsBanner(Reboot);
 
+@import "config";
 @import "functions";
 @import "tokens/raw";
 @import "tokens/semantic";
diff --git a/scss/ouds-web-utilities.scss b/scss/ouds-web-utilities.scss
index 9a486fd651..6306a740b0 100644
--- a/scss/ouds-web-utilities.scss
+++ b/scss/ouds-web-utilities.scss
@@ -2,6 +2,7 @@
 @include bsBanner(Utilities);
 
 // Configuration
+@import "config";
 @import "functions";
 @import "tokens/raw";
 @import "tokens/semantic";
diff --git a/scss/ouds-web.scss b/scss/ouds-web.scss
index 4a46128b80..5fa3b97827 100644
--- a/scss/ouds-web.scss
+++ b/scss/ouds-web.scss
@@ -3,6 +3,7 @@
 
 // scss-docs-start import-stack
 // Configuration
+@import "config";
 @import "functions";
 @import "tokens/raw";
 @import "tokens/semantic";
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..0e9965dc95
--- /dev/null
+++ b/scss/tests/customize/_ouds-web-bootstrap-grid.test.scss
@@ -0,0 +1,5728 @@
+// 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 "../../config";
+    @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 "../../config";
+    @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 "../../config";
+    @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 "../../config";
+    @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.3125rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+        }
+
+        .g-1,
+        .gy-1 {
+          --bs-gutter-y: 0.3125rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+        }
+
+        .g-2,
+        .gx-2 {
+          --bs-gutter-x: 0.625rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+        }
+
+        .g-2,
+        .gy-2 {
+          --bs-gutter-y: 0.625rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+        }
+
+        .g-3,
+        .gx-3 {
+          --bs-gutter-x: 1.25rem !important;
+        }
+
+        .g-3,
+        .gy-3 {
+          --bs-gutter-y: 1.25rem !important;
+        }
+
+        .g-4,
+        .gx-4 {
+          --bs-gutter-x: 1.875rem !important;
+        }
+
+        .g-4,
+        .gy-4 {
+          --bs-gutter-y: 1.875rem !important;
+        }
+
+        .g-5,
+        .gx-5 {
+          --bs-gutter-x: 3.75rem !important;
+        }
+
+        .g-5,
+        .gy-5 {
+          --bs-gutter-y: 3.75rem !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.3125rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .g-xs-1,
+          .gy-xs-1 {
+            --bs-gutter-y: 0.3125rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .g-xs-2,
+          .gx-xs-2 {
+            --bs-gutter-x: 0.625rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .g-xs-2,
+          .gy-xs-2 {
+            --bs-gutter-y: 0.625rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .g-xs-3,
+          .gx-xs-3 {
+            --bs-gutter-x: 1.25rem !important;
+          }
+
+          .g-xs-3,
+          .gy-xs-3 {
+            --bs-gutter-y: 1.25rem !important;
+          }
+
+          .g-xs-4,
+          .gx-xs-4 {
+            --bs-gutter-x: 1.875rem !important;
+          }
+
+          .g-xs-4,
+          .gy-xs-4 {
+            --bs-gutter-y: 1.875rem !important;
+          }
+
+          .g-xs-5,
+          .gx-xs-5 {
+            --bs-gutter-x: 3.75rem !important;
+          }
+
+          .g-xs-5,
+          .gy-xs-5 {
+            --bs-gutter-y: 3.75rem !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.3125rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .g-sm-1,
+          .gy-sm-1 {
+            --bs-gutter-y: 0.3125rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .g-sm-2,
+          .gx-sm-2 {
+            --bs-gutter-x: 0.625rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .g-sm-2,
+          .gy-sm-2 {
+            --bs-gutter-y: 0.625rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .g-sm-3,
+          .gx-sm-3 {
+            --bs-gutter-x: 1.25rem !important;
+          }
+
+          .g-sm-3,
+          .gy-sm-3 {
+            --bs-gutter-y: 1.25rem !important;
+          }
+
+          .g-sm-4,
+          .gx-sm-4 {
+            --bs-gutter-x: 1.875rem !important;
+          }
+
+          .g-sm-4,
+          .gy-sm-4 {
+            --bs-gutter-y: 1.875rem !important;
+          }
+
+          .g-sm-5,
+          .gx-sm-5 {
+            --bs-gutter-x: 3.75rem !important;
+          }
+
+          .g-sm-5,
+          .gy-sm-5 {
+            --bs-gutter-y: 3.75rem !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.3125rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .g-md-1,
+          .gy-md-1 {
+            --bs-gutter-y: 0.3125rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .g-md-2,
+          .gx-md-2 {
+            --bs-gutter-x: 0.625rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .g-md-2,
+          .gy-md-2 {
+            --bs-gutter-y: 0.625rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .g-md-3,
+          .gx-md-3 {
+            --bs-gutter-x: 1.25rem !important;
+          }
+
+          .g-md-3,
+          .gy-md-3 {
+            --bs-gutter-y: 1.25rem !important;
+          }
+
+          .g-md-4,
+          .gx-md-4 {
+            --bs-gutter-x: 1.875rem !important;
+          }
+
+          .g-md-4,
+          .gy-md-4 {
+            --bs-gutter-y: 1.875rem !important;
+          }
+
+          .g-md-5,
+          .gx-md-5 {
+            --bs-gutter-x: 3.75rem !important;
+          }
+
+          .g-md-5,
+          .gy-md-5 {
+            --bs-gutter-y: 3.75rem !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.3125rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .g-lg-1,
+          .gy-lg-1 {
+            --bs-gutter-y: 0.3125rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .g-lg-2,
+          .gx-lg-2 {
+            --bs-gutter-x: 0.625rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .g-lg-2,
+          .gy-lg-2 {
+            --bs-gutter-y: 0.625rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .g-lg-3,
+          .gx-lg-3 {
+            --bs-gutter-x: 1.25rem !important;
+          }
+
+          .g-lg-3,
+          .gy-lg-3 {
+            --bs-gutter-y: 1.25rem !important;
+          }
+
+          .g-lg-4,
+          .gx-lg-4 {
+            --bs-gutter-x: 1.875rem !important;
+          }
+
+          .g-lg-4,
+          .gy-lg-4 {
+            --bs-gutter-y: 1.875rem !important;
+          }
+
+          .g-lg-5,
+          .gx-lg-5 {
+            --bs-gutter-x: 3.75rem !important;
+          }
+
+          .g-lg-5,
+          .gy-lg-5 {
+            --bs-gutter-y: 3.75rem !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.3125rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .g-xl-1,
+          .gy-xl-1 {
+            --bs-gutter-y: 0.3125rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .g-xl-2,
+          .gx-xl-2 {
+            --bs-gutter-x: 0.625rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .g-xl-2,
+          .gy-xl-2 {
+            --bs-gutter-y: 0.625rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .g-xl-3,
+          .gx-xl-3 {
+            --bs-gutter-x: 1.25rem !important;
+          }
+
+          .g-xl-3,
+          .gy-xl-3 {
+            --bs-gutter-y: 1.25rem !important;
+          }
+
+          .g-xl-4,
+          .gx-xl-4 {
+            --bs-gutter-x: 1.875rem !important;
+          }
+
+          .g-xl-4,
+          .gy-xl-4 {
+            --bs-gutter-y: 1.875rem !important;
+          }
+
+          .g-xl-5,
+          .gx-xl-5 {
+            --bs-gutter-x: 3.75rem !important;
+          }
+
+          .g-xl-5,
+          .gy-xl-5 {
+            --bs-gutter-y: 3.75rem !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.3125rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .g-xxl-1,
+          .gy-xxl-1 {
+            --bs-gutter-y: 0.3125rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .g-xxl-2,
+          .gx-xxl-2 {
+            --bs-gutter-x: 0.625rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .g-xxl-2,
+          .gy-xxl-2 {
+            --bs-gutter-y: 0.625rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .g-xxl-3,
+          .gx-xxl-3 {
+            --bs-gutter-x: 1.25rem !important;
+          }
+
+          .g-xxl-3,
+          .gy-xxl-3 {
+            --bs-gutter-y: 1.25rem !important;
+          }
+
+          .g-xxl-4,
+          .gx-xxl-4 {
+            --bs-gutter-x: 1.875rem !important;
+          }
+
+          .g-xxl-4,
+          .gy-xxl-4 {
+            --bs-gutter-y: 1.875rem !important;
+          }
+
+          .g-xxl-5,
+          .gx-xxl-5 {
+            --bs-gutter-x: 3.75rem !important;
+          }
+
+          .g-xxl-5,
+          .gy-xxl-5 {
+            --bs-gutter-y: 3.75rem !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.3125rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .g-2xl-1,
+          .gy-2xl-1 {
+            --bs-gutter-y: 0.3125rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .g-2xl-2,
+          .gx-2xl-2 {
+            --bs-gutter-x: 0.625rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .g-2xl-2,
+          .gy-2xl-2 {
+            --bs-gutter-y: 0.625rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .g-2xl-3,
+          .gx-2xl-3 {
+            --bs-gutter-x: 1.25rem !important;
+          }
+
+          .g-2xl-3,
+          .gy-2xl-3 {
+            --bs-gutter-y: 1.25rem !important;
+          }
+
+          .g-2xl-4,
+          .gx-2xl-4 {
+            --bs-gutter-x: 1.875rem !important;
+          }
+
+          .g-2xl-4,
+          .gy-2xl-4 {
+            --bs-gutter-y: 1.875rem !important;
+          }
+
+          .g-2xl-5,
+          .gx-2xl-5 {
+            --bs-gutter-x: 3.75rem !important;
+          }
+
+          .g-2xl-5,
+          .gy-2xl-5 {
+            --bs-gutter-y: 3.75rem !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.3125rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .g-3xl-1,
+          .gy-3xl-1 {
+            --bs-gutter-y: 0.3125rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .g-3xl-2,
+          .gx-3xl-2 {
+            --bs-gutter-x: 0.625rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .g-3xl-2,
+          .gy-3xl-2 {
+            --bs-gutter-y: 0.625rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .g-3xl-3,
+          .gx-3xl-3 {
+            --bs-gutter-x: 1.25rem !important;
+          }
+
+          .g-3xl-3,
+          .gy-3xl-3 {
+            --bs-gutter-y: 1.25rem !important;
+          }
+
+          .g-3xl-4,
+          .gx-3xl-4 {
+            --bs-gutter-x: 1.875rem !important;
+          }
+
+          .g-3xl-4,
+          .gy-3xl-4 {
+            --bs-gutter-y: 1.875rem !important;
+          }
+
+          .g-3xl-5,
+          .gx-3xl-5 {
+            --bs-gutter-x: 3.75rem !important;
+          }
+
+          .g-3xl-5,
+          .gy-3xl-5 {
+            --bs-gutter-y: 3.75rem !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 74d0549089..e5b84b46b8 100644
--- a/scss/tests/customize/_ouds-web-bootstrap.test.scss
+++ b/scss/tests/customize/_ouds-web-bootstrap-utilities.test.scss
@@ -5,691 +5,906 @@ $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 "../../config";
+        @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: $line-heights
+          ),
+          "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
+          ),
+          "line-length-ouds": (
+            property: max-width,
+            class: ll,
+            values: $ouds-line-lengths
+          ),
+          "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() {
+        .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);
+        }
+
+        .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-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-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-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-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-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-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-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-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-lxl {
+          font-size: 1.125rem;
+          line-height: 1.3333333333;
+
+          /* rtl:remove */
+          letter-spacing: 0.01125rem; // stylelint-disable-line @stylistic/number-leading-zero
+        }
+
+        .fs-ll {
+          font-size: 1rem;
+          line-height: 1.5;
+
+          /* rtl:remove */
+          letter-spacing: 0.0125rem; // stylelint-disable-line @stylistic/number-leading-zero
+        }
+
+        .fs-lm {
+          font-size: 0.875rem; // stylelint-disable-line @stylistic/number-leading-zero
+          line-height: 1.4285714286;
+
+          /* rtl:remove */
+          letter-spacing: 0.010625rem; // stylelint-disable-line @stylistic/number-leading-zero
+        }
+
+        .fs-ls {
+          font-size: 0.75rem; // stylelint-disable-line @stylistic/number-leading-zero
+          line-height: 1.3333333333;
+
+          /* rtl:remove */
+          letter-spacing: 0.01125rem; // stylelint-disable-line @stylistic/number-leading-zero
+        }
+
+        .fs-cm {
+          font-size: 0.875rem; // stylelint-disable-line @stylistic/number-leading-zero
+          line-height: 1.4285714286;
+
+          /* rtl:remove */
+          letter-spacing: 0.010625rem; // stylelint-disable-line @stylistic/number-leading-zero
+        }
+
+        .fs-cs {
+          font-size: 0.75rem; // stylelint-disable-line @stylistic/number-leading-zero
+          line-height: 1.3333333333;
+
+          /* rtl:remove */
+          letter-spacing: 0.01125rem; // stylelint-disable-line @stylistic/number-leading-zero
+        }
+
         .opacity-transparent {
           opacity: 0 !important;
         }
@@ -2908,6 +3123,94 @@ $utilities: ();
           column-gap: var(--bs-space-scaled-spacious) !important;
         }
 
+        .font-monospace {
+          font-family: var(--bs-font-monospace) !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 */
+
+        .fw-normal {
+          font-weight: 400 !important;
+        }
+
+        .fw-bold {
+          font-weight: 700 !important;
+        }
+
+        .ll-sm {
+          max-width: 40ch !important;
+        }
+
+        .ll-md {
+          max-width: 80ch !important;
+        }
+
         .shadow-none {
           box-shadow: 0 0 0 0 rgba(0, 0, 0, 0) !important;
         }
@@ -3834,6 +4137,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 +5045,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 +5953,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 +6861,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 +7769,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 +8677,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,697 +9585,924 @@ $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 "../../config";
+        @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: $line-heights
+          ),
+          "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
+          ),
+          "line-length-ouds": (
+            property: max-width,
+            class: ll,
+            values: $ouds-line-lengths
+          ),
+          "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() {
+        .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);
+        }
+
+        .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-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-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-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-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-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-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-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-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-lxl {
+          font-size: 1.125rem;
+          line-height: 1.3333333333;
+
+          /* rtl:remove */
+          letter-spacing: 0.01125rem; // stylelint-disable-line @stylistic/number-leading-zero
+        }
+
+        .fs-ll {
+          font-size: 1rem;
+          line-height: 1.5;
+
+          /* rtl:remove */
+          letter-spacing: 0.0125rem; // stylelint-disable-line @stylistic/number-leading-zero
+        }
+
+        .fs-lm {
+          font-size: 0.875rem; // stylelint-disable-line @stylistic/number-leading-zero
+          line-height: 1.4285714286;
+
+          /* rtl:remove */
+          letter-spacing: 0.010625rem; // stylelint-disable-line @stylistic/number-leading-zero
+        }
+
+        .fs-ls {
+          font-size: 0.75rem; // stylelint-disable-line @stylistic/number-leading-zero
+          line-height: 1.3333333333;
+
+          /* rtl:remove */
+          letter-spacing: 0.01125rem; // stylelint-disable-line @stylistic/number-leading-zero
+        }
+
+        .fs-cm {
+          font-size: 0.875rem; // stylelint-disable-line @stylistic/number-leading-zero
+          line-height: 1.4285714286;
+
+          /* rtl:remove */
+          letter-spacing: 0.010625rem; // stylelint-disable-line @stylistic/number-leading-zero
+        }
+
+        .fs-cs {
+          font-size: 0.75rem; // stylelint-disable-line @stylistic/number-leading-zero
+          line-height: 1.3333333333;
+
+          /* rtl:remove */
+          letter-spacing: 0.01125rem; // stylelint-disable-line @stylistic/number-leading-zero
+        }
+
         .opacity-0 {
           opacity: 0 !important;
         }
@@ -12783,6 +13385,118 @@ $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 */
+
+        .fw-normal {
+          font-weight: 400 !important;
+        }
+
+        .fw-bold {
+          font-weight: 700 !important;
+        }
+
+        .ll-sm {
+          max-width: 40ch !important;
+        }
+
+        .ll-md {
+          max-width: 80ch !important;
+        }
+
         .shadow {
           box-shadow: var(--bs-box-shadow) !important;
         }
@@ -14153,6 +14867,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 +16207,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,11 +17547,23 @@ $utilities: ();
           .column-gap-md-jumbo {
             column-gap: 64px !important;
           }
-        }
 
-        @media (min-width: 1024px) {
-          .m-lg-0 {
-            margin: 0 !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) {
+          .m-lg-0 {
+            margin: 0 !important;
           }
 
           .m-lg-1 {
@@ -18137,6 +18887,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 +20227,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 +21567,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 +22907,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 +24247,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.3125rem !important; // stylelint-disable-line @stylistic/number-leading-zero
-        }
-
-        .g-1,
-        .gy-1 {
-          --bs-gutter-y: 0.3125rem !important; // stylelint-disable-line @stylistic/number-leading-zero
-        }
-
-        .g-2,
-        .gx-2 {
-          --bs-gutter-x: 0.625rem !important; // stylelint-disable-line @stylistic/number-leading-zero
-        }
-
-        .g-2,
-        .gy-2 {
-          --bs-gutter-y: 0.625rem !important; // stylelint-disable-line @stylistic/number-leading-zero
-        }
-
-        .g-3,
-        .gx-3 {
-          --bs-gutter-x: 1.25rem !important;
-        }
-
-        .g-3,
-        .gy-3 {
-          --bs-gutter-y: 1.25rem !important;
-        }
-
-        .g-4,
-        .gx-4 {
-          --bs-gutter-x: 1.875rem !important;
-        }
-
-        .g-4,
-        .gy-4 {
-          --bs-gutter-y: 1.875rem !important;
-        }
-
-        .g-5,
-        .gx-5 {
-          --bs-gutter-x: 3.75rem !important;
-        }
-
-        .g-5,
-        .gy-5 {
-          --bs-gutter-y: 3.75rem !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.3125rem !important; // stylelint-disable-line @stylistic/number-leading-zero
-          }
-
-          .g-xs-1,
-          .gy-xs-1 {
-            --bs-gutter-y: 0.3125rem !important; // stylelint-disable-line @stylistic/number-leading-zero
-          }
-
-          .g-xs-2,
-          .gx-xs-2 {
-            --bs-gutter-x: 0.625rem !important; // stylelint-disable-line @stylistic/number-leading-zero
-          }
-
-          .g-xs-2,
-          .gy-xs-2 {
-            --bs-gutter-y: 0.625rem !important; // stylelint-disable-line @stylistic/number-leading-zero
-          }
-
-          .g-xs-3,
-          .gx-xs-3 {
-            --bs-gutter-x: 1.25rem !important;
-          }
-
-          .g-xs-3,
-          .gy-xs-3 {
-            --bs-gutter-y: 1.25rem !important;
-          }
-
-          .g-xs-4,
-          .gx-xs-4 {
-            --bs-gutter-x: 1.875rem !important;
-          }
-
-          .g-xs-4,
-          .gy-xs-4 {
-            --bs-gutter-y: 1.875rem !important;
-          }
-
-          .g-xs-5,
-          .gx-xs-5 {
-            --bs-gutter-x: 3.75rem !important;
-          }
-
-          .g-xs-5,
-          .gy-xs-5 {
-            --bs-gutter-y: 3.75rem !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.3125rem !important; // stylelint-disable-line @stylistic/number-leading-zero
-          }
-
-          .g-sm-1,
-          .gy-sm-1 {
-            --bs-gutter-y: 0.3125rem !important; // stylelint-disable-line @stylistic/number-leading-zero
-          }
-
-          .g-sm-2,
-          .gx-sm-2 {
-            --bs-gutter-x: 0.625rem !important; // stylelint-disable-line @stylistic/number-leading-zero
-          }
-
-          .g-sm-2,
-          .gy-sm-2 {
-            --bs-gutter-y: 0.625rem !important; // stylelint-disable-line @stylistic/number-leading-zero
-          }
-
-          .g-sm-3,
-          .gx-sm-3 {
-            --bs-gutter-x: 1.25rem !important;
-          }
-
-          .g-sm-3,
-          .gy-sm-3 {
-            --bs-gutter-y: 1.25rem !important;
-          }
-
-          .g-sm-4,
-          .gx-sm-4 {
-            --bs-gutter-x: 1.875rem !important;
-          }
-
-          .g-sm-4,
-          .gy-sm-4 {
-            --bs-gutter-y: 1.875rem !important;
-          }
-
-          .g-sm-5,
-          .gx-sm-5 {
-            --bs-gutter-x: 3.75rem !important;
-          }
-
-          .g-sm-5,
-          .gy-sm-5 {
-            --bs-gutter-y: 3.75rem !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.3125rem !important; // stylelint-disable-line @stylistic/number-leading-zero
-          }
-
-          .g-md-1,
-          .gy-md-1 {
-            --bs-gutter-y: 0.3125rem !important; // stylelint-disable-line @stylistic/number-leading-zero
-          }
-
-          .g-md-2,
-          .gx-md-2 {
-            --bs-gutter-x: 0.625rem !important; // stylelint-disable-line @stylistic/number-leading-zero
-          }
-
-          .g-md-2,
-          .gy-md-2 {
-            --bs-gutter-y: 0.625rem !important; // stylelint-disable-line @stylistic/number-leading-zero
-          }
-
-          .g-md-3,
-          .gx-md-3 {
-            --bs-gutter-x: 1.25rem !important;
-          }
-
-          .g-md-3,
-          .gy-md-3 {
-            --bs-gutter-y: 1.25rem !important;
-          }
-
-          .g-md-4,
-          .gx-md-4 {
-            --bs-gutter-x: 1.875rem !important;
-          }
-
-          .g-md-4,
-          .gy-md-4 {
-            --bs-gutter-y: 1.875rem !important;
-          }
-
-          .g-md-5,
-          .gx-md-5 {
-            --bs-gutter-x: 3.75rem !important;
-          }
-
-          .g-md-5,
-          .gy-md-5 {
-            --bs-gutter-y: 3.75rem !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.3125rem !important; // stylelint-disable-line @stylistic/number-leading-zero
-          }
-
-          .g-lg-1,
-          .gy-lg-1 {
-            --bs-gutter-y: 0.3125rem !important; // stylelint-disable-line @stylistic/number-leading-zero
-          }
-
-          .g-lg-2,
-          .gx-lg-2 {
-            --bs-gutter-x: 0.625rem !important; // stylelint-disable-line @stylistic/number-leading-zero
-          }
-
-          .g-lg-2,
-          .gy-lg-2 {
-            --bs-gutter-y: 0.625rem !important; // stylelint-disable-line @stylistic/number-leading-zero
-          }
-
-          .g-lg-3,
-          .gx-lg-3 {
-            --bs-gutter-x: 1.25rem !important;
-          }
-
-          .g-lg-3,
-          .gy-lg-3 {
-            --bs-gutter-y: 1.25rem !important;
-          }
-
-          .g-lg-4,
-          .gx-lg-4 {
-            --bs-gutter-x: 1.875rem !important;
-          }
-
-          .g-lg-4,
-          .gy-lg-4 {
-            --bs-gutter-y: 1.875rem !important;
-          }
-
-          .g-lg-5,
-          .gx-lg-5 {
-            --bs-gutter-x: 3.75rem !important;
-          }
-
-          .g-lg-5,
-          .gy-lg-5 {
-            --bs-gutter-y: 3.75rem !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.3125rem !important; // stylelint-disable-line @stylistic/number-leading-zero
-          }
-
-          .g-xl-1,
-          .gy-xl-1 {
-            --bs-gutter-y: 0.3125rem !important; // stylelint-disable-line @stylistic/number-leading-zero
-          }
-
-          .g-xl-2,
-          .gx-xl-2 {
-            --bs-gutter-x: 0.625rem !important; // stylelint-disable-line @stylistic/number-leading-zero
-          }
-
-          .g-xl-2,
-          .gy-xl-2 {
-            --bs-gutter-y: 0.625rem !important; // stylelint-disable-line @stylistic/number-leading-zero
-          }
-
-          .g-xl-3,
-          .gx-xl-3 {
-            --bs-gutter-x: 1.25rem !important;
-          }
-
-          .g-xl-3,
-          .gy-xl-3 {
-            --bs-gutter-y: 1.25rem !important;
-          }
-
-          .g-xl-4,
-          .gx-xl-4 {
-            --bs-gutter-x: 1.875rem !important;
-          }
-
-          .g-xl-4,
-          .gy-xl-4 {
-            --bs-gutter-y: 1.875rem !important;
-          }
-
-          .g-xl-5,
-          .gx-xl-5 {
-            --bs-gutter-x: 3.75rem !important;
-          }
-
-          .g-xl-5,
-          .gy-xl-5 {
-            --bs-gutter-y: 3.75rem !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.3125rem !important; // stylelint-disable-line @stylistic/number-leading-zero
-          }
-
-          .g-xxl-1,
-          .gy-xxl-1 {
-            --bs-gutter-y: 0.3125rem !important; // stylelint-disable-line @stylistic/number-leading-zero
-          }
-
-          .g-xxl-2,
-          .gx-xxl-2 {
-            --bs-gutter-x: 0.625rem !important; // stylelint-disable-line @stylistic/number-leading-zero
-          }
-
-          .g-xxl-2,
-          .gy-xxl-2 {
-            --bs-gutter-y: 0.625rem !important; // stylelint-disable-line @stylistic/number-leading-zero
-          }
-
-          .g-xxl-3,
-          .gx-xxl-3 {
-            --bs-gutter-x: 1.25rem !important;
-          }
-
-          .g-xxl-3,
-          .gy-xxl-3 {
-            --bs-gutter-y: 1.25rem !important;
-          }
-
-          .g-xxl-4,
-          .gx-xxl-4 {
-            --bs-gutter-x: 1.875rem !important;
-          }
-
-          .g-xxl-4,
-          .gy-xxl-4 {
-            --bs-gutter-y: 1.875rem !important;
-          }
-
-          .g-xxl-5,
-          .gx-xxl-5 {
-            --bs-gutter-x: 3.75rem !important;
-          }
-
-          .g-xxl-5,
-          .gy-xxl-5 {
-            --bs-gutter-y: 3.75rem !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.3125rem !important; // stylelint-disable-line @stylistic/number-leading-zero
-          }
-
-          .g-2xl-1,
-          .gy-2xl-1 {
-            --bs-gutter-y: 0.3125rem !important; // stylelint-disable-line @stylistic/number-leading-zero
-          }
-
-          .g-2xl-2,
-          .gx-2xl-2 {
-            --bs-gutter-x: 0.625rem !important; // stylelint-disable-line @stylistic/number-leading-zero
-          }
-
-          .g-2xl-2,
-          .gy-2xl-2 {
-            --bs-gutter-y: 0.625rem !important; // stylelint-disable-line @stylistic/number-leading-zero
-          }
-
-          .g-2xl-3,
-          .gx-2xl-3 {
-            --bs-gutter-x: 1.25rem !important;
-          }
-
-          .g-2xl-3,
-          .gy-2xl-3 {
-            --bs-gutter-y: 1.25rem !important;
-          }
-
-          .g-2xl-4,
-          .gx-2xl-4 {
-            --bs-gutter-x: 1.875rem !important;
-          }
-
-          .g-2xl-4,
-          .gy-2xl-4 {
-            --bs-gutter-y: 1.875rem !important;
-          }
-
-          .g-2xl-5,
-          .gx-2xl-5 {
-            --bs-gutter-x: 3.75rem !important;
-          }
-
-          .g-2xl-5,
-          .gy-2xl-5 {
-            --bs-gutter-y: 3.75rem !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.3125rem !important; // stylelint-disable-line @stylistic/number-leading-zero
-          }
-
-          .g-3xl-1,
-          .gy-3xl-1 {
-            --bs-gutter-y: 0.3125rem !important; // stylelint-disable-line @stylistic/number-leading-zero
-          }
-
-          .g-3xl-2,
-          .gx-3xl-2 {
-            --bs-gutter-x: 0.625rem !important; // stylelint-disable-line @stylistic/number-leading-zero
-          }
-
-          .g-3xl-2,
-          .gy-3xl-2 {
-            --bs-gutter-y: 0.625rem !important; // stylelint-disable-line @stylistic/number-leading-zero
-          }
-
-          .g-3xl-3,
-          .gx-3xl-3 {
-            --bs-gutter-x: 1.25rem !important;
-          }
-
-          .g-3xl-3,
-          .gy-3xl-3 {
-            --bs-gutter-y: 1.25rem !important;
-          }
-
-          .g-3xl-4,
-          .gx-3xl-4 {
-            --bs-gutter-x: 1.875rem !important;
-          }
 
-          .g-3xl-4,
-          .gy-3xl-4 {
-            --bs-gutter-y: 1.875rem !important;
+          .text-3xl-start {
+            text-align: left !important;
           }
 
-          .g-3xl-5,
-          .gx-3xl-5 {
-            --bs-gutter-x: 3.75rem !important;
+          .text-3xl-end {
+            text-align: right !important;
           }
 
-          .g-3xl-5,
-          .gy-3xl-5 {
-            --bs-gutter-y: 3.75rem !important;
+          .text-3xl-center {
+            text-align: center !important;
           }
         }
       }
diff --git a/scss/tests/mixins/_auto-import-of-variables-dark.test.scss b/scss/tests/mixins/_auto-import-of-variables-dark.test.scss
index e02ca021b9..2ffcfaee6d 100644
--- a/scss/tests/mixins/_auto-import-of-variables-dark.test.scss
+++ b/scss/tests/mixins/_auto-import-of-variables-dark.test.scss
@@ -1,5 +1,6 @@
 // TODO: this file can be removed safely in v6 when `@import "variables-dark"` will be removed at the end of _variables.scss
 
+@import "../../config";
 @import "../../functions";
 @import "../../tokens/raw";
 @import "../../tokens/semantic";
diff --git a/scss/tests/mixins/_color-modes.test.scss b/scss/tests/mixins/_color-modes.test.scss
index 6d29be555b..1419df7681 100644
--- a/scss/tests/mixins/_color-modes.test.scss
+++ b/scss/tests/mixins/_color-modes.test.scss
@@ -1,5 +1,6 @@
 // stylelint-disable selector-attribute-quotes
 
+@import "../../config";
 @import "../../functions";
 @import "../../tokens/raw";
 @import "../../tokens/semantic";
diff --git a/scss/tests/mixins/_utilities.test.scss b/scss/tests/mixins/_utilities.test.scss
index ba6d401500..975ae61d0a 100644
--- a/scss/tests/mixins/_utilities.test.scss
+++ b/scss/tests/mixins/_utilities.test.scss
@@ -3,6 +3,7 @@ $enable-important-utilities: false;
 
 // Important: Do not import rfs to check that the mixin just calls the appropriate functions from it
 // OUDS mod
+@import "../../config";
 @import "../../functions"; // Added because needed by "variables"
 @import "../../tokens/raw";
 @import "../../tokens/semantic";
diff --git a/scss/tests/utilities/_api.test.scss b/scss/tests/utilities/_api.test.scss
index 9fe38d40aa..8c1af304fc 100644
--- a/scss/tests/utilities/_api.test.scss
+++ b/scss/tests/utilities/_api.test.scss
@@ -1,3 +1,4 @@
+@import "../../config";
 @import "../../functions";
 @import "../../tokens/raw";
 @import "../../tokens/semantic";
diff --git a/scss/tokens/_composite.scss b/scss/tokens/_composite.scss
index 7750d7de9a..36ae635a1c 100644
--- a/scss/tokens/_composite.scss
+++ b/scss/tokens/_composite.scss
@@ -13,3 +13,148 @@ $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 !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 !default;
 // scss-docs-end ouds-composite-elevation
+
+// scss-docs-start ouds-composite-font
+%display-large {
+  max-width: var(--#{$prefix}font-max-width-display-large);
+  font-size: var(--#{$prefix}font-size-display-large);
+  line-height: var(--#{$prefix}font-line-height-display-large);
+
+  /* rtl:remove */
+  letter-spacing: var(--#{$prefix}font-letter-spacing-display-large);
+}
+
+%display-medium {
+  max-width: var(--#{$prefix}font-max-width-display-medium);
+  font-size: var(--#{$prefix}font-size-display-medium);
+  line-height: var(--#{$prefix}font-line-height-display-medium);
+
+  /* rtl:remove */
+  letter-spacing: var(--#{$prefix}font-letter-spacing-display-medium);
+}
+
+%display-small {
+  max-width: var(--#{$prefix}font-max-width-display-small);
+  font-size: var(--#{$prefix}font-size-display-small);
+  line-height: var(--#{$prefix}font-line-height-display-small);
+
+  /* rtl:remove */
+  letter-spacing: var(--#{$prefix}font-letter-spacing-display-small);
+}
+
+%heading-xlarge {
+  max-width: var(--#{$prefix}font-max-width-heading-xlarge);
+  font-size: var(--#{$prefix}font-size-heading-xlarge);
+  line-height: var(--#{$prefix}font-line-height-heading-xlarge);
+
+  /* rtl:remove */
+  letter-spacing: var(--#{$prefix}font-letter-spacing-heading-xlarge);
+}
+
+%heading-large {
+  max-width: var(--#{$prefix}font-max-width-heading-large);
+  font-size: var(--#{$prefix}font-size-heading-large);
+  line-height: var(--#{$prefix}font-line-height-heading-large);
+
+  /* rtl:remove */
+  letter-spacing: var(--#{$prefix}font-letter-spacing-heading-large);
+}
+
+%heading-medium {
+  max-width: var(--#{$prefix}font-max-width-heading-medium);
+  font-size: var(--#{$prefix}font-size-heading-medium);
+  line-height: var(--#{$prefix}font-line-height-heading-medium);
+
+  /* rtl:remove */
+  letter-spacing: var(--#{$prefix}font-letter-spacing-heading-medium);
+}
+
+%heading-small {
+  max-width: var(--#{$prefix}font-max-width-heading-small);
+  font-size: var(--#{$prefix}font-size-heading-small);
+  line-height: var(--#{$prefix}font-line-height-heading-small);
+
+  /* rtl:remove */
+  letter-spacing: var(--#{$prefix}font-letter-spacing-heading-small);
+}
+
+%body-large {
+  max-width: var(--#{$prefix}font-max-width-body-large);
+  font-size: var(--#{$prefix}font-size-body-large);
+  line-height: var(--#{$prefix}font-line-height-body-large);
+
+  /* rtl:remove */
+  letter-spacing: var(--#{$prefix}font-letter-spacing-body-large);
+}
+
+%body-medium {
+  max-width: var(--#{$prefix}font-max-width-body-medium);
+  font-size: var(--#{$prefix}font-size-body-medium);
+  line-height: var(--#{$prefix}font-line-height-body-medium);
+
+  /* rtl:remove */
+  letter-spacing: var(--#{$prefix}font-letter-spacing-body-medium);
+}
+
+%body-small {
+  max-width: var(--#{$prefix}font-max-width-body-small);
+  font-size: var(--#{$prefix}font-size-body-small);
+  line-height: var(--#{$prefix}font-line-height-body-small);
+
+  /* rtl:remove */
+  letter-spacing: var(--#{$prefix}font-letter-spacing-body-small);
+}
+
+%label-xlarge {
+  font-size: px-to-rem($ouds-font-size-label-xlarge);
+  line-height: divide($ouds-font-line-height-label-xlarge, $ouds-font-size-label-xlarge);
+
+  /* rtl:remove */
+  letter-spacing: px-to-rem($ouds-font-letter-spacing-label-xlarge);
+}
+
+%label-large {
+  font-size: px-to-rem($ouds-font-size-label-large);
+  line-height: divide($ouds-font-line-height-label-large, $ouds-font-size-label-large);
+
+  /* rtl:remove */
+  letter-spacing: px-to-rem($ouds-font-letter-spacing-label-large);
+}
+
+%label-medium {
+  font-size: px-to-rem($ouds-font-size-label-medium);
+  line-height: divide($ouds-font-line-height-label-medium, $ouds-font-size-label-medium);
+
+  /* rtl:remove */
+  letter-spacing: px-to-rem($ouds-font-letter-spacing-label-medium);
+}
+
+%label-small {
+  font-size: px-to-rem($ouds-font-size-label-small);
+  line-height: divide($ouds-font-line-height-label-small, $ouds-font-size-label-small);
+
+  /* rtl:remove */
+  letter-spacing: px-to-rem($ouds-font-letter-spacing-label-small);
+}
+
+%code-medium {
+  font-size: px-to-rem($ouds-font-size-code-medium);
+  line-height: divide($ouds-font-line-height-code-medium, $ouds-font-size-code-medium);
+
+  /* rtl:remove */
+  letter-spacing: px-to-rem($ouds-font-letter-spacing-code-medium);
+}
+
+%code-small {
+  font-size: px-to-rem($ouds-font-size-code-small);
+  line-height: divide($ouds-font-line-height-code-small, $ouds-font-size-code-small);
+
+  /* rtl:remove */
+  letter-spacing: px-to-rem($ouds-font-letter-spacing-code-small);
+}
+
+// stylelint-disable value-keyword-case
+$ouds-font-family-sans-serif-stack: "SF Pro", Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif !default; // TODO LM: Do or check RTL as well
+$ouds-font-family-monospace-stack: "SF Mono", "Roboto Mono", Consolas, Menlo, monospace !default;
+// stylelint-enable value-keyword-case
+// scss-docs-end ouds-composite-font
diff --git a/scss/tokens/_raw.scss b/scss/tokens/_raw.scss
index 149146ad9f..4a71044428 100644
--- a/scss/tokens/_raw.scss
+++ b/scss/tokens/_raw.scss
@@ -267,6 +267,7 @@ $ouds-elevation-y-500: 12px !default;
 // scss-docs-start ouds-raw-font
 $ouds-font-family-brand-default: "Helvetica Neue" !default;
 // $ouds-font-family-brand-tv: "Helvetica Neue LT" !default;
+// $ouds-font-family-monospace-consolas: "Consolas" !default;
 // $ouds-font-family-monospace-courier-new: "Courier New" !default;
 // $ouds-font-family-monospace-menlo: "Menlo" !default;
 // $ouds-font-family-monospace-monaco: "Monaco" !default;
diff --git a/scss/tokens/_semantic.scss b/scss/tokens/_semantic.scss
index c0789778d9..67de0c7fea 100644
--- a/scss/tokens/_semantic.scss
+++ b/scss/tokens/_semantic.scss
@@ -389,7 +389,7 @@ $ouds-font-size-body-medium-tablet: $ouds-font-size-200 !default;
 $ouds-font-size-body-small-desktop: $ouds-font-size-200 !default;
 $ouds-font-size-body-small-mobile: $ouds-font-size-150 !default;
 $ouds-font-size-body-small-tablet: $ouds-font-size-150 !default;
-$ouds-font-size-code-medium: $ouds-font-size-200 !default;
+$ouds-font-size-code-medium: $ouds-font-size-200 !default; // TODO LM: Decide whether it should be em or rem and apply it
 $ouds-font-size-code-small: $ouds-font-size-150 !default;
 $ouds-font-size-display-large-desktop: $ouds-font-size-1850 !default;
 $ouds-font-size-display-large-mobile: $ouds-font-size-850 !default;
diff --git a/site/assets/scss/_colors.scss b/site/assets/scss/_colors.scss
index 9ee7abbd13..c9c932e4a9 100644
--- a/site/assets/scss/_colors.scss
+++ b/site/assets/scss/_colors.scss
@@ -1,6 +1,7 @@
 //
 // Docs color palette classes
 //
+// TODO LM
 
 @each $color, $value in map-merge($colors, ("gray-500": $gray-500)) {
   .swatch-#{$color} {
diff --git a/site/assets/scss/_content.scss b/site/assets/scss/_content.scss
index d4e4e1f189..8c1ef5e773 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;
+      @extend %body-medium;
     }
   }
 
   > details {
+    @extend %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);
+  @extend %display-small; // OUDS mod: instead of `3rem`
 }
 
 .bd-lead {
-  @include font-size(1.5rem);
+  @extend %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..aa61e62aec 100644
--- a/site/assets/scss/_masthead.scss
+++ b/site/assets/scss/_masthead.scss
@@ -9,7 +9,7 @@
   }
 
   .lead {
-    @include font-size(1rem);
+    @extend %heading-small;
     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);
+    @extend %heading-small;
   }
 
-  @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..045173c8e7 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;
+  @extend %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..189d6b68cd 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);
+  @extend %body-large; // OUDS mod: instead of `1.125rem`
   user-select: none;
   text-anchor: middle;
 }
 
 .bd-placeholder-img-lg {
-  @include font-size(3.5rem);
+  @extend %display-medium; // OUDS mod: instead of `3.5rem`
 }
diff --git a/site/assets/scss/_sidebar.scss b/site/assets/scss/_sidebar.scss
index 6ce66af533..6eb4bf33d9 100644
--- a/site/assets/scss/_sidebar.scss
+++ b/site/assets/scss/_sidebar.scss
@@ -24,6 +24,7 @@
   color: var(--bs-emphasis-color);
 
   // OUDS mod
+  // TODO LM
   svg {
     font-size: 1.5625rem;
   }
@@ -31,9 +32,7 @@
 }
 
 .bd-links-nav {
-  @include media-breakpoint-down(lg) {
-    font-size: .875rem;
-  }
+  @extend %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..e3bdca09d5 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;
+  @extend %label-small;
 }
 
 @include tac("ClosePanel") {
@@ -81,20 +81,17 @@
 }
 
 @include tac("H1", true) {
+  @extend %heading-xlarge;
   margin-bottom: $spacer;
-  font-size: $h2-font-size;
-  letter-spacing: $h2-spacing;
 }
 
 @include tac("H2", true) {
+  @extend %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;
+  @extend %heading-small;
 }
 
 @include tac("Info") {
@@ -104,7 +101,7 @@
 }
 
 @include tac("Name", true) {
-  font-size: $font-size-sm;
+  @extend %label-small;
   color: var(--bs-secondary-color);
 }
 
diff --git a/site/assets/scss/_toc.scss b/site/assets/scss/_toc.scss
index 8dbfcb473e..3f4919173d 100644
--- a/site/assets/scss/_toc.scss
+++ b/site/assets/scss/_toc.scss
@@ -11,7 +11,7 @@
   }
 
   nav {
-    @include font-size(.875rem);
+    @extend %label-small; // OUDS mod: instead of `.875rem`
 
     ul {
       padding-left: 0;
diff --git a/site/assets/scss/docs.scss b/site/assets/scss/docs.scss
index 0ef3dfdb63..7152131f44 100644
--- a/site/assets/scss/docs.scss
+++ b/site/assets/scss/docs.scss
@@ -23,6 +23,7 @@
 // Happy Bootstrapping!
 
 // Load Bootstrap variables and mixins
+@import "../../../scss/config";
 @import "../../../scss/functions";
 @import "../../../scss/tokens/raw";
 @import "../../../scss/tokens/semantic";
diff --git a/site/assets/scss/search.scss b/site/assets/scss/search.scss
index 5a3420798f..7e797c235f 100644
--- a/site/assets/scss/search.scss
+++ b/site/assets/scss/search.scss
@@ -5,6 +5,7 @@
  * For details, see https://creativecommons.org/licenses/by/3.0/.
  */
 
+@import "../../../scss/config";
 @import "../../../scss/functions";
 @import "../../../scss/tokens/raw";
 @import "../../../scss/tokens/semantic";
diff --git a/site/content/docs/0.0/content/reboot.md b/site/content/docs/0.0/content/reboot.md
index 5ece016074..03897d1ebc 100644
--- a/site/content/docs/0.0/content/reboot.md
+++ b/site/content/docs/0.0/content/reboot.md
@@ -11,4 +11,477 @@ 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 `rem`s instead of `em`s for scalable component spacing.
+- 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 `rem`s for `margin`s.
+- Keep declarations of `font`-related properties to a minimum, using `inherit` whenever possible.
+
+## 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
+
+// TODO LM
+All heading elements—`<h1>`—`<h6>` have their `margin-top` removed, `margin-bottom: .5rem` 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
+
+// TODO LM
+All `<p>` elements have their `margin-top` removed and `margin-bottom: 1rem` set for easy spacing.
+
+{{< example >}}
+<p>This is an example paragraph.</p>
+{{< /example >}}
+
+## Links
+
+// TODO LM: No focus ?
+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>
+
+<!--<div class="text-success">
+  <hr>
+</div>
+
+<hr class="border border-danger border-2 opacity-50">
+<hr class="border border-primary border-3 opacity-75">-->
+{{< /example >}}
+
+## Lists
+
+// TODO LM
+All lists—`<ul>`, `<ol>`, and `<dl>`—have their `margin-top` removed and a `margin-bottom: 1rem`. 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: .5rem`. `<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
+
+// TODO LM
+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 `rem` 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: 1rem` 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
+
+// TODO LM
+The default `margin` on blockquotes is `1em 40px`, so we reset that to `0 0 1rem` 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..77f6a5d0e6 100644
--- a/site/content/docs/0.0/content/typography.md
+++ b/site/content/docs/0.0/content/typography.md
@@ -8,4 +8,345 @@ aliases:
 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>`.
+<!--- 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`.
+
+## 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 utilities]({{< docsref "/utilities/sizing" >}}).
+
+{{< bs-table >}}
+| Heading | Values for `xl` and upper | Values from `md` to `lg` | Values from `2xs` to `sm` |
+| --- | --- | --- | --- |
+| `<h1></h1>` | `2.5rem` (40px) | `2.25rem` (36px) | `1.75rem` (28px) |
+| `<h2></h2>` | `2rem` (32px) | `1.75rem` (28px) | `1.5rem` (24px) |
+| `<h3></h3>` | `1.75rem` (28px) | `1.5rem` (24px) | `1.25rem` (20px) |
+| `<h4></h4>` | `1.5rem` (24px) | `1.25rem` (20px) | `1.125rem` (18px) |
+| `<h5></h5>` | `1.25rem` (20px) | `1.125rem` (18px) | `1rem` (16px) |
+| `<h6></h6>` | `1.125rem` (18px) | `1rem` (16px) | `1rem` (16px) |
+{{< /bs-table >}}
+
+<details class="mb-medium">
+  <summary>See more details about the heading classes</summary>
+
+{{< bs-table >}}
+| Heading | Values for `xl` and upper | Values from `md` to `lg` | Values from `2xs` to `sm` |
+| --- | --- | --- | --- |
+| `<h1></h1>` | <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> |
+| `<h2></h2>` | <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> |
+| `<h3></h3>` | <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> |
+| `<h4></h4>` | <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> |
+| `<h5></h5>` | <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> | <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>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> |
+| `<h6></h6>` | <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> |
+{{< /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 >}}
+
+<!--### Customizing headings
+
+Use the included utility classes to create the small secondary heading text.
+
+{{< example >}}
+<h3>
+  Fancy display heading
+  <small class="text-body-secondary">With faded secondary text</small>
+</h3>
+{{< /example >}}-->
+
+## 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 utilities]({{< docsref "/utilities/sizing" >}}). Here are the associated `font-size`s depending on the breakpoints.
+
+{{< bs-table >}}
+| Display | Values for `xl` and upper | Values from `md` to `lg` | Values from `2xs` to `sm` |
+| --- | --- | --- | --- |
+| `.display-1` | `4.5rem` (72px) | `4rem` (64px) | `2.5rem` (40px) |
+| `.display-2` | `3.5rem` (56px) | `3rem` (48px) | `2.25rem` (36px) |
+| `.display-3` | `3rem` (48px) | `2.5rem` (40px) | `2rem` (32px) |
+{{< /bs-table >}}
+
+<details class="mb-medium">
+  <summary>See more details about the `.display` classes</summary>
+
+{{< bs-table >}}
+| Display | Values for `xl` and upper | Values from `md` to `lg` | Values from `2xs` to `sm` |
+| --- | --- | --- | --- |
+| `.display-1` | <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-2` | <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-3` | <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> |
+{{< /bs-table >}}
+
+</details>
+
+<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">Display 3</div>
+</div>
+
+```html
+<h1 class="display-1">Display 1</h1>
+<h1 class="display-2">Display 2</h1>
+<h1 class="display-3">Display 3</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`.
+
+{{< scss-docs name="display-headings" file="scss/_variables.scss" >}}
+
+## Regular text
+
+Since only [headings](#headings), [display headings](#display-headings) and `strong` text are meant to use **Bold** in main content, other contents should use regular font-weight. Each class sets `font-size` but also `line-height`, `letter-spacing`, and `max-width`. Here are the associated `font-size`s depending on the breakpoints. See our [Font utilities]({{< docsref "/utilities/text#font-size" >}}).
+
+{{< bs-table >}}
+| Regular text | Values for `xl` and upper | Values from `md` to `lg` | Values from `2xs` to `sm` |
+| --- | --- | --- | --- |
+| X-large | `1.25rem` (20px) | `1.125rem` (18px) | `1rem` (16px) |
+| Large | `1.125rem` (18px) | `1rem` (16px) | `1rem` (16px) |
+| Medium | `1rem` (16px) | `.875rem` (14px) | `.875rem` (14px) |
+| Small | `.875rem` (14px) | `.75rem` (12px) | `.75rem` (12px) |
+{{< /bs-table >}}
+
+<details class="mb-medium">
+  <summary>See more details about the regular text classes</summary>
+
+{{< bs-table >}}
+| Regular text | Values for `xl` and upper | Values from `md` to `lg` | Values from `2xs` to `sm` |
+| --- | --- | --- | --- |
+| X-large | <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> | <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>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> |
+| Large | <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> |
+| Medium | <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> |
+| Small | <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> |
+{{< /bs-table >}}
+
+</details>
+
+## Lead
+
+Make a paragraph stand out by adding `.lead`. It uses [Regular text](#regular-text) X-large.
+
+{{< example >}}
+<p class="lead">
+  This is a lead paragraph. It stands out from regular paragraphs.
+</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.
+- `<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.
+
+Add `.initialism` to an abbreviation for a slightly smaller font-size.
+
+{{< example >}}
+<p><abbr title="attribute">attr</abbr></p>
+<p><abbr title="HyperText Markup Language" class="initialism">HTML</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.
+
+{{< 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.
+
+{{< 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 mx-auto">
+    <p>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 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>
+{{< /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
+
+### Sass variables
+
+Headings have some dedicated variables for sizing and spacing.
+
+{{< scss-docs name="headings-variables" file="scss/_variables.scss" >}}
+
+Miscellaneous typography elements covered here and in [Reboot]({{< docsref "/content/reboot" >}}) also have dedicated variables.
+
+{{< scss-docs name="type-variables" file="scss/_variables.scss" >}}
+
+### Sass mixins
+
+There are no dedicated mixins for typography, but Bootstrap does use [Responsive Font Sizing (RFS)]({{< docsref "/getting-started/rfs" >}}).
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..02b2bbe913
--- /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-1">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/layout/containers.md b/site/content/docs/0.0/layout/containers.md
index aa4fa07686..bd08284682 100644
--- a/site/content/docs/0.0/layout/containers.md
+++ b/site/content/docs/0.0/layout/containers.md
@@ -126,6 +126,7 @@ If necessary, in specific cases, you can define a custom maximum width for the f
 This adjustment will apply to all containers using the `.container-max-width`class, ensuring that your layout stays within the specific width. Once the layout exceeds the `$ouds-size-max-width-grid` value at larger breakpoints, the container's margins and gutter values will remain unchanged.
 
 ```scss
+@import "../node-modules/ouds-web/scss/config";
 @import "../node_modules/ouds-web/scss/functions";
 
 $ouds-size-max-width-grid: 3500px; // Custom container max width
diff --git a/site/content/docs/0.0/migration-from-boosted.md b/site/content/docs/0.0/migration-from-boosted.md
index b754591641..1156b721f3 100644
--- a/site/content/docs/0.0/migration-from-boosted.md
+++ b/site/content/docs/0.0/migration-from-boosted.md
@@ -270,6 +270,7 @@ All responsive classes, helpers, and utilities have been updated accordingly to
   <summary>See the new import stack</summary>
 
   ```diff
+  + @import "config";
     @import "functions";
   + @import "tokens/raw";
   + @import "tokens/semantic";
diff --git a/site/content/docs/0.0/migration.md b/site/content/docs/0.0/migration.md
index 8a533ce09f..e52d7c0606 100644
--- a/site/content/docs/0.0/migration.md
+++ b/site/content/docs/0.0/migration.md
@@ -605,6 +605,7 @@ From now on, by default, OUDS Web won't embed Bootstrap elements (like helpers,
   <summary>See the new import stack</summary>
 
   ```diff
+  + @import "config";
     @import "functions";
   + @import "tokens/raw";
   + @import "tokens/semantic";
diff --git a/site/content/docs/0.0/utilities/api.md b/site/content/docs/0.0/utilities/api.md
index 8cec871cba..b2109d8ba1 100644
--- a/site/content/docs/0.0/utilities/api.md
+++ b/site/content/docs/0.0/utilities/api.md
@@ -409,6 +409,7 @@ $utilities: (
 New utilities can be added to the default `$utilities` map with a `map-merge`. Make sure our required Sass files and `_utilities.scss` are imported first, then use the `map-merge` to add your additional utilities. For example, here's how to add a responsive `cursor` utility with three values.
 
 ```scss
+@import "ouds-web/scss/config";
 @import "ouds-web/scss/functions";
 @import "ouds-web/scss/tokens/raw";
 @import "ouds-web/scss/tokens/semantic";
@@ -440,6 +441,7 @@ $utilities: map-merge(
 Modify existing utilities in the default `$utilities` map with `map-get` and `map-merge` functions. In the example below, we're adding an additional value to the `width` utilities. Start with an initial `map-merge` and then specify which utility you want to modify. From there, fetch the nested `"width"` map with `map-get` to access and modify the utility's options and values.
 
 ```scss
+@import "ouds-web/scss/config";
 @import "ouds-web/scss/functions";
 @import "ouds-web/scss/tokens/raw";
 @import "ouds-web/scss/tokens/semantic";
@@ -474,6 +476,7 @@ $utilities: map-merge(
 You can enable responsive classes for an existing set of utilities that are not currently responsive by default. For example, to make the `border` classes responsive:
 
 ```scss
+@import "ouds-web/scss/config";
 @import "ouds-web/scss/functions";
 @import "ouds-web/scss/tokens/raw";
 @import "ouds-web/scss/tokens/semantic";
@@ -544,6 +547,7 @@ This will now generate responsive variations of `.border` and `.border-none` for
 Used to another naming convention? The utilities API can be used to override the resulting `class` of a given utility—for example, to rename `.ms-*` utilities to `.ml-*`:
 
 ```scss
+@import "ouds-web/scss/config";
 @import "ouds-web/scss/functions";
 @import "ouds-web/scss/tokens/raw";
 @import "ouds-web/scss/tokens/semantic";
@@ -572,6 +576,7 @@ $utilities: map-merge(
 Remove any of the default utilities with the [`map-remove()` Sass function](https://sass-lang.com/documentation/modules/map/#remove).
 
 ```scss
+@import "ouds-web/scss/config";
 @import "ouds-web/scss/functions";
 @import "ouds-web/scss/tokens/raw";
 @import "ouds-web/scss/tokens/semantic";
@@ -592,6 +597,7 @@ $utilities: map-remove($utilities, "width", "float");
 You can also use the [`map-merge()` Sass function](https://sass-lang.com/documentation/modules/map/#merge) and set the group key to `null` to remove the utility.
 
 ```scss
+@import "ouds-web/scss/config";
 @import "ouds-web/scss/functions";
 @import "ouds-web/scss/tokens/raw";
 @import "ouds-web/scss/tokens/semantic";
@@ -618,6 +624,7 @@ $utilities: map-merge(
 You can add, remove, and modify many utilities all at once with the [`map-merge()` Sass function](https://sass-lang.com/documentation/modules/map/#merge). Here's how you can combine the previous examples into one larger map.
 
 ```scss
+@import "ouds-web/scss/config";
 @import "ouds-web/scss/functions";
 @import "ouds-web/scss/tokens/raw";
 @import "ouds-web/scss/tokens/semantic";
diff --git a/site/content/docs/0.0/utilities/text.md b/site/content/docs/0.0/utilities/text.md
index bbd1e66ef2..51cfb16f86 100644
--- a/site/content/docs/0.0/utilities/text.md
+++ b/site/content/docs/0.0/utilities/text.md
@@ -8,4 +8,296 @@ 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.
+
+{{< example >}}
+<p class="text-start">Start aligned text on all viewport sizes.</p>
+<p class="text-center">Center aligned text on all viewport sizes.</p>
+<p class="text-end">End aligned text on all viewport sizes.</p>
+
+<p class="text-xs-end">End aligned text on viewports sized XS (x-small) or wider.</p>
+<p class="text-sm-end">End aligned text on viewports sized SM (small) or wider.</p>
+<p class="text-md-end">End aligned text on viewports sized MD (medium) or wider.</p>
+<p class="text-lg-end">End aligned text on viewports sized LG (large) or wider.</p>
+<p class="text-xl-end">End aligned text on viewports sized XL (x-large) or wider.</p>
+<p class="text-2xl-end">End aligned text on viewports sized 2XL (2x-large) or wider.</p>
+<p class="text-3xl-end">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 utilities]({{< docsref "/utilities/sizing" >}}).
+
+<details class="mb-medium">
+  <summary>See the <code>font-size</code> associated to classes</summary>
+
+{{< bs-table >}}
+| Font size | Values for `xl` and upper | Values from `md` to `lg` | Values from `2xs` to `sm` |
+| --- | --- | --- | --- |
+| `.fs-dl` | `4.5rem` (72px) | `4rem` (64px) | `2.5rem` (40px) |
+| `.fs-dm` | `3.5rem` (56px) | `3rem` (48px) | `2.25rem` (36px) |
+| `.fs-ds` | `3rem` (48px) | `2.5rem` (40px) | `2rem` (32px) |
+| `.fs-hxl` | `2.5rem` (40px) | `2.25rem` (36px) | `1.75rem` (28px) |
+| `.fs-hl` | `2rem` (32px) | `1.75rem` (28px) | `1.5rem` (24px) |
+| `.fs-hm` | `1.75rem` (28px) | `1.5rem` (24px) | `1.25rem` (20px) |
+| `.fs-hs` | `1.5rem` (24px) | `1.25rem` (20px) | `1.125rem` (18px) |
+| `.fs-hxs` | `1.25rem` (20px) | `1.125rem` (18px) | `1rem` (16px) |
+| `.fs-bl` | `1.125rem` (18px) | `1rem` (16px) | `1rem` (16px) |
+| `.fs-bm` | `1rem` (16px) | `.875rem` (14px) | `.875rem` (14px) |
+| `.fs-bs` | `.875rem` (14px) | `.75rem` (12px) | `.75rem` (12px) |
+| `.fs-lxl` | `1.125rem` (18px) | `1.125rem` (18px) | `1.125rem` (18px) |
+| `.fs-ll` | `1rem` (16px) | `1rem` (16px) | `1rem` (16px) |
+| `.fs-lm` | `.875rem` (14px) | `.875rem` (14px) | `.875rem` (14px) |
+| `.fs-ls` | `.75rem` (12px) | `.75rem` (12px) | `.75rem` (12px) |
+| `.fs-cm` | `.875rem` (14px) | `.875rem` (14px) | `.875rem` (14px) |
+| `.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 >}}
+| Heading | Values for `xl` and upper | Values from `md` to `lg` | Values from `2xs` to `sm` |
+| --- | --- | --- | --- |
+| `.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> |
+| `.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> |
+| `.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> |
+| `.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> |
+| `.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> |
+| `.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> |
+| `.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> |
+| `.fs-hxs` | <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> | <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>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> |
+| `.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> |
+| `.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> |
+| `.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> |
+| `.fs-lxl` | <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></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></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></ul> |
+| `.fs-ll` | <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></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></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></ul> |
+| `.fs-lm` | <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> |
+| `.fs-ls` | <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> |
+| `.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> |
+| `.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-hxs">.fs-hxs 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-lxl">.fs-lxl text</p>
+<p class="fs-ll">.fs-ll text</p>
+<p class="fs-lm">.fs-lm text</p>
+<p class="fs-ls">.fs-ls 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.
+
+{{< 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
+
+// TODO LM: Ask if they should be available for people.
+Change the line height with `.lh-*` utilities.
+
+{{< 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 >}}
+
+Customize your available `line-height`s by modifying the `$line-heights` Sass map.
+
+## Line length
+
+// TODO LM: Check if they should be available for people
+Limit the line length with `.ll-*` utilities. It applies `max-width` property to an element with a width based on `ch` unit. This one was chosen because it is a font-based unit and because `1ch` is the width of "0" (which is around an average character width). It requires anything but `inline` to be applied.
+
+{{< example >}}
+<p class="ll-sm">This is a long paragraph written to show how the line-length 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="ll-md">This is a long paragraph written to show how the line-length 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><span class="ll-md"><strong>Inline element.</strong> This is a long paragraph written to show how the line-length of an inline element isn't 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.</span></p>
+<p class="ll-sm fs-3">This is a long paragraph written to show how the line-length 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 >}}
+
+## 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 placeholders and 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-fonts" 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 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..88491a8c10 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
@@ -214,7 +212,6 @@
     - title: Sizing
     - title: Spacing
     - title: Text
-      draft: true
     - title: Vertical align
     - title: Visibility
     - title: Z-index
diff --git a/site/layouts/partials/home/customize.html b/site/layouts/partials/home/customize.html
index 7680a66951..554aa5f0e1 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/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