From dcdbec764e7bf0949fa60c3fa8cecf294cfd5b7e Mon Sep 17 00:00:00 2001
From: Louis-Maxime Piton <louismaxime.piton@orange.com>
Date: Tue, 12 Nov 2024 14:59:33 +0100
Subject: [PATCH] feat: add Dimension tokens, utilities and documentation
 (#2754)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Julien Déramond <julien.deramond@orange.com>
Co-authored-by: Hannah Issermann <hannah.issermann@orange.com>
Co-authored-by: Vincent Prothais <vincent.prothais@orange.com>
---
 .bundlewatch.config.json                      |    12 +-
 .cspell.json                                  |    14 +-
 js/tests/integration/index.html               |     8 +-
 js/tests/unit/toast.spec.js                   |     4 +-
 js/tests/visual/collapse.html                 |     8 +-
 js/tests/visual/dropdown.html                 |    14 +-
 js/tests/visual/input.html                    |    12 +-
 js/tests/visual/modal.html                    |    10 +-
 js/tests/visual/toast.html                    |     8 +-
 js/tests/visual/tooltip.html                  |     8 +-
 scss/_maps.scss                               |   112 +-
 scss/_ouds-maps.scss                          |    48 -
 scss/_root.scss                               |    41 +
 scss/_utilities.scss                          |   348 +-
 scss/_variables.scss                          |    16 +-
 scss/ouds-web-grid.scss                       |     2 +-
 scss/ouds-web-reboot.scss                     |     2 +-
 scss/ouds-web-utilities.scss                  |     2 +-
 scss/ouds-web.scss                            |     2 +-
 .../customize/_ouds-web-bootstrap.test.scss   | 23526 +++++++++++++++-
 .../_auto-import-of-variables-dark.test.scss  |     2 +-
 scss/tests/mixins/_color-modes.test.scss      |     2 +-
 scss/tests/mixins/_utilities.test.scss        |     2 +-
 scss/tests/utilities/_api.test.scss           |     2 +-
 scss/tokens/_composite.scss                   |    15 +
 site/assets/js/stackblitz.js                  |     2 +-
 site/assets/js/tac.js                         |     2 +-
 site/assets/scss/_component-examples.scss     |    17 +
 site/assets/scss/docs.scss                    |     2 +-
 site/assets/scss/search.scss                  |     2 +-
 site/content/404.md                           |     2 +-
 site/content/docs/0.0/about/team.md           |     4 +-
 .../docs/0.0/customize/custom-libraries.md    |    10 +-
 site/content/docs/0.0/customize/options.md    |     8 +-
 .../docs/0.0/examples/grid-system/index.html  |    32 +-
 .../content/docs/0.0/examples/grid/index.html |   106 +-
 site/content/docs/0.0/helpers/stacks.md       |    36 +-
 .../docs/0.0/helpers/stretched-link.md        |    10 +-
 site/content/docs/0.0/layout/columns.md       |     8 +-
 site/content/docs/0.0/layout/containers.md    |     2 +-
 site/content/docs/0.0/layout/css-grid.md      |     2 +-
 site/content/docs/0.0/layout/grid.md          |     4 +-
 site/content/docs/0.0/layout/gutters.md       |   177 +-
 site/content/docs/0.0/layout/utilities.md     |     4 +-
 .../docs/0.0/migration-from-boosted.md        |   343 +-
 site/content/docs/0.0/migration.md            |   300 +-
 site/content/docs/0.0/utilities/api.md        |    22 +-
 site/content/docs/0.0/utilities/borders.md    |     6 +-
 site/content/docs/0.0/utilities/display.md    |     8 +-
 site/content/docs/0.0/utilities/flex.md       |   478 +-
 site/content/docs/0.0/utilities/opacity.md    |    28 +-
 site/content/docs/0.0/utilities/overflow.md   |    24 +-
 site/content/docs/0.0/utilities/position.md   |     8 +-
 site/content/docs/0.0/utilities/shadows.md    |    24 +-
 site/content/docs/0.0/utilities/sizing.md     |    55 +-
 site/content/docs/0.0/utilities/spacing.md    |   365 +-
 site/content/docs/0.0/utilities/z-index.md    |    10 +-
 site/content/docs/versions.md                 |     4 +-
 site/data/sidebar.yml                         |     3 -
 site/layouts/_default/404.html                |     2 +-
 site/layouts/_default/docs.html               |    32 +-
 site/layouts/_default/examples.html           |     2 +-
 site/layouts/_default/single.html             |    12 +-
 site/layouts/partials/docs-navbar.html        |     8 +-
 site/layouts/partials/docs-sidebar.html       |     8 +-
 site/layouts/partials/docs-subnav.html        |     4 +-
 site/layouts/partials/docs-versions.html      |     2 +-
 site/layouts/partials/examples/main.html      |    14 +-
 site/layouts/partials/footer.html             |    18 +-
 site/layouts/partials/guide-footer.md         |     2 +-
 site/layouts/partials/home/css-variables.html |    18 +-
 site/layouts/partials/home/customize.html     |    10 +-
 site/layouts/partials/home/get-started.html   |    22 +-
 site/layouts/partials/home/masthead.html      |    24 +-
 site/layouts/partials/skippy.html             |     6 +-
 site/layouts/partials/theme-toggler.html      |    10 +-
 .../shortcodes/bootstrap-compatibility.html   |     6 +-
 .../shortcodes/design-callout-alert.html      |     2 +-
 site/layouts/shortcodes/example.html          |     6 +-
 site/layouts/shortcodes/js-docs.html          |     8 +-
 site/layouts/shortcodes/scss-docs.html        |     8 +-
 site/layouts/shortcodes/svg-docs.html         |     2 +-
 stories/create-stories-from-doc.js            |     2 +-
 83 files changed, 25033 insertions(+), 1523 deletions(-)
 delete mode 100644 scss/_ouds-maps.scss
 create mode 100644 scss/tokens/_composite.scss

diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json
index 1ab9bc448c..1505b2be6f 100644
--- a/.bundlewatch.config.json
+++ b/.bundlewatch.config.json
@@ -2,11 +2,11 @@
   "files": [
     {
       "path": "./dist/css/ouds-web-bootstrap.css",
-      "maxSize": "51.0 kB"
+      "maxSize": "61.0 kB"
     },
     {
       "path": "./dist/css/ouds-web-bootstrap.min.css",
-      "maxSize": "47.75 kB"
+      "maxSize": "58.0 kB"
     },
     {
       "path": "./dist/css/ouds-web-grid.css",
@@ -26,19 +26,19 @@
     },
     {
       "path": "./dist/css/ouds-web-utilities.css",
-      "maxSize": "14.25 kB"
+      "maxSize": "20.75 kB"
     },
     {
       "path": "./dist/css/ouds-web-utilities.min.css",
-      "maxSize": "13.5 kB"
+      "maxSize": "19.75 kB"
     },
     {
       "path": "./dist/css/ouds-web.css",
-      "maxSize": "49.0 kB"
+      "maxSize": "54.75 kB"
     },
     {
       "path": "./dist/css/ouds-web.min.css",
-      "maxSize": "45.5 kB"
+      "maxSize": "51.5 kB"
     },
     {
       "path": "./dist/js/ouds-web.bundle.js",
diff --git a/.cspell.json b/.cspell.json
index 27b35a860b..1ed62dcfa0 100644
--- a/.cspell.json
+++ b/.cspell.json
@@ -80,7 +80,18 @@
     "navigations",
     "navs",
     "Neue",
+    "nhuge",
+    "njumbo",
+    "nmedium",
     "noindex",
+    "nshort",
+    "nshorter",
+    "nshortest",
+    "nsmash",
+    "nspacious",
+    "ntall",
+    "ntaller",
+    "ntallest",
     "Noto",
     "offcanvas",
     "offcanvases",
@@ -120,6 +131,7 @@
     "svgs",
     "tabbable",
     "tarteaucitron",
+    "tblrsexy",
     "textareas",
     "tiktok",
     "toggleable",
@@ -160,4 +172,4 @@
     "CHANGELOG.md"
   ],
   "useGitignore": true
-}
\ No newline at end of file
+}
diff --git a/js/tests/integration/index.html b/js/tests/integration/index.html
index b5dccb6af5..c4d9d30c14 100644
--- a/js/tests/integration/index.html
+++ b/js/tests/integration/index.html
@@ -11,15 +11,15 @@
     <title>Hello, world!</title>
   </head>
   <body>
-    <div class="container-fluid py-4">
+    <div class="container-fluid py-tallest">
       <h1>Hello, world!</h1>
 
-      <div class="mt-5">
-        <button type="button" class="btn btn-secondary mb-3" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
+      <div class="mt-huge">
+        <button type="button" class="btn btn-secondary mb-tall" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
           Tooltip on top
         </button>
 
-        <div id="carouselExampleIndicators" class="carousel slide mt-2" data-bs-ride="carousel">
+        <div id="carouselExampleIndicators" class="carousel slide mt-short" data-bs-ride="carousel">
           <div class="carousel-indicators">
             <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" aria-label="Slide 1"></button>
             <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" class="active" aria-current="true" aria-label="Slide 2"></button>
diff --git a/js/tests/unit/toast.spec.js b/js/tests/unit/toast.spec.js
index d5e1b8d2f1..70cc3e609f 100644
--- a/js/tests/unit/toast.spec.js
+++ b/js/tests/unit/toast.spec.js
@@ -66,7 +66,7 @@ describe('Toast', () => {
       return new Promise(resolve => {
         fixtureEl.innerHTML = [
           '<div class="toast" data-bs-delay="1" data-bs-autohide="false" data-bs-animation="false">',
-          '  <button type="button" class="ms-2 mb-1 btn-close" data-bs-dismiss="toast"><span class="visually-hidden">Close</span></button>', // OUDS mod: replace aria-label="Close" with a visually hidden span (a11y)
+          '  <button type="button" class="ms-short mb-shortest btn-close" data-bs-dismiss="toast"><span class="visually-hidden">Close</span></button>', // OUDS mod: replace aria-label="Close" with a visually hidden span (a11y)
           '</div>'
         ].join('')
 
@@ -99,7 +99,7 @@ describe('Toast', () => {
 
       fixtureEl.innerHTML = [
         '<div class="toast" data-bs-autohide="false" data-bs-animation="false">',
-        '  <button type="button" class="ms-2 mb-1 btn-close" data-bs-dismiss="toast"><span class="visually-hidden">Close</span></button>', // OUDS mod: replace aria-label="Close" with a visually hidden span (a11y)
+        '  <button type="button" class="ms-short mb-shortest btn-close" data-bs-dismiss="toast"><span class="visually-hidden">Close</span></button>', // OUDS mod: replace aria-label="Close" with a visually hidden span (a11y)
         '</div>'
       ].join('')
 
diff --git a/js/tests/visual/collapse.html b/js/tests/visual/collapse.html
index 38685e0618..4459c5f53c 100644
--- a/js/tests/visual/collapse.html
+++ b/js/tests/visual/collapse.html
@@ -13,7 +13,7 @@ <h1>Collapse <small>Bootstrap Visual Test</small></h1>
       <div id="accordion" role="tablist">
         <div class="card" role="presentation">
           <div class="card-header" role="tab" id="headingOne">
-            <h5 class="mb-0">
+            <h5 class="mb-none">
               <a data-bs-toggle="collapse" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                 Collapsible Group Item #1
               </a>
@@ -28,7 +28,7 @@ <h5 class="mb-0">
         </div>
         <div class="card" role="presentation">
           <div class="card-header" role="tab" id="headingTwo">
-            <h5 class="mb-0">
+            <h5 class="mb-none">
               <a class="collapsed" data-bs-toggle="collapse" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                 Collapsible Group Item #2
               </a>
@@ -42,7 +42,7 @@ <h5 class="mb-0">
         </div>
         <div class="card" role="presentation">
           <div class="card-header" role="tab" id="headingThree">
-            <h5 class="mb-0">
+            <h5 class="mb-none">
               <a class="collapsed" data-bs-toggle="collapse" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                 Collapsible Group Item #3
               </a>
@@ -56,7 +56,7 @@ <h5 class="mb-0">
         </div>
         <div class="card" role="presentation">
           <div class="card-header" role="tab" id="headingFour">
-            <h5 class="mb-0">
+            <h5 class="mb-none">
               <a class="collapsed" data-bs-toggle="collapse" href="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
                 Collapsible Group Item with XSS in data-bs-parent
               </a>
diff --git a/js/tests/visual/dropdown.html b/js/tests/visual/dropdown.html
index 5341935511..928df91931 100644
--- a/js/tests/visual/dropdown.html
+++ b/js/tests/visual/dropdown.html
@@ -39,7 +39,7 @@ <h1>Dropdown <small>Bootstrap Visual Test</small></h1>
         </div>
       </nav>
 
-      <ul class="nav nav-pills mt-3">
+      <ul class="nav nav-pills mt-tall">
         <li class="nav-item">
           <a class="nav-link active" href="#">Active</a>
         </li>
@@ -60,7 +60,7 @@ <h1>Dropdown <small>Bootstrap Visual Test</small></h1>
       </ul>
 
       <div class="row">
-        <div class="col-sm-12 mt-4">
+        <div class="col-sm-12 mt-tallest">
           <div class="dropdown">
             <button type="button" class="btn btn-secondary" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>
             <div class="dropdown-menu">
@@ -80,7 +80,7 @@ <h1>Dropdown <small>Bootstrap Visual Test</small></h1>
           </div>
         </div>
 
-        <div class="col-sm-12 mt-4">
+        <div class="col-sm-12 mt-tallest">
           <div class="btn-group dropup">
             <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Dropup</button>
             <ul class="dropdown-menu">
@@ -102,7 +102,7 @@ <h1>Dropdown <small>Bootstrap Visual Test</small></h1>
           </div>
         </div>
 
-        <div class="col-sm-12 mt-4">
+        <div class="col-sm-12 mt-tallest">
           <div class="btn-group dropup">
             <a href="#" class="btn btn-secondary">Dropup split align end</a>
             <button type="button" id="dropdown-page-subheader-button-3" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
@@ -124,7 +124,7 @@ <h1>Dropdown <small>Bootstrap Visual Test</small></h1>
           </div>
         </div>
 
-        <div class="col-sm-12 mt-4">
+        <div class="col-sm-12 mt-tallest">
           <div class="btn-group dropend">
             <a href="#" class="btn btn-secondary">Dropend split</a>
             <button type="button" id="dropdown-page-subheader-button-4" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
@@ -172,7 +172,7 @@ <h1>Dropdown <small>Bootstrap Visual Test</small></h1>
       </div>
 
       <div class="row">
-        <div class="col-sm-3 mt-4">
+        <div class="col-sm-3 mt-tallest">
           <div class="btn-group dropdown">
             <button type="button" class="btn btn-secondary">Dropdown reference</button>
             <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-reference="parent">
@@ -185,7 +185,7 @@ <h1>Dropdown <small>Bootstrap Visual Test</small></h1>
             </ul>
           </div>
         </div>
-        <div class="col-sm-3 mt-4">
+        <div class="col-sm-3 mt-tallest">
           <div class="dropdown">
             <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false">
               Dropdown menu without Popper
diff --git a/js/tests/visual/input.html b/js/tests/visual/input.html
index 393c73d28b..bfb28e1faa 100644
--- a/js/tests/visual/input.html
+++ b/js/tests/visual/input.html
@@ -13,26 +13,26 @@ <h1>Input <small>Bootstrap Visual Test</small></h1>
 
       <h2>No layout</h2>
 
-      <div class="mb-3">
+      <div class="mb-tall">
         Text
         <input class="form-control">
       </div>
-      <div class="mb-3">
+      <div class="mb-tall">
         Email
         <input type="email" class="form-control">
       </div>
-      <div class="mb-3">
+      <div class="mb-tall">
         Number
         <input type="number" class="form-control">
       </div>
-      <div class="mb-3">
+      <div class="mb-tall">
         Date
         <input type="date" class="form-control">
       </div>
 
       <h2>Flex</h2>
 
-      <div class="d-flex flex-wrap gap-3 mb-3">
+      <div class="d-flex flex-wrap gap-tall mb-tall">
         <div>
           Text
           <input class="form-control">
@@ -53,7 +53,7 @@ <h2>Flex</h2>
 
       <h2>Grid</h2>
 
-      <div class="row mb-3">
+      <div class="row mb-tall">
         <div class="col">
           Text
           <input class="form-control">
diff --git a/js/tests/visual/modal.html b/js/tests/visual/modal.html
index 11f3701ad0..c93a2f9f1d 100644
--- a/js/tests/visual/modal.html
+++ b/js/tests/visual/modal.html
@@ -35,7 +35,7 @@
       </div>
     </nav>
 
-    <div class="container-fluid mt-3">
+    <div class="container-fluid mt-tall">
       <h1>Modal <small>Bootstrap Visual Test</small></h1>
 
       <div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="myModalLabel" aria-hidden="true">
@@ -59,7 +59,7 @@ <h4>Tooltips in a modal</h4>
               <div id="accordion" role="tablist">
                 <div class="card" role="presentation">
                   <div class="card-header" role="tab" id="headingOne">
-                    <h5 class="mb-0">
+                    <h5 class="mb-none">
                       <a data-bs-toggle="collapse" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                         Collapsible Group Item #1
                       </a>
@@ -74,7 +74,7 @@ <h5 class="mb-0">
                 </div>
                 <div class="card" role="presentation">
                   <div class="card-header" role="tab" id="headingTwo">
-                    <h5 class="mb-0">
+                    <h5 class="mb-none">
                       <a class="collapsed" data-bs-toggle="collapse" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                         Collapsible Group Item #2
                       </a>
@@ -88,7 +88,7 @@ <h5 class="mb-0">
                 </div>
                 <div class="card" role="presentation">
                   <div class="card-header" role="tab" id="headingThree">
-                    <h5 class="mb-0">
+                    <h5 class="mb-none">
                       <a class="collapsed" data-bs-toggle="collapse" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                         Collapsible Group Item #3
                       </a>
@@ -188,7 +188,7 @@ <h1 class="modal-title h4" id="slowModalLabel">Lorem slowly</h1>
 
       <br><br>
 
-      <div class="text-bg-dark p-2" id="tall" style="display: none;">
+      <div class="text-bg-dark p-short" id="tall" style="display: none;">
         Tall body content to force the page to have a scrollbar.
       </div>
 
diff --git a/js/tests/visual/toast.html b/js/tests/visual/toast.html
index ec5201d23c..31d78554f8 100644
--- a/js/tests/visual/toast.html
+++ b/js/tests/visual/toast.html
@@ -17,7 +17,7 @@
     <div class="container-fluid">
       <h1>Toast <small>Bootstrap Visual Test</small></h1>
 
-      <div class="row mt-3">
+      <div class="row mt-tall">
         <div class="col-md-12">
           <button id="btnShowToast" class="btn btn-primary">Show toast</button>
           <button id="btnHideToast" class="btn btn-primary">Hide toast</button>
@@ -28,7 +28,7 @@ <h1>Toast <small>Bootstrap Visual Test</small></h1>
     <div class="notifications">
       <div id="toastAutoHide" class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-bs-delay="2000">
         <div class="toast-header">
-          <span class="d-block bg-primary rounded me-2" style="width: 20px; height: 20px;"></span>
+          <span class="d-block bg-primary rounded me-short" style="width: 20px; height: 20px;"></span>
           <strong class="me-auto">Bootstrap</strong>
           <small>11 mins ago</small>
         </div>
@@ -39,10 +39,10 @@ <h1>Toast <small>Bootstrap Visual Test</small></h1>
 
       <div class="toast" data-bs-autohide="false" role="alert" aria-live="assertive" aria-atomic="true">
         <div class="toast-header">
-          <span class="d-block bg-primary rounded me-2" style="width: 20px; height: 20px;"></span>
+          <span class="d-block bg-primary rounded me-short" style="width: 20px; height: 20px;"></span>
           <strong class="me-auto">Bootstrap</strong>
           <small class="text-body-secondary">2 seconds ago</small>
-          <button type="button" class="ms-2 mb-1 btn-close" data-bs-dismiss="toast"><span class="visually-hidden">Close</span></button><!--OUDS mod: a11y-->
+          <button type="button" class="ms-short mb-shortest btn-close" data-bs-dismiss="toast"><span class="visually-hidden">Close</span></button><!--OUDS mod: a11y-->
         </div>
         <div class="toast-body">
           Heads up, toasts will stack automatically
diff --git a/js/tests/visual/tooltip.html b/js/tests/visual/tooltip.html
index 4e759d54e8..5fca773a60 100644
--- a/js/tests/visual/tooltip.html
+++ b/js/tests/visual/tooltip.html
@@ -63,21 +63,21 @@ <h1>Tooltip <small>OUDS Web Visual Test</small></h1>
         <div class="col-sm-3">
           <div id="target" title="Test tooltip on transformed element"></div>
         </div>
-        <div id="shadow" class="pt-5"></div>
+        <div id="shadow" class="pt-huge"></div>
       </div>
       <div id="customContainer"></div>
 
-      <div class="row mt-4 border-top">
+      <div class="row mt-tallest border-top">
         <hr>
         <div class="h4">Test Selector triggered tooltips</div>
         <div id="wrapperTriggeredBySelector">
-          <div class="py-2 selectorButtonsBlock">
+          <div class="py-short selectorButtonsBlock">
             <button type="button" class="btn btn-secondary bs-dynamic-tooltip" title="random title">Using title</button>
             <button type="button" class="btn btn-secondary bs-dynamic-tooltip" data-bs-title="random title">Using bs-title</button>
           </div>
 
         </div>
-        <div class="mt-3">
+        <div class="mt-tall">
           <button type="button" class="btn btn-primary" onclick="duplicateButtons()">Duplicate above two buttons</button>
         </div>
       </div>
diff --git a/scss/_maps.scss b/scss/_maps.scss
index 7e2c6e9058..31e2fc3935 100644
--- a/scss/_maps.scss
+++ b/scss/_maps.scss
@@ -1,3 +1,100 @@
+// OUDS mod
+// scss-docs-start ouds-maps-borders
+$ouds-border-radiuses: (
+  null:       $ouds-border-radius-default,
+  "none":     $ouds-border-radius-none,
+  "short":    $ouds-border-radius-short,
+  "medium":   $ouds-border-radius-medium,
+  "tall":     $ouds-border-radius-tall,
+  "pill":     px-to-rem($ouds-border-radius-pill),
+  "circle":   50%
+) !default;
+
+$ouds-border-styles: (
+  "drag":     $ouds-border-style-drag
+) !default;
+
+$ouds-border-widths: (
+  "thin":     $ouds-border-width-thin,
+  "medium":   $ouds-border-width-medium,
+  "thick":    $ouds-border-width-thick,
+  "thicker":  $ouds-border-width-thicker,
+) !default;
+// scss-docs-end ouds-maps-borders
+
+// scss-docs-start ouds-maps-dimension
+$ouds-dimension-space-scaled: (
+  "none": var(--#{$prefix}space-scaled-none),
+  "smash": var(--#{$prefix}space-scaled-smash),
+  "shortest": var(--#{$prefix}space-scaled-shortest),
+  "shorter": var(--#{$prefix}space-scaled-shorter),
+  "short": var(--#{$prefix}space-scaled-short),
+  "medium": var(--#{$prefix}space-scaled-medium),
+  "tall": var(--#{$prefix}space-scaled-tall),
+  "taller": var(--#{$prefix}space-scaled-taller),
+  "tallest": var(--#{$prefix}space-scaled-tallest),
+  "spacious": var(--#{$prefix}space-scaled-spacious)
+) !default;
+
+// stylelint-disable function-disallowed-list
+$ouds-dimension-negative-space-scaled: (
+  "nsmash": calc(-1 * var(--#{$prefix}space-scaled-smash)),
+  "nshortest": calc(-1 * var(--#{$prefix}space-scaled-shortest)),
+  "nshorter": calc(-1 * var(--#{$prefix}space-scaled-shorter)),
+  "nshort": calc(-1 * var(--#{$prefix}space-scaled-short)),
+  "nmedium": calc(-1 * var(--#{$prefix}space-scaled-medium)),
+  "ntall": calc(-1 * var(--#{$prefix}space-scaled-tall)),
+  "ntaller": calc(-1 * var(--#{$prefix}space-scaled-taller)),
+  "ntallest": calc(-1 * var(--#{$prefix}space-scaled-tallest)),
+  "nspacious": calc(-1 * var(--#{$prefix}space-scaled-spacious))
+) !default;
+// stylelint-enable function-disallowed-list
+
+// scss-docs-start ouds-maps-dimension-fixed
+$ouds-dimension-space-fixed: (
+  "none": $ouds-space-fixed-none,
+  "smash": $ouds-space-fixed-smash,
+  "shortest": $ouds-space-fixed-shortest,
+  "shorter": $ouds-space-fixed-shorter,
+  "short": $ouds-space-fixed-short,
+  "medium": $ouds-space-fixed-medium,
+  "tall": $ouds-space-fixed-tall,
+  "taller": $ouds-space-fixed-taller,
+  "tallest": $ouds-space-fixed-tallest,
+  "spacious": $ouds-space-fixed-spacious,
+  "huge": $ouds-space-fixed-huge,
+  "jumbo": $ouds-space-fixed-jumbo
+) !default;
+// scss-docs-end ouds-maps-dimension-fixed
+
+$ouds-dimension-negative-space-fixed: if($enable-negative-margins, negativify-map($ouds-dimension-space-fixed), null) !default;
+// scss-docs-end ouds-maps-dimension
+
+// scss-docs-start ouds-maps-elevations
+$ouds-elevations: (
+  "none":                       $ouds-elevation-none,
+  "raised":                     $ouds-elevation-raised,
+  "drag":                       $ouds-elevation-drag,
+  "overlay-default":            $ouds-elevation-overlay-default,
+  "overlay-emphasized":         $ouds-elevation-overlay-emphasized,
+  "sticky-default":             $ouds-elevation-sticky-default,
+  "sticky-emphasized":          $ouds-elevation-sticky-emphasized,
+  "sticky-navigation-scrolled": $ouds-elevation-sticky-navigation-scrolled
+) !default;
+// scss-docs-end ouds-maps-elevations
+
+// scss-docs-start ouds-maps-opacities
+$ouds-opacities: (
+  "transparent": $ouds-opacity-transparent,
+  "weaker":      $ouds-opacity-weaker,
+  "weak":        $ouds-opacity-weak,
+  "medium":      $ouds-opacity-medium,
+  "strong":      $ouds-opacity-strong,
+  "opaque":      $ouds-opacity-opaque
+) !default;
+// scss-docs-end ouds-maps-opacities
+// End mod
+
 // Re-assigned maps
 //
 // Placed here so that others can override the default Sass maps and see automatic updates to utilities and more.
@@ -195,20 +292,7 @@ $grid-gutter-widths: (
 // scss-docs-end grid-gutters
 
 // scss-docs-start gutters
-$gutters: (
-  none: 0,
-  smash: 2px,
-  shortest: 4px,
-  shorter: 8px,
-  short: 12px,
-  medium: 16px,
-  tall: 24px,
-  taller: 32px,
-  tallest: 40px,
-  spacious: 48px,
-  huge: 56px,
-  jumbo: 64px
-) !default;
+$gutters: $ouds-dimension-space-fixed !default; // instead of `$spacers`
 // scss-docs-end gutters
 
 @if $enable-bootstrap-compatibility {
diff --git a/scss/_ouds-maps.scss b/scss/_ouds-maps.scss
deleted file mode 100644
index 4db5eb18e3..0000000000
--- a/scss/_ouds-maps.scss
+++ /dev/null
@@ -1,48 +0,0 @@
-// OUDS mod
-// scss-docs-start ouds-maps-borders
-$ouds-border-radiuses: (
-  null:       $ouds-border-radius-default,
-  "none":     $ouds-border-radius-none,
-  "short":    $ouds-border-radius-short,
-  "medium":   $ouds-border-radius-medium,
-  "tall":     $ouds-border-radius-tall,
-  "pill":     px-to-rem($ouds-border-radius-pill),
-  "circle":   50%
-) !default;
-
-$ouds-border-styles: (
-  "drag":     $ouds-border-style-drag
-) !default;
-
-$ouds-border-widths: (
-  "thin":     $ouds-border-width-thin,
-  "medium":   $ouds-border-width-medium,
-  "thick":    $ouds-border-width-thick,
-  "thicker":  $ouds-border-width-thicker,
-) !default;
-// scss-docs-end ouds-maps-borders
-
-// scss-docs-start ouds-maps-elevations
-$ouds-elevations: (
-  "none":                       $ouds-elevation-x-none $ouds-elevation-y-none $ouds-elevation-blur-none $ouds-elevation-spread-none $ouds-elevation-color-none,
-  "raised":                     $ouds-elevation-x-raised $ouds-elevation-y-raised $ouds-elevation-blur-raised $ouds-elevation-spread-raised $ouds-elevation-color-raised,
-  "drag":                       $ouds-elevation-x-drag $ouds-elevation-y-drag $ouds-elevation-blur-drag $ouds-elevation-spread-drag $ouds-elevation-color-drag,
-  "overlay-default":            $ouds-elevation-x-overlay-default $ouds-elevation-y-overlay-default $ouds-elevation-blur-overlay-default $ouds-elevation-spread-overlay-default $ouds-elevation-color-overlay-default,
-  "overlay-emphasized":         $ouds-elevation-x-overlay-emphasized $ouds-elevation-y-overlay-emphasized $ouds-elevation-blur-overlay-emphasized $ouds-elevation-spread-overlay-emphasized $ouds-elevation-color-overlay-emphasized,
-  "sticky-default":             $ouds-elevation-x-sticky-default $ouds-elevation-y-sticky-default $ouds-elevation-blur-sticky-default $ouds-elevation-spread-sticky-default $ouds-elevation-color-sticky-default,
-  "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,
-  "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-maps-elevations
-
-// scss-docs-start ouds-maps-opacities
-$ouds-opacities: (
-  "transparent": $ouds-opacity-transparent,
-  "weaker":      $ouds-opacity-weaker,
-  "weak":        $ouds-opacity-weak,
-  "medium":      $ouds-opacity-medium,
-  "strong":      $ouds-opacity-strong,
-  "opaque":      $ouds-opacity-opaque
-) !default;
-// scss-docs-end ouds-maps-opacities
-// End mod
diff --git a/scss/_root.scss b/scss/_root.scss
index c107400155..c4f23e8ff4 100644
--- a/scss/_root.scss
+++ b/scss/_root.scss
@@ -122,6 +122,47 @@
   --#{$prefix}border-color-translucent: #{$border-color-translucent};
   // scss-docs-end root-border-var-ouds
 
+  // OUDS mod
+  // scss-docs-start root-space-scaled-var-ouds
+  --#{$prefix}space-scaled-none: #{$ouds-space-scaled-none-mobile};
+  --#{$prefix}space-scaled-smash: #{$ouds-space-scaled-smash-mobile};
+  --#{$prefix}space-scaled-shortest: #{$ouds-space-scaled-shortest-mobile};
+  --#{$prefix}space-scaled-shorter: #{$ouds-space-scaled-shorter-mobile};
+  --#{$prefix}space-scaled-short: #{$ouds-space-scaled-short-mobile};
+  --#{$prefix}space-scaled-medium: #{$ouds-space-scaled-medium-mobile};
+  --#{$prefix}space-scaled-tall: #{$ouds-space-scaled-tall-mobile};
+  --#{$prefix}space-scaled-taller: #{$ouds-space-scaled-taller-mobile};
+  --#{$prefix}space-scaled-tallest: #{$ouds-space-scaled-tallest-mobile};
+  --#{$prefix}space-scaled-spacious: #{$ouds-space-scaled-spacious-mobile};
+
+  @include media-breakpoint-up(md) {
+    --#{$prefix}space-scaled-none: #{$ouds-space-scaled-none-tablet};
+    --#{$prefix}space-scaled-smash: #{$ouds-space-scaled-smash-tablet};
+    --#{$prefix}space-scaled-shortest: #{$ouds-space-scaled-shortest-tablet};
+    --#{$prefix}space-scaled-shorter: #{$ouds-space-scaled-shorter-tablet};
+    --#{$prefix}space-scaled-short: #{$ouds-space-scaled-short-tablet};
+    --#{$prefix}space-scaled-medium: #{$ouds-space-scaled-medium-tablet};
+    --#{$prefix}space-scaled-tall: #{$ouds-space-scaled-tall-tablet};
+    --#{$prefix}space-scaled-taller: #{$ouds-space-scaled-taller-tablet};
+    --#{$prefix}space-scaled-tallest: #{$ouds-space-scaled-tallest-tablet};
+    --#{$prefix}space-scaled-spacious: #{$ouds-space-scaled-spacious-tablet};
+  }
+
+  @include media-breakpoint-up(xl) {
+    --#{$prefix}space-scaled-none: #{$ouds-space-scaled-none-desktop};
+    --#{$prefix}space-scaled-smash: #{$ouds-space-scaled-smash-desktop};
+    --#{$prefix}space-scaled-shortest: #{$ouds-space-scaled-shortest-desktop};
+    --#{$prefix}space-scaled-shorter: #{$ouds-space-scaled-shorter-desktop};
+    --#{$prefix}space-scaled-short: #{$ouds-space-scaled-short-desktop};
+    --#{$prefix}space-scaled-medium: #{$ouds-space-scaled-medium-desktop};
+    --#{$prefix}space-scaled-tall: #{$ouds-space-scaled-tall-desktop};
+    --#{$prefix}space-scaled-taller: #{$ouds-space-scaled-taller-desktop};
+    --#{$prefix}space-scaled-tallest: #{$ouds-space-scaled-tallest-desktop};
+    --#{$prefix}space-scaled-spacious: #{$ouds-space-scaled-spacious-desktop};
+  }
+  // scss-docs-end root-space-scaled-var-ouds
+  // End mod
+
   // scss-docs-start root-border-var
   @if $enable-bootstrap-compatibility {
     --#{$prefix}border-radius: #{$border-radius};
diff --git a/scss/_utilities.scss b/scss/_utilities.scss
index c288006092..144d15ed1f 100644
--- a/scss/_utilities.scss
+++ b/scss/_utilities.scss
@@ -426,156 +426,454 @@ $utilities: map-merge(
       ),
     ),
     // scss-docs-end utils-flex
-    // Margin utilities
     // scss-docs-start utils-spacing
+    // Margin utilities
     "margin": (
       responsive: true,
       property: margin,
       class: m,
-      values: map-merge($spacers, (auto: auto))
+      values: $spacers, // OUDS mod: `auto` value handled by `margin-ouds`
+      bootstrap-compatibility: true
     ),
     "margin-x": (
       responsive: true,
       property: margin-right margin-left,
       class: mx,
-      values: map-merge($spacers, (auto: auto))
+      values: $spacers, // OUDS mod: `auto` value handled by `margin-x-ouds`
+      bootstrap-compatibility: true
     ),
     "margin-y": (
       responsive: true,
       property: margin-top margin-bottom,
       class: my,
-      values: map-merge($spacers, (auto: auto))
+      values: $spacers, // OUDS mod: `auto` value handled by `margin-y-ouds`
+      bootstrap-compatibility: true
     ),
     "margin-top": (
       responsive: true,
       property: margin-top,
       class: mt,
-      values: map-merge($spacers, (auto: auto))
+      values: $spacers, // OUDS mod: `auto` value handled by `margin-top-ouds`
+      bootstrap-compatibility: true
     ),
     "margin-end": (
       responsive: true,
       property: margin-right,
       class: me,
-      values: map-merge($spacers, (auto: auto))
+      values: $spacers, // OUDS mod: `auto` value handled by `margin-end-ouds`
+      bootstrap-compatibility: true
     ),
     "margin-bottom": (
       responsive: true,
       property: margin-bottom,
       class: mb,
-      values: map-merge($spacers, (auto: auto))
+      values: $spacers, // OUDS mod: `auto` value handled by `margin-bottom-ouds`
+      bootstrap-compatibility: true
     ),
     "margin-start": (
       responsive: true,
       property: margin-left,
       class: ms,
-      values: map-merge($spacers, (auto: auto))
+      values: $spacers, // OUDS mod: `auto` value handled by `margin-start-ouds`
+      bootstrap-compatibility: true
     ),
     // Negative margin utilities
     "negative-margin": (
       responsive: true,
       property: margin,
       class: m,
-      values: $negative-spacers
+      values: $negative-spacers,
+      bootstrap-compatibility: true
     ),
     "negative-margin-x": (
       responsive: true,
       property: margin-right margin-left,
       class: mx,
-      values: $negative-spacers
+      values: $negative-spacers,
+      bootstrap-compatibility: true
     ),
     "negative-margin-y": (
       responsive: true,
       property: margin-top margin-bottom,
       class: my,
-      values: $negative-spacers
+      values: $negative-spacers,
+      bootstrap-compatibility: true
     ),
     "negative-margin-top": (
       responsive: true,
       property: margin-top,
       class: mt,
-      values: $negative-spacers
+      values: $negative-spacers,
+      bootstrap-compatibility: true
     ),
     "negative-margin-end": (
       responsive: true,
       property: margin-right,
       class: me,
-      values: $negative-spacers
+      values: $negative-spacers,
+      bootstrap-compatibility: true
     ),
     "negative-margin-bottom": (
       responsive: true,
       property: margin-bottom,
       class: mb,
-      values: $negative-spacers
+      values: $negative-spacers,
+      bootstrap-compatibility: true
     ),
     "negative-margin-start": (
       responsive: true,
       property: margin-left,
       class: ms,
-      values: $negative-spacers
+      values: $negative-spacers,
+      bootstrap-compatibility: true
     ),
     // Padding utilities
     "padding": (
       responsive: true,
       property: padding,
       class: p,
-      values: $spacers
+      values: $spacers,
+      bootstrap-compatibility: true
     ),
     "padding-x": (
       responsive: true,
       property: padding-right padding-left,
       class: px,
-      values: $spacers
+      values: $spacers,
+      bootstrap-compatibility: true
     ),
     "padding-y": (
       responsive: true,
       property: padding-top padding-bottom,
       class: py,
-      values: $spacers
+      values: $spacers,
+      bootstrap-compatibility: true
     ),
     "padding-top": (
       responsive: true,
       property: padding-top,
       class: pt,
-      values: $spacers
+      values: $spacers,
+      bootstrap-compatibility: true
     ),
     "padding-end": (
       responsive: true,
       property: padding-right,
       class: pe,
-      values: $spacers
+      values: $spacers,
+      bootstrap-compatibility: true
     ),
     "padding-bottom": (
       responsive: true,
       property: padding-bottom,
       class: pb,
-      values: $spacers
+      values: $spacers,
+      bootstrap-compatibility: true
     ),
     "padding-start": (
       responsive: true,
       property: padding-left,
       class: ps,
-      values: $spacers
+      values: $spacers,
+      bootstrap-compatibility: true
     ),
     // Gap utility
     "gap": (
       responsive: true,
       property: gap,
       class: gap,
-      values: $spacers
+      values: $spacers,
+      bootstrap-compatibility: true
     ),
     "row-gap": (
       responsive: true,
       property: row-gap,
       class: row-gap,
-      values: $spacers
+      values: $spacers,
+      bootstrap-compatibility: true
     ),
     "column-gap": (
       responsive: true,
       property: column-gap,
       class: column-gap,
-      values: $spacers
+      values: $spacers,
+      bootstrap-compatibility: true
     ),
     // scss-docs-end utils-spacing
+    // OUDS mod
+    // scss-docs-start utils-spacing-ouds
+    // Scaled margin utilities
+    "margin-scaled-ouds": (
+      property: margin,
+      class: m-scaled,
+      values: $ouds-dimension-space-scaled
+    ),
+    "margin-x-scaled-ouds": (
+      property: margin-right margin-left,
+      class: mx-scaled,
+      values: $ouds-dimension-space-scaled
+    ),
+    "margin-y-scaled-ouds": (
+      property: margin-top margin-bottom,
+      class: my-scaled,
+      values: $ouds-dimension-space-scaled
+    ),
+    "margin-top-scaled-ouds": (
+      property: margin-top,
+      class: mt-scaled,
+      values: $ouds-dimension-space-scaled
+    ),
+    "margin-end-scaled-ouds": (
+      property: margin-right,
+      class: me-scaled,
+      values: $ouds-dimension-space-scaled
+    ),
+    "margin-bottom-scaled-ouds": (
+      property: margin-bottom,
+      class: mb-scaled,
+      values: $ouds-dimension-space-scaled
+    ),
+    "margin-start-scaled-ouds": (
+      property: margin-left,
+      class: ms-scaled,
+      values: $ouds-dimension-space-scaled
+    ),
+    // Negative scaled margin utilities
+    "negative-margin-scaled-ouds": (
+      property: margin,
+      class: m-scaled,
+      values: $ouds-dimension-negative-space-scaled
+    ),
+    "negative-margin-x-scaled-ouds": (
+      property: margin-right margin-left,
+      class: mx-scaled,
+      values: $ouds-dimension-negative-space-scaled
+    ),
+    "negative-margin-y-scaled-ouds": (
+      property: margin-top margin-bottom,
+      class: my-scaled,
+      values: $ouds-dimension-negative-space-scaled
+    ),
+    "negative-margin-top-scaled-ouds": (
+      property: margin-top,
+      class: mt-scaled,
+      values: $ouds-dimension-negative-space-scaled
+    ),
+    "negative-margin-end-scaled-ouds": (
+      property: margin-right,
+      class: me-scaled,
+      values: $ouds-dimension-negative-space-scaled
+    ),
+    "negative-margin-bottom-scaled-ouds": (
+      property: margin-bottom,
+      class: mb-scaled,
+      values: $ouds-dimension-negative-space-scaled
+    ),
+    "negative-margin-start-scaled-ouds": (
+      property: margin-left,
+      class: ms-scaled,
+      values: $ouds-dimension-negative-space-scaled
+    ),
+    // Fixed margin utilities
+    "margin-ouds": (
+      responsive: true,
+      property: margin,
+      class: m,
+      values: map-merge($ouds-dimension-space-fixed, (auto: auto))
+    ),
+    "margin-x-ouds": (
+      responsive: true,
+      property: margin-right margin-left,
+      class: mx,
+      values: map-merge($ouds-dimension-space-fixed, (auto: auto))
+    ),
+    "margin-y-ouds": (
+      responsive: true,
+      property: margin-top margin-bottom,
+      class: my,
+      values: map-merge($ouds-dimension-space-fixed, (auto: auto))
+    ),
+    "margin-top-ouds": (
+      responsive: true,
+      property: margin-top,
+      class: mt,
+      values: map-merge($ouds-dimension-space-fixed, (auto: auto))
+    ),
+    "margin-end-ouds": (
+      responsive: true,
+      property: margin-right,
+      class: me,
+      values: map-merge($ouds-dimension-space-fixed, (auto: auto))
+    ),
+    "margin-bottom-ouds": (
+      responsive: true,
+      property: margin-bottom,
+      class: mb,
+      values: map-merge($ouds-dimension-space-fixed, (auto: auto))
+    ),
+    "margin-start-ouds": (
+      responsive: true,
+      property: margin-left,
+      class: ms,
+      values: map-merge($ouds-dimension-space-fixed, (auto: auto))
+    ),
+    // Negative fixed margin utilities
+    "negative-margin-ouds": (
+      responsive: true,
+      property: margin,
+      class: m,
+      values: $ouds-dimension-negative-space-fixed
+    ),
+    "negative-margin-x-ouds": (
+      responsive: true,
+      property: margin-right margin-left,
+      class: mx,
+      values: $ouds-dimension-negative-space-fixed
+    ),
+    "negative-margin-y-ouds": (
+      responsive: true,
+      property: margin-top margin-bottom,
+      class: my,
+      values: $ouds-dimension-negative-space-fixed
+    ),
+    "negative-margin-top-ouds": (
+      responsive: true,
+      property: margin-top,
+      class: mt,
+      values: $ouds-dimension-negative-space-fixed
+    ),
+    "negative-margin-end-ouds": (
+      responsive: true,
+      property: margin-right,
+      class: me,
+      values: $ouds-dimension-negative-space-fixed
+    ),
+    "negative-margin-bottom-ouds": (
+      responsive: true,
+      property: margin-bottom,
+      class: mb,
+      values: $ouds-dimension-negative-space-fixed
+    ),
+    "negative-margin-start-ouds": (
+      responsive: true,
+      property: margin-left,
+      class: ms,
+      values: $ouds-dimension-negative-space-fixed
+    ),
+    // Padding utilities
+    "padding-scaled-ouds": (
+      property: padding,
+      class: p-scaled,
+      values: $ouds-dimension-space-scaled
+    ),
+    "padding-x-scaled-ouds": (
+      property: padding-right padding-left,
+      class: px-scaled,
+      values: $ouds-dimension-space-scaled
+    ),
+    "padding-y-scaled-ouds": (
+      property: padding-top padding-bottom,
+      class: py-scaled,
+      values: $ouds-dimension-space-scaled
+    ),
+    "padding-top-scaled-ouds": (
+      property: padding-top,
+      class: pt-scaled,
+      values: $ouds-dimension-space-scaled
+    ),
+    "padding-end-scaled-ouds": (
+      property: padding-right,
+      class: pe-scaled,
+      values: $ouds-dimension-space-scaled
+    ),
+    "padding-bottom-scaled-ouds": (
+      property: padding-bottom,
+      class: pb-scaled,
+      values: $ouds-dimension-space-scaled
+    ),
+    "padding-start-scaled-ouds": (
+      property: padding-left,
+      class: ps-scaled,
+      values: $ouds-dimension-space-scaled
+    ),
+    "padding-ouds": (
+      responsive: true,
+      property: padding,
+      class: p,
+      values: $ouds-dimension-space-fixed
+    ),
+    "padding-x-ouds": (
+      responsive: true,
+      property: padding-right padding-left,
+      class: px,
+      values: $ouds-dimension-space-fixed
+    ),
+    "padding-y-ouds": (
+      responsive: true,
+      property: padding-top padding-bottom,
+      class: py,
+      values: $ouds-dimension-space-fixed
+    ),
+    "padding-top-ouds": (
+      responsive: true,
+      property: padding-top,
+      class: pt,
+      values: $ouds-dimension-space-fixed
+    ),
+    "padding-end-ouds": (
+      responsive: true,
+      property: padding-right,
+      class: pe,
+      values: $ouds-dimension-space-fixed
+    ),
+    "padding-bottom-ouds": (
+      responsive: true,
+      property: padding-bottom,
+      class: pb,
+      values: $ouds-dimension-space-fixed
+    ),
+    "padding-start-ouds": (
+      responsive: true,
+      property: padding-left,
+      class: ps,
+      values: $ouds-dimension-space-fixed
+    ),
+    // Gap utility
+    "gap-scaled-ouds": (
+      property: gap,
+      class: gap-scaled,
+      values: $ouds-dimension-space-scaled
+    ),
+    "row-gap-scaled-ouds": (
+      property: row-gap,
+      class: row-gap-scaled,
+      values: $ouds-dimension-space-scaled
+    ),
+    "column-gap-scaled-ouds": (
+      property: column-gap,
+      class: column-gap-scaled,
+      values: $ouds-dimension-space-scaled
+    ),
+    "gap-ouds": (
+      responsive: true,
+      property: gap,
+      class: gap,
+      values: $ouds-dimension-space-fixed
+    ),
+    "row-gap-ouds": (
+      responsive: true,
+      property: row-gap,
+      class: row-gap,
+      values: $ouds-dimension-space-fixed
+    ),
+    "column-gap-ouds": (
+      responsive: true,
+      property: column-gap,
+      class: column-gap,
+      values: $ouds-dimension-space-fixed
+    ),
+    // scss-docs-end utils-spacing-ouds
+    // End mod
     // Text
     // scss-docs-start utils-text
     "font-family": (
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 358389d28e..8fbaf65bd0 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -464,14 +464,14 @@ $gradient: linear-gradient(180deg, rgba($white, .15), rgba($white, 0)) !default;
 // You can add more entries to the $spacers map, should you need more variation.
 
 // scss-docs-start spacer-variables-maps
-$spacer: 1.25rem !default; // OUDS mod
+$spacer: 1rem !default;
 $spacers: (
   0: 0,
   1: $spacer * .25,
-  2: $spacer * .5,
-  3: $spacer,
-  4: $spacer * 1.5,
-  5: $spacer * 3,
+  2: $spacer * .75, // OUDS mod: instead of `.5`
+  3: $spacer * 1.5, // OUDS mod: instead of `1`
+  4: $spacer * 2.5, // OUDS mod: instead of `1.5`
+  5: $spacer * 3.5, // OUDS mod: instead of `3`
 ) !default;
 // scss-docs-end spacer-variables-maps
 
@@ -662,9 +662,9 @@ $focus-visible-outer-color:           $black !default; // OUDS mod
 // scss-docs-end focus-visible-variables
 
 // scss-docs-start box-shadow-variables
-$box-shadow:        map-get($ouds-elevations, "overlay-default") !default; // OUDS mod: instead of `0 .5rem 1rem rgba($black, .15)`
-$box-shadow-sm:     map-get($ouds-elevations, "overlay-default") !default; // OUDS mod: instead of `0 .125rem .25rem rgba($black, .075)`
-$box-shadow-lg:     map-get($ouds-elevations, "overlay-emphasized") !default; // OUDS mod: instead of `0 1rem 3rem rgba($black, .175)`
+$box-shadow:        $ouds-elevation-overlay-default !default; // OUDS mod: instead of `0 .5rem 1rem rgba($black, .15)`
+$box-shadow-sm:     $ouds-elevation-overlay-default !default; // OUDS mod: instead of `0 .125rem .25rem rgba($black, .075)`
+$box-shadow-lg:     $ouds-elevation-overlay-emphasized !default; // OUDS mod: instead of `0 1rem 3rem rgba($black, .175)`
 $box-shadow-inset:  null !default; // OUDS mod: instead of `inset 0 1px 2px rgba($black, .075)`
 // scss-docs-end box-shadow-variables
 
diff --git a/scss/ouds-web-grid.scss b/scss/ouds-web-grid.scss
index d894e4bbf5..bf06302c33 100644
--- a/scss/ouds-web-grid.scss
+++ b/scss/ouds-web-grid.scss
@@ -6,8 +6,8 @@ $include-column-box-sizing: true !default;
 @import "functions";
 @import "tokens/raw";
 @import "tokens/semantic";
+@import "tokens/composite";
 @import "tokens/component";
-@import "ouds-maps";
 @import "variables";
 @import "variables-dark";
 @import "maps";
diff --git a/scss/ouds-web-reboot.scss b/scss/ouds-web-reboot.scss
index 0282ab376a..6ea8a0e0cf 100644
--- a/scss/ouds-web-reboot.scss
+++ b/scss/ouds-web-reboot.scss
@@ -4,8 +4,8 @@
 @import "functions";
 @import "tokens/raw";
 @import "tokens/semantic";
+@import "tokens/composite";
 @import "tokens/component";
-@import "ouds-maps";
 @import "variables";
 @import "variables-dark";
 @import "maps";
diff --git a/scss/ouds-web-utilities.scss b/scss/ouds-web-utilities.scss
index 0ec484a8f7..9a486fd651 100644
--- a/scss/ouds-web-utilities.scss
+++ b/scss/ouds-web-utilities.scss
@@ -5,8 +5,8 @@
 @import "functions";
 @import "tokens/raw";
 @import "tokens/semantic";
+@import "tokens/composite";
 @import "tokens/component";
-@import "ouds-maps";
 @import "variables";
 @import "variables-dark";
 @import "maps";
diff --git a/scss/ouds-web.scss b/scss/ouds-web.scss
index a8c6c53adb..4a46128b80 100644
--- a/scss/ouds-web.scss
+++ b/scss/ouds-web.scss
@@ -6,8 +6,8 @@
 @import "functions";
 @import "tokens/raw";
 @import "tokens/semantic";
+@import "tokens/composite";
 @import "tokens/component";
-@import "ouds-maps";
 @import "variables";
 @import "variables-dark";
 @import "maps";
diff --git a/scss/tests/customize/_ouds-web-bootstrap.test.scss b/scss/tests/customize/_ouds-web-bootstrap.test.scss
index 00b3fb2deb..2e72af7fae 100644
--- a/scss/tests/customize/_ouds-web-bootstrap.test.scss
+++ b/scss/tests/customize/_ouds-web-bootstrap.test.scss
@@ -5,15 +5,15 @@ $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 "../../ouds-maps";
     @import "../../variables";
     @import "../../maps";
     @import "../../mixins";
-    $enable-bootstrap-compatibility: false !global;
 
     $utilities: (
       "opacity": (
@@ -236,6 +236,438 @@ $utilities: ();
         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,
@@ -592,903 +1024,22431 @@ $utilities: ();
           border-top-left-radius: 50% !important; // stylelint-disable-line property-disallowed-list, order/properties-order
         }
 
-        .shadow-none {
-          box-shadow: 0 0 0 0 rgba(0, 0, 0, 0) !important;
+        .m-none {
+          margin: 0 !important;
         }
 
-        .shadow-raised {
-          box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.32) !important; // stylelint-disable-line @stylistic/number-leading-zero
+        .m-smash {
+          margin: 2px !important;
         }
 
-        .shadow-drag {
-          box-shadow: 0 4px 4px -1px rgba(0, 0, 0, 0.32) !important; // stylelint-disable-line @stylistic/number-leading-zero
+        .m-shortest {
+          margin: 4px !important;
         }
 
-        .shadow-overlay-default {
-          box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.24) !important; // stylelint-disable-line @stylistic/number-leading-zero
+        .m-shorter {
+          margin: 8px !important;
         }
 
-        .shadow-overlay-emphasized {
-          box-shadow: 0 12px 12px -4px rgba(0, 0, 0, 0.16) !important; // stylelint-disable-line @stylistic/number-leading-zero
+        .m-short {
+          margin: 12px !important;
         }
 
-        .shadow-sticky-default {
-          box-shadow: 0 4px 4px -1px rgba(0, 0, 0, 0.16) !important; // stylelint-disable-line @stylistic/number-leading-zero
+        .m-medium {
+          margin: 16px !important;
         }
 
-        .shadow-sticky-emphasized {
-          box-shadow: 0 4px 4px -1px rgba(0, 0, 0, 0.16) !important; // stylelint-disable-line @stylistic/number-leading-zero
+        .m-tall {
+          margin: 24px !important;
         }
 
-        .shadow-sticky-navigation-scrolled {
-          box-shadow: 0 4px 4px -1px rgba(0, 0, 0, 0.16) !important; // stylelint-disable-line @stylistic/number-leading-zero
+        .m-taller {
+          margin: 32px !important;
         }
-      }
-    }
-  }
 
-  @include it("generates OUDS and Bootstrap utilities") {
-    @import "../../functions";
-    @import "../../tokens/raw";
-    @import "../../tokens/semantic";
-    @import "../../tokens/component";
-    @import "../../ouds-maps";
-    @import "../../variables";
-    @import "../../maps";
-    @import "../../mixins";
-    $enable-bootstrap-compatibility: true !global;
+        .m-tallest {
+          margin: 40px !important;
+        }
 
-    $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
-      ),
-      "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;
+        .m-spacious {
+          margin: 48px !important;
+        }
 
-    @include assert() {
-      @include output() {
-        @import "../../utilities/api";
-      }
-      @include expect() {
-        .opacity-0 {
-          opacity: 0 !important;
+        .m-huge {
+          margin: 56px !important;
         }
 
-        .opacity-25 {
-          opacity: .25 !important;
+        .m-jumbo {
+          margin: 64px !important;
         }
 
-        .opacity-50 {
-          opacity: .5 !important;
+        .m-auto {
+          margin: auto !important;
         }
 
-        .opacity-75 {
-          opacity: .75 !important;
+        .m-scaled-none {
+          margin: var(--bs-space-scaled-none) !important;
         }
 
-        .opacity-100 {
-          opacity: 1 !important;
+        .m-scaled-smash {
+          margin: var(--bs-space-scaled-smash) !important;
         }
 
-        .opacity-transparent {
-          opacity: 0 !important;
+        .m-scaled-shortest {
+          margin: var(--bs-space-scaled-shortest) !important;
         }
 
-        .opacity-weaker {
-          opacity: .04 !important;
+        .m-scaled-shorter {
+          margin: var(--bs-space-scaled-shorter) !important;
         }
 
-        .opacity-weak {
-          opacity: .16 !important;
+        .m-scaled-short {
+          margin: var(--bs-space-scaled-short) !important;
         }
 
-        .opacity-medium {
-          opacity: .32 !important;
+        .m-scaled-medium {
+          margin: var(--bs-space-scaled-medium) !important;
         }
 
-        .opacity-strong {
-          opacity: .64 !important;
+        .m-scaled-tall {
+          margin: var(--bs-space-scaled-tall) !important;
         }
 
-        .opacity-opaque {
-          opacity: 1 !important;
+        .m-scaled-taller {
+          margin: var(--bs-space-scaled-taller) !important;
         }
 
-        .border {
-          border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
+        .m-scaled-tallest {
+          margin: var(--bs-space-scaled-tallest) !important;
         }
 
-        .border-none {
-          border: 0 !important;
+        .m-scaled-spacious {
+          margin: var(--bs-space-scaled-spacious) !important;
         }
 
-        .border-0 {
-          border: 0 !important;
+        .mx-none {
+          margin-right: 0 !important;
+          margin-left: 0 !important;
         }
 
-        .border-top-0 {
-          border-top: 0 !important;
+        .mx-smash {
+          margin-right: 2px !important;
+          margin-left: 2px !important;
         }
 
-        .border-end-0 {
-          border-right: 0 !important;
+        .mx-shortest {
+          margin-right: 4px !important;
+          margin-left: 4px !important;
         }
 
-        .border-bottom-0 {
-          border-bottom: 0 !important;
+        .mx-shorter {
+          margin-right: 8px !important;
+          margin-left: 8px !important;
         }
 
-        .border-start-0 {
-          border-left: 0 !important;
+        .mx-short {
+          margin-right: 12px !important;
+          margin-left: 12px !important;
         }
 
-        .border-primary {
-          --bs-border-opacity: 1;
-          border-color: rgba(var(--bs-primary-rgb), var(--bs-border-opacity)) !important;
+        .mx-medium {
+          margin-right: 16px !important;
+          margin-left: 16px !important;
         }
 
-        .border-secondary {
-          --bs-border-opacity: 1;
-          border-color: rgba(var(--bs-secondary-rgb), var(--bs-border-opacity)) !important;
+        .mx-tall {
+          margin-right: 24px !important;
+          margin-left: 24px !important;
         }
 
-        .border-success {
-          --bs-border-opacity: 1;
-          border-color: rgba(var(--bs-success-rgb), var(--bs-border-opacity)) !important;
+        .mx-taller {
+          margin-right: 32px !important;
+          margin-left: 32px !important;
         }
 
-        .border-info {
-          --bs-border-opacity: 1;
-          border-color: rgba(var(--bs-info-rgb), var(--bs-border-opacity)) !important;
+        .mx-tallest {
+          margin-right: 40px !important;
+          margin-left: 40px !important;
         }
 
-        .border-warning {
-          --bs-border-opacity: 1;
-          border-color: rgba(var(--bs-warning-rgb), var(--bs-border-opacity)) !important;
+        .mx-spacious {
+          margin-right: 48px !important;
+          margin-left: 48px !important;
         }
 
-        .border-danger {
-          --bs-border-opacity: 1;
-          border-color: rgba(var(--bs-danger-rgb), var(--bs-border-opacity)) !important;
+        .mx-huge {
+          margin-right: 56px !important;
+          margin-left: 56px !important;
         }
 
-        .border-light {
-          --bs-border-opacity: 1;
-          border-color: rgba(204, 204, 204, var(--bs-border-opacity)) !important;
+        .mx-jumbo {
+          margin-right: 64px !important;
+          margin-left: 64px !important;
         }
 
-        .border-dark {
-          --bs-border-opacity: 1;
-          border-color: rgba(102, 102, 102, var(--bs-border-opacity)) !important;
+        .mx-auto {
+          margin-right: auto !important;
+          margin-left: auto !important;
         }
 
-        .border-black {
-          --bs-border-opacity: 1;
-          border-color: rgba(var(--bs-black-rgb), var(--bs-border-opacity)) !important;
+        .mx-scaled-none {
+          margin-right: var(--bs-space-scaled-none) !important;
+          margin-left: var(--bs-space-scaled-none) !important;
         }
 
-        .border-white {
-          --bs-border-opacity: 1;
-          border-color: rgba(var(--bs-white-rgb), var(--bs-border-opacity)) !important;
+        .mx-scaled-smash {
+          margin-right: var(--bs-space-scaled-smash) !important;
+          margin-left: var(--bs-space-scaled-smash) !important;
         }
 
-        .border-primary-subtle {
-          border-color: var(--bs-primary-border-subtle) !important;
+        .mx-scaled-shortest {
+          margin-right: var(--bs-space-scaled-shortest) !important;
+          margin-left: var(--bs-space-scaled-shortest) !important;
         }
 
-        .border-secondary-subtle {
-          border-color: var(--bs-secondary-border-subtle) !important;
+        .mx-scaled-shorter {
+          margin-right: var(--bs-space-scaled-shorter) !important;
+          margin-left: var(--bs-space-scaled-shorter) !important;
         }
 
-        .border-success-subtle {
-          border-color: var(--bs-success-border-subtle) !important;
+        .mx-scaled-short {
+          margin-right: var(--bs-space-scaled-short) !important;
+          margin-left: var(--bs-space-scaled-short) !important;
         }
 
-        .border-info-subtle {
-          border-color: var(--bs-info-border-subtle) !important;
+        .mx-scaled-medium {
+          margin-right: var(--bs-space-scaled-medium) !important;
+          margin-left: var(--bs-space-scaled-medium) !important;
         }
 
-        .border-warning-subtle {
-          border-color: var(--bs-warning-border-subtle) !important;
+        .mx-scaled-tall {
+          margin-right: var(--bs-space-scaled-tall) !important;
+          margin-left: var(--bs-space-scaled-tall) !important;
         }
 
-        .border-danger-subtle {
-          border-color: var(--bs-danger-border-subtle) !important;
+        .mx-scaled-taller {
+          margin-right: var(--bs-space-scaled-taller) !important;
+          margin-left: var(--bs-space-scaled-taller) !important;
         }
 
-        .border-light-subtle {
-          border-color: var(--bs-light-border-subtle) !important;
+        .mx-scaled-tallest {
+          margin-right: var(--bs-space-scaled-tallest) !important;
+          margin-left: var(--bs-space-scaled-tallest) !important;
         }
 
-        .border-dark-subtle {
-          border-color: var(--bs-dark-border-subtle) !important;
+        .mx-scaled-spacious {
+          margin-right: var(--bs-space-scaled-spacious) !important;
+          margin-left: var(--bs-space-scaled-spacious) !important;
         }
 
-        .border-1 {
-          border-width: 1px !important;
+        .my-none {
+          margin-top: 0 !important;
+          margin-bottom: 0 !important;
         }
 
-        .border-2 {
-          border-width: 2px !important;
+        .my-smash {
+          margin-top: 2px !important;
+          margin-bottom: 2px !important;
         }
 
-        .border-3 {
-          border-width: 3px !important;
+        .my-shortest {
+          margin-top: 4px !important;
+          margin-bottom: 4px !important;
         }
 
-        .border-4 {
-          border-width: 4px !important;
+        .my-shorter {
+          margin-top: 8px !important;
+          margin-bottom: 8px !important;
         }
 
-        .border-5 {
-          border-width: 5px !important;
+        .my-short {
+          margin-top: 12px !important;
+          margin-bottom: 12px !important;
         }
 
-        .border-opacity-10 {
-          // Sass compilation will put a leading zero so we want to keep that one
-          // stylelint-disable-next-line @stylistic/number-leading-zero
-          --bs-border-opacity: 0.1;
+        .my-medium {
+          margin-top: 16px !important;
+          margin-bottom: 16px !important;
         }
 
-        .border-opacity-25 {
-          // Sass compilation will put a leading zero so we want to keep that one
-          // stylelint-disable-next-line @stylistic/number-leading-zero
-          --bs-border-opacity: 0.25;
+        .my-tall {
+          margin-top: 24px !important;
+          margin-bottom: 24px !important;
         }
 
-        .border-opacity-50 {
-          // Sass compilation will put a leading zero so we want to keep that one
-          // stylelint-disable-next-line @stylistic/number-leading-zero
-          --bs-border-opacity: 0.5;
+        .my-taller {
+          margin-top: 32px !important;
+          margin-bottom: 32px !important;
         }
 
-        .border-opacity-75 {
-          // Sass compilation will put a leading zero so we want to keep that one
-          // stylelint-disable-next-line @stylistic/number-leading-zero
-          --bs-border-opacity: 0.75;
+        .my-tallest {
+          margin-top: 40px !important;
+          margin-bottom: 40px !important;
         }
 
-        .border-opacity-100 {
-          --bs-border-opacity: 1;
+        .my-spacious {
+          margin-top: 48px !important;
+          margin-bottom: 48px !important;
         }
 
-        .border-top {
-          border-top: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
+        .my-huge {
+          margin-top: 56px !important;
+          margin-bottom: 56px !important;
         }
 
-        .border-top-none {
-          border-top: 0 !important;
+        .my-jumbo {
+          margin-top: 64px !important;
+          margin-bottom: 64px !important;
         }
 
-        .border-end {
-          border-right: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
+        .my-auto {
+          margin-top: auto !important;
+          margin-bottom: auto !important;
         }
 
-        .border-end-none {
-          border-right: 0 !important;
+        .my-scaled-none {
+          margin-top: var(--bs-space-scaled-none) !important;
+          margin-bottom: var(--bs-space-scaled-none) !important;
         }
 
-        .border-bottom {
-          border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
+        .my-scaled-smash {
+          margin-top: var(--bs-space-scaled-smash) !important;
+          margin-bottom: var(--bs-space-scaled-smash) !important;
         }
 
-        .border-bottom-none {
-          border-bottom: 0 !important;
+        .my-scaled-shortest {
+          margin-top: var(--bs-space-scaled-shortest) !important;
+          margin-bottom: var(--bs-space-scaled-shortest) !important;
         }
 
-        .border-start {
-          border-left: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
+        .my-scaled-shorter {
+          margin-top: var(--bs-space-scaled-shorter) !important;
+          margin-bottom: var(--bs-space-scaled-shorter) !important;
         }
 
-        .border-start-none {
-          border-left: 0 !important;
+        .my-scaled-short {
+          margin-top: var(--bs-space-scaled-short) !important;
+          margin-bottom: var(--bs-space-scaled-short) !important;
         }
 
-        .border-thin {
-          border-width: 1px !important;
+        .my-scaled-medium {
+          margin-top: var(--bs-space-scaled-medium) !important;
+          margin-bottom: var(--bs-space-scaled-medium) !important;
         }
 
-        .border-medium {
-          border-width: 2px !important;
+        .my-scaled-tall {
+          margin-top: var(--bs-space-scaled-tall) !important;
+          margin-bottom: var(--bs-space-scaled-tall) !important;
         }
 
-        .border-thick {
-          border-width: 3px !important;
+        .my-scaled-taller {
+          margin-top: var(--bs-space-scaled-taller) !important;
+          margin-bottom: var(--bs-space-scaled-taller) !important;
         }
 
-        .border-thicker {
-          border-width: 4px !important;
+        .my-scaled-tallest {
+          margin-top: var(--bs-space-scaled-tallest) !important;
+          margin-bottom: var(--bs-space-scaled-tallest) !important;
         }
 
-        .border-drag {
-          border-style: dashed !important;
+        .my-scaled-spacious {
+          margin-top: var(--bs-space-scaled-spacious) !important;
+          margin-bottom: var(--bs-space-scaled-spacious) !important;
         }
 
-        .rounded-0 {
-          border-radius: 0 !important; // stylelint-disable-line property-disallowed-list
+        .mt-none {
+          margin-top: 0 !important;
         }
 
-        .rounded-1 {
-          border-radius: var(--bs-border-radius-sm) !important; // stylelint-disable-line property-disallowed-list
+        .mt-smash {
+          margin-top: 2px !important;
         }
 
-        .rounded-2 {
-          border-radius: var(--bs-border-radius-lg) !important; // stylelint-disable-line property-disallowed-list
+        .mt-shortest {
+          margin-top: 4px !important;
         }
 
-        .rounded-3 {
-          border-radius: var(--bs-border-radius-xl) !important; // stylelint-disable-line property-disallowed-list
+        .mt-shorter {
+          margin-top: 8px !important;
         }
 
-        .rounded-4 {
-          border-radius: var(--bs-border-radius-xxl) !important; // stylelint-disable-line property-disallowed-list
+        .mt-short {
+          margin-top: 12px !important;
         }
 
-        .rounded-5 {
-          border-radius: 27px !important; // stylelint-disable-line property-disallowed-list
+        .mt-medium {
+          margin-top: 16px !important;
         }
 
-        .rounded-top-0 {
-          border-top-left-radius: 0 !important; // stylelint-disable-line property-disallowed-list
-          border-top-right-radius: 0 !important; // stylelint-disable-line property-disallowed-list
+        .mt-tall {
+          margin-top: 24px !important;
         }
 
-        .rounded-top-1 {
-          border-top-left-radius: var(--bs-border-radius-sm) !important; // stylelint-disable-line property-disallowed-list
-          border-top-right-radius: var(--bs-border-radius-sm) !important; // stylelint-disable-line property-disallowed-list
+        .mt-taller {
+          margin-top: 32px !important;
         }
 
-        .rounded-top-2 {
-          border-top-left-radius: var(--bs-border-radius-lg) !important; // stylelint-disable-line property-disallowed-list
-          border-top-right-radius: var(--bs-border-radius-lg) !important; // stylelint-disable-line property-disallowed-list
+        .mt-tallest {
+          margin-top: 40px !important;
         }
 
-        .rounded-top-3 {
-          border-top-left-radius: var(--bs-border-radius-xl) !important; // stylelint-disable-line property-disallowed-list
-          border-top-right-radius: var(--bs-border-radius-xl) !important; // stylelint-disable-line property-disallowed-list
+        .mt-spacious {
+          margin-top: 48px !important;
         }
 
-        .rounded-top-4 {
-          border-top-left-radius: var(--bs-border-radius-xxl) !important; // stylelint-disable-line property-disallowed-list
-          border-top-right-radius: var(--bs-border-radius-xxl) !important; // stylelint-disable-line property-disallowed-list
+        .mt-huge {
+          margin-top: 56px !important;
         }
 
-        .rounded-top-5 {
-          border-top-left-radius: 27px !important; // stylelint-disable-line property-disallowed-list
-          border-top-right-radius: 27px !important; // stylelint-disable-line property-disallowed-list
+        .mt-jumbo {
+          margin-top: 64px !important;
         }
 
-        .rounded-end-0 {
-          border-top-right-radius: 0 !important; // stylelint-disable-line property-disallowed-list
-          border-bottom-right-radius: 0 !important; // stylelint-disable-line property-disallowed-list
+        .mt-auto {
+          margin-top: auto !important;
         }
 
-        .rounded-end-1 {
-          border-top-right-radius: var(--bs-border-radius-sm) !important; // stylelint-disable-line property-disallowed-list
-          border-bottom-right-radius: var(--bs-border-radius-sm) !important; // stylelint-disable-line property-disallowed-list
+        .mt-scaled-none {
+          margin-top: var(--bs-space-scaled-none) !important;
         }
 
-        .rounded-end-2 {
-          border-top-right-radius: var(--bs-border-radius-lg) !important; // stylelint-disable-line property-disallowed-list
-          border-bottom-right-radius: var(--bs-border-radius-lg) !important; // stylelint-disable-line property-disallowed-list
+        .mt-scaled-smash {
+          margin-top: var(--bs-space-scaled-smash) !important;
         }
 
-        .rounded-end-3 {
-          border-top-right-radius: var(--bs-border-radius-xl) !important; // stylelint-disable-line property-disallowed-list
-          border-bottom-right-radius: var(--bs-border-radius-xl) !important; // stylelint-disable-line property-disallowed-list
+        .mt-scaled-shortest {
+          margin-top: var(--bs-space-scaled-shortest) !important;
         }
 
-        .rounded-end-4 {
-          border-top-right-radius: var(--bs-border-radius-xxl) !important; // stylelint-disable-line property-disallowed-list
-          border-bottom-right-radius: var(--bs-border-radius-xxl) !important; // stylelint-disable-line property-disallowed-list
+        .mt-scaled-shorter {
+          margin-top: var(--bs-space-scaled-shorter) !important;
         }
 
-        .rounded-end-5 {
-          border-top-right-radius: 27px !important; // stylelint-disable-line property-disallowed-list
-          border-bottom-right-radius: 27px !important; // stylelint-disable-line property-disallowed-list
+        .mt-scaled-short {
+          margin-top: var(--bs-space-scaled-short) !important;
         }
 
-        .rounded-bottom-0 {
-          border-bottom-right-radius: 0 !important; // stylelint-disable-line property-disallowed-list
-          border-bottom-left-radius: 0 !important; // stylelint-disable-line property-disallowed-list
+        .mt-scaled-medium {
+          margin-top: var(--bs-space-scaled-medium) !important;
         }
 
-        .rounded-bottom-1 {
-          border-bottom-right-radius: var(--bs-border-radius-sm) !important; // stylelint-disable-line property-disallowed-list
-          border-bottom-left-radius: var(--bs-border-radius-sm) !important; // stylelint-disable-line property-disallowed-list
+        .mt-scaled-tall {
+          margin-top: var(--bs-space-scaled-tall) !important;
         }
 
-        .rounded-bottom-2 {
-          border-bottom-right-radius: var(--bs-border-radius-lg) !important; // stylelint-disable-line property-disallowed-list
-          border-bottom-left-radius: var(--bs-border-radius-lg) !important; // stylelint-disable-line property-disallowed-list
+        .mt-scaled-taller {
+          margin-top: var(--bs-space-scaled-taller) !important;
         }
 
-        .rounded-bottom-3 {
-          border-bottom-right-radius: var(--bs-border-radius-xl) !important; // stylelint-disable-line property-disallowed-list
-          border-bottom-left-radius: var(--bs-border-radius-xl) !important; // stylelint-disable-line property-disallowed-list
+        .mt-scaled-tallest {
+          margin-top: var(--bs-space-scaled-tallest) !important;
         }
 
-        .rounded-bottom-4 {
-          border-bottom-right-radius: var(--bs-border-radius-xxl) !important; // stylelint-disable-line property-disallowed-list
-          border-bottom-left-radius: var(--bs-border-radius-xxl) !important; // stylelint-disable-line property-disallowed-list
+        .mt-scaled-spacious {
+          margin-top: var(--bs-space-scaled-spacious) !important;
         }
 
-        .rounded-bottom-5 {
-          border-bottom-right-radius: 27px !important; // stylelint-disable-line property-disallowed-list
-          border-bottom-left-radius: 27px !important; // stylelint-disable-line property-disallowed-list
+        .me-none {
+          margin-right: 0 !important;
         }
 
-        .rounded-start-0 {
-          border-bottom-left-radius: 0 !important; // stylelint-disable-line property-disallowed-list
-          border-top-left-radius: 0 !important; // stylelint-disable-line property-disallowed-list, order/properties-order
+        .me-smash {
+          margin-right: 2px !important;
         }
 
-        .rounded-start-1 {
-          border-bottom-left-radius: var(--bs-border-radius-sm) !important; // stylelint-disable-line property-disallowed-list
-          border-top-left-radius: var(--bs-border-radius-sm) !important; // stylelint-disable-line property-disallowed-list, order/properties-order
+        .me-shortest {
+          margin-right: 4px !important;
         }
 
-        .rounded-start-2 {
-          border-bottom-left-radius: var(--bs-border-radius-lg) !important; // stylelint-disable-line property-disallowed-list
-          border-top-left-radius: var(--bs-border-radius-lg) !important; // stylelint-disable-line property-disallowed-list, order/properties-order
+        .me-shorter {
+          margin-right: 8px !important;
+        }
+
+        .me-short {
+          margin-right: 12px !important;
+        }
+
+        .me-medium {
+          margin-right: 16px !important;
+        }
+
+        .me-tall {
+          margin-right: 24px !important;
+        }
+
+        .me-taller {
+          margin-right: 32px !important;
+        }
+
+        .me-tallest {
+          margin-right: 40px !important;
+        }
+
+        .me-spacious {
+          margin-right: 48px !important;
+        }
+
+        .me-huge {
+          margin-right: 56px !important;
+        }
+
+        .me-jumbo {
+          margin-right: 64px !important;
+        }
+
+        .me-auto {
+          margin-right: auto !important;
+        }
+
+        .me-scaled-none {
+          margin-right: var(--bs-space-scaled-none) !important;
+        }
+
+        .me-scaled-smash {
+          margin-right: var(--bs-space-scaled-smash) !important;
+        }
+
+        .me-scaled-shortest {
+          margin-right: var(--bs-space-scaled-shortest) !important;
+        }
+
+        .me-scaled-shorter {
+          margin-right: var(--bs-space-scaled-shorter) !important;
+        }
+
+        .me-scaled-short {
+          margin-right: var(--bs-space-scaled-short) !important;
+        }
+
+        .me-scaled-medium {
+          margin-right: var(--bs-space-scaled-medium) !important;
+        }
+
+        .me-scaled-tall {
+          margin-right: var(--bs-space-scaled-tall) !important;
+        }
+
+        .me-scaled-taller {
+          margin-right: var(--bs-space-scaled-taller) !important;
+        }
+
+        .me-scaled-tallest {
+          margin-right: var(--bs-space-scaled-tallest) !important;
+        }
+
+        .me-scaled-spacious {
+          margin-right: var(--bs-space-scaled-spacious) !important;
+        }
+
+        .mb-none {
+          margin-bottom: 0 !important;
+        }
+
+        .mb-smash {
+          margin-bottom: 2px !important;
+        }
+
+        .mb-shortest {
+          margin-bottom: 4px !important;
+        }
+
+        .mb-shorter {
+          margin-bottom: 8px !important;
+        }
+
+        .mb-short {
+          margin-bottom: 12px !important;
+        }
+
+        .mb-medium {
+          margin-bottom: 16px !important;
+        }
+
+        .mb-tall {
+          margin-bottom: 24px !important;
+        }
+
+        .mb-taller {
+          margin-bottom: 32px !important;
+        }
+
+        .mb-tallest {
+          margin-bottom: 40px !important;
+        }
+
+        .mb-spacious {
+          margin-bottom: 48px !important;
+        }
+
+        .mb-huge {
+          margin-bottom: 56px !important;
+        }
+
+        .mb-jumbo {
+          margin-bottom: 64px !important;
+        }
+
+        .mb-auto {
+          margin-bottom: auto !important;
+        }
+
+        .mb-scaled-none {
+          margin-bottom: var(--bs-space-scaled-none) !important;
+        }
+
+        .mb-scaled-smash {
+          margin-bottom: var(--bs-space-scaled-smash) !important;
+        }
+
+        .mb-scaled-shortest {
+          margin-bottom: var(--bs-space-scaled-shortest) !important;
+        }
+
+        .mb-scaled-shorter {
+          margin-bottom: var(--bs-space-scaled-shorter) !important;
+        }
+
+        .mb-scaled-short {
+          margin-bottom: var(--bs-space-scaled-short) !important;
+        }
+
+        .mb-scaled-medium {
+          margin-bottom: var(--bs-space-scaled-medium) !important;
+        }
+
+        .mb-scaled-tall {
+          margin-bottom: var(--bs-space-scaled-tall) !important;
+        }
+
+        .mb-scaled-taller {
+          margin-bottom: var(--bs-space-scaled-taller) !important;
+        }
+
+        .mb-scaled-tallest {
+          margin-bottom: var(--bs-space-scaled-tallest) !important;
+        }
+
+        .mb-scaled-spacious {
+          margin-bottom: var(--bs-space-scaled-spacious) !important;
+        }
+
+        .ms-none {
+          margin-left: 0 !important;
+        }
+
+        .ms-smash {
+          margin-left: 2px !important;
+        }
+
+        .ms-shortest {
+          margin-left: 4px !important;
+        }
+
+        .ms-shorter {
+          margin-left: 8px !important;
+        }
+
+        .ms-short {
+          margin-left: 12px !important;
+        }
+
+        .ms-medium {
+          margin-left: 16px !important;
+        }
+
+        .ms-tall {
+          margin-left: 24px !important;
+        }
+
+        .ms-taller {
+          margin-left: 32px !important;
+        }
+
+        .ms-tallest {
+          margin-left: 40px !important;
+        }
+
+        .ms-spacious {
+          margin-left: 48px !important;
+        }
+
+        .ms-huge {
+          margin-left: 56px !important;
+        }
+
+        .ms-jumbo {
+          margin-left: 64px !important;
+        }
+
+        .ms-auto {
+          margin-left: auto !important;
+        }
+
+        .ms-scaled-none {
+          margin-left: var(--bs-space-scaled-none) !important;
+        }
+
+        .ms-scaled-smash {
+          margin-left: var(--bs-space-scaled-smash) !important;
+        }
+
+        .ms-scaled-shortest {
+          margin-left: var(--bs-space-scaled-shortest) !important;
+        }
+
+        .ms-scaled-shorter {
+          margin-left: var(--bs-space-scaled-shorter) !important;
+        }
+
+        .ms-scaled-short {
+          margin-left: var(--bs-space-scaled-short) !important;
+        }
+
+        .ms-scaled-medium {
+          margin-left: var(--bs-space-scaled-medium) !important;
+        }
+
+        .ms-scaled-tall {
+          margin-left: var(--bs-space-scaled-tall) !important;
+        }
+
+        .ms-scaled-taller {
+          margin-left: var(--bs-space-scaled-taller) !important;
+        }
+
+        .ms-scaled-tallest {
+          margin-left: var(--bs-space-scaled-tallest) !important;
+        }
+
+        .ms-scaled-spacious {
+          margin-left: var(--bs-space-scaled-spacious) !important;
+        }
+
+        .m-scaled-nsmash {
+          margin: calc(-1 * var(--bs-space-scaled-smash)) !important; // stylelint-disable-line function-disallowed-list
+        }
+
+        .m-scaled-nshortest {
+          margin: calc(-1 * var(--bs-space-scaled-shortest)) !important; // stylelint-disable-line function-disallowed-list
+        }
+
+        .m-scaled-nshorter {
+          margin: calc(-1 * var(--bs-space-scaled-shorter)) !important; // stylelint-disable-line function-disallowed-list
+        }
+
+        .m-scaled-nshort {
+          margin: calc(-1 * var(--bs-space-scaled-short)) !important; // stylelint-disable-line function-disallowed-list
+        }
+
+        .m-scaled-nmedium {
+          margin: calc(-1 * var(--bs-space-scaled-medium)) !important; // stylelint-disable-line function-disallowed-list
+        }
+
+        .m-scaled-ntall {
+          margin: calc(-1 * var(--bs-space-scaled-tall)) !important; // stylelint-disable-line function-disallowed-list
+        }
+
+        .m-scaled-ntaller {
+          margin: calc(-1 * var(--bs-space-scaled-taller)) !important; // stylelint-disable-line function-disallowed-list
+        }
+
+        .m-scaled-ntallest {
+          margin: calc(-1 * var(--bs-space-scaled-tallest)) !important; // stylelint-disable-line function-disallowed-list
+        }
+
+        .m-scaled-nspacious {
+          margin: calc(-1 * var(--bs-space-scaled-spacious)) !important; // stylelint-disable-line function-disallowed-list
+        }
+
+        .mx-scaled-nsmash {
+          margin-right: calc(-1 * var(--bs-space-scaled-smash)) !important; // stylelint-disable-line function-disallowed-list
+          margin-left: calc(-1 * var(--bs-space-scaled-smash)) !important; // stylelint-disable-line function-disallowed-list
+        }
+
+        .mx-scaled-nshortest {
+          margin-right: calc(-1 * var(--bs-space-scaled-shortest)) !important; // stylelint-disable-line function-disallowed-list
+          margin-left: calc(-1 * var(--bs-space-scaled-shortest)) !important; // stylelint-disable-line function-disallowed-list
+        }
+
+        .mx-scaled-nshorter {
+          margin-right: calc(-1 * var(--bs-space-scaled-shorter)) !important; // stylelint-disable-line function-disallowed-list
+          margin-left: calc(-1 * var(--bs-space-scaled-shorter)) !important; // stylelint-disable-line function-disallowed-list
+        }
+
+        .mx-scaled-nshort {
+          margin-right: calc(-1 * var(--bs-space-scaled-short)) !important; // stylelint-disable-line function-disallowed-list
+          margin-left: calc(-1 * var(--bs-space-scaled-short)) !important; // stylelint-disable-line function-disallowed-list
+        }
+
+        .mx-scaled-nmedium {
+          margin-right: calc(-1 * var(--bs-space-scaled-medium)) !important; // stylelint-disable-line function-disallowed-list
+          margin-left: calc(-1 * var(--bs-space-scaled-medium)) !important; // stylelint-disable-line function-disallowed-list
+        }
+
+        .mx-scaled-ntall {
+          margin-right: calc(-1 * var(--bs-space-scaled-tall)) !important; // stylelint-disable-line function-disallowed-list
+          margin-left: calc(-1 * var(--bs-space-scaled-tall)) !important; // stylelint-disable-line function-disallowed-list
+        }
+
+        .mx-scaled-ntaller {
+          margin-right: calc(-1 * var(--bs-space-scaled-taller)) !important; // stylelint-disable-line function-disallowed-list
+          margin-left: calc(-1 * var(--bs-space-scaled-taller)) !important; // stylelint-disable-line function-disallowed-list
+        }
+
+        .mx-scaled-ntallest {
+          margin-right: calc(-1 * var(--bs-space-scaled-tallest)) !important; // stylelint-disable-line function-disallowed-list
+          margin-left: calc(-1 * var(--bs-space-scaled-tallest)) !important; // stylelint-disable-line function-disallowed-list
+        }
+
+        .mx-scaled-nspacious {
+          margin-right: calc(-1 * var(--bs-space-scaled-spacious)) !important; // stylelint-disable-line function-disallowed-list
+          margin-left: calc(-1 * var(--bs-space-scaled-spacious)) !important; // stylelint-disable-line function-disallowed-list
+        }
+
+        .my-scaled-nsmash {
+          margin-top: calc(-1 * var(--bs-space-scaled-smash)) !important; // stylelint-disable-line function-disallowed-list
+          margin-bottom: calc(-1 * var(--bs-space-scaled-smash)) !important; // stylelint-disable-line function-disallowed-list
+        }
+
+        .my-scaled-nshortest {
+          margin-top: calc(-1 * var(--bs-space-scaled-shortest)) !important; // stylelint-disable-line function-disallowed-list
+          margin-bottom: calc(-1 * var(--bs-space-scaled-shortest)) !important; // stylelint-disable-line function-disallowed-list
+        }
+
+        .my-scaled-nshorter {
+          margin-top: calc(-1 * var(--bs-space-scaled-shorter)) !important; // stylelint-disable-line function-disallowed-list
+          margin-bottom: calc(-1 * var(--bs-space-scaled-shorter)) !important; // stylelint-disable-line function-disallowed-list
+        }
+
+        .my-scaled-nshort {
+          margin-top: calc(-1 * var(--bs-space-scaled-short)) !important; // stylelint-disable-line function-disallowed-list
+          margin-bottom: calc(-1 * var(--bs-space-scaled-short)) !important; // stylelint-disable-line function-disallowed-list
+        }
+
+        .my-scaled-nmedium {
+          margin-top: calc(-1 * var(--bs-space-scaled-medium)) !important; // stylelint-disable-line function-disallowed-list
+          margin-bottom: calc(-1 * var(--bs-space-scaled-medium)) !important; // stylelint-disable-line function-disallowed-list
+        }
+
+        .my-scaled-ntall {
+          margin-top: calc(-1 * var(--bs-space-scaled-tall)) !important; // stylelint-disable-line function-disallowed-list
+          margin-bottom: calc(-1 * var(--bs-space-scaled-tall)) !important; // stylelint-disable-line function-disallowed-list
+        }
+
+        .my-scaled-ntaller {
+          margin-top: calc(-1 * var(--bs-space-scaled-taller)) !important; // stylelint-disable-line function-disallowed-list
+          margin-bottom: calc(-1 * var(--bs-space-scaled-taller)) !important; // stylelint-disable-line function-disallowed-list
+        }
+
+        .my-scaled-ntallest {
+          margin-top: calc(-1 * var(--bs-space-scaled-tallest)) !important; // stylelint-disable-line function-disallowed-list
+          margin-bottom: calc(-1 * var(--bs-space-scaled-tallest)) !important; // stylelint-disable-line function-disallowed-list
+        }
+
+        .my-scaled-nspacious {
+          margin-top: calc(-1 * var(--bs-space-scaled-spacious)) !important; // stylelint-disable-line function-disallowed-list
+          margin-bottom: calc(-1 * var(--bs-space-scaled-spacious)) !important; // stylelint-disable-line function-disallowed-list
+        }
+
+        .mt-scaled-nsmash {
+          margin-top: calc(-1 * var(--bs-space-scaled-smash)) !important; // stylelint-disable-line function-disallowed-list
+        }
+
+        .mt-scaled-nshortest {
+          margin-top: calc(-1 * var(--bs-space-scaled-shortest)) !important; // stylelint-disable-line function-disallowed-list
+        }
+
+        .mt-scaled-nshorter {
+          margin-top: calc(-1 * var(--bs-space-scaled-shorter)) !important; // stylelint-disable-line function-disallowed-list
         }
 
-        .rounded-start-3 {
-          border-bottom-left-radius: var(--bs-border-radius-xl) !important; // stylelint-disable-line property-disallowed-list
-          border-top-left-radius: var(--bs-border-radius-xl) !important; // stylelint-disable-line property-disallowed-list, order/properties-order
-        }
+        .mt-scaled-nshort {
+          margin-top: calc(-1 * var(--bs-space-scaled-short)) !important; // stylelint-disable-line function-disallowed-list
+        }
+
+        .mt-scaled-nmedium {
+          margin-top: calc(-1 * var(--bs-space-scaled-medium)) !important; // stylelint-disable-line function-disallowed-list
+        }
+
+        .mt-scaled-ntall {
+          margin-top: calc(-1 * var(--bs-space-scaled-tall)) !important; // stylelint-disable-line function-disallowed-list
+        }
+
+        .mt-scaled-ntaller {
+          margin-top: calc(-1 * var(--bs-space-scaled-taller)) !important; // stylelint-disable-line function-disallowed-list
+        }
+
+        .mt-scaled-ntallest {
+          margin-top: calc(-1 * var(--bs-space-scaled-tallest)) !important; // stylelint-disable-line function-disallowed-list
+        }
+
+        .mt-scaled-nspacious {
+          margin-top: calc(-1 * var(--bs-space-scaled-spacious)) !important; // stylelint-disable-line function-disallowed-list
+        }
+
+        .me-scaled-nsmash {
+          margin-right: calc(-1 * var(--bs-space-scaled-smash)) !important; // stylelint-disable-line function-disallowed-list
+        }
+
+        .me-scaled-nshortest {
+          margin-right: calc(-1 * var(--bs-space-scaled-shortest)) !important; // stylelint-disable-line function-disallowed-list
+        }
+
+        .me-scaled-nshorter {
+          margin-right: calc(-1 * var(--bs-space-scaled-shorter)) !important; // stylelint-disable-line function-disallowed-list
+        }
+
+        .me-scaled-nshort {
+          margin-right: calc(-1 * var(--bs-space-scaled-short)) !important; // stylelint-disable-line function-disallowed-list
+        }
+
+        .me-scaled-nmedium {
+          margin-right: calc(-1 * var(--bs-space-scaled-medium)) !important; // stylelint-disable-line function-disallowed-list
+        }
+
+        .me-scaled-ntall {
+          margin-right: calc(-1 * var(--bs-space-scaled-tall)) !important; // stylelint-disable-line function-disallowed-list
+        }
+
+        .me-scaled-ntaller {
+          margin-right: calc(-1 * var(--bs-space-scaled-taller)) !important; // stylelint-disable-line function-disallowed-list
+        }
+
+        .me-scaled-ntallest {
+          margin-right: calc(-1 * var(--bs-space-scaled-tallest)) !important; // stylelint-disable-line function-disallowed-list
+        }
+
+        .me-scaled-nspacious {
+          margin-right: calc(-1 * var(--bs-space-scaled-spacious)) !important; // stylelint-disable-line function-disallowed-list
+        }
+
+        .mb-scaled-nsmash {
+          margin-bottom: calc(-1 * var(--bs-space-scaled-smash)) !important; // stylelint-disable-line function-disallowed-list
+        }
+
+        .mb-scaled-nshortest {
+          margin-bottom: calc(-1 * var(--bs-space-scaled-shortest)) !important; // stylelint-disable-line function-disallowed-list
+        }
+
+        .mb-scaled-nshorter {
+          margin-bottom: calc(-1 * var(--bs-space-scaled-shorter)) !important; // stylelint-disable-line function-disallowed-list
+        }
+
+        .mb-scaled-nshort {
+          margin-bottom: calc(-1 * var(--bs-space-scaled-short)) !important; // stylelint-disable-line function-disallowed-list
+        }
+
+        .mb-scaled-nmedium {
+          margin-bottom: calc(-1 * var(--bs-space-scaled-medium)) !important; // stylelint-disable-line function-disallowed-list
+        }
+
+        .mb-scaled-ntall {
+          margin-bottom: calc(-1 * var(--bs-space-scaled-tall)) !important; // stylelint-disable-line function-disallowed-list
+        }
+
+        .mb-scaled-ntaller {
+          margin-bottom: calc(-1 * var(--bs-space-scaled-taller)) !important; // stylelint-disable-line function-disallowed-list
+        }
+
+        .mb-scaled-ntallest {
+          margin-bottom: calc(-1 * var(--bs-space-scaled-tallest)) !important; // stylelint-disable-line function-disallowed-list
+        }
+
+        .mb-scaled-nspacious {
+          margin-bottom: calc(-1 * var(--bs-space-scaled-spacious)) !important; // stylelint-disable-line function-disallowed-list
+        }
+
+        .ms-scaled-nsmash {
+          margin-left: calc(-1 * var(--bs-space-scaled-smash)) !important; // stylelint-disable-line function-disallowed-list
+        }
+
+        .ms-scaled-nshortest {
+          margin-left: calc(-1 * var(--bs-space-scaled-shortest)) !important; // stylelint-disable-line function-disallowed-list
+        }
+
+        .ms-scaled-nshorter {
+          margin-left: calc(-1 * var(--bs-space-scaled-shorter)) !important; // stylelint-disable-line function-disallowed-list
+        }
+
+        .ms-scaled-nshort {
+          margin-left: calc(-1 * var(--bs-space-scaled-short)) !important; // stylelint-disable-line function-disallowed-list
+        }
+
+        .ms-scaled-nmedium {
+          margin-left: calc(-1 * var(--bs-space-scaled-medium)) !important; // stylelint-disable-line function-disallowed-list
+        }
+
+        .ms-scaled-ntall {
+          margin-left: calc(-1 * var(--bs-space-scaled-tall)) !important; // stylelint-disable-line function-disallowed-list
+        }
+
+        .ms-scaled-ntaller {
+          margin-left: calc(-1 * var(--bs-space-scaled-taller)) !important; // stylelint-disable-line function-disallowed-list
+        }
+
+        .ms-scaled-ntallest {
+          margin-left: calc(-1 * var(--bs-space-scaled-tallest)) !important; // stylelint-disable-line function-disallowed-list
+        }
+
+        .ms-scaled-nspacious {
+          margin-left: calc(-1 * var(--bs-space-scaled-spacious)) !important; // stylelint-disable-line function-disallowed-list
+        }
+
+        .p-none {
+          padding: 0 !important;
+        }
+
+        .p-smash {
+          padding: 2px !important;
+        }
+
+        .p-shortest {
+          padding: 4px !important;
+        }
+
+        .p-shorter {
+          padding: 8px !important;
+        }
+
+        .p-short {
+          padding: 12px !important;
+        }
+
+        .p-medium {
+          padding: 16px !important;
+        }
+
+        .p-tall {
+          padding: 24px !important;
+        }
+
+        .p-taller {
+          padding: 32px !important;
+        }
+
+        .p-tallest {
+          padding: 40px !important;
+        }
+
+        .p-spacious {
+          padding: 48px !important;
+        }
+
+        .p-huge {
+          padding: 56px !important;
+        }
+
+        .p-jumbo {
+          padding: 64px !important;
+        }
+
+        .p-scaled-none {
+          padding: var(--bs-space-scaled-none) !important;
+        }
+
+        .p-scaled-smash {
+          padding: var(--bs-space-scaled-smash) !important;
+        }
+
+        .p-scaled-shortest {
+          padding: var(--bs-space-scaled-shortest) !important;
+        }
+
+        .p-scaled-shorter {
+          padding: var(--bs-space-scaled-shorter) !important;
+        }
+
+        .p-scaled-short {
+          padding: var(--bs-space-scaled-short) !important;
+        }
+
+        .p-scaled-medium {
+          padding: var(--bs-space-scaled-medium) !important;
+        }
+
+        .p-scaled-tall {
+          padding: var(--bs-space-scaled-tall) !important;
+        }
+
+        .p-scaled-taller {
+          padding: var(--bs-space-scaled-taller) !important;
+        }
+
+        .p-scaled-tallest {
+          padding: var(--bs-space-scaled-tallest) !important;
+        }
+
+        .p-scaled-spacious {
+          padding: var(--bs-space-scaled-spacious) !important;
+        }
+
+        .px-none {
+          padding-right: 0 !important;
+          padding-left: 0 !important;
+        }
+
+        .px-smash {
+          padding-right: 2px !important;
+          padding-left: 2px !important;
+        }
+
+        .px-shortest {
+          padding-right: 4px !important;
+          padding-left: 4px !important;
+        }
+
+        .px-shorter {
+          padding-right: 8px !important;
+          padding-left: 8px !important;
+        }
+
+        .px-short {
+          padding-right: 12px !important;
+          padding-left: 12px !important;
+        }
+
+        .px-medium {
+          padding-right: 16px !important;
+          padding-left: 16px !important;
+        }
+
+        .px-tall {
+          padding-right: 24px !important;
+          padding-left: 24px !important;
+        }
+
+        .px-taller {
+          padding-right: 32px !important;
+          padding-left: 32px !important;
+        }
+
+        .px-tallest {
+          padding-right: 40px !important;
+          padding-left: 40px !important;
+        }
+
+        .px-spacious {
+          padding-right: 48px !important;
+          padding-left: 48px !important;
+        }
+
+        .px-huge {
+          padding-right: 56px !important;
+          padding-left: 56px !important;
+        }
+
+        .px-jumbo {
+          padding-right: 64px !important;
+          padding-left: 64px !important;
+        }
+
+        .px-scaled-none {
+          padding-right: var(--bs-space-scaled-none) !important;
+          padding-left: var(--bs-space-scaled-none) !important;
+        }
+
+        .px-scaled-smash {
+          padding-right: var(--bs-space-scaled-smash) !important;
+          padding-left: var(--bs-space-scaled-smash) !important;
+        }
+
+        .px-scaled-shortest {
+          padding-right: var(--bs-space-scaled-shortest) !important;
+          padding-left: var(--bs-space-scaled-shortest) !important;
+        }
+
+        .px-scaled-shorter {
+          padding-right: var(--bs-space-scaled-shorter) !important;
+          padding-left: var(--bs-space-scaled-shorter) !important;
+        }
+
+        .px-scaled-short {
+          padding-right: var(--bs-space-scaled-short) !important;
+          padding-left: var(--bs-space-scaled-short) !important;
+        }
+
+        .px-scaled-medium {
+          padding-right: var(--bs-space-scaled-medium) !important;
+          padding-left: var(--bs-space-scaled-medium) !important;
+        }
+
+        .px-scaled-tall {
+          padding-right: var(--bs-space-scaled-tall) !important;
+          padding-left: var(--bs-space-scaled-tall) !important;
+        }
+
+        .px-scaled-taller {
+          padding-right: var(--bs-space-scaled-taller) !important;
+          padding-left: var(--bs-space-scaled-taller) !important;
+        }
+
+        .px-scaled-tallest {
+          padding-right: var(--bs-space-scaled-tallest) !important;
+          padding-left: var(--bs-space-scaled-tallest) !important;
+        }
+
+        .px-scaled-spacious {
+          padding-right: var(--bs-space-scaled-spacious) !important;
+          padding-left: var(--bs-space-scaled-spacious) !important;
+        }
+
+        .py-none {
+          padding-top: 0 !important;
+          padding-bottom: 0 !important;
+        }
+
+        .py-smash {
+          padding-top: 2px !important;
+          padding-bottom: 2px !important;
+        }
+
+        .py-shortest {
+          padding-top: 4px !important;
+          padding-bottom: 4px !important;
+        }
+
+        .py-shorter {
+          padding-top: 8px !important;
+          padding-bottom: 8px !important;
+        }
+
+        .py-short {
+          padding-top: 12px !important;
+          padding-bottom: 12px !important;
+        }
+
+        .py-medium {
+          padding-top: 16px !important;
+          padding-bottom: 16px !important;
+        }
+
+        .py-tall {
+          padding-top: 24px !important;
+          padding-bottom: 24px !important;
+        }
+
+        .py-taller {
+          padding-top: 32px !important;
+          padding-bottom: 32px !important;
+        }
+
+        .py-tallest {
+          padding-top: 40px !important;
+          padding-bottom: 40px !important;
+        }
+
+        .py-spacious {
+          padding-top: 48px !important;
+          padding-bottom: 48px !important;
+        }
+
+        .py-huge {
+          padding-top: 56px !important;
+          padding-bottom: 56px !important;
+        }
+
+        .py-jumbo {
+          padding-top: 64px !important;
+          padding-bottom: 64px !important;
+        }
+
+        .py-scaled-none {
+          padding-top: var(--bs-space-scaled-none) !important;
+          padding-bottom: var(--bs-space-scaled-none) !important;
+        }
+
+        .py-scaled-smash {
+          padding-top: var(--bs-space-scaled-smash) !important;
+          padding-bottom: var(--bs-space-scaled-smash) !important;
+        }
+
+        .py-scaled-shortest {
+          padding-top: var(--bs-space-scaled-shortest) !important;
+          padding-bottom: var(--bs-space-scaled-shortest) !important;
+        }
+
+        .py-scaled-shorter {
+          padding-top: var(--bs-space-scaled-shorter) !important;
+          padding-bottom: var(--bs-space-scaled-shorter) !important;
+        }
+
+        .py-scaled-short {
+          padding-top: var(--bs-space-scaled-short) !important;
+          padding-bottom: var(--bs-space-scaled-short) !important;
+        }
+
+        .py-scaled-medium {
+          padding-top: var(--bs-space-scaled-medium) !important;
+          padding-bottom: var(--bs-space-scaled-medium) !important;
+        }
+
+        .py-scaled-tall {
+          padding-top: var(--bs-space-scaled-tall) !important;
+          padding-bottom: var(--bs-space-scaled-tall) !important;
+        }
+
+        .py-scaled-taller {
+          padding-top: var(--bs-space-scaled-taller) !important;
+          padding-bottom: var(--bs-space-scaled-taller) !important;
+        }
+
+        .py-scaled-tallest {
+          padding-top: var(--bs-space-scaled-tallest) !important;
+          padding-bottom: var(--bs-space-scaled-tallest) !important;
+        }
+
+        .py-scaled-spacious {
+          padding-top: var(--bs-space-scaled-spacious) !important;
+          padding-bottom: var(--bs-space-scaled-spacious) !important;
+        }
+
+        .pt-none {
+          padding-top: 0 !important;
+        }
+
+        .pt-smash {
+          padding-top: 2px !important;
+        }
+
+        .pt-shortest {
+          padding-top: 4px !important;
+        }
+
+        .pt-shorter {
+          padding-top: 8px !important;
+        }
+
+        .pt-short {
+          padding-top: 12px !important;
+        }
+
+        .pt-medium {
+          padding-top: 16px !important;
+        }
+
+        .pt-tall {
+          padding-top: 24px !important;
+        }
+
+        .pt-taller {
+          padding-top: 32px !important;
+        }
+
+        .pt-tallest {
+          padding-top: 40px !important;
+        }
+
+        .pt-spacious {
+          padding-top: 48px !important;
+        }
+
+        .pt-huge {
+          padding-top: 56px !important;
+        }
+
+        .pt-jumbo {
+          padding-top: 64px !important;
+        }
+
+        .pt-scaled-none {
+          padding-top: var(--bs-space-scaled-none) !important;
+        }
+
+        .pt-scaled-smash {
+          padding-top: var(--bs-space-scaled-smash) !important;
+        }
+
+        .pt-scaled-shortest {
+          padding-top: var(--bs-space-scaled-shortest) !important;
+        }
+
+        .pt-scaled-shorter {
+          padding-top: var(--bs-space-scaled-shorter) !important;
+        }
+
+        .pt-scaled-short {
+          padding-top: var(--bs-space-scaled-short) !important;
+        }
+
+        .pt-scaled-medium {
+          padding-top: var(--bs-space-scaled-medium) !important;
+        }
+
+        .pt-scaled-tall {
+          padding-top: var(--bs-space-scaled-tall) !important;
+        }
+
+        .pt-scaled-taller {
+          padding-top: var(--bs-space-scaled-taller) !important;
+        }
+
+        .pt-scaled-tallest {
+          padding-top: var(--bs-space-scaled-tallest) !important;
+        }
+
+        .pt-scaled-spacious {
+          padding-top: var(--bs-space-scaled-spacious) !important;
+        }
+
+        .pe-none {
+          padding-right: 0 !important;
+        }
+
+        .pe-smash {
+          padding-right: 2px !important;
+        }
+
+        .pe-shortest {
+          padding-right: 4px !important;
+        }
+
+        .pe-shorter {
+          padding-right: 8px !important;
+        }
+
+        .pe-short {
+          padding-right: 12px !important;
+        }
+
+        .pe-medium {
+          padding-right: 16px !important;
+        }
+
+        .pe-tall {
+          padding-right: 24px !important;
+        }
+
+        .pe-taller {
+          padding-right: 32px !important;
+        }
+
+        .pe-tallest {
+          padding-right: 40px !important;
+        }
+
+        .pe-spacious {
+          padding-right: 48px !important;
+        }
+
+        .pe-huge {
+          padding-right: 56px !important;
+        }
+
+        .pe-jumbo {
+          padding-right: 64px !important;
+        }
+
+        .pe-scaled-none {
+          padding-right: var(--bs-space-scaled-none) !important;
+        }
+
+        .pe-scaled-smash {
+          padding-right: var(--bs-space-scaled-smash) !important;
+        }
+
+        .pe-scaled-shortest {
+          padding-right: var(--bs-space-scaled-shortest) !important;
+        }
+
+        .pe-scaled-shorter {
+          padding-right: var(--bs-space-scaled-shorter) !important;
+        }
+
+        .pe-scaled-short {
+          padding-right: var(--bs-space-scaled-short) !important;
+        }
+
+        .pe-scaled-medium {
+          padding-right: var(--bs-space-scaled-medium) !important;
+        }
+
+        .pe-scaled-tall {
+          padding-right: var(--bs-space-scaled-tall) !important;
+        }
+
+        .pe-scaled-taller {
+          padding-right: var(--bs-space-scaled-taller) !important;
+        }
+
+        .pe-scaled-tallest {
+          padding-right: var(--bs-space-scaled-tallest) !important;
+        }
+
+        .pe-scaled-spacious {
+          padding-right: var(--bs-space-scaled-spacious) !important;
+        }
+
+        .pb-none {
+          padding-bottom: 0 !important;
+        }
+
+        .pb-smash {
+          padding-bottom: 2px !important;
+        }
+
+        .pb-shortest {
+          padding-bottom: 4px !important;
+        }
+
+        .pb-shorter {
+          padding-bottom: 8px !important;
+        }
+
+        .pb-short {
+          padding-bottom: 12px !important;
+        }
+
+        .pb-medium {
+          padding-bottom: 16px !important;
+        }
+
+        .pb-tall {
+          padding-bottom: 24px !important;
+        }
+
+        .pb-taller {
+          padding-bottom: 32px !important;
+        }
+
+        .pb-tallest {
+          padding-bottom: 40px !important;
+        }
+
+        .pb-spacious {
+          padding-bottom: 48px !important;
+        }
+
+        .pb-huge {
+          padding-bottom: 56px !important;
+        }
+
+        .pb-jumbo {
+          padding-bottom: 64px !important;
+        }
+
+        .pb-scaled-none {
+          padding-bottom: var(--bs-space-scaled-none) !important;
+        }
+
+        .pb-scaled-smash {
+          padding-bottom: var(--bs-space-scaled-smash) !important;
+        }
+
+        .pb-scaled-shortest {
+          padding-bottom: var(--bs-space-scaled-shortest) !important;
+        }
+
+        .pb-scaled-shorter {
+          padding-bottom: var(--bs-space-scaled-shorter) !important;
+        }
+
+        .pb-scaled-short {
+          padding-bottom: var(--bs-space-scaled-short) !important;
+        }
+
+        .pb-scaled-medium {
+          padding-bottom: var(--bs-space-scaled-medium) !important;
+        }
+
+        .pb-scaled-tall {
+          padding-bottom: var(--bs-space-scaled-tall) !important;
+        }
+
+        .pb-scaled-taller {
+          padding-bottom: var(--bs-space-scaled-taller) !important;
+        }
+
+        .pb-scaled-tallest {
+          padding-bottom: var(--bs-space-scaled-tallest) !important;
+        }
+
+        .pb-scaled-spacious {
+          padding-bottom: var(--bs-space-scaled-spacious) !important;
+        }
+
+        .ps-none {
+          padding-left: 0 !important;
+        }
+
+        .ps-smash {
+          padding-left: 2px !important;
+        }
+
+        .ps-shortest {
+          padding-left: 4px !important;
+        }
+
+        .ps-shorter {
+          padding-left: 8px !important;
+        }
+
+        .ps-short {
+          padding-left: 12px !important;
+        }
+
+        .ps-medium {
+          padding-left: 16px !important;
+        }
+
+        .ps-tall {
+          padding-left: 24px !important;
+        }
+
+        .ps-taller {
+          padding-left: 32px !important;
+        }
+
+        .ps-tallest {
+          padding-left: 40px !important;
+        }
+
+        .ps-spacious {
+          padding-left: 48px !important;
+        }
+
+        .ps-huge {
+          padding-left: 56px !important;
+        }
+
+        .ps-jumbo {
+          padding-left: 64px !important;
+        }
+
+        .ps-scaled-none {
+          padding-left: var(--bs-space-scaled-none) !important;
+        }
+
+        .ps-scaled-smash {
+          padding-left: var(--bs-space-scaled-smash) !important;
+        }
+
+        .ps-scaled-shortest {
+          padding-left: var(--bs-space-scaled-shortest) !important;
+        }
+
+        .ps-scaled-shorter {
+          padding-left: var(--bs-space-scaled-shorter) !important;
+        }
+
+        .ps-scaled-short {
+          padding-left: var(--bs-space-scaled-short) !important;
+        }
+
+        .ps-scaled-medium {
+          padding-left: var(--bs-space-scaled-medium) !important;
+        }
+
+        .ps-scaled-tall {
+          padding-left: var(--bs-space-scaled-tall) !important;
+        }
+
+        .ps-scaled-taller {
+          padding-left: var(--bs-space-scaled-taller) !important;
+        }
+
+        .ps-scaled-tallest {
+          padding-left: var(--bs-space-scaled-tallest) !important;
+        }
+
+        .ps-scaled-spacious {
+          padding-left: var(--bs-space-scaled-spacious) !important;
+        }
+
+        .gap-none {
+          gap: 0 !important;
+        }
+
+        .gap-smash {
+          gap: 2px !important;
+        }
+
+        .gap-shortest {
+          gap: 4px !important;
+        }
+
+        .gap-shorter {
+          gap: 8px !important;
+        }
+
+        .gap-short {
+          gap: 12px !important;
+        }
+
+        .gap-medium {
+          gap: 16px !important;
+        }
+
+        .gap-tall {
+          gap: 24px !important;
+        }
+
+        .gap-taller {
+          gap: 32px !important;
+        }
+
+        .gap-tallest {
+          gap: 40px !important;
+        }
+
+        .gap-spacious {
+          gap: 48px !important;
+        }
+
+        .gap-huge {
+          gap: 56px !important;
+        }
+
+        .gap-jumbo {
+          gap: 64px !important;
+        }
+
+        .gap-scaled-none {
+          gap: var(--bs-space-scaled-none) !important;
+        }
+
+        .gap-scaled-smash {
+          gap: var(--bs-space-scaled-smash) !important;
+        }
+
+        .gap-scaled-shortest {
+          gap: var(--bs-space-scaled-shortest) !important;
+        }
+
+        .gap-scaled-shorter {
+          gap: var(--bs-space-scaled-shorter) !important;
+        }
+
+        .gap-scaled-short {
+          gap: var(--bs-space-scaled-short) !important;
+        }
+
+        .gap-scaled-medium {
+          gap: var(--bs-space-scaled-medium) !important;
+        }
+
+        .gap-scaled-tall {
+          gap: var(--bs-space-scaled-tall) !important;
+        }
+
+        .gap-scaled-taller {
+          gap: var(--bs-space-scaled-taller) !important;
+        }
+
+        .gap-scaled-tallest {
+          gap: var(--bs-space-scaled-tallest) !important;
+        }
+
+        .gap-scaled-spacious {
+          gap: var(--bs-space-scaled-spacious) !important;
+        }
+
+        .row-gap-none {
+          row-gap: 0 !important;
+        }
+
+        .row-gap-smash {
+          row-gap: 2px !important;
+        }
+
+        .row-gap-shortest {
+          row-gap: 4px !important;
+        }
+
+        .row-gap-shorter {
+          row-gap: 8px !important;
+        }
+
+        .row-gap-short {
+          row-gap: 12px !important;
+        }
+
+        .row-gap-medium {
+          row-gap: 16px !important;
+        }
+
+        .row-gap-tall {
+          row-gap: 24px !important;
+        }
+
+        .row-gap-taller {
+          row-gap: 32px !important;
+        }
+
+        .row-gap-tallest {
+          row-gap: 40px !important;
+        }
+
+        .row-gap-spacious {
+          row-gap: 48px !important;
+        }
+
+        .row-gap-huge {
+          row-gap: 56px !important;
+        }
+
+        .row-gap-jumbo {
+          row-gap: 64px !important;
+        }
+
+        .row-gap-scaled-none {
+          row-gap: var(--bs-space-scaled-none) !important;
+        }
+
+        .row-gap-scaled-smash {
+          row-gap: var(--bs-space-scaled-smash) !important;
+        }
+
+        .row-gap-scaled-shortest {
+          row-gap: var(--bs-space-scaled-shortest) !important;
+        }
+
+        .row-gap-scaled-shorter {
+          row-gap: var(--bs-space-scaled-shorter) !important;
+        }
+
+        .row-gap-scaled-short {
+          row-gap: var(--bs-space-scaled-short) !important;
+        }
+
+        .row-gap-scaled-medium {
+          row-gap: var(--bs-space-scaled-medium) !important;
+        }
+
+        .row-gap-scaled-tall {
+          row-gap: var(--bs-space-scaled-tall) !important;
+        }
+
+        .row-gap-scaled-taller {
+          row-gap: var(--bs-space-scaled-taller) !important;
+        }
+
+        .row-gap-scaled-tallest {
+          row-gap: var(--bs-space-scaled-tallest) !important;
+        }
+
+        .row-gap-scaled-spacious {
+          row-gap: var(--bs-space-scaled-spacious) !important;
+        }
+
+        .column-gap-none {
+          column-gap: 0 !important;
+        }
+
+        .column-gap-smash {
+          column-gap: 2px !important;
+        }
+
+        .column-gap-shortest {
+          column-gap: 4px !important;
+        }
+
+        .column-gap-shorter {
+          column-gap: 8px !important;
+        }
+
+        .column-gap-short {
+          column-gap: 12px !important;
+        }
+
+        .column-gap-medium {
+          column-gap: 16px !important;
+        }
+
+        .column-gap-tall {
+          column-gap: 24px !important;
+        }
+
+        .column-gap-taller {
+          column-gap: 32px !important;
+        }
+
+        .column-gap-tallest {
+          column-gap: 40px !important;
+        }
+
+        .column-gap-spacious {
+          column-gap: 48px !important;
+        }
+
+        .column-gap-huge {
+          column-gap: 56px !important;
+        }
+
+        .column-gap-jumbo {
+          column-gap: 64px !important;
+        }
+
+        .column-gap-scaled-none {
+          column-gap: var(--bs-space-scaled-none) !important;
+        }
+
+        .column-gap-scaled-smash {
+          column-gap: var(--bs-space-scaled-smash) !important;
+        }
+
+        .column-gap-scaled-shortest {
+          column-gap: var(--bs-space-scaled-shortest) !important;
+        }
+
+        .column-gap-scaled-shorter {
+          column-gap: var(--bs-space-scaled-shorter) !important;
+        }
+
+        .column-gap-scaled-short {
+          column-gap: var(--bs-space-scaled-short) !important;
+        }
+
+        .column-gap-scaled-medium {
+          column-gap: var(--bs-space-scaled-medium) !important;
+        }
+
+        .column-gap-scaled-tall {
+          column-gap: var(--bs-space-scaled-tall) !important;
+        }
+
+        .column-gap-scaled-taller {
+          column-gap: var(--bs-space-scaled-taller) !important;
+        }
+
+        .column-gap-scaled-tallest {
+          column-gap: var(--bs-space-scaled-tallest) !important;
+        }
+
+        .column-gap-scaled-spacious {
+          column-gap: var(--bs-space-scaled-spacious) !important;
+        }
+
+        .shadow-none {
+          box-shadow: 0 0 0 0 rgba(0, 0, 0, 0) !important;
+        }
+
+        .shadow-raised {
+          box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.32) !important; // stylelint-disable-line @stylistic/number-leading-zero
+        }
+
+        .shadow-drag {
+          box-shadow: 0 4px 4px -1px rgba(0, 0, 0, 0.32) !important; // stylelint-disable-line @stylistic/number-leading-zero
+        }
+
+        .shadow-overlay-default {
+          box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.24) !important; // stylelint-disable-line @stylistic/number-leading-zero
+        }
+
+        .shadow-overlay-emphasized {
+          box-shadow: 0 12px 12px -4px rgba(0, 0, 0, 0.16) !important; // stylelint-disable-line @stylistic/number-leading-zero
+        }
+
+        .shadow-sticky-default {
+          box-shadow: 0 4px 4px -1px rgba(0, 0, 0, 0.16) !important; // stylelint-disable-line @stylistic/number-leading-zero
+        }
+
+        .shadow-sticky-emphasized {
+          box-shadow: 0 4px 4px -1px rgba(0, 0, 0, 0.16) !important; // stylelint-disable-line @stylistic/number-leading-zero
+        }
+
+        .shadow-sticky-navigation-scrolled {
+          box-shadow: 0 4px 4px -1px rgba(0, 0, 0, 0.16) !important; // stylelint-disable-line @stylistic/number-leading-zero
+        }
+
+        @media (min-width: 390px) {
+          .m-xs-none {
+            margin: 0 !important;
+          }
+
+          .m-xs-smash {
+            margin: 2px !important;
+          }
+
+          .m-xs-shortest {
+            margin: 4px !important;
+          }
+
+          .m-xs-shorter {
+            margin: 8px !important;
+          }
+
+          .m-xs-short {
+            margin: 12px !important;
+          }
+
+          .m-xs-medium {
+            margin: 16px !important;
+          }
+
+          .m-xs-tall {
+            margin: 24px !important;
+          }
+
+          .m-xs-taller {
+            margin: 32px !important;
+          }
+
+          .m-xs-tallest {
+            margin: 40px !important;
+          }
+
+          .m-xs-spacious {
+            margin: 48px !important;
+          }
+
+          .m-xs-huge {
+            margin: 56px !important;
+          }
+
+          .m-xs-jumbo {
+            margin: 64px !important;
+          }
+
+          .m-xs-auto {
+            margin: auto !important;
+          }
+
+          .mx-xs-none {
+            margin-right: 0 !important;
+            margin-left: 0 !important;
+          }
+
+          .mx-xs-smash {
+            margin-right: 2px !important;
+            margin-left: 2px !important;
+          }
+
+          .mx-xs-shortest {
+            margin-right: 4px !important;
+            margin-left: 4px !important;
+          }
+
+          .mx-xs-shorter {
+            margin-right: 8px !important;
+            margin-left: 8px !important;
+          }
+
+          .mx-xs-short {
+            margin-right: 12px !important;
+            margin-left: 12px !important;
+          }
+
+          .mx-xs-medium {
+            margin-right: 16px !important;
+            margin-left: 16px !important;
+          }
+
+          .mx-xs-tall {
+            margin-right: 24px !important;
+            margin-left: 24px !important;
+          }
+
+          .mx-xs-taller {
+            margin-right: 32px !important;
+            margin-left: 32px !important;
+          }
+
+          .mx-xs-tallest {
+            margin-right: 40px !important;
+            margin-left: 40px !important;
+          }
+
+          .mx-xs-spacious {
+            margin-right: 48px !important;
+            margin-left: 48px !important;
+          }
+
+          .mx-xs-huge {
+            margin-right: 56px !important;
+            margin-left: 56px !important;
+          }
+
+          .mx-xs-jumbo {
+            margin-right: 64px !important;
+            margin-left: 64px !important;
+          }
+
+          .mx-xs-auto {
+            margin-right: auto !important;
+            margin-left: auto !important;
+          }
+
+          .my-xs-none {
+            margin-top: 0 !important;
+            margin-bottom: 0 !important;
+          }
+
+          .my-xs-smash {
+            margin-top: 2px !important;
+            margin-bottom: 2px !important;
+          }
+
+          .my-xs-shortest {
+            margin-top: 4px !important;
+            margin-bottom: 4px !important;
+          }
+
+          .my-xs-shorter {
+            margin-top: 8px !important;
+            margin-bottom: 8px !important;
+          }
+
+          .my-xs-short {
+            margin-top: 12px !important;
+            margin-bottom: 12px !important;
+          }
+
+          .my-xs-medium {
+            margin-top: 16px !important;
+            margin-bottom: 16px !important;
+          }
+
+          .my-xs-tall {
+            margin-top: 24px !important;
+            margin-bottom: 24px !important;
+          }
+
+          .my-xs-taller {
+            margin-top: 32px !important;
+            margin-bottom: 32px !important;
+          }
+
+          .my-xs-tallest {
+            margin-top: 40px !important;
+            margin-bottom: 40px !important;
+          }
+
+          .my-xs-spacious {
+            margin-top: 48px !important;
+            margin-bottom: 48px !important;
+          }
+
+          .my-xs-huge {
+            margin-top: 56px !important;
+            margin-bottom: 56px !important;
+          }
+
+          .my-xs-jumbo {
+            margin-top: 64px !important;
+            margin-bottom: 64px !important;
+          }
+
+          .my-xs-auto {
+            margin-top: auto !important;
+            margin-bottom: auto !important;
+          }
+
+          .mt-xs-none {
+            margin-top: 0 !important;
+          }
+
+          .mt-xs-smash {
+            margin-top: 2px !important;
+          }
+
+          .mt-xs-shortest {
+            margin-top: 4px !important;
+          }
+
+          .mt-xs-shorter {
+            margin-top: 8px !important;
+          }
+
+          .mt-xs-short {
+            margin-top: 12px !important;
+          }
+
+          .mt-xs-medium {
+            margin-top: 16px !important;
+          }
+
+          .mt-xs-tall {
+            margin-top: 24px !important;
+          }
+
+          .mt-xs-taller {
+            margin-top: 32px !important;
+          }
+
+          .mt-xs-tallest {
+            margin-top: 40px !important;
+          }
+
+          .mt-xs-spacious {
+            margin-top: 48px !important;
+          }
+
+          .mt-xs-huge {
+            margin-top: 56px !important;
+          }
+
+          .mt-xs-jumbo {
+            margin-top: 64px !important;
+          }
+
+          .mt-xs-auto {
+            margin-top: auto !important;
+          }
+
+          .me-xs-none {
+            margin-right: 0 !important;
+          }
+
+          .me-xs-smash {
+            margin-right: 2px !important;
+          }
+
+          .me-xs-shortest {
+            margin-right: 4px !important;
+          }
+
+          .me-xs-shorter {
+            margin-right: 8px !important;
+          }
+
+          .me-xs-short {
+            margin-right: 12px !important;
+          }
+
+          .me-xs-medium {
+            margin-right: 16px !important;
+          }
+
+          .me-xs-tall {
+            margin-right: 24px !important;
+          }
+
+          .me-xs-taller {
+            margin-right: 32px !important;
+          }
+
+          .me-xs-tallest {
+            margin-right: 40px !important;
+          }
+
+          .me-xs-spacious {
+            margin-right: 48px !important;
+          }
+
+          .me-xs-huge {
+            margin-right: 56px !important;
+          }
+
+          .me-xs-jumbo {
+            margin-right: 64px !important;
+          }
+
+          .me-xs-auto {
+            margin-right: auto !important;
+          }
+
+          .mb-xs-none {
+            margin-bottom: 0 !important;
+          }
+
+          .mb-xs-smash {
+            margin-bottom: 2px !important;
+          }
+
+          .mb-xs-shortest {
+            margin-bottom: 4px !important;
+          }
+
+          .mb-xs-shorter {
+            margin-bottom: 8px !important;
+          }
+
+          .mb-xs-short {
+            margin-bottom: 12px !important;
+          }
+
+          .mb-xs-medium {
+            margin-bottom: 16px !important;
+          }
+
+          .mb-xs-tall {
+            margin-bottom: 24px !important;
+          }
+
+          .mb-xs-taller {
+            margin-bottom: 32px !important;
+          }
+
+          .mb-xs-tallest {
+            margin-bottom: 40px !important;
+          }
+
+          .mb-xs-spacious {
+            margin-bottom: 48px !important;
+          }
+
+          .mb-xs-huge {
+            margin-bottom: 56px !important;
+          }
+
+          .mb-xs-jumbo {
+            margin-bottom: 64px !important;
+          }
+
+          .mb-xs-auto {
+            margin-bottom: auto !important;
+          }
+
+          .ms-xs-none {
+            margin-left: 0 !important;
+          }
+
+          .ms-xs-smash {
+            margin-left: 2px !important;
+          }
+
+          .ms-xs-shortest {
+            margin-left: 4px !important;
+          }
+
+          .ms-xs-shorter {
+            margin-left: 8px !important;
+          }
+
+          .ms-xs-short {
+            margin-left: 12px !important;
+          }
+
+          .ms-xs-medium {
+            margin-left: 16px !important;
+          }
+
+          .ms-xs-tall {
+            margin-left: 24px !important;
+          }
+
+          .ms-xs-taller {
+            margin-left: 32px !important;
+          }
+
+          .ms-xs-tallest {
+            margin-left: 40px !important;
+          }
+
+          .ms-xs-spacious {
+            margin-left: 48px !important;
+          }
+
+          .ms-xs-huge {
+            margin-left: 56px !important;
+          }
+
+          .ms-xs-jumbo {
+            margin-left: 64px !important;
+          }
+
+          .ms-xs-auto {
+            margin-left: auto !important;
+          }
+
+          .p-xs-none {
+            padding: 0 !important;
+          }
+
+          .p-xs-smash {
+            padding: 2px !important;
+          }
+
+          .p-xs-shortest {
+            padding: 4px !important;
+          }
+
+          .p-xs-shorter {
+            padding: 8px !important;
+          }
+
+          .p-xs-short {
+            padding: 12px !important;
+          }
+
+          .p-xs-medium {
+            padding: 16px !important;
+          }
+
+          .p-xs-tall {
+            padding: 24px !important;
+          }
+
+          .p-xs-taller {
+            padding: 32px !important;
+          }
+
+          .p-xs-tallest {
+            padding: 40px !important;
+          }
+
+          .p-xs-spacious {
+            padding: 48px !important;
+          }
+
+          .p-xs-huge {
+            padding: 56px !important;
+          }
+
+          .p-xs-jumbo {
+            padding: 64px !important;
+          }
+
+          .px-xs-none {
+            padding-right: 0 !important;
+            padding-left: 0 !important;
+          }
+
+          .px-xs-smash {
+            padding-right: 2px !important;
+            padding-left: 2px !important;
+          }
+
+          .px-xs-shortest {
+            padding-right: 4px !important;
+            padding-left: 4px !important;
+          }
+
+          .px-xs-shorter {
+            padding-right: 8px !important;
+            padding-left: 8px !important;
+          }
+
+          .px-xs-short {
+            padding-right: 12px !important;
+            padding-left: 12px !important;
+          }
+
+          .px-xs-medium {
+            padding-right: 16px !important;
+            padding-left: 16px !important;
+          }
+
+          .px-xs-tall {
+            padding-right: 24px !important;
+            padding-left: 24px !important;
+          }
+
+          .px-xs-taller {
+            padding-right: 32px !important;
+            padding-left: 32px !important;
+          }
+
+          .px-xs-tallest {
+            padding-right: 40px !important;
+            padding-left: 40px !important;
+          }
+
+          .px-xs-spacious {
+            padding-right: 48px !important;
+            padding-left: 48px !important;
+          }
+
+          .px-xs-huge {
+            padding-right: 56px !important;
+            padding-left: 56px !important;
+          }
+
+          .px-xs-jumbo {
+            padding-right: 64px !important;
+            padding-left: 64px !important;
+          }
+
+          .py-xs-none {
+            padding-top: 0 !important;
+            padding-bottom: 0 !important;
+          }
+
+          .py-xs-smash {
+            padding-top: 2px !important;
+            padding-bottom: 2px !important;
+          }
+
+          .py-xs-shortest {
+            padding-top: 4px !important;
+            padding-bottom: 4px !important;
+          }
+
+          .py-xs-shorter {
+            padding-top: 8px !important;
+            padding-bottom: 8px !important;
+          }
+
+          .py-xs-short {
+            padding-top: 12px !important;
+            padding-bottom: 12px !important;
+          }
+
+          .py-xs-medium {
+            padding-top: 16px !important;
+            padding-bottom: 16px !important;
+          }
+
+          .py-xs-tall {
+            padding-top: 24px !important;
+            padding-bottom: 24px !important;
+          }
+
+          .py-xs-taller {
+            padding-top: 32px !important;
+            padding-bottom: 32px !important;
+          }
+
+          .py-xs-tallest {
+            padding-top: 40px !important;
+            padding-bottom: 40px !important;
+          }
+
+          .py-xs-spacious {
+            padding-top: 48px !important;
+            padding-bottom: 48px !important;
+          }
+
+          .py-xs-huge {
+            padding-top: 56px !important;
+            padding-bottom: 56px !important;
+          }
+
+          .py-xs-jumbo {
+            padding-top: 64px !important;
+            padding-bottom: 64px !important;
+          }
+
+          .pt-xs-none {
+            padding-top: 0 !important;
+          }
+
+          .pt-xs-smash {
+            padding-top: 2px !important;
+          }
+
+          .pt-xs-shortest {
+            padding-top: 4px !important;
+          }
+
+          .pt-xs-shorter {
+            padding-top: 8px !important;
+          }
+
+          .pt-xs-short {
+            padding-top: 12px !important;
+          }
+
+          .pt-xs-medium {
+            padding-top: 16px !important;
+          }
+
+          .pt-xs-tall {
+            padding-top: 24px !important;
+          }
+
+          .pt-xs-taller {
+            padding-top: 32px !important;
+          }
+
+          .pt-xs-tallest {
+            padding-top: 40px !important;
+          }
+
+          .pt-xs-spacious {
+            padding-top: 48px !important;
+          }
+
+          .pt-xs-huge {
+            padding-top: 56px !important;
+          }
+
+          .pt-xs-jumbo {
+            padding-top: 64px !important;
+          }
+
+          .pe-xs-none {
+            padding-right: 0 !important;
+          }
+
+          .pe-xs-smash {
+            padding-right: 2px !important;
+          }
+
+          .pe-xs-shortest {
+            padding-right: 4px !important;
+          }
+
+          .pe-xs-shorter {
+            padding-right: 8px !important;
+          }
+
+          .pe-xs-short {
+            padding-right: 12px !important;
+          }
+
+          .pe-xs-medium {
+            padding-right: 16px !important;
+          }
+
+          .pe-xs-tall {
+            padding-right: 24px !important;
+          }
+
+          .pe-xs-taller {
+            padding-right: 32px !important;
+          }
+
+          .pe-xs-tallest {
+            padding-right: 40px !important;
+          }
+
+          .pe-xs-spacious {
+            padding-right: 48px !important;
+          }
+
+          .pe-xs-huge {
+            padding-right: 56px !important;
+          }
+
+          .pe-xs-jumbo {
+            padding-right: 64px !important;
+          }
+
+          .pb-xs-none {
+            padding-bottom: 0 !important;
+          }
+
+          .pb-xs-smash {
+            padding-bottom: 2px !important;
+          }
+
+          .pb-xs-shortest {
+            padding-bottom: 4px !important;
+          }
+
+          .pb-xs-shorter {
+            padding-bottom: 8px !important;
+          }
+
+          .pb-xs-short {
+            padding-bottom: 12px !important;
+          }
+
+          .pb-xs-medium {
+            padding-bottom: 16px !important;
+          }
+
+          .pb-xs-tall {
+            padding-bottom: 24px !important;
+          }
+
+          .pb-xs-taller {
+            padding-bottom: 32px !important;
+          }
+
+          .pb-xs-tallest {
+            padding-bottom: 40px !important;
+          }
+
+          .pb-xs-spacious {
+            padding-bottom: 48px !important;
+          }
+
+          .pb-xs-huge {
+            padding-bottom: 56px !important;
+          }
+
+          .pb-xs-jumbo {
+            padding-bottom: 64px !important;
+          }
+
+          .ps-xs-none {
+            padding-left: 0 !important;
+          }
+
+          .ps-xs-smash {
+            padding-left: 2px !important;
+          }
+
+          .ps-xs-shortest {
+            padding-left: 4px !important;
+          }
+
+          .ps-xs-shorter {
+            padding-left: 8px !important;
+          }
+
+          .ps-xs-short {
+            padding-left: 12px !important;
+          }
+
+          .ps-xs-medium {
+            padding-left: 16px !important;
+          }
+
+          .ps-xs-tall {
+            padding-left: 24px !important;
+          }
+
+          .ps-xs-taller {
+            padding-left: 32px !important;
+          }
+
+          .ps-xs-tallest {
+            padding-left: 40px !important;
+          }
+
+          .ps-xs-spacious {
+            padding-left: 48px !important;
+          }
+
+          .ps-xs-huge {
+            padding-left: 56px !important;
+          }
+
+          .ps-xs-jumbo {
+            padding-left: 64px !important;
+          }
+
+          .gap-xs-none {
+            gap: 0 !important;
+          }
+
+          .gap-xs-smash {
+            gap: 2px !important;
+          }
+
+          .gap-xs-shortest {
+            gap: 4px !important;
+          }
+
+          .gap-xs-shorter {
+            gap: 8px !important;
+          }
+
+          .gap-xs-short {
+            gap: 12px !important;
+          }
+
+          .gap-xs-medium {
+            gap: 16px !important;
+          }
+
+          .gap-xs-tall {
+            gap: 24px !important;
+          }
+
+          .gap-xs-taller {
+            gap: 32px !important;
+          }
+
+          .gap-xs-tallest {
+            gap: 40px !important;
+          }
+
+          .gap-xs-spacious {
+            gap: 48px !important;
+          }
+
+          .gap-xs-huge {
+            gap: 56px !important;
+          }
+
+          .gap-xs-jumbo {
+            gap: 64px !important;
+          }
+
+          .row-gap-xs-none {
+            row-gap: 0 !important;
+          }
+
+          .row-gap-xs-smash {
+            row-gap: 2px !important;
+          }
+
+          .row-gap-xs-shortest {
+            row-gap: 4px !important;
+          }
+
+          .row-gap-xs-shorter {
+            row-gap: 8px !important;
+          }
+
+          .row-gap-xs-short {
+            row-gap: 12px !important;
+          }
+
+          .row-gap-xs-medium {
+            row-gap: 16px !important;
+          }
+
+          .row-gap-xs-tall {
+            row-gap: 24px !important;
+          }
+
+          .row-gap-xs-taller {
+            row-gap: 32px !important;
+          }
+
+          .row-gap-xs-tallest {
+            row-gap: 40px !important;
+          }
+
+          .row-gap-xs-spacious {
+            row-gap: 48px !important;
+          }
+
+          .row-gap-xs-huge {
+            row-gap: 56px !important;
+          }
+
+          .row-gap-xs-jumbo {
+            row-gap: 64px !important;
+          }
+
+          .column-gap-xs-none {
+            column-gap: 0 !important;
+          }
+
+          .column-gap-xs-smash {
+            column-gap: 2px !important;
+          }
+
+          .column-gap-xs-shortest {
+            column-gap: 4px !important;
+          }
+
+          .column-gap-xs-shorter {
+            column-gap: 8px !important;
+          }
+
+          .column-gap-xs-short {
+            column-gap: 12px !important;
+          }
+
+          .column-gap-xs-medium {
+            column-gap: 16px !important;
+          }
+
+          .column-gap-xs-tall {
+            column-gap: 24px !important;
+          }
+
+          .column-gap-xs-taller {
+            column-gap: 32px !important;
+          }
+
+          .column-gap-xs-tallest {
+            column-gap: 40px !important;
+          }
+
+          .column-gap-xs-spacious {
+            column-gap: 48px !important;
+          }
+
+          .column-gap-xs-huge {
+            column-gap: 56px !important;
+          }
+
+          .column-gap-xs-jumbo {
+            column-gap: 64px !important;
+          }
+        }
+
+        @media (min-width: 480px) {
+          .m-sm-none {
+            margin: 0 !important;
+          }
+
+          .m-sm-smash {
+            margin: 2px !important;
+          }
+
+          .m-sm-shortest {
+            margin: 4px !important;
+          }
+
+          .m-sm-shorter {
+            margin: 8px !important;
+          }
+
+          .m-sm-short {
+            margin: 12px !important;
+          }
+
+          .m-sm-medium {
+            margin: 16px !important;
+          }
+
+          .m-sm-tall {
+            margin: 24px !important;
+          }
+
+          .m-sm-taller {
+            margin: 32px !important;
+          }
+
+          .m-sm-tallest {
+            margin: 40px !important;
+          }
+
+          .m-sm-spacious {
+            margin: 48px !important;
+          }
+
+          .m-sm-huge {
+            margin: 56px !important;
+          }
+
+          .m-sm-jumbo {
+            margin: 64px !important;
+          }
+
+          .m-sm-auto {
+            margin: auto !important;
+          }
+
+          .mx-sm-none {
+            margin-right: 0 !important;
+            margin-left: 0 !important;
+          }
+
+          .mx-sm-smash {
+            margin-right: 2px !important;
+            margin-left: 2px !important;
+          }
+
+          .mx-sm-shortest {
+            margin-right: 4px !important;
+            margin-left: 4px !important;
+          }
+
+          .mx-sm-shorter {
+            margin-right: 8px !important;
+            margin-left: 8px !important;
+          }
+
+          .mx-sm-short {
+            margin-right: 12px !important;
+            margin-left: 12px !important;
+          }
+
+          .mx-sm-medium {
+            margin-right: 16px !important;
+            margin-left: 16px !important;
+          }
+
+          .mx-sm-tall {
+            margin-right: 24px !important;
+            margin-left: 24px !important;
+          }
+
+          .mx-sm-taller {
+            margin-right: 32px !important;
+            margin-left: 32px !important;
+          }
+
+          .mx-sm-tallest {
+            margin-right: 40px !important;
+            margin-left: 40px !important;
+          }
+
+          .mx-sm-spacious {
+            margin-right: 48px !important;
+            margin-left: 48px !important;
+          }
+
+          .mx-sm-huge {
+            margin-right: 56px !important;
+            margin-left: 56px !important;
+          }
+
+          .mx-sm-jumbo {
+            margin-right: 64px !important;
+            margin-left: 64px !important;
+          }
+
+          .mx-sm-auto {
+            margin-right: auto !important;
+            margin-left: auto !important;
+          }
+
+          .my-sm-none {
+            margin-top: 0 !important;
+            margin-bottom: 0 !important;
+          }
+
+          .my-sm-smash {
+            margin-top: 2px !important;
+            margin-bottom: 2px !important;
+          }
+
+          .my-sm-shortest {
+            margin-top: 4px !important;
+            margin-bottom: 4px !important;
+          }
+
+          .my-sm-shorter {
+            margin-top: 8px !important;
+            margin-bottom: 8px !important;
+          }
+
+          .my-sm-short {
+            margin-top: 12px !important;
+            margin-bottom: 12px !important;
+          }
+
+          .my-sm-medium {
+            margin-top: 16px !important;
+            margin-bottom: 16px !important;
+          }
+
+          .my-sm-tall {
+            margin-top: 24px !important;
+            margin-bottom: 24px !important;
+          }
+
+          .my-sm-taller {
+            margin-top: 32px !important;
+            margin-bottom: 32px !important;
+          }
+
+          .my-sm-tallest {
+            margin-top: 40px !important;
+            margin-bottom: 40px !important;
+          }
+
+          .my-sm-spacious {
+            margin-top: 48px !important;
+            margin-bottom: 48px !important;
+          }
+
+          .my-sm-huge {
+            margin-top: 56px !important;
+            margin-bottom: 56px !important;
+          }
+
+          .my-sm-jumbo {
+            margin-top: 64px !important;
+            margin-bottom: 64px !important;
+          }
+
+          .my-sm-auto {
+            margin-top: auto !important;
+            margin-bottom: auto !important;
+          }
+
+          .mt-sm-none {
+            margin-top: 0 !important;
+          }
+
+          .mt-sm-smash {
+            margin-top: 2px !important;
+          }
+
+          .mt-sm-shortest {
+            margin-top: 4px !important;
+          }
+
+          .mt-sm-shorter {
+            margin-top: 8px !important;
+          }
+
+          .mt-sm-short {
+            margin-top: 12px !important;
+          }
+
+          .mt-sm-medium {
+            margin-top: 16px !important;
+          }
+
+          .mt-sm-tall {
+            margin-top: 24px !important;
+          }
+
+          .mt-sm-taller {
+            margin-top: 32px !important;
+          }
+
+          .mt-sm-tallest {
+            margin-top: 40px !important;
+          }
+
+          .mt-sm-spacious {
+            margin-top: 48px !important;
+          }
+
+          .mt-sm-huge {
+            margin-top: 56px !important;
+          }
+
+          .mt-sm-jumbo {
+            margin-top: 64px !important;
+          }
+
+          .mt-sm-auto {
+            margin-top: auto !important;
+          }
+
+          .me-sm-none {
+            margin-right: 0 !important;
+          }
+
+          .me-sm-smash {
+            margin-right: 2px !important;
+          }
+
+          .me-sm-shortest {
+            margin-right: 4px !important;
+          }
+
+          .me-sm-shorter {
+            margin-right: 8px !important;
+          }
+
+          .me-sm-short {
+            margin-right: 12px !important;
+          }
+
+          .me-sm-medium {
+            margin-right: 16px !important;
+          }
+
+          .me-sm-tall {
+            margin-right: 24px !important;
+          }
+
+          .me-sm-taller {
+            margin-right: 32px !important;
+          }
+
+          .me-sm-tallest {
+            margin-right: 40px !important;
+          }
+
+          .me-sm-spacious {
+            margin-right: 48px !important;
+          }
+
+          .me-sm-huge {
+            margin-right: 56px !important;
+          }
+
+          .me-sm-jumbo {
+            margin-right: 64px !important;
+          }
+
+          .me-sm-auto {
+            margin-right: auto !important;
+          }
+
+          .mb-sm-none {
+            margin-bottom: 0 !important;
+          }
+
+          .mb-sm-smash {
+            margin-bottom: 2px !important;
+          }
+
+          .mb-sm-shortest {
+            margin-bottom: 4px !important;
+          }
+
+          .mb-sm-shorter {
+            margin-bottom: 8px !important;
+          }
+
+          .mb-sm-short {
+            margin-bottom: 12px !important;
+          }
+
+          .mb-sm-medium {
+            margin-bottom: 16px !important;
+          }
+
+          .mb-sm-tall {
+            margin-bottom: 24px !important;
+          }
+
+          .mb-sm-taller {
+            margin-bottom: 32px !important;
+          }
+
+          .mb-sm-tallest {
+            margin-bottom: 40px !important;
+          }
+
+          .mb-sm-spacious {
+            margin-bottom: 48px !important;
+          }
+
+          .mb-sm-huge {
+            margin-bottom: 56px !important;
+          }
+
+          .mb-sm-jumbo {
+            margin-bottom: 64px !important;
+          }
+
+          .mb-sm-auto {
+            margin-bottom: auto !important;
+          }
+
+          .ms-sm-none {
+            margin-left: 0 !important;
+          }
+
+          .ms-sm-smash {
+            margin-left: 2px !important;
+          }
+
+          .ms-sm-shortest {
+            margin-left: 4px !important;
+          }
+
+          .ms-sm-shorter {
+            margin-left: 8px !important;
+          }
+
+          .ms-sm-short {
+            margin-left: 12px !important;
+          }
+
+          .ms-sm-medium {
+            margin-left: 16px !important;
+          }
+
+          .ms-sm-tall {
+            margin-left: 24px !important;
+          }
+
+          .ms-sm-taller {
+            margin-left: 32px !important;
+          }
+
+          .ms-sm-tallest {
+            margin-left: 40px !important;
+          }
+
+          .ms-sm-spacious {
+            margin-left: 48px !important;
+          }
+
+          .ms-sm-huge {
+            margin-left: 56px !important;
+          }
+
+          .ms-sm-jumbo {
+            margin-left: 64px !important;
+          }
+
+          .ms-sm-auto {
+            margin-left: auto !important;
+          }
+
+          .p-sm-none {
+            padding: 0 !important;
+          }
+
+          .p-sm-smash {
+            padding: 2px !important;
+          }
+
+          .p-sm-shortest {
+            padding: 4px !important;
+          }
+
+          .p-sm-shorter {
+            padding: 8px !important;
+          }
+
+          .p-sm-short {
+            padding: 12px !important;
+          }
+
+          .p-sm-medium {
+            padding: 16px !important;
+          }
+
+          .p-sm-tall {
+            padding: 24px !important;
+          }
+
+          .p-sm-taller {
+            padding: 32px !important;
+          }
+
+          .p-sm-tallest {
+            padding: 40px !important;
+          }
+
+          .p-sm-spacious {
+            padding: 48px !important;
+          }
+
+          .p-sm-huge {
+            padding: 56px !important;
+          }
+
+          .p-sm-jumbo {
+            padding: 64px !important;
+          }
+
+          .px-sm-none {
+            padding-right: 0 !important;
+            padding-left: 0 !important;
+          }
+
+          .px-sm-smash {
+            padding-right: 2px !important;
+            padding-left: 2px !important;
+          }
+
+          .px-sm-shortest {
+            padding-right: 4px !important;
+            padding-left: 4px !important;
+          }
+
+          .px-sm-shorter {
+            padding-right: 8px !important;
+            padding-left: 8px !important;
+          }
+
+          .px-sm-short {
+            padding-right: 12px !important;
+            padding-left: 12px !important;
+          }
+
+          .px-sm-medium {
+            padding-right: 16px !important;
+            padding-left: 16px !important;
+          }
+
+          .px-sm-tall {
+            padding-right: 24px !important;
+            padding-left: 24px !important;
+          }
+
+          .px-sm-taller {
+            padding-right: 32px !important;
+            padding-left: 32px !important;
+          }
+
+          .px-sm-tallest {
+            padding-right: 40px !important;
+            padding-left: 40px !important;
+          }
+
+          .px-sm-spacious {
+            padding-right: 48px !important;
+            padding-left: 48px !important;
+          }
+
+          .px-sm-huge {
+            padding-right: 56px !important;
+            padding-left: 56px !important;
+          }
+
+          .px-sm-jumbo {
+            padding-right: 64px !important;
+            padding-left: 64px !important;
+          }
+
+          .py-sm-none {
+            padding-top: 0 !important;
+            padding-bottom: 0 !important;
+          }
+
+          .py-sm-smash {
+            padding-top: 2px !important;
+            padding-bottom: 2px !important;
+          }
+
+          .py-sm-shortest {
+            padding-top: 4px !important;
+            padding-bottom: 4px !important;
+          }
+
+          .py-sm-shorter {
+            padding-top: 8px !important;
+            padding-bottom: 8px !important;
+          }
+
+          .py-sm-short {
+            padding-top: 12px !important;
+            padding-bottom: 12px !important;
+          }
+
+          .py-sm-medium {
+            padding-top: 16px !important;
+            padding-bottom: 16px !important;
+          }
+
+          .py-sm-tall {
+            padding-top: 24px !important;
+            padding-bottom: 24px !important;
+          }
+
+          .py-sm-taller {
+            padding-top: 32px !important;
+            padding-bottom: 32px !important;
+          }
+
+          .py-sm-tallest {
+            padding-top: 40px !important;
+            padding-bottom: 40px !important;
+          }
+
+          .py-sm-spacious {
+            padding-top: 48px !important;
+            padding-bottom: 48px !important;
+          }
+
+          .py-sm-huge {
+            padding-top: 56px !important;
+            padding-bottom: 56px !important;
+          }
+
+          .py-sm-jumbo {
+            padding-top: 64px !important;
+            padding-bottom: 64px !important;
+          }
+
+          .pt-sm-none {
+            padding-top: 0 !important;
+          }
+
+          .pt-sm-smash {
+            padding-top: 2px !important;
+          }
+
+          .pt-sm-shortest {
+            padding-top: 4px !important;
+          }
+
+          .pt-sm-shorter {
+            padding-top: 8px !important;
+          }
+
+          .pt-sm-short {
+            padding-top: 12px !important;
+          }
+
+          .pt-sm-medium {
+            padding-top: 16px !important;
+          }
+
+          .pt-sm-tall {
+            padding-top: 24px !important;
+          }
+
+          .pt-sm-taller {
+            padding-top: 32px !important;
+          }
+
+          .pt-sm-tallest {
+            padding-top: 40px !important;
+          }
+
+          .pt-sm-spacious {
+            padding-top: 48px !important;
+          }
+
+          .pt-sm-huge {
+            padding-top: 56px !important;
+          }
+
+          .pt-sm-jumbo {
+            padding-top: 64px !important;
+          }
+
+          .pe-sm-none {
+            padding-right: 0 !important;
+          }
+
+          .pe-sm-smash {
+            padding-right: 2px !important;
+          }
+
+          .pe-sm-shortest {
+            padding-right: 4px !important;
+          }
+
+          .pe-sm-shorter {
+            padding-right: 8px !important;
+          }
+
+          .pe-sm-short {
+            padding-right: 12px !important;
+          }
+
+          .pe-sm-medium {
+            padding-right: 16px !important;
+          }
+
+          .pe-sm-tall {
+            padding-right: 24px !important;
+          }
+
+          .pe-sm-taller {
+            padding-right: 32px !important;
+          }
+
+          .pe-sm-tallest {
+            padding-right: 40px !important;
+          }
+
+          .pe-sm-spacious {
+            padding-right: 48px !important;
+          }
+
+          .pe-sm-huge {
+            padding-right: 56px !important;
+          }
+
+          .pe-sm-jumbo {
+            padding-right: 64px !important;
+          }
+
+          .pb-sm-none {
+            padding-bottom: 0 !important;
+          }
+
+          .pb-sm-smash {
+            padding-bottom: 2px !important;
+          }
+
+          .pb-sm-shortest {
+            padding-bottom: 4px !important;
+          }
+
+          .pb-sm-shorter {
+            padding-bottom: 8px !important;
+          }
+
+          .pb-sm-short {
+            padding-bottom: 12px !important;
+          }
+
+          .pb-sm-medium {
+            padding-bottom: 16px !important;
+          }
+
+          .pb-sm-tall {
+            padding-bottom: 24px !important;
+          }
+
+          .pb-sm-taller {
+            padding-bottom: 32px !important;
+          }
+
+          .pb-sm-tallest {
+            padding-bottom: 40px !important;
+          }
+
+          .pb-sm-spacious {
+            padding-bottom: 48px !important;
+          }
+
+          .pb-sm-huge {
+            padding-bottom: 56px !important;
+          }
+
+          .pb-sm-jumbo {
+            padding-bottom: 64px !important;
+          }
+
+          .ps-sm-none {
+            padding-left: 0 !important;
+          }
+
+          .ps-sm-smash {
+            padding-left: 2px !important;
+          }
+
+          .ps-sm-shortest {
+            padding-left: 4px !important;
+          }
+
+          .ps-sm-shorter {
+            padding-left: 8px !important;
+          }
+
+          .ps-sm-short {
+            padding-left: 12px !important;
+          }
+
+          .ps-sm-medium {
+            padding-left: 16px !important;
+          }
+
+          .ps-sm-tall {
+            padding-left: 24px !important;
+          }
+
+          .ps-sm-taller {
+            padding-left: 32px !important;
+          }
+
+          .ps-sm-tallest {
+            padding-left: 40px !important;
+          }
+
+          .ps-sm-spacious {
+            padding-left: 48px !important;
+          }
+
+          .ps-sm-huge {
+            padding-left: 56px !important;
+          }
+
+          .ps-sm-jumbo {
+            padding-left: 64px !important;
+          }
+
+          .gap-sm-none {
+            gap: 0 !important;
+          }
+
+          .gap-sm-smash {
+            gap: 2px !important;
+          }
+
+          .gap-sm-shortest {
+            gap: 4px !important;
+          }
+
+          .gap-sm-shorter {
+            gap: 8px !important;
+          }
+
+          .gap-sm-short {
+            gap: 12px !important;
+          }
+
+          .gap-sm-medium {
+            gap: 16px !important;
+          }
+
+          .gap-sm-tall {
+            gap: 24px !important;
+          }
+
+          .gap-sm-taller {
+            gap: 32px !important;
+          }
+
+          .gap-sm-tallest {
+            gap: 40px !important;
+          }
+
+          .gap-sm-spacious {
+            gap: 48px !important;
+          }
+
+          .gap-sm-huge {
+            gap: 56px !important;
+          }
+
+          .gap-sm-jumbo {
+            gap: 64px !important;
+          }
+
+          .row-gap-sm-none {
+            row-gap: 0 !important;
+          }
+
+          .row-gap-sm-smash {
+            row-gap: 2px !important;
+          }
+
+          .row-gap-sm-shortest {
+            row-gap: 4px !important;
+          }
+
+          .row-gap-sm-shorter {
+            row-gap: 8px !important;
+          }
+
+          .row-gap-sm-short {
+            row-gap: 12px !important;
+          }
+
+          .row-gap-sm-medium {
+            row-gap: 16px !important;
+          }
+
+          .row-gap-sm-tall {
+            row-gap: 24px !important;
+          }
+
+          .row-gap-sm-taller {
+            row-gap: 32px !important;
+          }
+
+          .row-gap-sm-tallest {
+            row-gap: 40px !important;
+          }
+
+          .row-gap-sm-spacious {
+            row-gap: 48px !important;
+          }
+
+          .row-gap-sm-huge {
+            row-gap: 56px !important;
+          }
+
+          .row-gap-sm-jumbo {
+            row-gap: 64px !important;
+          }
+
+          .column-gap-sm-none {
+            column-gap: 0 !important;
+          }
+
+          .column-gap-sm-smash {
+            column-gap: 2px !important;
+          }
+
+          .column-gap-sm-shortest {
+            column-gap: 4px !important;
+          }
+
+          .column-gap-sm-shorter {
+            column-gap: 8px !important;
+          }
+
+          .column-gap-sm-short {
+            column-gap: 12px !important;
+          }
+
+          .column-gap-sm-medium {
+            column-gap: 16px !important;
+          }
+
+          .column-gap-sm-tall {
+            column-gap: 24px !important;
+          }
+
+          .column-gap-sm-taller {
+            column-gap: 32px !important;
+          }
+
+          .column-gap-sm-tallest {
+            column-gap: 40px !important;
+          }
+
+          .column-gap-sm-spacious {
+            column-gap: 48px !important;
+          }
+
+          .column-gap-sm-huge {
+            column-gap: 56px !important;
+          }
+
+          .column-gap-sm-jumbo {
+            column-gap: 64px !important;
+          }
+        }
+
+        @media (min-width: 736px) {
+          .m-md-none {
+            margin: 0 !important;
+          }
+
+          .m-md-smash {
+            margin: 2px !important;
+          }
+
+          .m-md-shortest {
+            margin: 4px !important;
+          }
+
+          .m-md-shorter {
+            margin: 8px !important;
+          }
+
+          .m-md-short {
+            margin: 12px !important;
+          }
+
+          .m-md-medium {
+            margin: 16px !important;
+          }
+
+          .m-md-tall {
+            margin: 24px !important;
+          }
+
+          .m-md-taller {
+            margin: 32px !important;
+          }
+
+          .m-md-tallest {
+            margin: 40px !important;
+          }
+
+          .m-md-spacious {
+            margin: 48px !important;
+          }
+
+          .m-md-huge {
+            margin: 56px !important;
+          }
+
+          .m-md-jumbo {
+            margin: 64px !important;
+          }
+
+          .m-md-auto {
+            margin: auto !important;
+          }
+
+          .mx-md-none {
+            margin-right: 0 !important;
+            margin-left: 0 !important;
+          }
+
+          .mx-md-smash {
+            margin-right: 2px !important;
+            margin-left: 2px !important;
+          }
+
+          .mx-md-shortest {
+            margin-right: 4px !important;
+            margin-left: 4px !important;
+          }
+
+          .mx-md-shorter {
+            margin-right: 8px !important;
+            margin-left: 8px !important;
+          }
+
+          .mx-md-short {
+            margin-right: 12px !important;
+            margin-left: 12px !important;
+          }
+
+          .mx-md-medium {
+            margin-right: 16px !important;
+            margin-left: 16px !important;
+          }
+
+          .mx-md-tall {
+            margin-right: 24px !important;
+            margin-left: 24px !important;
+          }
+
+          .mx-md-taller {
+            margin-right: 32px !important;
+            margin-left: 32px !important;
+          }
+
+          .mx-md-tallest {
+            margin-right: 40px !important;
+            margin-left: 40px !important;
+          }
+
+          .mx-md-spacious {
+            margin-right: 48px !important;
+            margin-left: 48px !important;
+          }
+
+          .mx-md-huge {
+            margin-right: 56px !important;
+            margin-left: 56px !important;
+          }
+
+          .mx-md-jumbo {
+            margin-right: 64px !important;
+            margin-left: 64px !important;
+          }
+
+          .mx-md-auto {
+            margin-right: auto !important;
+            margin-left: auto !important;
+          }
+
+          .my-md-none {
+            margin-top: 0 !important;
+            margin-bottom: 0 !important;
+          }
+
+          .my-md-smash {
+            margin-top: 2px !important;
+            margin-bottom: 2px !important;
+          }
+
+          .my-md-shortest {
+            margin-top: 4px !important;
+            margin-bottom: 4px !important;
+          }
+
+          .my-md-shorter {
+            margin-top: 8px !important;
+            margin-bottom: 8px !important;
+          }
+
+          .my-md-short {
+            margin-top: 12px !important;
+            margin-bottom: 12px !important;
+          }
+
+          .my-md-medium {
+            margin-top: 16px !important;
+            margin-bottom: 16px !important;
+          }
+
+          .my-md-tall {
+            margin-top: 24px !important;
+            margin-bottom: 24px !important;
+          }
+
+          .my-md-taller {
+            margin-top: 32px !important;
+            margin-bottom: 32px !important;
+          }
+
+          .my-md-tallest {
+            margin-top: 40px !important;
+            margin-bottom: 40px !important;
+          }
+
+          .my-md-spacious {
+            margin-top: 48px !important;
+            margin-bottom: 48px !important;
+          }
+
+          .my-md-huge {
+            margin-top: 56px !important;
+            margin-bottom: 56px !important;
+          }
+
+          .my-md-jumbo {
+            margin-top: 64px !important;
+            margin-bottom: 64px !important;
+          }
+
+          .my-md-auto {
+            margin-top: auto !important;
+            margin-bottom: auto !important;
+          }
+
+          .mt-md-none {
+            margin-top: 0 !important;
+          }
+
+          .mt-md-smash {
+            margin-top: 2px !important;
+          }
+
+          .mt-md-shortest {
+            margin-top: 4px !important;
+          }
+
+          .mt-md-shorter {
+            margin-top: 8px !important;
+          }
+
+          .mt-md-short {
+            margin-top: 12px !important;
+          }
+
+          .mt-md-medium {
+            margin-top: 16px !important;
+          }
+
+          .mt-md-tall {
+            margin-top: 24px !important;
+          }
+
+          .mt-md-taller {
+            margin-top: 32px !important;
+          }
+
+          .mt-md-tallest {
+            margin-top: 40px !important;
+          }
+
+          .mt-md-spacious {
+            margin-top: 48px !important;
+          }
+
+          .mt-md-huge {
+            margin-top: 56px !important;
+          }
+
+          .mt-md-jumbo {
+            margin-top: 64px !important;
+          }
+
+          .mt-md-auto {
+            margin-top: auto !important;
+          }
+
+          .me-md-none {
+            margin-right: 0 !important;
+          }
+
+          .me-md-smash {
+            margin-right: 2px !important;
+          }
+
+          .me-md-shortest {
+            margin-right: 4px !important;
+          }
+
+          .me-md-shorter {
+            margin-right: 8px !important;
+          }
+
+          .me-md-short {
+            margin-right: 12px !important;
+          }
+
+          .me-md-medium {
+            margin-right: 16px !important;
+          }
+
+          .me-md-tall {
+            margin-right: 24px !important;
+          }
+
+          .me-md-taller {
+            margin-right: 32px !important;
+          }
+
+          .me-md-tallest {
+            margin-right: 40px !important;
+          }
+
+          .me-md-spacious {
+            margin-right: 48px !important;
+          }
+
+          .me-md-huge {
+            margin-right: 56px !important;
+          }
+
+          .me-md-jumbo {
+            margin-right: 64px !important;
+          }
+
+          .me-md-auto {
+            margin-right: auto !important;
+          }
+
+          .mb-md-none {
+            margin-bottom: 0 !important;
+          }
+
+          .mb-md-smash {
+            margin-bottom: 2px !important;
+          }
+
+          .mb-md-shortest {
+            margin-bottom: 4px !important;
+          }
+
+          .mb-md-shorter {
+            margin-bottom: 8px !important;
+          }
+
+          .mb-md-short {
+            margin-bottom: 12px !important;
+          }
+
+          .mb-md-medium {
+            margin-bottom: 16px !important;
+          }
+
+          .mb-md-tall {
+            margin-bottom: 24px !important;
+          }
+
+          .mb-md-taller {
+            margin-bottom: 32px !important;
+          }
+
+          .mb-md-tallest {
+            margin-bottom: 40px !important;
+          }
+
+          .mb-md-spacious {
+            margin-bottom: 48px !important;
+          }
+
+          .mb-md-huge {
+            margin-bottom: 56px !important;
+          }
+
+          .mb-md-jumbo {
+            margin-bottom: 64px !important;
+          }
+
+          .mb-md-auto {
+            margin-bottom: auto !important;
+          }
+
+          .ms-md-none {
+            margin-left: 0 !important;
+          }
+
+          .ms-md-smash {
+            margin-left: 2px !important;
+          }
+
+          .ms-md-shortest {
+            margin-left: 4px !important;
+          }
+
+          .ms-md-shorter {
+            margin-left: 8px !important;
+          }
+
+          .ms-md-short {
+            margin-left: 12px !important;
+          }
+
+          .ms-md-medium {
+            margin-left: 16px !important;
+          }
+
+          .ms-md-tall {
+            margin-left: 24px !important;
+          }
+
+          .ms-md-taller {
+            margin-left: 32px !important;
+          }
+
+          .ms-md-tallest {
+            margin-left: 40px !important;
+          }
+
+          .ms-md-spacious {
+            margin-left: 48px !important;
+          }
+
+          .ms-md-huge {
+            margin-left: 56px !important;
+          }
+
+          .ms-md-jumbo {
+            margin-left: 64px !important;
+          }
+
+          .ms-md-auto {
+            margin-left: auto !important;
+          }
+
+          .p-md-none {
+            padding: 0 !important;
+          }
+
+          .p-md-smash {
+            padding: 2px !important;
+          }
+
+          .p-md-shortest {
+            padding: 4px !important;
+          }
+
+          .p-md-shorter {
+            padding: 8px !important;
+          }
+
+          .p-md-short {
+            padding: 12px !important;
+          }
+
+          .p-md-medium {
+            padding: 16px !important;
+          }
+
+          .p-md-tall {
+            padding: 24px !important;
+          }
+
+          .p-md-taller {
+            padding: 32px !important;
+          }
+
+          .p-md-tallest {
+            padding: 40px !important;
+          }
+
+          .p-md-spacious {
+            padding: 48px !important;
+          }
+
+          .p-md-huge {
+            padding: 56px !important;
+          }
+
+          .p-md-jumbo {
+            padding: 64px !important;
+          }
+
+          .px-md-none {
+            padding-right: 0 !important;
+            padding-left: 0 !important;
+          }
+
+          .px-md-smash {
+            padding-right: 2px !important;
+            padding-left: 2px !important;
+          }
+
+          .px-md-shortest {
+            padding-right: 4px !important;
+            padding-left: 4px !important;
+          }
+
+          .px-md-shorter {
+            padding-right: 8px !important;
+            padding-left: 8px !important;
+          }
+
+          .px-md-short {
+            padding-right: 12px !important;
+            padding-left: 12px !important;
+          }
+
+          .px-md-medium {
+            padding-right: 16px !important;
+            padding-left: 16px !important;
+          }
+
+          .px-md-tall {
+            padding-right: 24px !important;
+            padding-left: 24px !important;
+          }
+
+          .px-md-taller {
+            padding-right: 32px !important;
+            padding-left: 32px !important;
+          }
+
+          .px-md-tallest {
+            padding-right: 40px !important;
+            padding-left: 40px !important;
+          }
+
+          .px-md-spacious {
+            padding-right: 48px !important;
+            padding-left: 48px !important;
+          }
+
+          .px-md-huge {
+            padding-right: 56px !important;
+            padding-left: 56px !important;
+          }
+
+          .px-md-jumbo {
+            padding-right: 64px !important;
+            padding-left: 64px !important;
+          }
+
+          .py-md-none {
+            padding-top: 0 !important;
+            padding-bottom: 0 !important;
+          }
+
+          .py-md-smash {
+            padding-top: 2px !important;
+            padding-bottom: 2px !important;
+          }
+
+          .py-md-shortest {
+            padding-top: 4px !important;
+            padding-bottom: 4px !important;
+          }
+
+          .py-md-shorter {
+            padding-top: 8px !important;
+            padding-bottom: 8px !important;
+          }
+
+          .py-md-short {
+            padding-top: 12px !important;
+            padding-bottom: 12px !important;
+          }
+
+          .py-md-medium {
+            padding-top: 16px !important;
+            padding-bottom: 16px !important;
+          }
+
+          .py-md-tall {
+            padding-top: 24px !important;
+            padding-bottom: 24px !important;
+          }
+
+          .py-md-taller {
+            padding-top: 32px !important;
+            padding-bottom: 32px !important;
+          }
+
+          .py-md-tallest {
+            padding-top: 40px !important;
+            padding-bottom: 40px !important;
+          }
+
+          .py-md-spacious {
+            padding-top: 48px !important;
+            padding-bottom: 48px !important;
+          }
+
+          .py-md-huge {
+            padding-top: 56px !important;
+            padding-bottom: 56px !important;
+          }
+
+          .py-md-jumbo {
+            padding-top: 64px !important;
+            padding-bottom: 64px !important;
+          }
+
+          .pt-md-none {
+            padding-top: 0 !important;
+          }
+
+          .pt-md-smash {
+            padding-top: 2px !important;
+          }
+
+          .pt-md-shortest {
+            padding-top: 4px !important;
+          }
+
+          .pt-md-shorter {
+            padding-top: 8px !important;
+          }
+
+          .pt-md-short {
+            padding-top: 12px !important;
+          }
+
+          .pt-md-medium {
+            padding-top: 16px !important;
+          }
+
+          .pt-md-tall {
+            padding-top: 24px !important;
+          }
+
+          .pt-md-taller {
+            padding-top: 32px !important;
+          }
+
+          .pt-md-tallest {
+            padding-top: 40px !important;
+          }
+
+          .pt-md-spacious {
+            padding-top: 48px !important;
+          }
+
+          .pt-md-huge {
+            padding-top: 56px !important;
+          }
+
+          .pt-md-jumbo {
+            padding-top: 64px !important;
+          }
+
+          .pe-md-none {
+            padding-right: 0 !important;
+          }
+
+          .pe-md-smash {
+            padding-right: 2px !important;
+          }
+
+          .pe-md-shortest {
+            padding-right: 4px !important;
+          }
+
+          .pe-md-shorter {
+            padding-right: 8px !important;
+          }
+
+          .pe-md-short {
+            padding-right: 12px !important;
+          }
+
+          .pe-md-medium {
+            padding-right: 16px !important;
+          }
+
+          .pe-md-tall {
+            padding-right: 24px !important;
+          }
+
+          .pe-md-taller {
+            padding-right: 32px !important;
+          }
+
+          .pe-md-tallest {
+            padding-right: 40px !important;
+          }
+
+          .pe-md-spacious {
+            padding-right: 48px !important;
+          }
+
+          .pe-md-huge {
+            padding-right: 56px !important;
+          }
+
+          .pe-md-jumbo {
+            padding-right: 64px !important;
+          }
+
+          .pb-md-none {
+            padding-bottom: 0 !important;
+          }
+
+          .pb-md-smash {
+            padding-bottom: 2px !important;
+          }
+
+          .pb-md-shortest {
+            padding-bottom: 4px !important;
+          }
+
+          .pb-md-shorter {
+            padding-bottom: 8px !important;
+          }
+
+          .pb-md-short {
+            padding-bottom: 12px !important;
+          }
+
+          .pb-md-medium {
+            padding-bottom: 16px !important;
+          }
+
+          .pb-md-tall {
+            padding-bottom: 24px !important;
+          }
+
+          .pb-md-taller {
+            padding-bottom: 32px !important;
+          }
+
+          .pb-md-tallest {
+            padding-bottom: 40px !important;
+          }
+
+          .pb-md-spacious {
+            padding-bottom: 48px !important;
+          }
+
+          .pb-md-huge {
+            padding-bottom: 56px !important;
+          }
+
+          .pb-md-jumbo {
+            padding-bottom: 64px !important;
+          }
+
+          .ps-md-none {
+            padding-left: 0 !important;
+          }
+
+          .ps-md-smash {
+            padding-left: 2px !important;
+          }
+
+          .ps-md-shortest {
+            padding-left: 4px !important;
+          }
+
+          .ps-md-shorter {
+            padding-left: 8px !important;
+          }
+
+          .ps-md-short {
+            padding-left: 12px !important;
+          }
+
+          .ps-md-medium {
+            padding-left: 16px !important;
+          }
+
+          .ps-md-tall {
+            padding-left: 24px !important;
+          }
+
+          .ps-md-taller {
+            padding-left: 32px !important;
+          }
+
+          .ps-md-tallest {
+            padding-left: 40px !important;
+          }
+
+          .ps-md-spacious {
+            padding-left: 48px !important;
+          }
+
+          .ps-md-huge {
+            padding-left: 56px !important;
+          }
+
+          .ps-md-jumbo {
+            padding-left: 64px !important;
+          }
+
+          .gap-md-none {
+            gap: 0 !important;
+          }
+
+          .gap-md-smash {
+            gap: 2px !important;
+          }
+
+          .gap-md-shortest {
+            gap: 4px !important;
+          }
+
+          .gap-md-shorter {
+            gap: 8px !important;
+          }
+
+          .gap-md-short {
+            gap: 12px !important;
+          }
+
+          .gap-md-medium {
+            gap: 16px !important;
+          }
+
+          .gap-md-tall {
+            gap: 24px !important;
+          }
+
+          .gap-md-taller {
+            gap: 32px !important;
+          }
+
+          .gap-md-tallest {
+            gap: 40px !important;
+          }
+
+          .gap-md-spacious {
+            gap: 48px !important;
+          }
+
+          .gap-md-huge {
+            gap: 56px !important;
+          }
+
+          .gap-md-jumbo {
+            gap: 64px !important;
+          }
+
+          .row-gap-md-none {
+            row-gap: 0 !important;
+          }
+
+          .row-gap-md-smash {
+            row-gap: 2px !important;
+          }
+
+          .row-gap-md-shortest {
+            row-gap: 4px !important;
+          }
+
+          .row-gap-md-shorter {
+            row-gap: 8px !important;
+          }
+
+          .row-gap-md-short {
+            row-gap: 12px !important;
+          }
+
+          .row-gap-md-medium {
+            row-gap: 16px !important;
+          }
+
+          .row-gap-md-tall {
+            row-gap: 24px !important;
+          }
+
+          .row-gap-md-taller {
+            row-gap: 32px !important;
+          }
+
+          .row-gap-md-tallest {
+            row-gap: 40px !important;
+          }
+
+          .row-gap-md-spacious {
+            row-gap: 48px !important;
+          }
+
+          .row-gap-md-huge {
+            row-gap: 56px !important;
+          }
+
+          .row-gap-md-jumbo {
+            row-gap: 64px !important;
+          }
+
+          .column-gap-md-none {
+            column-gap: 0 !important;
+          }
+
+          .column-gap-md-smash {
+            column-gap: 2px !important;
+          }
+
+          .column-gap-md-shortest {
+            column-gap: 4px !important;
+          }
+
+          .column-gap-md-shorter {
+            column-gap: 8px !important;
+          }
+
+          .column-gap-md-short {
+            column-gap: 12px !important;
+          }
+
+          .column-gap-md-medium {
+            column-gap: 16px !important;
+          }
+
+          .column-gap-md-tall {
+            column-gap: 24px !important;
+          }
+
+          .column-gap-md-taller {
+            column-gap: 32px !important;
+          }
+
+          .column-gap-md-tallest {
+            column-gap: 40px !important;
+          }
+
+          .column-gap-md-spacious {
+            column-gap: 48px !important;
+          }
+
+          .column-gap-md-huge {
+            column-gap: 56px !important;
+          }
+
+          .column-gap-md-jumbo {
+            column-gap: 64px !important;
+          }
+        }
+
+        @media (min-width: 1024px) {
+          .m-lg-none {
+            margin: 0 !important;
+          }
+
+          .m-lg-smash {
+            margin: 2px !important;
+          }
+
+          .m-lg-shortest {
+            margin: 4px !important;
+          }
+
+          .m-lg-shorter {
+            margin: 8px !important;
+          }
+
+          .m-lg-short {
+            margin: 12px !important;
+          }
+
+          .m-lg-medium {
+            margin: 16px !important;
+          }
+
+          .m-lg-tall {
+            margin: 24px !important;
+          }
+
+          .m-lg-taller {
+            margin: 32px !important;
+          }
+
+          .m-lg-tallest {
+            margin: 40px !important;
+          }
+
+          .m-lg-spacious {
+            margin: 48px !important;
+          }
+
+          .m-lg-huge {
+            margin: 56px !important;
+          }
+
+          .m-lg-jumbo {
+            margin: 64px !important;
+          }
+
+          .m-lg-auto {
+            margin: auto !important;
+          }
+
+          .mx-lg-none {
+            margin-right: 0 !important;
+            margin-left: 0 !important;
+          }
+
+          .mx-lg-smash {
+            margin-right: 2px !important;
+            margin-left: 2px !important;
+          }
+
+          .mx-lg-shortest {
+            margin-right: 4px !important;
+            margin-left: 4px !important;
+          }
+
+          .mx-lg-shorter {
+            margin-right: 8px !important;
+            margin-left: 8px !important;
+          }
+
+          .mx-lg-short {
+            margin-right: 12px !important;
+            margin-left: 12px !important;
+          }
+
+          .mx-lg-medium {
+            margin-right: 16px !important;
+            margin-left: 16px !important;
+          }
+
+          .mx-lg-tall {
+            margin-right: 24px !important;
+            margin-left: 24px !important;
+          }
+
+          .mx-lg-taller {
+            margin-right: 32px !important;
+            margin-left: 32px !important;
+          }
+
+          .mx-lg-tallest {
+            margin-right: 40px !important;
+            margin-left: 40px !important;
+          }
+
+          .mx-lg-spacious {
+            margin-right: 48px !important;
+            margin-left: 48px !important;
+          }
+
+          .mx-lg-huge {
+            margin-right: 56px !important;
+            margin-left: 56px !important;
+          }
+
+          .mx-lg-jumbo {
+            margin-right: 64px !important;
+            margin-left: 64px !important;
+          }
+
+          .mx-lg-auto {
+            margin-right: auto !important;
+            margin-left: auto !important;
+          }
+
+          .my-lg-none {
+            margin-top: 0 !important;
+            margin-bottom: 0 !important;
+          }
+
+          .my-lg-smash {
+            margin-top: 2px !important;
+            margin-bottom: 2px !important;
+          }
+
+          .my-lg-shortest {
+            margin-top: 4px !important;
+            margin-bottom: 4px !important;
+          }
+
+          .my-lg-shorter {
+            margin-top: 8px !important;
+            margin-bottom: 8px !important;
+          }
+
+          .my-lg-short {
+            margin-top: 12px !important;
+            margin-bottom: 12px !important;
+          }
+
+          .my-lg-medium {
+            margin-top: 16px !important;
+            margin-bottom: 16px !important;
+          }
+
+          .my-lg-tall {
+            margin-top: 24px !important;
+            margin-bottom: 24px !important;
+          }
+
+          .my-lg-taller {
+            margin-top: 32px !important;
+            margin-bottom: 32px !important;
+          }
+
+          .my-lg-tallest {
+            margin-top: 40px !important;
+            margin-bottom: 40px !important;
+          }
+
+          .my-lg-spacious {
+            margin-top: 48px !important;
+            margin-bottom: 48px !important;
+          }
+
+          .my-lg-huge {
+            margin-top: 56px !important;
+            margin-bottom: 56px !important;
+          }
+
+          .my-lg-jumbo {
+            margin-top: 64px !important;
+            margin-bottom: 64px !important;
+          }
+
+          .my-lg-auto {
+            margin-top: auto !important;
+            margin-bottom: auto !important;
+          }
+
+          .mt-lg-none {
+            margin-top: 0 !important;
+          }
+
+          .mt-lg-smash {
+            margin-top: 2px !important;
+          }
+
+          .mt-lg-shortest {
+            margin-top: 4px !important;
+          }
+
+          .mt-lg-shorter {
+            margin-top: 8px !important;
+          }
+
+          .mt-lg-short {
+            margin-top: 12px !important;
+          }
+
+          .mt-lg-medium {
+            margin-top: 16px !important;
+          }
+
+          .mt-lg-tall {
+            margin-top: 24px !important;
+          }
+
+          .mt-lg-taller {
+            margin-top: 32px !important;
+          }
+
+          .mt-lg-tallest {
+            margin-top: 40px !important;
+          }
+
+          .mt-lg-spacious {
+            margin-top: 48px !important;
+          }
+
+          .mt-lg-huge {
+            margin-top: 56px !important;
+          }
+
+          .mt-lg-jumbo {
+            margin-top: 64px !important;
+          }
+
+          .mt-lg-auto {
+            margin-top: auto !important;
+          }
+
+          .me-lg-none {
+            margin-right: 0 !important;
+          }
+
+          .me-lg-smash {
+            margin-right: 2px !important;
+          }
+
+          .me-lg-shortest {
+            margin-right: 4px !important;
+          }
+
+          .me-lg-shorter {
+            margin-right: 8px !important;
+          }
+
+          .me-lg-short {
+            margin-right: 12px !important;
+          }
+
+          .me-lg-medium {
+            margin-right: 16px !important;
+          }
+
+          .me-lg-tall {
+            margin-right: 24px !important;
+          }
+
+          .me-lg-taller {
+            margin-right: 32px !important;
+          }
+
+          .me-lg-tallest {
+            margin-right: 40px !important;
+          }
+
+          .me-lg-spacious {
+            margin-right: 48px !important;
+          }
+
+          .me-lg-huge {
+            margin-right: 56px !important;
+          }
+
+          .me-lg-jumbo {
+            margin-right: 64px !important;
+          }
+
+          .me-lg-auto {
+            margin-right: auto !important;
+          }
+
+          .mb-lg-none {
+            margin-bottom: 0 !important;
+          }
+
+          .mb-lg-smash {
+            margin-bottom: 2px !important;
+          }
+
+          .mb-lg-shortest {
+            margin-bottom: 4px !important;
+          }
+
+          .mb-lg-shorter {
+            margin-bottom: 8px !important;
+          }
+
+          .mb-lg-short {
+            margin-bottom: 12px !important;
+          }
+
+          .mb-lg-medium {
+            margin-bottom: 16px !important;
+          }
+
+          .mb-lg-tall {
+            margin-bottom: 24px !important;
+          }
+
+          .mb-lg-taller {
+            margin-bottom: 32px !important;
+          }
+
+          .mb-lg-tallest {
+            margin-bottom: 40px !important;
+          }
+
+          .mb-lg-spacious {
+            margin-bottom: 48px !important;
+          }
+
+          .mb-lg-huge {
+            margin-bottom: 56px !important;
+          }
+
+          .mb-lg-jumbo {
+            margin-bottom: 64px !important;
+          }
+
+          .mb-lg-auto {
+            margin-bottom: auto !important;
+          }
+
+          .ms-lg-none {
+            margin-left: 0 !important;
+          }
+
+          .ms-lg-smash {
+            margin-left: 2px !important;
+          }
+
+          .ms-lg-shortest {
+            margin-left: 4px !important;
+          }
+
+          .ms-lg-shorter {
+            margin-left: 8px !important;
+          }
+
+          .ms-lg-short {
+            margin-left: 12px !important;
+          }
+
+          .ms-lg-medium {
+            margin-left: 16px !important;
+          }
+
+          .ms-lg-tall {
+            margin-left: 24px !important;
+          }
+
+          .ms-lg-taller {
+            margin-left: 32px !important;
+          }
+
+          .ms-lg-tallest {
+            margin-left: 40px !important;
+          }
+
+          .ms-lg-spacious {
+            margin-left: 48px !important;
+          }
+
+          .ms-lg-huge {
+            margin-left: 56px !important;
+          }
+
+          .ms-lg-jumbo {
+            margin-left: 64px !important;
+          }
+
+          .ms-lg-auto {
+            margin-left: auto !important;
+          }
+
+          .p-lg-none {
+            padding: 0 !important;
+          }
+
+          .p-lg-smash {
+            padding: 2px !important;
+          }
+
+          .p-lg-shortest {
+            padding: 4px !important;
+          }
+
+          .p-lg-shorter {
+            padding: 8px !important;
+          }
+
+          .p-lg-short {
+            padding: 12px !important;
+          }
+
+          .p-lg-medium {
+            padding: 16px !important;
+          }
+
+          .p-lg-tall {
+            padding: 24px !important;
+          }
+
+          .p-lg-taller {
+            padding: 32px !important;
+          }
+
+          .p-lg-tallest {
+            padding: 40px !important;
+          }
+
+          .p-lg-spacious {
+            padding: 48px !important;
+          }
+
+          .p-lg-huge {
+            padding: 56px !important;
+          }
+
+          .p-lg-jumbo {
+            padding: 64px !important;
+          }
+
+          .px-lg-none {
+            padding-right: 0 !important;
+            padding-left: 0 !important;
+          }
+
+          .px-lg-smash {
+            padding-right: 2px !important;
+            padding-left: 2px !important;
+          }
+
+          .px-lg-shortest {
+            padding-right: 4px !important;
+            padding-left: 4px !important;
+          }
+
+          .px-lg-shorter {
+            padding-right: 8px !important;
+            padding-left: 8px !important;
+          }
+
+          .px-lg-short {
+            padding-right: 12px !important;
+            padding-left: 12px !important;
+          }
+
+          .px-lg-medium {
+            padding-right: 16px !important;
+            padding-left: 16px !important;
+          }
+
+          .px-lg-tall {
+            padding-right: 24px !important;
+            padding-left: 24px !important;
+          }
+
+          .px-lg-taller {
+            padding-right: 32px !important;
+            padding-left: 32px !important;
+          }
+
+          .px-lg-tallest {
+            padding-right: 40px !important;
+            padding-left: 40px !important;
+          }
+
+          .px-lg-spacious {
+            padding-right: 48px !important;
+            padding-left: 48px !important;
+          }
+
+          .px-lg-huge {
+            padding-right: 56px !important;
+            padding-left: 56px !important;
+          }
+
+          .px-lg-jumbo {
+            padding-right: 64px !important;
+            padding-left: 64px !important;
+          }
+
+          .py-lg-none {
+            padding-top: 0 !important;
+            padding-bottom: 0 !important;
+          }
+
+          .py-lg-smash {
+            padding-top: 2px !important;
+            padding-bottom: 2px !important;
+          }
+
+          .py-lg-shortest {
+            padding-top: 4px !important;
+            padding-bottom: 4px !important;
+          }
+
+          .py-lg-shorter {
+            padding-top: 8px !important;
+            padding-bottom: 8px !important;
+          }
+
+          .py-lg-short {
+            padding-top: 12px !important;
+            padding-bottom: 12px !important;
+          }
+
+          .py-lg-medium {
+            padding-top: 16px !important;
+            padding-bottom: 16px !important;
+          }
+
+          .py-lg-tall {
+            padding-top: 24px !important;
+            padding-bottom: 24px !important;
+          }
+
+          .py-lg-taller {
+            padding-top: 32px !important;
+            padding-bottom: 32px !important;
+          }
+
+          .py-lg-tallest {
+            padding-top: 40px !important;
+            padding-bottom: 40px !important;
+          }
+
+          .py-lg-spacious {
+            padding-top: 48px !important;
+            padding-bottom: 48px !important;
+          }
+
+          .py-lg-huge {
+            padding-top: 56px !important;
+            padding-bottom: 56px !important;
+          }
+
+          .py-lg-jumbo {
+            padding-top: 64px !important;
+            padding-bottom: 64px !important;
+          }
+
+          .pt-lg-none {
+            padding-top: 0 !important;
+          }
+
+          .pt-lg-smash {
+            padding-top: 2px !important;
+          }
+
+          .pt-lg-shortest {
+            padding-top: 4px !important;
+          }
+
+          .pt-lg-shorter {
+            padding-top: 8px !important;
+          }
+
+          .pt-lg-short {
+            padding-top: 12px !important;
+          }
+
+          .pt-lg-medium {
+            padding-top: 16px !important;
+          }
+
+          .pt-lg-tall {
+            padding-top: 24px !important;
+          }
+
+          .pt-lg-taller {
+            padding-top: 32px !important;
+          }
+
+          .pt-lg-tallest {
+            padding-top: 40px !important;
+          }
+
+          .pt-lg-spacious {
+            padding-top: 48px !important;
+          }
+
+          .pt-lg-huge {
+            padding-top: 56px !important;
+          }
+
+          .pt-lg-jumbo {
+            padding-top: 64px !important;
+          }
+
+          .pe-lg-none {
+            padding-right: 0 !important;
+          }
+
+          .pe-lg-smash {
+            padding-right: 2px !important;
+          }
+
+          .pe-lg-shortest {
+            padding-right: 4px !important;
+          }
+
+          .pe-lg-shorter {
+            padding-right: 8px !important;
+          }
+
+          .pe-lg-short {
+            padding-right: 12px !important;
+          }
+
+          .pe-lg-medium {
+            padding-right: 16px !important;
+          }
+
+          .pe-lg-tall {
+            padding-right: 24px !important;
+          }
+
+          .pe-lg-taller {
+            padding-right: 32px !important;
+          }
+
+          .pe-lg-tallest {
+            padding-right: 40px !important;
+          }
+
+          .pe-lg-spacious {
+            padding-right: 48px !important;
+          }
+
+          .pe-lg-huge {
+            padding-right: 56px !important;
+          }
+
+          .pe-lg-jumbo {
+            padding-right: 64px !important;
+          }
+
+          .pb-lg-none {
+            padding-bottom: 0 !important;
+          }
+
+          .pb-lg-smash {
+            padding-bottom: 2px !important;
+          }
+
+          .pb-lg-shortest {
+            padding-bottom: 4px !important;
+          }
+
+          .pb-lg-shorter {
+            padding-bottom: 8px !important;
+          }
+
+          .pb-lg-short {
+            padding-bottom: 12px !important;
+          }
+
+          .pb-lg-medium {
+            padding-bottom: 16px !important;
+          }
+
+          .pb-lg-tall {
+            padding-bottom: 24px !important;
+          }
+
+          .pb-lg-taller {
+            padding-bottom: 32px !important;
+          }
+
+          .pb-lg-tallest {
+            padding-bottom: 40px !important;
+          }
+
+          .pb-lg-spacious {
+            padding-bottom: 48px !important;
+          }
+
+          .pb-lg-huge {
+            padding-bottom: 56px !important;
+          }
+
+          .pb-lg-jumbo {
+            padding-bottom: 64px !important;
+          }
+
+          .ps-lg-none {
+            padding-left: 0 !important;
+          }
+
+          .ps-lg-smash {
+            padding-left: 2px !important;
+          }
+
+          .ps-lg-shortest {
+            padding-left: 4px !important;
+          }
+
+          .ps-lg-shorter {
+            padding-left: 8px !important;
+          }
+
+          .ps-lg-short {
+            padding-left: 12px !important;
+          }
+
+          .ps-lg-medium {
+            padding-left: 16px !important;
+          }
+
+          .ps-lg-tall {
+            padding-left: 24px !important;
+          }
+
+          .ps-lg-taller {
+            padding-left: 32px !important;
+          }
+
+          .ps-lg-tallest {
+            padding-left: 40px !important;
+          }
+
+          .ps-lg-spacious {
+            padding-left: 48px !important;
+          }
+
+          .ps-lg-huge {
+            padding-left: 56px !important;
+          }
+
+          .ps-lg-jumbo {
+            padding-left: 64px !important;
+          }
+
+          .gap-lg-none {
+            gap: 0 !important;
+          }
+
+          .gap-lg-smash {
+            gap: 2px !important;
+          }
+
+          .gap-lg-shortest {
+            gap: 4px !important;
+          }
+
+          .gap-lg-shorter {
+            gap: 8px !important;
+          }
+
+          .gap-lg-short {
+            gap: 12px !important;
+          }
+
+          .gap-lg-medium {
+            gap: 16px !important;
+          }
+
+          .gap-lg-tall {
+            gap: 24px !important;
+          }
+
+          .gap-lg-taller {
+            gap: 32px !important;
+          }
+
+          .gap-lg-tallest {
+            gap: 40px !important;
+          }
+
+          .gap-lg-spacious {
+            gap: 48px !important;
+          }
+
+          .gap-lg-huge {
+            gap: 56px !important;
+          }
+
+          .gap-lg-jumbo {
+            gap: 64px !important;
+          }
+
+          .row-gap-lg-none {
+            row-gap: 0 !important;
+          }
+
+          .row-gap-lg-smash {
+            row-gap: 2px !important;
+          }
+
+          .row-gap-lg-shortest {
+            row-gap: 4px !important;
+          }
+
+          .row-gap-lg-shorter {
+            row-gap: 8px !important;
+          }
+
+          .row-gap-lg-short {
+            row-gap: 12px !important;
+          }
+
+          .row-gap-lg-medium {
+            row-gap: 16px !important;
+          }
+
+          .row-gap-lg-tall {
+            row-gap: 24px !important;
+          }
+
+          .row-gap-lg-taller {
+            row-gap: 32px !important;
+          }
+
+          .row-gap-lg-tallest {
+            row-gap: 40px !important;
+          }
+
+          .row-gap-lg-spacious {
+            row-gap: 48px !important;
+          }
+
+          .row-gap-lg-huge {
+            row-gap: 56px !important;
+          }
+
+          .row-gap-lg-jumbo {
+            row-gap: 64px !important;
+          }
+
+          .column-gap-lg-none {
+            column-gap: 0 !important;
+          }
+
+          .column-gap-lg-smash {
+            column-gap: 2px !important;
+          }
+
+          .column-gap-lg-shortest {
+            column-gap: 4px !important;
+          }
+
+          .column-gap-lg-shorter {
+            column-gap: 8px !important;
+          }
+
+          .column-gap-lg-short {
+            column-gap: 12px !important;
+          }
+
+          .column-gap-lg-medium {
+            column-gap: 16px !important;
+          }
+
+          .column-gap-lg-tall {
+            column-gap: 24px !important;
+          }
+
+          .column-gap-lg-taller {
+            column-gap: 32px !important;
+          }
+
+          .column-gap-lg-tallest {
+            column-gap: 40px !important;
+          }
+
+          .column-gap-lg-spacious {
+            column-gap: 48px !important;
+          }
+
+          .column-gap-lg-huge {
+            column-gap: 56px !important;
+          }
+
+          .column-gap-lg-jumbo {
+            column-gap: 64px !important;
+          }
+        }
+
+        @media (min-width: 1320px) {
+          .m-xl-none {
+            margin: 0 !important;
+          }
+
+          .m-xl-smash {
+            margin: 2px !important;
+          }
+
+          .m-xl-shortest {
+            margin: 4px !important;
+          }
+
+          .m-xl-shorter {
+            margin: 8px !important;
+          }
+
+          .m-xl-short {
+            margin: 12px !important;
+          }
+
+          .m-xl-medium {
+            margin: 16px !important;
+          }
+
+          .m-xl-tall {
+            margin: 24px !important;
+          }
+
+          .m-xl-taller {
+            margin: 32px !important;
+          }
+
+          .m-xl-tallest {
+            margin: 40px !important;
+          }
+
+          .m-xl-spacious {
+            margin: 48px !important;
+          }
+
+          .m-xl-huge {
+            margin: 56px !important;
+          }
+
+          .m-xl-jumbo {
+            margin: 64px !important;
+          }
+
+          .m-xl-auto {
+            margin: auto !important;
+          }
+
+          .mx-xl-none {
+            margin-right: 0 !important;
+            margin-left: 0 !important;
+          }
+
+          .mx-xl-smash {
+            margin-right: 2px !important;
+            margin-left: 2px !important;
+          }
+
+          .mx-xl-shortest {
+            margin-right: 4px !important;
+            margin-left: 4px !important;
+          }
+
+          .mx-xl-shorter {
+            margin-right: 8px !important;
+            margin-left: 8px !important;
+          }
+
+          .mx-xl-short {
+            margin-right: 12px !important;
+            margin-left: 12px !important;
+          }
+
+          .mx-xl-medium {
+            margin-right: 16px !important;
+            margin-left: 16px !important;
+          }
+
+          .mx-xl-tall {
+            margin-right: 24px !important;
+            margin-left: 24px !important;
+          }
+
+          .mx-xl-taller {
+            margin-right: 32px !important;
+            margin-left: 32px !important;
+          }
+
+          .mx-xl-tallest {
+            margin-right: 40px !important;
+            margin-left: 40px !important;
+          }
+
+          .mx-xl-spacious {
+            margin-right: 48px !important;
+            margin-left: 48px !important;
+          }
+
+          .mx-xl-huge {
+            margin-right: 56px !important;
+            margin-left: 56px !important;
+          }
+
+          .mx-xl-jumbo {
+            margin-right: 64px !important;
+            margin-left: 64px !important;
+          }
+
+          .mx-xl-auto {
+            margin-right: auto !important;
+            margin-left: auto !important;
+          }
+
+          .my-xl-none {
+            margin-top: 0 !important;
+            margin-bottom: 0 !important;
+          }
+
+          .my-xl-smash {
+            margin-top: 2px !important;
+            margin-bottom: 2px !important;
+          }
+
+          .my-xl-shortest {
+            margin-top: 4px !important;
+            margin-bottom: 4px !important;
+          }
+
+          .my-xl-shorter {
+            margin-top: 8px !important;
+            margin-bottom: 8px !important;
+          }
+
+          .my-xl-short {
+            margin-top: 12px !important;
+            margin-bottom: 12px !important;
+          }
+
+          .my-xl-medium {
+            margin-top: 16px !important;
+            margin-bottom: 16px !important;
+          }
+
+          .my-xl-tall {
+            margin-top: 24px !important;
+            margin-bottom: 24px !important;
+          }
+
+          .my-xl-taller {
+            margin-top: 32px !important;
+            margin-bottom: 32px !important;
+          }
+
+          .my-xl-tallest {
+            margin-top: 40px !important;
+            margin-bottom: 40px !important;
+          }
+
+          .my-xl-spacious {
+            margin-top: 48px !important;
+            margin-bottom: 48px !important;
+          }
+
+          .my-xl-huge {
+            margin-top: 56px !important;
+            margin-bottom: 56px !important;
+          }
+
+          .my-xl-jumbo {
+            margin-top: 64px !important;
+            margin-bottom: 64px !important;
+          }
+
+          .my-xl-auto {
+            margin-top: auto !important;
+            margin-bottom: auto !important;
+          }
+
+          .mt-xl-none {
+            margin-top: 0 !important;
+          }
+
+          .mt-xl-smash {
+            margin-top: 2px !important;
+          }
+
+          .mt-xl-shortest {
+            margin-top: 4px !important;
+          }
+
+          .mt-xl-shorter {
+            margin-top: 8px !important;
+          }
+
+          .mt-xl-short {
+            margin-top: 12px !important;
+          }
+
+          .mt-xl-medium {
+            margin-top: 16px !important;
+          }
+
+          .mt-xl-tall {
+            margin-top: 24px !important;
+          }
+
+          .mt-xl-taller {
+            margin-top: 32px !important;
+          }
+
+          .mt-xl-tallest {
+            margin-top: 40px !important;
+          }
+
+          .mt-xl-spacious {
+            margin-top: 48px !important;
+          }
+
+          .mt-xl-huge {
+            margin-top: 56px !important;
+          }
+
+          .mt-xl-jumbo {
+            margin-top: 64px !important;
+          }
+
+          .mt-xl-auto {
+            margin-top: auto !important;
+          }
+
+          .me-xl-none {
+            margin-right: 0 !important;
+          }
+
+          .me-xl-smash {
+            margin-right: 2px !important;
+          }
+
+          .me-xl-shortest {
+            margin-right: 4px !important;
+          }
+
+          .me-xl-shorter {
+            margin-right: 8px !important;
+          }
+
+          .me-xl-short {
+            margin-right: 12px !important;
+          }
+
+          .me-xl-medium {
+            margin-right: 16px !important;
+          }
+
+          .me-xl-tall {
+            margin-right: 24px !important;
+          }
+
+          .me-xl-taller {
+            margin-right: 32px !important;
+          }
+
+          .me-xl-tallest {
+            margin-right: 40px !important;
+          }
+
+          .me-xl-spacious {
+            margin-right: 48px !important;
+          }
+
+          .me-xl-huge {
+            margin-right: 56px !important;
+          }
+
+          .me-xl-jumbo {
+            margin-right: 64px !important;
+          }
+
+          .me-xl-auto {
+            margin-right: auto !important;
+          }
+
+          .mb-xl-none {
+            margin-bottom: 0 !important;
+          }
+
+          .mb-xl-smash {
+            margin-bottom: 2px !important;
+          }
+
+          .mb-xl-shortest {
+            margin-bottom: 4px !important;
+          }
+
+          .mb-xl-shorter {
+            margin-bottom: 8px !important;
+          }
+
+          .mb-xl-short {
+            margin-bottom: 12px !important;
+          }
+
+          .mb-xl-medium {
+            margin-bottom: 16px !important;
+          }
+
+          .mb-xl-tall {
+            margin-bottom: 24px !important;
+          }
+
+          .mb-xl-taller {
+            margin-bottom: 32px !important;
+          }
+
+          .mb-xl-tallest {
+            margin-bottom: 40px !important;
+          }
+
+          .mb-xl-spacious {
+            margin-bottom: 48px !important;
+          }
+
+          .mb-xl-huge {
+            margin-bottom: 56px !important;
+          }
+
+          .mb-xl-jumbo {
+            margin-bottom: 64px !important;
+          }
+
+          .mb-xl-auto {
+            margin-bottom: auto !important;
+          }
+
+          .ms-xl-none {
+            margin-left: 0 !important;
+          }
+
+          .ms-xl-smash {
+            margin-left: 2px !important;
+          }
+
+          .ms-xl-shortest {
+            margin-left: 4px !important;
+          }
+
+          .ms-xl-shorter {
+            margin-left: 8px !important;
+          }
+
+          .ms-xl-short {
+            margin-left: 12px !important;
+          }
+
+          .ms-xl-medium {
+            margin-left: 16px !important;
+          }
+
+          .ms-xl-tall {
+            margin-left: 24px !important;
+          }
+
+          .ms-xl-taller {
+            margin-left: 32px !important;
+          }
+
+          .ms-xl-tallest {
+            margin-left: 40px !important;
+          }
+
+          .ms-xl-spacious {
+            margin-left: 48px !important;
+          }
+
+          .ms-xl-huge {
+            margin-left: 56px !important;
+          }
+
+          .ms-xl-jumbo {
+            margin-left: 64px !important;
+          }
+
+          .ms-xl-auto {
+            margin-left: auto !important;
+          }
+
+          .p-xl-none {
+            padding: 0 !important;
+          }
+
+          .p-xl-smash {
+            padding: 2px !important;
+          }
+
+          .p-xl-shortest {
+            padding: 4px !important;
+          }
+
+          .p-xl-shorter {
+            padding: 8px !important;
+          }
+
+          .p-xl-short {
+            padding: 12px !important;
+          }
+
+          .p-xl-medium {
+            padding: 16px !important;
+          }
+
+          .p-xl-tall {
+            padding: 24px !important;
+          }
+
+          .p-xl-taller {
+            padding: 32px !important;
+          }
+
+          .p-xl-tallest {
+            padding: 40px !important;
+          }
+
+          .p-xl-spacious {
+            padding: 48px !important;
+          }
+
+          .p-xl-huge {
+            padding: 56px !important;
+          }
+
+          .p-xl-jumbo {
+            padding: 64px !important;
+          }
+
+          .px-xl-none {
+            padding-right: 0 !important;
+            padding-left: 0 !important;
+          }
+
+          .px-xl-smash {
+            padding-right: 2px !important;
+            padding-left: 2px !important;
+          }
+
+          .px-xl-shortest {
+            padding-right: 4px !important;
+            padding-left: 4px !important;
+          }
+
+          .px-xl-shorter {
+            padding-right: 8px !important;
+            padding-left: 8px !important;
+          }
+
+          .px-xl-short {
+            padding-right: 12px !important;
+            padding-left: 12px !important;
+          }
+
+          .px-xl-medium {
+            padding-right: 16px !important;
+            padding-left: 16px !important;
+          }
+
+          .px-xl-tall {
+            padding-right: 24px !important;
+            padding-left: 24px !important;
+          }
+
+          .px-xl-taller {
+            padding-right: 32px !important;
+            padding-left: 32px !important;
+          }
+
+          .px-xl-tallest {
+            padding-right: 40px !important;
+            padding-left: 40px !important;
+          }
+
+          .px-xl-spacious {
+            padding-right: 48px !important;
+            padding-left: 48px !important;
+          }
+
+          .px-xl-huge {
+            padding-right: 56px !important;
+            padding-left: 56px !important;
+          }
+
+          .px-xl-jumbo {
+            padding-right: 64px !important;
+            padding-left: 64px !important;
+          }
+
+          .py-xl-none {
+            padding-top: 0 !important;
+            padding-bottom: 0 !important;
+          }
+
+          .py-xl-smash {
+            padding-top: 2px !important;
+            padding-bottom: 2px !important;
+          }
+
+          .py-xl-shortest {
+            padding-top: 4px !important;
+            padding-bottom: 4px !important;
+          }
+
+          .py-xl-shorter {
+            padding-top: 8px !important;
+            padding-bottom: 8px !important;
+          }
+
+          .py-xl-short {
+            padding-top: 12px !important;
+            padding-bottom: 12px !important;
+          }
+
+          .py-xl-medium {
+            padding-top: 16px !important;
+            padding-bottom: 16px !important;
+          }
+
+          .py-xl-tall {
+            padding-top: 24px !important;
+            padding-bottom: 24px !important;
+          }
+
+          .py-xl-taller {
+            padding-top: 32px !important;
+            padding-bottom: 32px !important;
+          }
+
+          .py-xl-tallest {
+            padding-top: 40px !important;
+            padding-bottom: 40px !important;
+          }
+
+          .py-xl-spacious {
+            padding-top: 48px !important;
+            padding-bottom: 48px !important;
+          }
+
+          .py-xl-huge {
+            padding-top: 56px !important;
+            padding-bottom: 56px !important;
+          }
+
+          .py-xl-jumbo {
+            padding-top: 64px !important;
+            padding-bottom: 64px !important;
+          }
+
+          .pt-xl-none {
+            padding-top: 0 !important;
+          }
+
+          .pt-xl-smash {
+            padding-top: 2px !important;
+          }
+
+          .pt-xl-shortest {
+            padding-top: 4px !important;
+          }
+
+          .pt-xl-shorter {
+            padding-top: 8px !important;
+          }
+
+          .pt-xl-short {
+            padding-top: 12px !important;
+          }
+
+          .pt-xl-medium {
+            padding-top: 16px !important;
+          }
+
+          .pt-xl-tall {
+            padding-top: 24px !important;
+          }
+
+          .pt-xl-taller {
+            padding-top: 32px !important;
+          }
+
+          .pt-xl-tallest {
+            padding-top: 40px !important;
+          }
+
+          .pt-xl-spacious {
+            padding-top: 48px !important;
+          }
+
+          .pt-xl-huge {
+            padding-top: 56px !important;
+          }
+
+          .pt-xl-jumbo {
+            padding-top: 64px !important;
+          }
+
+          .pe-xl-none {
+            padding-right: 0 !important;
+          }
+
+          .pe-xl-smash {
+            padding-right: 2px !important;
+          }
+
+          .pe-xl-shortest {
+            padding-right: 4px !important;
+          }
+
+          .pe-xl-shorter {
+            padding-right: 8px !important;
+          }
+
+          .pe-xl-short {
+            padding-right: 12px !important;
+          }
+
+          .pe-xl-medium {
+            padding-right: 16px !important;
+          }
+
+          .pe-xl-tall {
+            padding-right: 24px !important;
+          }
+
+          .pe-xl-taller {
+            padding-right: 32px !important;
+          }
+
+          .pe-xl-tallest {
+            padding-right: 40px !important;
+          }
+
+          .pe-xl-spacious {
+            padding-right: 48px !important;
+          }
+
+          .pe-xl-huge {
+            padding-right: 56px !important;
+          }
+
+          .pe-xl-jumbo {
+            padding-right: 64px !important;
+          }
+
+          .pb-xl-none {
+            padding-bottom: 0 !important;
+          }
+
+          .pb-xl-smash {
+            padding-bottom: 2px !important;
+          }
+
+          .pb-xl-shortest {
+            padding-bottom: 4px !important;
+          }
+
+          .pb-xl-shorter {
+            padding-bottom: 8px !important;
+          }
+
+          .pb-xl-short {
+            padding-bottom: 12px !important;
+          }
+
+          .pb-xl-medium {
+            padding-bottom: 16px !important;
+          }
+
+          .pb-xl-tall {
+            padding-bottom: 24px !important;
+          }
+
+          .pb-xl-taller {
+            padding-bottom: 32px !important;
+          }
+
+          .pb-xl-tallest {
+            padding-bottom: 40px !important;
+          }
+
+          .pb-xl-spacious {
+            padding-bottom: 48px !important;
+          }
+
+          .pb-xl-huge {
+            padding-bottom: 56px !important;
+          }
+
+          .pb-xl-jumbo {
+            padding-bottom: 64px !important;
+          }
+
+          .ps-xl-none {
+            padding-left: 0 !important;
+          }
+
+          .ps-xl-smash {
+            padding-left: 2px !important;
+          }
+
+          .ps-xl-shortest {
+            padding-left: 4px !important;
+          }
+
+          .ps-xl-shorter {
+            padding-left: 8px !important;
+          }
+
+          .ps-xl-short {
+            padding-left: 12px !important;
+          }
+
+          .ps-xl-medium {
+            padding-left: 16px !important;
+          }
+
+          .ps-xl-tall {
+            padding-left: 24px !important;
+          }
+
+          .ps-xl-taller {
+            padding-left: 32px !important;
+          }
+
+          .ps-xl-tallest {
+            padding-left: 40px !important;
+          }
+
+          .ps-xl-spacious {
+            padding-left: 48px !important;
+          }
+
+          .ps-xl-huge {
+            padding-left: 56px !important;
+          }
+
+          .ps-xl-jumbo {
+            padding-left: 64px !important;
+          }
+
+          .gap-xl-none {
+            gap: 0 !important;
+          }
+
+          .gap-xl-smash {
+            gap: 2px !important;
+          }
+
+          .gap-xl-shortest {
+            gap: 4px !important;
+          }
+
+          .gap-xl-shorter {
+            gap: 8px !important;
+          }
+
+          .gap-xl-short {
+            gap: 12px !important;
+          }
+
+          .gap-xl-medium {
+            gap: 16px !important;
+          }
+
+          .gap-xl-tall {
+            gap: 24px !important;
+          }
+
+          .gap-xl-taller {
+            gap: 32px !important;
+          }
+
+          .gap-xl-tallest {
+            gap: 40px !important;
+          }
+
+          .gap-xl-spacious {
+            gap: 48px !important;
+          }
+
+          .gap-xl-huge {
+            gap: 56px !important;
+          }
+
+          .gap-xl-jumbo {
+            gap: 64px !important;
+          }
+
+          .row-gap-xl-none {
+            row-gap: 0 !important;
+          }
+
+          .row-gap-xl-smash {
+            row-gap: 2px !important;
+          }
+
+          .row-gap-xl-shortest {
+            row-gap: 4px !important;
+          }
+
+          .row-gap-xl-shorter {
+            row-gap: 8px !important;
+          }
+
+          .row-gap-xl-short {
+            row-gap: 12px !important;
+          }
+
+          .row-gap-xl-medium {
+            row-gap: 16px !important;
+          }
+
+          .row-gap-xl-tall {
+            row-gap: 24px !important;
+          }
+
+          .row-gap-xl-taller {
+            row-gap: 32px !important;
+          }
+
+          .row-gap-xl-tallest {
+            row-gap: 40px !important;
+          }
+
+          .row-gap-xl-spacious {
+            row-gap: 48px !important;
+          }
+
+          .row-gap-xl-huge {
+            row-gap: 56px !important;
+          }
+
+          .row-gap-xl-jumbo {
+            row-gap: 64px !important;
+          }
+
+          .column-gap-xl-none {
+            column-gap: 0 !important;
+          }
+
+          .column-gap-xl-smash {
+            column-gap: 2px !important;
+          }
+
+          .column-gap-xl-shortest {
+            column-gap: 4px !important;
+          }
+
+          .column-gap-xl-shorter {
+            column-gap: 8px !important;
+          }
+
+          .column-gap-xl-short {
+            column-gap: 12px !important;
+          }
+
+          .column-gap-xl-medium {
+            column-gap: 16px !important;
+          }
+
+          .column-gap-xl-tall {
+            column-gap: 24px !important;
+          }
+
+          .column-gap-xl-taller {
+            column-gap: 32px !important;
+          }
+
+          .column-gap-xl-tallest {
+            column-gap: 40px !important;
+          }
+
+          .column-gap-xl-spacious {
+            column-gap: 48px !important;
+          }
+
+          .column-gap-xl-huge {
+            column-gap: 56px !important;
+          }
+
+          .column-gap-xl-jumbo {
+            column-gap: 64px !important;
+          }
+        }
+
+        @media (min-width: 1640px) {
+          .m-2xl-none {
+            margin: 0 !important;
+          }
+
+          .m-2xl-smash {
+            margin: 2px !important;
+          }
+
+          .m-2xl-shortest {
+            margin: 4px !important;
+          }
+
+          .m-2xl-shorter {
+            margin: 8px !important;
+          }
+
+          .m-2xl-short {
+            margin: 12px !important;
+          }
+
+          .m-2xl-medium {
+            margin: 16px !important;
+          }
+
+          .m-2xl-tall {
+            margin: 24px !important;
+          }
+
+          .m-2xl-taller {
+            margin: 32px !important;
+          }
+
+          .m-2xl-tallest {
+            margin: 40px !important;
+          }
+
+          .m-2xl-spacious {
+            margin: 48px !important;
+          }
+
+          .m-2xl-huge {
+            margin: 56px !important;
+          }
+
+          .m-2xl-jumbo {
+            margin: 64px !important;
+          }
+
+          .m-2xl-auto {
+            margin: auto !important;
+          }
+
+          .mx-2xl-none {
+            margin-right: 0 !important;
+            margin-left: 0 !important;
+          }
+
+          .mx-2xl-smash {
+            margin-right: 2px !important;
+            margin-left: 2px !important;
+          }
+
+          .mx-2xl-shortest {
+            margin-right: 4px !important;
+            margin-left: 4px !important;
+          }
+
+          .mx-2xl-shorter {
+            margin-right: 8px !important;
+            margin-left: 8px !important;
+          }
+
+          .mx-2xl-short {
+            margin-right: 12px !important;
+            margin-left: 12px !important;
+          }
+
+          .mx-2xl-medium {
+            margin-right: 16px !important;
+            margin-left: 16px !important;
+          }
+
+          .mx-2xl-tall {
+            margin-right: 24px !important;
+            margin-left: 24px !important;
+          }
+
+          .mx-2xl-taller {
+            margin-right: 32px !important;
+            margin-left: 32px !important;
+          }
+
+          .mx-2xl-tallest {
+            margin-right: 40px !important;
+            margin-left: 40px !important;
+          }
+
+          .mx-2xl-spacious {
+            margin-right: 48px !important;
+            margin-left: 48px !important;
+          }
+
+          .mx-2xl-huge {
+            margin-right: 56px !important;
+            margin-left: 56px !important;
+          }
+
+          .mx-2xl-jumbo {
+            margin-right: 64px !important;
+            margin-left: 64px !important;
+          }
+
+          .mx-2xl-auto {
+            margin-right: auto !important;
+            margin-left: auto !important;
+          }
+
+          .my-2xl-none {
+            margin-top: 0 !important;
+            margin-bottom: 0 !important;
+          }
+
+          .my-2xl-smash {
+            margin-top: 2px !important;
+            margin-bottom: 2px !important;
+          }
+
+          .my-2xl-shortest {
+            margin-top: 4px !important;
+            margin-bottom: 4px !important;
+          }
+
+          .my-2xl-shorter {
+            margin-top: 8px !important;
+            margin-bottom: 8px !important;
+          }
+
+          .my-2xl-short {
+            margin-top: 12px !important;
+            margin-bottom: 12px !important;
+          }
+
+          .my-2xl-medium {
+            margin-top: 16px !important;
+            margin-bottom: 16px !important;
+          }
+
+          .my-2xl-tall {
+            margin-top: 24px !important;
+            margin-bottom: 24px !important;
+          }
+
+          .my-2xl-taller {
+            margin-top: 32px !important;
+            margin-bottom: 32px !important;
+          }
+
+          .my-2xl-tallest {
+            margin-top: 40px !important;
+            margin-bottom: 40px !important;
+          }
+
+          .my-2xl-spacious {
+            margin-top: 48px !important;
+            margin-bottom: 48px !important;
+          }
+
+          .my-2xl-huge {
+            margin-top: 56px !important;
+            margin-bottom: 56px !important;
+          }
+
+          .my-2xl-jumbo {
+            margin-top: 64px !important;
+            margin-bottom: 64px !important;
+          }
+
+          .my-2xl-auto {
+            margin-top: auto !important;
+            margin-bottom: auto !important;
+          }
+
+          .mt-2xl-none {
+            margin-top: 0 !important;
+          }
+
+          .mt-2xl-smash {
+            margin-top: 2px !important;
+          }
+
+          .mt-2xl-shortest {
+            margin-top: 4px !important;
+          }
+
+          .mt-2xl-shorter {
+            margin-top: 8px !important;
+          }
+
+          .mt-2xl-short {
+            margin-top: 12px !important;
+          }
+
+          .mt-2xl-medium {
+            margin-top: 16px !important;
+          }
+
+          .mt-2xl-tall {
+            margin-top: 24px !important;
+          }
+
+          .mt-2xl-taller {
+            margin-top: 32px !important;
+          }
+
+          .mt-2xl-tallest {
+            margin-top: 40px !important;
+          }
+
+          .mt-2xl-spacious {
+            margin-top: 48px !important;
+          }
+
+          .mt-2xl-huge {
+            margin-top: 56px !important;
+          }
+
+          .mt-2xl-jumbo {
+            margin-top: 64px !important;
+          }
+
+          .mt-2xl-auto {
+            margin-top: auto !important;
+          }
+
+          .me-2xl-none {
+            margin-right: 0 !important;
+          }
+
+          .me-2xl-smash {
+            margin-right: 2px !important;
+          }
+
+          .me-2xl-shortest {
+            margin-right: 4px !important;
+          }
+
+          .me-2xl-shorter {
+            margin-right: 8px !important;
+          }
+
+          .me-2xl-short {
+            margin-right: 12px !important;
+          }
+
+          .me-2xl-medium {
+            margin-right: 16px !important;
+          }
+
+          .me-2xl-tall {
+            margin-right: 24px !important;
+          }
+
+          .me-2xl-taller {
+            margin-right: 32px !important;
+          }
+
+          .me-2xl-tallest {
+            margin-right: 40px !important;
+          }
+
+          .me-2xl-spacious {
+            margin-right: 48px !important;
+          }
+
+          .me-2xl-huge {
+            margin-right: 56px !important;
+          }
+
+          .me-2xl-jumbo {
+            margin-right: 64px !important;
+          }
+
+          .me-2xl-auto {
+            margin-right: auto !important;
+          }
+
+          .mb-2xl-none {
+            margin-bottom: 0 !important;
+          }
+
+          .mb-2xl-smash {
+            margin-bottom: 2px !important;
+          }
+
+          .mb-2xl-shortest {
+            margin-bottom: 4px !important;
+          }
+
+          .mb-2xl-shorter {
+            margin-bottom: 8px !important;
+          }
+
+          .mb-2xl-short {
+            margin-bottom: 12px !important;
+          }
+
+          .mb-2xl-medium {
+            margin-bottom: 16px !important;
+          }
+
+          .mb-2xl-tall {
+            margin-bottom: 24px !important;
+          }
+
+          .mb-2xl-taller {
+            margin-bottom: 32px !important;
+          }
+
+          .mb-2xl-tallest {
+            margin-bottom: 40px !important;
+          }
+
+          .mb-2xl-spacious {
+            margin-bottom: 48px !important;
+          }
+
+          .mb-2xl-huge {
+            margin-bottom: 56px !important;
+          }
+
+          .mb-2xl-jumbo {
+            margin-bottom: 64px !important;
+          }
+
+          .mb-2xl-auto {
+            margin-bottom: auto !important;
+          }
+
+          .ms-2xl-none {
+            margin-left: 0 !important;
+          }
+
+          .ms-2xl-smash {
+            margin-left: 2px !important;
+          }
+
+          .ms-2xl-shortest {
+            margin-left: 4px !important;
+          }
+
+          .ms-2xl-shorter {
+            margin-left: 8px !important;
+          }
+
+          .ms-2xl-short {
+            margin-left: 12px !important;
+          }
+
+          .ms-2xl-medium {
+            margin-left: 16px !important;
+          }
+
+          .ms-2xl-tall {
+            margin-left: 24px !important;
+          }
+
+          .ms-2xl-taller {
+            margin-left: 32px !important;
+          }
+
+          .ms-2xl-tallest {
+            margin-left: 40px !important;
+          }
+
+          .ms-2xl-spacious {
+            margin-left: 48px !important;
+          }
+
+          .ms-2xl-huge {
+            margin-left: 56px !important;
+          }
+
+          .ms-2xl-jumbo {
+            margin-left: 64px !important;
+          }
+
+          .ms-2xl-auto {
+            margin-left: auto !important;
+          }
+
+          .p-2xl-none {
+            padding: 0 !important;
+          }
+
+          .p-2xl-smash {
+            padding: 2px !important;
+          }
+
+          .p-2xl-shortest {
+            padding: 4px !important;
+          }
+
+          .p-2xl-shorter {
+            padding: 8px !important;
+          }
+
+          .p-2xl-short {
+            padding: 12px !important;
+          }
+
+          .p-2xl-medium {
+            padding: 16px !important;
+          }
+
+          .p-2xl-tall {
+            padding: 24px !important;
+          }
+
+          .p-2xl-taller {
+            padding: 32px !important;
+          }
+
+          .p-2xl-tallest {
+            padding: 40px !important;
+          }
+
+          .p-2xl-spacious {
+            padding: 48px !important;
+          }
+
+          .p-2xl-huge {
+            padding: 56px !important;
+          }
+
+          .p-2xl-jumbo {
+            padding: 64px !important;
+          }
+
+          .px-2xl-none {
+            padding-right: 0 !important;
+            padding-left: 0 !important;
+          }
+
+          .px-2xl-smash {
+            padding-right: 2px !important;
+            padding-left: 2px !important;
+          }
+
+          .px-2xl-shortest {
+            padding-right: 4px !important;
+            padding-left: 4px !important;
+          }
+
+          .px-2xl-shorter {
+            padding-right: 8px !important;
+            padding-left: 8px !important;
+          }
+
+          .px-2xl-short {
+            padding-right: 12px !important;
+            padding-left: 12px !important;
+          }
+
+          .px-2xl-medium {
+            padding-right: 16px !important;
+            padding-left: 16px !important;
+          }
+
+          .px-2xl-tall {
+            padding-right: 24px !important;
+            padding-left: 24px !important;
+          }
+
+          .px-2xl-taller {
+            padding-right: 32px !important;
+            padding-left: 32px !important;
+          }
+
+          .px-2xl-tallest {
+            padding-right: 40px !important;
+            padding-left: 40px !important;
+          }
+
+          .px-2xl-spacious {
+            padding-right: 48px !important;
+            padding-left: 48px !important;
+          }
+
+          .px-2xl-huge {
+            padding-right: 56px !important;
+            padding-left: 56px !important;
+          }
+
+          .px-2xl-jumbo {
+            padding-right: 64px !important;
+            padding-left: 64px !important;
+          }
+
+          .py-2xl-none {
+            padding-top: 0 !important;
+            padding-bottom: 0 !important;
+          }
+
+          .py-2xl-smash {
+            padding-top: 2px !important;
+            padding-bottom: 2px !important;
+          }
+
+          .py-2xl-shortest {
+            padding-top: 4px !important;
+            padding-bottom: 4px !important;
+          }
+
+          .py-2xl-shorter {
+            padding-top: 8px !important;
+            padding-bottom: 8px !important;
+          }
+
+          .py-2xl-short {
+            padding-top: 12px !important;
+            padding-bottom: 12px !important;
+          }
+
+          .py-2xl-medium {
+            padding-top: 16px !important;
+            padding-bottom: 16px !important;
+          }
+
+          .py-2xl-tall {
+            padding-top: 24px !important;
+            padding-bottom: 24px !important;
+          }
+
+          .py-2xl-taller {
+            padding-top: 32px !important;
+            padding-bottom: 32px !important;
+          }
+
+          .py-2xl-tallest {
+            padding-top: 40px !important;
+            padding-bottom: 40px !important;
+          }
+
+          .py-2xl-spacious {
+            padding-top: 48px !important;
+            padding-bottom: 48px !important;
+          }
+
+          .py-2xl-huge {
+            padding-top: 56px !important;
+            padding-bottom: 56px !important;
+          }
+
+          .py-2xl-jumbo {
+            padding-top: 64px !important;
+            padding-bottom: 64px !important;
+          }
+
+          .pt-2xl-none {
+            padding-top: 0 !important;
+          }
+
+          .pt-2xl-smash {
+            padding-top: 2px !important;
+          }
+
+          .pt-2xl-shortest {
+            padding-top: 4px !important;
+          }
+
+          .pt-2xl-shorter {
+            padding-top: 8px !important;
+          }
+
+          .pt-2xl-short {
+            padding-top: 12px !important;
+          }
+
+          .pt-2xl-medium {
+            padding-top: 16px !important;
+          }
+
+          .pt-2xl-tall {
+            padding-top: 24px !important;
+          }
+
+          .pt-2xl-taller {
+            padding-top: 32px !important;
+          }
+
+          .pt-2xl-tallest {
+            padding-top: 40px !important;
+          }
+
+          .pt-2xl-spacious {
+            padding-top: 48px !important;
+          }
+
+          .pt-2xl-huge {
+            padding-top: 56px !important;
+          }
+
+          .pt-2xl-jumbo {
+            padding-top: 64px !important;
+          }
+
+          .pe-2xl-none {
+            padding-right: 0 !important;
+          }
+
+          .pe-2xl-smash {
+            padding-right: 2px !important;
+          }
+
+          .pe-2xl-shortest {
+            padding-right: 4px !important;
+          }
+
+          .pe-2xl-shorter {
+            padding-right: 8px !important;
+          }
+
+          .pe-2xl-short {
+            padding-right: 12px !important;
+          }
+
+          .pe-2xl-medium {
+            padding-right: 16px !important;
+          }
+
+          .pe-2xl-tall {
+            padding-right: 24px !important;
+          }
+
+          .pe-2xl-taller {
+            padding-right: 32px !important;
+          }
+
+          .pe-2xl-tallest {
+            padding-right: 40px !important;
+          }
+
+          .pe-2xl-spacious {
+            padding-right: 48px !important;
+          }
+
+          .pe-2xl-huge {
+            padding-right: 56px !important;
+          }
+
+          .pe-2xl-jumbo {
+            padding-right: 64px !important;
+          }
+
+          .pb-2xl-none {
+            padding-bottom: 0 !important;
+          }
+
+          .pb-2xl-smash {
+            padding-bottom: 2px !important;
+          }
+
+          .pb-2xl-shortest {
+            padding-bottom: 4px !important;
+          }
+
+          .pb-2xl-shorter {
+            padding-bottom: 8px !important;
+          }
+
+          .pb-2xl-short {
+            padding-bottom: 12px !important;
+          }
+
+          .pb-2xl-medium {
+            padding-bottom: 16px !important;
+          }
+
+          .pb-2xl-tall {
+            padding-bottom: 24px !important;
+          }
+
+          .pb-2xl-taller {
+            padding-bottom: 32px !important;
+          }
+
+          .pb-2xl-tallest {
+            padding-bottom: 40px !important;
+          }
+
+          .pb-2xl-spacious {
+            padding-bottom: 48px !important;
+          }
+
+          .pb-2xl-huge {
+            padding-bottom: 56px !important;
+          }
+
+          .pb-2xl-jumbo {
+            padding-bottom: 64px !important;
+          }
+
+          .ps-2xl-none {
+            padding-left: 0 !important;
+          }
+
+          .ps-2xl-smash {
+            padding-left: 2px !important;
+          }
+
+          .ps-2xl-shortest {
+            padding-left: 4px !important;
+          }
+
+          .ps-2xl-shorter {
+            padding-left: 8px !important;
+          }
+
+          .ps-2xl-short {
+            padding-left: 12px !important;
+          }
+
+          .ps-2xl-medium {
+            padding-left: 16px !important;
+          }
+
+          .ps-2xl-tall {
+            padding-left: 24px !important;
+          }
+
+          .ps-2xl-taller {
+            padding-left: 32px !important;
+          }
+
+          .ps-2xl-tallest {
+            padding-left: 40px !important;
+          }
+
+          .ps-2xl-spacious {
+            padding-left: 48px !important;
+          }
+
+          .ps-2xl-huge {
+            padding-left: 56px !important;
+          }
+
+          .ps-2xl-jumbo {
+            padding-left: 64px !important;
+          }
+
+          .gap-2xl-none {
+            gap: 0 !important;
+          }
+
+          .gap-2xl-smash {
+            gap: 2px !important;
+          }
+
+          .gap-2xl-shortest {
+            gap: 4px !important;
+          }
+
+          .gap-2xl-shorter {
+            gap: 8px !important;
+          }
+
+          .gap-2xl-short {
+            gap: 12px !important;
+          }
+
+          .gap-2xl-medium {
+            gap: 16px !important;
+          }
+
+          .gap-2xl-tall {
+            gap: 24px !important;
+          }
+
+          .gap-2xl-taller {
+            gap: 32px !important;
+          }
+
+          .gap-2xl-tallest {
+            gap: 40px !important;
+          }
+
+          .gap-2xl-spacious {
+            gap: 48px !important;
+          }
+
+          .gap-2xl-huge {
+            gap: 56px !important;
+          }
+
+          .gap-2xl-jumbo {
+            gap: 64px !important;
+          }
+
+          .row-gap-2xl-none {
+            row-gap: 0 !important;
+          }
+
+          .row-gap-2xl-smash {
+            row-gap: 2px !important;
+          }
+
+          .row-gap-2xl-shortest {
+            row-gap: 4px !important;
+          }
+
+          .row-gap-2xl-shorter {
+            row-gap: 8px !important;
+          }
+
+          .row-gap-2xl-short {
+            row-gap: 12px !important;
+          }
+
+          .row-gap-2xl-medium {
+            row-gap: 16px !important;
+          }
+
+          .row-gap-2xl-tall {
+            row-gap: 24px !important;
+          }
+
+          .row-gap-2xl-taller {
+            row-gap: 32px !important;
+          }
+
+          .row-gap-2xl-tallest {
+            row-gap: 40px !important;
+          }
+
+          .row-gap-2xl-spacious {
+            row-gap: 48px !important;
+          }
+
+          .row-gap-2xl-huge {
+            row-gap: 56px !important;
+          }
+
+          .row-gap-2xl-jumbo {
+            row-gap: 64px !important;
+          }
+
+          .column-gap-2xl-none {
+            column-gap: 0 !important;
+          }
+
+          .column-gap-2xl-smash {
+            column-gap: 2px !important;
+          }
+
+          .column-gap-2xl-shortest {
+            column-gap: 4px !important;
+          }
+
+          .column-gap-2xl-shorter {
+            column-gap: 8px !important;
+          }
+
+          .column-gap-2xl-short {
+            column-gap: 12px !important;
+          }
+
+          .column-gap-2xl-medium {
+            column-gap: 16px !important;
+          }
+
+          .column-gap-2xl-tall {
+            column-gap: 24px !important;
+          }
+
+          .column-gap-2xl-taller {
+            column-gap: 32px !important;
+          }
+
+          .column-gap-2xl-tallest {
+            column-gap: 40px !important;
+          }
+
+          .column-gap-2xl-spacious {
+            column-gap: 48px !important;
+          }
+
+          .column-gap-2xl-huge {
+            column-gap: 56px !important;
+          }
+
+          .column-gap-2xl-jumbo {
+            column-gap: 64px !important;
+          }
+        }
+
+        @media (min-width: 1880px) {
+          .m-3xl-none {
+            margin: 0 !important;
+          }
+
+          .m-3xl-smash {
+            margin: 2px !important;
+          }
+
+          .m-3xl-shortest {
+            margin: 4px !important;
+          }
+
+          .m-3xl-shorter {
+            margin: 8px !important;
+          }
+
+          .m-3xl-short {
+            margin: 12px !important;
+          }
+
+          .m-3xl-medium {
+            margin: 16px !important;
+          }
+
+          .m-3xl-tall {
+            margin: 24px !important;
+          }
+
+          .m-3xl-taller {
+            margin: 32px !important;
+          }
+
+          .m-3xl-tallest {
+            margin: 40px !important;
+          }
+
+          .m-3xl-spacious {
+            margin: 48px !important;
+          }
+
+          .m-3xl-huge {
+            margin: 56px !important;
+          }
+
+          .m-3xl-jumbo {
+            margin: 64px !important;
+          }
+
+          .m-3xl-auto {
+            margin: auto !important;
+          }
+
+          .mx-3xl-none {
+            margin-right: 0 !important;
+            margin-left: 0 !important;
+          }
+
+          .mx-3xl-smash {
+            margin-right: 2px !important;
+            margin-left: 2px !important;
+          }
+
+          .mx-3xl-shortest {
+            margin-right: 4px !important;
+            margin-left: 4px !important;
+          }
+
+          .mx-3xl-shorter {
+            margin-right: 8px !important;
+            margin-left: 8px !important;
+          }
+
+          .mx-3xl-short {
+            margin-right: 12px !important;
+            margin-left: 12px !important;
+          }
+
+          .mx-3xl-medium {
+            margin-right: 16px !important;
+            margin-left: 16px !important;
+          }
+
+          .mx-3xl-tall {
+            margin-right: 24px !important;
+            margin-left: 24px !important;
+          }
+
+          .mx-3xl-taller {
+            margin-right: 32px !important;
+            margin-left: 32px !important;
+          }
+
+          .mx-3xl-tallest {
+            margin-right: 40px !important;
+            margin-left: 40px !important;
+          }
+
+          .mx-3xl-spacious {
+            margin-right: 48px !important;
+            margin-left: 48px !important;
+          }
+
+          .mx-3xl-huge {
+            margin-right: 56px !important;
+            margin-left: 56px !important;
+          }
+
+          .mx-3xl-jumbo {
+            margin-right: 64px !important;
+            margin-left: 64px !important;
+          }
+
+          .mx-3xl-auto {
+            margin-right: auto !important;
+            margin-left: auto !important;
+          }
+
+          .my-3xl-none {
+            margin-top: 0 !important;
+            margin-bottom: 0 !important;
+          }
+
+          .my-3xl-smash {
+            margin-top: 2px !important;
+            margin-bottom: 2px !important;
+          }
+
+          .my-3xl-shortest {
+            margin-top: 4px !important;
+            margin-bottom: 4px !important;
+          }
+
+          .my-3xl-shorter {
+            margin-top: 8px !important;
+            margin-bottom: 8px !important;
+          }
+
+          .my-3xl-short {
+            margin-top: 12px !important;
+            margin-bottom: 12px !important;
+          }
+
+          .my-3xl-medium {
+            margin-top: 16px !important;
+            margin-bottom: 16px !important;
+          }
+
+          .my-3xl-tall {
+            margin-top: 24px !important;
+            margin-bottom: 24px !important;
+          }
+
+          .my-3xl-taller {
+            margin-top: 32px !important;
+            margin-bottom: 32px !important;
+          }
+
+          .my-3xl-tallest {
+            margin-top: 40px !important;
+            margin-bottom: 40px !important;
+          }
+
+          .my-3xl-spacious {
+            margin-top: 48px !important;
+            margin-bottom: 48px !important;
+          }
+
+          .my-3xl-huge {
+            margin-top: 56px !important;
+            margin-bottom: 56px !important;
+          }
+
+          .my-3xl-jumbo {
+            margin-top: 64px !important;
+            margin-bottom: 64px !important;
+          }
+
+          .my-3xl-auto {
+            margin-top: auto !important;
+            margin-bottom: auto !important;
+          }
+
+          .mt-3xl-none {
+            margin-top: 0 !important;
+          }
+
+          .mt-3xl-smash {
+            margin-top: 2px !important;
+          }
+
+          .mt-3xl-shortest {
+            margin-top: 4px !important;
+          }
+
+          .mt-3xl-shorter {
+            margin-top: 8px !important;
+          }
+
+          .mt-3xl-short {
+            margin-top: 12px !important;
+          }
+
+          .mt-3xl-medium {
+            margin-top: 16px !important;
+          }
+
+          .mt-3xl-tall {
+            margin-top: 24px !important;
+          }
+
+          .mt-3xl-taller {
+            margin-top: 32px !important;
+          }
+
+          .mt-3xl-tallest {
+            margin-top: 40px !important;
+          }
+
+          .mt-3xl-spacious {
+            margin-top: 48px !important;
+          }
+
+          .mt-3xl-huge {
+            margin-top: 56px !important;
+          }
+
+          .mt-3xl-jumbo {
+            margin-top: 64px !important;
+          }
+
+          .mt-3xl-auto {
+            margin-top: auto !important;
+          }
+
+          .me-3xl-none {
+            margin-right: 0 !important;
+          }
+
+          .me-3xl-smash {
+            margin-right: 2px !important;
+          }
+
+          .me-3xl-shortest {
+            margin-right: 4px !important;
+          }
+
+          .me-3xl-shorter {
+            margin-right: 8px !important;
+          }
+
+          .me-3xl-short {
+            margin-right: 12px !important;
+          }
+
+          .me-3xl-medium {
+            margin-right: 16px !important;
+          }
+
+          .me-3xl-tall {
+            margin-right: 24px !important;
+          }
+
+          .me-3xl-taller {
+            margin-right: 32px !important;
+          }
+
+          .me-3xl-tallest {
+            margin-right: 40px !important;
+          }
+
+          .me-3xl-spacious {
+            margin-right: 48px !important;
+          }
+
+          .me-3xl-huge {
+            margin-right: 56px !important;
+          }
+
+          .me-3xl-jumbo {
+            margin-right: 64px !important;
+          }
+
+          .me-3xl-auto {
+            margin-right: auto !important;
+          }
+
+          .mb-3xl-none {
+            margin-bottom: 0 !important;
+          }
+
+          .mb-3xl-smash {
+            margin-bottom: 2px !important;
+          }
+
+          .mb-3xl-shortest {
+            margin-bottom: 4px !important;
+          }
+
+          .mb-3xl-shorter {
+            margin-bottom: 8px !important;
+          }
+
+          .mb-3xl-short {
+            margin-bottom: 12px !important;
+          }
+
+          .mb-3xl-medium {
+            margin-bottom: 16px !important;
+          }
+
+          .mb-3xl-tall {
+            margin-bottom: 24px !important;
+          }
+
+          .mb-3xl-taller {
+            margin-bottom: 32px !important;
+          }
+
+          .mb-3xl-tallest {
+            margin-bottom: 40px !important;
+          }
+
+          .mb-3xl-spacious {
+            margin-bottom: 48px !important;
+          }
+
+          .mb-3xl-huge {
+            margin-bottom: 56px !important;
+          }
+
+          .mb-3xl-jumbo {
+            margin-bottom: 64px !important;
+          }
+
+          .mb-3xl-auto {
+            margin-bottom: auto !important;
+          }
+
+          .ms-3xl-none {
+            margin-left: 0 !important;
+          }
+
+          .ms-3xl-smash {
+            margin-left: 2px !important;
+          }
+
+          .ms-3xl-shortest {
+            margin-left: 4px !important;
+          }
+
+          .ms-3xl-shorter {
+            margin-left: 8px !important;
+          }
+
+          .ms-3xl-short {
+            margin-left: 12px !important;
+          }
+
+          .ms-3xl-medium {
+            margin-left: 16px !important;
+          }
+
+          .ms-3xl-tall {
+            margin-left: 24px !important;
+          }
+
+          .ms-3xl-taller {
+            margin-left: 32px !important;
+          }
+
+          .ms-3xl-tallest {
+            margin-left: 40px !important;
+          }
+
+          .ms-3xl-spacious {
+            margin-left: 48px !important;
+          }
+
+          .ms-3xl-huge {
+            margin-left: 56px !important;
+          }
+
+          .ms-3xl-jumbo {
+            margin-left: 64px !important;
+          }
+
+          .ms-3xl-auto {
+            margin-left: auto !important;
+          }
+
+          .p-3xl-none {
+            padding: 0 !important;
+          }
+
+          .p-3xl-smash {
+            padding: 2px !important;
+          }
+
+          .p-3xl-shortest {
+            padding: 4px !important;
+          }
+
+          .p-3xl-shorter {
+            padding: 8px !important;
+          }
+
+          .p-3xl-short {
+            padding: 12px !important;
+          }
+
+          .p-3xl-medium {
+            padding: 16px !important;
+          }
+
+          .p-3xl-tall {
+            padding: 24px !important;
+          }
+
+          .p-3xl-taller {
+            padding: 32px !important;
+          }
+
+          .p-3xl-tallest {
+            padding: 40px !important;
+          }
+
+          .p-3xl-spacious {
+            padding: 48px !important;
+          }
+
+          .p-3xl-huge {
+            padding: 56px !important;
+          }
+
+          .p-3xl-jumbo {
+            padding: 64px !important;
+          }
+
+          .px-3xl-none {
+            padding-right: 0 !important;
+            padding-left: 0 !important;
+          }
+
+          .px-3xl-smash {
+            padding-right: 2px !important;
+            padding-left: 2px !important;
+          }
+
+          .px-3xl-shortest {
+            padding-right: 4px !important;
+            padding-left: 4px !important;
+          }
+
+          .px-3xl-shorter {
+            padding-right: 8px !important;
+            padding-left: 8px !important;
+          }
+
+          .px-3xl-short {
+            padding-right: 12px !important;
+            padding-left: 12px !important;
+          }
+
+          .px-3xl-medium {
+            padding-right: 16px !important;
+            padding-left: 16px !important;
+          }
+
+          .px-3xl-tall {
+            padding-right: 24px !important;
+            padding-left: 24px !important;
+          }
+
+          .px-3xl-taller {
+            padding-right: 32px !important;
+            padding-left: 32px !important;
+          }
+
+          .px-3xl-tallest {
+            padding-right: 40px !important;
+            padding-left: 40px !important;
+          }
+
+          .px-3xl-spacious {
+            padding-right: 48px !important;
+            padding-left: 48px !important;
+          }
+
+          .px-3xl-huge {
+            padding-right: 56px !important;
+            padding-left: 56px !important;
+          }
+
+          .px-3xl-jumbo {
+            padding-right: 64px !important;
+            padding-left: 64px !important;
+          }
+
+          .py-3xl-none {
+            padding-top: 0 !important;
+            padding-bottom: 0 !important;
+          }
+
+          .py-3xl-smash {
+            padding-top: 2px !important;
+            padding-bottom: 2px !important;
+          }
+
+          .py-3xl-shortest {
+            padding-top: 4px !important;
+            padding-bottom: 4px !important;
+          }
+
+          .py-3xl-shorter {
+            padding-top: 8px !important;
+            padding-bottom: 8px !important;
+          }
+
+          .py-3xl-short {
+            padding-top: 12px !important;
+            padding-bottom: 12px !important;
+          }
+
+          .py-3xl-medium {
+            padding-top: 16px !important;
+            padding-bottom: 16px !important;
+          }
+
+          .py-3xl-tall {
+            padding-top: 24px !important;
+            padding-bottom: 24px !important;
+          }
+
+          .py-3xl-taller {
+            padding-top: 32px !important;
+            padding-bottom: 32px !important;
+          }
+
+          .py-3xl-tallest {
+            padding-top: 40px !important;
+            padding-bottom: 40px !important;
+          }
+
+          .py-3xl-spacious {
+            padding-top: 48px !important;
+            padding-bottom: 48px !important;
+          }
+
+          .py-3xl-huge {
+            padding-top: 56px !important;
+            padding-bottom: 56px !important;
+          }
+
+          .py-3xl-jumbo {
+            padding-top: 64px !important;
+            padding-bottom: 64px !important;
+          }
+
+          .pt-3xl-none {
+            padding-top: 0 !important;
+          }
+
+          .pt-3xl-smash {
+            padding-top: 2px !important;
+          }
+
+          .pt-3xl-shortest {
+            padding-top: 4px !important;
+          }
+
+          .pt-3xl-shorter {
+            padding-top: 8px !important;
+          }
+
+          .pt-3xl-short {
+            padding-top: 12px !important;
+          }
+
+          .pt-3xl-medium {
+            padding-top: 16px !important;
+          }
+
+          .pt-3xl-tall {
+            padding-top: 24px !important;
+          }
+
+          .pt-3xl-taller {
+            padding-top: 32px !important;
+          }
+
+          .pt-3xl-tallest {
+            padding-top: 40px !important;
+          }
+
+          .pt-3xl-spacious {
+            padding-top: 48px !important;
+          }
+
+          .pt-3xl-huge {
+            padding-top: 56px !important;
+          }
+
+          .pt-3xl-jumbo {
+            padding-top: 64px !important;
+          }
+
+          .pe-3xl-none {
+            padding-right: 0 !important;
+          }
+
+          .pe-3xl-smash {
+            padding-right: 2px !important;
+          }
+
+          .pe-3xl-shortest {
+            padding-right: 4px !important;
+          }
+
+          .pe-3xl-shorter {
+            padding-right: 8px !important;
+          }
+
+          .pe-3xl-short {
+            padding-right: 12px !important;
+          }
+
+          .pe-3xl-medium {
+            padding-right: 16px !important;
+          }
+
+          .pe-3xl-tall {
+            padding-right: 24px !important;
+          }
+
+          .pe-3xl-taller {
+            padding-right: 32px !important;
+          }
+
+          .pe-3xl-tallest {
+            padding-right: 40px !important;
+          }
+
+          .pe-3xl-spacious {
+            padding-right: 48px !important;
+          }
+
+          .pe-3xl-huge {
+            padding-right: 56px !important;
+          }
+
+          .pe-3xl-jumbo {
+            padding-right: 64px !important;
+          }
+
+          .pb-3xl-none {
+            padding-bottom: 0 !important;
+          }
+
+          .pb-3xl-smash {
+            padding-bottom: 2px !important;
+          }
+
+          .pb-3xl-shortest {
+            padding-bottom: 4px !important;
+          }
+
+          .pb-3xl-shorter {
+            padding-bottom: 8px !important;
+          }
+
+          .pb-3xl-short {
+            padding-bottom: 12px !important;
+          }
+
+          .pb-3xl-medium {
+            padding-bottom: 16px !important;
+          }
+
+          .pb-3xl-tall {
+            padding-bottom: 24px !important;
+          }
+
+          .pb-3xl-taller {
+            padding-bottom: 32px !important;
+          }
+
+          .pb-3xl-tallest {
+            padding-bottom: 40px !important;
+          }
+
+          .pb-3xl-spacious {
+            padding-bottom: 48px !important;
+          }
+
+          .pb-3xl-huge {
+            padding-bottom: 56px !important;
+          }
+
+          .pb-3xl-jumbo {
+            padding-bottom: 64px !important;
+          }
+
+          .ps-3xl-none {
+            padding-left: 0 !important;
+          }
+
+          .ps-3xl-smash {
+            padding-left: 2px !important;
+          }
+
+          .ps-3xl-shortest {
+            padding-left: 4px !important;
+          }
+
+          .ps-3xl-shorter {
+            padding-left: 8px !important;
+          }
+
+          .ps-3xl-short {
+            padding-left: 12px !important;
+          }
+
+          .ps-3xl-medium {
+            padding-left: 16px !important;
+          }
+
+          .ps-3xl-tall {
+            padding-left: 24px !important;
+          }
+
+          .ps-3xl-taller {
+            padding-left: 32px !important;
+          }
+
+          .ps-3xl-tallest {
+            padding-left: 40px !important;
+          }
+
+          .ps-3xl-spacious {
+            padding-left: 48px !important;
+          }
+
+          .ps-3xl-huge {
+            padding-left: 56px !important;
+          }
+
+          .ps-3xl-jumbo {
+            padding-left: 64px !important;
+          }
+
+          .gap-3xl-none {
+            gap: 0 !important;
+          }
+
+          .gap-3xl-smash {
+            gap: 2px !important;
+          }
+
+          .gap-3xl-shortest {
+            gap: 4px !important;
+          }
+
+          .gap-3xl-shorter {
+            gap: 8px !important;
+          }
+
+          .gap-3xl-short {
+            gap: 12px !important;
+          }
+
+          .gap-3xl-medium {
+            gap: 16px !important;
+          }
+
+          .gap-3xl-tall {
+            gap: 24px !important;
+          }
+
+          .gap-3xl-taller {
+            gap: 32px !important;
+          }
+
+          .gap-3xl-tallest {
+            gap: 40px !important;
+          }
+
+          .gap-3xl-spacious {
+            gap: 48px !important;
+          }
+
+          .gap-3xl-huge {
+            gap: 56px !important;
+          }
+
+          .gap-3xl-jumbo {
+            gap: 64px !important;
+          }
+
+          .row-gap-3xl-none {
+            row-gap: 0 !important;
+          }
+
+          .row-gap-3xl-smash {
+            row-gap: 2px !important;
+          }
+
+          .row-gap-3xl-shortest {
+            row-gap: 4px !important;
+          }
+
+          .row-gap-3xl-shorter {
+            row-gap: 8px !important;
+          }
+
+          .row-gap-3xl-short {
+            row-gap: 12px !important;
+          }
+
+          .row-gap-3xl-medium {
+            row-gap: 16px !important;
+          }
+
+          .row-gap-3xl-tall {
+            row-gap: 24px !important;
+          }
+
+          .row-gap-3xl-taller {
+            row-gap: 32px !important;
+          }
+
+          .row-gap-3xl-tallest {
+            row-gap: 40px !important;
+          }
+
+          .row-gap-3xl-spacious {
+            row-gap: 48px !important;
+          }
+
+          .row-gap-3xl-huge {
+            row-gap: 56px !important;
+          }
+
+          .row-gap-3xl-jumbo {
+            row-gap: 64px !important;
+          }
+
+          .column-gap-3xl-none {
+            column-gap: 0 !important;
+          }
+
+          .column-gap-3xl-smash {
+            column-gap: 2px !important;
+          }
+
+          .column-gap-3xl-shortest {
+            column-gap: 4px !important;
+          }
+
+          .column-gap-3xl-shorter {
+            column-gap: 8px !important;
+          }
+
+          .column-gap-3xl-short {
+            column-gap: 12px !important;
+          }
+
+          .column-gap-3xl-medium {
+            column-gap: 16px !important;
+          }
+
+          .column-gap-3xl-tall {
+            column-gap: 24px !important;
+          }
+
+          .column-gap-3xl-taller {
+            column-gap: 32px !important;
+          }
+
+          .column-gap-3xl-tallest {
+            column-gap: 40px !important;
+          }
+
+          .column-gap-3xl-spacious {
+            column-gap: 48px !important;
+          }
+
+          .column-gap-3xl-huge {
+            column-gap: 56px !important;
+          }
+
+          .column-gap-3xl-jumbo {
+            column-gap: 64px !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() {
+        @import "../../utilities/api";
+      }
+      @include expect() {
+        .opacity-0 {
+          opacity: 0 !important;
+        }
+
+        .opacity-25 {
+          opacity: .25 !important;
+        }
+
+        .opacity-50 {
+          opacity: .5 !important;
+        }
+
+        .opacity-75 {
+          opacity: .75 !important;
+        }
+
+        .opacity-100 {
+          opacity: 1 !important;
+        }
+
+        .opacity-transparent {
+          opacity: 0 !important;
+        }
+
+        .opacity-weaker {
+          opacity: .04 !important;
+        }
+
+        .opacity-weak {
+          opacity: .16 !important;
+        }
+
+        .opacity-medium {
+          opacity: .32 !important;
+        }
+
+        .opacity-strong {
+          opacity: .64 !important;
+        }
+
+        .opacity-opaque {
+          opacity: 1 !important;
+        }
+
+        .border {
+          border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
+        }
+
+        .border-none {
+          border: 0 !important;
+        }
+
+        .border-0 {
+          border: 0 !important;
+        }
+
+        .border-top-0 {
+          border-top: 0 !important;
+        }
+
+        .border-end-0 {
+          border-right: 0 !important;
+        }
+
+        .border-bottom-0 {
+          border-bottom: 0 !important;
+        }
+
+        .border-start-0 {
+          border-left: 0 !important;
+        }
+
+        .border-primary {
+          --bs-border-opacity: 1;
+          border-color: rgba(var(--bs-primary-rgb), var(--bs-border-opacity)) !important;
+        }
+
+        .border-secondary {
+          --bs-border-opacity: 1;
+          border-color: rgba(var(--bs-secondary-rgb), var(--bs-border-opacity)) !important;
+        }
+
+        .border-success {
+          --bs-border-opacity: 1;
+          border-color: rgba(var(--bs-success-rgb), var(--bs-border-opacity)) !important;
+        }
+
+        .border-info {
+          --bs-border-opacity: 1;
+          border-color: rgba(var(--bs-info-rgb), var(--bs-border-opacity)) !important;
+        }
+
+        .border-warning {
+          --bs-border-opacity: 1;
+          border-color: rgba(var(--bs-warning-rgb), var(--bs-border-opacity)) !important;
+        }
+
+        .border-danger {
+          --bs-border-opacity: 1;
+          border-color: rgba(var(--bs-danger-rgb), var(--bs-border-opacity)) !important;
+        }
+
+        .border-light {
+          --bs-border-opacity: 1;
+          border-color: rgba(204, 204, 204, var(--bs-border-opacity)) !important;
+        }
+
+        .border-dark {
+          --bs-border-opacity: 1;
+          border-color: rgba(102, 102, 102, var(--bs-border-opacity)) !important;
+        }
+
+        .border-black {
+          --bs-border-opacity: 1;
+          border-color: rgba(var(--bs-black-rgb), var(--bs-border-opacity)) !important;
+        }
+
+        .border-white {
+          --bs-border-opacity: 1;
+          border-color: rgba(var(--bs-white-rgb), var(--bs-border-opacity)) !important;
+        }
+
+        .border-primary-subtle {
+          border-color: var(--bs-primary-border-subtle) !important;
+        }
+
+        .border-secondary-subtle {
+          border-color: var(--bs-secondary-border-subtle) !important;
+        }
+
+        .border-success-subtle {
+          border-color: var(--bs-success-border-subtle) !important;
+        }
+
+        .border-info-subtle {
+          border-color: var(--bs-info-border-subtle) !important;
+        }
+
+        .border-warning-subtle {
+          border-color: var(--bs-warning-border-subtle) !important;
+        }
+
+        .border-danger-subtle {
+          border-color: var(--bs-danger-border-subtle) !important;
+        }
+
+        .border-light-subtle {
+          border-color: var(--bs-light-border-subtle) !important;
+        }
+
+        .border-dark-subtle {
+          border-color: var(--bs-dark-border-subtle) !important;
+        }
+
+        .border-1 {
+          border-width: 1px !important;
+        }
+
+        .border-2 {
+          border-width: 2px !important;
+        }
+
+        .border-3 {
+          border-width: 3px !important;
+        }
+
+        .border-4 {
+          border-width: 4px !important;
+        }
+
+        .border-5 {
+          border-width: 5px !important;
+        }
+
+        .border-opacity-10 {
+          // Sass compilation will put a leading zero so we want to keep that one
+          // stylelint-disable-next-line @stylistic/number-leading-zero
+          --bs-border-opacity: 0.1; // stylelint-disable-line @stylistic/number-leading-zero
+        }
+
+        .border-opacity-25 {
+          // Sass compilation will put a leading zero so we want to keep that one
+          // stylelint-disable-next-line @stylistic/number-leading-zero
+          --bs-border-opacity: 0.25; // stylelint-disable-line @stylistic/number-leading-zero
+        }
+
+        .border-opacity-50 {
+          // Sass compilation will put a leading zero so we want to keep that one
+          // stylelint-disable-next-line @stylistic/number-leading-zero
+          --bs-border-opacity: 0.5; // stylelint-disable-line @stylistic/number-leading-zero
+        }
+
+        .border-opacity-75 {
+          // Sass compilation will put a leading zero so we want to keep that one
+          // stylelint-disable-next-line @stylistic/number-leading-zero
+          --bs-border-opacity: 0.75; // stylelint-disable-line @stylistic/number-leading-zero
+        }
+
+        .border-opacity-100 {
+          --bs-border-opacity: 1;
+        }
+
+        .border-top {
+          border-top: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
+        }
+
+        .border-top-none {
+          border-top: 0 !important;
+        }
+
+        .border-end {
+          border-right: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
+        }
+
+        .border-end-none {
+          border-right: 0 !important;
+        }
+
+        .border-bottom {
+          border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
+        }
+
+        .border-bottom-none {
+          border-bottom: 0 !important;
+        }
+
+        .border-start {
+          border-left: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
+        }
+
+        .border-start-none {
+          border-left: 0 !important;
+        }
+
+        .border-thin {
+          border-width: 1px !important;
+        }
+
+        .border-medium {
+          border-width: 2px !important;
+        }
+
+        .border-thick {
+          border-width: 3px !important;
+        }
+
+        .border-thicker {
+          border-width: 4px !important;
+        }
+
+        .border-drag {
+          border-style: dashed !important;
+        }
+
+        .rounded-0 {
+          border-radius: 0 !important; // stylelint-disable-line property-disallowed-list
+        }
+
+        .rounded-1 {
+          border-radius: var(--bs-border-radius-sm) !important; // stylelint-disable-line property-disallowed-list
+        }
+
+        .rounded-2 {
+          border-radius: var(--bs-border-radius-lg) !important; // stylelint-disable-line property-disallowed-list
+        }
+
+        .rounded-3 {
+          border-radius: var(--bs-border-radius-xl) !important; // stylelint-disable-line property-disallowed-list
+        }
+
+        .rounded-4 {
+          border-radius: var(--bs-border-radius-xxl) !important; // stylelint-disable-line property-disallowed-list
+        }
+
+        .rounded-5 {
+          border-radius: 27px !important; // stylelint-disable-line property-disallowed-list
+        }
+
+        .rounded-top-0 {
+          border-top-left-radius: 0 !important; // stylelint-disable-line property-disallowed-list
+          border-top-right-radius: 0 !important; // stylelint-disable-line property-disallowed-list
+        }
+
+        .rounded-top-1 {
+          border-top-left-radius: var(--bs-border-radius-sm) !important; // stylelint-disable-line property-disallowed-list
+          border-top-right-radius: var(--bs-border-radius-sm) !important; // stylelint-disable-line property-disallowed-list
+        }
+
+        .rounded-top-2 {
+          border-top-left-radius: var(--bs-border-radius-lg) !important; // stylelint-disable-line property-disallowed-list
+          border-top-right-radius: var(--bs-border-radius-lg) !important; // stylelint-disable-line property-disallowed-list
+        }
+
+        .rounded-top-3 {
+          border-top-left-radius: var(--bs-border-radius-xl) !important; // stylelint-disable-line property-disallowed-list
+          border-top-right-radius: var(--bs-border-radius-xl) !important; // stylelint-disable-line property-disallowed-list
+        }
+
+        .rounded-top-4 {
+          border-top-left-radius: var(--bs-border-radius-xxl) !important; // stylelint-disable-line property-disallowed-list
+          border-top-right-radius: var(--bs-border-radius-xxl) !important; // stylelint-disable-line property-disallowed-list
+        }
+
+        .rounded-top-5 {
+          border-top-left-radius: 27px !important; // stylelint-disable-line property-disallowed-list
+          border-top-right-radius: 27px !important; // stylelint-disable-line property-disallowed-list
+        }
+
+        .rounded-end-0 {
+          border-top-right-radius: 0 !important; // stylelint-disable-line property-disallowed-list
+          border-bottom-right-radius: 0 !important; // stylelint-disable-line property-disallowed-list
+        }
+
+        .rounded-end-1 {
+          border-top-right-radius: var(--bs-border-radius-sm) !important; // stylelint-disable-line property-disallowed-list
+          border-bottom-right-radius: var(--bs-border-radius-sm) !important; // stylelint-disable-line property-disallowed-list
+        }
+
+        .rounded-end-2 {
+          border-top-right-radius: var(--bs-border-radius-lg) !important; // stylelint-disable-line property-disallowed-list
+          border-bottom-right-radius: var(--bs-border-radius-lg) !important; // stylelint-disable-line property-disallowed-list
+        }
+
+        .rounded-end-3 {
+          border-top-right-radius: var(--bs-border-radius-xl) !important; // stylelint-disable-line property-disallowed-list
+          border-bottom-right-radius: var(--bs-border-radius-xl) !important; // stylelint-disable-line property-disallowed-list
+        }
+
+        .rounded-end-4 {
+          border-top-right-radius: var(--bs-border-radius-xxl) !important; // stylelint-disable-line property-disallowed-list
+          border-bottom-right-radius: var(--bs-border-radius-xxl) !important; // stylelint-disable-line property-disallowed-list
+        }
+
+        .rounded-end-5 {
+          border-top-right-radius: 27px !important; // stylelint-disable-line property-disallowed-list
+          border-bottom-right-radius: 27px !important; // stylelint-disable-line property-disallowed-list
+        }
+
+        .rounded-bottom-0 {
+          border-bottom-right-radius: 0 !important; // stylelint-disable-line property-disallowed-list
+          border-bottom-left-radius: 0 !important; // stylelint-disable-line property-disallowed-list
+        }
+
+        .rounded-bottom-1 {
+          border-bottom-right-radius: var(--bs-border-radius-sm) !important; // stylelint-disable-line property-disallowed-list
+          border-bottom-left-radius: var(--bs-border-radius-sm) !important; // stylelint-disable-line property-disallowed-list
+        }
+
+        .rounded-bottom-2 {
+          border-bottom-right-radius: var(--bs-border-radius-lg) !important; // stylelint-disable-line property-disallowed-list
+          border-bottom-left-radius: var(--bs-border-radius-lg) !important; // stylelint-disable-line property-disallowed-list
+        }
+
+        .rounded-bottom-3 {
+          border-bottom-right-radius: var(--bs-border-radius-xl) !important; // stylelint-disable-line property-disallowed-list
+          border-bottom-left-radius: var(--bs-border-radius-xl) !important; // stylelint-disable-line property-disallowed-list
+        }
+
+        .rounded-bottom-4 {
+          border-bottom-right-radius: var(--bs-border-radius-xxl) !important; // stylelint-disable-line property-disallowed-list
+          border-bottom-left-radius: var(--bs-border-radius-xxl) !important; // stylelint-disable-line property-disallowed-list
+        }
+
+        .rounded-bottom-5 {
+          border-bottom-right-radius: 27px !important; // stylelint-disable-line property-disallowed-list
+          border-bottom-left-radius: 27px !important; // stylelint-disable-line property-disallowed-list
+        }
+
+        .rounded-start-0 {
+          border-bottom-left-radius: 0 !important; // stylelint-disable-line property-disallowed-list
+          border-top-left-radius: 0 !important; // stylelint-disable-line property-disallowed-list, order/properties-order
+        }
+
+        .rounded-start-1 {
+          border-bottom-left-radius: var(--bs-border-radius-sm) !important; // stylelint-disable-line property-disallowed-list
+          border-top-left-radius: var(--bs-border-radius-sm) !important; // stylelint-disable-line property-disallowed-list, order/properties-order
+        }
+
+        .rounded-start-2 {
+          border-bottom-left-radius: var(--bs-border-radius-lg) !important; // stylelint-disable-line property-disallowed-list
+          border-top-left-radius: var(--bs-border-radius-lg) !important; // stylelint-disable-line property-disallowed-list, order/properties-order
+        }
+
+        .rounded-start-3 {
+          border-bottom-left-radius: var(--bs-border-radius-xl) !important; // stylelint-disable-line property-disallowed-list
+          border-top-left-radius: var(--bs-border-radius-xl) !important; // stylelint-disable-line property-disallowed-list, order/properties-order
+        }
+
+        .rounded-start-4 {
+          border-bottom-left-radius: var(--bs-border-radius-xxl) !important; // stylelint-disable-line property-disallowed-list
+          border-top-left-radius: var(--bs-border-radius-xxl) !important; // stylelint-disable-line property-disallowed-list, order/properties-order
+        }
+
+        .rounded-start-5 {
+          border-bottom-left-radius: 27px !important; // stylelint-disable-line property-disallowed-list
+          border-top-left-radius: 27px !important; // stylelint-disable-line property-disallowed-list, order/properties-order
+        }
+
+        .rounded {
+          border-radius: 0 !important; // stylelint-disable-line property-disallowed-list
+        }
+
+        .rounded-none {
+          border-radius: 0 !important; // stylelint-disable-line property-disallowed-list
+        }
+
+        .rounded-short {
+          border-radius: 3px !important; // stylelint-disable-line property-disallowed-list
+        }
+
+        .rounded-medium {
+          border-radius: 6px !important; // stylelint-disable-line property-disallowed-list
+        }
+
+        .rounded-tall {
+          border-radius: 12px !important; // stylelint-disable-line property-disallowed-list
+        }
+
+        .rounded-pill {
+          border-radius: 125rem !important; // stylelint-disable-line property-disallowed-list
+        }
+
+        .rounded-circle {
+          border-radius: 50% !important; // stylelint-disable-line property-disallowed-list
+        }
+
+        .rounded-top {
+          border-top-left-radius: 0 !important; // stylelint-disable-line property-disallowed-list
+          border-top-right-radius: 0 !important; // stylelint-disable-line property-disallowed-list
+        }
+
+        .rounded-top-none {
+          border-top-left-radius: 0 !important; // stylelint-disable-line property-disallowed-list
+          border-top-right-radius: 0 !important; // stylelint-disable-line property-disallowed-list
+        }
+
+        .rounded-top-short {
+          border-top-left-radius: 3px !important; // stylelint-disable-line property-disallowed-list
+          border-top-right-radius: 3px !important; // stylelint-disable-line property-disallowed-list
+        }
+
+        .rounded-top-medium {
+          border-top-left-radius: 6px !important; // stylelint-disable-line property-disallowed-list
+          border-top-right-radius: 6px !important; // stylelint-disable-line property-disallowed-list
+        }
+
+        .rounded-top-tall {
+          border-top-left-radius: 12px !important; // stylelint-disable-line property-disallowed-list
+          border-top-right-radius: 12px !important; // stylelint-disable-line property-disallowed-list
+        }
+
+        .rounded-top-pill {
+          border-top-left-radius: 125rem !important; // stylelint-disable-line property-disallowed-list
+          border-top-right-radius: 125rem !important; // stylelint-disable-line property-disallowed-list
+        }
+
+        .rounded-top-circle {
+          border-top-left-radius: 50% !important; // stylelint-disable-line property-disallowed-list
+          border-top-right-radius: 50% !important; // stylelint-disable-line property-disallowed-list
+        }
+
+        .rounded-end {
+          border-top-right-radius: 0 !important; // stylelint-disable-line property-disallowed-list
+          border-bottom-right-radius: 0 !important; // stylelint-disable-line property-disallowed-list
+        }
+
+        .rounded-end-none {
+          border-top-right-radius: 0 !important; // stylelint-disable-line property-disallowed-list
+          border-bottom-right-radius: 0 !important; // stylelint-disable-line property-disallowed-list
+        }
+
+        .rounded-end-short {
+          border-top-right-radius: 3px !important; // stylelint-disable-line property-disallowed-list
+          border-bottom-right-radius: 3px !important; // stylelint-disable-line property-disallowed-list
+        }
+
+        .rounded-end-medium {
+          border-top-right-radius: 6px !important; // stylelint-disable-line property-disallowed-list
+          border-bottom-right-radius: 6px !important; // stylelint-disable-line property-disallowed-list
+        }
+
+        .rounded-end-tall {
+          border-top-right-radius: 12px !important; // stylelint-disable-line property-disallowed-list
+          border-bottom-right-radius: 12px !important; // stylelint-disable-line property-disallowed-list
+        }
+
+        .rounded-end-pill {
+          border-top-right-radius: 125rem !important; // stylelint-disable-line property-disallowed-list
+          border-bottom-right-radius: 125rem !important; // stylelint-disable-line property-disallowed-list
+        }
+
+        .rounded-end-circle {
+          border-top-right-radius: 50% !important; // stylelint-disable-line property-disallowed-list
+          border-bottom-right-radius: 50% !important; // stylelint-disable-line property-disallowed-list
+        }
+
+        .rounded-bottom {
+          border-bottom-right-radius: 0 !important; // stylelint-disable-line property-disallowed-list
+          border-bottom-left-radius: 0 !important; // stylelint-disable-line property-disallowed-list
+        }
+
+        .rounded-bottom-none {
+          border-bottom-right-radius: 0 !important; // stylelint-disable-line property-disallowed-list
+          border-bottom-left-radius: 0 !important; // stylelint-disable-line property-disallowed-list
+        }
+
+        .rounded-bottom-short {
+          border-bottom-right-radius: 3px !important; // stylelint-disable-line property-disallowed-list
+          border-bottom-left-radius: 3px !important; // stylelint-disable-line property-disallowed-list
+        }
+
+        .rounded-bottom-medium {
+          border-bottom-right-radius: 6px !important; // stylelint-disable-line property-disallowed-list
+          border-bottom-left-radius: 6px !important; // stylelint-disable-line property-disallowed-list
+        }
+
+        .rounded-bottom-tall {
+          border-bottom-right-radius: 12px !important; // stylelint-disable-line property-disallowed-list
+          border-bottom-left-radius: 12px !important; // stylelint-disable-line property-disallowed-list
+        }
+
+        .rounded-bottom-pill {
+          border-bottom-right-radius: 125rem !important; // stylelint-disable-line property-disallowed-list
+          border-bottom-left-radius: 125rem !important; // stylelint-disable-line property-disallowed-list
+        }
+
+        .rounded-bottom-circle {
+          border-bottom-right-radius: 50% !important; // stylelint-disable-line property-disallowed-list
+          border-bottom-left-radius: 50% !important; // stylelint-disable-line property-disallowed-list
+        }
+
+        .rounded-start {
+          border-bottom-left-radius: 0 !important; // stylelint-disable-line property-disallowed-list
+          border-top-left-radius: 0 !important; // stylelint-disable-line property-disallowed-list, order/properties-order
+        }
+
+        .rounded-start-none {
+          border-bottom-left-radius: 0 !important; // stylelint-disable-line property-disallowed-list
+          border-top-left-radius: 0 !important; // stylelint-disable-line property-disallowed-list, order/properties-order
+        }
+
+        .rounded-start-short {
+          border-bottom-left-radius: 3px !important; // stylelint-disable-line property-disallowed-list
+          border-top-left-radius: 3px !important; // stylelint-disable-line property-disallowed-list, order/properties-order
+        }
+
+        .rounded-start-medium {
+          border-bottom-left-radius: 6px !important; // stylelint-disable-line property-disallowed-list
+          border-top-left-radius: 6px !important; // stylelint-disable-line property-disallowed-list, order/properties-order
+        }
+
+        .rounded-start-tall {
+          border-bottom-left-radius: 12px !important; // stylelint-disable-line property-disallowed-list
+          border-top-left-radius: 12px !important; // stylelint-disable-line property-disallowed-list, order/properties-order
+        }
+
+        .rounded-start-pill {
+          border-bottom-left-radius: 125rem !important; // stylelint-disable-line property-disallowed-list
+          border-top-left-radius: 125rem !important; // stylelint-disable-line property-disallowed-list, order/properties-order
+        }
+
+        .rounded-start-circle {
+          border-bottom-left-radius: 50% !important; // stylelint-disable-line property-disallowed-list
+          border-top-left-radius: 50% !important; // stylelint-disable-line property-disallowed-list, order/properties-order
+        }
+
+        .m-0 {
+          margin: 0 !important;
+        }
+
+        .m-1 {
+          margin: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+        }
+
+        .m-2 {
+          margin: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+        }
+
+        .m-3 {
+          margin: 1.5rem !important;
+        }
+
+        .m-4 {
+          margin: 2.5rem !important;
+        }
+
+        .m-5 {
+          margin: 3.5rem !important;
+        }
+
+        .mx-0 {
+          margin-right: 0 !important;
+          margin-left: 0 !important;
+        }
+
+        .mx-1 {
+          margin-right: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          margin-left: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+        }
+
+        .mx-2 {
+          margin-right: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          margin-left: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+        }
+
+        .mx-3 {
+          margin-right: 1.5rem !important;
+          margin-left: 1.5rem !important;
+        }
+
+        .mx-4 {
+          margin-right: 2.5rem !important;
+          margin-left: 2.5rem !important;
+        }
+
+        .mx-5 {
+          margin-right: 3.5rem !important;
+          margin-left: 3.5rem !important;
+        }
+
+        .my-0 {
+          margin-top: 0 !important;
+          margin-bottom: 0 !important;
+        }
+
+        .my-1 {
+          margin-top: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          margin-bottom: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+        }
+
+        .my-2 {
+          margin-top: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          margin-bottom: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+        }
+
+        .my-3 {
+          margin-top: 1.5rem !important;
+          margin-bottom: 1.5rem !important;
+        }
+
+        .my-4 {
+          margin-top: 2.5rem !important;
+          margin-bottom: 2.5rem !important;
+        }
+
+        .my-5 {
+          margin-top: 3.5rem !important;
+          margin-bottom: 3.5rem !important;
+        }
+
+        .mt-0 {
+          margin-top: 0 !important;
+        }
+
+        .mt-1 {
+          margin-top: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+        }
+
+        .mt-2 {
+          margin-top: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+        }
+
+        .mt-3 {
+          margin-top: 1.5rem !important;
+        }
+
+        .mt-4 {
+          margin-top: 2.5rem !important;
+        }
+
+        .mt-5 {
+          margin-top: 3.5rem !important;
+        }
+
+        .me-0 {
+          margin-right: 0 !important;
+        }
+
+        .me-1 {
+          margin-right: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+        }
+
+        .me-2 {
+          margin-right: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+        }
+
+        .me-3 {
+          margin-right: 1.5rem !important;
+        }
+
+        .me-4 {
+          margin-right: 2.5rem !important;
+        }
+
+        .me-5 {
+          margin-right: 3.5rem !important;
+        }
+
+        .mb-0 {
+          margin-bottom: 0 !important;
+        }
+
+        .mb-1 {
+          margin-bottom: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+        }
+
+        .mb-2 {
+          margin-bottom: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+        }
+
+        .mb-3 {
+          margin-bottom: 1.5rem !important;
+        }
+
+        .mb-4 {
+          margin-bottom: 2.5rem !important;
+        }
+
+        .mb-5 {
+          margin-bottom: 3.5rem !important;
+        }
+
+        .ms-0 {
+          margin-left: 0 !important;
+        }
+
+        .ms-1 {
+          margin-left: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+        }
+
+        .ms-2 {
+          margin-left: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+        }
+
+        .ms-3 {
+          margin-left: 1.5rem !important;
+        }
+
+        .ms-4 {
+          margin-left: 2.5rem !important;
+        }
+
+        .ms-5 {
+          margin-left: 3.5rem !important;
+        }
+
+        .p-0 {
+          padding: 0 !important;
+        }
+
+        .p-1 {
+          padding: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+        }
+
+        .p-2 {
+          padding: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+        }
+
+        .p-3 {
+          padding: 1.5rem !important;
+        }
+
+        .p-4 {
+          padding: 2.5rem !important;
+        }
+
+        .p-5 {
+          padding: 3.5rem !important;
+        }
+
+        .px-0 {
+          padding-right: 0 !important;
+          padding-left: 0 !important;
+        }
+
+        .px-1 {
+          padding-right: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          padding-left: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+        }
+
+        .px-2 {
+          padding-right: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          padding-left: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+        }
+
+        .px-3 {
+          padding-right: 1.5rem !important;
+          padding-left: 1.5rem !important;
+        }
+
+        .px-4 {
+          padding-right: 2.5rem !important;
+          padding-left: 2.5rem !important;
+        }
+
+        .px-5 {
+          padding-right: 3.5rem !important;
+          padding-left: 3.5rem !important;
+        }
+
+        .py-0 {
+          padding-top: 0 !important;
+          padding-bottom: 0 !important;
+        }
+
+        .py-1 {
+          padding-top: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          padding-bottom: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+        }
+
+        .py-2 {
+          padding-top: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          padding-bottom: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+        }
+
+        .py-3 {
+          padding-top: 1.5rem !important;
+          padding-bottom: 1.5rem !important;
+        }
+
+        .py-4 {
+          padding-top: 2.5rem !important;
+          padding-bottom: 2.5rem !important;
+        }
+
+        .py-5 {
+          padding-top: 3.5rem !important;
+          padding-bottom: 3.5rem !important;
+        }
+
+        .pt-0 {
+          padding-top: 0 !important;
+        }
+
+        .pt-1 {
+          padding-top: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+        }
+
+        .pt-2 {
+          padding-top: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+        }
+
+        .pt-3 {
+          padding-top: 1.5rem !important;
+        }
+
+        .pt-4 {
+          padding-top: 2.5rem !important;
+        }
+
+        .pt-5 {
+          padding-top: 3.5rem !important;
+        }
+
+        .pe-0 {
+          padding-right: 0 !important;
+        }
+
+        .pe-1 {
+          padding-right: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+        }
+
+        .pe-2 {
+          padding-right: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+        }
+
+        .pe-3 {
+          padding-right: 1.5rem !important;
+        }
+
+        .pe-4 {
+          padding-right: 2.5rem !important;
+        }
+
+        .pe-5 {
+          padding-right: 3.5rem !important;
+        }
+
+        .pb-0 {
+          padding-bottom: 0 !important;
+        }
+
+        .pb-1 {
+          padding-bottom: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+        }
+
+        .pb-2 {
+          padding-bottom: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+        }
+
+        .pb-3 {
+          padding-bottom: 1.5rem !important;
+        }
+
+        .pb-4 {
+          padding-bottom: 2.5rem !important;
+        }
+
+        .pb-5 {
+          padding-bottom: 3.5rem !important;
+        }
+
+        .ps-0 {
+          padding-left: 0 !important;
+        }
+
+        .ps-1 {
+          padding-left: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+        }
+
+        .ps-2 {
+          padding-left: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+        }
+
+        .ps-3 {
+          padding-left: 1.5rem !important;
+        }
+
+        .ps-4 {
+          padding-left: 2.5rem !important;
+        }
+
+        .ps-5 {
+          padding-left: 3.5rem !important;
+        }
+
+        .gap-0 {
+          gap: 0 !important;
+        }
+
+        .gap-1 {
+          gap: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+        }
+
+        .gap-2 {
+          gap: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+        }
+
+        .gap-3 {
+          gap: 1.5rem !important;
+        }
+
+        .gap-4 {
+          gap: 2.5rem !important;
+        }
+
+        .gap-5 {
+          gap: 3.5rem !important;
+        }
+
+        .row-gap-0 {
+          row-gap: 0 !important;
+        }
+
+        .row-gap-1 {
+          row-gap: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+        }
+
+        .row-gap-2 {
+          row-gap: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+        }
+
+        .row-gap-3 {
+          row-gap: 1.5rem !important;
+        }
+
+        .row-gap-4 {
+          row-gap: 2.5rem !important;
+        }
+
+        .row-gap-5 {
+          row-gap: 3.5rem !important;
+        }
+
+        .column-gap-0 {
+          column-gap: 0 !important;
+        }
+
+        .column-gap-1 {
+          column-gap: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+        }
+
+        .column-gap-2 {
+          column-gap: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+        }
+
+        .column-gap-3 {
+          column-gap: 1.5rem !important;
+        }
+
+        .column-gap-4 {
+          column-gap: 2.5rem !important;
+        }
+
+        .column-gap-5 {
+          column-gap: 3.5rem !important;
+        }
+
+        .m-none {
+          margin: 0 !important;
+        }
+
+        .m-smash {
+          margin: 2px !important;
+        }
+
+        .m-shortest {
+          margin: 4px !important;
+        }
+
+        .m-shorter {
+          margin: 8px !important;
+        }
+
+        .m-short {
+          margin: 12px !important;
+        }
+
+        .m-medium {
+          margin: 16px !important;
+        }
+
+        .m-tall {
+          margin: 24px !important;
+        }
+
+        .m-taller {
+          margin: 32px !important;
+        }
+
+        .m-tallest {
+          margin: 40px !important;
+        }
+
+        .m-spacious {
+          margin: 48px !important;
+        }
+
+        .m-huge {
+          margin: 56px !important;
+        }
+
+        .m-jumbo {
+          margin: 64px !important;
+        }
+
+        .m-auto {
+          margin: auto !important;
+        }
+
+        .m-scaled-none {
+          margin: var(--bs-space-scaled-none) !important;
+        }
+
+        .m-scaled-smash {
+          margin: var(--bs-space-scaled-smash) !important;
+        }
+
+        .m-scaled-shortest {
+          margin: var(--bs-space-scaled-shortest) !important;
+        }
+
+        .m-scaled-shorter {
+          margin: var(--bs-space-scaled-shorter) !important;
+        }
+
+        .m-scaled-short {
+          margin: var(--bs-space-scaled-short) !important;
+        }
+
+        .m-scaled-medium {
+          margin: var(--bs-space-scaled-medium) !important;
+        }
+
+        .m-scaled-tall {
+          margin: var(--bs-space-scaled-tall) !important;
+        }
+
+        .m-scaled-taller {
+          margin: var(--bs-space-scaled-taller) !important;
+        }
+
+        .m-scaled-tallest {
+          margin: var(--bs-space-scaled-tallest) !important;
+        }
+
+        .m-scaled-spacious {
+          margin: var(--bs-space-scaled-spacious) !important;
+        }
+
+        .mx-none {
+          margin-right: 0 !important;
+          margin-left: 0 !important;
+        }
+
+        .mx-smash {
+          margin-right: 2px !important;
+          margin-left: 2px !important;
+        }
+
+        .mx-shortest {
+          margin-right: 4px !important;
+          margin-left: 4px !important;
+        }
+
+        .mx-shorter {
+          margin-right: 8px !important;
+          margin-left: 8px !important;
+        }
+
+        .mx-short {
+          margin-right: 12px !important;
+          margin-left: 12px !important;
+        }
+
+        .mx-medium {
+          margin-right: 16px !important;
+          margin-left: 16px !important;
+        }
+
+        .mx-tall {
+          margin-right: 24px !important;
+          margin-left: 24px !important;
+        }
+
+        .mx-taller {
+          margin-right: 32px !important;
+          margin-left: 32px !important;
+        }
+
+        .mx-tallest {
+          margin-right: 40px !important;
+          margin-left: 40px !important;
+        }
+
+        .mx-spacious {
+          margin-right: 48px !important;
+          margin-left: 48px !important;
+        }
+
+        .mx-huge {
+          margin-right: 56px !important;
+          margin-left: 56px !important;
+        }
+
+        .mx-jumbo {
+          margin-right: 64px !important;
+          margin-left: 64px !important;
+        }
+
+        .mx-auto {
+          margin-right: auto !important;
+          margin-left: auto !important;
+        }
+
+        .mx-scaled-none {
+          margin-right: var(--bs-space-scaled-none) !important;
+          margin-left: var(--bs-space-scaled-none) !important;
+        }
+
+        .mx-scaled-smash {
+          margin-right: var(--bs-space-scaled-smash) !important;
+          margin-left: var(--bs-space-scaled-smash) !important;
+        }
+
+        .mx-scaled-shortest {
+          margin-right: var(--bs-space-scaled-shortest) !important;
+          margin-left: var(--bs-space-scaled-shortest) !important;
+        }
+
+        .mx-scaled-shorter {
+          margin-right: var(--bs-space-scaled-shorter) !important;
+          margin-left: var(--bs-space-scaled-shorter) !important;
+        }
+
+        .mx-scaled-short {
+          margin-right: var(--bs-space-scaled-short) !important;
+          margin-left: var(--bs-space-scaled-short) !important;
+        }
+
+        .mx-scaled-medium {
+          margin-right: var(--bs-space-scaled-medium) !important;
+          margin-left: var(--bs-space-scaled-medium) !important;
+        }
+
+        .mx-scaled-tall {
+          margin-right: var(--bs-space-scaled-tall) !important;
+          margin-left: var(--bs-space-scaled-tall) !important;
+        }
+
+        .mx-scaled-taller {
+          margin-right: var(--bs-space-scaled-taller) !important;
+          margin-left: var(--bs-space-scaled-taller) !important;
+        }
+
+        .mx-scaled-tallest {
+          margin-right: var(--bs-space-scaled-tallest) !important;
+          margin-left: var(--bs-space-scaled-tallest) !important;
+        }
+
+        .mx-scaled-spacious {
+          margin-right: var(--bs-space-scaled-spacious) !important;
+          margin-left: var(--bs-space-scaled-spacious) !important;
+        }
+
+        .my-none {
+          margin-top: 0 !important;
+          margin-bottom: 0 !important;
+        }
+
+        .my-smash {
+          margin-top: 2px !important;
+          margin-bottom: 2px !important;
+        }
+
+        .my-shortest {
+          margin-top: 4px !important;
+          margin-bottom: 4px !important;
+        }
+
+        .my-shorter {
+          margin-top: 8px !important;
+          margin-bottom: 8px !important;
+        }
+
+        .my-short {
+          margin-top: 12px !important;
+          margin-bottom: 12px !important;
+        }
+
+        .my-medium {
+          margin-top: 16px !important;
+          margin-bottom: 16px !important;
+        }
+
+        .my-tall {
+          margin-top: 24px !important;
+          margin-bottom: 24px !important;
+        }
+
+        .my-taller {
+          margin-top: 32px !important;
+          margin-bottom: 32px !important;
+        }
+
+        .my-tallest {
+          margin-top: 40px !important;
+          margin-bottom: 40px !important;
+        }
+
+        .my-spacious {
+          margin-top: 48px !important;
+          margin-bottom: 48px !important;
+        }
+
+        .my-huge {
+          margin-top: 56px !important;
+          margin-bottom: 56px !important;
+        }
+
+        .my-jumbo {
+          margin-top: 64px !important;
+          margin-bottom: 64px !important;
+        }
+
+        .my-auto {
+          margin-top: auto !important;
+          margin-bottom: auto !important;
+        }
+
+        .my-scaled-none {
+          margin-top: var(--bs-space-scaled-none) !important;
+          margin-bottom: var(--bs-space-scaled-none) !important;
+        }
+
+        .my-scaled-smash {
+          margin-top: var(--bs-space-scaled-smash) !important;
+          margin-bottom: var(--bs-space-scaled-smash) !important;
+        }
+
+        .my-scaled-shortest {
+          margin-top: var(--bs-space-scaled-shortest) !important;
+          margin-bottom: var(--bs-space-scaled-shortest) !important;
+        }
+
+        .my-scaled-shorter {
+          margin-top: var(--bs-space-scaled-shorter) !important;
+          margin-bottom: var(--bs-space-scaled-shorter) !important;
+        }
+
+        .my-scaled-short {
+          margin-top: var(--bs-space-scaled-short) !important;
+          margin-bottom: var(--bs-space-scaled-short) !important;
+        }
+
+        .my-scaled-medium {
+          margin-top: var(--bs-space-scaled-medium) !important;
+          margin-bottom: var(--bs-space-scaled-medium) !important;
+        }
+
+        .my-scaled-tall {
+          margin-top: var(--bs-space-scaled-tall) !important;
+          margin-bottom: var(--bs-space-scaled-tall) !important;
+        }
+
+        .my-scaled-taller {
+          margin-top: var(--bs-space-scaled-taller) !important;
+          margin-bottom: var(--bs-space-scaled-taller) !important;
+        }
+
+        .my-scaled-tallest {
+          margin-top: var(--bs-space-scaled-tallest) !important;
+          margin-bottom: var(--bs-space-scaled-tallest) !important;
+        }
+
+        .my-scaled-spacious {
+          margin-top: var(--bs-space-scaled-spacious) !important;
+          margin-bottom: var(--bs-space-scaled-spacious) !important;
+        }
+
+        .mt-none {
+          margin-top: 0 !important;
+        }
+
+        .mt-smash {
+          margin-top: 2px !important;
+        }
+
+        .mt-shortest {
+          margin-top: 4px !important;
+        }
+
+        .mt-shorter {
+          margin-top: 8px !important;
+        }
+
+        .mt-short {
+          margin-top: 12px !important;
+        }
+
+        .mt-medium {
+          margin-top: 16px !important;
+        }
+
+        .mt-tall {
+          margin-top: 24px !important;
+        }
+
+        .mt-taller {
+          margin-top: 32px !important;
+        }
+
+        .mt-tallest {
+          margin-top: 40px !important;
+        }
+
+        .mt-spacious {
+          margin-top: 48px !important;
+        }
+
+        .mt-huge {
+          margin-top: 56px !important;
+        }
+
+        .mt-jumbo {
+          margin-top: 64px !important;
+        }
+
+        .mt-auto {
+          margin-top: auto !important;
+        }
+
+        .mt-scaled-none {
+          margin-top: var(--bs-space-scaled-none) !important;
+        }
+
+        .mt-scaled-smash {
+          margin-top: var(--bs-space-scaled-smash) !important;
+        }
+
+        .mt-scaled-shortest {
+          margin-top: var(--bs-space-scaled-shortest) !important;
+        }
+
+        .mt-scaled-shorter {
+          margin-top: var(--bs-space-scaled-shorter) !important;
+        }
+
+        .mt-scaled-short {
+          margin-top: var(--bs-space-scaled-short) !important;
+        }
+
+        .mt-scaled-medium {
+          margin-top: var(--bs-space-scaled-medium) !important;
+        }
+
+        .mt-scaled-tall {
+          margin-top: var(--bs-space-scaled-tall) !important;
+        }
+
+        .mt-scaled-taller {
+          margin-top: var(--bs-space-scaled-taller) !important;
+        }
+
+        .mt-scaled-tallest {
+          margin-top: var(--bs-space-scaled-tallest) !important;
+        }
+
+        .mt-scaled-spacious {
+          margin-top: var(--bs-space-scaled-spacious) !important;
+        }
+
+        .me-none {
+          margin-right: 0 !important;
+        }
+
+        .me-smash {
+          margin-right: 2px !important;
+        }
+
+        .me-shortest {
+          margin-right: 4px !important;
+        }
+
+        .me-shorter {
+          margin-right: 8px !important;
+        }
+
+        .me-short {
+          margin-right: 12px !important;
+        }
+
+        .me-medium {
+          margin-right: 16px !important;
+        }
+
+        .me-tall {
+          margin-right: 24px !important;
+        }
+
+        .me-taller {
+          margin-right: 32px !important;
+        }
+
+        .me-tallest {
+          margin-right: 40px !important;
+        }
+
+        .me-spacious {
+          margin-right: 48px !important;
+        }
+
+        .me-huge {
+          margin-right: 56px !important;
+        }
+
+        .me-jumbo {
+          margin-right: 64px !important;
+        }
+
+        .me-auto {
+          margin-right: auto !important;
+        }
+
+        .me-scaled-none {
+          margin-right: var(--bs-space-scaled-none) !important;
+        }
+
+        .me-scaled-smash {
+          margin-right: var(--bs-space-scaled-smash) !important;
+        }
+
+        .me-scaled-shortest {
+          margin-right: var(--bs-space-scaled-shortest) !important;
+        }
+
+        .me-scaled-shorter {
+          margin-right: var(--bs-space-scaled-shorter) !important;
+        }
+
+        .me-scaled-short {
+          margin-right: var(--bs-space-scaled-short) !important;
+        }
+
+        .me-scaled-medium {
+          margin-right: var(--bs-space-scaled-medium) !important;
+        }
+
+        .me-scaled-tall {
+          margin-right: var(--bs-space-scaled-tall) !important;
+        }
+
+        .me-scaled-taller {
+          margin-right: var(--bs-space-scaled-taller) !important;
+        }
+
+        .me-scaled-tallest {
+          margin-right: var(--bs-space-scaled-tallest) !important;
+        }
+
+        .me-scaled-spacious {
+          margin-right: var(--bs-space-scaled-spacious) !important;
+        }
+
+        .mb-none {
+          margin-bottom: 0 !important;
+        }
+
+        .mb-smash {
+          margin-bottom: 2px !important;
+        }
+
+        .mb-shortest {
+          margin-bottom: 4px !important;
+        }
+
+        .mb-shorter {
+          margin-bottom: 8px !important;
+        }
+
+        .mb-short {
+          margin-bottom: 12px !important;
+        }
+
+        .mb-medium {
+          margin-bottom: 16px !important;
+        }
+
+        .mb-tall {
+          margin-bottom: 24px !important;
+        }
+
+        .mb-taller {
+          margin-bottom: 32px !important;
+        }
+
+        .mb-tallest {
+          margin-bottom: 40px !important;
+        }
+
+        .mb-spacious {
+          margin-bottom: 48px !important;
+        }
+
+        .mb-huge {
+          margin-bottom: 56px !important;
+        }
+
+        .mb-jumbo {
+          margin-bottom: 64px !important;
+        }
+
+        .mb-auto {
+          margin-bottom: auto !important;
+        }
+
+        .mb-scaled-none {
+          margin-bottom: var(--bs-space-scaled-none) !important;
+        }
+
+        .mb-scaled-smash {
+          margin-bottom: var(--bs-space-scaled-smash) !important;
+        }
+
+        .mb-scaled-shortest {
+          margin-bottom: var(--bs-space-scaled-shortest) !important;
+        }
+
+        .mb-scaled-shorter {
+          margin-bottom: var(--bs-space-scaled-shorter) !important;
+        }
+
+        .mb-scaled-short {
+          margin-bottom: var(--bs-space-scaled-short) !important;
+        }
+
+        .mb-scaled-medium {
+          margin-bottom: var(--bs-space-scaled-medium) !important;
+        }
+
+        .mb-scaled-tall {
+          margin-bottom: var(--bs-space-scaled-tall) !important;
+        }
+
+        .mb-scaled-taller {
+          margin-bottom: var(--bs-space-scaled-taller) !important;
+        }
+
+        .mb-scaled-tallest {
+          margin-bottom: var(--bs-space-scaled-tallest) !important;
+        }
+
+        .mb-scaled-spacious {
+          margin-bottom: var(--bs-space-scaled-spacious) !important;
+        }
+
+        .ms-none {
+          margin-left: 0 !important;
+        }
+
+        .ms-smash {
+          margin-left: 2px !important;
+        }
+
+        .ms-shortest {
+          margin-left: 4px !important;
+        }
+
+        .ms-shorter {
+          margin-left: 8px !important;
+        }
+
+        .ms-short {
+          margin-left: 12px !important;
+        }
+
+        .ms-medium {
+          margin-left: 16px !important;
+        }
+
+        .ms-tall {
+          margin-left: 24px !important;
+        }
+
+        .ms-taller {
+          margin-left: 32px !important;
+        }
+
+        .ms-tallest {
+          margin-left: 40px !important;
+        }
+
+        .ms-spacious {
+          margin-left: 48px !important;
+        }
+
+        .ms-huge {
+          margin-left: 56px !important;
+        }
+
+        .ms-jumbo {
+          margin-left: 64px !important;
+        }
+
+        .ms-auto {
+          margin-left: auto !important;
+        }
+
+        .ms-scaled-none {
+          margin-left: var(--bs-space-scaled-none) !important;
+        }
+
+        .ms-scaled-smash {
+          margin-left: var(--bs-space-scaled-smash) !important;
+        }
+
+        .ms-scaled-shortest {
+          margin-left: var(--bs-space-scaled-shortest) !important;
+        }
+
+        .ms-scaled-shorter {
+          margin-left: var(--bs-space-scaled-shorter) !important;
+        }
+
+        .ms-scaled-short {
+          margin-left: var(--bs-space-scaled-short) !important;
+        }
+
+        .ms-scaled-medium {
+          margin-left: var(--bs-space-scaled-medium) !important;
+        }
+
+        .ms-scaled-tall {
+          margin-left: var(--bs-space-scaled-tall) !important;
+        }
+
+        .ms-scaled-taller {
+          margin-left: var(--bs-space-scaled-taller) !important;
+        }
+
+        .ms-scaled-tallest {
+          margin-left: var(--bs-space-scaled-tallest) !important;
+        }
+
+        .ms-scaled-spacious {
+          margin-left: var(--bs-space-scaled-spacious) !important;
+        }
+
+        .m-scaled-nsmash {
+          margin: calc(-1 * var(--bs-space-scaled-smash)) !important; // stylelint-disable-line function-disallowed-list
+        }
+
+        .m-scaled-nshortest {
+          margin: calc(-1 * var(--bs-space-scaled-shortest)) !important; // stylelint-disable-line function-disallowed-list
+        }
+
+        .m-scaled-nshorter {
+          margin: calc(-1 * var(--bs-space-scaled-shorter)) !important; // stylelint-disable-line function-disallowed-list
+        }
+
+        .m-scaled-nshort {
+          margin: calc(-1 * var(--bs-space-scaled-short)) !important; // stylelint-disable-line function-disallowed-list
+        }
+
+        .m-scaled-nmedium {
+          margin: calc(-1 * var(--bs-space-scaled-medium)) !important; // stylelint-disable-line function-disallowed-list
+        }
+
+        .m-scaled-ntall {
+          margin: calc(-1 * var(--bs-space-scaled-tall)) !important; // stylelint-disable-line function-disallowed-list
+        }
+
+        .m-scaled-ntaller {
+          margin: calc(-1 * var(--bs-space-scaled-taller)) !important; // stylelint-disable-line function-disallowed-list
+        }
+
+        .m-scaled-ntallest {
+          margin: calc(-1 * var(--bs-space-scaled-tallest)) !important; // stylelint-disable-line function-disallowed-list
+        }
+
+        .m-scaled-nspacious {
+          margin: calc(-1 * var(--bs-space-scaled-spacious)) !important; // stylelint-disable-line function-disallowed-list
+        }
+
+        .mx-scaled-nsmash {
+          margin-right: calc(-1 * var(--bs-space-scaled-smash)) !important; // stylelint-disable-line function-disallowed-list
+          margin-left: calc(-1 * var(--bs-space-scaled-smash)) !important; // stylelint-disable-line function-disallowed-list
+        }
+
+        .mx-scaled-nshortest {
+          margin-right: calc(-1 * var(--bs-space-scaled-shortest)) !important; // stylelint-disable-line function-disallowed-list
+          margin-left: calc(-1 * var(--bs-space-scaled-shortest)) !important; // stylelint-disable-line function-disallowed-list
+        }
+
+        .mx-scaled-nshorter {
+          margin-right: calc(-1 * var(--bs-space-scaled-shorter)) !important; // stylelint-disable-line function-disallowed-list
+          margin-left: calc(-1 * var(--bs-space-scaled-shorter)) !important; // stylelint-disable-line function-disallowed-list
+        }
+
+        .mx-scaled-nshort {
+          margin-right: calc(-1 * var(--bs-space-scaled-short)) !important; // stylelint-disable-line function-disallowed-list
+          margin-left: calc(-1 * var(--bs-space-scaled-short)) !important; // stylelint-disable-line function-disallowed-list
+        }
+
+        .mx-scaled-nmedium {
+          margin-right: calc(-1 * var(--bs-space-scaled-medium)) !important; // stylelint-disable-line function-disallowed-list
+          margin-left: calc(-1 * var(--bs-space-scaled-medium)) !important; // stylelint-disable-line function-disallowed-list
+        }
+
+        .mx-scaled-ntall {
+          margin-right: calc(-1 * var(--bs-space-scaled-tall)) !important; // stylelint-disable-line function-disallowed-list
+          margin-left: calc(-1 * var(--bs-space-scaled-tall)) !important; // stylelint-disable-line function-disallowed-list
+        }
+
+        .mx-scaled-ntaller {
+          margin-right: calc(-1 * var(--bs-space-scaled-taller)) !important; // stylelint-disable-line function-disallowed-list
+          margin-left: calc(-1 * var(--bs-space-scaled-taller)) !important; // stylelint-disable-line function-disallowed-list
+        }
+
+        .mx-scaled-ntallest {
+          margin-right: calc(-1 * var(--bs-space-scaled-tallest)) !important; // stylelint-disable-line function-disallowed-list
+          margin-left: calc(-1 * var(--bs-space-scaled-tallest)) !important; // stylelint-disable-line function-disallowed-list
+        }
+
+        .mx-scaled-nspacious {
+          margin-right: calc(-1 * var(--bs-space-scaled-spacious)) !important; // stylelint-disable-line function-disallowed-list
+          margin-left: calc(-1 * var(--bs-space-scaled-spacious)) !important; // stylelint-disable-line function-disallowed-list
+        }
+
+        .my-scaled-nsmash {
+          margin-top: calc(-1 * var(--bs-space-scaled-smash)) !important; // stylelint-disable-line function-disallowed-list
+          margin-bottom: calc(-1 * var(--bs-space-scaled-smash)) !important; // stylelint-disable-line function-disallowed-list
+        }
+
+        .my-scaled-nshortest {
+          margin-top: calc(-1 * var(--bs-space-scaled-shortest)) !important; // stylelint-disable-line function-disallowed-list
+          margin-bottom: calc(-1 * var(--bs-space-scaled-shortest)) !important; // stylelint-disable-line function-disallowed-list
+        }
+
+        .my-scaled-nshorter {
+          margin-top: calc(-1 * var(--bs-space-scaled-shorter)) !important; // stylelint-disable-line function-disallowed-list
+          margin-bottom: calc(-1 * var(--bs-space-scaled-shorter)) !important; // stylelint-disable-line function-disallowed-list
+        }
+
+        .my-scaled-nshort {
+          margin-top: calc(-1 * var(--bs-space-scaled-short)) !important; // stylelint-disable-line function-disallowed-list
+          margin-bottom: calc(-1 * var(--bs-space-scaled-short)) !important; // stylelint-disable-line function-disallowed-list
+        }
+
+        .my-scaled-nmedium {
+          margin-top: calc(-1 * var(--bs-space-scaled-medium)) !important; // stylelint-disable-line function-disallowed-list
+          margin-bottom: calc(-1 * var(--bs-space-scaled-medium)) !important; // stylelint-disable-line function-disallowed-list
+        }
+
+        .my-scaled-ntall {
+          margin-top: calc(-1 * var(--bs-space-scaled-tall)) !important; // stylelint-disable-line function-disallowed-list
+          margin-bottom: calc(-1 * var(--bs-space-scaled-tall)) !important; // stylelint-disable-line function-disallowed-list
+        }
+
+        .my-scaled-ntaller {
+          margin-top: calc(-1 * var(--bs-space-scaled-taller)) !important; // stylelint-disable-line function-disallowed-list
+          margin-bottom: calc(-1 * var(--bs-space-scaled-taller)) !important; // stylelint-disable-line function-disallowed-list
+        }
+
+        .my-scaled-ntallest {
+          margin-top: calc(-1 * var(--bs-space-scaled-tallest)) !important; // stylelint-disable-line function-disallowed-list
+          margin-bottom: calc(-1 * var(--bs-space-scaled-tallest)) !important; // stylelint-disable-line function-disallowed-list
+        }
+
+        .my-scaled-nspacious {
+          margin-top: calc(-1 * var(--bs-space-scaled-spacious)) !important; // stylelint-disable-line function-disallowed-list
+          margin-bottom: calc(-1 * var(--bs-space-scaled-spacious)) !important; // stylelint-disable-line function-disallowed-list
+        }
+
+        .mt-scaled-nsmash {
+          margin-top: calc(-1 * var(--bs-space-scaled-smash)) !important; // stylelint-disable-line function-disallowed-list
+        }
+
+        .mt-scaled-nshortest {
+          margin-top: calc(-1 * var(--bs-space-scaled-shortest)) !important; // stylelint-disable-line function-disallowed-list
+        }
+
+        .mt-scaled-nshorter {
+          margin-top: calc(-1 * var(--bs-space-scaled-shorter)) !important; // stylelint-disable-line function-disallowed-list
+        }
+
+        .mt-scaled-nshort {
+          margin-top: calc(-1 * var(--bs-space-scaled-short)) !important; // stylelint-disable-line function-disallowed-list
+        }
+
+        .mt-scaled-nmedium {
+          margin-top: calc(-1 * var(--bs-space-scaled-medium)) !important; // stylelint-disable-line function-disallowed-list
+        }
+
+        .mt-scaled-ntall {
+          margin-top: calc(-1 * var(--bs-space-scaled-tall)) !important; // stylelint-disable-line function-disallowed-list
+        }
+
+        .mt-scaled-ntaller {
+          margin-top: calc(-1 * var(--bs-space-scaled-taller)) !important; // stylelint-disable-line function-disallowed-list
+        }
+
+        .mt-scaled-ntallest {
+          margin-top: calc(-1 * var(--bs-space-scaled-tallest)) !important; // stylelint-disable-line function-disallowed-list
+        }
+
+        .mt-scaled-nspacious {
+          margin-top: calc(-1 * var(--bs-space-scaled-spacious)) !important; // stylelint-disable-line function-disallowed-list
+        }
+
+        .me-scaled-nsmash {
+          margin-right: calc(-1 * var(--bs-space-scaled-smash)) !important; // stylelint-disable-line function-disallowed-list
+        }
+
+        .me-scaled-nshortest {
+          margin-right: calc(-1 * var(--bs-space-scaled-shortest)) !important; // stylelint-disable-line function-disallowed-list
+        }
+
+        .me-scaled-nshorter {
+          margin-right: calc(-1 * var(--bs-space-scaled-shorter)) !important; // stylelint-disable-line function-disallowed-list
+        }
+
+        .me-scaled-nshort {
+          margin-right: calc(-1 * var(--bs-space-scaled-short)) !important; // stylelint-disable-line function-disallowed-list
+        }
+
+        .me-scaled-nmedium {
+          margin-right: calc(-1 * var(--bs-space-scaled-medium)) !important; // stylelint-disable-line function-disallowed-list
+        }
+
+        .me-scaled-ntall {
+          margin-right: calc(-1 * var(--bs-space-scaled-tall)) !important; // stylelint-disable-line function-disallowed-list
+        }
+
+        .me-scaled-ntaller {
+          margin-right: calc(-1 * var(--bs-space-scaled-taller)) !important; // stylelint-disable-line function-disallowed-list
+        }
+
+        .me-scaled-ntallest {
+          margin-right: calc(-1 * var(--bs-space-scaled-tallest)) !important; // stylelint-disable-line function-disallowed-list
+        }
+
+        .me-scaled-nspacious {
+          margin-right: calc(-1 * var(--bs-space-scaled-spacious)) !important; // stylelint-disable-line function-disallowed-list
+        }
+
+        .mb-scaled-nsmash {
+          margin-bottom: calc(-1 * var(--bs-space-scaled-smash)) !important; // stylelint-disable-line function-disallowed-list
+        }
+
+        .mb-scaled-nshortest {
+          margin-bottom: calc(-1 * var(--bs-space-scaled-shortest)) !important; // stylelint-disable-line function-disallowed-list
+        }
+
+        .mb-scaled-nshorter {
+          margin-bottom: calc(-1 * var(--bs-space-scaled-shorter)) !important; // stylelint-disable-line function-disallowed-list
+        }
+
+        .mb-scaled-nshort {
+          margin-bottom: calc(-1 * var(--bs-space-scaled-short)) !important; // stylelint-disable-line function-disallowed-list
+        }
+
+        .mb-scaled-nmedium {
+          margin-bottom: calc(-1 * var(--bs-space-scaled-medium)) !important; // stylelint-disable-line function-disallowed-list
+        }
+
+        .mb-scaled-ntall {
+          margin-bottom: calc(-1 * var(--bs-space-scaled-tall)) !important; // stylelint-disable-line function-disallowed-list
+        }
+
+        .mb-scaled-ntaller {
+          margin-bottom: calc(-1 * var(--bs-space-scaled-taller)) !important; // stylelint-disable-line function-disallowed-list
+        }
+
+        .mb-scaled-ntallest {
+          margin-bottom: calc(-1 * var(--bs-space-scaled-tallest)) !important; // stylelint-disable-line function-disallowed-list
+        }
+
+        .mb-scaled-nspacious {
+          margin-bottom: calc(-1 * var(--bs-space-scaled-spacious)) !important; // stylelint-disable-line function-disallowed-list
+        }
+
+        .ms-scaled-nsmash {
+          margin-left: calc(-1 * var(--bs-space-scaled-smash)) !important; // stylelint-disable-line function-disallowed-list
+        }
+
+        .ms-scaled-nshortest {
+          margin-left: calc(-1 * var(--bs-space-scaled-shortest)) !important; // stylelint-disable-line function-disallowed-list
+        }
+
+        .ms-scaled-nshorter {
+          margin-left: calc(-1 * var(--bs-space-scaled-shorter)) !important; // stylelint-disable-line function-disallowed-list
+        }
+
+        .ms-scaled-nshort {
+          margin-left: calc(-1 * var(--bs-space-scaled-short)) !important; // stylelint-disable-line function-disallowed-list
+        }
+
+        .ms-scaled-nmedium {
+          margin-left: calc(-1 * var(--bs-space-scaled-medium)) !important; // stylelint-disable-line function-disallowed-list
+        }
+
+        .ms-scaled-ntall {
+          margin-left: calc(-1 * var(--bs-space-scaled-tall)) !important; // stylelint-disable-line function-disallowed-list
+        }
+
+        .ms-scaled-ntaller {
+          margin-left: calc(-1 * var(--bs-space-scaled-taller)) !important; // stylelint-disable-line function-disallowed-list
+        }
+
+        .ms-scaled-ntallest {
+          margin-left: calc(-1 * var(--bs-space-scaled-tallest)) !important; // stylelint-disable-line function-disallowed-list
+        }
+
+        .ms-scaled-nspacious {
+          margin-left: calc(-1 * var(--bs-space-scaled-spacious)) !important; // stylelint-disable-line function-disallowed-list
+        }
+
+        .p-none {
+          padding: 0 !important;
+        }
+
+        .p-smash {
+          padding: 2px !important;
+        }
+
+        .p-shortest {
+          padding: 4px !important;
+        }
+
+        .p-shorter {
+          padding: 8px !important;
+        }
+
+        .p-short {
+          padding: 12px !important;
+        }
+
+        .p-medium {
+          padding: 16px !important;
+        }
+
+        .p-tall {
+          padding: 24px !important;
+        }
+
+        .p-taller {
+          padding: 32px !important;
+        }
+
+        .p-tallest {
+          padding: 40px !important;
+        }
+
+        .p-spacious {
+          padding: 48px !important;
+        }
+
+        .p-huge {
+          padding: 56px !important;
+        }
+
+        .p-jumbo {
+          padding: 64px !important;
+        }
+
+        .p-scaled-none {
+          padding: var(--bs-space-scaled-none) !important;
+        }
+
+        .p-scaled-smash {
+          padding: var(--bs-space-scaled-smash) !important;
+        }
+
+        .p-scaled-shortest {
+          padding: var(--bs-space-scaled-shortest) !important;
+        }
+
+        .p-scaled-shorter {
+          padding: var(--bs-space-scaled-shorter) !important;
+        }
+
+        .p-scaled-short {
+          padding: var(--bs-space-scaled-short) !important;
+        }
+
+        .p-scaled-medium {
+          padding: var(--bs-space-scaled-medium) !important;
+        }
+
+        .p-scaled-tall {
+          padding: var(--bs-space-scaled-tall) !important;
+        }
+
+        .p-scaled-taller {
+          padding: var(--bs-space-scaled-taller) !important;
+        }
+
+        .p-scaled-tallest {
+          padding: var(--bs-space-scaled-tallest) !important;
+        }
+
+        .p-scaled-spacious {
+          padding: var(--bs-space-scaled-spacious) !important;
+        }
+
+        .px-none {
+          padding-right: 0 !important;
+          padding-left: 0 !important;
+        }
+
+        .px-smash {
+          padding-right: 2px !important;
+          padding-left: 2px !important;
+        }
+
+        .px-shortest {
+          padding-right: 4px !important;
+          padding-left: 4px !important;
+        }
+
+        .px-shorter {
+          padding-right: 8px !important;
+          padding-left: 8px !important;
+        }
+
+        .px-short {
+          padding-right: 12px !important;
+          padding-left: 12px !important;
+        }
+
+        .px-medium {
+          padding-right: 16px !important;
+          padding-left: 16px !important;
+        }
+
+        .px-tall {
+          padding-right: 24px !important;
+          padding-left: 24px !important;
+        }
+
+        .px-taller {
+          padding-right: 32px !important;
+          padding-left: 32px !important;
+        }
+
+        .px-tallest {
+          padding-right: 40px !important;
+          padding-left: 40px !important;
+        }
+
+        .px-spacious {
+          padding-right: 48px !important;
+          padding-left: 48px !important;
+        }
+
+        .px-huge {
+          padding-right: 56px !important;
+          padding-left: 56px !important;
+        }
+
+        .px-jumbo {
+          padding-right: 64px !important;
+          padding-left: 64px !important;
+        }
+
+        .px-scaled-none {
+          padding-right: var(--bs-space-scaled-none) !important;
+          padding-left: var(--bs-space-scaled-none) !important;
+        }
+
+        .px-scaled-smash {
+          padding-right: var(--bs-space-scaled-smash) !important;
+          padding-left: var(--bs-space-scaled-smash) !important;
+        }
+
+        .px-scaled-shortest {
+          padding-right: var(--bs-space-scaled-shortest) !important;
+          padding-left: var(--bs-space-scaled-shortest) !important;
+        }
+
+        .px-scaled-shorter {
+          padding-right: var(--bs-space-scaled-shorter) !important;
+          padding-left: var(--bs-space-scaled-shorter) !important;
+        }
+
+        .px-scaled-short {
+          padding-right: var(--bs-space-scaled-short) !important;
+          padding-left: var(--bs-space-scaled-short) !important;
+        }
+
+        .px-scaled-medium {
+          padding-right: var(--bs-space-scaled-medium) !important;
+          padding-left: var(--bs-space-scaled-medium) !important;
+        }
+
+        .px-scaled-tall {
+          padding-right: var(--bs-space-scaled-tall) !important;
+          padding-left: var(--bs-space-scaled-tall) !important;
+        }
+
+        .px-scaled-taller {
+          padding-right: var(--bs-space-scaled-taller) !important;
+          padding-left: var(--bs-space-scaled-taller) !important;
+        }
+
+        .px-scaled-tallest {
+          padding-right: var(--bs-space-scaled-tallest) !important;
+          padding-left: var(--bs-space-scaled-tallest) !important;
+        }
+
+        .px-scaled-spacious {
+          padding-right: var(--bs-space-scaled-spacious) !important;
+          padding-left: var(--bs-space-scaled-spacious) !important;
+        }
+
+        .py-none {
+          padding-top: 0 !important;
+          padding-bottom: 0 !important;
+        }
+
+        .py-smash {
+          padding-top: 2px !important;
+          padding-bottom: 2px !important;
+        }
+
+        .py-shortest {
+          padding-top: 4px !important;
+          padding-bottom: 4px !important;
+        }
+
+        .py-shorter {
+          padding-top: 8px !important;
+          padding-bottom: 8px !important;
+        }
+
+        .py-short {
+          padding-top: 12px !important;
+          padding-bottom: 12px !important;
+        }
+
+        .py-medium {
+          padding-top: 16px !important;
+          padding-bottom: 16px !important;
+        }
+
+        .py-tall {
+          padding-top: 24px !important;
+          padding-bottom: 24px !important;
+        }
+
+        .py-taller {
+          padding-top: 32px !important;
+          padding-bottom: 32px !important;
+        }
+
+        .py-tallest {
+          padding-top: 40px !important;
+          padding-bottom: 40px !important;
+        }
+
+        .py-spacious {
+          padding-top: 48px !important;
+          padding-bottom: 48px !important;
+        }
+
+        .py-huge {
+          padding-top: 56px !important;
+          padding-bottom: 56px !important;
+        }
+
+        .py-jumbo {
+          padding-top: 64px !important;
+          padding-bottom: 64px !important;
+        }
+
+        .py-scaled-none {
+          padding-top: var(--bs-space-scaled-none) !important;
+          padding-bottom: var(--bs-space-scaled-none) !important;
+        }
+
+        .py-scaled-smash {
+          padding-top: var(--bs-space-scaled-smash) !important;
+          padding-bottom: var(--bs-space-scaled-smash) !important;
+        }
+
+        .py-scaled-shortest {
+          padding-top: var(--bs-space-scaled-shortest) !important;
+          padding-bottom: var(--bs-space-scaled-shortest) !important;
+        }
+
+        .py-scaled-shorter {
+          padding-top: var(--bs-space-scaled-shorter) !important;
+          padding-bottom: var(--bs-space-scaled-shorter) !important;
+        }
+
+        .py-scaled-short {
+          padding-top: var(--bs-space-scaled-short) !important;
+          padding-bottom: var(--bs-space-scaled-short) !important;
+        }
+
+        .py-scaled-medium {
+          padding-top: var(--bs-space-scaled-medium) !important;
+          padding-bottom: var(--bs-space-scaled-medium) !important;
+        }
+
+        .py-scaled-tall {
+          padding-top: var(--bs-space-scaled-tall) !important;
+          padding-bottom: var(--bs-space-scaled-tall) !important;
+        }
+
+        .py-scaled-taller {
+          padding-top: var(--bs-space-scaled-taller) !important;
+          padding-bottom: var(--bs-space-scaled-taller) !important;
+        }
+
+        .py-scaled-tallest {
+          padding-top: var(--bs-space-scaled-tallest) !important;
+          padding-bottom: var(--bs-space-scaled-tallest) !important;
+        }
+
+        .py-scaled-spacious {
+          padding-top: var(--bs-space-scaled-spacious) !important;
+          padding-bottom: var(--bs-space-scaled-spacious) !important;
+        }
+
+        .pt-none {
+          padding-top: 0 !important;
+        }
+
+        .pt-smash {
+          padding-top: 2px !important;
+        }
+
+        .pt-shortest {
+          padding-top: 4px !important;
+        }
+
+        .pt-shorter {
+          padding-top: 8px !important;
+        }
+
+        .pt-short {
+          padding-top: 12px !important;
+        }
+
+        .pt-medium {
+          padding-top: 16px !important;
+        }
+
+        .pt-tall {
+          padding-top: 24px !important;
+        }
+
+        .pt-taller {
+          padding-top: 32px !important;
+        }
+
+        .pt-tallest {
+          padding-top: 40px !important;
+        }
+
+        .pt-spacious {
+          padding-top: 48px !important;
+        }
+
+        .pt-huge {
+          padding-top: 56px !important;
+        }
+
+        .pt-jumbo {
+          padding-top: 64px !important;
+        }
+
+        .pt-scaled-none {
+          padding-top: var(--bs-space-scaled-none) !important;
+        }
+
+        .pt-scaled-smash {
+          padding-top: var(--bs-space-scaled-smash) !important;
+        }
+
+        .pt-scaled-shortest {
+          padding-top: var(--bs-space-scaled-shortest) !important;
+        }
+
+        .pt-scaled-shorter {
+          padding-top: var(--bs-space-scaled-shorter) !important;
+        }
+
+        .pt-scaled-short {
+          padding-top: var(--bs-space-scaled-short) !important;
+        }
+
+        .pt-scaled-medium {
+          padding-top: var(--bs-space-scaled-medium) !important;
+        }
+
+        .pt-scaled-tall {
+          padding-top: var(--bs-space-scaled-tall) !important;
+        }
+
+        .pt-scaled-taller {
+          padding-top: var(--bs-space-scaled-taller) !important;
+        }
+
+        .pt-scaled-tallest {
+          padding-top: var(--bs-space-scaled-tallest) !important;
+        }
+
+        .pt-scaled-spacious {
+          padding-top: var(--bs-space-scaled-spacious) !important;
+        }
+
+        .pe-none {
+          padding-right: 0 !important;
+        }
+
+        .pe-smash {
+          padding-right: 2px !important;
+        }
+
+        .pe-shortest {
+          padding-right: 4px !important;
+        }
+
+        .pe-shorter {
+          padding-right: 8px !important;
+        }
+
+        .pe-short {
+          padding-right: 12px !important;
+        }
+
+        .pe-medium {
+          padding-right: 16px !important;
+        }
+
+        .pe-tall {
+          padding-right: 24px !important;
+        }
+
+        .pe-taller {
+          padding-right: 32px !important;
+        }
+
+        .pe-tallest {
+          padding-right: 40px !important;
+        }
+
+        .pe-spacious {
+          padding-right: 48px !important;
+        }
+
+        .pe-huge {
+          padding-right: 56px !important;
+        }
+
+        .pe-jumbo {
+          padding-right: 64px !important;
+        }
+
+        .pe-scaled-none {
+          padding-right: var(--bs-space-scaled-none) !important;
+        }
+
+        .pe-scaled-smash {
+          padding-right: var(--bs-space-scaled-smash) !important;
+        }
+
+        .pe-scaled-shortest {
+          padding-right: var(--bs-space-scaled-shortest) !important;
+        }
+
+        .pe-scaled-shorter {
+          padding-right: var(--bs-space-scaled-shorter) !important;
+        }
+
+        .pe-scaled-short {
+          padding-right: var(--bs-space-scaled-short) !important;
+        }
+
+        .pe-scaled-medium {
+          padding-right: var(--bs-space-scaled-medium) !important;
+        }
+
+        .pe-scaled-tall {
+          padding-right: var(--bs-space-scaled-tall) !important;
+        }
+
+        .pe-scaled-taller {
+          padding-right: var(--bs-space-scaled-taller) !important;
+        }
+
+        .pe-scaled-tallest {
+          padding-right: var(--bs-space-scaled-tallest) !important;
+        }
+
+        .pe-scaled-spacious {
+          padding-right: var(--bs-space-scaled-spacious) !important;
+        }
+
+        .pb-none {
+          padding-bottom: 0 !important;
+        }
+
+        .pb-smash {
+          padding-bottom: 2px !important;
+        }
+
+        .pb-shortest {
+          padding-bottom: 4px !important;
+        }
+
+        .pb-shorter {
+          padding-bottom: 8px !important;
+        }
+
+        .pb-short {
+          padding-bottom: 12px !important;
+        }
+
+        .pb-medium {
+          padding-bottom: 16px !important;
+        }
+
+        .pb-tall {
+          padding-bottom: 24px !important;
+        }
+
+        .pb-taller {
+          padding-bottom: 32px !important;
+        }
+
+        .pb-tallest {
+          padding-bottom: 40px !important;
+        }
+
+        .pb-spacious {
+          padding-bottom: 48px !important;
+        }
+
+        .pb-huge {
+          padding-bottom: 56px !important;
+        }
+
+        .pb-jumbo {
+          padding-bottom: 64px !important;
+        }
+
+        .pb-scaled-none {
+          padding-bottom: var(--bs-space-scaled-none) !important;
+        }
+
+        .pb-scaled-smash {
+          padding-bottom: var(--bs-space-scaled-smash) !important;
+        }
+
+        .pb-scaled-shortest {
+          padding-bottom: var(--bs-space-scaled-shortest) !important;
+        }
+
+        .pb-scaled-shorter {
+          padding-bottom: var(--bs-space-scaled-shorter) !important;
+        }
+
+        .pb-scaled-short {
+          padding-bottom: var(--bs-space-scaled-short) !important;
+        }
+
+        .pb-scaled-medium {
+          padding-bottom: var(--bs-space-scaled-medium) !important;
+        }
+
+        .pb-scaled-tall {
+          padding-bottom: var(--bs-space-scaled-tall) !important;
+        }
+
+        .pb-scaled-taller {
+          padding-bottom: var(--bs-space-scaled-taller) !important;
+        }
+
+        .pb-scaled-tallest {
+          padding-bottom: var(--bs-space-scaled-tallest) !important;
+        }
+
+        .pb-scaled-spacious {
+          padding-bottom: var(--bs-space-scaled-spacious) !important;
+        }
+
+        .ps-none {
+          padding-left: 0 !important;
+        }
+
+        .ps-smash {
+          padding-left: 2px !important;
+        }
+
+        .ps-shortest {
+          padding-left: 4px !important;
+        }
+
+        .ps-shorter {
+          padding-left: 8px !important;
+        }
+
+        .ps-short {
+          padding-left: 12px !important;
+        }
+
+        .ps-medium {
+          padding-left: 16px !important;
+        }
+
+        .ps-tall {
+          padding-left: 24px !important;
+        }
+
+        .ps-taller {
+          padding-left: 32px !important;
+        }
+
+        .ps-tallest {
+          padding-left: 40px !important;
+        }
+
+        .ps-spacious {
+          padding-left: 48px !important;
+        }
+
+        .ps-huge {
+          padding-left: 56px !important;
+        }
+
+        .ps-jumbo {
+          padding-left: 64px !important;
+        }
+
+        .ps-scaled-none {
+          padding-left: var(--bs-space-scaled-none) !important;
+        }
+
+        .ps-scaled-smash {
+          padding-left: var(--bs-space-scaled-smash) !important;
+        }
+
+        .ps-scaled-shortest {
+          padding-left: var(--bs-space-scaled-shortest) !important;
+        }
+
+        .ps-scaled-shorter {
+          padding-left: var(--bs-space-scaled-shorter) !important;
+        }
+
+        .ps-scaled-short {
+          padding-left: var(--bs-space-scaled-short) !important;
+        }
+
+        .ps-scaled-medium {
+          padding-left: var(--bs-space-scaled-medium) !important;
+        }
+
+        .ps-scaled-tall {
+          padding-left: var(--bs-space-scaled-tall) !important;
+        }
+
+        .ps-scaled-taller {
+          padding-left: var(--bs-space-scaled-taller) !important;
+        }
+
+        .ps-scaled-tallest {
+          padding-left: var(--bs-space-scaled-tallest) !important;
+        }
+
+        .ps-scaled-spacious {
+          padding-left: var(--bs-space-scaled-spacious) !important;
+        }
+
+        .gap-none {
+          gap: 0 !important;
+        }
+
+        .gap-smash {
+          gap: 2px !important;
+        }
+
+        .gap-shortest {
+          gap: 4px !important;
+        }
+
+        .gap-shorter {
+          gap: 8px !important;
+        }
+
+        .gap-short {
+          gap: 12px !important;
+        }
+
+        .gap-medium {
+          gap: 16px !important;
+        }
+
+        .gap-tall {
+          gap: 24px !important;
+        }
+
+        .gap-taller {
+          gap: 32px !important;
+        }
+
+        .gap-tallest {
+          gap: 40px !important;
+        }
+
+        .gap-spacious {
+          gap: 48px !important;
+        }
+
+        .gap-huge {
+          gap: 56px !important;
+        }
+
+        .gap-jumbo {
+          gap: 64px !important;
+        }
+
+        .gap-scaled-none {
+          gap: var(--bs-space-scaled-none) !important;
+        }
+
+        .gap-scaled-smash {
+          gap: var(--bs-space-scaled-smash) !important;
+        }
+
+        .gap-scaled-shortest {
+          gap: var(--bs-space-scaled-shortest) !important;
+        }
+
+        .gap-scaled-shorter {
+          gap: var(--bs-space-scaled-shorter) !important;
+        }
+
+        .gap-scaled-short {
+          gap: var(--bs-space-scaled-short) !important;
+        }
+
+        .gap-scaled-medium {
+          gap: var(--bs-space-scaled-medium) !important;
+        }
+
+        .gap-scaled-tall {
+          gap: var(--bs-space-scaled-tall) !important;
+        }
+
+        .gap-scaled-taller {
+          gap: var(--bs-space-scaled-taller) !important;
+        }
+
+        .gap-scaled-tallest {
+          gap: var(--bs-space-scaled-tallest) !important;
+        }
+
+        .gap-scaled-spacious {
+          gap: var(--bs-space-scaled-spacious) !important;
+        }
+
+        .row-gap-none {
+          row-gap: 0 !important;
+        }
+
+        .row-gap-smash {
+          row-gap: 2px !important;
+        }
+
+        .row-gap-shortest {
+          row-gap: 4px !important;
+        }
+
+        .row-gap-shorter {
+          row-gap: 8px !important;
+        }
+
+        .row-gap-short {
+          row-gap: 12px !important;
+        }
+
+        .row-gap-medium {
+          row-gap: 16px !important;
+        }
+
+        .row-gap-tall {
+          row-gap: 24px !important;
+        }
+
+        .row-gap-taller {
+          row-gap: 32px !important;
+        }
+
+        .row-gap-tallest {
+          row-gap: 40px !important;
+        }
+
+        .row-gap-spacious {
+          row-gap: 48px !important;
+        }
+
+        .row-gap-huge {
+          row-gap: 56px !important;
+        }
+
+        .row-gap-jumbo {
+          row-gap: 64px !important;
+        }
+
+        .row-gap-scaled-none {
+          row-gap: var(--bs-space-scaled-none) !important;
+        }
+
+        .row-gap-scaled-smash {
+          row-gap: var(--bs-space-scaled-smash) !important;
+        }
+
+        .row-gap-scaled-shortest {
+          row-gap: var(--bs-space-scaled-shortest) !important;
+        }
+
+        .row-gap-scaled-shorter {
+          row-gap: var(--bs-space-scaled-shorter) !important;
+        }
+
+        .row-gap-scaled-short {
+          row-gap: var(--bs-space-scaled-short) !important;
+        }
+
+        .row-gap-scaled-medium {
+          row-gap: var(--bs-space-scaled-medium) !important;
+        }
+
+        .row-gap-scaled-tall {
+          row-gap: var(--bs-space-scaled-tall) !important;
+        }
+
+        .row-gap-scaled-taller {
+          row-gap: var(--bs-space-scaled-taller) !important;
+        }
+
+        .row-gap-scaled-tallest {
+          row-gap: var(--bs-space-scaled-tallest) !important;
+        }
+
+        .row-gap-scaled-spacious {
+          row-gap: var(--bs-space-scaled-spacious) !important;
+        }
+
+        .column-gap-none {
+          column-gap: 0 !important;
+        }
+
+        .column-gap-smash {
+          column-gap: 2px !important;
+        }
+
+        .column-gap-shortest {
+          column-gap: 4px !important;
+        }
+
+        .column-gap-shorter {
+          column-gap: 8px !important;
+        }
+
+        .column-gap-short {
+          column-gap: 12px !important;
+        }
+
+        .column-gap-medium {
+          column-gap: 16px !important;
+        }
+
+        .column-gap-tall {
+          column-gap: 24px !important;
+        }
+
+        .column-gap-taller {
+          column-gap: 32px !important;
+        }
+
+        .column-gap-tallest {
+          column-gap: 40px !important;
+        }
+
+        .column-gap-spacious {
+          column-gap: 48px !important;
+        }
+
+        .column-gap-huge {
+          column-gap: 56px !important;
+        }
+
+        .column-gap-jumbo {
+          column-gap: 64px !important;
+        }
+
+        .column-gap-scaled-none {
+          column-gap: var(--bs-space-scaled-none) !important;
+        }
+
+        .column-gap-scaled-smash {
+          column-gap: var(--bs-space-scaled-smash) !important;
+        }
+
+        .column-gap-scaled-shortest {
+          column-gap: var(--bs-space-scaled-shortest) !important;
+        }
+
+        .column-gap-scaled-shorter {
+          column-gap: var(--bs-space-scaled-shorter) !important;
+        }
+
+        .column-gap-scaled-short {
+          column-gap: var(--bs-space-scaled-short) !important;
+        }
+
+        .column-gap-scaled-medium {
+          column-gap: var(--bs-space-scaled-medium) !important;
+        }
+
+        .column-gap-scaled-tall {
+          column-gap: var(--bs-space-scaled-tall) !important;
+        }
+
+        .column-gap-scaled-taller {
+          column-gap: var(--bs-space-scaled-taller) !important;
+        }
+
+        .column-gap-scaled-tallest {
+          column-gap: var(--bs-space-scaled-tallest) !important;
+        }
+
+        .column-gap-scaled-spacious {
+          column-gap: var(--bs-space-scaled-spacious) !important;
+        }
+
+        .shadow {
+          box-shadow: var(--bs-box-shadow) !important;
+        }
+
+        .shadow-sm {
+          box-shadow: var(--bs-box-shadow-sm) !important;
+        }
+
+        .shadow-lg {
+          box-shadow: var(--bs-box-shadow-lg) !important;
+        }
+
+        .shadow-none {
+          box-shadow: 0 0 0 0 rgba(0, 0, 0, 0) !important;
+        }
+
+        .shadow-raised {
+          box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.32) !important; // stylelint-disable-line @stylistic/number-leading-zero
+        }
+
+        .shadow-drag {
+          box-shadow: 0 4px 4px -1px rgba(0, 0, 0, 0.32) !important; // stylelint-disable-line @stylistic/number-leading-zero
+        }
+
+        .shadow-overlay-default {
+          box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.24) !important; // stylelint-disable-line @stylistic/number-leading-zero
+        }
+
+        .shadow-overlay-emphasized {
+          box-shadow: 0 12px 12px -4px rgba(0, 0, 0, 0.16) !important; // stylelint-disable-line @stylistic/number-leading-zero
+        }
+
+        .shadow-sticky-default {
+          box-shadow: 0 4px 4px -1px rgba(0, 0, 0, 0.16) !important; // stylelint-disable-line @stylistic/number-leading-zero
+        }
+
+        .shadow-sticky-emphasized {
+          box-shadow: 0 4px 4px -1px rgba(0, 0, 0, 0.16) !important; // stylelint-disable-line @stylistic/number-leading-zero
+        }
+
+        .shadow-sticky-navigation-scrolled {
+          box-shadow: 0 4px 4px -1px rgba(0, 0, 0, 0.16) !important; // stylelint-disable-line @stylistic/number-leading-zero
+        }
+
+        @media (min-width: 390px) {
+          .m-xs-0 {
+            margin: 0 !important;
+          }
+
+          .m-xs-1 {
+            margin: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .m-xs-2 {
+            margin: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .m-xs-3 {
+            margin: 1.5rem !important;
+          }
+
+          .m-xs-4 {
+            margin: 2.5rem !important;
+          }
+
+          .m-xs-5 {
+            margin: 3.5rem !important;
+          }
+
+          .mx-xs-0 {
+            margin-right: 0 !important;
+            margin-left: 0 !important;
+          }
+
+          .mx-xs-1 {
+            margin-right: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+            margin-left: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .mx-xs-2 {
+            margin-right: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+            margin-left: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .mx-xs-3 {
+            margin-right: 1.5rem !important;
+            margin-left: 1.5rem !important;
+          }
+
+          .mx-xs-4 {
+            margin-right: 2.5rem !important;
+            margin-left: 2.5rem !important;
+          }
+
+          .mx-xs-5 {
+            margin-right: 3.5rem !important;
+            margin-left: 3.5rem !important;
+          }
+
+          .my-xs-0 {
+            margin-top: 0 !important;
+            margin-bottom: 0 !important;
+          }
+
+          .my-xs-1 {
+            margin-top: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+            margin-bottom: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .my-xs-2 {
+            margin-top: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+            margin-bottom: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .my-xs-3 {
+            margin-top: 1.5rem !important;
+            margin-bottom: 1.5rem !important;
+          }
+
+          .my-xs-4 {
+            margin-top: 2.5rem !important;
+            margin-bottom: 2.5rem !important;
+          }
+
+          .my-xs-5 {
+            margin-top: 3.5rem !important;
+            margin-bottom: 3.5rem !important;
+          }
+
+          .mt-xs-0 {
+            margin-top: 0 !important;
+          }
+
+          .mt-xs-1 {
+            margin-top: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .mt-xs-2 {
+            margin-top: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .mt-xs-3 {
+            margin-top: 1.5rem !important;
+          }
+
+          .mt-xs-4 {
+            margin-top: 2.5rem !important;
+          }
+
+          .mt-xs-5 {
+            margin-top: 3.5rem !important;
+          }
+
+          .me-xs-0 {
+            margin-right: 0 !important;
+          }
+
+          .me-xs-1 {
+            margin-right: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .me-xs-2 {
+            margin-right: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .me-xs-3 {
+            margin-right: 1.5rem !important;
+          }
+
+          .me-xs-4 {
+            margin-right: 2.5rem !important;
+          }
+
+          .me-xs-5 {
+            margin-right: 3.5rem !important;
+          }
+
+          .mb-xs-0 {
+            margin-bottom: 0 !important;
+          }
+
+          .mb-xs-1 {
+            margin-bottom: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .mb-xs-2 {
+            margin-bottom: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .mb-xs-3 {
+            margin-bottom: 1.5rem !important;
+          }
+
+          .mb-xs-4 {
+            margin-bottom: 2.5rem !important;
+          }
+
+          .mb-xs-5 {
+            margin-bottom: 3.5rem !important;
+          }
+
+          .ms-xs-0 {
+            margin-left: 0 !important;
+          }
+
+          .ms-xs-1 {
+            margin-left: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .ms-xs-2 {
+            margin-left: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .ms-xs-3 {
+            margin-left: 1.5rem !important;
+          }
+
+          .ms-xs-4 {
+            margin-left: 2.5rem !important;
+          }
+
+          .ms-xs-5 {
+            margin-left: 3.5rem !important;
+          }
+
+          .p-xs-0 {
+            padding: 0 !important;
+          }
+
+          .p-xs-1 {
+            padding: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .p-xs-2 {
+            padding: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .p-xs-3 {
+            padding: 1.5rem !important;
+          }
+
+          .p-xs-4 {
+            padding: 2.5rem !important;
+          }
+
+          .p-xs-5 {
+            padding: 3.5rem !important;
+          }
+
+          .px-xs-0 {
+            padding-right: 0 !important;
+            padding-left: 0 !important;
+          }
+
+          .px-xs-1 {
+            padding-right: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+            padding-left: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .px-xs-2 {
+            padding-right: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+            padding-left: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .px-xs-3 {
+            padding-right: 1.5rem !important;
+            padding-left: 1.5rem !important;
+          }
+
+          .px-xs-4 {
+            padding-right: 2.5rem !important;
+            padding-left: 2.5rem !important;
+          }
+
+          .px-xs-5 {
+            padding-right: 3.5rem !important;
+            padding-left: 3.5rem !important;
+          }
+
+          .py-xs-0 {
+            padding-top: 0 !important;
+            padding-bottom: 0 !important;
+          }
+
+          .py-xs-1 {
+            padding-top: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+            padding-bottom: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .py-xs-2 {
+            padding-top: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+            padding-bottom: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .py-xs-3 {
+            padding-top: 1.5rem !important;
+            padding-bottom: 1.5rem !important;
+          }
+
+          .py-xs-4 {
+            padding-top: 2.5rem !important;
+            padding-bottom: 2.5rem !important;
+          }
+
+          .py-xs-5 {
+            padding-top: 3.5rem !important;
+            padding-bottom: 3.5rem !important;
+          }
+
+          .pt-xs-0 {
+            padding-top: 0 !important;
+          }
+
+          .pt-xs-1 {
+            padding-top: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .pt-xs-2 {
+            padding-top: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .pt-xs-3 {
+            padding-top: 1.5rem !important;
+          }
+
+          .pt-xs-4 {
+            padding-top: 2.5rem !important;
+          }
+
+          .pt-xs-5 {
+            padding-top: 3.5rem !important;
+          }
+
+          .pe-xs-0 {
+            padding-right: 0 !important;
+          }
+
+          .pe-xs-1 {
+            padding-right: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .pe-xs-2 {
+            padding-right: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .pe-xs-3 {
+            padding-right: 1.5rem !important;
+          }
+
+          .pe-xs-4 {
+            padding-right: 2.5rem !important;
+          }
+
+          .pe-xs-5 {
+            padding-right: 3.5rem !important;
+          }
+
+          .pb-xs-0 {
+            padding-bottom: 0 !important;
+          }
+
+          .pb-xs-1 {
+            padding-bottom: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .pb-xs-2 {
+            padding-bottom: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .pb-xs-3 {
+            padding-bottom: 1.5rem !important;
+          }
+
+          .pb-xs-4 {
+            padding-bottom: 2.5rem !important;
+          }
+
+          .pb-xs-5 {
+            padding-bottom: 3.5rem !important;
+          }
+
+          .ps-xs-0 {
+            padding-left: 0 !important;
+          }
+
+          .ps-xs-1 {
+            padding-left: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .ps-xs-2 {
+            padding-left: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .ps-xs-3 {
+            padding-left: 1.5rem !important;
+          }
+
+          .ps-xs-4 {
+            padding-left: 2.5rem !important;
+          }
+
+          .ps-xs-5 {
+            padding-left: 3.5rem !important;
+          }
+
+          .gap-xs-0 {
+            gap: 0 !important;
+          }
+
+          .gap-xs-1 {
+            gap: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .gap-xs-2 {
+            gap: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .gap-xs-3 {
+            gap: 1.5rem !important;
+          }
+
+          .gap-xs-4 {
+            gap: 2.5rem !important;
+          }
+
+          .gap-xs-5 {
+            gap: 3.5rem !important;
+          }
+
+          .row-gap-xs-0 {
+            row-gap: 0 !important;
+          }
+
+          .row-gap-xs-1 {
+            row-gap: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .row-gap-xs-2 {
+            row-gap: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .row-gap-xs-3 {
+            row-gap: 1.5rem !important;
+          }
+
+          .row-gap-xs-4 {
+            row-gap: 2.5rem !important;
+          }
+
+          .row-gap-xs-5 {
+            row-gap: 3.5rem !important;
+          }
+
+          .column-gap-xs-0 {
+            column-gap: 0 !important;
+          }
+
+          .column-gap-xs-1 {
+            column-gap: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .column-gap-xs-2 {
+            column-gap: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .column-gap-xs-3 {
+            column-gap: 1.5rem !important;
+          }
+
+          .column-gap-xs-4 {
+            column-gap: 2.5rem !important;
+          }
+
+          .column-gap-xs-5 {
+            column-gap: 3.5rem !important;
+          }
+
+          .m-xs-none {
+            margin: 0 !important;
+          }
+
+          .m-xs-smash {
+            margin: 2px !important;
+          }
+
+          .m-xs-shortest {
+            margin: 4px !important;
+          }
+
+          .m-xs-shorter {
+            margin: 8px !important;
+          }
+
+          .m-xs-short {
+            margin: 12px !important;
+          }
+
+          .m-xs-medium {
+            margin: 16px !important;
+          }
+
+          .m-xs-tall {
+            margin: 24px !important;
+          }
+
+          .m-xs-taller {
+            margin: 32px !important;
+          }
+
+          .m-xs-tallest {
+            margin: 40px !important;
+          }
+
+          .m-xs-spacious {
+            margin: 48px !important;
+          }
+
+          .m-xs-huge {
+            margin: 56px !important;
+          }
+
+          .m-xs-jumbo {
+            margin: 64px !important;
+          }
+
+          .m-xs-auto {
+            margin: auto !important;
+          }
+
+          .mx-xs-none {
+            margin-right: 0 !important;
+            margin-left: 0 !important;
+          }
+
+          .mx-xs-smash {
+            margin-right: 2px !important;
+            margin-left: 2px !important;
+          }
+
+          .mx-xs-shortest {
+            margin-right: 4px !important;
+            margin-left: 4px !important;
+          }
+
+          .mx-xs-shorter {
+            margin-right: 8px !important;
+            margin-left: 8px !important;
+          }
+
+          .mx-xs-short {
+            margin-right: 12px !important;
+            margin-left: 12px !important;
+          }
+
+          .mx-xs-medium {
+            margin-right: 16px !important;
+            margin-left: 16px !important;
+          }
+
+          .mx-xs-tall {
+            margin-right: 24px !important;
+            margin-left: 24px !important;
+          }
+
+          .mx-xs-taller {
+            margin-right: 32px !important;
+            margin-left: 32px !important;
+          }
+
+          .mx-xs-tallest {
+            margin-right: 40px !important;
+            margin-left: 40px !important;
+          }
+
+          .mx-xs-spacious {
+            margin-right: 48px !important;
+            margin-left: 48px !important;
+          }
+
+          .mx-xs-huge {
+            margin-right: 56px !important;
+            margin-left: 56px !important;
+          }
+
+          .mx-xs-jumbo {
+            margin-right: 64px !important;
+            margin-left: 64px !important;
+          }
+
+          .mx-xs-auto {
+            margin-right: auto !important;
+            margin-left: auto !important;
+          }
+
+          .my-xs-none {
+            margin-top: 0 !important;
+            margin-bottom: 0 !important;
+          }
+
+          .my-xs-smash {
+            margin-top: 2px !important;
+            margin-bottom: 2px !important;
+          }
+
+          .my-xs-shortest {
+            margin-top: 4px !important;
+            margin-bottom: 4px !important;
+          }
+
+          .my-xs-shorter {
+            margin-top: 8px !important;
+            margin-bottom: 8px !important;
+          }
+
+          .my-xs-short {
+            margin-top: 12px !important;
+            margin-bottom: 12px !important;
+          }
+
+          .my-xs-medium {
+            margin-top: 16px !important;
+            margin-bottom: 16px !important;
+          }
+
+          .my-xs-tall {
+            margin-top: 24px !important;
+            margin-bottom: 24px !important;
+          }
+
+          .my-xs-taller {
+            margin-top: 32px !important;
+            margin-bottom: 32px !important;
+          }
+
+          .my-xs-tallest {
+            margin-top: 40px !important;
+            margin-bottom: 40px !important;
+          }
+
+          .my-xs-spacious {
+            margin-top: 48px !important;
+            margin-bottom: 48px !important;
+          }
+
+          .my-xs-huge {
+            margin-top: 56px !important;
+            margin-bottom: 56px !important;
+          }
+
+          .my-xs-jumbo {
+            margin-top: 64px !important;
+            margin-bottom: 64px !important;
+          }
+
+          .my-xs-auto {
+            margin-top: auto !important;
+            margin-bottom: auto !important;
+          }
+
+          .mt-xs-none {
+            margin-top: 0 !important;
+          }
+
+          .mt-xs-smash {
+            margin-top: 2px !important;
+          }
+
+          .mt-xs-shortest {
+            margin-top: 4px !important;
+          }
+
+          .mt-xs-shorter {
+            margin-top: 8px !important;
+          }
+
+          .mt-xs-short {
+            margin-top: 12px !important;
+          }
+
+          .mt-xs-medium {
+            margin-top: 16px !important;
+          }
+
+          .mt-xs-tall {
+            margin-top: 24px !important;
+          }
+
+          .mt-xs-taller {
+            margin-top: 32px !important;
+          }
+
+          .mt-xs-tallest {
+            margin-top: 40px !important;
+          }
+
+          .mt-xs-spacious {
+            margin-top: 48px !important;
+          }
+
+          .mt-xs-huge {
+            margin-top: 56px !important;
+          }
+
+          .mt-xs-jumbo {
+            margin-top: 64px !important;
+          }
+
+          .mt-xs-auto {
+            margin-top: auto !important;
+          }
+
+          .me-xs-none {
+            margin-right: 0 !important;
+          }
+
+          .me-xs-smash {
+            margin-right: 2px !important;
+          }
+
+          .me-xs-shortest {
+            margin-right: 4px !important;
+          }
+
+          .me-xs-shorter {
+            margin-right: 8px !important;
+          }
+
+          .me-xs-short {
+            margin-right: 12px !important;
+          }
+
+          .me-xs-medium {
+            margin-right: 16px !important;
+          }
+
+          .me-xs-tall {
+            margin-right: 24px !important;
+          }
+
+          .me-xs-taller {
+            margin-right: 32px !important;
+          }
+
+          .me-xs-tallest {
+            margin-right: 40px !important;
+          }
+
+          .me-xs-spacious {
+            margin-right: 48px !important;
+          }
+
+          .me-xs-huge {
+            margin-right: 56px !important;
+          }
+
+          .me-xs-jumbo {
+            margin-right: 64px !important;
+          }
+
+          .me-xs-auto {
+            margin-right: auto !important;
+          }
+
+          .mb-xs-none {
+            margin-bottom: 0 !important;
+          }
+
+          .mb-xs-smash {
+            margin-bottom: 2px !important;
+          }
+
+          .mb-xs-shortest {
+            margin-bottom: 4px !important;
+          }
+
+          .mb-xs-shorter {
+            margin-bottom: 8px !important;
+          }
+
+          .mb-xs-short {
+            margin-bottom: 12px !important;
+          }
+
+          .mb-xs-medium {
+            margin-bottom: 16px !important;
+          }
+
+          .mb-xs-tall {
+            margin-bottom: 24px !important;
+          }
+
+          .mb-xs-taller {
+            margin-bottom: 32px !important;
+          }
+
+          .mb-xs-tallest {
+            margin-bottom: 40px !important;
+          }
+
+          .mb-xs-spacious {
+            margin-bottom: 48px !important;
+          }
+
+          .mb-xs-huge {
+            margin-bottom: 56px !important;
+          }
+
+          .mb-xs-jumbo {
+            margin-bottom: 64px !important;
+          }
+
+          .mb-xs-auto {
+            margin-bottom: auto !important;
+          }
+
+          .ms-xs-none {
+            margin-left: 0 !important;
+          }
+
+          .ms-xs-smash {
+            margin-left: 2px !important;
+          }
+
+          .ms-xs-shortest {
+            margin-left: 4px !important;
+          }
+
+          .ms-xs-shorter {
+            margin-left: 8px !important;
+          }
+
+          .ms-xs-short {
+            margin-left: 12px !important;
+          }
+
+          .ms-xs-medium {
+            margin-left: 16px !important;
+          }
+
+          .ms-xs-tall {
+            margin-left: 24px !important;
+          }
+
+          .ms-xs-taller {
+            margin-left: 32px !important;
+          }
+
+          .ms-xs-tallest {
+            margin-left: 40px !important;
+          }
+
+          .ms-xs-spacious {
+            margin-left: 48px !important;
+          }
+
+          .ms-xs-huge {
+            margin-left: 56px !important;
+          }
+
+          .ms-xs-jumbo {
+            margin-left: 64px !important;
+          }
+
+          .ms-xs-auto {
+            margin-left: auto !important;
+          }
+
+          .p-xs-none {
+            padding: 0 !important;
+          }
+
+          .p-xs-smash {
+            padding: 2px !important;
+          }
+
+          .p-xs-shortest {
+            padding: 4px !important;
+          }
+
+          .p-xs-shorter {
+            padding: 8px !important;
+          }
+
+          .p-xs-short {
+            padding: 12px !important;
+          }
+
+          .p-xs-medium {
+            padding: 16px !important;
+          }
+
+          .p-xs-tall {
+            padding: 24px !important;
+          }
+
+          .p-xs-taller {
+            padding: 32px !important;
+          }
+
+          .p-xs-tallest {
+            padding: 40px !important;
+          }
+
+          .p-xs-spacious {
+            padding: 48px !important;
+          }
+
+          .p-xs-huge {
+            padding: 56px !important;
+          }
+
+          .p-xs-jumbo {
+            padding: 64px !important;
+          }
+
+          .px-xs-none {
+            padding-right: 0 !important;
+            padding-left: 0 !important;
+          }
+
+          .px-xs-smash {
+            padding-right: 2px !important;
+            padding-left: 2px !important;
+          }
+
+          .px-xs-shortest {
+            padding-right: 4px !important;
+            padding-left: 4px !important;
+          }
+
+          .px-xs-shorter {
+            padding-right: 8px !important;
+            padding-left: 8px !important;
+          }
+
+          .px-xs-short {
+            padding-right: 12px !important;
+            padding-left: 12px !important;
+          }
+
+          .px-xs-medium {
+            padding-right: 16px !important;
+            padding-left: 16px !important;
+          }
+
+          .px-xs-tall {
+            padding-right: 24px !important;
+            padding-left: 24px !important;
+          }
+
+          .px-xs-taller {
+            padding-right: 32px !important;
+            padding-left: 32px !important;
+          }
+
+          .px-xs-tallest {
+            padding-right: 40px !important;
+            padding-left: 40px !important;
+          }
+
+          .px-xs-spacious {
+            padding-right: 48px !important;
+            padding-left: 48px !important;
+          }
+
+          .px-xs-huge {
+            padding-right: 56px !important;
+            padding-left: 56px !important;
+          }
+
+          .px-xs-jumbo {
+            padding-right: 64px !important;
+            padding-left: 64px !important;
+          }
+
+          .py-xs-none {
+            padding-top: 0 !important;
+            padding-bottom: 0 !important;
+          }
+
+          .py-xs-smash {
+            padding-top: 2px !important;
+            padding-bottom: 2px !important;
+          }
+
+          .py-xs-shortest {
+            padding-top: 4px !important;
+            padding-bottom: 4px !important;
+          }
+
+          .py-xs-shorter {
+            padding-top: 8px !important;
+            padding-bottom: 8px !important;
+          }
+
+          .py-xs-short {
+            padding-top: 12px !important;
+            padding-bottom: 12px !important;
+          }
+
+          .py-xs-medium {
+            padding-top: 16px !important;
+            padding-bottom: 16px !important;
+          }
+
+          .py-xs-tall {
+            padding-top: 24px !important;
+            padding-bottom: 24px !important;
+          }
+
+          .py-xs-taller {
+            padding-top: 32px !important;
+            padding-bottom: 32px !important;
+          }
+
+          .py-xs-tallest {
+            padding-top: 40px !important;
+            padding-bottom: 40px !important;
+          }
+
+          .py-xs-spacious {
+            padding-top: 48px !important;
+            padding-bottom: 48px !important;
+          }
+
+          .py-xs-huge {
+            padding-top: 56px !important;
+            padding-bottom: 56px !important;
+          }
+
+          .py-xs-jumbo {
+            padding-top: 64px !important;
+            padding-bottom: 64px !important;
+          }
+
+          .pt-xs-none {
+            padding-top: 0 !important;
+          }
+
+          .pt-xs-smash {
+            padding-top: 2px !important;
+          }
+
+          .pt-xs-shortest {
+            padding-top: 4px !important;
+          }
+
+          .pt-xs-shorter {
+            padding-top: 8px !important;
+          }
+
+          .pt-xs-short {
+            padding-top: 12px !important;
+          }
+
+          .pt-xs-medium {
+            padding-top: 16px !important;
+          }
+
+          .pt-xs-tall {
+            padding-top: 24px !important;
+          }
+
+          .pt-xs-taller {
+            padding-top: 32px !important;
+          }
+
+          .pt-xs-tallest {
+            padding-top: 40px !important;
+          }
+
+          .pt-xs-spacious {
+            padding-top: 48px !important;
+          }
+
+          .pt-xs-huge {
+            padding-top: 56px !important;
+          }
+
+          .pt-xs-jumbo {
+            padding-top: 64px !important;
+          }
+
+          .pe-xs-none {
+            padding-right: 0 !important;
+          }
+
+          .pe-xs-smash {
+            padding-right: 2px !important;
+          }
+
+          .pe-xs-shortest {
+            padding-right: 4px !important;
+          }
+
+          .pe-xs-shorter {
+            padding-right: 8px !important;
+          }
+
+          .pe-xs-short {
+            padding-right: 12px !important;
+          }
+
+          .pe-xs-medium {
+            padding-right: 16px !important;
+          }
+
+          .pe-xs-tall {
+            padding-right: 24px !important;
+          }
+
+          .pe-xs-taller {
+            padding-right: 32px !important;
+          }
+
+          .pe-xs-tallest {
+            padding-right: 40px !important;
+          }
+
+          .pe-xs-spacious {
+            padding-right: 48px !important;
+          }
+
+          .pe-xs-huge {
+            padding-right: 56px !important;
+          }
+
+          .pe-xs-jumbo {
+            padding-right: 64px !important;
+          }
+
+          .pb-xs-none {
+            padding-bottom: 0 !important;
+          }
+
+          .pb-xs-smash {
+            padding-bottom: 2px !important;
+          }
+
+          .pb-xs-shortest {
+            padding-bottom: 4px !important;
+          }
+
+          .pb-xs-shorter {
+            padding-bottom: 8px !important;
+          }
+
+          .pb-xs-short {
+            padding-bottom: 12px !important;
+          }
+
+          .pb-xs-medium {
+            padding-bottom: 16px !important;
+          }
+
+          .pb-xs-tall {
+            padding-bottom: 24px !important;
+          }
+
+          .pb-xs-taller {
+            padding-bottom: 32px !important;
+          }
+
+          .pb-xs-tallest {
+            padding-bottom: 40px !important;
+          }
+
+          .pb-xs-spacious {
+            padding-bottom: 48px !important;
+          }
+
+          .pb-xs-huge {
+            padding-bottom: 56px !important;
+          }
+
+          .pb-xs-jumbo {
+            padding-bottom: 64px !important;
+          }
+
+          .ps-xs-none {
+            padding-left: 0 !important;
+          }
+
+          .ps-xs-smash {
+            padding-left: 2px !important;
+          }
+
+          .ps-xs-shortest {
+            padding-left: 4px !important;
+          }
+
+          .ps-xs-shorter {
+            padding-left: 8px !important;
+          }
+
+          .ps-xs-short {
+            padding-left: 12px !important;
+          }
+
+          .ps-xs-medium {
+            padding-left: 16px !important;
+          }
+
+          .ps-xs-tall {
+            padding-left: 24px !important;
+          }
+
+          .ps-xs-taller {
+            padding-left: 32px !important;
+          }
+
+          .ps-xs-tallest {
+            padding-left: 40px !important;
+          }
+
+          .ps-xs-spacious {
+            padding-left: 48px !important;
+          }
+
+          .ps-xs-huge {
+            padding-left: 56px !important;
+          }
+
+          .ps-xs-jumbo {
+            padding-left: 64px !important;
+          }
+
+          .gap-xs-none {
+            gap: 0 !important;
+          }
+
+          .gap-xs-smash {
+            gap: 2px !important;
+          }
+
+          .gap-xs-shortest {
+            gap: 4px !important;
+          }
+
+          .gap-xs-shorter {
+            gap: 8px !important;
+          }
+
+          .gap-xs-short {
+            gap: 12px !important;
+          }
+
+          .gap-xs-medium {
+            gap: 16px !important;
+          }
+
+          .gap-xs-tall {
+            gap: 24px !important;
+          }
+
+          .gap-xs-taller {
+            gap: 32px !important;
+          }
+
+          .gap-xs-tallest {
+            gap: 40px !important;
+          }
+
+          .gap-xs-spacious {
+            gap: 48px !important;
+          }
+
+          .gap-xs-huge {
+            gap: 56px !important;
+          }
+
+          .gap-xs-jumbo {
+            gap: 64px !important;
+          }
+
+          .row-gap-xs-none {
+            row-gap: 0 !important;
+          }
+
+          .row-gap-xs-smash {
+            row-gap: 2px !important;
+          }
+
+          .row-gap-xs-shortest {
+            row-gap: 4px !important;
+          }
+
+          .row-gap-xs-shorter {
+            row-gap: 8px !important;
+          }
+
+          .row-gap-xs-short {
+            row-gap: 12px !important;
+          }
+
+          .row-gap-xs-medium {
+            row-gap: 16px !important;
+          }
+
+          .row-gap-xs-tall {
+            row-gap: 24px !important;
+          }
+
+          .row-gap-xs-taller {
+            row-gap: 32px !important;
+          }
+
+          .row-gap-xs-tallest {
+            row-gap: 40px !important;
+          }
+
+          .row-gap-xs-spacious {
+            row-gap: 48px !important;
+          }
+
+          .row-gap-xs-huge {
+            row-gap: 56px !important;
+          }
+
+          .row-gap-xs-jumbo {
+            row-gap: 64px !important;
+          }
+
+          .column-gap-xs-none {
+            column-gap: 0 !important;
+          }
+
+          .column-gap-xs-smash {
+            column-gap: 2px !important;
+          }
+
+          .column-gap-xs-shortest {
+            column-gap: 4px !important;
+          }
+
+          .column-gap-xs-shorter {
+            column-gap: 8px !important;
+          }
+
+          .column-gap-xs-short {
+            column-gap: 12px !important;
+          }
+
+          .column-gap-xs-medium {
+            column-gap: 16px !important;
+          }
+
+          .column-gap-xs-tall {
+            column-gap: 24px !important;
+          }
+
+          .column-gap-xs-taller {
+            column-gap: 32px !important;
+          }
+
+          .column-gap-xs-tallest {
+            column-gap: 40px !important;
+          }
+
+          .column-gap-xs-spacious {
+            column-gap: 48px !important;
+          }
+
+          .column-gap-xs-huge {
+            column-gap: 56px !important;
+          }
+
+          .column-gap-xs-jumbo {
+            column-gap: 64px !important;
+          }
+        }
+
+        @media (min-width: 480px) {
+          .m-sm-0 {
+            margin: 0 !important;
+          }
+
+          .m-sm-1 {
+            margin: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .m-sm-2 {
+            margin: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .m-sm-3 {
+            margin: 1.5rem !important;
+          }
+
+          .m-sm-4 {
+            margin: 2.5rem !important;
+          }
+
+          .m-sm-5 {
+            margin: 3.5rem !important;
+          }
+
+          .mx-sm-0 {
+            margin-right: 0 !important;
+            margin-left: 0 !important;
+          }
+
+          .mx-sm-1 {
+            margin-right: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+            margin-left: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .mx-sm-2 {
+            margin-right: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+            margin-left: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .mx-sm-3 {
+            margin-right: 1.5rem !important;
+            margin-left: 1.5rem !important;
+          }
+
+          .mx-sm-4 {
+            margin-right: 2.5rem !important;
+            margin-left: 2.5rem !important;
+          }
+
+          .mx-sm-5 {
+            margin-right: 3.5rem !important;
+            margin-left: 3.5rem !important;
+          }
+
+          .my-sm-0 {
+            margin-top: 0 !important;
+            margin-bottom: 0 !important;
+          }
+
+          .my-sm-1 {
+            margin-top: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+            margin-bottom: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .my-sm-2 {
+            margin-top: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+            margin-bottom: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .my-sm-3 {
+            margin-top: 1.5rem !important;
+            margin-bottom: 1.5rem !important;
+          }
+
+          .my-sm-4 {
+            margin-top: 2.5rem !important;
+            margin-bottom: 2.5rem !important;
+          }
+
+          .my-sm-5 {
+            margin-top: 3.5rem !important;
+            margin-bottom: 3.5rem !important;
+          }
+
+          .mt-sm-0 {
+            margin-top: 0 !important;
+          }
+
+          .mt-sm-1 {
+            margin-top: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .mt-sm-2 {
+            margin-top: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .mt-sm-3 {
+            margin-top: 1.5rem !important;
+          }
+
+          .mt-sm-4 {
+            margin-top: 2.5rem !important;
+          }
+
+          .mt-sm-5 {
+            margin-top: 3.5rem !important;
+          }
+
+          .me-sm-0 {
+            margin-right: 0 !important;
+          }
+
+          .me-sm-1 {
+            margin-right: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .me-sm-2 {
+            margin-right: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .me-sm-3 {
+            margin-right: 1.5rem !important;
+          }
+
+          .me-sm-4 {
+            margin-right: 2.5rem !important;
+          }
+
+          .me-sm-5 {
+            margin-right: 3.5rem !important;
+          }
+
+          .mb-sm-0 {
+            margin-bottom: 0 !important;
+          }
+
+          .mb-sm-1 {
+            margin-bottom: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .mb-sm-2 {
+            margin-bottom: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .mb-sm-3 {
+            margin-bottom: 1.5rem !important;
+          }
+
+          .mb-sm-4 {
+            margin-bottom: 2.5rem !important;
+          }
+
+          .mb-sm-5 {
+            margin-bottom: 3.5rem !important;
+          }
+
+          .ms-sm-0 {
+            margin-left: 0 !important;
+          }
+
+          .ms-sm-1 {
+            margin-left: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .ms-sm-2 {
+            margin-left: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .ms-sm-3 {
+            margin-left: 1.5rem !important;
+          }
+
+          .ms-sm-4 {
+            margin-left: 2.5rem !important;
+          }
+
+          .ms-sm-5 {
+            margin-left: 3.5rem !important;
+          }
+
+          .p-sm-0 {
+            padding: 0 !important;
+          }
+
+          .p-sm-1 {
+            padding: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .p-sm-2 {
+            padding: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .p-sm-3 {
+            padding: 1.5rem !important;
+          }
+
+          .p-sm-4 {
+            padding: 2.5rem !important;
+          }
+
+          .p-sm-5 {
+            padding: 3.5rem !important;
+          }
+
+          .px-sm-0 {
+            padding-right: 0 !important;
+            padding-left: 0 !important;
+          }
+
+          .px-sm-1 {
+            padding-right: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+            padding-left: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .px-sm-2 {
+            padding-right: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+            padding-left: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .px-sm-3 {
+            padding-right: 1.5rem !important;
+            padding-left: 1.5rem !important;
+          }
+
+          .px-sm-4 {
+            padding-right: 2.5rem !important;
+            padding-left: 2.5rem !important;
+          }
+
+          .px-sm-5 {
+            padding-right: 3.5rem !important;
+            padding-left: 3.5rem !important;
+          }
+
+          .py-sm-0 {
+            padding-top: 0 !important;
+            padding-bottom: 0 !important;
+          }
+
+          .py-sm-1 {
+            padding-top: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+            padding-bottom: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .py-sm-2 {
+            padding-top: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+            padding-bottom: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .py-sm-3 {
+            padding-top: 1.5rem !important;
+            padding-bottom: 1.5rem !important;
+          }
+
+          .py-sm-4 {
+            padding-top: 2.5rem !important;
+            padding-bottom: 2.5rem !important;
+          }
+
+          .py-sm-5 {
+            padding-top: 3.5rem !important;
+            padding-bottom: 3.5rem !important;
+          }
+
+          .pt-sm-0 {
+            padding-top: 0 !important;
+          }
+
+          .pt-sm-1 {
+            padding-top: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .pt-sm-2 {
+            padding-top: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .pt-sm-3 {
+            padding-top: 1.5rem !important;
+          }
+
+          .pt-sm-4 {
+            padding-top: 2.5rem !important;
+          }
+
+          .pt-sm-5 {
+            padding-top: 3.5rem !important;
+          }
+
+          .pe-sm-0 {
+            padding-right: 0 !important;
+          }
+
+          .pe-sm-1 {
+            padding-right: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .pe-sm-2 {
+            padding-right: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .pe-sm-3 {
+            padding-right: 1.5rem !important;
+          }
+
+          .pe-sm-4 {
+            padding-right: 2.5rem !important;
+          }
+
+          .pe-sm-5 {
+            padding-right: 3.5rem !important;
+          }
+
+          .pb-sm-0 {
+            padding-bottom: 0 !important;
+          }
+
+          .pb-sm-1 {
+            padding-bottom: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .pb-sm-2 {
+            padding-bottom: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .pb-sm-3 {
+            padding-bottom: 1.5rem !important;
+          }
+
+          .pb-sm-4 {
+            padding-bottom: 2.5rem !important;
+          }
+
+          .pb-sm-5 {
+            padding-bottom: 3.5rem !important;
+          }
+
+          .ps-sm-0 {
+            padding-left: 0 !important;
+          }
+
+          .ps-sm-1 {
+            padding-left: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .ps-sm-2 {
+            padding-left: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .ps-sm-3 {
+            padding-left: 1.5rem !important;
+          }
+
+          .ps-sm-4 {
+            padding-left: 2.5rem !important;
+          }
+
+          .ps-sm-5 {
+            padding-left: 3.5rem !important;
+          }
+
+          .gap-sm-0 {
+            gap: 0 !important;
+          }
+
+          .gap-sm-1 {
+            gap: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .gap-sm-2 {
+            gap: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .gap-sm-3 {
+            gap: 1.5rem !important;
+          }
+
+          .gap-sm-4 {
+            gap: 2.5rem !important;
+          }
+
+          .gap-sm-5 {
+            gap: 3.5rem !important;
+          }
+
+          .row-gap-sm-0 {
+            row-gap: 0 !important;
+          }
+
+          .row-gap-sm-1 {
+            row-gap: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .row-gap-sm-2 {
+            row-gap: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .row-gap-sm-3 {
+            row-gap: 1.5rem !important;
+          }
+
+          .row-gap-sm-4 {
+            row-gap: 2.5rem !important;
+          }
+
+          .row-gap-sm-5 {
+            row-gap: 3.5rem !important;
+          }
+
+          .column-gap-sm-0 {
+            column-gap: 0 !important;
+          }
+
+          .column-gap-sm-1 {
+            column-gap: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .column-gap-sm-2 {
+            column-gap: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .column-gap-sm-3 {
+            column-gap: 1.5rem !important;
+          }
+
+          .column-gap-sm-4 {
+            column-gap: 2.5rem !important;
+          }
+
+          .column-gap-sm-5 {
+            column-gap: 3.5rem !important;
+          }
+
+          .m-sm-none {
+            margin: 0 !important;
+          }
+
+          .m-sm-smash {
+            margin: 2px !important;
+          }
+
+          .m-sm-shortest {
+            margin: 4px !important;
+          }
+
+          .m-sm-shorter {
+            margin: 8px !important;
+          }
+
+          .m-sm-short {
+            margin: 12px !important;
+          }
+
+          .m-sm-medium {
+            margin: 16px !important;
+          }
+
+          .m-sm-tall {
+            margin: 24px !important;
+          }
+
+          .m-sm-taller {
+            margin: 32px !important;
+          }
+
+          .m-sm-tallest {
+            margin: 40px !important;
+          }
+
+          .m-sm-spacious {
+            margin: 48px !important;
+          }
+
+          .m-sm-huge {
+            margin: 56px !important;
+          }
+
+          .m-sm-jumbo {
+            margin: 64px !important;
+          }
+
+          .m-sm-auto {
+            margin: auto !important;
+          }
+
+          .mx-sm-none {
+            margin-right: 0 !important;
+            margin-left: 0 !important;
+          }
+
+          .mx-sm-smash {
+            margin-right: 2px !important;
+            margin-left: 2px !important;
+          }
+
+          .mx-sm-shortest {
+            margin-right: 4px !important;
+            margin-left: 4px !important;
+          }
+
+          .mx-sm-shorter {
+            margin-right: 8px !important;
+            margin-left: 8px !important;
+          }
+
+          .mx-sm-short {
+            margin-right: 12px !important;
+            margin-left: 12px !important;
+          }
+
+          .mx-sm-medium {
+            margin-right: 16px !important;
+            margin-left: 16px !important;
+          }
+
+          .mx-sm-tall {
+            margin-right: 24px !important;
+            margin-left: 24px !important;
+          }
+
+          .mx-sm-taller {
+            margin-right: 32px !important;
+            margin-left: 32px !important;
+          }
+
+          .mx-sm-tallest {
+            margin-right: 40px !important;
+            margin-left: 40px !important;
+          }
+
+          .mx-sm-spacious {
+            margin-right: 48px !important;
+            margin-left: 48px !important;
+          }
+
+          .mx-sm-huge {
+            margin-right: 56px !important;
+            margin-left: 56px !important;
+          }
+
+          .mx-sm-jumbo {
+            margin-right: 64px !important;
+            margin-left: 64px !important;
+          }
+
+          .mx-sm-auto {
+            margin-right: auto !important;
+            margin-left: auto !important;
+          }
+
+          .my-sm-none {
+            margin-top: 0 !important;
+            margin-bottom: 0 !important;
+          }
+
+          .my-sm-smash {
+            margin-top: 2px !important;
+            margin-bottom: 2px !important;
+          }
+
+          .my-sm-shortest {
+            margin-top: 4px !important;
+            margin-bottom: 4px !important;
+          }
+
+          .my-sm-shorter {
+            margin-top: 8px !important;
+            margin-bottom: 8px !important;
+          }
+
+          .my-sm-short {
+            margin-top: 12px !important;
+            margin-bottom: 12px !important;
+          }
+
+          .my-sm-medium {
+            margin-top: 16px !important;
+            margin-bottom: 16px !important;
+          }
+
+          .my-sm-tall {
+            margin-top: 24px !important;
+            margin-bottom: 24px !important;
+          }
+
+          .my-sm-taller {
+            margin-top: 32px !important;
+            margin-bottom: 32px !important;
+          }
+
+          .my-sm-tallest {
+            margin-top: 40px !important;
+            margin-bottom: 40px !important;
+          }
+
+          .my-sm-spacious {
+            margin-top: 48px !important;
+            margin-bottom: 48px !important;
+          }
+
+          .my-sm-huge {
+            margin-top: 56px !important;
+            margin-bottom: 56px !important;
+          }
+
+          .my-sm-jumbo {
+            margin-top: 64px !important;
+            margin-bottom: 64px !important;
+          }
+
+          .my-sm-auto {
+            margin-top: auto !important;
+            margin-bottom: auto !important;
+          }
+
+          .mt-sm-none {
+            margin-top: 0 !important;
+          }
+
+          .mt-sm-smash {
+            margin-top: 2px !important;
+          }
+
+          .mt-sm-shortest {
+            margin-top: 4px !important;
+          }
+
+          .mt-sm-shorter {
+            margin-top: 8px !important;
+          }
+
+          .mt-sm-short {
+            margin-top: 12px !important;
+          }
+
+          .mt-sm-medium {
+            margin-top: 16px !important;
+          }
+
+          .mt-sm-tall {
+            margin-top: 24px !important;
+          }
+
+          .mt-sm-taller {
+            margin-top: 32px !important;
+          }
+
+          .mt-sm-tallest {
+            margin-top: 40px !important;
+          }
+
+          .mt-sm-spacious {
+            margin-top: 48px !important;
+          }
+
+          .mt-sm-huge {
+            margin-top: 56px !important;
+          }
+
+          .mt-sm-jumbo {
+            margin-top: 64px !important;
+          }
+
+          .mt-sm-auto {
+            margin-top: auto !important;
+          }
+
+          .me-sm-none {
+            margin-right: 0 !important;
+          }
+
+          .me-sm-smash {
+            margin-right: 2px !important;
+          }
+
+          .me-sm-shortest {
+            margin-right: 4px !important;
+          }
+
+          .me-sm-shorter {
+            margin-right: 8px !important;
+          }
+
+          .me-sm-short {
+            margin-right: 12px !important;
+          }
+
+          .me-sm-medium {
+            margin-right: 16px !important;
+          }
+
+          .me-sm-tall {
+            margin-right: 24px !important;
+          }
+
+          .me-sm-taller {
+            margin-right: 32px !important;
+          }
+
+          .me-sm-tallest {
+            margin-right: 40px !important;
+          }
+
+          .me-sm-spacious {
+            margin-right: 48px !important;
+          }
+
+          .me-sm-huge {
+            margin-right: 56px !important;
+          }
+
+          .me-sm-jumbo {
+            margin-right: 64px !important;
+          }
+
+          .me-sm-auto {
+            margin-right: auto !important;
+          }
+
+          .mb-sm-none {
+            margin-bottom: 0 !important;
+          }
+
+          .mb-sm-smash {
+            margin-bottom: 2px !important;
+          }
+
+          .mb-sm-shortest {
+            margin-bottom: 4px !important;
+          }
+
+          .mb-sm-shorter {
+            margin-bottom: 8px !important;
+          }
+
+          .mb-sm-short {
+            margin-bottom: 12px !important;
+          }
+
+          .mb-sm-medium {
+            margin-bottom: 16px !important;
+          }
+
+          .mb-sm-tall {
+            margin-bottom: 24px !important;
+          }
+
+          .mb-sm-taller {
+            margin-bottom: 32px !important;
+          }
+
+          .mb-sm-tallest {
+            margin-bottom: 40px !important;
+          }
+
+          .mb-sm-spacious {
+            margin-bottom: 48px !important;
+          }
+
+          .mb-sm-huge {
+            margin-bottom: 56px !important;
+          }
+
+          .mb-sm-jumbo {
+            margin-bottom: 64px !important;
+          }
+
+          .mb-sm-auto {
+            margin-bottom: auto !important;
+          }
+
+          .ms-sm-none {
+            margin-left: 0 !important;
+          }
+
+          .ms-sm-smash {
+            margin-left: 2px !important;
+          }
+
+          .ms-sm-shortest {
+            margin-left: 4px !important;
+          }
+
+          .ms-sm-shorter {
+            margin-left: 8px !important;
+          }
+
+          .ms-sm-short {
+            margin-left: 12px !important;
+          }
+
+          .ms-sm-medium {
+            margin-left: 16px !important;
+          }
+
+          .ms-sm-tall {
+            margin-left: 24px !important;
+          }
+
+          .ms-sm-taller {
+            margin-left: 32px !important;
+          }
+
+          .ms-sm-tallest {
+            margin-left: 40px !important;
+          }
+
+          .ms-sm-spacious {
+            margin-left: 48px !important;
+          }
+
+          .ms-sm-huge {
+            margin-left: 56px !important;
+          }
+
+          .ms-sm-jumbo {
+            margin-left: 64px !important;
+          }
+
+          .ms-sm-auto {
+            margin-left: auto !important;
+          }
+
+          .p-sm-none {
+            padding: 0 !important;
+          }
+
+          .p-sm-smash {
+            padding: 2px !important;
+          }
+
+          .p-sm-shortest {
+            padding: 4px !important;
+          }
+
+          .p-sm-shorter {
+            padding: 8px !important;
+          }
+
+          .p-sm-short {
+            padding: 12px !important;
+          }
+
+          .p-sm-medium {
+            padding: 16px !important;
+          }
+
+          .p-sm-tall {
+            padding: 24px !important;
+          }
+
+          .p-sm-taller {
+            padding: 32px !important;
+          }
+
+          .p-sm-tallest {
+            padding: 40px !important;
+          }
+
+          .p-sm-spacious {
+            padding: 48px !important;
+          }
+
+          .p-sm-huge {
+            padding: 56px !important;
+          }
+
+          .p-sm-jumbo {
+            padding: 64px !important;
+          }
+
+          .px-sm-none {
+            padding-right: 0 !important;
+            padding-left: 0 !important;
+          }
+
+          .px-sm-smash {
+            padding-right: 2px !important;
+            padding-left: 2px !important;
+          }
+
+          .px-sm-shortest {
+            padding-right: 4px !important;
+            padding-left: 4px !important;
+          }
+
+          .px-sm-shorter {
+            padding-right: 8px !important;
+            padding-left: 8px !important;
+          }
+
+          .px-sm-short {
+            padding-right: 12px !important;
+            padding-left: 12px !important;
+          }
+
+          .px-sm-medium {
+            padding-right: 16px !important;
+            padding-left: 16px !important;
+          }
+
+          .px-sm-tall {
+            padding-right: 24px !important;
+            padding-left: 24px !important;
+          }
+
+          .px-sm-taller {
+            padding-right: 32px !important;
+            padding-left: 32px !important;
+          }
+
+          .px-sm-tallest {
+            padding-right: 40px !important;
+            padding-left: 40px !important;
+          }
+
+          .px-sm-spacious {
+            padding-right: 48px !important;
+            padding-left: 48px !important;
+          }
+
+          .px-sm-huge {
+            padding-right: 56px !important;
+            padding-left: 56px !important;
+          }
+
+          .px-sm-jumbo {
+            padding-right: 64px !important;
+            padding-left: 64px !important;
+          }
+
+          .py-sm-none {
+            padding-top: 0 !important;
+            padding-bottom: 0 !important;
+          }
+
+          .py-sm-smash {
+            padding-top: 2px !important;
+            padding-bottom: 2px !important;
+          }
+
+          .py-sm-shortest {
+            padding-top: 4px !important;
+            padding-bottom: 4px !important;
+          }
+
+          .py-sm-shorter {
+            padding-top: 8px !important;
+            padding-bottom: 8px !important;
+          }
+
+          .py-sm-short {
+            padding-top: 12px !important;
+            padding-bottom: 12px !important;
+          }
+
+          .py-sm-medium {
+            padding-top: 16px !important;
+            padding-bottom: 16px !important;
+          }
+
+          .py-sm-tall {
+            padding-top: 24px !important;
+            padding-bottom: 24px !important;
+          }
+
+          .py-sm-taller {
+            padding-top: 32px !important;
+            padding-bottom: 32px !important;
+          }
+
+          .py-sm-tallest {
+            padding-top: 40px !important;
+            padding-bottom: 40px !important;
+          }
+
+          .py-sm-spacious {
+            padding-top: 48px !important;
+            padding-bottom: 48px !important;
+          }
+
+          .py-sm-huge {
+            padding-top: 56px !important;
+            padding-bottom: 56px !important;
+          }
+
+          .py-sm-jumbo {
+            padding-top: 64px !important;
+            padding-bottom: 64px !important;
+          }
+
+          .pt-sm-none {
+            padding-top: 0 !important;
+          }
+
+          .pt-sm-smash {
+            padding-top: 2px !important;
+          }
+
+          .pt-sm-shortest {
+            padding-top: 4px !important;
+          }
+
+          .pt-sm-shorter {
+            padding-top: 8px !important;
+          }
+
+          .pt-sm-short {
+            padding-top: 12px !important;
+          }
+
+          .pt-sm-medium {
+            padding-top: 16px !important;
+          }
+
+          .pt-sm-tall {
+            padding-top: 24px !important;
+          }
+
+          .pt-sm-taller {
+            padding-top: 32px !important;
+          }
+
+          .pt-sm-tallest {
+            padding-top: 40px !important;
+          }
+
+          .pt-sm-spacious {
+            padding-top: 48px !important;
+          }
+
+          .pt-sm-huge {
+            padding-top: 56px !important;
+          }
+
+          .pt-sm-jumbo {
+            padding-top: 64px !important;
+          }
+
+          .pe-sm-none {
+            padding-right: 0 !important;
+          }
+
+          .pe-sm-smash {
+            padding-right: 2px !important;
+          }
+
+          .pe-sm-shortest {
+            padding-right: 4px !important;
+          }
+
+          .pe-sm-shorter {
+            padding-right: 8px !important;
+          }
+
+          .pe-sm-short {
+            padding-right: 12px !important;
+          }
+
+          .pe-sm-medium {
+            padding-right: 16px !important;
+          }
+
+          .pe-sm-tall {
+            padding-right: 24px !important;
+          }
+
+          .pe-sm-taller {
+            padding-right: 32px !important;
+          }
+
+          .pe-sm-tallest {
+            padding-right: 40px !important;
+          }
+
+          .pe-sm-spacious {
+            padding-right: 48px !important;
+          }
+
+          .pe-sm-huge {
+            padding-right: 56px !important;
+          }
+
+          .pe-sm-jumbo {
+            padding-right: 64px !important;
+          }
+
+          .pb-sm-none {
+            padding-bottom: 0 !important;
+          }
+
+          .pb-sm-smash {
+            padding-bottom: 2px !important;
+          }
+
+          .pb-sm-shortest {
+            padding-bottom: 4px !important;
+          }
+
+          .pb-sm-shorter {
+            padding-bottom: 8px !important;
+          }
+
+          .pb-sm-short {
+            padding-bottom: 12px !important;
+          }
+
+          .pb-sm-medium {
+            padding-bottom: 16px !important;
+          }
+
+          .pb-sm-tall {
+            padding-bottom: 24px !important;
+          }
+
+          .pb-sm-taller {
+            padding-bottom: 32px !important;
+          }
+
+          .pb-sm-tallest {
+            padding-bottom: 40px !important;
+          }
+
+          .pb-sm-spacious {
+            padding-bottom: 48px !important;
+          }
+
+          .pb-sm-huge {
+            padding-bottom: 56px !important;
+          }
+
+          .pb-sm-jumbo {
+            padding-bottom: 64px !important;
+          }
+
+          .ps-sm-none {
+            padding-left: 0 !important;
+          }
+
+          .ps-sm-smash {
+            padding-left: 2px !important;
+          }
+
+          .ps-sm-shortest {
+            padding-left: 4px !important;
+          }
+
+          .ps-sm-shorter {
+            padding-left: 8px !important;
+          }
+
+          .ps-sm-short {
+            padding-left: 12px !important;
+          }
+
+          .ps-sm-medium {
+            padding-left: 16px !important;
+          }
+
+          .ps-sm-tall {
+            padding-left: 24px !important;
+          }
+
+          .ps-sm-taller {
+            padding-left: 32px !important;
+          }
+
+          .ps-sm-tallest {
+            padding-left: 40px !important;
+          }
+
+          .ps-sm-spacious {
+            padding-left: 48px !important;
+          }
+
+          .ps-sm-huge {
+            padding-left: 56px !important;
+          }
+
+          .ps-sm-jumbo {
+            padding-left: 64px !important;
+          }
+
+          .gap-sm-none {
+            gap: 0 !important;
+          }
+
+          .gap-sm-smash {
+            gap: 2px !important;
+          }
+
+          .gap-sm-shortest {
+            gap: 4px !important;
+          }
+
+          .gap-sm-shorter {
+            gap: 8px !important;
+          }
+
+          .gap-sm-short {
+            gap: 12px !important;
+          }
+
+          .gap-sm-medium {
+            gap: 16px !important;
+          }
+
+          .gap-sm-tall {
+            gap: 24px !important;
+          }
+
+          .gap-sm-taller {
+            gap: 32px !important;
+          }
+
+          .gap-sm-tallest {
+            gap: 40px !important;
+          }
+
+          .gap-sm-spacious {
+            gap: 48px !important;
+          }
+
+          .gap-sm-huge {
+            gap: 56px !important;
+          }
+
+          .gap-sm-jumbo {
+            gap: 64px !important;
+          }
+
+          .row-gap-sm-none {
+            row-gap: 0 !important;
+          }
+
+          .row-gap-sm-smash {
+            row-gap: 2px !important;
+          }
+
+          .row-gap-sm-shortest {
+            row-gap: 4px !important;
+          }
+
+          .row-gap-sm-shorter {
+            row-gap: 8px !important;
+          }
+
+          .row-gap-sm-short {
+            row-gap: 12px !important;
+          }
+
+          .row-gap-sm-medium {
+            row-gap: 16px !important;
+          }
+
+          .row-gap-sm-tall {
+            row-gap: 24px !important;
+          }
+
+          .row-gap-sm-taller {
+            row-gap: 32px !important;
+          }
+
+          .row-gap-sm-tallest {
+            row-gap: 40px !important;
+          }
+
+          .row-gap-sm-spacious {
+            row-gap: 48px !important;
+          }
+
+          .row-gap-sm-huge {
+            row-gap: 56px !important;
+          }
+
+          .row-gap-sm-jumbo {
+            row-gap: 64px !important;
+          }
+
+          .column-gap-sm-none {
+            column-gap: 0 !important;
+          }
+
+          .column-gap-sm-smash {
+            column-gap: 2px !important;
+          }
+
+          .column-gap-sm-shortest {
+            column-gap: 4px !important;
+          }
+
+          .column-gap-sm-shorter {
+            column-gap: 8px !important;
+          }
+
+          .column-gap-sm-short {
+            column-gap: 12px !important;
+          }
+
+          .column-gap-sm-medium {
+            column-gap: 16px !important;
+          }
+
+          .column-gap-sm-tall {
+            column-gap: 24px !important;
+          }
+
+          .column-gap-sm-taller {
+            column-gap: 32px !important;
+          }
+
+          .column-gap-sm-tallest {
+            column-gap: 40px !important;
+          }
+
+          .column-gap-sm-spacious {
+            column-gap: 48px !important;
+          }
+
+          .column-gap-sm-huge {
+            column-gap: 56px !important;
+          }
+
+          .column-gap-sm-jumbo {
+            column-gap: 64px !important;
+          }
+        }
+
+        @media (min-width: 736px) {
+          .m-md-0 {
+            margin: 0 !important;
+          }
+
+          .m-md-1 {
+            margin: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .m-md-2 {
+            margin: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .m-md-3 {
+            margin: 1.5rem !important;
+          }
+
+          .m-md-4 {
+            margin: 2.5rem !important;
+          }
+
+          .m-md-5 {
+            margin: 3.5rem !important;
+          }
+
+          .mx-md-0 {
+            margin-right: 0 !important;
+            margin-left: 0 !important;
+          }
+
+          .mx-md-1 {
+            margin-right: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+            margin-left: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .mx-md-2 {
+            margin-right: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+            margin-left: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .mx-md-3 {
+            margin-right: 1.5rem !important;
+            margin-left: 1.5rem !important;
+          }
+
+          .mx-md-4 {
+            margin-right: 2.5rem !important;
+            margin-left: 2.5rem !important;
+          }
+
+          .mx-md-5 {
+            margin-right: 3.5rem !important;
+            margin-left: 3.5rem !important;
+          }
+
+          .my-md-0 {
+            margin-top: 0 !important;
+            margin-bottom: 0 !important;
+          }
+
+          .my-md-1 {
+            margin-top: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+            margin-bottom: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .my-md-2 {
+            margin-top: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+            margin-bottom: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .my-md-3 {
+            margin-top: 1.5rem !important;
+            margin-bottom: 1.5rem !important;
+          }
+
+          .my-md-4 {
+            margin-top: 2.5rem !important;
+            margin-bottom: 2.5rem !important;
+          }
+
+          .my-md-5 {
+            margin-top: 3.5rem !important;
+            margin-bottom: 3.5rem !important;
+          }
+
+          .mt-md-0 {
+            margin-top: 0 !important;
+          }
+
+          .mt-md-1 {
+            margin-top: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .mt-md-2 {
+            margin-top: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .mt-md-3 {
+            margin-top: 1.5rem !important;
+          }
+
+          .mt-md-4 {
+            margin-top: 2.5rem !important;
+          }
+
+          .mt-md-5 {
+            margin-top: 3.5rem !important;
+          }
+
+          .me-md-0 {
+            margin-right: 0 !important;
+          }
+
+          .me-md-1 {
+            margin-right: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .me-md-2 {
+            margin-right: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .me-md-3 {
+            margin-right: 1.5rem !important;
+          }
+
+          .me-md-4 {
+            margin-right: 2.5rem !important;
+          }
+
+          .me-md-5 {
+            margin-right: 3.5rem !important;
+          }
+
+          .mb-md-0 {
+            margin-bottom: 0 !important;
+          }
+
+          .mb-md-1 {
+            margin-bottom: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .mb-md-2 {
+            margin-bottom: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .mb-md-3 {
+            margin-bottom: 1.5rem !important;
+          }
+
+          .mb-md-4 {
+            margin-bottom: 2.5rem !important;
+          }
+
+          .mb-md-5 {
+            margin-bottom: 3.5rem !important;
+          }
+
+          .ms-md-0 {
+            margin-left: 0 !important;
+          }
+
+          .ms-md-1 {
+            margin-left: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .ms-md-2 {
+            margin-left: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .ms-md-3 {
+            margin-left: 1.5rem !important;
+          }
+
+          .ms-md-4 {
+            margin-left: 2.5rem !important;
+          }
+
+          .ms-md-5 {
+            margin-left: 3.5rem !important;
+          }
+
+          .p-md-0 {
+            padding: 0 !important;
+          }
+
+          .p-md-1 {
+            padding: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .p-md-2 {
+            padding: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .p-md-3 {
+            padding: 1.5rem !important;
+          }
+
+          .p-md-4 {
+            padding: 2.5rem !important;
+          }
+
+          .p-md-5 {
+            padding: 3.5rem !important;
+          }
+
+          .px-md-0 {
+            padding-right: 0 !important;
+            padding-left: 0 !important;
+          }
+
+          .px-md-1 {
+            padding-right: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+            padding-left: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .px-md-2 {
+            padding-right: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+            padding-left: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .px-md-3 {
+            padding-right: 1.5rem !important;
+            padding-left: 1.5rem !important;
+          }
+
+          .px-md-4 {
+            padding-right: 2.5rem !important;
+            padding-left: 2.5rem !important;
+          }
+
+          .px-md-5 {
+            padding-right: 3.5rem !important;
+            padding-left: 3.5rem !important;
+          }
+
+          .py-md-0 {
+            padding-top: 0 !important;
+            padding-bottom: 0 !important;
+          }
+
+          .py-md-1 {
+            padding-top: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+            padding-bottom: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .py-md-2 {
+            padding-top: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+            padding-bottom: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .py-md-3 {
+            padding-top: 1.5rem !important;
+            padding-bottom: 1.5rem !important;
+          }
+
+          .py-md-4 {
+            padding-top: 2.5rem !important;
+            padding-bottom: 2.5rem !important;
+          }
+
+          .py-md-5 {
+            padding-top: 3.5rem !important;
+            padding-bottom: 3.5rem !important;
+          }
+
+          .pt-md-0 {
+            padding-top: 0 !important;
+          }
+
+          .pt-md-1 {
+            padding-top: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .pt-md-2 {
+            padding-top: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .pt-md-3 {
+            padding-top: 1.5rem !important;
+          }
+
+          .pt-md-4 {
+            padding-top: 2.5rem !important;
+          }
+
+          .pt-md-5 {
+            padding-top: 3.5rem !important;
+          }
+
+          .pe-md-0 {
+            padding-right: 0 !important;
+          }
+
+          .pe-md-1 {
+            padding-right: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .pe-md-2 {
+            padding-right: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .pe-md-3 {
+            padding-right: 1.5rem !important;
+          }
+
+          .pe-md-4 {
+            padding-right: 2.5rem !important;
+          }
+
+          .pe-md-5 {
+            padding-right: 3.5rem !important;
+          }
+
+          .pb-md-0 {
+            padding-bottom: 0 !important;
+          }
+
+          .pb-md-1 {
+            padding-bottom: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .pb-md-2 {
+            padding-bottom: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .pb-md-3 {
+            padding-bottom: 1.5rem !important;
+          }
+
+          .pb-md-4 {
+            padding-bottom: 2.5rem !important;
+          }
+
+          .pb-md-5 {
+            padding-bottom: 3.5rem !important;
+          }
+
+          .ps-md-0 {
+            padding-left: 0 !important;
+          }
+
+          .ps-md-1 {
+            padding-left: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .ps-md-2 {
+            padding-left: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .ps-md-3 {
+            padding-left: 1.5rem !important;
+          }
+
+          .ps-md-4 {
+            padding-left: 2.5rem !important;
+          }
+
+          .ps-md-5 {
+            padding-left: 3.5rem !important;
+          }
+
+          .gap-md-0 {
+            gap: 0 !important;
+          }
+
+          .gap-md-1 {
+            gap: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .gap-md-2 {
+            gap: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .gap-md-3 {
+            gap: 1.5rem !important;
+          }
+
+          .gap-md-4 {
+            gap: 2.5rem !important;
+          }
+
+          .gap-md-5 {
+            gap: 3.5rem !important;
+          }
+
+          .row-gap-md-0 {
+            row-gap: 0 !important;
+          }
+
+          .row-gap-md-1 {
+            row-gap: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .row-gap-md-2 {
+            row-gap: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .row-gap-md-3 {
+            row-gap: 1.5rem !important;
+          }
+
+          .row-gap-md-4 {
+            row-gap: 2.5rem !important;
+          }
+
+          .row-gap-md-5 {
+            row-gap: 3.5rem !important;
+          }
+
+          .column-gap-md-0 {
+            column-gap: 0 !important;
+          }
+
+          .column-gap-md-1 {
+            column-gap: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .column-gap-md-2 {
+            column-gap: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .column-gap-md-3 {
+            column-gap: 1.5rem !important;
+          }
+
+          .column-gap-md-4 {
+            column-gap: 2.5rem !important;
+          }
+
+          .column-gap-md-5 {
+            column-gap: 3.5rem !important;
+          }
+
+          .m-md-none {
+            margin: 0 !important;
+          }
+
+          .m-md-smash {
+            margin: 2px !important;
+          }
+
+          .m-md-shortest {
+            margin: 4px !important;
+          }
+
+          .m-md-shorter {
+            margin: 8px !important;
+          }
+
+          .m-md-short {
+            margin: 12px !important;
+          }
+
+          .m-md-medium {
+            margin: 16px !important;
+          }
+
+          .m-md-tall {
+            margin: 24px !important;
+          }
+
+          .m-md-taller {
+            margin: 32px !important;
+          }
+
+          .m-md-tallest {
+            margin: 40px !important;
+          }
+
+          .m-md-spacious {
+            margin: 48px !important;
+          }
+
+          .m-md-huge {
+            margin: 56px !important;
+          }
+
+          .m-md-jumbo {
+            margin: 64px !important;
+          }
+
+          .m-md-auto {
+            margin: auto !important;
+          }
+
+          .mx-md-none {
+            margin-right: 0 !important;
+            margin-left: 0 !important;
+          }
+
+          .mx-md-smash {
+            margin-right: 2px !important;
+            margin-left: 2px !important;
+          }
+
+          .mx-md-shortest {
+            margin-right: 4px !important;
+            margin-left: 4px !important;
+          }
+
+          .mx-md-shorter {
+            margin-right: 8px !important;
+            margin-left: 8px !important;
+          }
+
+          .mx-md-short {
+            margin-right: 12px !important;
+            margin-left: 12px !important;
+          }
+
+          .mx-md-medium {
+            margin-right: 16px !important;
+            margin-left: 16px !important;
+          }
+
+          .mx-md-tall {
+            margin-right: 24px !important;
+            margin-left: 24px !important;
+          }
+
+          .mx-md-taller {
+            margin-right: 32px !important;
+            margin-left: 32px !important;
+          }
+
+          .mx-md-tallest {
+            margin-right: 40px !important;
+            margin-left: 40px !important;
+          }
+
+          .mx-md-spacious {
+            margin-right: 48px !important;
+            margin-left: 48px !important;
+          }
+
+          .mx-md-huge {
+            margin-right: 56px !important;
+            margin-left: 56px !important;
+          }
+
+          .mx-md-jumbo {
+            margin-right: 64px !important;
+            margin-left: 64px !important;
+          }
+
+          .mx-md-auto {
+            margin-right: auto !important;
+            margin-left: auto !important;
+          }
+
+          .my-md-none {
+            margin-top: 0 !important;
+            margin-bottom: 0 !important;
+          }
+
+          .my-md-smash {
+            margin-top: 2px !important;
+            margin-bottom: 2px !important;
+          }
+
+          .my-md-shortest {
+            margin-top: 4px !important;
+            margin-bottom: 4px !important;
+          }
+
+          .my-md-shorter {
+            margin-top: 8px !important;
+            margin-bottom: 8px !important;
+          }
+
+          .my-md-short {
+            margin-top: 12px !important;
+            margin-bottom: 12px !important;
+          }
+
+          .my-md-medium {
+            margin-top: 16px !important;
+            margin-bottom: 16px !important;
+          }
+
+          .my-md-tall {
+            margin-top: 24px !important;
+            margin-bottom: 24px !important;
+          }
+
+          .my-md-taller {
+            margin-top: 32px !important;
+            margin-bottom: 32px !important;
+          }
+
+          .my-md-tallest {
+            margin-top: 40px !important;
+            margin-bottom: 40px !important;
+          }
+
+          .my-md-spacious {
+            margin-top: 48px !important;
+            margin-bottom: 48px !important;
+          }
+
+          .my-md-huge {
+            margin-top: 56px !important;
+            margin-bottom: 56px !important;
+          }
+
+          .my-md-jumbo {
+            margin-top: 64px !important;
+            margin-bottom: 64px !important;
+          }
+
+          .my-md-auto {
+            margin-top: auto !important;
+            margin-bottom: auto !important;
+          }
+
+          .mt-md-none {
+            margin-top: 0 !important;
+          }
+
+          .mt-md-smash {
+            margin-top: 2px !important;
+          }
+
+          .mt-md-shortest {
+            margin-top: 4px !important;
+          }
+
+          .mt-md-shorter {
+            margin-top: 8px !important;
+          }
+
+          .mt-md-short {
+            margin-top: 12px !important;
+          }
+
+          .mt-md-medium {
+            margin-top: 16px !important;
+          }
+
+          .mt-md-tall {
+            margin-top: 24px !important;
+          }
+
+          .mt-md-taller {
+            margin-top: 32px !important;
+          }
+
+          .mt-md-tallest {
+            margin-top: 40px !important;
+          }
+
+          .mt-md-spacious {
+            margin-top: 48px !important;
+          }
+
+          .mt-md-huge {
+            margin-top: 56px !important;
+          }
+
+          .mt-md-jumbo {
+            margin-top: 64px !important;
+          }
+
+          .mt-md-auto {
+            margin-top: auto !important;
+          }
+
+          .me-md-none {
+            margin-right: 0 !important;
+          }
+
+          .me-md-smash {
+            margin-right: 2px !important;
+          }
+
+          .me-md-shortest {
+            margin-right: 4px !important;
+          }
+
+          .me-md-shorter {
+            margin-right: 8px !important;
+          }
+
+          .me-md-short {
+            margin-right: 12px !important;
+          }
+
+          .me-md-medium {
+            margin-right: 16px !important;
+          }
+
+          .me-md-tall {
+            margin-right: 24px !important;
+          }
+
+          .me-md-taller {
+            margin-right: 32px !important;
+          }
+
+          .me-md-tallest {
+            margin-right: 40px !important;
+          }
+
+          .me-md-spacious {
+            margin-right: 48px !important;
+          }
+
+          .me-md-huge {
+            margin-right: 56px !important;
+          }
+
+          .me-md-jumbo {
+            margin-right: 64px !important;
+          }
+
+          .me-md-auto {
+            margin-right: auto !important;
+          }
+
+          .mb-md-none {
+            margin-bottom: 0 !important;
+          }
+
+          .mb-md-smash {
+            margin-bottom: 2px !important;
+          }
+
+          .mb-md-shortest {
+            margin-bottom: 4px !important;
+          }
+
+          .mb-md-shorter {
+            margin-bottom: 8px !important;
+          }
+
+          .mb-md-short {
+            margin-bottom: 12px !important;
+          }
+
+          .mb-md-medium {
+            margin-bottom: 16px !important;
+          }
+
+          .mb-md-tall {
+            margin-bottom: 24px !important;
+          }
+
+          .mb-md-taller {
+            margin-bottom: 32px !important;
+          }
+
+          .mb-md-tallest {
+            margin-bottom: 40px !important;
+          }
+
+          .mb-md-spacious {
+            margin-bottom: 48px !important;
+          }
+
+          .mb-md-huge {
+            margin-bottom: 56px !important;
+          }
+
+          .mb-md-jumbo {
+            margin-bottom: 64px !important;
+          }
+
+          .mb-md-auto {
+            margin-bottom: auto !important;
+          }
+
+          .ms-md-none {
+            margin-left: 0 !important;
+          }
+
+          .ms-md-smash {
+            margin-left: 2px !important;
+          }
+
+          .ms-md-shortest {
+            margin-left: 4px !important;
+          }
+
+          .ms-md-shorter {
+            margin-left: 8px !important;
+          }
+
+          .ms-md-short {
+            margin-left: 12px !important;
+          }
+
+          .ms-md-medium {
+            margin-left: 16px !important;
+          }
+
+          .ms-md-tall {
+            margin-left: 24px !important;
+          }
+
+          .ms-md-taller {
+            margin-left: 32px !important;
+          }
+
+          .ms-md-tallest {
+            margin-left: 40px !important;
+          }
+
+          .ms-md-spacious {
+            margin-left: 48px !important;
+          }
+
+          .ms-md-huge {
+            margin-left: 56px !important;
+          }
+
+          .ms-md-jumbo {
+            margin-left: 64px !important;
+          }
+
+          .ms-md-auto {
+            margin-left: auto !important;
+          }
+
+          .p-md-none {
+            padding: 0 !important;
+          }
+
+          .p-md-smash {
+            padding: 2px !important;
+          }
+
+          .p-md-shortest {
+            padding: 4px !important;
+          }
+
+          .p-md-shorter {
+            padding: 8px !important;
+          }
+
+          .p-md-short {
+            padding: 12px !important;
+          }
+
+          .p-md-medium {
+            padding: 16px !important;
+          }
+
+          .p-md-tall {
+            padding: 24px !important;
+          }
+
+          .p-md-taller {
+            padding: 32px !important;
+          }
+
+          .p-md-tallest {
+            padding: 40px !important;
+          }
+
+          .p-md-spacious {
+            padding: 48px !important;
+          }
+
+          .p-md-huge {
+            padding: 56px !important;
+          }
+
+          .p-md-jumbo {
+            padding: 64px !important;
+          }
+
+          .px-md-none {
+            padding-right: 0 !important;
+            padding-left: 0 !important;
+          }
+
+          .px-md-smash {
+            padding-right: 2px !important;
+            padding-left: 2px !important;
+          }
+
+          .px-md-shortest {
+            padding-right: 4px !important;
+            padding-left: 4px !important;
+          }
+
+          .px-md-shorter {
+            padding-right: 8px !important;
+            padding-left: 8px !important;
+          }
+
+          .px-md-short {
+            padding-right: 12px !important;
+            padding-left: 12px !important;
+          }
+
+          .px-md-medium {
+            padding-right: 16px !important;
+            padding-left: 16px !important;
+          }
+
+          .px-md-tall {
+            padding-right: 24px !important;
+            padding-left: 24px !important;
+          }
+
+          .px-md-taller {
+            padding-right: 32px !important;
+            padding-left: 32px !important;
+          }
+
+          .px-md-tallest {
+            padding-right: 40px !important;
+            padding-left: 40px !important;
+          }
+
+          .px-md-spacious {
+            padding-right: 48px !important;
+            padding-left: 48px !important;
+          }
+
+          .px-md-huge {
+            padding-right: 56px !important;
+            padding-left: 56px !important;
+          }
+
+          .px-md-jumbo {
+            padding-right: 64px !important;
+            padding-left: 64px !important;
+          }
+
+          .py-md-none {
+            padding-top: 0 !important;
+            padding-bottom: 0 !important;
+          }
+
+          .py-md-smash {
+            padding-top: 2px !important;
+            padding-bottom: 2px !important;
+          }
+
+          .py-md-shortest {
+            padding-top: 4px !important;
+            padding-bottom: 4px !important;
+          }
+
+          .py-md-shorter {
+            padding-top: 8px !important;
+            padding-bottom: 8px !important;
+          }
+
+          .py-md-short {
+            padding-top: 12px !important;
+            padding-bottom: 12px !important;
+          }
+
+          .py-md-medium {
+            padding-top: 16px !important;
+            padding-bottom: 16px !important;
+          }
+
+          .py-md-tall {
+            padding-top: 24px !important;
+            padding-bottom: 24px !important;
+          }
+
+          .py-md-taller {
+            padding-top: 32px !important;
+            padding-bottom: 32px !important;
+          }
+
+          .py-md-tallest {
+            padding-top: 40px !important;
+            padding-bottom: 40px !important;
+          }
+
+          .py-md-spacious {
+            padding-top: 48px !important;
+            padding-bottom: 48px !important;
+          }
+
+          .py-md-huge {
+            padding-top: 56px !important;
+            padding-bottom: 56px !important;
+          }
+
+          .py-md-jumbo {
+            padding-top: 64px !important;
+            padding-bottom: 64px !important;
+          }
+
+          .pt-md-none {
+            padding-top: 0 !important;
+          }
+
+          .pt-md-smash {
+            padding-top: 2px !important;
+          }
+
+          .pt-md-shortest {
+            padding-top: 4px !important;
+          }
+
+          .pt-md-shorter {
+            padding-top: 8px !important;
+          }
+
+          .pt-md-short {
+            padding-top: 12px !important;
+          }
+
+          .pt-md-medium {
+            padding-top: 16px !important;
+          }
+
+          .pt-md-tall {
+            padding-top: 24px !important;
+          }
+
+          .pt-md-taller {
+            padding-top: 32px !important;
+          }
+
+          .pt-md-tallest {
+            padding-top: 40px !important;
+          }
+
+          .pt-md-spacious {
+            padding-top: 48px !important;
+          }
+
+          .pt-md-huge {
+            padding-top: 56px !important;
+          }
+
+          .pt-md-jumbo {
+            padding-top: 64px !important;
+          }
+
+          .pe-md-none {
+            padding-right: 0 !important;
+          }
+
+          .pe-md-smash {
+            padding-right: 2px !important;
+          }
+
+          .pe-md-shortest {
+            padding-right: 4px !important;
+          }
+
+          .pe-md-shorter {
+            padding-right: 8px !important;
+          }
+
+          .pe-md-short {
+            padding-right: 12px !important;
+          }
+
+          .pe-md-medium {
+            padding-right: 16px !important;
+          }
+
+          .pe-md-tall {
+            padding-right: 24px !important;
+          }
+
+          .pe-md-taller {
+            padding-right: 32px !important;
+          }
+
+          .pe-md-tallest {
+            padding-right: 40px !important;
+          }
+
+          .pe-md-spacious {
+            padding-right: 48px !important;
+          }
+
+          .pe-md-huge {
+            padding-right: 56px !important;
+          }
+
+          .pe-md-jumbo {
+            padding-right: 64px !important;
+          }
+
+          .pb-md-none {
+            padding-bottom: 0 !important;
+          }
+
+          .pb-md-smash {
+            padding-bottom: 2px !important;
+          }
+
+          .pb-md-shortest {
+            padding-bottom: 4px !important;
+          }
+
+          .pb-md-shorter {
+            padding-bottom: 8px !important;
+          }
+
+          .pb-md-short {
+            padding-bottom: 12px !important;
+          }
+
+          .pb-md-medium {
+            padding-bottom: 16px !important;
+          }
+
+          .pb-md-tall {
+            padding-bottom: 24px !important;
+          }
+
+          .pb-md-taller {
+            padding-bottom: 32px !important;
+          }
+
+          .pb-md-tallest {
+            padding-bottom: 40px !important;
+          }
+
+          .pb-md-spacious {
+            padding-bottom: 48px !important;
+          }
+
+          .pb-md-huge {
+            padding-bottom: 56px !important;
+          }
+
+          .pb-md-jumbo {
+            padding-bottom: 64px !important;
+          }
+
+          .ps-md-none {
+            padding-left: 0 !important;
+          }
+
+          .ps-md-smash {
+            padding-left: 2px !important;
+          }
+
+          .ps-md-shortest {
+            padding-left: 4px !important;
+          }
+
+          .ps-md-shorter {
+            padding-left: 8px !important;
+          }
+
+          .ps-md-short {
+            padding-left: 12px !important;
+          }
+
+          .ps-md-medium {
+            padding-left: 16px !important;
+          }
+
+          .ps-md-tall {
+            padding-left: 24px !important;
+          }
+
+          .ps-md-taller {
+            padding-left: 32px !important;
+          }
+
+          .ps-md-tallest {
+            padding-left: 40px !important;
+          }
+
+          .ps-md-spacious {
+            padding-left: 48px !important;
+          }
+
+          .ps-md-huge {
+            padding-left: 56px !important;
+          }
+
+          .ps-md-jumbo {
+            padding-left: 64px !important;
+          }
+
+          .gap-md-none {
+            gap: 0 !important;
+          }
+
+          .gap-md-smash {
+            gap: 2px !important;
+          }
+
+          .gap-md-shortest {
+            gap: 4px !important;
+          }
+
+          .gap-md-shorter {
+            gap: 8px !important;
+          }
+
+          .gap-md-short {
+            gap: 12px !important;
+          }
+
+          .gap-md-medium {
+            gap: 16px !important;
+          }
+
+          .gap-md-tall {
+            gap: 24px !important;
+          }
+
+          .gap-md-taller {
+            gap: 32px !important;
+          }
+
+          .gap-md-tallest {
+            gap: 40px !important;
+          }
+
+          .gap-md-spacious {
+            gap: 48px !important;
+          }
+
+          .gap-md-huge {
+            gap: 56px !important;
+          }
+
+          .gap-md-jumbo {
+            gap: 64px !important;
+          }
+
+          .row-gap-md-none {
+            row-gap: 0 !important;
+          }
+
+          .row-gap-md-smash {
+            row-gap: 2px !important;
+          }
+
+          .row-gap-md-shortest {
+            row-gap: 4px !important;
+          }
+
+          .row-gap-md-shorter {
+            row-gap: 8px !important;
+          }
+
+          .row-gap-md-short {
+            row-gap: 12px !important;
+          }
+
+          .row-gap-md-medium {
+            row-gap: 16px !important;
+          }
+
+          .row-gap-md-tall {
+            row-gap: 24px !important;
+          }
+
+          .row-gap-md-taller {
+            row-gap: 32px !important;
+          }
+
+          .row-gap-md-tallest {
+            row-gap: 40px !important;
+          }
+
+          .row-gap-md-spacious {
+            row-gap: 48px !important;
+          }
+
+          .row-gap-md-huge {
+            row-gap: 56px !important;
+          }
+
+          .row-gap-md-jumbo {
+            row-gap: 64px !important;
+          }
+
+          .column-gap-md-none {
+            column-gap: 0 !important;
+          }
+
+          .column-gap-md-smash {
+            column-gap: 2px !important;
+          }
+
+          .column-gap-md-shortest {
+            column-gap: 4px !important;
+          }
+
+          .column-gap-md-shorter {
+            column-gap: 8px !important;
+          }
+
+          .column-gap-md-short {
+            column-gap: 12px !important;
+          }
+
+          .column-gap-md-medium {
+            column-gap: 16px !important;
+          }
+
+          .column-gap-md-tall {
+            column-gap: 24px !important;
+          }
+
+          .column-gap-md-taller {
+            column-gap: 32px !important;
+          }
+
+          .column-gap-md-tallest {
+            column-gap: 40px !important;
+          }
+
+          .column-gap-md-spacious {
+            column-gap: 48px !important;
+          }
+
+          .column-gap-md-huge {
+            column-gap: 56px !important;
+          }
+
+          .column-gap-md-jumbo {
+            column-gap: 64px !important;
+          }
+        }
+
+        @media (min-width: 1024px) {
+          .m-lg-0 {
+            margin: 0 !important;
+          }
+
+          .m-lg-1 {
+            margin: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .m-lg-2 {
+            margin: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .m-lg-3 {
+            margin: 1.5rem !important;
+          }
+
+          .m-lg-4 {
+            margin: 2.5rem !important;
+          }
+
+          .m-lg-5 {
+            margin: 3.5rem !important;
+          }
+
+          .mx-lg-0 {
+            margin-right: 0 !important;
+            margin-left: 0 !important;
+          }
+
+          .mx-lg-1 {
+            margin-right: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+            margin-left: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .mx-lg-2 {
+            margin-right: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+            margin-left: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .mx-lg-3 {
+            margin-right: 1.5rem !important;
+            margin-left: 1.5rem !important;
+          }
+
+          .mx-lg-4 {
+            margin-right: 2.5rem !important;
+            margin-left: 2.5rem !important;
+          }
+
+          .mx-lg-5 {
+            margin-right: 3.5rem !important;
+            margin-left: 3.5rem !important;
+          }
+
+          .my-lg-0 {
+            margin-top: 0 !important;
+            margin-bottom: 0 !important;
+          }
+
+          .my-lg-1 {
+            margin-top: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+            margin-bottom: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .my-lg-2 {
+            margin-top: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+            margin-bottom: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .my-lg-3 {
+            margin-top: 1.5rem !important;
+            margin-bottom: 1.5rem !important;
+          }
+
+          .my-lg-4 {
+            margin-top: 2.5rem !important;
+            margin-bottom: 2.5rem !important;
+          }
+
+          .my-lg-5 {
+            margin-top: 3.5rem !important;
+            margin-bottom: 3.5rem !important;
+          }
+
+          .mt-lg-0 {
+            margin-top: 0 !important;
+          }
+
+          .mt-lg-1 {
+            margin-top: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .mt-lg-2 {
+            margin-top: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .mt-lg-3 {
+            margin-top: 1.5rem !important;
+          }
+
+          .mt-lg-4 {
+            margin-top: 2.5rem !important;
+          }
+
+          .mt-lg-5 {
+            margin-top: 3.5rem !important;
+          }
+
+          .me-lg-0 {
+            margin-right: 0 !important;
+          }
+
+          .me-lg-1 {
+            margin-right: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .me-lg-2 {
+            margin-right: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .me-lg-3 {
+            margin-right: 1.5rem !important;
+          }
+
+          .me-lg-4 {
+            margin-right: 2.5rem !important;
+          }
+
+          .me-lg-5 {
+            margin-right: 3.5rem !important;
+          }
+
+          .mb-lg-0 {
+            margin-bottom: 0 !important;
+          }
+
+          .mb-lg-1 {
+            margin-bottom: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .mb-lg-2 {
+            margin-bottom: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .mb-lg-3 {
+            margin-bottom: 1.5rem !important;
+          }
+
+          .mb-lg-4 {
+            margin-bottom: 2.5rem !important;
+          }
+
+          .mb-lg-5 {
+            margin-bottom: 3.5rem !important;
+          }
+
+          .ms-lg-0 {
+            margin-left: 0 !important;
+          }
+
+          .ms-lg-1 {
+            margin-left: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .ms-lg-2 {
+            margin-left: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .ms-lg-3 {
+            margin-left: 1.5rem !important;
+          }
+
+          .ms-lg-4 {
+            margin-left: 2.5rem !important;
+          }
+
+          .ms-lg-5 {
+            margin-left: 3.5rem !important;
+          }
+
+          .p-lg-0 {
+            padding: 0 !important;
+          }
+
+          .p-lg-1 {
+            padding: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .p-lg-2 {
+            padding: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .p-lg-3 {
+            padding: 1.5rem !important;
+          }
+
+          .p-lg-4 {
+            padding: 2.5rem !important;
+          }
+
+          .p-lg-5 {
+            padding: 3.5rem !important;
+          }
+
+          .px-lg-0 {
+            padding-right: 0 !important;
+            padding-left: 0 !important;
+          }
+
+          .px-lg-1 {
+            padding-right: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+            padding-left: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .px-lg-2 {
+            padding-right: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+            padding-left: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .px-lg-3 {
+            padding-right: 1.5rem !important;
+            padding-left: 1.5rem !important;
+          }
+
+          .px-lg-4 {
+            padding-right: 2.5rem !important;
+            padding-left: 2.5rem !important;
+          }
+
+          .px-lg-5 {
+            padding-right: 3.5rem !important;
+            padding-left: 3.5rem !important;
+          }
+
+          .py-lg-0 {
+            padding-top: 0 !important;
+            padding-bottom: 0 !important;
+          }
+
+          .py-lg-1 {
+            padding-top: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+            padding-bottom: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .py-lg-2 {
+            padding-top: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+            padding-bottom: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .py-lg-3 {
+            padding-top: 1.5rem !important;
+            padding-bottom: 1.5rem !important;
+          }
+
+          .py-lg-4 {
+            padding-top: 2.5rem !important;
+            padding-bottom: 2.5rem !important;
+          }
+
+          .py-lg-5 {
+            padding-top: 3.5rem !important;
+            padding-bottom: 3.5rem !important;
+          }
+
+          .pt-lg-0 {
+            padding-top: 0 !important;
+          }
+
+          .pt-lg-1 {
+            padding-top: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .pt-lg-2 {
+            padding-top: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .pt-lg-3 {
+            padding-top: 1.5rem !important;
+          }
+
+          .pt-lg-4 {
+            padding-top: 2.5rem !important;
+          }
+
+          .pt-lg-5 {
+            padding-top: 3.5rem !important;
+          }
+
+          .pe-lg-0 {
+            padding-right: 0 !important;
+          }
+
+          .pe-lg-1 {
+            padding-right: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .pe-lg-2 {
+            padding-right: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .pe-lg-3 {
+            padding-right: 1.5rem !important;
+          }
+
+          .pe-lg-4 {
+            padding-right: 2.5rem !important;
+          }
+
+          .pe-lg-5 {
+            padding-right: 3.5rem !important;
+          }
+
+          .pb-lg-0 {
+            padding-bottom: 0 !important;
+          }
+
+          .pb-lg-1 {
+            padding-bottom: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .pb-lg-2 {
+            padding-bottom: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .pb-lg-3 {
+            padding-bottom: 1.5rem !important;
+          }
+
+          .pb-lg-4 {
+            padding-bottom: 2.5rem !important;
+          }
+
+          .pb-lg-5 {
+            padding-bottom: 3.5rem !important;
+          }
+
+          .ps-lg-0 {
+            padding-left: 0 !important;
+          }
+
+          .ps-lg-1 {
+            padding-left: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .ps-lg-2 {
+            padding-left: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .ps-lg-3 {
+            padding-left: 1.5rem !important;
+          }
+
+          .ps-lg-4 {
+            padding-left: 2.5rem !important;
+          }
+
+          .ps-lg-5 {
+            padding-left: 3.5rem !important;
+          }
+
+          .gap-lg-0 {
+            gap: 0 !important;
+          }
+
+          .gap-lg-1 {
+            gap: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .gap-lg-2 {
+            gap: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .gap-lg-3 {
+            gap: 1.5rem !important;
+          }
+
+          .gap-lg-4 {
+            gap: 2.5rem !important;
+          }
+
+          .gap-lg-5 {
+            gap: 3.5rem !important;
+          }
+
+          .row-gap-lg-0 {
+            row-gap: 0 !important;
+          }
+
+          .row-gap-lg-1 {
+            row-gap: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .row-gap-lg-2 {
+            row-gap: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .row-gap-lg-3 {
+            row-gap: 1.5rem !important;
+          }
+
+          .row-gap-lg-4 {
+            row-gap: 2.5rem !important;
+          }
+
+          .row-gap-lg-5 {
+            row-gap: 3.5rem !important;
+          }
+
+          .column-gap-lg-0 {
+            column-gap: 0 !important;
+          }
+
+          .column-gap-lg-1 {
+            column-gap: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .column-gap-lg-2 {
+            column-gap: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .column-gap-lg-3 {
+            column-gap: 1.5rem !important;
+          }
+
+          .column-gap-lg-4 {
+            column-gap: 2.5rem !important;
+          }
+
+          .column-gap-lg-5 {
+            column-gap: 3.5rem !important;
+          }
+
+          .m-lg-none {
+            margin: 0 !important;
+          }
+
+          .m-lg-smash {
+            margin: 2px !important;
+          }
+
+          .m-lg-shortest {
+            margin: 4px !important;
+          }
+
+          .m-lg-shorter {
+            margin: 8px !important;
+          }
+
+          .m-lg-short {
+            margin: 12px !important;
+          }
+
+          .m-lg-medium {
+            margin: 16px !important;
+          }
+
+          .m-lg-tall {
+            margin: 24px !important;
+          }
+
+          .m-lg-taller {
+            margin: 32px !important;
+          }
+
+          .m-lg-tallest {
+            margin: 40px !important;
+          }
+
+          .m-lg-spacious {
+            margin: 48px !important;
+          }
+
+          .m-lg-huge {
+            margin: 56px !important;
+          }
+
+          .m-lg-jumbo {
+            margin: 64px !important;
+          }
+
+          .m-lg-auto {
+            margin: auto !important;
+          }
+
+          .mx-lg-none {
+            margin-right: 0 !important;
+            margin-left: 0 !important;
+          }
+
+          .mx-lg-smash {
+            margin-right: 2px !important;
+            margin-left: 2px !important;
+          }
+
+          .mx-lg-shortest {
+            margin-right: 4px !important;
+            margin-left: 4px !important;
+          }
+
+          .mx-lg-shorter {
+            margin-right: 8px !important;
+            margin-left: 8px !important;
+          }
+
+          .mx-lg-short {
+            margin-right: 12px !important;
+            margin-left: 12px !important;
+          }
+
+          .mx-lg-medium {
+            margin-right: 16px !important;
+            margin-left: 16px !important;
+          }
+
+          .mx-lg-tall {
+            margin-right: 24px !important;
+            margin-left: 24px !important;
+          }
+
+          .mx-lg-taller {
+            margin-right: 32px !important;
+            margin-left: 32px !important;
+          }
+
+          .mx-lg-tallest {
+            margin-right: 40px !important;
+            margin-left: 40px !important;
+          }
+
+          .mx-lg-spacious {
+            margin-right: 48px !important;
+            margin-left: 48px !important;
+          }
+
+          .mx-lg-huge {
+            margin-right: 56px !important;
+            margin-left: 56px !important;
+          }
+
+          .mx-lg-jumbo {
+            margin-right: 64px !important;
+            margin-left: 64px !important;
+          }
+
+          .mx-lg-auto {
+            margin-right: auto !important;
+            margin-left: auto !important;
+          }
+
+          .my-lg-none {
+            margin-top: 0 !important;
+            margin-bottom: 0 !important;
+          }
+
+          .my-lg-smash {
+            margin-top: 2px !important;
+            margin-bottom: 2px !important;
+          }
+
+          .my-lg-shortest {
+            margin-top: 4px !important;
+            margin-bottom: 4px !important;
+          }
+
+          .my-lg-shorter {
+            margin-top: 8px !important;
+            margin-bottom: 8px !important;
+          }
+
+          .my-lg-short {
+            margin-top: 12px !important;
+            margin-bottom: 12px !important;
+          }
+
+          .my-lg-medium {
+            margin-top: 16px !important;
+            margin-bottom: 16px !important;
+          }
+
+          .my-lg-tall {
+            margin-top: 24px !important;
+            margin-bottom: 24px !important;
+          }
+
+          .my-lg-taller {
+            margin-top: 32px !important;
+            margin-bottom: 32px !important;
+          }
+
+          .my-lg-tallest {
+            margin-top: 40px !important;
+            margin-bottom: 40px !important;
+          }
+
+          .my-lg-spacious {
+            margin-top: 48px !important;
+            margin-bottom: 48px !important;
+          }
+
+          .my-lg-huge {
+            margin-top: 56px !important;
+            margin-bottom: 56px !important;
+          }
+
+          .my-lg-jumbo {
+            margin-top: 64px !important;
+            margin-bottom: 64px !important;
+          }
+
+          .my-lg-auto {
+            margin-top: auto !important;
+            margin-bottom: auto !important;
+          }
+
+          .mt-lg-none {
+            margin-top: 0 !important;
+          }
+
+          .mt-lg-smash {
+            margin-top: 2px !important;
+          }
+
+          .mt-lg-shortest {
+            margin-top: 4px !important;
+          }
+
+          .mt-lg-shorter {
+            margin-top: 8px !important;
+          }
+
+          .mt-lg-short {
+            margin-top: 12px !important;
+          }
+
+          .mt-lg-medium {
+            margin-top: 16px !important;
+          }
+
+          .mt-lg-tall {
+            margin-top: 24px !important;
+          }
+
+          .mt-lg-taller {
+            margin-top: 32px !important;
+          }
+
+          .mt-lg-tallest {
+            margin-top: 40px !important;
+          }
+
+          .mt-lg-spacious {
+            margin-top: 48px !important;
+          }
+
+          .mt-lg-huge {
+            margin-top: 56px !important;
+          }
+
+          .mt-lg-jumbo {
+            margin-top: 64px !important;
+          }
+
+          .mt-lg-auto {
+            margin-top: auto !important;
+          }
+
+          .me-lg-none {
+            margin-right: 0 !important;
+          }
+
+          .me-lg-smash {
+            margin-right: 2px !important;
+          }
+
+          .me-lg-shortest {
+            margin-right: 4px !important;
+          }
+
+          .me-lg-shorter {
+            margin-right: 8px !important;
+          }
+
+          .me-lg-short {
+            margin-right: 12px !important;
+          }
+
+          .me-lg-medium {
+            margin-right: 16px !important;
+          }
+
+          .me-lg-tall {
+            margin-right: 24px !important;
+          }
+
+          .me-lg-taller {
+            margin-right: 32px !important;
+          }
+
+          .me-lg-tallest {
+            margin-right: 40px !important;
+          }
+
+          .me-lg-spacious {
+            margin-right: 48px !important;
+          }
+
+          .me-lg-huge {
+            margin-right: 56px !important;
+          }
+
+          .me-lg-jumbo {
+            margin-right: 64px !important;
+          }
+
+          .me-lg-auto {
+            margin-right: auto !important;
+          }
+
+          .mb-lg-none {
+            margin-bottom: 0 !important;
+          }
+
+          .mb-lg-smash {
+            margin-bottom: 2px !important;
+          }
+
+          .mb-lg-shortest {
+            margin-bottom: 4px !important;
+          }
+
+          .mb-lg-shorter {
+            margin-bottom: 8px !important;
+          }
+
+          .mb-lg-short {
+            margin-bottom: 12px !important;
+          }
+
+          .mb-lg-medium {
+            margin-bottom: 16px !important;
+          }
+
+          .mb-lg-tall {
+            margin-bottom: 24px !important;
+          }
+
+          .mb-lg-taller {
+            margin-bottom: 32px !important;
+          }
+
+          .mb-lg-tallest {
+            margin-bottom: 40px !important;
+          }
+
+          .mb-lg-spacious {
+            margin-bottom: 48px !important;
+          }
+
+          .mb-lg-huge {
+            margin-bottom: 56px !important;
+          }
+
+          .mb-lg-jumbo {
+            margin-bottom: 64px !important;
+          }
+
+          .mb-lg-auto {
+            margin-bottom: auto !important;
+          }
+
+          .ms-lg-none {
+            margin-left: 0 !important;
+          }
+
+          .ms-lg-smash {
+            margin-left: 2px !important;
+          }
+
+          .ms-lg-shortest {
+            margin-left: 4px !important;
+          }
+
+          .ms-lg-shorter {
+            margin-left: 8px !important;
+          }
+
+          .ms-lg-short {
+            margin-left: 12px !important;
+          }
+
+          .ms-lg-medium {
+            margin-left: 16px !important;
+          }
+
+          .ms-lg-tall {
+            margin-left: 24px !important;
+          }
+
+          .ms-lg-taller {
+            margin-left: 32px !important;
+          }
+
+          .ms-lg-tallest {
+            margin-left: 40px !important;
+          }
+
+          .ms-lg-spacious {
+            margin-left: 48px !important;
+          }
+
+          .ms-lg-huge {
+            margin-left: 56px !important;
+          }
+
+          .ms-lg-jumbo {
+            margin-left: 64px !important;
+          }
+
+          .ms-lg-auto {
+            margin-left: auto !important;
+          }
+
+          .p-lg-none {
+            padding: 0 !important;
+          }
+
+          .p-lg-smash {
+            padding: 2px !important;
+          }
+
+          .p-lg-shortest {
+            padding: 4px !important;
+          }
+
+          .p-lg-shorter {
+            padding: 8px !important;
+          }
+
+          .p-lg-short {
+            padding: 12px !important;
+          }
+
+          .p-lg-medium {
+            padding: 16px !important;
+          }
+
+          .p-lg-tall {
+            padding: 24px !important;
+          }
+
+          .p-lg-taller {
+            padding: 32px !important;
+          }
+
+          .p-lg-tallest {
+            padding: 40px !important;
+          }
+
+          .p-lg-spacious {
+            padding: 48px !important;
+          }
+
+          .p-lg-huge {
+            padding: 56px !important;
+          }
+
+          .p-lg-jumbo {
+            padding: 64px !important;
+          }
+
+          .px-lg-none {
+            padding-right: 0 !important;
+            padding-left: 0 !important;
+          }
+
+          .px-lg-smash {
+            padding-right: 2px !important;
+            padding-left: 2px !important;
+          }
+
+          .px-lg-shortest {
+            padding-right: 4px !important;
+            padding-left: 4px !important;
+          }
+
+          .px-lg-shorter {
+            padding-right: 8px !important;
+            padding-left: 8px !important;
+          }
+
+          .px-lg-short {
+            padding-right: 12px !important;
+            padding-left: 12px !important;
+          }
+
+          .px-lg-medium {
+            padding-right: 16px !important;
+            padding-left: 16px !important;
+          }
+
+          .px-lg-tall {
+            padding-right: 24px !important;
+            padding-left: 24px !important;
+          }
+
+          .px-lg-taller {
+            padding-right: 32px !important;
+            padding-left: 32px !important;
+          }
+
+          .px-lg-tallest {
+            padding-right: 40px !important;
+            padding-left: 40px !important;
+          }
+
+          .px-lg-spacious {
+            padding-right: 48px !important;
+            padding-left: 48px !important;
+          }
+
+          .px-lg-huge {
+            padding-right: 56px !important;
+            padding-left: 56px !important;
+          }
+
+          .px-lg-jumbo {
+            padding-right: 64px !important;
+            padding-left: 64px !important;
+          }
+
+          .py-lg-none {
+            padding-top: 0 !important;
+            padding-bottom: 0 !important;
+          }
+
+          .py-lg-smash {
+            padding-top: 2px !important;
+            padding-bottom: 2px !important;
+          }
+
+          .py-lg-shortest {
+            padding-top: 4px !important;
+            padding-bottom: 4px !important;
+          }
+
+          .py-lg-shorter {
+            padding-top: 8px !important;
+            padding-bottom: 8px !important;
+          }
+
+          .py-lg-short {
+            padding-top: 12px !important;
+            padding-bottom: 12px !important;
+          }
+
+          .py-lg-medium {
+            padding-top: 16px !important;
+            padding-bottom: 16px !important;
+          }
+
+          .py-lg-tall {
+            padding-top: 24px !important;
+            padding-bottom: 24px !important;
+          }
+
+          .py-lg-taller {
+            padding-top: 32px !important;
+            padding-bottom: 32px !important;
+          }
+
+          .py-lg-tallest {
+            padding-top: 40px !important;
+            padding-bottom: 40px !important;
+          }
+
+          .py-lg-spacious {
+            padding-top: 48px !important;
+            padding-bottom: 48px !important;
+          }
+
+          .py-lg-huge {
+            padding-top: 56px !important;
+            padding-bottom: 56px !important;
+          }
+
+          .py-lg-jumbo {
+            padding-top: 64px !important;
+            padding-bottom: 64px !important;
+          }
+
+          .pt-lg-none {
+            padding-top: 0 !important;
+          }
+
+          .pt-lg-smash {
+            padding-top: 2px !important;
+          }
+
+          .pt-lg-shortest {
+            padding-top: 4px !important;
+          }
+
+          .pt-lg-shorter {
+            padding-top: 8px !important;
+          }
+
+          .pt-lg-short {
+            padding-top: 12px !important;
+          }
+
+          .pt-lg-medium {
+            padding-top: 16px !important;
+          }
+
+          .pt-lg-tall {
+            padding-top: 24px !important;
+          }
+
+          .pt-lg-taller {
+            padding-top: 32px !important;
+          }
+
+          .pt-lg-tallest {
+            padding-top: 40px !important;
+          }
+
+          .pt-lg-spacious {
+            padding-top: 48px !important;
+          }
+
+          .pt-lg-huge {
+            padding-top: 56px !important;
+          }
+
+          .pt-lg-jumbo {
+            padding-top: 64px !important;
+          }
+
+          .pe-lg-none {
+            padding-right: 0 !important;
+          }
+
+          .pe-lg-smash {
+            padding-right: 2px !important;
+          }
+
+          .pe-lg-shortest {
+            padding-right: 4px !important;
+          }
+
+          .pe-lg-shorter {
+            padding-right: 8px !important;
+          }
+
+          .pe-lg-short {
+            padding-right: 12px !important;
+          }
+
+          .pe-lg-medium {
+            padding-right: 16px !important;
+          }
+
+          .pe-lg-tall {
+            padding-right: 24px !important;
+          }
+
+          .pe-lg-taller {
+            padding-right: 32px !important;
+          }
+
+          .pe-lg-tallest {
+            padding-right: 40px !important;
+          }
+
+          .pe-lg-spacious {
+            padding-right: 48px !important;
+          }
+
+          .pe-lg-huge {
+            padding-right: 56px !important;
+          }
+
+          .pe-lg-jumbo {
+            padding-right: 64px !important;
+          }
+
+          .pb-lg-none {
+            padding-bottom: 0 !important;
+          }
+
+          .pb-lg-smash {
+            padding-bottom: 2px !important;
+          }
+
+          .pb-lg-shortest {
+            padding-bottom: 4px !important;
+          }
+
+          .pb-lg-shorter {
+            padding-bottom: 8px !important;
+          }
+
+          .pb-lg-short {
+            padding-bottom: 12px !important;
+          }
+
+          .pb-lg-medium {
+            padding-bottom: 16px !important;
+          }
+
+          .pb-lg-tall {
+            padding-bottom: 24px !important;
+          }
+
+          .pb-lg-taller {
+            padding-bottom: 32px !important;
+          }
+
+          .pb-lg-tallest {
+            padding-bottom: 40px !important;
+          }
+
+          .pb-lg-spacious {
+            padding-bottom: 48px !important;
+          }
+
+          .pb-lg-huge {
+            padding-bottom: 56px !important;
+          }
+
+          .pb-lg-jumbo {
+            padding-bottom: 64px !important;
+          }
+
+          .ps-lg-none {
+            padding-left: 0 !important;
+          }
+
+          .ps-lg-smash {
+            padding-left: 2px !important;
+          }
+
+          .ps-lg-shortest {
+            padding-left: 4px !important;
+          }
+
+          .ps-lg-shorter {
+            padding-left: 8px !important;
+          }
+
+          .ps-lg-short {
+            padding-left: 12px !important;
+          }
+
+          .ps-lg-medium {
+            padding-left: 16px !important;
+          }
+
+          .ps-lg-tall {
+            padding-left: 24px !important;
+          }
+
+          .ps-lg-taller {
+            padding-left: 32px !important;
+          }
+
+          .ps-lg-tallest {
+            padding-left: 40px !important;
+          }
+
+          .ps-lg-spacious {
+            padding-left: 48px !important;
+          }
+
+          .ps-lg-huge {
+            padding-left: 56px !important;
+          }
+
+          .ps-lg-jumbo {
+            padding-left: 64px !important;
+          }
+
+          .gap-lg-none {
+            gap: 0 !important;
+          }
+
+          .gap-lg-smash {
+            gap: 2px !important;
+          }
+
+          .gap-lg-shortest {
+            gap: 4px !important;
+          }
+
+          .gap-lg-shorter {
+            gap: 8px !important;
+          }
+
+          .gap-lg-short {
+            gap: 12px !important;
+          }
+
+          .gap-lg-medium {
+            gap: 16px !important;
+          }
+
+          .gap-lg-tall {
+            gap: 24px !important;
+          }
+
+          .gap-lg-taller {
+            gap: 32px !important;
+          }
+
+          .gap-lg-tallest {
+            gap: 40px !important;
+          }
+
+          .gap-lg-spacious {
+            gap: 48px !important;
+          }
+
+          .gap-lg-huge {
+            gap: 56px !important;
+          }
+
+          .gap-lg-jumbo {
+            gap: 64px !important;
+          }
+
+          .row-gap-lg-none {
+            row-gap: 0 !important;
+          }
+
+          .row-gap-lg-smash {
+            row-gap: 2px !important;
+          }
+
+          .row-gap-lg-shortest {
+            row-gap: 4px !important;
+          }
+
+          .row-gap-lg-shorter {
+            row-gap: 8px !important;
+          }
+
+          .row-gap-lg-short {
+            row-gap: 12px !important;
+          }
+
+          .row-gap-lg-medium {
+            row-gap: 16px !important;
+          }
+
+          .row-gap-lg-tall {
+            row-gap: 24px !important;
+          }
+
+          .row-gap-lg-taller {
+            row-gap: 32px !important;
+          }
+
+          .row-gap-lg-tallest {
+            row-gap: 40px !important;
+          }
+
+          .row-gap-lg-spacious {
+            row-gap: 48px !important;
+          }
+
+          .row-gap-lg-huge {
+            row-gap: 56px !important;
+          }
+
+          .row-gap-lg-jumbo {
+            row-gap: 64px !important;
+          }
+
+          .column-gap-lg-none {
+            column-gap: 0 !important;
+          }
+
+          .column-gap-lg-smash {
+            column-gap: 2px !important;
+          }
+
+          .column-gap-lg-shortest {
+            column-gap: 4px !important;
+          }
+
+          .column-gap-lg-shorter {
+            column-gap: 8px !important;
+          }
+
+          .column-gap-lg-short {
+            column-gap: 12px !important;
+          }
+
+          .column-gap-lg-medium {
+            column-gap: 16px !important;
+          }
+
+          .column-gap-lg-tall {
+            column-gap: 24px !important;
+          }
+
+          .column-gap-lg-taller {
+            column-gap: 32px !important;
+          }
+
+          .column-gap-lg-tallest {
+            column-gap: 40px !important;
+          }
+
+          .column-gap-lg-spacious {
+            column-gap: 48px !important;
+          }
+
+          .column-gap-lg-huge {
+            column-gap: 56px !important;
+          }
+
+          .column-gap-lg-jumbo {
+            column-gap: 64px !important;
+          }
+        }
+
+        @media (min-width: 1320px) {
+          .m-xl-0 {
+            margin: 0 !important;
+          }
+
+          .m-xl-1 {
+            margin: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .m-xl-2 {
+            margin: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .m-xl-3 {
+            margin: 1.5rem !important;
+          }
+
+          .m-xl-4 {
+            margin: 2.5rem !important;
+          }
+
+          .m-xl-5 {
+            margin: 3.5rem !important;
+          }
+
+          .mx-xl-0 {
+            margin-right: 0 !important;
+            margin-left: 0 !important;
+          }
+
+          .mx-xl-1 {
+            margin-right: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+            margin-left: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .mx-xl-2 {
+            margin-right: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+            margin-left: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .mx-xl-3 {
+            margin-right: 1.5rem !important;
+            margin-left: 1.5rem !important;
+          }
+
+          .mx-xl-4 {
+            margin-right: 2.5rem !important;
+            margin-left: 2.5rem !important;
+          }
+
+          .mx-xl-5 {
+            margin-right: 3.5rem !important;
+            margin-left: 3.5rem !important;
+          }
+
+          .my-xl-0 {
+            margin-top: 0 !important;
+            margin-bottom: 0 !important;
+          }
+
+          .my-xl-1 {
+            margin-top: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+            margin-bottom: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .my-xl-2 {
+            margin-top: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+            margin-bottom: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .my-xl-3 {
+            margin-top: 1.5rem !important;
+            margin-bottom: 1.5rem !important;
+          }
+
+          .my-xl-4 {
+            margin-top: 2.5rem !important;
+            margin-bottom: 2.5rem !important;
+          }
+
+          .my-xl-5 {
+            margin-top: 3.5rem !important;
+            margin-bottom: 3.5rem !important;
+          }
+
+          .mt-xl-0 {
+            margin-top: 0 !important;
+          }
+
+          .mt-xl-1 {
+            margin-top: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .mt-xl-2 {
+            margin-top: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .mt-xl-3 {
+            margin-top: 1.5rem !important;
+          }
+
+          .mt-xl-4 {
+            margin-top: 2.5rem !important;
+          }
+
+          .mt-xl-5 {
+            margin-top: 3.5rem !important;
+          }
+
+          .me-xl-0 {
+            margin-right: 0 !important;
+          }
+
+          .me-xl-1 {
+            margin-right: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .me-xl-2 {
+            margin-right: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .me-xl-3 {
+            margin-right: 1.5rem !important;
+          }
+
+          .me-xl-4 {
+            margin-right: 2.5rem !important;
+          }
+
+          .me-xl-5 {
+            margin-right: 3.5rem !important;
+          }
+
+          .mb-xl-0 {
+            margin-bottom: 0 !important;
+          }
+
+          .mb-xl-1 {
+            margin-bottom: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .mb-xl-2 {
+            margin-bottom: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .mb-xl-3 {
+            margin-bottom: 1.5rem !important;
+          }
+
+          .mb-xl-4 {
+            margin-bottom: 2.5rem !important;
+          }
+
+          .mb-xl-5 {
+            margin-bottom: 3.5rem !important;
+          }
+
+          .ms-xl-0 {
+            margin-left: 0 !important;
+          }
+
+          .ms-xl-1 {
+            margin-left: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .ms-xl-2 {
+            margin-left: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .ms-xl-3 {
+            margin-left: 1.5rem !important;
+          }
+
+          .ms-xl-4 {
+            margin-left: 2.5rem !important;
+          }
+
+          .ms-xl-5 {
+            margin-left: 3.5rem !important;
+          }
+
+          .p-xl-0 {
+            padding: 0 !important;
+          }
+
+          .p-xl-1 {
+            padding: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .p-xl-2 {
+            padding: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .p-xl-3 {
+            padding: 1.5rem !important;
+          }
+
+          .p-xl-4 {
+            padding: 2.5rem !important;
+          }
+
+          .p-xl-5 {
+            padding: 3.5rem !important;
+          }
+
+          .px-xl-0 {
+            padding-right: 0 !important;
+            padding-left: 0 !important;
+          }
+
+          .px-xl-1 {
+            padding-right: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+            padding-left: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .px-xl-2 {
+            padding-right: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+            padding-left: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .px-xl-3 {
+            padding-right: 1.5rem !important;
+            padding-left: 1.5rem !important;
+          }
+
+          .px-xl-4 {
+            padding-right: 2.5rem !important;
+            padding-left: 2.5rem !important;
+          }
+
+          .px-xl-5 {
+            padding-right: 3.5rem !important;
+            padding-left: 3.5rem !important;
+          }
+
+          .py-xl-0 {
+            padding-top: 0 !important;
+            padding-bottom: 0 !important;
+          }
+
+          .py-xl-1 {
+            padding-top: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+            padding-bottom: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .py-xl-2 {
+            padding-top: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+            padding-bottom: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .py-xl-3 {
+            padding-top: 1.5rem !important;
+            padding-bottom: 1.5rem !important;
+          }
+
+          .py-xl-4 {
+            padding-top: 2.5rem !important;
+            padding-bottom: 2.5rem !important;
+          }
+
+          .py-xl-5 {
+            padding-top: 3.5rem !important;
+            padding-bottom: 3.5rem !important;
+          }
+
+          .pt-xl-0 {
+            padding-top: 0 !important;
+          }
+
+          .pt-xl-1 {
+            padding-top: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .pt-xl-2 {
+            padding-top: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .pt-xl-3 {
+            padding-top: 1.5rem !important;
+          }
+
+          .pt-xl-4 {
+            padding-top: 2.5rem !important;
+          }
+
+          .pt-xl-5 {
+            padding-top: 3.5rem !important;
+          }
+
+          .pe-xl-0 {
+            padding-right: 0 !important;
+          }
+
+          .pe-xl-1 {
+            padding-right: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .pe-xl-2 {
+            padding-right: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .pe-xl-3 {
+            padding-right: 1.5rem !important;
+          }
+
+          .pe-xl-4 {
+            padding-right: 2.5rem !important;
+          }
+
+          .pe-xl-5 {
+            padding-right: 3.5rem !important;
+          }
+
+          .pb-xl-0 {
+            padding-bottom: 0 !important;
+          }
+
+          .pb-xl-1 {
+            padding-bottom: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .pb-xl-2 {
+            padding-bottom: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .pb-xl-3 {
+            padding-bottom: 1.5rem !important;
+          }
+
+          .pb-xl-4 {
+            padding-bottom: 2.5rem !important;
+          }
+
+          .pb-xl-5 {
+            padding-bottom: 3.5rem !important;
+          }
+
+          .ps-xl-0 {
+            padding-left: 0 !important;
+          }
+
+          .ps-xl-1 {
+            padding-left: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .ps-xl-2 {
+            padding-left: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .ps-xl-3 {
+            padding-left: 1.5rem !important;
+          }
+
+          .ps-xl-4 {
+            padding-left: 2.5rem !important;
+          }
+
+          .ps-xl-5 {
+            padding-left: 3.5rem !important;
+          }
+
+          .gap-xl-0 {
+            gap: 0 !important;
+          }
+
+          .gap-xl-1 {
+            gap: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .gap-xl-2 {
+            gap: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .gap-xl-3 {
+            gap: 1.5rem !important;
+          }
+
+          .gap-xl-4 {
+            gap: 2.5rem !important;
+          }
+
+          .gap-xl-5 {
+            gap: 3.5rem !important;
+          }
+
+          .row-gap-xl-0 {
+            row-gap: 0 !important;
+          }
+
+          .row-gap-xl-1 {
+            row-gap: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .row-gap-xl-2 {
+            row-gap: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .row-gap-xl-3 {
+            row-gap: 1.5rem !important;
+          }
+
+          .row-gap-xl-4 {
+            row-gap: 2.5rem !important;
+          }
+
+          .row-gap-xl-5 {
+            row-gap: 3.5rem !important;
+          }
+
+          .column-gap-xl-0 {
+            column-gap: 0 !important;
+          }
+
+          .column-gap-xl-1 {
+            column-gap: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .column-gap-xl-2 {
+            column-gap: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .column-gap-xl-3 {
+            column-gap: 1.5rem !important;
+          }
+
+          .column-gap-xl-4 {
+            column-gap: 2.5rem !important;
+          }
+
+          .column-gap-xl-5 {
+            column-gap: 3.5rem !important;
+          }
+
+          .m-xl-none {
+            margin: 0 !important;
+          }
+
+          .m-xl-smash {
+            margin: 2px !important;
+          }
+
+          .m-xl-shortest {
+            margin: 4px !important;
+          }
+
+          .m-xl-shorter {
+            margin: 8px !important;
+          }
+
+          .m-xl-short {
+            margin: 12px !important;
+          }
+
+          .m-xl-medium {
+            margin: 16px !important;
+          }
+
+          .m-xl-tall {
+            margin: 24px !important;
+          }
+
+          .m-xl-taller {
+            margin: 32px !important;
+          }
+
+          .m-xl-tallest {
+            margin: 40px !important;
+          }
+
+          .m-xl-spacious {
+            margin: 48px !important;
+          }
+
+          .m-xl-huge {
+            margin: 56px !important;
+          }
+
+          .m-xl-jumbo {
+            margin: 64px !important;
+          }
+
+          .m-xl-auto {
+            margin: auto !important;
+          }
+
+          .mx-xl-none {
+            margin-right: 0 !important;
+            margin-left: 0 !important;
+          }
+
+          .mx-xl-smash {
+            margin-right: 2px !important;
+            margin-left: 2px !important;
+          }
+
+          .mx-xl-shortest {
+            margin-right: 4px !important;
+            margin-left: 4px !important;
+          }
+
+          .mx-xl-shorter {
+            margin-right: 8px !important;
+            margin-left: 8px !important;
+          }
+
+          .mx-xl-short {
+            margin-right: 12px !important;
+            margin-left: 12px !important;
+          }
+
+          .mx-xl-medium {
+            margin-right: 16px !important;
+            margin-left: 16px !important;
+          }
+
+          .mx-xl-tall {
+            margin-right: 24px !important;
+            margin-left: 24px !important;
+          }
+
+          .mx-xl-taller {
+            margin-right: 32px !important;
+            margin-left: 32px !important;
+          }
+
+          .mx-xl-tallest {
+            margin-right: 40px !important;
+            margin-left: 40px !important;
+          }
+
+          .mx-xl-spacious {
+            margin-right: 48px !important;
+            margin-left: 48px !important;
+          }
+
+          .mx-xl-huge {
+            margin-right: 56px !important;
+            margin-left: 56px !important;
+          }
+
+          .mx-xl-jumbo {
+            margin-right: 64px !important;
+            margin-left: 64px !important;
+          }
+
+          .mx-xl-auto {
+            margin-right: auto !important;
+            margin-left: auto !important;
+          }
+
+          .my-xl-none {
+            margin-top: 0 !important;
+            margin-bottom: 0 !important;
+          }
+
+          .my-xl-smash {
+            margin-top: 2px !important;
+            margin-bottom: 2px !important;
+          }
+
+          .my-xl-shortest {
+            margin-top: 4px !important;
+            margin-bottom: 4px !important;
+          }
+
+          .my-xl-shorter {
+            margin-top: 8px !important;
+            margin-bottom: 8px !important;
+          }
+
+          .my-xl-short {
+            margin-top: 12px !important;
+            margin-bottom: 12px !important;
+          }
+
+          .my-xl-medium {
+            margin-top: 16px !important;
+            margin-bottom: 16px !important;
+          }
+
+          .my-xl-tall {
+            margin-top: 24px !important;
+            margin-bottom: 24px !important;
+          }
+
+          .my-xl-taller {
+            margin-top: 32px !important;
+            margin-bottom: 32px !important;
+          }
+
+          .my-xl-tallest {
+            margin-top: 40px !important;
+            margin-bottom: 40px !important;
+          }
+
+          .my-xl-spacious {
+            margin-top: 48px !important;
+            margin-bottom: 48px !important;
+          }
+
+          .my-xl-huge {
+            margin-top: 56px !important;
+            margin-bottom: 56px !important;
+          }
+
+          .my-xl-jumbo {
+            margin-top: 64px !important;
+            margin-bottom: 64px !important;
+          }
+
+          .my-xl-auto {
+            margin-top: auto !important;
+            margin-bottom: auto !important;
+          }
+
+          .mt-xl-none {
+            margin-top: 0 !important;
+          }
+
+          .mt-xl-smash {
+            margin-top: 2px !important;
+          }
+
+          .mt-xl-shortest {
+            margin-top: 4px !important;
+          }
+
+          .mt-xl-shorter {
+            margin-top: 8px !important;
+          }
+
+          .mt-xl-short {
+            margin-top: 12px !important;
+          }
+
+          .mt-xl-medium {
+            margin-top: 16px !important;
+          }
+
+          .mt-xl-tall {
+            margin-top: 24px !important;
+          }
+
+          .mt-xl-taller {
+            margin-top: 32px !important;
+          }
+
+          .mt-xl-tallest {
+            margin-top: 40px !important;
+          }
+
+          .mt-xl-spacious {
+            margin-top: 48px !important;
+          }
+
+          .mt-xl-huge {
+            margin-top: 56px !important;
+          }
+
+          .mt-xl-jumbo {
+            margin-top: 64px !important;
+          }
+
+          .mt-xl-auto {
+            margin-top: auto !important;
+          }
+
+          .me-xl-none {
+            margin-right: 0 !important;
+          }
+
+          .me-xl-smash {
+            margin-right: 2px !important;
+          }
+
+          .me-xl-shortest {
+            margin-right: 4px !important;
+          }
+
+          .me-xl-shorter {
+            margin-right: 8px !important;
+          }
+
+          .me-xl-short {
+            margin-right: 12px !important;
+          }
+
+          .me-xl-medium {
+            margin-right: 16px !important;
+          }
+
+          .me-xl-tall {
+            margin-right: 24px !important;
+          }
+
+          .me-xl-taller {
+            margin-right: 32px !important;
+          }
+
+          .me-xl-tallest {
+            margin-right: 40px !important;
+          }
+
+          .me-xl-spacious {
+            margin-right: 48px !important;
+          }
+
+          .me-xl-huge {
+            margin-right: 56px !important;
+          }
+
+          .me-xl-jumbo {
+            margin-right: 64px !important;
+          }
+
+          .me-xl-auto {
+            margin-right: auto !important;
+          }
+
+          .mb-xl-none {
+            margin-bottom: 0 !important;
+          }
+
+          .mb-xl-smash {
+            margin-bottom: 2px !important;
+          }
+
+          .mb-xl-shortest {
+            margin-bottom: 4px !important;
+          }
+
+          .mb-xl-shorter {
+            margin-bottom: 8px !important;
+          }
+
+          .mb-xl-short {
+            margin-bottom: 12px !important;
+          }
+
+          .mb-xl-medium {
+            margin-bottom: 16px !important;
+          }
+
+          .mb-xl-tall {
+            margin-bottom: 24px !important;
+          }
+
+          .mb-xl-taller {
+            margin-bottom: 32px !important;
+          }
+
+          .mb-xl-tallest {
+            margin-bottom: 40px !important;
+          }
+
+          .mb-xl-spacious {
+            margin-bottom: 48px !important;
+          }
+
+          .mb-xl-huge {
+            margin-bottom: 56px !important;
+          }
+
+          .mb-xl-jumbo {
+            margin-bottom: 64px !important;
+          }
+
+          .mb-xl-auto {
+            margin-bottom: auto !important;
+          }
+
+          .ms-xl-none {
+            margin-left: 0 !important;
+          }
+
+          .ms-xl-smash {
+            margin-left: 2px !important;
+          }
+
+          .ms-xl-shortest {
+            margin-left: 4px !important;
+          }
+
+          .ms-xl-shorter {
+            margin-left: 8px !important;
+          }
+
+          .ms-xl-short {
+            margin-left: 12px !important;
+          }
+
+          .ms-xl-medium {
+            margin-left: 16px !important;
+          }
+
+          .ms-xl-tall {
+            margin-left: 24px !important;
+          }
+
+          .ms-xl-taller {
+            margin-left: 32px !important;
+          }
+
+          .ms-xl-tallest {
+            margin-left: 40px !important;
+          }
+
+          .ms-xl-spacious {
+            margin-left: 48px !important;
+          }
+
+          .ms-xl-huge {
+            margin-left: 56px !important;
+          }
+
+          .ms-xl-jumbo {
+            margin-left: 64px !important;
+          }
+
+          .ms-xl-auto {
+            margin-left: auto !important;
+          }
+
+          .p-xl-none {
+            padding: 0 !important;
+          }
+
+          .p-xl-smash {
+            padding: 2px !important;
+          }
+
+          .p-xl-shortest {
+            padding: 4px !important;
+          }
+
+          .p-xl-shorter {
+            padding: 8px !important;
+          }
+
+          .p-xl-short {
+            padding: 12px !important;
+          }
+
+          .p-xl-medium {
+            padding: 16px !important;
+          }
+
+          .p-xl-tall {
+            padding: 24px !important;
+          }
+
+          .p-xl-taller {
+            padding: 32px !important;
+          }
+
+          .p-xl-tallest {
+            padding: 40px !important;
+          }
+
+          .p-xl-spacious {
+            padding: 48px !important;
+          }
+
+          .p-xl-huge {
+            padding: 56px !important;
+          }
+
+          .p-xl-jumbo {
+            padding: 64px !important;
+          }
+
+          .px-xl-none {
+            padding-right: 0 !important;
+            padding-left: 0 !important;
+          }
+
+          .px-xl-smash {
+            padding-right: 2px !important;
+            padding-left: 2px !important;
+          }
+
+          .px-xl-shortest {
+            padding-right: 4px !important;
+            padding-left: 4px !important;
+          }
+
+          .px-xl-shorter {
+            padding-right: 8px !important;
+            padding-left: 8px !important;
+          }
+
+          .px-xl-short {
+            padding-right: 12px !important;
+            padding-left: 12px !important;
+          }
+
+          .px-xl-medium {
+            padding-right: 16px !important;
+            padding-left: 16px !important;
+          }
+
+          .px-xl-tall {
+            padding-right: 24px !important;
+            padding-left: 24px !important;
+          }
+
+          .px-xl-taller {
+            padding-right: 32px !important;
+            padding-left: 32px !important;
+          }
+
+          .px-xl-tallest {
+            padding-right: 40px !important;
+            padding-left: 40px !important;
+          }
+
+          .px-xl-spacious {
+            padding-right: 48px !important;
+            padding-left: 48px !important;
+          }
+
+          .px-xl-huge {
+            padding-right: 56px !important;
+            padding-left: 56px !important;
+          }
+
+          .px-xl-jumbo {
+            padding-right: 64px !important;
+            padding-left: 64px !important;
+          }
+
+          .py-xl-none {
+            padding-top: 0 !important;
+            padding-bottom: 0 !important;
+          }
+
+          .py-xl-smash {
+            padding-top: 2px !important;
+            padding-bottom: 2px !important;
+          }
+
+          .py-xl-shortest {
+            padding-top: 4px !important;
+            padding-bottom: 4px !important;
+          }
+
+          .py-xl-shorter {
+            padding-top: 8px !important;
+            padding-bottom: 8px !important;
+          }
+
+          .py-xl-short {
+            padding-top: 12px !important;
+            padding-bottom: 12px !important;
+          }
+
+          .py-xl-medium {
+            padding-top: 16px !important;
+            padding-bottom: 16px !important;
+          }
+
+          .py-xl-tall {
+            padding-top: 24px !important;
+            padding-bottom: 24px !important;
+          }
+
+          .py-xl-taller {
+            padding-top: 32px !important;
+            padding-bottom: 32px !important;
+          }
+
+          .py-xl-tallest {
+            padding-top: 40px !important;
+            padding-bottom: 40px !important;
+          }
+
+          .py-xl-spacious {
+            padding-top: 48px !important;
+            padding-bottom: 48px !important;
+          }
+
+          .py-xl-huge {
+            padding-top: 56px !important;
+            padding-bottom: 56px !important;
+          }
+
+          .py-xl-jumbo {
+            padding-top: 64px !important;
+            padding-bottom: 64px !important;
+          }
+
+          .pt-xl-none {
+            padding-top: 0 !important;
+          }
+
+          .pt-xl-smash {
+            padding-top: 2px !important;
+          }
+
+          .pt-xl-shortest {
+            padding-top: 4px !important;
+          }
+
+          .pt-xl-shorter {
+            padding-top: 8px !important;
+          }
+
+          .pt-xl-short {
+            padding-top: 12px !important;
+          }
+
+          .pt-xl-medium {
+            padding-top: 16px !important;
+          }
+
+          .pt-xl-tall {
+            padding-top: 24px !important;
+          }
+
+          .pt-xl-taller {
+            padding-top: 32px !important;
+          }
+
+          .pt-xl-tallest {
+            padding-top: 40px !important;
+          }
+
+          .pt-xl-spacious {
+            padding-top: 48px !important;
+          }
+
+          .pt-xl-huge {
+            padding-top: 56px !important;
+          }
+
+          .pt-xl-jumbo {
+            padding-top: 64px !important;
+          }
+
+          .pe-xl-none {
+            padding-right: 0 !important;
+          }
+
+          .pe-xl-smash {
+            padding-right: 2px !important;
+          }
+
+          .pe-xl-shortest {
+            padding-right: 4px !important;
+          }
+
+          .pe-xl-shorter {
+            padding-right: 8px !important;
+          }
+
+          .pe-xl-short {
+            padding-right: 12px !important;
+          }
+
+          .pe-xl-medium {
+            padding-right: 16px !important;
+          }
+
+          .pe-xl-tall {
+            padding-right: 24px !important;
+          }
+
+          .pe-xl-taller {
+            padding-right: 32px !important;
+          }
+
+          .pe-xl-tallest {
+            padding-right: 40px !important;
+          }
+
+          .pe-xl-spacious {
+            padding-right: 48px !important;
+          }
+
+          .pe-xl-huge {
+            padding-right: 56px !important;
+          }
+
+          .pe-xl-jumbo {
+            padding-right: 64px !important;
+          }
+
+          .pb-xl-none {
+            padding-bottom: 0 !important;
+          }
+
+          .pb-xl-smash {
+            padding-bottom: 2px !important;
+          }
+
+          .pb-xl-shortest {
+            padding-bottom: 4px !important;
+          }
+
+          .pb-xl-shorter {
+            padding-bottom: 8px !important;
+          }
+
+          .pb-xl-short {
+            padding-bottom: 12px !important;
+          }
+
+          .pb-xl-medium {
+            padding-bottom: 16px !important;
+          }
+
+          .pb-xl-tall {
+            padding-bottom: 24px !important;
+          }
+
+          .pb-xl-taller {
+            padding-bottom: 32px !important;
+          }
+
+          .pb-xl-tallest {
+            padding-bottom: 40px !important;
+          }
+
+          .pb-xl-spacious {
+            padding-bottom: 48px !important;
+          }
+
+          .pb-xl-huge {
+            padding-bottom: 56px !important;
+          }
+
+          .pb-xl-jumbo {
+            padding-bottom: 64px !important;
+          }
+
+          .ps-xl-none {
+            padding-left: 0 !important;
+          }
+
+          .ps-xl-smash {
+            padding-left: 2px !important;
+          }
+
+          .ps-xl-shortest {
+            padding-left: 4px !important;
+          }
+
+          .ps-xl-shorter {
+            padding-left: 8px !important;
+          }
+
+          .ps-xl-short {
+            padding-left: 12px !important;
+          }
+
+          .ps-xl-medium {
+            padding-left: 16px !important;
+          }
+
+          .ps-xl-tall {
+            padding-left: 24px !important;
+          }
+
+          .ps-xl-taller {
+            padding-left: 32px !important;
+          }
+
+          .ps-xl-tallest {
+            padding-left: 40px !important;
+          }
+
+          .ps-xl-spacious {
+            padding-left: 48px !important;
+          }
+
+          .ps-xl-huge {
+            padding-left: 56px !important;
+          }
+
+          .ps-xl-jumbo {
+            padding-left: 64px !important;
+          }
+
+          .gap-xl-none {
+            gap: 0 !important;
+          }
+
+          .gap-xl-smash {
+            gap: 2px !important;
+          }
+
+          .gap-xl-shortest {
+            gap: 4px !important;
+          }
+
+          .gap-xl-shorter {
+            gap: 8px !important;
+          }
+
+          .gap-xl-short {
+            gap: 12px !important;
+          }
+
+          .gap-xl-medium {
+            gap: 16px !important;
+          }
+
+          .gap-xl-tall {
+            gap: 24px !important;
+          }
+
+          .gap-xl-taller {
+            gap: 32px !important;
+          }
+
+          .gap-xl-tallest {
+            gap: 40px !important;
+          }
+
+          .gap-xl-spacious {
+            gap: 48px !important;
+          }
+
+          .gap-xl-huge {
+            gap: 56px !important;
+          }
+
+          .gap-xl-jumbo {
+            gap: 64px !important;
+          }
+
+          .row-gap-xl-none {
+            row-gap: 0 !important;
+          }
+
+          .row-gap-xl-smash {
+            row-gap: 2px !important;
+          }
+
+          .row-gap-xl-shortest {
+            row-gap: 4px !important;
+          }
+
+          .row-gap-xl-shorter {
+            row-gap: 8px !important;
+          }
+
+          .row-gap-xl-short {
+            row-gap: 12px !important;
+          }
+
+          .row-gap-xl-medium {
+            row-gap: 16px !important;
+          }
+
+          .row-gap-xl-tall {
+            row-gap: 24px !important;
+          }
+
+          .row-gap-xl-taller {
+            row-gap: 32px !important;
+          }
+
+          .row-gap-xl-tallest {
+            row-gap: 40px !important;
+          }
+
+          .row-gap-xl-spacious {
+            row-gap: 48px !important;
+          }
+
+          .row-gap-xl-huge {
+            row-gap: 56px !important;
+          }
+
+          .row-gap-xl-jumbo {
+            row-gap: 64px !important;
+          }
+
+          .column-gap-xl-none {
+            column-gap: 0 !important;
+          }
+
+          .column-gap-xl-smash {
+            column-gap: 2px !important;
+          }
+
+          .column-gap-xl-shortest {
+            column-gap: 4px !important;
+          }
+
+          .column-gap-xl-shorter {
+            column-gap: 8px !important;
+          }
+
+          .column-gap-xl-short {
+            column-gap: 12px !important;
+          }
+
+          .column-gap-xl-medium {
+            column-gap: 16px !important;
+          }
+
+          .column-gap-xl-tall {
+            column-gap: 24px !important;
+          }
+
+          .column-gap-xl-taller {
+            column-gap: 32px !important;
+          }
+
+          .column-gap-xl-tallest {
+            column-gap: 40px !important;
+          }
+
+          .column-gap-xl-spacious {
+            column-gap: 48px !important;
+          }
+
+          .column-gap-xl-huge {
+            column-gap: 56px !important;
+          }
+
+          .column-gap-xl-jumbo {
+            column-gap: 64px !important;
+          }
+        }
+
+        @media (min-width: 1640px) {
+          .m-xxl-0 {
+            margin: 0 !important;
+          }
+
+          .m-xxl-1 {
+            margin: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .m-xxl-2 {
+            margin: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .m-xxl-3 {
+            margin: 1.5rem !important;
+          }
+
+          .m-xxl-4 {
+            margin: 2.5rem !important;
+          }
+
+          .m-xxl-5 {
+            margin: 3.5rem !important;
+          }
+
+          .mx-xxl-0 {
+            margin-right: 0 !important;
+            margin-left: 0 !important;
+          }
+
+          .mx-xxl-1 {
+            margin-right: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+            margin-left: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .mx-xxl-2 {
+            margin-right: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+            margin-left: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .mx-xxl-3 {
+            margin-right: 1.5rem !important;
+            margin-left: 1.5rem !important;
+          }
+
+          .mx-xxl-4 {
+            margin-right: 2.5rem !important;
+            margin-left: 2.5rem !important;
+          }
+
+          .mx-xxl-5 {
+            margin-right: 3.5rem !important;
+            margin-left: 3.5rem !important;
+          }
+
+          .my-xxl-0 {
+            margin-top: 0 !important;
+            margin-bottom: 0 !important;
+          }
+
+          .my-xxl-1 {
+            margin-top: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+            margin-bottom: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .my-xxl-2 {
+            margin-top: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+            margin-bottom: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .my-xxl-3 {
+            margin-top: 1.5rem !important;
+            margin-bottom: 1.5rem !important;
+          }
+
+          .my-xxl-4 {
+            margin-top: 2.5rem !important;
+            margin-bottom: 2.5rem !important;
+          }
+
+          .my-xxl-5 {
+            margin-top: 3.5rem !important;
+            margin-bottom: 3.5rem !important;
+          }
+
+          .mt-xxl-0 {
+            margin-top: 0 !important;
+          }
+
+          .mt-xxl-1 {
+            margin-top: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .mt-xxl-2 {
+            margin-top: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .mt-xxl-3 {
+            margin-top: 1.5rem !important;
+          }
+
+          .mt-xxl-4 {
+            margin-top: 2.5rem !important;
+          }
+
+          .mt-xxl-5 {
+            margin-top: 3.5rem !important;
+          }
+
+          .me-xxl-0 {
+            margin-right: 0 !important;
+          }
+
+          .me-xxl-1 {
+            margin-right: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .me-xxl-2 {
+            margin-right: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .me-xxl-3 {
+            margin-right: 1.5rem !important;
+          }
+
+          .me-xxl-4 {
+            margin-right: 2.5rem !important;
+          }
+
+          .me-xxl-5 {
+            margin-right: 3.5rem !important;
+          }
+
+          .mb-xxl-0 {
+            margin-bottom: 0 !important;
+          }
+
+          .mb-xxl-1 {
+            margin-bottom: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .mb-xxl-2 {
+            margin-bottom: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .mb-xxl-3 {
+            margin-bottom: 1.5rem !important;
+          }
+
+          .mb-xxl-4 {
+            margin-bottom: 2.5rem !important;
+          }
+
+          .mb-xxl-5 {
+            margin-bottom: 3.5rem !important;
+          }
+
+          .ms-xxl-0 {
+            margin-left: 0 !important;
+          }
+
+          .ms-xxl-1 {
+            margin-left: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .ms-xxl-2 {
+            margin-left: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .ms-xxl-3 {
+            margin-left: 1.5rem !important;
+          }
+
+          .ms-xxl-4 {
+            margin-left: 2.5rem !important;
+          }
+
+          .ms-xxl-5 {
+            margin-left: 3.5rem !important;
+          }
+
+          .p-xxl-0 {
+            padding: 0 !important;
+          }
+
+          .p-xxl-1 {
+            padding: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .p-xxl-2 {
+            padding: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .p-xxl-3 {
+            padding: 1.5rem !important;
+          }
+
+          .p-xxl-4 {
+            padding: 2.5rem !important;
+          }
+
+          .p-xxl-5 {
+            padding: 3.5rem !important;
+          }
+
+          .px-xxl-0 {
+            padding-right: 0 !important;
+            padding-left: 0 !important;
+          }
+
+          .px-xxl-1 {
+            padding-right: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+            padding-left: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .px-xxl-2 {
+            padding-right: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+            padding-left: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .px-xxl-3 {
+            padding-right: 1.5rem !important;
+            padding-left: 1.5rem !important;
+          }
+
+          .px-xxl-4 {
+            padding-right: 2.5rem !important;
+            padding-left: 2.5rem !important;
+          }
+
+          .px-xxl-5 {
+            padding-right: 3.5rem !important;
+            padding-left: 3.5rem !important;
+          }
+
+          .py-xxl-0 {
+            padding-top: 0 !important;
+            padding-bottom: 0 !important;
+          }
+
+          .py-xxl-1 {
+            padding-top: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+            padding-bottom: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .py-xxl-2 {
+            padding-top: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+            padding-bottom: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .py-xxl-3 {
+            padding-top: 1.5rem !important;
+            padding-bottom: 1.5rem !important;
+          }
+
+          .py-xxl-4 {
+            padding-top: 2.5rem !important;
+            padding-bottom: 2.5rem !important;
+          }
+
+          .py-xxl-5 {
+            padding-top: 3.5rem !important;
+            padding-bottom: 3.5rem !important;
+          }
+
+          .pt-xxl-0 {
+            padding-top: 0 !important;
+          }
+
+          .pt-xxl-1 {
+            padding-top: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .pt-xxl-2 {
+            padding-top: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .pt-xxl-3 {
+            padding-top: 1.5rem !important;
+          }
+
+          .pt-xxl-4 {
+            padding-top: 2.5rem !important;
+          }
+
+          .pt-xxl-5 {
+            padding-top: 3.5rem !important;
+          }
+
+          .pe-xxl-0 {
+            padding-right: 0 !important;
+          }
+
+          .pe-xxl-1 {
+            padding-right: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .pe-xxl-2 {
+            padding-right: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .pe-xxl-3 {
+            padding-right: 1.5rem !important;
+          }
+
+          .pe-xxl-4 {
+            padding-right: 2.5rem !important;
+          }
+
+          .pe-xxl-5 {
+            padding-right: 3.5rem !important;
+          }
+
+          .pb-xxl-0 {
+            padding-bottom: 0 !important;
+          }
+
+          .pb-xxl-1 {
+            padding-bottom: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .pb-xxl-2 {
+            padding-bottom: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .pb-xxl-3 {
+            padding-bottom: 1.5rem !important;
+          }
+
+          .pb-xxl-4 {
+            padding-bottom: 2.5rem !important;
+          }
+
+          .pb-xxl-5 {
+            padding-bottom: 3.5rem !important;
+          }
+
+          .ps-xxl-0 {
+            padding-left: 0 !important;
+          }
+
+          .ps-xxl-1 {
+            padding-left: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .ps-xxl-2 {
+            padding-left: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .ps-xxl-3 {
+            padding-left: 1.5rem !important;
+          }
+
+          .ps-xxl-4 {
+            padding-left: 2.5rem !important;
+          }
+
+          .ps-xxl-5 {
+            padding-left: 3.5rem !important;
+          }
+
+          .gap-xxl-0 {
+            gap: 0 !important;
+          }
+
+          .gap-xxl-1 {
+            gap: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .gap-xxl-2 {
+            gap: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .gap-xxl-3 {
+            gap: 1.5rem !important;
+          }
+
+          .gap-xxl-4 {
+            gap: 2.5rem !important;
+          }
+
+          .gap-xxl-5 {
+            gap: 3.5rem !important;
+          }
+
+          .row-gap-xxl-0 {
+            row-gap: 0 !important;
+          }
+
+          .row-gap-xxl-1 {
+            row-gap: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .row-gap-xxl-2 {
+            row-gap: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .row-gap-xxl-3 {
+            row-gap: 1.5rem !important;
+          }
+
+          .row-gap-xxl-4 {
+            row-gap: 2.5rem !important;
+          }
+
+          .row-gap-xxl-5 {
+            row-gap: 3.5rem !important;
+          }
+
+          .column-gap-xxl-0 {
+            column-gap: 0 !important;
+          }
+
+          .column-gap-xxl-1 {
+            column-gap: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .column-gap-xxl-2 {
+            column-gap: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .column-gap-xxl-3 {
+            column-gap: 1.5rem !important;
+          }
+
+          .column-gap-xxl-4 {
+            column-gap: 2.5rem !important;
+          }
+
+          .column-gap-xxl-5 {
+            column-gap: 3.5rem !important;
+          }
+
+          .m-xxl-none {
+            margin: 0 !important;
+          }
+
+          .m-xxl-smash {
+            margin: 2px !important;
+          }
+
+          .m-xxl-shortest {
+            margin: 4px !important;
+          }
+
+          .m-xxl-shorter {
+            margin: 8px !important;
+          }
+
+          .m-xxl-short {
+            margin: 12px !important;
+          }
+
+          .m-xxl-medium {
+            margin: 16px !important;
+          }
+
+          .m-xxl-tall {
+            margin: 24px !important;
+          }
+
+          .m-xxl-taller {
+            margin: 32px !important;
+          }
+
+          .m-xxl-tallest {
+            margin: 40px !important;
+          }
+
+          .m-xxl-spacious {
+            margin: 48px !important;
+          }
+
+          .m-xxl-huge {
+            margin: 56px !important;
+          }
+
+          .m-xxl-jumbo {
+            margin: 64px !important;
+          }
+
+          .m-xxl-auto {
+            margin: auto !important;
+          }
+
+          .mx-xxl-none {
+            margin-right: 0 !important;
+            margin-left: 0 !important;
+          }
+
+          .mx-xxl-smash {
+            margin-right: 2px !important;
+            margin-left: 2px !important;
+          }
+
+          .mx-xxl-shortest {
+            margin-right: 4px !important;
+            margin-left: 4px !important;
+          }
+
+          .mx-xxl-shorter {
+            margin-right: 8px !important;
+            margin-left: 8px !important;
+          }
+
+          .mx-xxl-short {
+            margin-right: 12px !important;
+            margin-left: 12px !important;
+          }
+
+          .mx-xxl-medium {
+            margin-right: 16px !important;
+            margin-left: 16px !important;
+          }
+
+          .mx-xxl-tall {
+            margin-right: 24px !important;
+            margin-left: 24px !important;
+          }
+
+          .mx-xxl-taller {
+            margin-right: 32px !important;
+            margin-left: 32px !important;
+          }
+
+          .mx-xxl-tallest {
+            margin-right: 40px !important;
+            margin-left: 40px !important;
+          }
+
+          .mx-xxl-spacious {
+            margin-right: 48px !important;
+            margin-left: 48px !important;
+          }
+
+          .mx-xxl-huge {
+            margin-right: 56px !important;
+            margin-left: 56px !important;
+          }
+
+          .mx-xxl-jumbo {
+            margin-right: 64px !important;
+            margin-left: 64px !important;
+          }
+
+          .mx-xxl-auto {
+            margin-right: auto !important;
+            margin-left: auto !important;
+          }
+
+          .my-xxl-none {
+            margin-top: 0 !important;
+            margin-bottom: 0 !important;
+          }
+
+          .my-xxl-smash {
+            margin-top: 2px !important;
+            margin-bottom: 2px !important;
+          }
+
+          .my-xxl-shortest {
+            margin-top: 4px !important;
+            margin-bottom: 4px !important;
+          }
+
+          .my-xxl-shorter {
+            margin-top: 8px !important;
+            margin-bottom: 8px !important;
+          }
+
+          .my-xxl-short {
+            margin-top: 12px !important;
+            margin-bottom: 12px !important;
+          }
+
+          .my-xxl-medium {
+            margin-top: 16px !important;
+            margin-bottom: 16px !important;
+          }
+
+          .my-xxl-tall {
+            margin-top: 24px !important;
+            margin-bottom: 24px !important;
+          }
+
+          .my-xxl-taller {
+            margin-top: 32px !important;
+            margin-bottom: 32px !important;
+          }
+
+          .my-xxl-tallest {
+            margin-top: 40px !important;
+            margin-bottom: 40px !important;
+          }
+
+          .my-xxl-spacious {
+            margin-top: 48px !important;
+            margin-bottom: 48px !important;
+          }
+
+          .my-xxl-huge {
+            margin-top: 56px !important;
+            margin-bottom: 56px !important;
+          }
+
+          .my-xxl-jumbo {
+            margin-top: 64px !important;
+            margin-bottom: 64px !important;
+          }
+
+          .my-xxl-auto {
+            margin-top: auto !important;
+            margin-bottom: auto !important;
+          }
+
+          .mt-xxl-none {
+            margin-top: 0 !important;
+          }
+
+          .mt-xxl-smash {
+            margin-top: 2px !important;
+          }
+
+          .mt-xxl-shortest {
+            margin-top: 4px !important;
+          }
+
+          .mt-xxl-shorter {
+            margin-top: 8px !important;
+          }
+
+          .mt-xxl-short {
+            margin-top: 12px !important;
+          }
+
+          .mt-xxl-medium {
+            margin-top: 16px !important;
+          }
+
+          .mt-xxl-tall {
+            margin-top: 24px !important;
+          }
+
+          .mt-xxl-taller {
+            margin-top: 32px !important;
+          }
+
+          .mt-xxl-tallest {
+            margin-top: 40px !important;
+          }
+
+          .mt-xxl-spacious {
+            margin-top: 48px !important;
+          }
+
+          .mt-xxl-huge {
+            margin-top: 56px !important;
+          }
+
+          .mt-xxl-jumbo {
+            margin-top: 64px !important;
+          }
+
+          .mt-xxl-auto {
+            margin-top: auto !important;
+          }
+
+          .me-xxl-none {
+            margin-right: 0 !important;
+          }
+
+          .me-xxl-smash {
+            margin-right: 2px !important;
+          }
+
+          .me-xxl-shortest {
+            margin-right: 4px !important;
+          }
+
+          .me-xxl-shorter {
+            margin-right: 8px !important;
+          }
+
+          .me-xxl-short {
+            margin-right: 12px !important;
+          }
+
+          .me-xxl-medium {
+            margin-right: 16px !important;
+          }
+
+          .me-xxl-tall {
+            margin-right: 24px !important;
+          }
+
+          .me-xxl-taller {
+            margin-right: 32px !important;
+          }
+
+          .me-xxl-tallest {
+            margin-right: 40px !important;
+          }
+
+          .me-xxl-spacious {
+            margin-right: 48px !important;
+          }
+
+          .me-xxl-huge {
+            margin-right: 56px !important;
+          }
+
+          .me-xxl-jumbo {
+            margin-right: 64px !important;
+          }
+
+          .me-xxl-auto {
+            margin-right: auto !important;
+          }
+
+          .mb-xxl-none {
+            margin-bottom: 0 !important;
+          }
+
+          .mb-xxl-smash {
+            margin-bottom: 2px !important;
+          }
+
+          .mb-xxl-shortest {
+            margin-bottom: 4px !important;
+          }
+
+          .mb-xxl-shorter {
+            margin-bottom: 8px !important;
+          }
+
+          .mb-xxl-short {
+            margin-bottom: 12px !important;
+          }
+
+          .mb-xxl-medium {
+            margin-bottom: 16px !important;
+          }
+
+          .mb-xxl-tall {
+            margin-bottom: 24px !important;
+          }
+
+          .mb-xxl-taller {
+            margin-bottom: 32px !important;
+          }
+
+          .mb-xxl-tallest {
+            margin-bottom: 40px !important;
+          }
+
+          .mb-xxl-spacious {
+            margin-bottom: 48px !important;
+          }
+
+          .mb-xxl-huge {
+            margin-bottom: 56px !important;
+          }
+
+          .mb-xxl-jumbo {
+            margin-bottom: 64px !important;
+          }
+
+          .mb-xxl-auto {
+            margin-bottom: auto !important;
+          }
+
+          .ms-xxl-none {
+            margin-left: 0 !important;
+          }
+
+          .ms-xxl-smash {
+            margin-left: 2px !important;
+          }
+
+          .ms-xxl-shortest {
+            margin-left: 4px !important;
+          }
+
+          .ms-xxl-shorter {
+            margin-left: 8px !important;
+          }
+
+          .ms-xxl-short {
+            margin-left: 12px !important;
+          }
+
+          .ms-xxl-medium {
+            margin-left: 16px !important;
+          }
+
+          .ms-xxl-tall {
+            margin-left: 24px !important;
+          }
+
+          .ms-xxl-taller {
+            margin-left: 32px !important;
+          }
+
+          .ms-xxl-tallest {
+            margin-left: 40px !important;
+          }
+
+          .ms-xxl-spacious {
+            margin-left: 48px !important;
+          }
+
+          .ms-xxl-huge {
+            margin-left: 56px !important;
+          }
+
+          .ms-xxl-jumbo {
+            margin-left: 64px !important;
+          }
+
+          .ms-xxl-auto {
+            margin-left: auto !important;
+          }
+
+          .p-xxl-none {
+            padding: 0 !important;
+          }
+
+          .p-xxl-smash {
+            padding: 2px !important;
+          }
+
+          .p-xxl-shortest {
+            padding: 4px !important;
+          }
+
+          .p-xxl-shorter {
+            padding: 8px !important;
+          }
+
+          .p-xxl-short {
+            padding: 12px !important;
+          }
+
+          .p-xxl-medium {
+            padding: 16px !important;
+          }
+
+          .p-xxl-tall {
+            padding: 24px !important;
+          }
+
+          .p-xxl-taller {
+            padding: 32px !important;
+          }
+
+          .p-xxl-tallest {
+            padding: 40px !important;
+          }
+
+          .p-xxl-spacious {
+            padding: 48px !important;
+          }
+
+          .p-xxl-huge {
+            padding: 56px !important;
+          }
+
+          .p-xxl-jumbo {
+            padding: 64px !important;
+          }
+
+          .px-xxl-none {
+            padding-right: 0 !important;
+            padding-left: 0 !important;
+          }
+
+          .px-xxl-smash {
+            padding-right: 2px !important;
+            padding-left: 2px !important;
+          }
+
+          .px-xxl-shortest {
+            padding-right: 4px !important;
+            padding-left: 4px !important;
+          }
+
+          .px-xxl-shorter {
+            padding-right: 8px !important;
+            padding-left: 8px !important;
+          }
+
+          .px-xxl-short {
+            padding-right: 12px !important;
+            padding-left: 12px !important;
+          }
+
+          .px-xxl-medium {
+            padding-right: 16px !important;
+            padding-left: 16px !important;
+          }
+
+          .px-xxl-tall {
+            padding-right: 24px !important;
+            padding-left: 24px !important;
+          }
+
+          .px-xxl-taller {
+            padding-right: 32px !important;
+            padding-left: 32px !important;
+          }
+
+          .px-xxl-tallest {
+            padding-right: 40px !important;
+            padding-left: 40px !important;
+          }
+
+          .px-xxl-spacious {
+            padding-right: 48px !important;
+            padding-left: 48px !important;
+          }
+
+          .px-xxl-huge {
+            padding-right: 56px !important;
+            padding-left: 56px !important;
+          }
+
+          .px-xxl-jumbo {
+            padding-right: 64px !important;
+            padding-left: 64px !important;
+          }
+
+          .py-xxl-none {
+            padding-top: 0 !important;
+            padding-bottom: 0 !important;
+          }
+
+          .py-xxl-smash {
+            padding-top: 2px !important;
+            padding-bottom: 2px !important;
+          }
+
+          .py-xxl-shortest {
+            padding-top: 4px !important;
+            padding-bottom: 4px !important;
+          }
+
+          .py-xxl-shorter {
+            padding-top: 8px !important;
+            padding-bottom: 8px !important;
+          }
+
+          .py-xxl-short {
+            padding-top: 12px !important;
+            padding-bottom: 12px !important;
+          }
+
+          .py-xxl-medium {
+            padding-top: 16px !important;
+            padding-bottom: 16px !important;
+          }
+
+          .py-xxl-tall {
+            padding-top: 24px !important;
+            padding-bottom: 24px !important;
+          }
+
+          .py-xxl-taller {
+            padding-top: 32px !important;
+            padding-bottom: 32px !important;
+          }
+
+          .py-xxl-tallest {
+            padding-top: 40px !important;
+            padding-bottom: 40px !important;
+          }
+
+          .py-xxl-spacious {
+            padding-top: 48px !important;
+            padding-bottom: 48px !important;
+          }
+
+          .py-xxl-huge {
+            padding-top: 56px !important;
+            padding-bottom: 56px !important;
+          }
+
+          .py-xxl-jumbo {
+            padding-top: 64px !important;
+            padding-bottom: 64px !important;
+          }
+
+          .pt-xxl-none {
+            padding-top: 0 !important;
+          }
+
+          .pt-xxl-smash {
+            padding-top: 2px !important;
+          }
+
+          .pt-xxl-shortest {
+            padding-top: 4px !important;
+          }
+
+          .pt-xxl-shorter {
+            padding-top: 8px !important;
+          }
+
+          .pt-xxl-short {
+            padding-top: 12px !important;
+          }
+
+          .pt-xxl-medium {
+            padding-top: 16px !important;
+          }
+
+          .pt-xxl-tall {
+            padding-top: 24px !important;
+          }
+
+          .pt-xxl-taller {
+            padding-top: 32px !important;
+          }
+
+          .pt-xxl-tallest {
+            padding-top: 40px !important;
+          }
+
+          .pt-xxl-spacious {
+            padding-top: 48px !important;
+          }
+
+          .pt-xxl-huge {
+            padding-top: 56px !important;
+          }
+
+          .pt-xxl-jumbo {
+            padding-top: 64px !important;
+          }
+
+          .pe-xxl-none {
+            padding-right: 0 !important;
+          }
+
+          .pe-xxl-smash {
+            padding-right: 2px !important;
+          }
+
+          .pe-xxl-shortest {
+            padding-right: 4px !important;
+          }
+
+          .pe-xxl-shorter {
+            padding-right: 8px !important;
+          }
+
+          .pe-xxl-short {
+            padding-right: 12px !important;
+          }
+
+          .pe-xxl-medium {
+            padding-right: 16px !important;
+          }
+
+          .pe-xxl-tall {
+            padding-right: 24px !important;
+          }
+
+          .pe-xxl-taller {
+            padding-right: 32px !important;
+          }
+
+          .pe-xxl-tallest {
+            padding-right: 40px !important;
+          }
+
+          .pe-xxl-spacious {
+            padding-right: 48px !important;
+          }
+
+          .pe-xxl-huge {
+            padding-right: 56px !important;
+          }
+
+          .pe-xxl-jumbo {
+            padding-right: 64px !important;
+          }
+
+          .pb-xxl-none {
+            padding-bottom: 0 !important;
+          }
+
+          .pb-xxl-smash {
+            padding-bottom: 2px !important;
+          }
+
+          .pb-xxl-shortest {
+            padding-bottom: 4px !important;
+          }
+
+          .pb-xxl-shorter {
+            padding-bottom: 8px !important;
+          }
+
+          .pb-xxl-short {
+            padding-bottom: 12px !important;
+          }
+
+          .pb-xxl-medium {
+            padding-bottom: 16px !important;
+          }
+
+          .pb-xxl-tall {
+            padding-bottom: 24px !important;
+          }
+
+          .pb-xxl-taller {
+            padding-bottom: 32px !important;
+          }
+
+          .pb-xxl-tallest {
+            padding-bottom: 40px !important;
+          }
+
+          .pb-xxl-spacious {
+            padding-bottom: 48px !important;
+          }
+
+          .pb-xxl-huge {
+            padding-bottom: 56px !important;
+          }
+
+          .pb-xxl-jumbo {
+            padding-bottom: 64px !important;
+          }
+
+          .ps-xxl-none {
+            padding-left: 0 !important;
+          }
+
+          .ps-xxl-smash {
+            padding-left: 2px !important;
+          }
+
+          .ps-xxl-shortest {
+            padding-left: 4px !important;
+          }
+
+          .ps-xxl-shorter {
+            padding-left: 8px !important;
+          }
+
+          .ps-xxl-short {
+            padding-left: 12px !important;
+          }
+
+          .ps-xxl-medium {
+            padding-left: 16px !important;
+          }
+
+          .ps-xxl-tall {
+            padding-left: 24px !important;
+          }
+
+          .ps-xxl-taller {
+            padding-left: 32px !important;
+          }
+
+          .ps-xxl-tallest {
+            padding-left: 40px !important;
+          }
+
+          .ps-xxl-spacious {
+            padding-left: 48px !important;
+          }
+
+          .ps-xxl-huge {
+            padding-left: 56px !important;
+          }
+
+          .ps-xxl-jumbo {
+            padding-left: 64px !important;
+          }
+
+          .gap-xxl-none {
+            gap: 0 !important;
+          }
+
+          .gap-xxl-smash {
+            gap: 2px !important;
+          }
+
+          .gap-xxl-shortest {
+            gap: 4px !important;
+          }
+
+          .gap-xxl-shorter {
+            gap: 8px !important;
+          }
+
+          .gap-xxl-short {
+            gap: 12px !important;
+          }
+
+          .gap-xxl-medium {
+            gap: 16px !important;
+          }
+
+          .gap-xxl-tall {
+            gap: 24px !important;
+          }
+
+          .gap-xxl-taller {
+            gap: 32px !important;
+          }
+
+          .gap-xxl-tallest {
+            gap: 40px !important;
+          }
+
+          .gap-xxl-spacious {
+            gap: 48px !important;
+          }
+
+          .gap-xxl-huge {
+            gap: 56px !important;
+          }
+
+          .gap-xxl-jumbo {
+            gap: 64px !important;
+          }
+
+          .row-gap-xxl-none {
+            row-gap: 0 !important;
+          }
+
+          .row-gap-xxl-smash {
+            row-gap: 2px !important;
+          }
+
+          .row-gap-xxl-shortest {
+            row-gap: 4px !important;
+          }
+
+          .row-gap-xxl-shorter {
+            row-gap: 8px !important;
+          }
+
+          .row-gap-xxl-short {
+            row-gap: 12px !important;
+          }
+
+          .row-gap-xxl-medium {
+            row-gap: 16px !important;
+          }
+
+          .row-gap-xxl-tall {
+            row-gap: 24px !important;
+          }
+
+          .row-gap-xxl-taller {
+            row-gap: 32px !important;
+          }
+
+          .row-gap-xxl-tallest {
+            row-gap: 40px !important;
+          }
+
+          .row-gap-xxl-spacious {
+            row-gap: 48px !important;
+          }
+
+          .row-gap-xxl-huge {
+            row-gap: 56px !important;
+          }
+
+          .row-gap-xxl-jumbo {
+            row-gap: 64px !important;
+          }
+
+          .column-gap-xxl-none {
+            column-gap: 0 !important;
+          }
+
+          .column-gap-xxl-smash {
+            column-gap: 2px !important;
+          }
+
+          .column-gap-xxl-shortest {
+            column-gap: 4px !important;
+          }
+
+          .column-gap-xxl-shorter {
+            column-gap: 8px !important;
+          }
+
+          .column-gap-xxl-short {
+            column-gap: 12px !important;
+          }
+
+          .column-gap-xxl-medium {
+            column-gap: 16px !important;
+          }
+
+          .column-gap-xxl-tall {
+            column-gap: 24px !important;
+          }
+
+          .column-gap-xxl-taller {
+            column-gap: 32px !important;
+          }
+
+          .column-gap-xxl-tallest {
+            column-gap: 40px !important;
+          }
+
+          .column-gap-xxl-spacious {
+            column-gap: 48px !important;
+          }
+
+          .column-gap-xxl-huge {
+            column-gap: 56px !important;
+          }
+
+          .column-gap-xxl-jumbo {
+            column-gap: 64px !important;
+          }
+        }
+
+        @media (min-width: 1640px) {
+          .m-2xl-0 {
+            margin: 0 !important;
+          }
+
+          .m-2xl-1 {
+            margin: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .m-2xl-2 {
+            margin: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .m-2xl-3 {
+            margin: 1.5rem !important;
+          }
+
+          .m-2xl-4 {
+            margin: 2.5rem !important;
+          }
+
+          .m-2xl-5 {
+            margin: 3.5rem !important;
+          }
+
+          .mx-2xl-0 {
+            margin-right: 0 !important;
+            margin-left: 0 !important;
+          }
+
+          .mx-2xl-1 {
+            margin-right: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+            margin-left: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .mx-2xl-2 {
+            margin-right: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+            margin-left: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .mx-2xl-3 {
+            margin-right: 1.5rem !important;
+            margin-left: 1.5rem !important;
+          }
+
+          .mx-2xl-4 {
+            margin-right: 2.5rem !important;
+            margin-left: 2.5rem !important;
+          }
+
+          .mx-2xl-5 {
+            margin-right: 3.5rem !important;
+            margin-left: 3.5rem !important;
+          }
+
+          .my-2xl-0 {
+            margin-top: 0 !important;
+            margin-bottom: 0 !important;
+          }
+
+          .my-2xl-1 {
+            margin-top: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+            margin-bottom: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .my-2xl-2 {
+            margin-top: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+            margin-bottom: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .my-2xl-3 {
+            margin-top: 1.5rem !important;
+            margin-bottom: 1.5rem !important;
+          }
+
+          .my-2xl-4 {
+            margin-top: 2.5rem !important;
+            margin-bottom: 2.5rem !important;
+          }
+
+          .my-2xl-5 {
+            margin-top: 3.5rem !important;
+            margin-bottom: 3.5rem !important;
+          }
+
+          .mt-2xl-0 {
+            margin-top: 0 !important;
+          }
+
+          .mt-2xl-1 {
+            margin-top: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .mt-2xl-2 {
+            margin-top: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .mt-2xl-3 {
+            margin-top: 1.5rem !important;
+          }
+
+          .mt-2xl-4 {
+            margin-top: 2.5rem !important;
+          }
+
+          .mt-2xl-5 {
+            margin-top: 3.5rem !important;
+          }
+
+          .me-2xl-0 {
+            margin-right: 0 !important;
+          }
+
+          .me-2xl-1 {
+            margin-right: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .me-2xl-2 {
+            margin-right: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .me-2xl-3 {
+            margin-right: 1.5rem !important;
+          }
+
+          .me-2xl-4 {
+            margin-right: 2.5rem !important;
+          }
+
+          .me-2xl-5 {
+            margin-right: 3.5rem !important;
+          }
+
+          .mb-2xl-0 {
+            margin-bottom: 0 !important;
+          }
+
+          .mb-2xl-1 {
+            margin-bottom: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .mb-2xl-2 {
+            margin-bottom: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .mb-2xl-3 {
+            margin-bottom: 1.5rem !important;
+          }
+
+          .mb-2xl-4 {
+            margin-bottom: 2.5rem !important;
+          }
+
+          .mb-2xl-5 {
+            margin-bottom: 3.5rem !important;
+          }
+
+          .ms-2xl-0 {
+            margin-left: 0 !important;
+          }
+
+          .ms-2xl-1 {
+            margin-left: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .ms-2xl-2 {
+            margin-left: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .ms-2xl-3 {
+            margin-left: 1.5rem !important;
+          }
+
+          .ms-2xl-4 {
+            margin-left: 2.5rem !important;
+          }
+
+          .ms-2xl-5 {
+            margin-left: 3.5rem !important;
+          }
+
+          .p-2xl-0 {
+            padding: 0 !important;
+          }
+
+          .p-2xl-1 {
+            padding: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .p-2xl-2 {
+            padding: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .p-2xl-3 {
+            padding: 1.5rem !important;
+          }
+
+          .p-2xl-4 {
+            padding: 2.5rem !important;
+          }
+
+          .p-2xl-5 {
+            padding: 3.5rem !important;
+          }
+
+          .px-2xl-0 {
+            padding-right: 0 !important;
+            padding-left: 0 !important;
+          }
+
+          .px-2xl-1 {
+            padding-right: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+            padding-left: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .px-2xl-2 {
+            padding-right: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+            padding-left: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .px-2xl-3 {
+            padding-right: 1.5rem !important;
+            padding-left: 1.5rem !important;
+          }
+
+          .px-2xl-4 {
+            padding-right: 2.5rem !important;
+            padding-left: 2.5rem !important;
+          }
+
+          .px-2xl-5 {
+            padding-right: 3.5rem !important;
+            padding-left: 3.5rem !important;
+          }
+
+          .py-2xl-0 {
+            padding-top: 0 !important;
+            padding-bottom: 0 !important;
+          }
+
+          .py-2xl-1 {
+            padding-top: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+            padding-bottom: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .py-2xl-2 {
+            padding-top: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+            padding-bottom: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .py-2xl-3 {
+            padding-top: 1.5rem !important;
+            padding-bottom: 1.5rem !important;
+          }
+
+          .py-2xl-4 {
+            padding-top: 2.5rem !important;
+            padding-bottom: 2.5rem !important;
+          }
+
+          .py-2xl-5 {
+            padding-top: 3.5rem !important;
+            padding-bottom: 3.5rem !important;
+          }
+
+          .pt-2xl-0 {
+            padding-top: 0 !important;
+          }
+
+          .pt-2xl-1 {
+            padding-top: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .pt-2xl-2 {
+            padding-top: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .pt-2xl-3 {
+            padding-top: 1.5rem !important;
+          }
+
+          .pt-2xl-4 {
+            padding-top: 2.5rem !important;
+          }
+
+          .pt-2xl-5 {
+            padding-top: 3.5rem !important;
+          }
+
+          .pe-2xl-0 {
+            padding-right: 0 !important;
+          }
+
+          .pe-2xl-1 {
+            padding-right: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .pe-2xl-2 {
+            padding-right: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .pe-2xl-3 {
+            padding-right: 1.5rem !important;
+          }
+
+          .pe-2xl-4 {
+            padding-right: 2.5rem !important;
+          }
+
+          .pe-2xl-5 {
+            padding-right: 3.5rem !important;
+          }
+
+          .pb-2xl-0 {
+            padding-bottom: 0 !important;
+          }
+
+          .pb-2xl-1 {
+            padding-bottom: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .pb-2xl-2 {
+            padding-bottom: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .pb-2xl-3 {
+            padding-bottom: 1.5rem !important;
+          }
+
+          .pb-2xl-4 {
+            padding-bottom: 2.5rem !important;
+          }
+
+          .pb-2xl-5 {
+            padding-bottom: 3.5rem !important;
+          }
+
+          .ps-2xl-0 {
+            padding-left: 0 !important;
+          }
+
+          .ps-2xl-1 {
+            padding-left: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .ps-2xl-2 {
+            padding-left: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .ps-2xl-3 {
+            padding-left: 1.5rem !important;
+          }
+
+          .ps-2xl-4 {
+            padding-left: 2.5rem !important;
+          }
+
+          .ps-2xl-5 {
+            padding-left: 3.5rem !important;
+          }
+
+          .gap-2xl-0 {
+            gap: 0 !important;
+          }
+
+          .gap-2xl-1 {
+            gap: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .gap-2xl-2 {
+            gap: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .gap-2xl-3 {
+            gap: 1.5rem !important;
+          }
+
+          .gap-2xl-4 {
+            gap: 2.5rem !important;
+          }
+
+          .gap-2xl-5 {
+            gap: 3.5rem !important;
+          }
+
+          .row-gap-2xl-0 {
+            row-gap: 0 !important;
+          }
+
+          .row-gap-2xl-1 {
+            row-gap: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .row-gap-2xl-2 {
+            row-gap: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .row-gap-2xl-3 {
+            row-gap: 1.5rem !important;
+          }
+
+          .row-gap-2xl-4 {
+            row-gap: 2.5rem !important;
+          }
+
+          .row-gap-2xl-5 {
+            row-gap: 3.5rem !important;
+          }
+
+          .column-gap-2xl-0 {
+            column-gap: 0 !important;
+          }
+
+          .column-gap-2xl-1 {
+            column-gap: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .column-gap-2xl-2 {
+            column-gap: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .column-gap-2xl-3 {
+            column-gap: 1.5rem !important;
+          }
+
+          .column-gap-2xl-4 {
+            column-gap: 2.5rem !important;
+          }
+
+          .column-gap-2xl-5 {
+            column-gap: 3.5rem !important;
+          }
+
+          .m-2xl-none {
+            margin: 0 !important;
+          }
+
+          .m-2xl-smash {
+            margin: 2px !important;
+          }
+
+          .m-2xl-shortest {
+            margin: 4px !important;
+          }
+
+          .m-2xl-shorter {
+            margin: 8px !important;
+          }
+
+          .m-2xl-short {
+            margin: 12px !important;
+          }
+
+          .m-2xl-medium {
+            margin: 16px !important;
+          }
+
+          .m-2xl-tall {
+            margin: 24px !important;
+          }
+
+          .m-2xl-taller {
+            margin: 32px !important;
+          }
+
+          .m-2xl-tallest {
+            margin: 40px !important;
+          }
+
+          .m-2xl-spacious {
+            margin: 48px !important;
+          }
+
+          .m-2xl-huge {
+            margin: 56px !important;
+          }
+
+          .m-2xl-jumbo {
+            margin: 64px !important;
+          }
+
+          .m-2xl-auto {
+            margin: auto !important;
+          }
+
+          .mx-2xl-none {
+            margin-right: 0 !important;
+            margin-left: 0 !important;
+          }
+
+          .mx-2xl-smash {
+            margin-right: 2px !important;
+            margin-left: 2px !important;
+          }
+
+          .mx-2xl-shortest {
+            margin-right: 4px !important;
+            margin-left: 4px !important;
+          }
+
+          .mx-2xl-shorter {
+            margin-right: 8px !important;
+            margin-left: 8px !important;
+          }
+
+          .mx-2xl-short {
+            margin-right: 12px !important;
+            margin-left: 12px !important;
+          }
+
+          .mx-2xl-medium {
+            margin-right: 16px !important;
+            margin-left: 16px !important;
+          }
+
+          .mx-2xl-tall {
+            margin-right: 24px !important;
+            margin-left: 24px !important;
+          }
+
+          .mx-2xl-taller {
+            margin-right: 32px !important;
+            margin-left: 32px !important;
+          }
+
+          .mx-2xl-tallest {
+            margin-right: 40px !important;
+            margin-left: 40px !important;
+          }
+
+          .mx-2xl-spacious {
+            margin-right: 48px !important;
+            margin-left: 48px !important;
+          }
+
+          .mx-2xl-huge {
+            margin-right: 56px !important;
+            margin-left: 56px !important;
+          }
+
+          .mx-2xl-jumbo {
+            margin-right: 64px !important;
+            margin-left: 64px !important;
+          }
+
+          .mx-2xl-auto {
+            margin-right: auto !important;
+            margin-left: auto !important;
+          }
+
+          .my-2xl-none {
+            margin-top: 0 !important;
+            margin-bottom: 0 !important;
+          }
+
+          .my-2xl-smash {
+            margin-top: 2px !important;
+            margin-bottom: 2px !important;
+          }
+
+          .my-2xl-shortest {
+            margin-top: 4px !important;
+            margin-bottom: 4px !important;
+          }
+
+          .my-2xl-shorter {
+            margin-top: 8px !important;
+            margin-bottom: 8px !important;
+          }
+
+          .my-2xl-short {
+            margin-top: 12px !important;
+            margin-bottom: 12px !important;
+          }
+
+          .my-2xl-medium {
+            margin-top: 16px !important;
+            margin-bottom: 16px !important;
+          }
+
+          .my-2xl-tall {
+            margin-top: 24px !important;
+            margin-bottom: 24px !important;
+          }
+
+          .my-2xl-taller {
+            margin-top: 32px !important;
+            margin-bottom: 32px !important;
+          }
+
+          .my-2xl-tallest {
+            margin-top: 40px !important;
+            margin-bottom: 40px !important;
+          }
+
+          .my-2xl-spacious {
+            margin-top: 48px !important;
+            margin-bottom: 48px !important;
+          }
+
+          .my-2xl-huge {
+            margin-top: 56px !important;
+            margin-bottom: 56px !important;
+          }
+
+          .my-2xl-jumbo {
+            margin-top: 64px !important;
+            margin-bottom: 64px !important;
+          }
+
+          .my-2xl-auto {
+            margin-top: auto !important;
+            margin-bottom: auto !important;
+          }
+
+          .mt-2xl-none {
+            margin-top: 0 !important;
+          }
+
+          .mt-2xl-smash {
+            margin-top: 2px !important;
+          }
+
+          .mt-2xl-shortest {
+            margin-top: 4px !important;
+          }
+
+          .mt-2xl-shorter {
+            margin-top: 8px !important;
+          }
+
+          .mt-2xl-short {
+            margin-top: 12px !important;
+          }
+
+          .mt-2xl-medium {
+            margin-top: 16px !important;
+          }
+
+          .mt-2xl-tall {
+            margin-top: 24px !important;
+          }
+
+          .mt-2xl-taller {
+            margin-top: 32px !important;
+          }
+
+          .mt-2xl-tallest {
+            margin-top: 40px !important;
+          }
+
+          .mt-2xl-spacious {
+            margin-top: 48px !important;
+          }
+
+          .mt-2xl-huge {
+            margin-top: 56px !important;
+          }
+
+          .mt-2xl-jumbo {
+            margin-top: 64px !important;
+          }
+
+          .mt-2xl-auto {
+            margin-top: auto !important;
+          }
+
+          .me-2xl-none {
+            margin-right: 0 !important;
+          }
+
+          .me-2xl-smash {
+            margin-right: 2px !important;
+          }
+
+          .me-2xl-shortest {
+            margin-right: 4px !important;
+          }
+
+          .me-2xl-shorter {
+            margin-right: 8px !important;
+          }
+
+          .me-2xl-short {
+            margin-right: 12px !important;
+          }
+
+          .me-2xl-medium {
+            margin-right: 16px !important;
+          }
+
+          .me-2xl-tall {
+            margin-right: 24px !important;
+          }
+
+          .me-2xl-taller {
+            margin-right: 32px !important;
+          }
+
+          .me-2xl-tallest {
+            margin-right: 40px !important;
+          }
+
+          .me-2xl-spacious {
+            margin-right: 48px !important;
+          }
+
+          .me-2xl-huge {
+            margin-right: 56px !important;
+          }
+
+          .me-2xl-jumbo {
+            margin-right: 64px !important;
+          }
+
+          .me-2xl-auto {
+            margin-right: auto !important;
+          }
+
+          .mb-2xl-none {
+            margin-bottom: 0 !important;
+          }
+
+          .mb-2xl-smash {
+            margin-bottom: 2px !important;
+          }
+
+          .mb-2xl-shortest {
+            margin-bottom: 4px !important;
+          }
+
+          .mb-2xl-shorter {
+            margin-bottom: 8px !important;
+          }
+
+          .mb-2xl-short {
+            margin-bottom: 12px !important;
+          }
+
+          .mb-2xl-medium {
+            margin-bottom: 16px !important;
+          }
+
+          .mb-2xl-tall {
+            margin-bottom: 24px !important;
+          }
+
+          .mb-2xl-taller {
+            margin-bottom: 32px !important;
+          }
+
+          .mb-2xl-tallest {
+            margin-bottom: 40px !important;
+          }
+
+          .mb-2xl-spacious {
+            margin-bottom: 48px !important;
+          }
+
+          .mb-2xl-huge {
+            margin-bottom: 56px !important;
+          }
+
+          .mb-2xl-jumbo {
+            margin-bottom: 64px !important;
+          }
+
+          .mb-2xl-auto {
+            margin-bottom: auto !important;
+          }
+
+          .ms-2xl-none {
+            margin-left: 0 !important;
+          }
+
+          .ms-2xl-smash {
+            margin-left: 2px !important;
+          }
+
+          .ms-2xl-shortest {
+            margin-left: 4px !important;
+          }
+
+          .ms-2xl-shorter {
+            margin-left: 8px !important;
+          }
+
+          .ms-2xl-short {
+            margin-left: 12px !important;
+          }
+
+          .ms-2xl-medium {
+            margin-left: 16px !important;
+          }
+
+          .ms-2xl-tall {
+            margin-left: 24px !important;
+          }
+
+          .ms-2xl-taller {
+            margin-left: 32px !important;
+          }
+
+          .ms-2xl-tallest {
+            margin-left: 40px !important;
+          }
+
+          .ms-2xl-spacious {
+            margin-left: 48px !important;
+          }
+
+          .ms-2xl-huge {
+            margin-left: 56px !important;
+          }
+
+          .ms-2xl-jumbo {
+            margin-left: 64px !important;
+          }
+
+          .ms-2xl-auto {
+            margin-left: auto !important;
+          }
+
+          .p-2xl-none {
+            padding: 0 !important;
+          }
+
+          .p-2xl-smash {
+            padding: 2px !important;
+          }
+
+          .p-2xl-shortest {
+            padding: 4px !important;
+          }
+
+          .p-2xl-shorter {
+            padding: 8px !important;
+          }
+
+          .p-2xl-short {
+            padding: 12px !important;
+          }
+
+          .p-2xl-medium {
+            padding: 16px !important;
+          }
+
+          .p-2xl-tall {
+            padding: 24px !important;
+          }
+
+          .p-2xl-taller {
+            padding: 32px !important;
+          }
+
+          .p-2xl-tallest {
+            padding: 40px !important;
+          }
+
+          .p-2xl-spacious {
+            padding: 48px !important;
+          }
+
+          .p-2xl-huge {
+            padding: 56px !important;
+          }
+
+          .p-2xl-jumbo {
+            padding: 64px !important;
+          }
+
+          .px-2xl-none {
+            padding-right: 0 !important;
+            padding-left: 0 !important;
+          }
+
+          .px-2xl-smash {
+            padding-right: 2px !important;
+            padding-left: 2px !important;
+          }
+
+          .px-2xl-shortest {
+            padding-right: 4px !important;
+            padding-left: 4px !important;
+          }
+
+          .px-2xl-shorter {
+            padding-right: 8px !important;
+            padding-left: 8px !important;
+          }
+
+          .px-2xl-short {
+            padding-right: 12px !important;
+            padding-left: 12px !important;
+          }
+
+          .px-2xl-medium {
+            padding-right: 16px !important;
+            padding-left: 16px !important;
+          }
+
+          .px-2xl-tall {
+            padding-right: 24px !important;
+            padding-left: 24px !important;
+          }
+
+          .px-2xl-taller {
+            padding-right: 32px !important;
+            padding-left: 32px !important;
+          }
+
+          .px-2xl-tallest {
+            padding-right: 40px !important;
+            padding-left: 40px !important;
+          }
+
+          .px-2xl-spacious {
+            padding-right: 48px !important;
+            padding-left: 48px !important;
+          }
+
+          .px-2xl-huge {
+            padding-right: 56px !important;
+            padding-left: 56px !important;
+          }
+
+          .px-2xl-jumbo {
+            padding-right: 64px !important;
+            padding-left: 64px !important;
+          }
+
+          .py-2xl-none {
+            padding-top: 0 !important;
+            padding-bottom: 0 !important;
+          }
+
+          .py-2xl-smash {
+            padding-top: 2px !important;
+            padding-bottom: 2px !important;
+          }
+
+          .py-2xl-shortest {
+            padding-top: 4px !important;
+            padding-bottom: 4px !important;
+          }
+
+          .py-2xl-shorter {
+            padding-top: 8px !important;
+            padding-bottom: 8px !important;
+          }
+
+          .py-2xl-short {
+            padding-top: 12px !important;
+            padding-bottom: 12px !important;
+          }
+
+          .py-2xl-medium {
+            padding-top: 16px !important;
+            padding-bottom: 16px !important;
+          }
+
+          .py-2xl-tall {
+            padding-top: 24px !important;
+            padding-bottom: 24px !important;
+          }
+
+          .py-2xl-taller {
+            padding-top: 32px !important;
+            padding-bottom: 32px !important;
+          }
+
+          .py-2xl-tallest {
+            padding-top: 40px !important;
+            padding-bottom: 40px !important;
+          }
+
+          .py-2xl-spacious {
+            padding-top: 48px !important;
+            padding-bottom: 48px !important;
+          }
+
+          .py-2xl-huge {
+            padding-top: 56px !important;
+            padding-bottom: 56px !important;
+          }
+
+          .py-2xl-jumbo {
+            padding-top: 64px !important;
+            padding-bottom: 64px !important;
+          }
+
+          .pt-2xl-none {
+            padding-top: 0 !important;
+          }
+
+          .pt-2xl-smash {
+            padding-top: 2px !important;
+          }
+
+          .pt-2xl-shortest {
+            padding-top: 4px !important;
+          }
+
+          .pt-2xl-shorter {
+            padding-top: 8px !important;
+          }
+
+          .pt-2xl-short {
+            padding-top: 12px !important;
+          }
+
+          .pt-2xl-medium {
+            padding-top: 16px !important;
+          }
+
+          .pt-2xl-tall {
+            padding-top: 24px !important;
+          }
+
+          .pt-2xl-taller {
+            padding-top: 32px !important;
+          }
+
+          .pt-2xl-tallest {
+            padding-top: 40px !important;
+          }
+
+          .pt-2xl-spacious {
+            padding-top: 48px !important;
+          }
+
+          .pt-2xl-huge {
+            padding-top: 56px !important;
+          }
+
+          .pt-2xl-jumbo {
+            padding-top: 64px !important;
+          }
+
+          .pe-2xl-none {
+            padding-right: 0 !important;
+          }
+
+          .pe-2xl-smash {
+            padding-right: 2px !important;
+          }
+
+          .pe-2xl-shortest {
+            padding-right: 4px !important;
+          }
+
+          .pe-2xl-shorter {
+            padding-right: 8px !important;
+          }
+
+          .pe-2xl-short {
+            padding-right: 12px !important;
+          }
+
+          .pe-2xl-medium {
+            padding-right: 16px !important;
+          }
+
+          .pe-2xl-tall {
+            padding-right: 24px !important;
+          }
+
+          .pe-2xl-taller {
+            padding-right: 32px !important;
+          }
+
+          .pe-2xl-tallest {
+            padding-right: 40px !important;
+          }
+
+          .pe-2xl-spacious {
+            padding-right: 48px !important;
+          }
+
+          .pe-2xl-huge {
+            padding-right: 56px !important;
+          }
+
+          .pe-2xl-jumbo {
+            padding-right: 64px !important;
+          }
+
+          .pb-2xl-none {
+            padding-bottom: 0 !important;
+          }
+
+          .pb-2xl-smash {
+            padding-bottom: 2px !important;
+          }
+
+          .pb-2xl-shortest {
+            padding-bottom: 4px !important;
+          }
+
+          .pb-2xl-shorter {
+            padding-bottom: 8px !important;
+          }
+
+          .pb-2xl-short {
+            padding-bottom: 12px !important;
+          }
+
+          .pb-2xl-medium {
+            padding-bottom: 16px !important;
+          }
+
+          .pb-2xl-tall {
+            padding-bottom: 24px !important;
+          }
+
+          .pb-2xl-taller {
+            padding-bottom: 32px !important;
+          }
+
+          .pb-2xl-tallest {
+            padding-bottom: 40px !important;
+          }
+
+          .pb-2xl-spacious {
+            padding-bottom: 48px !important;
+          }
+
+          .pb-2xl-huge {
+            padding-bottom: 56px !important;
+          }
+
+          .pb-2xl-jumbo {
+            padding-bottom: 64px !important;
+          }
+
+          .ps-2xl-none {
+            padding-left: 0 !important;
+          }
+
+          .ps-2xl-smash {
+            padding-left: 2px !important;
+          }
+
+          .ps-2xl-shortest {
+            padding-left: 4px !important;
+          }
+
+          .ps-2xl-shorter {
+            padding-left: 8px !important;
+          }
+
+          .ps-2xl-short {
+            padding-left: 12px !important;
+          }
+
+          .ps-2xl-medium {
+            padding-left: 16px !important;
+          }
+
+          .ps-2xl-tall {
+            padding-left: 24px !important;
+          }
+
+          .ps-2xl-taller {
+            padding-left: 32px !important;
+          }
+
+          .ps-2xl-tallest {
+            padding-left: 40px !important;
+          }
+
+          .ps-2xl-spacious {
+            padding-left: 48px !important;
+          }
+
+          .ps-2xl-huge {
+            padding-left: 56px !important;
+          }
+
+          .ps-2xl-jumbo {
+            padding-left: 64px !important;
+          }
+
+          .gap-2xl-none {
+            gap: 0 !important;
+          }
+
+          .gap-2xl-smash {
+            gap: 2px !important;
+          }
+
+          .gap-2xl-shortest {
+            gap: 4px !important;
+          }
+
+          .gap-2xl-shorter {
+            gap: 8px !important;
+          }
+
+          .gap-2xl-short {
+            gap: 12px !important;
+          }
+
+          .gap-2xl-medium {
+            gap: 16px !important;
+          }
+
+          .gap-2xl-tall {
+            gap: 24px !important;
+          }
+
+          .gap-2xl-taller {
+            gap: 32px !important;
+          }
+
+          .gap-2xl-tallest {
+            gap: 40px !important;
+          }
+
+          .gap-2xl-spacious {
+            gap: 48px !important;
+          }
+
+          .gap-2xl-huge {
+            gap: 56px !important;
+          }
+
+          .gap-2xl-jumbo {
+            gap: 64px !important;
+          }
+
+          .row-gap-2xl-none {
+            row-gap: 0 !important;
+          }
+
+          .row-gap-2xl-smash {
+            row-gap: 2px !important;
+          }
+
+          .row-gap-2xl-shortest {
+            row-gap: 4px !important;
+          }
+
+          .row-gap-2xl-shorter {
+            row-gap: 8px !important;
+          }
+
+          .row-gap-2xl-short {
+            row-gap: 12px !important;
+          }
+
+          .row-gap-2xl-medium {
+            row-gap: 16px !important;
+          }
+
+          .row-gap-2xl-tall {
+            row-gap: 24px !important;
+          }
+
+          .row-gap-2xl-taller {
+            row-gap: 32px !important;
+          }
+
+          .row-gap-2xl-tallest {
+            row-gap: 40px !important;
+          }
+
+          .row-gap-2xl-spacious {
+            row-gap: 48px !important;
+          }
+
+          .row-gap-2xl-huge {
+            row-gap: 56px !important;
+          }
+
+          .row-gap-2xl-jumbo {
+            row-gap: 64px !important;
+          }
+
+          .column-gap-2xl-none {
+            column-gap: 0 !important;
+          }
+
+          .column-gap-2xl-smash {
+            column-gap: 2px !important;
+          }
+
+          .column-gap-2xl-shortest {
+            column-gap: 4px !important;
+          }
+
+          .column-gap-2xl-shorter {
+            column-gap: 8px !important;
+          }
+
+          .column-gap-2xl-short {
+            column-gap: 12px !important;
+          }
+
+          .column-gap-2xl-medium {
+            column-gap: 16px !important;
+          }
+
+          .column-gap-2xl-tall {
+            column-gap: 24px !important;
+          }
+
+          .column-gap-2xl-taller {
+            column-gap: 32px !important;
+          }
+
+          .column-gap-2xl-tallest {
+            column-gap: 40px !important;
+          }
+
+          .column-gap-2xl-spacious {
+            column-gap: 48px !important;
+          }
+
+          .column-gap-2xl-huge {
+            column-gap: 56px !important;
+          }
+
+          .column-gap-2xl-jumbo {
+            column-gap: 64px !important;
+          }
+        }
+
+        @media (min-width: 1880px) {
+          .m-3xl-0 {
+            margin: 0 !important;
+          }
+
+          .m-3xl-1 {
+            margin: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .m-3xl-2 {
+            margin: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .m-3xl-3 {
+            margin: 1.5rem !important;
+          }
+
+          .m-3xl-4 {
+            margin: 2.5rem !important;
+          }
+
+          .m-3xl-5 {
+            margin: 3.5rem !important;
+          }
+
+          .mx-3xl-0 {
+            margin-right: 0 !important;
+            margin-left: 0 !important;
+          }
+
+          .mx-3xl-1 {
+            margin-right: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+            margin-left: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .mx-3xl-2 {
+            margin-right: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+            margin-left: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .mx-3xl-3 {
+            margin-right: 1.5rem !important;
+            margin-left: 1.5rem !important;
+          }
+
+          .mx-3xl-4 {
+            margin-right: 2.5rem !important;
+            margin-left: 2.5rem !important;
+          }
+
+          .mx-3xl-5 {
+            margin-right: 3.5rem !important;
+            margin-left: 3.5rem !important;
+          }
+
+          .my-3xl-0 {
+            margin-top: 0 !important;
+            margin-bottom: 0 !important;
+          }
+
+          .my-3xl-1 {
+            margin-top: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+            margin-bottom: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .my-3xl-2 {
+            margin-top: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+            margin-bottom: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .my-3xl-3 {
+            margin-top: 1.5rem !important;
+            margin-bottom: 1.5rem !important;
+          }
+
+          .my-3xl-4 {
+            margin-top: 2.5rem !important;
+            margin-bottom: 2.5rem !important;
+          }
+
+          .my-3xl-5 {
+            margin-top: 3.5rem !important;
+            margin-bottom: 3.5rem !important;
+          }
+
+          .mt-3xl-0 {
+            margin-top: 0 !important;
+          }
+
+          .mt-3xl-1 {
+            margin-top: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .mt-3xl-2 {
+            margin-top: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .mt-3xl-3 {
+            margin-top: 1.5rem !important;
+          }
+
+          .mt-3xl-4 {
+            margin-top: 2.5rem !important;
+          }
+
+          .mt-3xl-5 {
+            margin-top: 3.5rem !important;
+          }
+
+          .me-3xl-0 {
+            margin-right: 0 !important;
+          }
+
+          .me-3xl-1 {
+            margin-right: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .me-3xl-2 {
+            margin-right: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .me-3xl-3 {
+            margin-right: 1.5rem !important;
+          }
+
+          .me-3xl-4 {
+            margin-right: 2.5rem !important;
+          }
+
+          .me-3xl-5 {
+            margin-right: 3.5rem !important;
+          }
+
+          .mb-3xl-0 {
+            margin-bottom: 0 !important;
+          }
+
+          .mb-3xl-1 {
+            margin-bottom: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .mb-3xl-2 {
+            margin-bottom: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .mb-3xl-3 {
+            margin-bottom: 1.5rem !important;
+          }
+
+          .mb-3xl-4 {
+            margin-bottom: 2.5rem !important;
+          }
+
+          .mb-3xl-5 {
+            margin-bottom: 3.5rem !important;
+          }
+
+          .ms-3xl-0 {
+            margin-left: 0 !important;
+          }
+
+          .ms-3xl-1 {
+            margin-left: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .ms-3xl-2 {
+            margin-left: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .ms-3xl-3 {
+            margin-left: 1.5rem !important;
+          }
+
+          .ms-3xl-4 {
+            margin-left: 2.5rem !important;
+          }
+
+          .ms-3xl-5 {
+            margin-left: 3.5rem !important;
+          }
+
+          .p-3xl-0 {
+            padding: 0 !important;
+          }
+
+          .p-3xl-1 {
+            padding: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .p-3xl-2 {
+            padding: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .p-3xl-3 {
+            padding: 1.5rem !important;
+          }
+
+          .p-3xl-4 {
+            padding: 2.5rem !important;
+          }
+
+          .p-3xl-5 {
+            padding: 3.5rem !important;
+          }
+
+          .px-3xl-0 {
+            padding-right: 0 !important;
+            padding-left: 0 !important;
+          }
+
+          .px-3xl-1 {
+            padding-right: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+            padding-left: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .px-3xl-2 {
+            padding-right: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+            padding-left: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .px-3xl-3 {
+            padding-right: 1.5rem !important;
+            padding-left: 1.5rem !important;
+          }
+
+          .px-3xl-4 {
+            padding-right: 2.5rem !important;
+            padding-left: 2.5rem !important;
+          }
+
+          .px-3xl-5 {
+            padding-right: 3.5rem !important;
+            padding-left: 3.5rem !important;
+          }
+
+          .py-3xl-0 {
+            padding-top: 0 !important;
+            padding-bottom: 0 !important;
+          }
+
+          .py-3xl-1 {
+            padding-top: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+            padding-bottom: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .py-3xl-2 {
+            padding-top: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+            padding-bottom: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .py-3xl-3 {
+            padding-top: 1.5rem !important;
+            padding-bottom: 1.5rem !important;
+          }
+
+          .py-3xl-4 {
+            padding-top: 2.5rem !important;
+            padding-bottom: 2.5rem !important;
+          }
+
+          .py-3xl-5 {
+            padding-top: 3.5rem !important;
+            padding-bottom: 3.5rem !important;
+          }
+
+          .pt-3xl-0 {
+            padding-top: 0 !important;
+          }
+
+          .pt-3xl-1 {
+            padding-top: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .pt-3xl-2 {
+            padding-top: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .pt-3xl-3 {
+            padding-top: 1.5rem !important;
+          }
+
+          .pt-3xl-4 {
+            padding-top: 2.5rem !important;
+          }
+
+          .pt-3xl-5 {
+            padding-top: 3.5rem !important;
+          }
+
+          .pe-3xl-0 {
+            padding-right: 0 !important;
+          }
+
+          .pe-3xl-1 {
+            padding-right: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .pe-3xl-2 {
+            padding-right: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .pe-3xl-3 {
+            padding-right: 1.5rem !important;
+          }
+
+          .pe-3xl-4 {
+            padding-right: 2.5rem !important;
+          }
+
+          .pe-3xl-5 {
+            padding-right: 3.5rem !important;
+          }
+
+          .pb-3xl-0 {
+            padding-bottom: 0 !important;
+          }
+
+          .pb-3xl-1 {
+            padding-bottom: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .pb-3xl-2 {
+            padding-bottom: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .pb-3xl-3 {
+            padding-bottom: 1.5rem !important;
+          }
+
+          .pb-3xl-4 {
+            padding-bottom: 2.5rem !important;
+          }
+
+          .pb-3xl-5 {
+            padding-bottom: 3.5rem !important;
+          }
+
+          .ps-3xl-0 {
+            padding-left: 0 !important;
+          }
+
+          .ps-3xl-1 {
+            padding-left: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .ps-3xl-2 {
+            padding-left: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .ps-3xl-3 {
+            padding-left: 1.5rem !important;
+          }
+
+          .ps-3xl-4 {
+            padding-left: 2.5rem !important;
+          }
+
+          .ps-3xl-5 {
+            padding-left: 3.5rem !important;
+          }
+
+          .gap-3xl-0 {
+            gap: 0 !important;
+          }
+
+          .gap-3xl-1 {
+            gap: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .gap-3xl-2 {
+            gap: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .gap-3xl-3 {
+            gap: 1.5rem !important;
+          }
+
+          .gap-3xl-4 {
+            gap: 2.5rem !important;
+          }
+
+          .gap-3xl-5 {
+            gap: 3.5rem !important;
+          }
+
+          .row-gap-3xl-0 {
+            row-gap: 0 !important;
+          }
+
+          .row-gap-3xl-1 {
+            row-gap: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .row-gap-3xl-2 {
+            row-gap: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .row-gap-3xl-3 {
+            row-gap: 1.5rem !important;
+          }
+
+          .row-gap-3xl-4 {
+            row-gap: 2.5rem !important;
+          }
+
+          .row-gap-3xl-5 {
+            row-gap: 3.5rem !important;
+          }
+
+          .column-gap-3xl-0 {
+            column-gap: 0 !important;
+          }
+
+          .column-gap-3xl-1 {
+            column-gap: 0.25rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .column-gap-3xl-2 {
+            column-gap: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          }
+
+          .column-gap-3xl-3 {
+            column-gap: 1.5rem !important;
+          }
+
+          .column-gap-3xl-4 {
+            column-gap: 2.5rem !important;
+          }
+
+          .column-gap-3xl-5 {
+            column-gap: 3.5rem !important;
+          }
+
+          .m-3xl-none {
+            margin: 0 !important;
+          }
+
+          .m-3xl-smash {
+            margin: 2px !important;
+          }
+
+          .m-3xl-shortest {
+            margin: 4px !important;
+          }
+
+          .m-3xl-shorter {
+            margin: 8px !important;
+          }
+
+          .m-3xl-short {
+            margin: 12px !important;
+          }
+
+          .m-3xl-medium {
+            margin: 16px !important;
+          }
+
+          .m-3xl-tall {
+            margin: 24px !important;
+          }
+
+          .m-3xl-taller {
+            margin: 32px !important;
+          }
+
+          .m-3xl-tallest {
+            margin: 40px !important;
+          }
+
+          .m-3xl-spacious {
+            margin: 48px !important;
+          }
+
+          .m-3xl-huge {
+            margin: 56px !important;
+          }
+
+          .m-3xl-jumbo {
+            margin: 64px !important;
+          }
+
+          .m-3xl-auto {
+            margin: auto !important;
+          }
+
+          .mx-3xl-none {
+            margin-right: 0 !important;
+            margin-left: 0 !important;
+          }
+
+          .mx-3xl-smash {
+            margin-right: 2px !important;
+            margin-left: 2px !important;
+          }
+
+          .mx-3xl-shortest {
+            margin-right: 4px !important;
+            margin-left: 4px !important;
+          }
+
+          .mx-3xl-shorter {
+            margin-right: 8px !important;
+            margin-left: 8px !important;
+          }
+
+          .mx-3xl-short {
+            margin-right: 12px !important;
+            margin-left: 12px !important;
+          }
+
+          .mx-3xl-medium {
+            margin-right: 16px !important;
+            margin-left: 16px !important;
+          }
+
+          .mx-3xl-tall {
+            margin-right: 24px !important;
+            margin-left: 24px !important;
+          }
+
+          .mx-3xl-taller {
+            margin-right: 32px !important;
+            margin-left: 32px !important;
+          }
+
+          .mx-3xl-tallest {
+            margin-right: 40px !important;
+            margin-left: 40px !important;
+          }
+
+          .mx-3xl-spacious {
+            margin-right: 48px !important;
+            margin-left: 48px !important;
+          }
+
+          .mx-3xl-huge {
+            margin-right: 56px !important;
+            margin-left: 56px !important;
+          }
+
+          .mx-3xl-jumbo {
+            margin-right: 64px !important;
+            margin-left: 64px !important;
+          }
+
+          .mx-3xl-auto {
+            margin-right: auto !important;
+            margin-left: auto !important;
+          }
+
+          .my-3xl-none {
+            margin-top: 0 !important;
+            margin-bottom: 0 !important;
+          }
+
+          .my-3xl-smash {
+            margin-top: 2px !important;
+            margin-bottom: 2px !important;
+          }
+
+          .my-3xl-shortest {
+            margin-top: 4px !important;
+            margin-bottom: 4px !important;
+          }
+
+          .my-3xl-shorter {
+            margin-top: 8px !important;
+            margin-bottom: 8px !important;
+          }
+
+          .my-3xl-short {
+            margin-top: 12px !important;
+            margin-bottom: 12px !important;
+          }
+
+          .my-3xl-medium {
+            margin-top: 16px !important;
+            margin-bottom: 16px !important;
+          }
+
+          .my-3xl-tall {
+            margin-top: 24px !important;
+            margin-bottom: 24px !important;
+          }
+
+          .my-3xl-taller {
+            margin-top: 32px !important;
+            margin-bottom: 32px !important;
+          }
+
+          .my-3xl-tallest {
+            margin-top: 40px !important;
+            margin-bottom: 40px !important;
+          }
+
+          .my-3xl-spacious {
+            margin-top: 48px !important;
+            margin-bottom: 48px !important;
+          }
+
+          .my-3xl-huge {
+            margin-top: 56px !important;
+            margin-bottom: 56px !important;
+          }
+
+          .my-3xl-jumbo {
+            margin-top: 64px !important;
+            margin-bottom: 64px !important;
+          }
+
+          .my-3xl-auto {
+            margin-top: auto !important;
+            margin-bottom: auto !important;
+          }
+
+          .mt-3xl-none {
+            margin-top: 0 !important;
+          }
+
+          .mt-3xl-smash {
+            margin-top: 2px !important;
+          }
+
+          .mt-3xl-shortest {
+            margin-top: 4px !important;
+          }
+
+          .mt-3xl-shorter {
+            margin-top: 8px !important;
+          }
+
+          .mt-3xl-short {
+            margin-top: 12px !important;
+          }
+
+          .mt-3xl-medium {
+            margin-top: 16px !important;
+          }
+
+          .mt-3xl-tall {
+            margin-top: 24px !important;
+          }
+
+          .mt-3xl-taller {
+            margin-top: 32px !important;
+          }
+
+          .mt-3xl-tallest {
+            margin-top: 40px !important;
+          }
+
+          .mt-3xl-spacious {
+            margin-top: 48px !important;
+          }
+
+          .mt-3xl-huge {
+            margin-top: 56px !important;
+          }
+
+          .mt-3xl-jumbo {
+            margin-top: 64px !important;
+          }
+
+          .mt-3xl-auto {
+            margin-top: auto !important;
+          }
+
+          .me-3xl-none {
+            margin-right: 0 !important;
+          }
+
+          .me-3xl-smash {
+            margin-right: 2px !important;
+          }
+
+          .me-3xl-shortest {
+            margin-right: 4px !important;
+          }
+
+          .me-3xl-shorter {
+            margin-right: 8px !important;
+          }
+
+          .me-3xl-short {
+            margin-right: 12px !important;
+          }
+
+          .me-3xl-medium {
+            margin-right: 16px !important;
+          }
+
+          .me-3xl-tall {
+            margin-right: 24px !important;
+          }
+
+          .me-3xl-taller {
+            margin-right: 32px !important;
+          }
+
+          .me-3xl-tallest {
+            margin-right: 40px !important;
+          }
+
+          .me-3xl-spacious {
+            margin-right: 48px !important;
+          }
+
+          .me-3xl-huge {
+            margin-right: 56px !important;
+          }
+
+          .me-3xl-jumbo {
+            margin-right: 64px !important;
+          }
+
+          .me-3xl-auto {
+            margin-right: auto !important;
+          }
+
+          .mb-3xl-none {
+            margin-bottom: 0 !important;
+          }
+
+          .mb-3xl-smash {
+            margin-bottom: 2px !important;
+          }
+
+          .mb-3xl-shortest {
+            margin-bottom: 4px !important;
+          }
+
+          .mb-3xl-shorter {
+            margin-bottom: 8px !important;
+          }
+
+          .mb-3xl-short {
+            margin-bottom: 12px !important;
+          }
+
+          .mb-3xl-medium {
+            margin-bottom: 16px !important;
+          }
+
+          .mb-3xl-tall {
+            margin-bottom: 24px !important;
+          }
+
+          .mb-3xl-taller {
+            margin-bottom: 32px !important;
+          }
+
+          .mb-3xl-tallest {
+            margin-bottom: 40px !important;
+          }
+
+          .mb-3xl-spacious {
+            margin-bottom: 48px !important;
+          }
+
+          .mb-3xl-huge {
+            margin-bottom: 56px !important;
+          }
+
+          .mb-3xl-jumbo {
+            margin-bottom: 64px !important;
+          }
+
+          .mb-3xl-auto {
+            margin-bottom: auto !important;
+          }
+
+          .ms-3xl-none {
+            margin-left: 0 !important;
+          }
+
+          .ms-3xl-smash {
+            margin-left: 2px !important;
+          }
+
+          .ms-3xl-shortest {
+            margin-left: 4px !important;
+          }
+
+          .ms-3xl-shorter {
+            margin-left: 8px !important;
+          }
+
+          .ms-3xl-short {
+            margin-left: 12px !important;
+          }
+
+          .ms-3xl-medium {
+            margin-left: 16px !important;
+          }
+
+          .ms-3xl-tall {
+            margin-left: 24px !important;
+          }
+
+          .ms-3xl-taller {
+            margin-left: 32px !important;
+          }
+
+          .ms-3xl-tallest {
+            margin-left: 40px !important;
+          }
+
+          .ms-3xl-spacious {
+            margin-left: 48px !important;
+          }
+
+          .ms-3xl-huge {
+            margin-left: 56px !important;
+          }
+
+          .ms-3xl-jumbo {
+            margin-left: 64px !important;
+          }
+
+          .ms-3xl-auto {
+            margin-left: auto !important;
+          }
+
+          .p-3xl-none {
+            padding: 0 !important;
+          }
+
+          .p-3xl-smash {
+            padding: 2px !important;
+          }
+
+          .p-3xl-shortest {
+            padding: 4px !important;
+          }
+
+          .p-3xl-shorter {
+            padding: 8px !important;
+          }
+
+          .p-3xl-short {
+            padding: 12px !important;
+          }
+
+          .p-3xl-medium {
+            padding: 16px !important;
+          }
+
+          .p-3xl-tall {
+            padding: 24px !important;
+          }
+
+          .p-3xl-taller {
+            padding: 32px !important;
+          }
+
+          .p-3xl-tallest {
+            padding: 40px !important;
+          }
+
+          .p-3xl-spacious {
+            padding: 48px !important;
+          }
+
+          .p-3xl-huge {
+            padding: 56px !important;
+          }
+
+          .p-3xl-jumbo {
+            padding: 64px !important;
+          }
+
+          .px-3xl-none {
+            padding-right: 0 !important;
+            padding-left: 0 !important;
+          }
+
+          .px-3xl-smash {
+            padding-right: 2px !important;
+            padding-left: 2px !important;
+          }
+
+          .px-3xl-shortest {
+            padding-right: 4px !important;
+            padding-left: 4px !important;
+          }
+
+          .px-3xl-shorter {
+            padding-right: 8px !important;
+            padding-left: 8px !important;
+          }
+
+          .px-3xl-short {
+            padding-right: 12px !important;
+            padding-left: 12px !important;
+          }
+
+          .px-3xl-medium {
+            padding-right: 16px !important;
+            padding-left: 16px !important;
+          }
+
+          .px-3xl-tall {
+            padding-right: 24px !important;
+            padding-left: 24px !important;
+          }
+
+          .px-3xl-taller {
+            padding-right: 32px !important;
+            padding-left: 32px !important;
+          }
+
+          .px-3xl-tallest {
+            padding-right: 40px !important;
+            padding-left: 40px !important;
+          }
+
+          .px-3xl-spacious {
+            padding-right: 48px !important;
+            padding-left: 48px !important;
+          }
+
+          .px-3xl-huge {
+            padding-right: 56px !important;
+            padding-left: 56px !important;
+          }
+
+          .px-3xl-jumbo {
+            padding-right: 64px !important;
+            padding-left: 64px !important;
+          }
+
+          .py-3xl-none {
+            padding-top: 0 !important;
+            padding-bottom: 0 !important;
+          }
+
+          .py-3xl-smash {
+            padding-top: 2px !important;
+            padding-bottom: 2px !important;
+          }
+
+          .py-3xl-shortest {
+            padding-top: 4px !important;
+            padding-bottom: 4px !important;
+          }
+
+          .py-3xl-shorter {
+            padding-top: 8px !important;
+            padding-bottom: 8px !important;
+          }
+
+          .py-3xl-short {
+            padding-top: 12px !important;
+            padding-bottom: 12px !important;
+          }
+
+          .py-3xl-medium {
+            padding-top: 16px !important;
+            padding-bottom: 16px !important;
+          }
+
+          .py-3xl-tall {
+            padding-top: 24px !important;
+            padding-bottom: 24px !important;
+          }
+
+          .py-3xl-taller {
+            padding-top: 32px !important;
+            padding-bottom: 32px !important;
+          }
+
+          .py-3xl-tallest {
+            padding-top: 40px !important;
+            padding-bottom: 40px !important;
+          }
+
+          .py-3xl-spacious {
+            padding-top: 48px !important;
+            padding-bottom: 48px !important;
+          }
+
+          .py-3xl-huge {
+            padding-top: 56px !important;
+            padding-bottom: 56px !important;
+          }
+
+          .py-3xl-jumbo {
+            padding-top: 64px !important;
+            padding-bottom: 64px !important;
+          }
+
+          .pt-3xl-none {
+            padding-top: 0 !important;
+          }
+
+          .pt-3xl-smash {
+            padding-top: 2px !important;
+          }
+
+          .pt-3xl-shortest {
+            padding-top: 4px !important;
+          }
+
+          .pt-3xl-shorter {
+            padding-top: 8px !important;
+          }
+
+          .pt-3xl-short {
+            padding-top: 12px !important;
+          }
+
+          .pt-3xl-medium {
+            padding-top: 16px !important;
+          }
+
+          .pt-3xl-tall {
+            padding-top: 24px !important;
+          }
+
+          .pt-3xl-taller {
+            padding-top: 32px !important;
+          }
+
+          .pt-3xl-tallest {
+            padding-top: 40px !important;
+          }
+
+          .pt-3xl-spacious {
+            padding-top: 48px !important;
+          }
+
+          .pt-3xl-huge {
+            padding-top: 56px !important;
+          }
+
+          .pt-3xl-jumbo {
+            padding-top: 64px !important;
+          }
+
+          .pe-3xl-none {
+            padding-right: 0 !important;
+          }
+
+          .pe-3xl-smash {
+            padding-right: 2px !important;
+          }
+
+          .pe-3xl-shortest {
+            padding-right: 4px !important;
+          }
+
+          .pe-3xl-shorter {
+            padding-right: 8px !important;
+          }
+
+          .pe-3xl-short {
+            padding-right: 12px !important;
+          }
+
+          .pe-3xl-medium {
+            padding-right: 16px !important;
+          }
+
+          .pe-3xl-tall {
+            padding-right: 24px !important;
+          }
+
+          .pe-3xl-taller {
+            padding-right: 32px !important;
+          }
+
+          .pe-3xl-tallest {
+            padding-right: 40px !important;
+          }
+
+          .pe-3xl-spacious {
+            padding-right: 48px !important;
+          }
+
+          .pe-3xl-huge {
+            padding-right: 56px !important;
+          }
+
+          .pe-3xl-jumbo {
+            padding-right: 64px !important;
+          }
+
+          .pb-3xl-none {
+            padding-bottom: 0 !important;
+          }
+
+          .pb-3xl-smash {
+            padding-bottom: 2px !important;
+          }
+
+          .pb-3xl-shortest {
+            padding-bottom: 4px !important;
+          }
+
+          .pb-3xl-shorter {
+            padding-bottom: 8px !important;
+          }
+
+          .pb-3xl-short {
+            padding-bottom: 12px !important;
+          }
+
+          .pb-3xl-medium {
+            padding-bottom: 16px !important;
+          }
+
+          .pb-3xl-tall {
+            padding-bottom: 24px !important;
+          }
+
+          .pb-3xl-taller {
+            padding-bottom: 32px !important;
+          }
+
+          .pb-3xl-tallest {
+            padding-bottom: 40px !important;
+          }
+
+          .pb-3xl-spacious {
+            padding-bottom: 48px !important;
+          }
+
+          .pb-3xl-huge {
+            padding-bottom: 56px !important;
+          }
 
-        .rounded-start-4 {
-          border-bottom-left-radius: var(--bs-border-radius-xxl) !important; // stylelint-disable-line property-disallowed-list
-          border-top-left-radius: var(--bs-border-radius-xxl) !important; // stylelint-disable-line property-disallowed-list, order/properties-order
-        }
+          .pb-3xl-jumbo {
+            padding-bottom: 64px !important;
+          }
 
-        .rounded-start-5 {
-          border-bottom-left-radius: 27px !important; // stylelint-disable-line property-disallowed-list
-          border-top-left-radius: 27px !important; // stylelint-disable-line property-disallowed-list, order/properties-order
-        }
+          .ps-3xl-none {
+            padding-left: 0 !important;
+          }
 
-        .rounded {
-          border-radius: 0 !important; // stylelint-disable-line property-disallowed-list
-        }
+          .ps-3xl-smash {
+            padding-left: 2px !important;
+          }
 
-        .rounded-none {
-          border-radius: 0 !important; // stylelint-disable-line property-disallowed-list
-        }
+          .ps-3xl-shortest {
+            padding-left: 4px !important;
+          }
 
-        .rounded-short {
-          border-radius: 3px !important; // stylelint-disable-line property-disallowed-list
-        }
+          .ps-3xl-shorter {
+            padding-left: 8px !important;
+          }
 
-        .rounded-medium {
-          border-radius: 6px !important; // stylelint-disable-line property-disallowed-list
-        }
+          .ps-3xl-short {
+            padding-left: 12px !important;
+          }
 
-        .rounded-tall {
-          border-radius: 12px !important; // stylelint-disable-line property-disallowed-list
-        }
+          .ps-3xl-medium {
+            padding-left: 16px !important;
+          }
 
-        .rounded-pill {
-          border-radius: 125rem !important; // stylelint-disable-line property-disallowed-list
-        }
+          .ps-3xl-tall {
+            padding-left: 24px !important;
+          }
 
-        .rounded-circle {
-          border-radius: 50% !important; // stylelint-disable-line property-disallowed-list
-        }
+          .ps-3xl-taller {
+            padding-left: 32px !important;
+          }
 
-        .rounded-top {
-          border-top-left-radius: 0 !important; // stylelint-disable-line property-disallowed-list
-          border-top-right-radius: 0 !important; // stylelint-disable-line property-disallowed-list
-        }
+          .ps-3xl-tallest {
+            padding-left: 40px !important;
+          }
 
-        .rounded-top-none {
-          border-top-left-radius: 0 !important; // stylelint-disable-line property-disallowed-list
-          border-top-right-radius: 0 !important; // stylelint-disable-line property-disallowed-list
-        }
+          .ps-3xl-spacious {
+            padding-left: 48px !important;
+          }
 
-        .rounded-top-short {
-          border-top-left-radius: 3px !important; // stylelint-disable-line property-disallowed-list
-          border-top-right-radius: 3px !important; // stylelint-disable-line property-disallowed-list
-        }
+          .ps-3xl-huge {
+            padding-left: 56px !important;
+          }
 
-        .rounded-top-medium {
-          border-top-left-radius: 6px !important; // stylelint-disable-line property-disallowed-list
-          border-top-right-radius: 6px !important; // stylelint-disable-line property-disallowed-list
-        }
+          .ps-3xl-jumbo {
+            padding-left: 64px !important;
+          }
 
-        .rounded-top-tall {
-          border-top-left-radius: 12px !important; // stylelint-disable-line property-disallowed-list
-          border-top-right-radius: 12px !important; // stylelint-disable-line property-disallowed-list
-        }
+          .gap-3xl-none {
+            gap: 0 !important;
+          }
 
-        .rounded-top-pill {
-          border-top-left-radius: 125rem !important; // stylelint-disable-line property-disallowed-list
-          border-top-right-radius: 125rem !important; // stylelint-disable-line property-disallowed-list
-        }
+          .gap-3xl-smash {
+            gap: 2px !important;
+          }
 
-        .rounded-top-circle {
-          border-top-left-radius: 50% !important; // stylelint-disable-line property-disallowed-list
-          border-top-right-radius: 50% !important; // stylelint-disable-line property-disallowed-list
-        }
+          .gap-3xl-shortest {
+            gap: 4px !important;
+          }
 
-        .rounded-end {
-          border-top-right-radius: 0 !important; // stylelint-disable-line property-disallowed-list
-          border-bottom-right-radius: 0 !important; // stylelint-disable-line property-disallowed-list
-        }
+          .gap-3xl-shorter {
+            gap: 8px !important;
+          }
 
-        .rounded-end-none {
-          border-top-right-radius: 0 !important; // stylelint-disable-line property-disallowed-list
-          border-bottom-right-radius: 0 !important; // stylelint-disable-line property-disallowed-list
-        }
+          .gap-3xl-short {
+            gap: 12px !important;
+          }
 
-        .rounded-end-short {
-          border-top-right-radius: 3px !important; // stylelint-disable-line property-disallowed-list
-          border-bottom-right-radius: 3px !important; // stylelint-disable-line property-disallowed-list
-        }
+          .gap-3xl-medium {
+            gap: 16px !important;
+          }
 
-        .rounded-end-medium {
-          border-top-right-radius: 6px !important; // stylelint-disable-line property-disallowed-list
-          border-bottom-right-radius: 6px !important; // stylelint-disable-line property-disallowed-list
-        }
+          .gap-3xl-tall {
+            gap: 24px !important;
+          }
 
-        .rounded-end-tall {
-          border-top-right-radius: 12px !important; // stylelint-disable-line property-disallowed-list
-          border-bottom-right-radius: 12px !important; // stylelint-disable-line property-disallowed-list
-        }
+          .gap-3xl-taller {
+            gap: 32px !important;
+          }
 
-        .rounded-end-pill {
-          border-top-right-radius: 125rem !important; // stylelint-disable-line property-disallowed-list
-          border-bottom-right-radius: 125rem !important; // stylelint-disable-line property-disallowed-list
-        }
+          .gap-3xl-tallest {
+            gap: 40px !important;
+          }
 
-        .rounded-end-circle {
-          border-top-right-radius: 50% !important; // stylelint-disable-line property-disallowed-list
-          border-bottom-right-radius: 50% !important; // stylelint-disable-line property-disallowed-list
-        }
+          .gap-3xl-spacious {
+            gap: 48px !important;
+          }
 
-        .rounded-bottom {
-          border-bottom-right-radius: 0 !important; // stylelint-disable-line property-disallowed-list
-          border-bottom-left-radius: 0 !important; // stylelint-disable-line property-disallowed-list
-        }
+          .gap-3xl-huge {
+            gap: 56px !important;
+          }
 
-        .rounded-bottom-none {
-          border-bottom-right-radius: 0 !important; // stylelint-disable-line property-disallowed-list
-          border-bottom-left-radius: 0 !important; // stylelint-disable-line property-disallowed-list
-        }
+          .gap-3xl-jumbo {
+            gap: 64px !important;
+          }
 
-        .rounded-bottom-short {
-          border-bottom-right-radius: 3px !important; // stylelint-disable-line property-disallowed-list
-          border-bottom-left-radius: 3px !important; // stylelint-disable-line property-disallowed-list
-        }
+          .row-gap-3xl-none {
+            row-gap: 0 !important;
+          }
 
-        .rounded-bottom-medium {
-          border-bottom-right-radius: 6px !important; // stylelint-disable-line property-disallowed-list
-          border-bottom-left-radius: 6px !important; // stylelint-disable-line property-disallowed-list
-        }
+          .row-gap-3xl-smash {
+            row-gap: 2px !important;
+          }
 
-        .rounded-bottom-tall {
-          border-bottom-right-radius: 12px !important; // stylelint-disable-line property-disallowed-list
-          border-bottom-left-radius: 12px !important; // stylelint-disable-line property-disallowed-list
-        }
+          .row-gap-3xl-shortest {
+            row-gap: 4px !important;
+          }
 
-        .rounded-bottom-pill {
-          border-bottom-right-radius: 125rem !important; // stylelint-disable-line property-disallowed-list
-          border-bottom-left-radius: 125rem !important; // stylelint-disable-line property-disallowed-list
-        }
+          .row-gap-3xl-shorter {
+            row-gap: 8px !important;
+          }
 
-        .rounded-bottom-circle {
-          border-bottom-right-radius: 50% !important; // stylelint-disable-line property-disallowed-list
-          border-bottom-left-radius: 50% !important; // stylelint-disable-line property-disallowed-list
-        }
+          .row-gap-3xl-short {
+            row-gap: 12px !important;
+          }
 
-        .rounded-start {
-          border-bottom-left-radius: 0 !important; // stylelint-disable-line property-disallowed-list
-          border-top-left-radius: 0 !important; // stylelint-disable-line property-disallowed-list, order/properties-order
-        }
+          .row-gap-3xl-medium {
+            row-gap: 16px !important;
+          }
 
-        .rounded-start-none {
-          border-bottom-left-radius: 0 !important; // stylelint-disable-line property-disallowed-list
-          border-top-left-radius: 0 !important; // stylelint-disable-line property-disallowed-list, order/properties-order
-        }
+          .row-gap-3xl-tall {
+            row-gap: 24px !important;
+          }
 
-        .rounded-start-short {
-          border-bottom-left-radius: 3px !important; // stylelint-disable-line property-disallowed-list
-          border-top-left-radius: 3px !important; // stylelint-disable-line property-disallowed-list, order/properties-order
-        }
+          .row-gap-3xl-taller {
+            row-gap: 32px !important;
+          }
 
-        .rounded-start-medium {
-          border-bottom-left-radius: 6px !important; // stylelint-disable-line property-disallowed-list
-          border-top-left-radius: 6px !important; // stylelint-disable-line property-disallowed-list, order/properties-order
-        }
+          .row-gap-3xl-tallest {
+            row-gap: 40px !important;
+          }
 
-        .rounded-start-tall {
-          border-bottom-left-radius: 12px !important; // stylelint-disable-line property-disallowed-list
-          border-top-left-radius: 12px !important; // stylelint-disable-line property-disallowed-list, order/properties-order
-        }
+          .row-gap-3xl-spacious {
+            row-gap: 48px !important;
+          }
 
-        .rounded-start-pill {
-          border-bottom-left-radius: 125rem !important; // stylelint-disable-line property-disallowed-list
-          border-top-left-radius: 125rem !important; // stylelint-disable-line property-disallowed-list, order/properties-order
-        }
+          .row-gap-3xl-huge {
+            row-gap: 56px !important;
+          }
 
-        .rounded-start-circle {
-          border-bottom-left-radius: 50% !important; // stylelint-disable-line property-disallowed-list
-          border-top-left-radius: 50% !important; // stylelint-disable-line property-disallowed-list, order/properties-order
-        }
+          .row-gap-3xl-jumbo {
+            row-gap: 64px !important;
+          }
 
-        .shadow {
-          box-shadow: var(--bs-box-shadow) !important;
-        }
+          .column-gap-3xl-none {
+            column-gap: 0 !important;
+          }
 
-        .shadow-sm {
-          box-shadow: var(--bs-box-shadow-sm) !important;
-        }
+          .column-gap-3xl-smash {
+            column-gap: 2px !important;
+          }
 
-        .shadow-lg {
-          box-shadow: var(--bs-box-shadow-lg) !important;
-        }
+          .column-gap-3xl-shortest {
+            column-gap: 4px !important;
+          }
 
-        .shadow-none {
-          box-shadow: 0 0 0 0 rgba(0, 0, 0, 0) !important;
-        }
+          .column-gap-3xl-shorter {
+            column-gap: 8px !important;
+          }
 
-        .shadow-raised {
-          box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.32) !important; // stylelint-disable-line @stylistic/number-leading-zero
-        }
+          .column-gap-3xl-short {
+            column-gap: 12px !important;
+          }
 
-        .shadow-drag {
-          box-shadow: 0 4px 4px -1px rgba(0, 0, 0, 0.32) !important; // stylelint-disable-line @stylistic/number-leading-zero
-        }
+          .column-gap-3xl-medium {
+            column-gap: 16px !important;
+          }
 
-        .shadow-overlay-default {
-          box-shadow: 0 2px 3px -1px rgba(0, 0, 0, 0.24) !important; // stylelint-disable-line @stylistic/number-leading-zero
-        }
+          .column-gap-3xl-tall {
+            column-gap: 24px !important;
+          }
 
-        .shadow-overlay-emphasized {
-          box-shadow: 0 12px 12px -4px rgba(0, 0, 0, 0.16) !important; // stylelint-disable-line @stylistic/number-leading-zero
-        }
+          .column-gap-3xl-taller {
+            column-gap: 32px !important;
+          }
 
-        .shadow-sticky-default {
-          box-shadow: 0 4px 4px -1px rgba(0, 0, 0, 0.16) !important; // stylelint-disable-line @stylistic/number-leading-zero
-        }
+          .column-gap-3xl-tallest {
+            column-gap: 40px !important;
+          }
 
-        .shadow-sticky-emphasized {
-          box-shadow: 0 4px 4px -1px rgba(0, 0, 0, 0.16) !important; // stylelint-disable-line @stylistic/number-leading-zero
-        }
+          .column-gap-3xl-spacious {
+            column-gap: 48px !important;
+          }
 
-        .shadow-sticky-navigation-scrolled {
-          box-shadow: 0 4px 4px -1px rgba(0, 0, 0, 0.16) !important; // stylelint-disable-line @stylistic/number-leading-zero
+          .column-gap-3xl-huge {
+            column-gap: 56px !important;
+          }
+
+          .column-gap-3xl-jumbo {
+            column-gap: 64px !important;
+          }
         }
       }
     }
@@ -1496,17 +23456,17 @@ $utilities: ();
 
   @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 "../../functions";
-        @import "../../tokens/raw";
-        @import "../../tokens/semantic";
-        @import "../../tokens/component";
-        @import "../../ouds-maps";
-        @import "../../variables";
-        @import "../../maps";
-        @import "../../mixins";
         @import "../../containers";
       }
       @include expect() {
@@ -1577,17 +23537,17 @@ $utilities: ();
 
   @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 "../../functions";
-        @import "../../tokens/raw";
-        @import "../../tokens/semantic";
-        @import "../../tokens/component";
-        @import "../../ouds-maps";
-        @import "../../variables";
-        @import "../../maps";
-        @import "../../mixins";
         @import "../../containers";
       }
       @include expect() {
@@ -1845,17 +23805,17 @@ $utilities: ();
 
   @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 "../../functions";
-        @import "../../tokens/raw";
-        @import "../../tokens/semantic";
-        @import "../../tokens/component";
-        @import "../../ouds-maps";
-        @import "../../variables";
-        @import "../../maps";
-        @import "../../mixins";
         @import "../../grid";
       }
       @include expect() {
@@ -4122,17 +26082,17 @@ $utilities: ();
 
   @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 "../../functions";
-        @import "../../tokens/raw";
-        @import "../../tokens/semantic";
-        @import "../../tokens/component";
-        @import "../../ouds-maps";
-        @import "../../variables";
-        @import "../../maps";
-        @import "../../mixins";
         @import "../../grid";
       }
       @include expect() {
@@ -4489,52 +26449,52 @@ $utilities: ();
 
         .g-1,
         .gx-1 {
-          --bs-gutter-x: 0.3125rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+          --bs-gutter-x: 0.25rem !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
+          --bs-gutter-y: 0.25rem !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
+          --bs-gutter-x: 0.75rem !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
+          --bs-gutter-y: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
         }
 
         .g-3,
         .gx-3 {
-          --bs-gutter-x: 1.25rem !important;
+          --bs-gutter-x: 1.5rem !important;
         }
 
         .g-3,
         .gy-3 {
-          --bs-gutter-y: 1.25rem !important;
+          --bs-gutter-y: 1.5rem !important;
         }
 
         .g-4,
         .gx-4 {
-          --bs-gutter-x: 1.875rem !important;
+          --bs-gutter-x: 2.5rem !important;
         }
 
         .g-4,
         .gy-4 {
-          --bs-gutter-y: 1.875rem !important;
+          --bs-gutter-y: 2.5rem !important;
         }
 
         .g-5,
         .gx-5 {
-          --bs-gutter-x: 3.75rem !important;
+          --bs-gutter-x: 3.5rem !important;
         }
 
         .g-5,
         .gy-5 {
-          --bs-gutter-y: 3.75rem !important;
+          --bs-gutter-y: 3.5rem !important;
         }
 
         @media (min-width: 390px) {
@@ -4822,52 +26782,52 @@ $utilities: ();
 
           .g-xs-1,
           .gx-xs-1 {
-            --bs-gutter-x: 0.3125rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+            --bs-gutter-x: 0.25rem !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
+            --bs-gutter-y: 0.25rem !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
+            --bs-gutter-x: 0.75rem !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
+            --bs-gutter-y: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
           }
 
           .g-xs-3,
           .gx-xs-3 {
-            --bs-gutter-x: 1.25rem !important;
+            --bs-gutter-x: 1.5rem !important;
           }
 
           .g-xs-3,
           .gy-xs-3 {
-            --bs-gutter-y: 1.25rem !important;
+            --bs-gutter-y: 1.5rem !important;
           }
 
           .g-xs-4,
           .gx-xs-4 {
-            --bs-gutter-x: 1.875rem !important;
+            --bs-gutter-x: 2.5rem !important;
           }
 
           .g-xs-4,
           .gy-xs-4 {
-            --bs-gutter-y: 1.875rem !important;
+            --bs-gutter-y: 2.5rem !important;
           }
 
           .g-xs-5,
           .gx-xs-5 {
-            --bs-gutter-x: 3.75rem !important;
+            --bs-gutter-x: 3.5rem !important;
           }
 
           .g-xs-5,
           .gy-xs-5 {
-            --bs-gutter-y: 3.75rem !important;
+            --bs-gutter-y: 3.5rem !important;
           }
         }
 
@@ -5156,52 +27116,52 @@ $utilities: ();
 
           .g-sm-1,
           .gx-sm-1 {
-            --bs-gutter-x: 0.3125rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+            --bs-gutter-x: 0.25rem !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
+            --bs-gutter-y: 0.25rem !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
+            --bs-gutter-x: 0.75rem !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
+            --bs-gutter-y: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
           }
 
           .g-sm-3,
           .gx-sm-3 {
-            --bs-gutter-x: 1.25rem !important;
+            --bs-gutter-x: 1.5rem !important;
           }
 
           .g-sm-3,
           .gy-sm-3 {
-            --bs-gutter-y: 1.25rem !important;
+            --bs-gutter-y: 1.5rem !important;
           }
 
           .g-sm-4,
           .gx-sm-4 {
-            --bs-gutter-x: 1.875rem !important;
+            --bs-gutter-x: 2.5rem !important;
           }
 
           .g-sm-4,
           .gy-sm-4 {
-            --bs-gutter-y: 1.875rem !important;
+            --bs-gutter-y: 2.5rem !important;
           }
 
           .g-sm-5,
           .gx-sm-5 {
-            --bs-gutter-x: 3.75rem !important;
+            --bs-gutter-x: 3.5rem !important;
           }
 
           .g-sm-5,
           .gy-sm-5 {
-            --bs-gutter-y: 3.75rem !important;
+            --bs-gutter-y: 3.5rem !important;
           }
         }
 
@@ -5490,52 +27450,52 @@ $utilities: ();
 
           .g-md-1,
           .gx-md-1 {
-            --bs-gutter-x: 0.3125rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+            --bs-gutter-x: 0.25rem !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
+            --bs-gutter-y: 0.25rem !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
+            --bs-gutter-x: 0.75rem !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
+            --bs-gutter-y: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
           }
 
           .g-md-3,
           .gx-md-3 {
-            --bs-gutter-x: 1.25rem !important;
+            --bs-gutter-x: 1.5rem !important;
           }
 
           .g-md-3,
           .gy-md-3 {
-            --bs-gutter-y: 1.25rem !important;
+            --bs-gutter-y: 1.5rem !important;
           }
 
           .g-md-4,
           .gx-md-4 {
-            --bs-gutter-x: 1.875rem !important;
+            --bs-gutter-x: 2.5rem !important;
           }
 
           .g-md-4,
           .gy-md-4 {
-            --bs-gutter-y: 1.875rem !important;
+            --bs-gutter-y: 2.5rem !important;
           }
 
           .g-md-5,
           .gx-md-5 {
-            --bs-gutter-x: 3.75rem !important;
+            --bs-gutter-x: 3.5rem !important;
           }
 
           .g-md-5,
           .gy-md-5 {
-            --bs-gutter-y: 3.75rem !important;
+            --bs-gutter-y: 3.5rem !important;
           }
         }
 
@@ -5824,52 +27784,52 @@ $utilities: ();
 
           .g-lg-1,
           .gx-lg-1 {
-            --bs-gutter-x: 0.3125rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+            --bs-gutter-x: 0.25rem !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
+            --bs-gutter-y: 0.25rem !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
+            --bs-gutter-x: 0.75rem !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
+            --bs-gutter-y: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
           }
 
           .g-lg-3,
           .gx-lg-3 {
-            --bs-gutter-x: 1.25rem !important;
+            --bs-gutter-x: 1.5rem !important;
           }
 
           .g-lg-3,
           .gy-lg-3 {
-            --bs-gutter-y: 1.25rem !important;
+            --bs-gutter-y: 1.5rem !important;
           }
 
           .g-lg-4,
           .gx-lg-4 {
-            --bs-gutter-x: 1.875rem !important;
+            --bs-gutter-x: 2.5rem !important;
           }
 
           .g-lg-4,
           .gy-lg-4 {
-            --bs-gutter-y: 1.875rem !important;
+            --bs-gutter-y: 2.5rem !important;
           }
 
           .g-lg-5,
           .gx-lg-5 {
-            --bs-gutter-x: 3.75rem !important;
+            --bs-gutter-x: 3.5rem !important;
           }
 
           .g-lg-5,
           .gy-lg-5 {
-            --bs-gutter-y: 3.75rem !important;
+            --bs-gutter-y: 3.5rem !important;
           }
         }
 
@@ -6158,52 +28118,52 @@ $utilities: ();
 
           .g-xl-1,
           .gx-xl-1 {
-            --bs-gutter-x: 0.3125rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+            --bs-gutter-x: 0.25rem !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
+            --bs-gutter-y: 0.25rem !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
+            --bs-gutter-x: 0.75rem !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
+            --bs-gutter-y: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
           }
 
           .g-xl-3,
           .gx-xl-3 {
-            --bs-gutter-x: 1.25rem !important;
+            --bs-gutter-x: 1.5rem !important;
           }
 
           .g-xl-3,
           .gy-xl-3 {
-            --bs-gutter-y: 1.25rem !important;
+            --bs-gutter-y: 1.5rem !important;
           }
 
           .g-xl-4,
           .gx-xl-4 {
-            --bs-gutter-x: 1.875rem !important;
+            --bs-gutter-x: 2.5rem !important;
           }
 
           .g-xl-4,
           .gy-xl-4 {
-            --bs-gutter-y: 1.875rem !important;
+            --bs-gutter-y: 2.5rem !important;
           }
 
           .g-xl-5,
           .gx-xl-5 {
-            --bs-gutter-x: 3.75rem !important;
+            --bs-gutter-x: 3.5rem !important;
           }
 
           .g-xl-5,
           .gy-xl-5 {
-            --bs-gutter-y: 3.75rem !important;
+            --bs-gutter-y: 3.5rem !important;
           }
         }
 
@@ -6492,52 +28452,52 @@ $utilities: ();
 
           .g-xxl-1,
           .gx-xxl-1 {
-            --bs-gutter-x: 0.3125rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+            --bs-gutter-x: 0.25rem !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
+            --bs-gutter-y: 0.25rem !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
+            --bs-gutter-x: 0.75rem !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
+            --bs-gutter-y: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
           }
 
           .g-xxl-3,
           .gx-xxl-3 {
-            --bs-gutter-x: 1.25rem !important;
+            --bs-gutter-x: 1.5rem !important;
           }
 
           .g-xxl-3,
           .gy-xxl-3 {
-            --bs-gutter-y: 1.25rem !important;
+            --bs-gutter-y: 1.5rem !important;
           }
 
           .g-xxl-4,
           .gx-xxl-4 {
-            --bs-gutter-x: 1.875rem !important;
+            --bs-gutter-x: 2.5rem !important;
           }
 
           .g-xxl-4,
           .gy-xxl-4 {
-            --bs-gutter-y: 1.875rem !important;
+            --bs-gutter-y: 2.5rem !important;
           }
 
           .g-xxl-5,
           .gx-xxl-5 {
-            --bs-gutter-x: 3.75rem !important;
+            --bs-gutter-x: 3.5rem !important;
           }
 
           .g-xxl-5,
           .gy-xxl-5 {
-            --bs-gutter-y: 3.75rem !important;
+            --bs-gutter-y: 3.5rem !important;
           }
         }
 
@@ -6826,52 +28786,52 @@ $utilities: ();
 
           .g-2xl-1,
           .gx-2xl-1 {
-            --bs-gutter-x: 0.3125rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+            --bs-gutter-x: 0.25rem !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
+            --bs-gutter-y: 0.25rem !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
+            --bs-gutter-x: 0.75rem !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
+            --bs-gutter-y: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
           }
 
           .g-2xl-3,
           .gx-2xl-3 {
-            --bs-gutter-x: 1.25rem !important;
+            --bs-gutter-x: 1.5rem !important;
           }
 
           .g-2xl-3,
           .gy-2xl-3 {
-            --bs-gutter-y: 1.25rem !important;
+            --bs-gutter-y: 1.5rem !important;
           }
 
           .g-2xl-4,
           .gx-2xl-4 {
-            --bs-gutter-x: 1.875rem !important;
+            --bs-gutter-x: 2.5rem !important;
           }
 
           .g-2xl-4,
           .gy-2xl-4 {
-            --bs-gutter-y: 1.875rem !important;
+            --bs-gutter-y: 2.5rem !important;
           }
 
           .g-2xl-5,
           .gx-2xl-5 {
-            --bs-gutter-x: 3.75rem !important;
+            --bs-gutter-x: 3.5rem !important;
           }
 
           .g-2xl-5,
           .gy-2xl-5 {
-            --bs-gutter-y: 3.75rem !important;
+            --bs-gutter-y: 3.5rem !important;
           }
         }
 
@@ -7160,52 +29120,52 @@ $utilities: ();
 
           .g-3xl-1,
           .gx-3xl-1 {
-            --bs-gutter-x: 0.3125rem !important; // stylelint-disable-line @stylistic/number-leading-zero
+            --bs-gutter-x: 0.25rem !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
+            --bs-gutter-y: 0.25rem !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
+            --bs-gutter-x: 0.75rem !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
+            --bs-gutter-y: 0.75rem !important; // stylelint-disable-line @stylistic/number-leading-zero
           }
 
           .g-3xl-3,
           .gx-3xl-3 {
-            --bs-gutter-x: 1.25rem !important;
+            --bs-gutter-x: 1.5rem !important;
           }
 
           .g-3xl-3,
           .gy-3xl-3 {
-            --bs-gutter-y: 1.25rem !important;
+            --bs-gutter-y: 1.5rem !important;
           }
 
           .g-3xl-4,
           .gx-3xl-4 {
-            --bs-gutter-x: 1.875rem !important;
+            --bs-gutter-x: 2.5rem !important;
           }
 
           .g-3xl-4,
           .gy-3xl-4 {
-            --bs-gutter-y: 1.875rem !important;
+            --bs-gutter-y: 2.5rem !important;
           }
 
           .g-3xl-5,
           .gx-3xl-5 {
-            --bs-gutter-x: 3.75rem !important;
+            --bs-gutter-x: 3.5rem !important;
           }
 
           .g-3xl-5,
           .gy-3xl-5 {
-            --bs-gutter-y: 3.75rem !important;
+            --bs-gutter-y: 3.5rem !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 295740ac02..e02ca021b9 100644
--- a/scss/tests/mixins/_auto-import-of-variables-dark.test.scss
+++ b/scss/tests/mixins/_auto-import-of-variables-dark.test.scss
@@ -3,8 +3,8 @@
 @import "../../functions";
 @import "../../tokens/raw";
 @import "../../tokens/semantic";
+@import "../../tokens/composite";
 @import "../../tokens/component";
-@import "../../ouds-maps";
 @import "../../variables";
 // Voluntarily not importing _variables-dark.scss
 @import "../../maps";
diff --git a/scss/tests/mixins/_color-modes.test.scss b/scss/tests/mixins/_color-modes.test.scss
index 0ec15d38e2..6d29be555b 100644
--- a/scss/tests/mixins/_color-modes.test.scss
+++ b/scss/tests/mixins/_color-modes.test.scss
@@ -3,8 +3,8 @@
 @import "../../functions";
 @import "../../tokens/raw";
 @import "../../tokens/semantic";
+@import "../../tokens/composite";
 @import "../../tokens/component";
-@import "../../ouds-maps";
 @import "../../variables";
 @import "../../variables-dark";
 @import "../../maps";
diff --git a/scss/tests/mixins/_utilities.test.scss b/scss/tests/mixins/_utilities.test.scss
index ffa366c11e..ba6d401500 100644
--- a/scss/tests/mixins/_utilities.test.scss
+++ b/scss/tests/mixins/_utilities.test.scss
@@ -6,8 +6,8 @@ $enable-important-utilities: false;
 @import "../../functions"; // Added because needed by "variables"
 @import "../../tokens/raw";
 @import "../../tokens/semantic";
+@import "../../tokens/composite";
 @import "../../tokens/component";
-@import "../../ouds-maps";
 @import "../../variables"; // Added to avoid undefined variable error like `$white`
 // End mod
 @import "../../mixins/utilities";
diff --git a/scss/tests/utilities/_api.test.scss b/scss/tests/utilities/_api.test.scss
index 51da71577d..9fe38d40aa 100644
--- a/scss/tests/utilities/_api.test.scss
+++ b/scss/tests/utilities/_api.test.scss
@@ -1,8 +1,8 @@
 @import "../../functions";
 @import "../../tokens/raw";
 @import "../../tokens/semantic";
+@import "../../tokens/composite";
 @import "../../tokens/component";
-@import "../../ouds-maps";
 @import "../../variables";
 @import "../../variables-dark";
 @import "../../maps";
diff --git a/scss/tokens/_composite.scss b/scss/tokens/_composite.scss
new file mode 100644
index 0000000000..7750d7de9a
--- /dev/null
+++ b/scss/tokens/_composite.scss
@@ -0,0 +1,15 @@
+//// Composite values
+//// Manual insertion of composite values
+
+// Elevation
+
+// scss-docs-start ouds-composite-elevation
+$ouds-elevation-none: $ouds-elevation-x-none $ouds-elevation-y-none $ouds-elevation-blur-none $ouds-elevation-spread-none $ouds-elevation-color-none !default;
+$ouds-elevation-raised: $ouds-elevation-x-raised $ouds-elevation-y-raised $ouds-elevation-blur-raised $ouds-elevation-spread-raised $ouds-elevation-color-raised !default;
+$ouds-elevation-drag: $ouds-elevation-x-drag $ouds-elevation-y-drag $ouds-elevation-blur-drag $ouds-elevation-spread-drag $ouds-elevation-color-drag !default;
+$ouds-elevation-overlay-default: $ouds-elevation-x-overlay-default $ouds-elevation-y-overlay-default $ouds-elevation-blur-overlay-default $ouds-elevation-spread-overlay-default $ouds-elevation-color-overlay-default !default;
+$ouds-elevation-overlay-emphasized: $ouds-elevation-x-overlay-emphasized $ouds-elevation-y-overlay-emphasized $ouds-elevation-blur-overlay-emphasized $ouds-elevation-spread-overlay-emphasized $ouds-elevation-color-overlay-emphasized !default;
+$ouds-elevation-sticky-default: $ouds-elevation-x-sticky-default $ouds-elevation-y-sticky-default $ouds-elevation-blur-sticky-default $ouds-elevation-spread-sticky-default $ouds-elevation-color-sticky-default !default;
+$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
diff --git a/site/assets/js/stackblitz.js b/site/assets/js/stackblitz.js
index 275cca1c85..cef0af5479 100644
--- a/site/assets/js/stackblitz.js
+++ b/site/assets/js/stackblitz.js
@@ -43,7 +43,7 @@ const openOUDSWebSnippet = (htmlSnippet, jsSnippet, classes) => {
   <title>OUDS Web Example</title>
   <${'script'} defer src="${jsBundleCdn}"></${'script'}>
 </head>
-<body class="p-3 m-0 border-0 ${classes}">
+<body class="p-tall m-none border-0 ${classes}">
   <!-- Example Code -->
 ${htmlSnippet.trimStart().replace(/^/gm, '    ').replace(/^ {4}$/gm, '').trimEnd()}
   <!-- End Example Code -->
diff --git a/site/assets/js/tac.js b/site/assets/js/tac.js
index 3119956863..785a0123b7 100644
--- a/site/assets/js/tac.js
+++ b/site/assets/js/tac.js
@@ -79,7 +79,7 @@
       const toggle = document
         .createRange()
         .createContextualFragment(
-          `<div class="form-check form-switch ps-0"><input class="form-check-input ms-0" type="checkbox" id="googletagmanagerAllowed" aria-describedby="tacCLgoogletagmanager" onchange="${choiceEvent}"${((document.cookie.match(/^(?:.*;)?\s*cookie-consent\s*=\s*([^;]+)(?:.*)?$/) || [null])[1].match('!googletagmanager=true') ? 'checked' : '')}><label class="form-check-label visually-hidden" for="googletagmanagerAllowed">Google Tag Manager</label><input id="googletagmanagerDenied" class="d-none"></div>`
+          `<div class="form-check form-switch ps-none"><input class="form-check-input ms-none" type="checkbox" id="googletagmanagerAllowed" aria-describedby="tacCLgoogletagmanager" onchange="${choiceEvent}"${((document.cookie.match(/^(?:.*;)?\s*cookie-consent\s*=\s*([^;]+)(?:.*)?$/) || [null])[1].match('!googletagmanager=true') ? 'checked' : '')}><label class="form-check-label visually-hidden" for="googletagmanagerAllowed">Google Tag Manager</label><input id="googletagmanagerDenied" class="d-none"></div>`
         )
       ask.innerHTML = ''
       ask.append(toggle)
diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss
index a5e8f65bd4..9dd7658bd7 100644
--- a/site/assets/scss/_component-examples.scss
+++ b/site/assets/scss/_component-examples.scss
@@ -121,6 +121,11 @@
       padding-right: $gutter-width * .5;
       padding-left: $gutter-width * .5;
     }
+
+    .bd-example-cols [class^="container"] {
+      padding-right: 0;
+      padding-left: 0;
+    }
   }
 }
 // End mod
@@ -149,6 +154,18 @@
   border: 1px solid rgba(var(--bd-primary-light-rgb), .3);
 }
 
+// OUDS mod
+.bd-example-spacings {
+  background-color: rgba(var(--bd-primary-light-rgb), .15);
+}
+
+.bd-example-spacings div {
+  padding: $ouds-space-fixed-short;
+  background-color: rgba(var(--bd-primary-light-rgb), .15);
+  border: 1px solid rgba(var(--bd-primary-light-rgb), .3);
+}
+// End mod
+
 // Grid mixins
 .example-container {
   width: 50rem;
diff --git a/site/assets/scss/docs.scss b/site/assets/scss/docs.scss
index bffba6d5e2..0ef3dfdb63 100644
--- a/site/assets/scss/docs.scss
+++ b/site/assets/scss/docs.scss
@@ -26,8 +26,8 @@
 @import "../../../scss/functions";
 @import "../../../scss/tokens/raw";
 @import "../../../scss/tokens/semantic";
+@import "../../../scss/tokens/composite";
 @import "../../../scss/tokens/component";
-@import "../../../scss/ouds-maps";
 @import "../../../scss/variables";
 @import "../../../scss/maps";
 @import "../../../scss/mixins";
diff --git a/site/assets/scss/search.scss b/site/assets/scss/search.scss
index 74544e92e5..5a3420798f 100644
--- a/site/assets/scss/search.scss
+++ b/site/assets/scss/search.scss
@@ -8,8 +8,8 @@
 @import "../../../scss/functions";
 @import "../../../scss/tokens/raw";
 @import "../../../scss/tokens/semantic";
+@import "../../../scss/tokens/composite";
 @import "../../../scss/tokens/component";
-@import "../../../scss/ouds-maps";
 @import "../../../scss/variables";
 @import "../../../scss/mixins";
 @import "variables";
diff --git a/site/content/404.md b/site/content/404.md
index 08359be3eb..b63ed73794 100644
--- a/site/content/404.md
+++ b/site/content/404.md
@@ -8,7 +8,7 @@ sitemap:
   disable: true
 ---
 
-<div class="text-center py-5">
+<div class="text-center py-huge">
   <h1 class="display-1">404</h1>
   <h2>File not found</h2>
 </div>
diff --git a/site/content/docs/0.0/about/team.md b/site/content/docs/0.0/about/team.md
index b1ea6f5da5..3de23f645f 100644
--- a/site/content/docs/0.0/about/team.md
+++ b/site/content/docs/0.0/about/team.md
@@ -10,10 +10,10 @@ aliases:
 OUDS Web is maintained by the core team and a small group of invaluable core contributors, with the massive support and involvement of our community.
 
 {{< team.inline >}}
-<div class="list-group mb-3">
+<div class="list-group mb-tall">
   {{- range (index $.Site.Data "core-team") }}
     <a class="list-group-item list-group-item-action d-flex align-items-center" href="https://github.com/{{ .user }}">
-      <img src="https://github.com/{{ .user }}.png" alt="@{{ .user }}" width="32" height="32" class="me-2" loading="lazy">
+      <img src="https://github.com/{{ .user }}.png" alt="@{{ .user }}" width="32" height="32" class="me-short" loading="lazy">
       <span class="fw-normal">
         <strong>{{ .name }}</strong> @{{ .user }}
       </span>
diff --git a/site/content/docs/0.0/customize/custom-libraries.md b/site/content/docs/0.0/customize/custom-libraries.md
index 5bb6a575dd..0724b55990 100644
--- a/site/content/docs/0.0/customize/custom-libraries.md
+++ b/site/content/docs/0.0/customize/custom-libraries.md
@@ -22,9 +22,15 @@ The [`scss/tokens/_raw.scss`]({{< param repo >}}/blob/v{{< param current_version
 
 ### Semantic tokens
 
-The [`scss/tokens/_semantic.scss`]({{< param repo >}}/blob/v{{< param current_version >}}-ouds-web/scss/tokens/_semantic.scss) file contains all the semantic tokens. Unlike raw tokens, these are intended to be used directly in projects. They are built on raw tokens, assigning them semantic meaning through media queries or specific contexts. These tokens are ready to be applied either in utilities or directly within components. The names of these tokens are not intended to be modified for a custom library, only the link between a token and its value defined by a raw token.
+The [`scss/tokens/_semantic.scss`]({{< param repo >}}/blob/v{{< param current_version >}}-ouds-web/scss/tokens/_semantic.scss) file contains all the semantic tokens. Unlike raw tokens, these are intended to be used directly in projects. They are built on raw tokens, assigning them semantic meaning through media queries or specific contexts. Most of these tokens are ready to be applied either in utilities or directly within components. The names of these tokens are not intended to be modified for a custom library, only the link between a token and its value defined by a raw token.
 
-Some semantic tokens are grouped into maps to simplify their transformation into helpers or utilities via the utilities API. These maps are defined in the [`scss/_ouds-maps.scss`]({{< param repo >}}/blob/v{{< param current_version >}}-ouds-web/scss/_ouds-maps.scss) file.
+Some semantic tokens are grouped into maps to simplify their transformation into helpers or utilities via the utilities API. These maps are defined in the [`scss/_maps.scss`]({{< param repo >}}/blob/v{{< param current_version >}}-ouds-web/scss/_maps.scss) file.
+
+### Composite tokens
+
+The [`scss/tokens/_composite.scss`]({{< param repo >}}/blob/v{{< param current_version >}}-ouds-web/scss/tokens/_composite.scss) file contains all the composite tokens. Unlike raw tokens, these are intended to be used directly in projects. They are built (manually until now) on top of semantic tokens, they usually are an aggregation of several semantic tokens. These tokens are ready to be applied either in utilities or directly within components. The names of these tokens are not intended to be modified for a custom library, only the link between a token and its value defined by a raw or a semantic token.
+
+Some composite tokens are grouped into maps to simplify their transformation into helpers or utilities via the utilities API. These maps are defined in the [`scss/_maps.scss`]({{< param repo >}}/blob/v{{< param current_version >}}-ouds-web/scss/_maps.scss) file.
 
 ### Component tokens
 
diff --git a/site/content/docs/0.0/customize/options.md b/site/content/docs/0.0/customize/options.md
index 4bc71e0e6a..edf1cdfa45 100644
--- a/site/content/docs/0.0/customize/options.md
+++ b/site/content/docs/0.0/customize/options.md
@@ -14,12 +14,14 @@ You can find and customize these variables for key global options in OUDS Web's
 {{< bs-table "table table-options" >}}
 | Variable                          | Values                                | Description                                                                            |
 | --------------------------------- | ------------------------------------- | -------------------------------------------------------------------------------------- |
+| `$ouds-dimension-base`            | `4px` (default), or any value > 0     | Specifies the default spacer value to programmatically generate our [spacer utilities]({{< docsref "/utilities/spacing" >}}). |
 | `$enable-bootstrap-compatibility` | `true` or `false` (default)           | Enforces Bootstrap compatibility. |
 | `$enable-grid-classes`            | `true` (default) or `false`           | Enables the generation of CSS classes for the grid system (e.g. `.row`, `.col-md-1`, etc.). |
 | `$enable-container-classes`       | `true` (default) or `false`           | Enables the generation of CSS classes for layout containers. |
+| `$enable-negative-margins`        | `true` or `false` (default)           | Enables the generation of [negative margin utilities]({{< docsref "/utilities/spacing#negative-margin" >}}). |
+| `$enable-deprecation-messages`    | `true` (default) or `false`           | Set to `false` to hide warnings when using any of the deprecated mixins and functions that are planned to be removed in Bootstrap `v6`. |
 | `$enable-important-utilities`     | `true` (default) or `false`           | Enables the `!important` suffix in utility classes. |
-<!--| `$spacer`                      | `1.25rem` (default), or any value > 0 | Specifies the default spacer value to programmatically generate our [spacer utilities]({{< docsref "/utilities/spacing" >}}). |
-| `$enable-dark-mode`            | `true` (default) or `false`           | Enables built-in [dark mode support]({{< docsref "/customize/color-modes#dark-mode" >}}) across the project and its components. |
+<!--| `$enable-dark-mode`            | `true` (default) or `false`           | Enables built-in [dark mode support]({{< docsref "/customize/color-modes#dark-mode" >}}) across the project and its components. |
 | `$enable-rounded`              | `true` or `false` (default)           | Enables predefined `border-radius` styles on various components. |
 | `$enable-shadows`              | `true` or `false` (default)           | Enables predefined decorative `box-shadow` styles on various components. Does not affect `box-shadow`s used for focus states. |
 | `$enable-gradients`            | `true` or `false` (default)           | Enables predefined gradients via `background-image` styles on various components. |
@@ -29,8 +31,6 @@ You can find and customize these variables for key global options in OUDS Web's
 | `$enable-button-pointers`      | `true` (default) or `false`           | Add "hand" cursor to non-disabled button elements. |
 | `$enable-rfs`                  | `true` or `false` (default)           | Globally enables [RFS]({{< docsref "/getting-started/rfs" >}}). |
 | `$enable-validation-icons`     | `true` (default) or `false`           | Enables `background-image` icons within textual inputs and some custom forms for validation states. |
-| `$enable-negative-margins`     | `true` or `false` (default)           | Enables the generation of [negative margin utilities]({{< docsref "/utilities/spacing#negative-margin" >}}). |
-| `$enable-deprecation-messages` | `true` (default) or `false`           | Set to `false` to hide warnings when using any of the deprecated mixins and functions that are planned to be removed in `v6`. |
 | `$enable-smooth-scroll`        | `true` (default) or `false`           | Applies `scroll-behavior: smooth` globally, except for users asking for reduced motion through [`prefers-reduced-motion` media query]({{< docsref "/getting-started/accessibility#reduced-motion" >}}) |
 | `$enable-fixed-header`         | `true` (default) or `false`           | Set `scroll-padding-top` rule to root element, preventing focus from being hidden under a fixed header. |-->
 {{< /bs-table >}}
diff --git a/site/content/docs/0.0/examples/grid-system/index.html b/site/content/docs/0.0/examples/grid-system/index.html
index 319caae92a..fee3f5596f 100644
--- a/site/content/docs/0.0/examples/grid-system/index.html
+++ b/site/content/docs/0.0/examples/grid-system/index.html
@@ -18,28 +18,28 @@
 </svg>
 
 <main class="min-vh-100">
-  <div class="container-fluid container-max-width pt-4">
+  <div class="container-fluid container-max-width pt-tallest">
     <h1>OUDS Web grid system example</h1>
     <p class="lead">Use this page to see how containers behave while resizing the browser.</p>
     <h2>Legend</h2>
     <p class="d-flex align-items-center">
-      <span class="bg-container legend border me-2"></span>Containers padding color (<code>#4ab4e6</code>)
+      <span class="bg-container legend border me-short"></span>Containers padding color (<code>#4ab4e6</code>)
     </p>
     <p class="d-flex align-items-center">
-      <span class="bg-col legend border me-2"></span>Columns color (<code>#a5daf3</code>)
+      <span class="bg-col legend border me-short"></span>Columns color (<code>#a5daf3</code>)
     </p>
     <p class="d-flex align-items-center">
-      <span class="bg-white legend border me-2"></span>Gutters color (<code>#fff</code>)
+      <span class="bg-white legend border me-short"></span>Gutters color (<code>#fff</code>)
     </p>
   </div>
 
-  <div class="container-fluid container-max-width mb-3 pt-3">
+  <div class="container-fluid container-max-width mb-tall pt-tall">
     <h2>Default grid</h2>
     <p>
       The default grid system to use is the one combining <code>.container-fluid</code> and <code>.container-max-width</code> classes.
     </p>
   </div>
-  <div class="bg-example py-3">
+  <div class="bg-example py-tall">
     <div class="container-fluid container-max-width bg-container">
       <div class="row">
         <div class="col"></div>
@@ -58,13 +58,13 @@ <h2>Default grid</h2>
     </div>
   </div>
 
-  <div class="container-fluid container-max-width mb-3 pt-3">
+  <div class="container-fluid container-max-width mb-tall pt-tall">
     <h2>Need more space?</h2>
     <p>
       If more space is needed, use only the <code>.container-fluid</code> class.
     </p>
   </div>
-  <div class="bg-example py-3">
+  <div class="bg-example py-tall">
     <div class="container-fluid bg-container">
       <div class="row">
         <div class="col"></div>
@@ -90,7 +90,7 @@ <h2>Need more space?</h2>
 <!--
   <hr class="border-none">
 
-  <div class="bg-example py-3">
+  <div class="bg-example py-tall">
     <div class="container bg-container">
       <div class="row">
         <div class="col"></div>
@@ -111,7 +111,7 @@ <h2>Need more space?</h2>
 
   <hr class="border-none">
 
-  <div class="bg-example py-3">
+  <div class="bg-example py-tall">
     <div class="container-xs bg-container">
       <div class="row">
         <div class="col"></div>
@@ -132,7 +132,7 @@ <h2>Need more space?</h2>
 
   <hr class="border-none">
 
-  <div class="bg-example py-3">
+  <div class="bg-example py-tall">
     <div class="container-sm bg-container">
       <div class="row">
         <div class="col"></div>
@@ -153,7 +153,7 @@ <h2>Need more space?</h2>
 
   <hr class="border-none">
 
-  <div class="bg-example py-3">
+  <div class="bg-example py-tall">
     <div class="container-md bg-container">
       <div class="row">
         <div class="col"></div>
@@ -174,7 +174,7 @@ <h2>Need more space?</h2>
 
   <hr class="border-none">
 
-  <div class="bg-example py-3">
+  <div class="bg-example py-tall">
     <div class="container-lg bg-container">
       <div class="row">
         <div class="col"></div>
@@ -195,7 +195,7 @@ <h2>Need more space?</h2>
 
   <hr class="border-none">
 
-  <div class="bg-example py-3">
+  <div class="bg-example py-tall">
     <div class="container-xl bg-container">
       <div class="row">
         <div class="col"></div>
@@ -216,7 +216,7 @@ <h2>Need more space?</h2>
 
   <hr class="border-none">
 
-  <div class="bg-example py-3">
+  <div class="bg-example py-tall">
     <div class="container-2xl bg-container">
       <div class="row">
         <div class="col"></div>
@@ -237,7 +237,7 @@ <h2>Need more space?</h2>
 
   <hr class="border-none">
 
-  <div class="bg-example py-3">
+  <div class="bg-example py-tall">
     <div class="container-3xl bg-container">
       <div class="row">
         <div class="col"></div>
diff --git a/site/content/docs/0.0/examples/grid/index.html b/site/content/docs/0.0/examples/grid/index.html
index eb6c25f2b2..d94af1193a 100644
--- a/site/content/docs/0.0/examples/grid/index.html
+++ b/site/content/docs/0.0/examples/grid/index.html
@@ -3,7 +3,7 @@
 title: Grid Template
 extra_css:
 - "grid.css"
-body_class: "py-4"
+body_class: "py-tallest"
 aliases:
 - "/examples/grid"
 - "/docs/examples/grid"
@@ -15,102 +15,102 @@ <h1>OUDS Web grid examples</h1>
     <p class="lead">Basic grid layouts to get you familiar with building within the OUDS Web grid system.</p>
     <p>In these examples the <code>.themed-grid-col</code> class is added to the columns to add some theming. This is not a class that is available in OUDS Web by default.</p>
 
-    <h2 class="mt-4">Eight grid tiers</h2>
+    <h2 class="mt-tallest">Eight grid tiers</h2>
     <p>There are eight tiers to the OUDS Web grid system, one for each range of devices we support. Each tier starts at a minimum viewport size and automatically applies to the larger devices unless overridden.</p>
 
-    <div class="row mb-3 text-center">
+    <div class="row mb-tall text-center">
       <div class="col-4 themed-grid-col">.col-4</div>
       <div class="col-4 themed-grid-col">.col-4</div>
       <div class="col-4 themed-grid-col">.col-4</div>
     </div>
 
-    <div class="row mb-3 text-center">
+    <div class="row mb-tall text-center">
       <div class="col-xs-4 themed-grid-col">.col-xs-4</div>
       <div class="col-xs-4 themed-grid-col">.col-xs-4</div>
       <div class="col-xs-4 themed-grid-col">.col-xs-4</div>
     </div>
 
-    <div class="row mb-3 text-center">
+    <div class="row mb-tall text-center">
       <div class="col-sm-4 themed-grid-col">.col-sm-4</div>
       <div class="col-sm-4 themed-grid-col">.col-sm-4</div>
       <div class="col-sm-4 themed-grid-col">.col-sm-4</div>
     </div>
 
-    <div class="row mb-3 text-center">
+    <div class="row mb-tall text-center">
       <div class="col-md-4 themed-grid-col">.col-md-4</div>
       <div class="col-md-4 themed-grid-col">.col-md-4</div>
       <div class="col-md-4 themed-grid-col">.col-md-4</div>
     </div>
 
-    <div class="row mb-3 text-center">
+    <div class="row mb-tall text-center">
       <div class="col-lg-4 themed-grid-col">.col-lg-4</div>
       <div class="col-lg-4 themed-grid-col">.col-lg-4</div>
       <div class="col-lg-4 themed-grid-col">.col-lg-4</div>
     </div>
 
-    <div class="row mb-3 text-center">
+    <div class="row mb-tall text-center">
       <div class="col-xl-4 themed-grid-col">.col-xl-4</div>
       <div class="col-xl-4 themed-grid-col">.col-xl-4</div>
       <div class="col-xl-4 themed-grid-col">.col-xl-4</div>
     </div>
 
-    <div class="row mb-3 text-center">
+    <div class="row mb-tall text-center">
       <div class="col-2xl-4 themed-grid-col">.col-2xl-4</div>
       <div class="col-2xl-4 themed-grid-col">.col-2xl-4</div>
       <div class="col-2xl-4 themed-grid-col">.col-2xl-4</div>
     </div>
 
-    <div class="row mb-3 text-center">
+    <div class="row mb-tall text-center">
       <div class="col-3xl-4 themed-grid-col">.col-3xl-4</div>
       <div class="col-3xl-4 themed-grid-col">.col-3xl-4</div>
       <div class="col-3xl-4 themed-grid-col">.col-3xl-4</div>
     </div>
 
-    <h2 class="mt-4">Three equal columns</h2>
+    <h2 class="mt-tallest">Three equal columns</h2>
     <p>Get three equal-width columns <strong>starting at desktops and scaling to large desktops</strong>. On mobile devices, tablets and below, the columns will automatically stack.</p>
-    <div class="row mb-3 text-center">
+    <div class="row mb-tall text-center">
       <div class="col-md-4 themed-grid-col">.col-md-4</div>
       <div class="col-md-4 themed-grid-col">.col-md-4</div>
       <div class="col-md-4 themed-grid-col">.col-md-4</div>
     </div>
 
-    <h2 class="mt-4">Three equal columns alternative</h2>
+    <h2 class="mt-tallest">Three equal columns alternative</h2>
     <p>By using the <code>.row-cols-*</code> classes, you can easily create a grid with equal columns.</p>
-    <div class="row row-cols-md-3 mb-3 text-center">
+    <div class="row row-cols-md-3 mb-tall text-center">
       <div class="col themed-grid-col"><code>.col</code> child of <code>.row-cols-md-3</code></div>
       <div class="col themed-grid-col"><code>.col</code> child of <code>.row-cols-md-3</code></div>
       <div class="col themed-grid-col"><code>.col</code> child of <code>.row-cols-md-3</code></div>
     </div>
 
-    <h2 class="mt-4">Three unequal columns</h2>
+    <h2 class="mt-tallest">Three unequal columns</h2>
     <p>Get three columns <strong>starting at desktops and scaling to large desktops</strong> of various widths. Remember, grid columns should add up to twelve for a single horizontal block. More than that, and columns start stacking no matter the viewport.</p>
-    <div class="row mb-3 text-center">
+    <div class="row mb-tall text-center">
       <div class="col-md-3 themed-grid-col">.col-md-3</div>
       <div class="col-md-6 themed-grid-col">.col-md-6</div>
       <div class="col-md-3 themed-grid-col">.col-md-3</div>
     </div>
 
-    <h2 class="mt-4">Two columns</h2>
+    <h2 class="mt-tallest">Two columns</h2>
     <p>Get two columns <strong>starting at desktops and scaling to large desktops</strong>.</p>
-    <div class="row mb-3 text-center">
+    <div class="row mb-tall text-center">
       <div class="col-md-8 themed-grid-col">.col-md-8</div>
       <div class="col-md-4 themed-grid-col">.col-md-4</div>
     </div>
 
-    <h2 class="mt-4">Full width, single column</h2>
+    <h2 class="mt-tallest">Full width, single column</h2>
     <div class="alert alert-warning">
       <span class="alert-icon"><span class="visually-hidden">Warning</span></span>
       <p>No grid classes are necessary for full-width elements.</p>
     </div>
 
-    <hr class="my-4">
+    <hr class="my-tallest">
 
-    <h2 class="mt-4">Two columns with two nested columns</h2>
+    <h2 class="mt-tallest">Two columns with two nested columns</h2>
     <p>Per the documentation, nesting is easy—just put a row of columns within an existing column. This gives you two columns <strong>starting at desktops and scaling to large desktops</strong>, with another two (equal widths) within the larger column.</p>
     <p>At mobile device sizes, tablets and down, these columns and their nested columns will stack.</p>
-    <div class="row mb-3 text-center">
+    <div class="row mb-tall text-center">
       <div class="col-md-8 themed-grid-col">
-        <div class="pb-3">
+        <div class="pb-tall">
           .col-md-8
         </div>
         <div class="row">
@@ -121,41 +121,41 @@ <h2 class="mt-4">Two columns with two nested columns</h2>
       <div class="col-md-4 themed-grid-col">.col-md-4</div>
     </div>
 
-    <hr class="my-4">
+    <hr class="my-tallest">
 
-    <h2 class="mt-4">Mixed: mobile and desktop</h2>
+    <h2 class="mt-tallest">Mixed: mobile and desktop</h2>
     <p>The OUDS Web grid system has eight tiers of classes: 2xs (2x-small, this class infix is not used), xs (x-small), sm (small), md (medium), lg (large), xl (x-large), 2xl (2x-large) and 3xl (3x-large). You can use nearly any combination of these classes to create more dynamic and flexible layouts.</p>
     <p>Each tier of classes scales up, meaning if you plan on setting the same widths for md, lg, xl, 2xl and 3xl, you only need to specify md.</p>
-    <div class="row mb-3 text-center">
+    <div class="row mb-tall text-center">
       <div class="col-md-8 themed-grid-col">.col-md-8</div>
       <div class="col-6 col-md-4 themed-grid-col">.col-6 .col-md-4</div>
     </div>
-    <div class="row mb-3">
+    <div class="row mb-tall">
       <div class="col-6 col-md-4 themed-grid-col">.col-6 .col-md-4</div>
       <div class="col-6 col-md-4 themed-grid-col">.col-6 .col-md-4</div>
       <div class="col-6 col-md-4 themed-grid-col">.col-6 .col-md-4</div>
     </div>
-    <div class="row mb-3">
+    <div class="row mb-tall">
       <div class="col-6 themed-grid-col">.col-6</div>
       <div class="col-6 themed-grid-col">.col-6</div>
     </div>
 
-    <hr class="my-4">
+    <hr class="my-tallest">
 
-    <h2 class="mt-4">Mixed: mobile, tablet, and desktop</h2>
-    <div class="row mb-3 text-center">
+    <h2 class="mt-tallest">Mixed: mobile, tablet, and desktop</h2>
+    <div class="row mb-tall text-center">
       <div class="col-sm-6 col-lg-8 themed-grid-col">.col-sm-6 .col-lg-8</div>
       <div class="col-6 col-lg-4 themed-grid-col">.col-6 .col-lg-4</div>
     </div>
-    <div class="row mb-3">
+    <div class="row mb-tall">
       <div class="col-6 col-sm-4 themed-grid-col">.col-6 .col-sm-4</div>
       <div class="col-6 col-sm-4 themed-grid-col">.col-6 .col-sm-4</div>
       <div class="col-6 col-sm-4 themed-grid-col">.col-6 .col-sm-4</div>
     </div>
 
-    <hr class="my-4">
+    <hr class="my-tallest">
 
-    <h2 class="mt-4">Gutters</h2>
+    <h2 class="mt-tallest">Gutters</h2>
     <p>With <code>.gx-*</code> classes, the horizontal gutters can be adjusted.</p>
     <div class="row row-cols-1 row-cols-md-3 gx-short text-center">
       <div class="col themed-grid-col"><code>.col</code> with <code>.gx-short</code> gutters</div>
@@ -165,30 +165,30 @@ <h2 class="mt-4">Gutters</h2>
       <div class="col themed-grid-col"><code>.col</code> with <code>.gx-short</code> gutters</div>
       <div class="col themed-grid-col"><code>.col</code> with <code>.gx-short</code> gutters</div>
     </div>
-    <p class="mt-4">Use the <code>.gy-*</code> classes to control the vertical gutters.</p>
-    <div class="row row-cols-1 row-cols-md-3 gy-4 text-center">
-      <div class="col themed-grid-col"><code>.col</code> with <code>.gy-4</code> gutters</div>
-      <div class="col themed-grid-col"><code>.col</code> with <code>.gy-4</code> gutters</div>
-      <div class="col themed-grid-col"><code>.col</code> with <code>.gy-4</code> gutters</div>
-      <div class="col themed-grid-col"><code>.col</code> with <code>.gy-4</code> gutters</div>
-      <div class="col themed-grid-col"><code>.col</code> with <code>.gy-4</code> gutters</div>
-      <div class="col themed-grid-col"><code>.col</code> with <code>.gy-4</code> gutters</div>
-    </div>
-    <p class="mt-4">With <code>.g-*</code> classes, the gutters in both directions can be adjusted.</p>
-    <div class="row row-cols-1 row-cols-md-3 g-3 text-center">
-      <div class="col themed-grid-col"><code>.col</code> with <code>.g-3</code> gutters</div>
-      <div class="col themed-grid-col"><code>.col</code> with <code>.g-3</code> gutters</div>
-      <div class="col themed-grid-col"><code>.col</code> with <code>.g-3</code> gutters</div>
-      <div class="col themed-grid-col"><code>.col</code> with <code>.g-3</code> gutters</div>
-      <div class="col themed-grid-col"><code>.col</code> with <code>.g-3</code> gutters</div>
-      <div class="col themed-grid-col"><code>.col</code> with <code>.g-3</code> gutters</div>
+    <p class="mt-tallest">Use the <code>.gy-*</code> classes to control the vertical gutters.</p>
+    <div class="row row-cols-1 row-cols-md-3 gy-tall text-center">
+      <div class="col themed-grid-col"><code>.col</code> with <code>.gy-tall</code> gutters</div>
+      <div class="col themed-grid-col"><code>.col</code> with <code>.gy-tall</code> gutters</div>
+      <div class="col themed-grid-col"><code>.col</code> with <code>.gy-tall</code> gutters</div>
+      <div class="col themed-grid-col"><code>.col</code> with <code>.gy-tall</code> gutters</div>
+      <div class="col themed-grid-col"><code>.col</code> with <code>.gy-tall</code> gutters</div>
+      <div class="col themed-grid-col"><code>.col</code> with <code>.gy-tall</code> gutters</div>
+    </div>
+    <p class="mt-tallest">With <code>.g-*</code> classes, the gutters in both directions can be adjusted.</p>
+    <div class="row row-cols-1 row-cols-md-3 g-medium text-center">
+      <div class="col themed-grid-col"><code>.col</code> with <code>.g-medium</code> gutters</div>
+      <div class="col themed-grid-col"><code>.col</code> with <code>.g-medium</code> gutters</div>
+      <div class="col themed-grid-col"><code>.col</code> with <code>.g-medium</code> gutters</div>
+      <div class="col themed-grid-col"><code>.col</code> with <code>.g-medium</code> gutters</div>
+      <div class="col themed-grid-col"><code>.col</code> with <code>.g-medium</code> gutters</div>
+      <div class="col themed-grid-col"><code>.col</code> with <code>.g-medium</code> gutters</div>
     </div>
   </div>
 
   <div class="container-fluid container-max-width" id="containers">
-    <hr class="my-4">
+    <hr class="my-tallest">
 
-    <h2 class="mt-4">Containers</h2>
+    <h2 class="mt-tallest">Containers</h2>
     <p>Container classes in OUDS Web allow containers that are 100% wide until a particular breakpoint.</p>
   </div>
 
diff --git a/site/content/docs/0.0/helpers/stacks.md b/site/content/docs/0.0/helpers/stacks.md
index 1f10034a5e..867eaecd1a 100644
--- a/site/content/docs/0.0/helpers/stacks.md
+++ b/site/content/docs/0.0/helpers/stacks.md
@@ -19,10 +19,10 @@ Stacks offer a shortcut for applying a number of flexbox properties to quickly a
 Use `.vstack` to create vertical layouts. Stacked items are full-width by default. Use `.gap-*` utilities to add space between items.
 
 {{< example class="bd-example-flex" >}}
-<div class="vstack gap-3">
-  <div class="p-2">First item</div>
-  <div class="p-2">Second item</div>
-  <div class="p-2">Third item</div>
+<div class="vstack gap-tall">
+  <div class="p-short">First item</div>
+  <div class="p-short">Second item</div>
+  <div class="p-short">Third item</div>
 </div>
 {{< /example >}}
 
@@ -31,31 +31,31 @@ Use `.vstack` to create vertical layouts. Stacked items are full-width by defaul
 Use `.hstack` for horizontal layouts. Stacked items are vertically centered by default and only take up their necessary width. Use `.gap-*` utilities to add space between items.
 
 {{< example class="bd-example-flex" >}}
-<div class="hstack gap-3">
-  <div class="p-2">First item</div>
-  <div class="p-2">Second item</div>
-  <div class="p-2">Third item</div>
+<div class="hstack gap-tall">
+  <div class="p-short">First item</div>
+  <div class="p-short">Second item</div>
+  <div class="p-short">Third item</div>
 </div>
 {{< /example >}}
 
 Using horizontal margin utilities like `.ms-auto` as spacers:
 
 {{< example class="bd-example-flex" >}}
-<div class="hstack gap-3">
-  <div class="p-2">First item</div>
-  <div class="p-2 ms-auto">Second item</div>
-  <div class="p-2">Third item</div>
+<div class="hstack gap-tall">
+  <div class="p-short">First item</div>
+  <div class="p-short ms-auto">Second item</div>
+  <div class="p-short">Third item</div>
 </div>
 {{< /example >}}
 
 <!--And with [vertical rules]({{< docsref "/helpers/vertical-rule" >}}):
 
 {{< example class="bd-example-flex" >}}
-<div class="hstack gap-3">
-  <div class="p-2">First item</div>
-  <div class="p-2 ms-auto">Second item</div>
+<div class="hstack gap-tall">
+  <div class="p-short">First item</div>
+  <div class="p-short ms-auto">Second item</div>
   <div class="vr"></div>
-  <div class="p-2">Third item</div>
+  <div class="p-short">Third item</div>
 </div>
 {{< /example >}}-->
 
@@ -64,7 +64,7 @@ Using horizontal margin utilities like `.ms-auto` as spacers:
 Use `.vstack` to stack buttons and other elements:
 
 {{< example >}}
-<div class="vstack gap-2 col-md-5 mx-auto">
+<div class="vstack gap-short col-md-5 mx-auto">
   <button type="button" class="btn btn-primary">Save changes</button>
   <button type="button" class="btn btn-outline-secondary">Cancel</button>
 </div>
@@ -80,7 +80,7 @@ This variant with an **horizontal layout** (i.e. labels not above the input fiel
 {{< /design-callout-alert >}}
 
 {{< example >}}
-<div class="hstack gap-3">
+<div class="hstack gap-tall">
   <input class="form-control me-auto" type="text" placeholder="Add your item here..." aria-label="Add your item here...">
   <button type="button" class="btn btn-primary">Submit</button>
   <div class="vr"></div>
diff --git a/site/content/docs/0.0/helpers/stretched-link.md b/site/content/docs/0.0/helpers/stretched-link.md
index 59733d983c..bdaf1cb44b 100644
--- a/site/content/docs/0.0/helpers/stretched-link.md
+++ b/site/content/docs/0.0/helpers/stretched-link.md
@@ -28,9 +28,9 @@ Most custom components do not have `position: relative` by default, so we need t
 
 {{< example >}}
 <div class="d-flex position-relative">
-  {{< placeholder width="144" height="144" class="flex-shrink-0 me-3" text="false" title="Generic placeholder image" >}}
+  {{< placeholder width="144" height="144" class="flex-shrink-0 me-tall" text="false" title="Generic placeholder image" >}}
   <div>
-    <h5 class="mt-0">Custom component with stretched link</h5>
+    <h5 class="mt-none">Custom component with stretched link</h5>
     <p>This is some placeholder content for the custom component. It is intended to mimic what some real-world content would look like, and we're using it here to give the component a bit of body and size.</p>
     <a href="#" class="stretched-link">Go somewhere</a>
   </div>
@@ -39,11 +39,11 @@ Most custom components do not have `position: relative` by default, so we need t
 
 {{< example >}}
 <div class="row g-none bg-body-secondary position-relative">
-  <div class="col-md-6 mb-md-0 p-md-4">
+  <div class="col-md-6 mb-md-none p-md-tallest">
     {{< placeholder width="100%" height="200" class="w-100" text="false" title="Generic placeholder image" >}}
   </div>
-  <div class="col-md-6 p-4 ps-md-0">
-    <h5 class="mt-0">Columns with stretched link</h5>
+  <div class="col-md-6 p-tallest ps-md-none">
+    <h5 class="mt-none">Columns with stretched link</h5>
     <p>Another instance of placeholder content for this other custom component. It is intended to mimic what some real-world content would look like, and we're using it here to give the component a bit of body and size.</p>
     <a href="#" class="stretched-link">Go somewhere</a>
   </div>
diff --git a/site/content/docs/0.0/layout/columns.md b/site/content/docs/0.0/layout/columns.md
index edb9525dd6..82e55db1b0 100644
--- a/site/content/docs/0.0/layout/columns.md
+++ b/site/content/docs/0.0/layout/columns.md
@@ -268,7 +268,7 @@ $utilities: map-merge(
 
 ### Offsetting columns
 
-You can offset grid columns with <!--in two ways: -->our responsive `.offset-` grid classes<!-- and our [margin utilities]({{< docsref "/utilities/spacing" >}})-->. Grid classes are sized to match columns<!-- while margins are more useful for quick layouts where the width of the offset is variable-->.
+You can offset grid columns with in two ways: our responsive `.offset-` grid classes and our [margin utilities]({{< docsref "/utilities/spacing" >}}). Grid classes are sized to match columns while margins are more useful for quick layouts where the width of the offset is variable.
 
 #### Offset classes
 
@@ -331,11 +331,11 @@ With flexbox grids, you can use margin utilities like `.me-auto` to force siblin
 The `.col-*` classes can also be used outside a `.row` to give an element a specific width. Whenever column classes are used as non-direct children of a row, the paddings are omitted.
 
 {{< example class="bd-example-row" >}}
-<div class="col-3 p-3 mb-2">
+<div class="col-3 p-tall mb-short">
   .col-3: width of 25%
 </div>
 
-<div class="col-sm-9 p-3">
+<div class="col-sm-9 p-tall">
   .col-sm-9: width of 75% above sm breakpoint
 </div>
 {{< /example >}}
@@ -344,7 +344,7 @@ The classes can be used together with utilities to create responsive floated ima
 
 {{< example >}}
 <div class="clearfix">
-  {{< placeholder width="100%" height="210" class="col-md-6 float-md-end mb-3 ms-md-3" text="Responsive floated image" color="#999" >}}
+  {{< placeholder width="100%" height="210" class="col-md-6 float-md-end mb-tall ms-md-tall" text="Responsive floated image" color="#999" >}}
 
   <p>
     A paragraph of placeholder text. We're using it here to show the use of the clearfix class. We're adding quite a few meaningless phrases here to demonstrate how the columns interact here with the floated image.
diff --git a/site/content/docs/0.0/layout/containers.md b/site/content/docs/0.0/layout/containers.md
index 2160910afa..aa4fa07686 100644
--- a/site/content/docs/0.0/layout/containers.md
+++ b/site/content/docs/0.0/layout/containers.md
@@ -132,8 +132,8 @@ $ouds-size-max-width-grid: 3500px; // Custom container max width
 
 @import "../node_modules/ouds-web/tokens/raw";
 @import "../node_modules/ouds-web/tokens/semantic";
+@import "../node_modules/ouds-web/tokens/composite";
 @import "../node_modules/ouds-web/tokens/component";
-@import "../node_modules/ouds-web/ouds-maps";
 @import "../node_modules/ouds-web/variables";
 @import "../node_modules/ouds-web/variables-dark";
 // etc
diff --git a/site/content/docs/0.0/layout/css-grid.md b/site/content/docs/0.0/layout/css-grid.md
index 650e9c6ca5..40ccfad4db 100644
--- a/site/content/docs/0.0/layout/css-grid.md
+++ b/site/content/docs/0.0/layout/css-grid.md
@@ -178,7 +178,7 @@ Customize the number of columns, the number of rows, and the width of the gaps w
 | --- | --- | --- |
 | `--bs-rows` | `1` | The number of rows in your grid template |
 | `--bs-columns` | `12` | The number of columns in your grid template |
-<!--| `-bs-gap` | `1.25rem` | The size of the gap between columns (vertical and horizontal) |-->
+| `--bs-gap` | `1.25rem` | The size of the gap between columns (vertical and horizontal) |
 {{< /bs-table >}}
 
 These CSS variables have no default value; instead, they apply fallback values that are used _until_ a local instance is provided. For example, we use `var(--bs-rows, 1)` for our CSS Grid rows, which ignores `--bs-rows` because that hasn't been set anywhere yet. Once it is, the `.grid` instance will use that value instead of the fallback value of `1`.
diff --git a/site/content/docs/0.0/layout/grid.md b/site/content/docs/0.0/layout/grid.md
index a98d0b3d65..66c149ff38 100644
--- a/site/content/docs/0.0/layout/grid.md
+++ b/site/content/docs/0.0/layout/grid.md
@@ -68,7 +68,7 @@ OUDS Web's grid system can adapt across all eight default breakpoints, and any b
 As noted above, each of these breakpoints have their own unique class prefix and modifiers. Here's how the grid changes across these breakpoints:
 
 <div class="table-responsive">
-  <table class="table mb-4">
+  <table class="table mb-tallest">
     <thead>
       <tr>
         <th scope="col"></th>
@@ -173,7 +173,7 @@ As noted above, each of these breakpoints have their own unique class prefix and
 Includes support for xxl breakpoint, defined like 2xl.
 
 <div class="table-responsive">
-  <table class="table mb-4">
+  <table class="table mb-tallest">
     <thead>
       <tr>
         <th scope="col"></th>
diff --git a/site/content/docs/0.0/layout/gutters.md b/site/content/docs/0.0/layout/gutters.md
index 8ab8968689..7fd8e36b2f 100644
--- a/site/content/docs/0.0/layout/gutters.md
+++ b/site/content/docs/0.0/layout/gutters.md
@@ -8,4 +8,179 @@ aliases:
 toc: true
 ---
 
-{{< callout-soon "page" >}}
+## How they work
+
+- **Gutters are the gaps between column content, created by horizontal `padding`.** We set `padding-right` and `padding-left` on each column, and use negative `margin` to offset that at the start and end of each row to align content. The default gutter width is described in [our grid options]({{< docsref "/layout/grid#grid-options" >}}).
+
+- **Gutter utilities start at `2px` and go up to `64px` wide.** This allows us to match our grid to the [padding and margin spacers]({{< docsref "/utilities/spacing" >}}) scale.
+
+- **Gutters can be responsively adjusted.** Use breakpoint-specific gutter classes, from xs to 3xl, to modify horizontal gutters, vertical gutters, and all gutters.
+
+## Horizontal gutters
+
+`.gx-*` classes can be used to control the horizontal gutter widths. The container element may need to be adjusted if larger gutters are used too to avoid unwanted overflow, using a matching padding utility. For example, in the following example we've increased the padding with `.px-tallest`.
+
+{{< example class="bd-example-cols" >}}
+<div class="container-fluid px-tallest text-center">
+  <div class="row gx-jumbo">
+    <div class="col">
+     <div class="p-tall">Custom column padding</div>
+    </div>
+    <div class="col">
+      <div class="p-tall">Custom column padding</div>
+    </div>
+  </div>
+</div>
+{{< /example >}}
+
+An alternative solution is to add a wrapper around the `.row` with the `.overflow-hidden` class:
+
+{{< example class="bd-example-cols" >}}
+<div class="container-fluid overflow-hidden text-center">
+  <div class="row gx-jumbo">
+    <div class="col">
+     <div class="p-tall">Custom column padding</div>
+    </div>
+    <div class="col">
+      <div class="p-tall">Custom column padding</div>
+    </div>
+  </div>
+</div>
+{{< /example >}}
+
+## Vertical gutters
+
+`.gy-*` classes can be used to control the vertical gutter widths within a row when columns wrap to new lines. Like the horizontal gutters, the vertical gutters can cause some overflow below the `.row` at the end of a page. If this occurs, you add a wrapper around `.row` with the `.overflow-hidden` class:
+
+{{< example class="bd-example-cols" >}}
+<div class="container-fluid overflow-hidden text-center">
+  <div class="row gy-jumbo">
+    <div class="col-6">
+      <div class="p-tall">Custom column padding</div>
+    </div>
+    <div class="col-6">
+      <div class="p-tall">Custom column padding</div>
+    </div>
+    <div class="col-6">
+      <div class="p-tall">Custom column padding</div>
+    </div>
+    <div class="col-6">
+      <div class="p-tall">Custom column padding</div>
+    </div>
+  </div>
+</div>
+{{< /example >}}
+
+## Horizontal & vertical gutters
+
+Use `.g-*` classes (`*` being among `none`, `smash`, `shortest`, `shorter`, `short`, `medium`, `tall`, `taller`, `tallest`, `spacious`, `huge`, and `jumbo`) to control the horizontal and vertical grid gutters. In the example below, we use a smaller gutter width, so there isn’t a need for the `.overflow-hidden` wrapper class.
+
+{{< example class="bd-example-cols" >}}
+<div class="container-fluid text-center">
+  <div class="row g-short">
+    <div class="col-6">
+      <div class="p-tall">Custom column padding</div>
+    </div>
+    <div class="col-6">
+      <div class="p-tall">Custom column padding</div>
+    </div>
+    <div class="col-6">
+      <div class="p-tall">Custom column padding</div>
+    </div>
+    <div class="col-6">
+      <div class="p-tall">Custom column padding</div>
+    </div>
+  </div>
+</div>
+{{< /example >}}
+
+## Row columns gutters
+
+Gutter classes can also be added to [row columns]({{< docsref "/layout/grid#row-columns" >}}). In the following example, we use responsive row columns and responsive gutter classes.
+
+{{< example class="bd-example-cols" >}}
+<div class="container-fluid text-center">
+  <div class="row row-cols-2 row-cols-lg-5 g-short g-lg-tallest">
+    <div class="col">
+      <div class="p-tall">Row column</div>
+    </div>
+    <div class="col">
+      <div class="p-tall">Row column</div>
+    </div>
+    <div class="col">
+      <div class="p-tall">Row column</div>
+    </div>
+    <div class="col">
+      <div class="p-tall">Row column</div>
+    </div>
+    <div class="col">
+      <div class="p-tall">Row column</div>
+    </div>
+    <div class="col">
+      <div class="p-tall">Row column</div>
+    </div>
+    <div class="col">
+      <div class="p-tall">Row column</div>
+    </div>
+    <div class="col">
+      <div class="p-tall">Row column</div>
+    </div>
+    <div class="col">
+      <div class="p-tall">Row column</div>
+    </div>
+    <div class="col">
+      <div class="p-tall">Row column</div>
+    </div>
+  </div>
+</div>
+{{< /example >}}
+
+## No gutters
+
+The gutters between columns in our predefined grid classes can be removed with `.g-none`. This removes the negative `margin`s from `.row` and the horizontal `padding` from all immediate children columns.
+
+**Need an edge-to-edge design?** Drop the parent `.container-fluid` and add `.mx-none` to the `.row` to prevent overflow.
+
+In practice, here's how it looks. Note that you can continue to use this with all other predefined grid classes (including column widths, responsive tiers, reorders, and more).
+
+{{< example class="bd-example-row" >}}
+<div class="row g-none text-center">
+  <div class="col-sm-6 col-md-8">.col-sm-6 .col-md-8</div>
+  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
+</div>
+{{< /example >}}
+
+## Nesting
+
+Nested `.row`s will reset their own gutters to follow the main grid gutters. Here is an example with a `.gx-none` on the upper `.row`.
+
+{{< example class="bd-example-cols" >}}
+<div class="row gx-none text-center">
+  <div class="col-12 col-md-8">
+    <div>
+      <p>.col-12 .col-md-8</p>
+      <div class="row">
+        <div class="col-3"><div>.col-3</div></div>
+        <div class="col-3"><div>.col-3</div></div>
+        <div class="col-3"><div>.col-3</div></div>
+        <div class="col-3"><div>.col-3</div></div>
+      </div>
+    </div>
+  </div>
+  <div class="col-6 col-md-4">
+    <div>.col-6 .col-md-4</div>
+  </div>
+</div>
+{{< /example >}}
+
+## Change the gutters
+
+Classes are built from the `$gutters` Sass map which is inherited from the `$ouds-dimension-space-fixed` Sass map.
+
+{{< scss-docs name="gutters" file="scss/_maps.scss" >}}
+
+{{< scss-docs name="ouds-maps-dimension-fixed" file="scss/_maps.scss" >}}
+
+{{< scss-docs name="ouds-semantic-space" file="scss/tokens/_semantic.scss" >}}
+
+{{< scss-docs name="ouds-raw-dimension" file="scss/tokens/_raw.scss" >}}
diff --git a/site/content/docs/0.0/layout/utilities.md b/site/content/docs/0.0/layout/utilities.md
index 8d867181a0..bb082c5b7a 100644
--- a/site/content/docs/0.0/layout/utilities.md
+++ b/site/content/docs/0.0/layout/utilities.md
@@ -18,9 +18,9 @@ OUDS Web is built with flexbox, but not every element's `display` has been chang
 
 Should you need to add `display: flex` to an element, do so with `.d-flex` or one of the responsive variants (e.g., `.d-sm-flex`). You'll need this class or `display` value to allow the use of our extra [flexbox utilities]({{< docsref "/utilities/flex" >}}) for sizing, alignment, spacing, and more.
 
-<!-- ## Margin and padding
+## Margin and padding
 
-Use the `margin` and `padding` [spacing utilities]({{< docsref "/utilities/spacing" >}}) to control how elements and components are spaced and sized. OUDS Web includes a eight-level scale for spacing utilities, based on a `1.25rem` value default `$spacer` variable. Choose values for all viewports (e.g., `.me-3` for `margin-right: 1.25rem` in LTR), or pick responsive variants to target specific viewports (e.g., `.me-md-3` for `margin-right: 1.25rem` —in LTR— starting at the `md` breakpoint). -->
+Use the `margin` and `padding` [spacing utilities]({{< docsref "/utilities/spacing" >}}) to control how elements and components are spaced and sized. OUDS Web includes an eleven-level scale for spacing utilities, based on a `4px` value default `$ouds-dimension-base` variable. Choose values for all viewports (e.g., `.me-tall` for `margin-right: 16px` in LTR), or pick responsive variants to target specific viewports (e.g., `.me-md-tall` for `margin-right: 16px` —in LTR— starting at the `md` breakpoint).
 
 ## Toggle `visibility`
 
diff --git a/site/content/docs/0.0/migration-from-boosted.md b/site/content/docs/0.0/migration-from-boosted.md
index 99d7a8fb59..5004ec6af1 100644
--- a/site/content/docs/0.0/migration-from-boosted.md
+++ b/site/content/docs/0.0/migration-from-boosted.md
@@ -47,10 +47,11 @@ Technically, it means that you can get rid of the following things:
   - `2xs` and `3xl` have been added.
   - `xxl` has been renamed to `2xl`.
   - The breakpoints values have changed. Please refer to the [breakpoints' documentation]({{< docsref "/layout/breakpoints/" >}}).
-   - The default container to use is now `.container-fluid` associated to `.container-max-width` instead of `.container-xxl`. Please refer to the [fluid containers' documentation]({{< docsref "/layout/containers/#fluid-containers" >}}).
-   - Default gutter inside grid has been changed to have a fully responsive behavior. It should be a transparent change for you.
+  - The default container to use is now `.container-fluid` associated to `.container-max-width` instead of `.container-xxl`. Please refer to the [fluid containers' documentation]({{< docsref "/layout/containers/#fluid-containers" >}}).
+  - Default gutter inside grid has been changed to have a fully responsive behavior. It should be a transparent change for you.
+  - All gutter utilities have been changed. `.g{-breakpoint}-{value}`, `.gx{-breakpoint}-{value}` and `.gy{-breakpoint}-{value}` which value is inside `0|1|2|3|4|5`. Gutter utilities values now use `none|smash|shortest|shorter|short|medium|tall|taller|tallest|spacious|huge|jumbo`. Proportional equivalence between `0` → `none`, `1` → `shortest`, `2` → `shorter`, `3` → `medium`, `4` → `tall`, `5` → `spacious`.
 
-   All responsive classes, helpers, and utilities have been updated accordingly to match the new breakpoints.
+All responsive classes, helpers, and utilities have been updated accordingly to match the new breakpoints.
 
 - <span class="badge text-bg-info">Info</span> `.container` and `.container-{breakpoint}` have been removed from the default build but you can still have them using `$enable-bootstrap-compatibility`.
 - <span class="badge text-bg-info">Info</span> `xxl` breakpoint and thus all related classes (like `.container-xxl`, `.col-xxl-*`) can still be available when `$enable-bootstrap-compatibility` is enabled.
@@ -87,18 +88,18 @@ Technically, it means that you can get rid of the following things:
 - <span class="badge text-bg-success">New</span> Border width utilities: `.border-none`, `.border-thin`, `.border-medium`, `.border-thick`, and `.border-thicker`.
 
 - <span class="badge text-bg-danger">Breaking</span> Border radius utilities with many sizes have been removed. Please check the new [border values]({{< docsref "/utilities/borders#radius" >}}) directly in the documentation and adapt your websites to them. You can still have them using `$enable-bootstrap-compatibility`:
-  - 0: `.rounded-0`, `.rounded-top-0`, `.rounded-bottom-0`, `.rounded-start-0` and `.rounded-end-0`.
-  - 1: `.rounded-1`, `.rounded-top-1`, `.rounded-bottom-1`, `.rounded-start-1` and `.rounded-end-1`.
-  - 2: `.rounded-2`, `.rounded-top-2`, `.rounded-bottom-2`, `.rounded-start-2` and `.rounded-end-2`.
-  - 3: `.rounded-3`, `.rounded-top-3`, `.rounded-bottom-3`, `.rounded-start-3` and `.rounded-end-3`.
-  - 4: `.rounded-4`, `.rounded-top-4`, `.rounded-bottom-4`, `.rounded-start-4` and `.rounded-end-4`.
-  - 5: `.rounded-5`, `.rounded-top-5`, `.rounded-bottom-5`, `.rounded-start-5` and `.rounded-end-5`.
+  - **0**: `.rounded-0`, `.rounded-top-0`, `.rounded-bottom-0`, `.rounded-start-0` and `.rounded-end-0`.
+  - **1**: `.rounded-1`, `.rounded-top-1`, `.rounded-bottom-1`, `.rounded-start-1` and `.rounded-end-1`.
+  - **2**: `.rounded-2`, `.rounded-top-2`, `.rounded-bottom-2`, `.rounded-start-2` and `.rounded-end-2`.
+  - **3**: `.rounded-3`, `.rounded-top-3`, `.rounded-bottom-3`, `.rounded-start-3` and `.rounded-end-3`.
+  - **4**: `.rounded-4`, `.rounded-top-4`, `.rounded-bottom-4`, `.rounded-start-4` and `.rounded-end-4`.
+  - **5**: `.rounded-5`, `.rounded-top-5`, `.rounded-bottom-5`, `.rounded-start-5` and `.rounded-end-5`.
 
 - <span class="badge text-bg-success">New</span> Border radius utilities with all sizes:
-  - None: `.rounded-none`, `.rounded-top-none`, `.rounded-bottom-none`, `.rounded-start-none` and `.rounded-end-none`.
-  - Short: `.rounded-short`, `.rounded-top-short`, `.rounded-bottom-short`, `.rounded-start-short` and `.rounded-end-short`.
-  - Medium: `.rounded-medium`, `.rounded-top-medium`, `.rounded-bottom-medium`, `.rounded-start-medium` and `.rounded-end-medium`.
-  - Tall: `.rounded-tall`, `.rounded-top-tall`, `.rounded-bottom-tall`, `.rounded-start-tall` and `.rounded-end-tall`.
+  - **None**: `.rounded-none`, `.rounded-top-none`, `.rounded-bottom-none`, `.rounded-start-none` and `.rounded-end-none`.
+  - **Short**: `.rounded-short`, `.rounded-top-short`, `.rounded-bottom-short`, `.rounded-start-short` and `.rounded-end-short`.
+  - **Medium**: `.rounded-medium`, `.rounded-top-medium`, `.rounded-bottom-medium`, `.rounded-start-medium` and `.rounded-end-medium`.
+  - **Tall**: `.rounded-tall`, `.rounded-top-tall`, `.rounded-bottom-tall`, `.rounded-start-tall` and `.rounded-end-tall`.
 
 - <span class="badge text-bg-success">New</span> Border style utilities: `.border-drag`.
 
@@ -109,8 +110,8 @@ Technically, it means that you can get rid of the following things:
 
 ### Flex
 
-- <span class="badge text-bg-danger">Breaking</span> `xxl` responsive flex utilities have been replaced by `2xl` utilities: `.d-xxl-flex`, `.d-xxl-inline-flex`, `.flex-xxl-{row|column}`, `.flex-xxl-{row|column}-reverse`, `.justify-content-xxl-{start|end|center|between|around|evenly}`, `.align-items-xxl-{start|end|center|baseline|stretch}`, `.align-self-xxl-{start|end|center|baseline|stretch}`, `.flex-xxl-fill`, `flex-xxl-{grow|shrink}-{0|1}`, `.flex-xxl-{nowrap|wrap|wrap-reverse}`, `.order-xxl-{number}`, `.order-xxl-{first|last}` and `.align-content-xxl-{start|end|center|between|around|stretch}` utilities have been replaced by `.d-2xl-flex`, `.d-2xl-inline-flex`, `.flex-2xl-{row|column}`, `.flex-2xl-{row|column}-reverse`, `.justify-content-2xl-{start|end|center|between|around|evenly}`, `.align-items-2xl-{start|end|center|baseline|stretch}`, `.align-self-2xl-{start|end|center|baseline|stretch}`, `.flex-2xl-fill`, `flex-2xl-{grow|shrink}-{0|1}`, `.flex-2xl-{nowrap|wrap|wrap-reverse}`, `.order-2xl-{number}`, `.order-2xl-{first|last}` and `.align-content-2xl-{start|end|center|between|around|stretch}`. Please refer to the [new breakpoints' names]({{< docsref "/layout/breakpoints/#available-breakpoints" >}}). You can still have them using `$enable-bootstrap-compatibility`.
-- <span class="badge text-bg-success">New</span> `xs` and `3xl` responsive flex utilities have been added: `.d-xs-flex`, `.d-xs-inline-flex`, `.flex-xs-{row|column}`, `.flex-xs-{row|column}-reverse`, `.justify-content-xs-{start|end|center|between|around|evenly}`, `.align-items-xs-{start|end|center|baseline|stretch}`, `.align-self-xs-{start|end|center|baseline|stretch}`, `.flex-xs-fill`, `flex-xs-{grow|shrink}-{0|1}`, `.flex-xs-{nowrap|wrap|wrap-reverse}`, `.order-xs-{number}`, `.order-xs-{first|last}`, `.align-content-xs-{start|end|center|between|around|stretch}`, `.d-3xl-flex`, `.d-3xl-inline-flex`, `.flex-3xl-{row|column}`, `.flex-3xl-{row|column}-reverse`, `.justify-content-3xl-{start|end|center|between|around|evenly}`, `.align-items-3xl-{start|end|center|baseline|stretch}`, `.align-self-3xl-{start|end|center|baseline|stretch}`, `.flex-3xl-fill`, `flex-3xl-{grow|shrink}-{0|1}`, `.flex-3xl-{nowrap|wrap|wrap-reverse}`, `.order-3xl-{number}`, `.order-3xl-{first|last}` and `.align-content-3xl-{start|end|center|between|around|stretch}`. Please refer to the [new breakpoints' names]({{< docsref "/layout/breakpoints/#available-breakpoints" >}}).
+- <span class="badge text-bg-danger">Breaking</span> `xxl` responsive flex utilities have been replaced by `2xl` utilities: `.d-xxl-flex`, `.d-xxl-inline-flex`, `.flex-xxl-{row|column}`, `.flex-xxl-{row|column}-reverse`, `.justify-content-xxl-{start|end|center|between|around|evenly}`, `.align-items-xxl-{start|end|center|baseline|stretch}`, `.align-self-xxl-{start|end|center|baseline|stretch}`, `.flex-xxl-fill`, `.flex-xxl-{grow|shrink}-{0|1}`, `.flex-xxl-{nowrap|wrap|wrap-reverse}`, `.order-xxl-{number}`, `.order-xxl-{first|last}` and `.align-content-xxl-{start|end|center|between|around|stretch}` utilities have been replaced by `.d-2xl-flex`, `.d-2xl-inline-flex`, `.flex-2xl-{row|column}`, `.flex-2xl-{row|column}-reverse`, `.justify-content-2xl-{start|end|center|between|around|evenly}`, `.align-items-2xl-{start|end|center|baseline|stretch}`, `.align-self-2xl-{start|end|center|baseline|stretch}`, `.flex-2xl-fill`, `.flex-2xl-{grow|shrink}-{0|1}`, `.flex-2xl-{nowrap|wrap|wrap-reverse}`, `.order-2xl-{number}`, `.order-2xl-{first|last}` and `.align-content-2xl-{start|end|center|between|around|stretch}`. Please refer to the [new breakpoints' names]({{< docsref "/layout/breakpoints/#available-breakpoints" >}}). You can still have them using `$enable-bootstrap-compatibility`.
+- <span class="badge text-bg-success">New</span> `xs` and `3xl` responsive flex utilities have been added: `.d-xs-flex`, `.d-xs-inline-flex`, `.flex-xs-{row|column}`, `.flex-xs-{row|column}-reverse`, `.justify-content-xs-{start|end|center|between|around|evenly}`, `.align-items-xs-{start|end|center|baseline|stretch}`, `.align-self-xs-{start|end|center|baseline|stretch}`, `.flex-xs-fill`, `.flex-xs-{grow|shrink}-{0|1}`, `.flex-xs-{nowrap|wrap|wrap-reverse}`, `.order-xs-{number}`, `.order-xs-{first|last}`, `.align-content-xs-{start|end|center|between|around|stretch}`, `.d-3xl-flex`, `.d-3xl-inline-flex`, `.flex-3xl-{row|column}`, `.flex-3xl-{row|column}-reverse`, `.justify-content-3xl-{start|end|center|between|around|evenly}`, `.align-items-3xl-{start|end|center|baseline|stretch}`, `.align-self-3xl-{start|end|center|baseline|stretch}`, `.flex-3xl-fill`, `.flex-3xl-{grow|shrink}-{0|1}`, `.flex-3xl-{nowrap|wrap|wrap-reverse}`, `.order-3xl-{number}`, `.order-3xl-{first|last}` and `.align-content-3xl-{start|end|center|between|around|stretch}`. Please refer to the [new breakpoints' names]({{< docsref "/layout/breakpoints/#available-breakpoints" >}}).
 
 ### Float
 
@@ -132,7 +133,128 @@ Technically, it means that you can get rid of the following things:
 
 - <span class="badge text-bg-danger">Breaking</span> `.shadow`, `.shadow-sm` and `.shadow-lg` have been removed from the default build. Please check the new [shadows values]({{< docsref "/utilities/shadows" >}}) directly in the documentation and adapt your websites to them. You can still have them using `$enable-bootstrap-compatibility`.
 - <span class="badge text-bg-success">New</span> Shadows utilities:
-`shadow-none`, `shadow-raised`, `shadow-drag`, `shadow-overlay-default`, `shadow-overlay-emphasized`, `shadow-sticky-default`, `shadow-sticky-emphasized` and `shadow-sticky-navigation-scrolled`.
+`.shadow-none`, `.shadow-raised`, `.shadow-drag`, `.shadow-overlay-default`, `.shadow-overlay-emphasized`, `.shadow-sticky-default`, `.shadow-sticky-emphasized` and `.shadow-sticky-navigation-scrolled`.
+
+### Spacings
+
+- <span class="badge text-bg-danger">Breaking</span> The following margin spacing utilities have been removed from the default build (`.m{position}-{breakpoint}-{negative}{value}`). Please check the new [spacing values]({{< docsref "/utilities/spacing" >}}) directly in the documentation and adapt your websites to them. You can still have them using `$enable-bootstrap-compatibility`:
+  - **0**: `.m-0`, `.mx-0`, `.my-0`, `.mt-0`, `.mb-0`, `.ms-0`, `.me-0`, `.m-sm-0`, etc...
+  - **1**: `.m-1`, `.mx-1`, `.my-1`, `.mt-1`, `.mb-1`, `.ms-1`, `.me-1`, `.m-sm-1`, etc...
+  - **2**: `.m-2`, `.mx-2`, `.my-2`, `.mt-2`, `.mb-2`, `.ms-2`, `.me-2`, `.m-sm-2`, etc...
+  - **3**: `.m-3`, `.mx-3`, `.my-3`, `.mt-3`, `.mb-3`, `.ms-3`, `.me-3`, `.m-sm-3`, etc...
+  - **4**: `.m-4`, `.mx-4`, `.my-4`, `.mt-4`, `.mb-4`, `.ms-4`, `.me-4`, `.m-sm-4`, etc...
+  - **5**: `.m-5`, `.mx-5`, `.my-5`, `.mt-5`, `.mb-5`, `.ms-5`, `.me-5`, `.m-sm-5`, etc...
+  - **Negative**: `.m-n1`, `.m-n2`, `.m-n3`, `.m-n4`, `.m-n5`, `.mx-n1`, etc...
+
+- <span class="badge text-bg-danger">Breaking</span> The following padding spacing utilities have been removed from the default build (`.p{position}-{breakpoint}-{value}`). Please check the new [spacing values]({{< docsref "/utilities/spacing" >}}) directly in the documentation and adapt your websites to them. You can still have them using `$enable-bootstrap-compatibility`:
+  - **0**: `.p-0`, `.px-0`, `.py-0`, `.pt-0`, `.pb-0`, `.ps-0`, `.pe-0`, `.p-sm-0`, etc...
+  - **1**: `.p-1`, `.px-1`, `.py-1`, `.pt-1`, `.pb-1`, `.ps-1`, `.pe-1`, `.p-sm-1`, etc...
+  - **2**: `.p-2`, `.px-2`, `.py-2`, `.pt-2`, `.pb-2`, `.ps-2`, `.pe-2`, `.p-sm-2`, etc...
+  - **3**: `.p-3`, `.px-3`, `.py-3`, `.pt-3`, `.pb-3`, `.ps-3`, `.pe-3`, `.p-sm-3`, etc...
+  - **4**: `.p-4`, `.px-4`, `.py-4`, `.pt-4`, `.pb-4`, `.ps-4`, `.pe-4`, `.p-sm-4`, etc...
+  - **5**: `.p-5`, `.px-5`, `.py-5`, `.pt-5`, `.pb-5`, `.ps-5`, `.pe-5`, `.p-sm-5`, etc...
+
+- <span class="badge text-bg-danger">Breaking</span> The following gap spacing utilities have been removed from the default build (`.{row-|column-|}gap-{breakpoint}-{value}`). Please check the new [spacing values]({{< docsref "/utilities/spacing" >}}) directly in the documentation and adapt your websites to them. You can still have them using `$enable-bootstrap-compatibility`:
+  - **0**: `.gap-0`, `.row-gap-0`, `.column-gap-0`, `.gap-sm-0`, etc...
+  - **1**: `.gap-1`, `.row-gap-1`, `.column-gap-1`, `.gap-sm-1`, etc...
+  - **2**: `.gap-2`, `.row-gap-2`, `.column-gap-2`, `.gap-sm-2`, etc...
+  - **3**: `.gap-3`, `.row-gap-3`, `.column-gap-3`, `.gap-sm-3`, etc...
+  - **4**: `.gap-4`, `.row-gap-4`, `.column-gap-4`, `.gap-sm-4`, etc...
+  - **5**: `.gap-5`, `.row-gap-5`, `.column-gap-5`, `.gap-sm-5`, etc...
+
+- <span class="badge text-bg-success">New</span> fixed margin spacing utilities:
+  - **None**: `.m-none`, `.mx-none`, `.my-none`, `.mt-none`, `.mb-none`, `.ms-none`, `.me-none`, `.m-xs-none`, etc...
+  - **Smash**: `.m-smash`, `.mx-smash`, `.my-smash`, `.mt-smash`, `.mb-smash`, `.ms-smash`, `.me-smash`, `.m-xs-smash`, etc...
+  - **Shortest**: `.m-shortest`, `.mx-shortest`, `.my-shortest`, `.mt-shortest`, `.mb-shortest`, `.ms-shortest`, `.me-shortest`, `.m-xs-shortest`, etc...
+  - **Shorter**: `.m-shorter`, `.mx-shorter`, `.my-shorter`, `.mt-shorter`, `.mb-shorter`, `.ms-shorter`, `.me-shorter`, `.m-xs-shorter`, etc...
+  - **Short**: `.m-short`, `.mx-short`, `.my-short`, `.mt-short`, `.mb-short`, `.ms-short`, `.me-short`, `.m-xs-short`, etc...
+  - **Medium**: `.m-medium`, `.mx-medium`, `.my-medium`, `.mt-medium`, `.mb-medium`, `.ms-medium`, `.me-medium`, `.m-xs-medium`, etc...
+  - **Tall**: `.m-tall`, `.mx-tall`, `.my-tall`, `.mt-tall`, `.mb-tall`, `.ms-tall`, `.me-tall`, `.m-xs-tall`, etc...
+  - **Taller**: `.m-taller`, `.mx-taller`, `.my-taller`, `.mt-taller`, `.mb-taller`, `.ms-taller`, `.me-taller`, `.m-xs-taller`, etc...
+  - **Tallest**: `.m-tallest`, `.mx-tallest`, `.my-tallest`, `.mt-tallest`, `.mb-tallest`, `.ms-tallest`, `.me-tallest`, `.m-xs-tallest`, etc...
+  - **Spacious**: `.m-spacious`, `.mx-spacious`, `.my-spacious`, `.mt-spacious`, `.mb-spacious`, `.ms-spacious`, `.me-spacious`, `.m-xs-spacious`, etc...
+  - **Huge**: `.m-huge`, `.mx-huge`, `.my-huge`, `.mt-huge`, `.mb-huge`, `.ms-huge`, `.me-huge`, `.m-xs-huge`, etc...
+  - **Jumbo**: `.m-jumbo`, `.mx-jumbo`, `.my-jumbo`, `.mt-jumbo`, `.mb-jumbo`, `.ms-jumbo`, `.me-jumbo`, `.m-xs-jumbo`, etc...
+  - **Auto**: `.m-xs-auto`, `.mx-xs-auto`, `.my-xs-auto`, `.mt-xs-auto`, `.mb-xs-auto`, `.ms-xs-auto`, `.me-xs-auto`, `.m-2xl-auto`, etc...
+  - **Negative**: `.m-nsmash`, `.m-nshortest`, `.m-nshorter`, `.m-nshort`, `.m-nmedium`, `.m-ntall`, `.m-ntaller`, `.m-ntallest`, `.m-nspacious`, `.m-nhuge`, `.m-njumbo`, `.mx-nsmash`, etc...
+
+- <span class="badge text-bg-success">New</span> scaled margin spacing utilities:
+  - **None**: `.m-scaled-none`, `.mx-scaled-none`, `.my-scaled-none`, `.mt-scaled-none`, `.mb-scaled-none`, `.ms-scaled-none`, `.me-scaled-none`,
+  - **Smash**: `.m-scaled-smash`, `.mx-scaled-smash`, `.my-scaled-smash`, `.mt-scaled-smash`, `.mb-scaled-smash`, `.ms-scaled-smash`, `.me-scaled-smash`,
+  - **Shortest**: `.m-scaled-shortest`, `.mx-scaled-shortest`, `.my-scaled-shortest`, `.mt-scaled-shortest`, `.mb-scaled-shortest`, `.ms-scaled-shortest`, `.me-scaled-shortest`,
+  - **Shorter**: `.m-scaled-shorter`, `.mx-scaled-shorter`, `.my-scaled-shorter`, `.mt-scaled-shorter`, `.mb-scaled-shorter`, `.ms-scaled-shorter`, `.me-scaled-shorter`,
+  - **Short**: `.m-scaled-short`, `.mx-scaled-short`, `.my-scaled-short`, `.mt-scaled-short`, `.mb-scaled-short`, `.ms-scaled-short`, `.me-scaled-short`,
+  - **Medium**: `.m-scaled-medium`, `.mx-scaled-medium`, `.my-scaled-medium`, `.mt-scaled-medium`, `.mb-scaled-medium`, `.ms-scaled-medium`, `.me-scaled-medium`,
+  - **Tall**: `.m-scaled-tall`, `.mx-scaled-tall`, `.my-scaled-tall`, `.mt-scaled-tall`, `.mb-scaled-tall`, `.ms-scaled-tall`, `.me-scaled-tall`,
+  - **Taller**: `.m-scaled-taller`, `.mx-scaled-taller`, `.my-scaled-taller`, `.mt-scaled-taller`, `.mb-scaled-taller`, `.ms-scaled-taller`, `.me-scaled-taller`,
+  - **Tallest**: `.m-scaled-tallest`, `.mx-scaled-tallest`, `.my-scaled-tallest`, `.mt-scaled-tallest`, `.mb-scaled-tallest`, `.ms-scaled-tallest`, `.me-scaled-tallest`,
+  - **Spacious**: `.m-scaled-spacious`, `.mx-scaled-spacious`, `.my-scaled-spacious`, `.mt-scaled-spacious`, `.mb-scaled-spacious`, `.ms-scaled-spacious`, `.me-scaled-spacious`
+
+- <span class="badge text-bg-success">New</span> fixed padding spacing utilities:
+  - **None**: `.p-none`, `.px-none`, `.py-none`, `.pt-none`, `.pb-none`, `.ps-none`, `.pe-none`, `.p-xs-none`, etc...
+  - **Smash**: `.p-smash`, `.px-smash`, `.py-smash`, `.pt-smash`, `.pb-smash`, `.ps-smash`, `.pe-smash`, `.p-xs-smash`, etc...
+  - **Shortest**: `.p-shortest`, `.px-shortest`, `.py-shortest`, `.pt-shortest`, `.pb-shortest`, `.ps-shortest`, `.pe-shortest`, `.p-xs-shortest`, etc...
+  - **Shorter**: `.p-shorter`, `.px-shorter`, `.py-shorter`, `.pt-shorter`, `.pb-shorter`, `.ps-shorter`, `.pe-shorter`, `.p-xs-shorter`, etc...
+  - **Short**: `.p-short`, `.px-short`, `.py-short`, `.pt-short`, `.pb-short`, `.ps-short`, `.pe-short`, `.p-xs-short`, etc...
+  - **Medium**: `.p-medium`, `.px-medium`, `.py-medium`, `.pt-medium`, `.pb-medium`, `.ps-medium`, `.pe-medium`, `.p-xs-medium`, etc...
+  - **Tall**: `.p-tall`, `.px-tall`, `.py-tall`, `.pt-tall`, `.pb-tall`, `.ps-tall`, `.pe-tall`, `.p-xs-tall`, etc...
+  - **Taller**: `.p-taller`, `.px-taller`, `.py-taller`, `.pt-taller`, `.pb-taller`, `.ps-taller`, `.pe-taller`, `.p-xs-taller`, etc...
+  - **Tallest**: `.p-tallest`, `.px-tallest`, `.py-tallest`, `.pt-tallest`, `.pb-tallest`, `.ps-tallest`, `.pe-tallest`, `.p-xs-tallest`, etc...
+  - **Spacious**: `.p-spacious`, `.px-spacious`, `.py-spacious`, `.pt-spacious`, `.pb-spacious`, `.ps-spacious`, `.pe-spacious`, `.p-xs-spacious`, etc...
+  - **Huge**: `.p-huge`, `.px-huge`, `.py-huge`, `.pt-huge`, `.pb-huge`, `.ps-huge`, `.pe-huge`, `.p-xs-huge`, etc...
+  - **Jumbo**: `.p-jumbo`, `.px-jumbo`, `.py-jumbo`, `.pt-jumbo`, `.pb-jumbo`, `.ps-jumbo`, `.pe-jumbo`, `.p-xs-jumbo`, etc...
+
+- <span class="badge text-bg-success">New</span> scaled padding spacing utilities:
+  - **None**: `.p-scaled-none`, `.px-scaled-none`, `.py-scaled-none`, `.pt-scaled-none`, `.pb-scaled-none`, `.ps-scaled-none`, `.pe-scaled-none`,
+  - **Smash**: `.p-scaled-smash`, `.px-scaled-smash`, `.py-scaled-smash`, `.pt-scaled-smash`, `.pb-scaled-smash`, `.ps-scaled-smash`, `.pe-scaled-smash`,
+  - **Shortest**: `.p-scaled-shortest`, `.px-scaled-shortest`, `.py-scaled-shortest`, `.pt-scaled-shortest`, `.pb-scaled-shortest`, `.ps-scaled-shortest`, `.pe-scaled-shortest`,
+  - **Shorter**: `.p-scaled-shorter`, `.px-scaled-shorter`, `.py-scaled-shorter`, `.pt-scaled-shorter`, `.pb-scaled-shorter`, `.ps-scaled-shorter`, `.pe-scaled-shorter`,
+  - **Short**: `.p-scaled-short`, `.px-scaled-short`, `.py-scaled-short`, `.pt-scaled-short`, `.pb-scaled-short`, `.ps-scaled-short`, `.pe-scaled-short`,
+  - **Medium**: `.p-scaled-medium`, `.px-scaled-medium`, `.py-scaled-medium`, `.pt-scaled-medium`, `.pb-scaled-medium`, `.ps-scaled-medium`, `.pe-scaled-medium`,
+  - **Tall**: `.p-scaled-tall`, `.px-scaled-tall`, `.py-scaled-tall`, `.pt-scaled-tall`, `.pb-scaled-tall`, `.ps-scaled-tall`, `.pe-scaled-tall`,
+  - **Taller**: `.p-scaled-taller`, `.px-scaled-taller`, `.py-scaled-taller`, `.pt-scaled-taller`, `.pb-scaled-taller`, `.ps-scaled-taller`, `.pe-scaled-taller`,
+  - **Tallest**: `.p-scaled-tallest`, `.px-scaled-tallest`, `.py-scaled-tallest`, `.pt-scaled-tallest`, `.pb-scaled-tallest`, `.ps-scaled-tallest`, `.pe-scaled-tallest`,
+  - **Spacious**: `.p-scaled-spacious`, `.px-scaled-spacious`, `.py-scaled-spacious`, `.pt-scaled-spacious`, `.pb-scaled-spacious`, `.ps-scaled-spacious`, `.pe-scaled-spacious`
+
+- <span class="badge text-bg-success">New</span> fixed gap spacing utilities:
+  - **None**: `.gap-none`, `.row-gap-none`, `.column-gap-none`, `.gap-xs-none`, etc...
+  - **Smash**: `.gap-smash`, `.row-gap-smash`, `.column-gap-smash`, `.gap-xs-smash`, etc...
+  - **Shortest**: `.gap-shortest`, `.row-gap-shortest`, `.column-gap-shortest`, `.gap-xs-shortest`, etc...
+  - **Shorter**: `.gap-shorter`, `.row-gap-shorter`, `.column-gap-shorter`, `.gap-xs-shorter`, etc...
+  - **Short**: `.gap-short`, `.row-gap-short`, `.column-gap-short`, `.gap-xs-short`, etc...
+  - **Medium**: `.gap-medium`, `.row-gap-medium`, `.column-gap-medium`, `.gap-xs-medium`, etc...
+  - **Tall**: `.gap-tall`, `.row-gap-tall`, `.column-gap-tall`, `.gap-xs-tall`, etc...
+  - **Taller**: `.gap-taller`, `.row-gap-taller`, `.column-gap-taller`, `.gap-xs-taller`, etc...
+  - **Tallest**: `.gap-tallest`, `.row-gap-tallest`, `.column-gap-tallest`, `.gap-xs-tallest`, etc...
+  - **Spacious**: `.gap-spacious`, `.row-gap-spacious`, `.column-gap-spacious`, `.gap-xs-spacious`, etc...
+  - **Huge**: `.gap-huge`, `.row-gap-huge`, `.column-gap-huge`, `.gap-xs-huge`, etc...
+  - **Jumbo**: `.gap-jumbo`, `.row-gap-jumbo`, `.column-gap-jumbo`, `.gap-xs-jumbo`, etc...
+
+- <span class="badge text-bg-success">New</span> scaled gap spacing utilities:
+  - **None**: `.gap-scaled-none`, `.row-gap-scaled-none`, `.column-gap-scaled-none`
+  - **Smash**: `.gap-scaled-smash`, `.row-gap-scaled-smash`, `.column-gap-scaled-smash`
+  - **Shortest**: `.gap-scaled-shortest`, `.row-gap-scaled-shortest`, `.column-gap-scaled-shortest`
+  - **Shorter**: `.gap-scaled-shorter`, `.row-gap-scaled-shorter`, `.column-gap-scaled-shorter`
+  - **Short**: `.gap-scaled-short`, `.row-gap-scaled-short`, `.column-gap-scaled-short`
+  - **Medium**: `.gap-scaled-medium`, `.row-gap-scaled-medium`, `.column-gap-scaled-medium`
+  - **Tall**: `.gap-scaled-tall`, `.row-gap-scaled-tall`, `.column-gap-scaled-tall`
+  - **Taller**: `.gap-scaled-taller`, `.row-gap-scaled-taller`, `.column-gap-scaled-taller`
+  - **Tallest**: `.gap-scaled-tallest`, `.row-gap-scaled-tallest`, `.column-gap-scaled-tallest`
+  - **Spacious**: `.gap-scaled-spacious`, `.row-gap-scaled-spacious`, `.column-gap-scaled-spacious`
+
+- <span class="badge text-bg-warning">Warning</span> You might be able to transfer your spacing utilities following one of the two proposed methods (while keeping almost the rendering and at least the same proportion between spacings):
+  - Keep the previous behavior and getting one utility for another.
+    1. **0**: `(([" \.][mp]|-?gap)[tblrsexy]?-[a-z]{0,3}-?n?)0` → `$1none`
+    2. **1**: `(([" \.][mp]|-?gap)[tblrsexy]?-[a-z]{0,3}-?n?)1` → `$1shortest`
+    3. **2**: `(([" \.][mp]|-?gap)[tblrsexy]?-[a-z]{0,3}-?n?)2` → `$1short`
+    4. **3**: `(([" \.][mp]|-?gap)[tblrsexy]?-[a-z]{0,3}-?n?)3` → `$1tall`
+    5. **4**: `(([" \.][mp]|-?gap)[tblrsexy]?-[a-z]{0,3}-?n?)4` → `$1tallest`
+    6. **5**: `(([" \.][mp]|-?gap)[tblrsexy]?-[a-z]{0,3}-?n?)5` → `$1huge`
+    7. **All numbers**: Search for `(([" \.][mp]|-?gap)[tblrsexy]?-[a-z]{0,3}-?n?)\d` and you shouldn't have Bootstrap spacing utilities anymore
+    <!-- Next technique is almost unusable in practice -->
+  - Change all the utilities using more precise utilities
+    1. **Mixing Bootstrap numbers**: Search for `([" \.][mp]|-?gap)[tblrsexy]?-[a-z]{0,3}-?n?\d`, when you match multiple on one line, consider using one of our [scaled spacing utilities]({{< docsref "/utilities/spacing#notation-for-scaled-values" >}}) (for example, `.mb-1.mb-md-2` → `.mb-scaled-shortest`).
+    2. **Remaining standalone classes**: Follow the previous guide going through all the standalone classes.
 
 ## Examples
 
@@ -141,26 +263,26 @@ Technically, it means that you can get rid of the following things:
 ## CSS and Sass variables
 
 - <span class="badge text-bg-success">New</span> `$enable-bootstrap-compatibility` option set to `false` by default. This option allows you to compile the Sass files with a Bootstrap compatibility mode.
-  - For instance, without the Bootstrap compatibility mode, you won't have the opacity Bootstrap utilities such as `opacity-0`, `opacity-1`, `opacity-50`, etc. You will only have the semantic OUDS Web utilities such as `opacity-transparent`, `opacity-weaker`, `opacity-weak`, etc.
+  - For instance, without the Bootstrap compatibility mode, you won't have the opacity Bootstrap utilities such as `.opacity-0`, `.opacity-1`, `.opacity-50`, etc. You will only have the semantic OUDS Web utilities such as `.opacity-transparent`, `.opacity-weaker`, `.opacity-weak`, etc.
 
 - <span class="badge text-bg-success">New</span> OUDS Web fully implements the design tokens. If you were using the Sass compilation, you must import the new Sass files before the variables.
 
-  <details class="mb-3">
+  <details class="mb-tall">
   <summary>See the new import stack</summary>
 
   ```diff
     @import "functions";
   + @import "tokens/raw";
   + @import "tokens/semantic";
+  + @import "tokens/composite";
   + @import "tokens/component";
-  + @import "ouds-maps";
     @import "variables";
     @import "variables-dark";
     // etc
   ```
   </details>
 
-- <details class="mb-2">
+- <details class="mb-short">
     <summary><span class="badge text-bg-success">New</span> Sass variables:</summary>
     <ul>
       <li><code>$ouds-border-base</code></li>
@@ -190,6 +312,32 @@ Technically, it means that you can get rid of the following things:
       <li><code>$ouds-border-width-thick</code></li>
       <li><code>$ouds-border-width-thicker</code></li>
       <li><code>$ouds-border-width-thin</code></li>
+      <li><code>$ouds-dimension-0</code></li>
+      <li><code>$ouds-dimension-100</code></li>
+      <li><code>$ouds-dimension-1000</code></li>
+      <li><code>$ouds-dimension-1200</code></li>
+      <li><code>$ouds-dimension-1400</code></li>
+      <li><code>$ouds-dimension-150</code></li>
+      <li><code>$ouds-dimension-1600</code></li>
+      <li><code>$ouds-dimension-1800</code></li>
+      <li><code>$ouds-dimension-200</code></li>
+      <li><code>$ouds-dimension-25</code></li>
+      <li><code>$ouds-dimension-250</code></li>
+      <li><code>$ouds-dimension-300</code></li>
+      <li><code>$ouds-dimension-350</code></li>
+      <li><code>$ouds-dimension-400</code></li>
+      <li><code>$ouds-dimension-450</code></li>
+      <li><code>$ouds-dimension-50</code></li>
+      <li><code>$ouds-dimension-500</code></li>
+      <li><code>$ouds-dimension-550</code></li>
+      <li><code>$ouds-dimension-600</code></li>
+      <li><code>$ouds-dimension-650</code></li>
+      <li><code>$ouds-dimension-700</code></li>
+      <li><code>$ouds-dimension-75</code></li>
+      <li><code>$ouds-dimension-750</code></li>
+      <li><code>$ouds-dimension-800</code></li>
+      <li><code>$ouds-dimension-900</code></li>
+      <li><code>$ouds-dimension-base</code></li>
       <li><code>$ouds-elevation-blur-0</code></li>
       <li><code>$ouds-elevation-blur-200</code></li>
       <li><code>$ouds-elevation-blur-300</code></li>
@@ -211,6 +359,12 @@ Technically, it means that you can get rid of the following things:
       <li><code>$ouds-elevation-color-sticky-default</code></li>
       <li><code>$ouds-elevation-color-sticky-emphasized</code></li>
       <li><code>$ouds-elevation-color-sticky-navigation-scrolled</code></li>
+      <li><code>$ouds-elevation-drag</code></li>
+      <li><code>$ouds-elevation-focus</code></li>
+      <li><code>$ouds-elevation-none</code></li>
+      <li><code>$ouds-elevation-overlay-default</code></li>
+      <li><code>$ouds-elevation-overlay-emphasized</code></li>
+      <li><code>$ouds-elevation-raised</code></li>
       <li><code>$ouds-elevation-spread-0</code></li>
       <li><code>$ouds-elevation-spread-300</code></li>
       <li><code>$ouds-elevation-spread-drag</code></li>
@@ -223,6 +377,9 @@ Technically, it means that you can get rid of the following things:
       <li><code>$ouds-elevation-spread-sticky-default</code></li>
       <li><code>$ouds-elevation-spread-sticky-emphasized</code></li>
       <li><code>$ouds-elevation-spread-sticky-navigation-scrolled</code></li>
+      <li><code>$ouds-elevation-sticky-default</code></li>
+      <li><code>$ouds-elevation-sticky-emphasized</code></li>
+      <li><code>$ouds-elevation-sticky-navigation-scrolled</code></li>
       <li><code>$ouds-elevation-x-0</code></li>
       <li><code>$ouds-elevation-x-drag</code></li>
       <li><code>$ouds-elevation-x-none</code></li>
@@ -301,29 +458,75 @@ Technically, it means that you can get rid of the following things:
       <li><code>$ouds-opacity-transparent</code></li>
       <li><code>$ouds-opacity-weak</code></li>
       <li><code>$ouds-opacity-weaker</code></li>
+      <li><code>$ouds-space-fixed-huge</code></li>
+      <li><code>$ouds-space-fixed-jumbo</code></li>
+      <li><code>$ouds-space-fixed-medium</code></li>
+      <li><code>$ouds-space-fixed-none</code></li>
+      <li><code>$ouds-space-fixed-short</code></li>
+      <li><code>$ouds-space-fixed-shorter</code></li>
+      <li><code>$ouds-space-fixed-shortest</code></li>
+      <li><code>$ouds-space-fixed-smash</code></li>
+      <li><code>$ouds-space-fixed-spacious</code></li>
+      <li><code>$ouds-space-fixed-tall</code></li>
+      <li><code>$ouds-space-fixed-taller</code></li>
+      <li><code>$ouds-space-fixed-tallest</code></li>
+      <li><code>$ouds-space-scaled-medium-desktop</code></li>
+      <li><code>$ouds-space-scaled-medium-mobile</code></li>
+      <li><code>$ouds-space-scaled-medium-tablet</code></li>
+      <li><code>$ouds-space-scaled-none-desktop</code></li>
+      <li><code>$ouds-space-scaled-none-mobile</code></li>
+      <li><code>$ouds-space-scaled-none-tablet</code></li>
+      <li><code>$ouds-space-scaled-short-desktop</code></li>
+      <li><code>$ouds-space-scaled-short-mobile</code></li>
+      <li><code>$ouds-space-scaled-short-tablet</code></li>
+      <li><code>$ouds-space-scaled-shorter-desktop</code></li>
+      <li><code>$ouds-space-scaled-shorter-mobile</code></li>
+      <li><code>$ouds-space-scaled-shorter-tablet</code></li>
+      <li><code>$ouds-space-scaled-shortest-desktop</code></li>
+      <li><code>$ouds-space-scaled-shortest-mobile</code></li>
+      <li><code>$ouds-space-scaled-shortest-tablet</code></li>
+      <li><code>$ouds-space-scaled-smash-desktop</code></li>
+      <li><code>$ouds-space-scaled-smash-mobile</code></li>
+      <li><code>$ouds-space-scaled-smash-tablet</code></li>
+      <li><code>$ouds-space-scaled-spacious-desktop</code></li>
+      <li><code>$ouds-space-scaled-spacious-mobile</code></li>
+      <li><code>$ouds-space-scaled-spacious-tablet</code></li>
+      <li><code>$ouds-space-scaled-tall-desktop</code></li>
+      <li><code>$ouds-space-scaled-tall-mobile</code></li>
+      <li><code>$ouds-space-scaled-tall-tablet</code></li>
+      <li><code>$ouds-space-scaled-taller-desktop</code></li>
+      <li><code>$ouds-space-scaled-taller-mobile</code></li>
+      <li><code>$ouds-space-scaled-taller-tablet</code></li>
+      <li><code>$ouds-space-scaled-tallest-desktop</code></li>
+      <li><code>$ouds-space-scaled-tallest-mobile</code></li>
+      <li><code>$ouds-space-scaled-tallest-tablet</code></li>
     </ul>
   </details>
 
-- <details class="mb-2">
+- <details class="mb-short">
     <summary><span class="badge text-bg-success">New</span> Sass maps:</summary>
     <ul>
       <li><code>$grid-gutter-widths</code></li>
       <li><code>$ouds-border-radiuses</code></li>
       <li><code>$ouds-border-styles</code></li>
       <li><code>$ouds-border-widths</code></li>
+      <li><code>$ouds-dimension-negative-space-fixed</code></li>
+      <li><code>$ouds-dimension-negative-space-scaled</code></li>
+      <li><code>$ouds-dimension-space-fixed</code></li>
+      <li><code>$ouds-dimension-space-scaled</code></li>
       <li><code>$ouds-elevations</code></li>
       <li><code>$ouds-opacities</code></li>
     </ul>
   </details>
 
-- <details class="mb-2">
+- <details class="mb-short">
     <summary><span class="badge text-bg-success">New</span> Sass mixins:</summary>
     <ul>
       <li><code>get-breakpoint-from-width()</code></li>
     </ul>
   </details>
 
-- <details class="mb-2">
+- <details class="mb-short">
     <summary><span class="badge text-bg-success">New</span> keys in <code>$utilities</code> map:</summary>
     <ul>
       <li><code>border-bottom-ouds</code></li>
@@ -333,24 +536,72 @@ Technically, it means that you can get rid of the following things:
       <li><code>border-style-ouds</code></li>
       <li><code>border-top-ouds</code></li>
       <li><code>border-width-ouds</code></li>
+      <li><code>column-gap-ouds</code></li>
+      <li><code>column-gap-scaled-ouds</code></li>
+      <li><code>gap-ouds</code></li>
+      <li><code>gap-scaled-ouds</code></li>
+      <li><code>margin-bottom-ouds</code></li>
+      <li><code>margin-bottom-scaled-ouds</code></li>
+      <li><code>margin-end-ouds</code></li>
+      <li><code>margin-end-scaled-ouds</code></li>
+      <li><code>margin-ouds</code></li>
+      <li><code>margin-scaled-ouds</code></li>
+      <li><code>margin-start-ouds</code></li>
+      <li><code>margin-start-scaled-ouds</code></li>
+      <li><code>margin-top-ouds</code></li>
+      <li><code>margin-top-scaled-ouds</code></li>
+      <li><code>margin-x-ouds</code></li>
+      <li><code>margin-x-scaled-ouds</code></li>
+      <li><code>margin-y-ouds</code></li>
+      <li><code>margin-y-scaled-ouds</code></li>
+      <li><code>negative-margin-bottom-ouds</code></li>
+      <li><code>negative-margin-bottom-scaled-ouds</code></li>
+      <li><code>negative-margin-end-ouds</code></li>
+      <li><code>negative-margin-end-scaled-ouds</code></li>
+      <li><code>negative-margin-ouds</code></li>
+      <li><code>negative-margin-scaled-ouds</code></li>
+      <li><code>negative-margin-start-ouds</code></li>
+      <li><code>negative-margin-start-scaled-ouds</code></li>
+      <li><code>negative-margin-top-ouds</code></li>
+      <li><code>negative-margin-top-scaled-ouds</code></li>
+      <li><code>negative-margin-x-ouds</code></li>
+      <li><code>negative-margin-x-scaled-ouds</code></li>
+      <li><code>negative-margin-y-ouds</code></li>
+      <li><code>negative-margin-y-scaled-ouds</code></li>
       <li><code>opacity-ouds</code></li>
+      <li><code>padding-bottom-ouds</code></li>
+      <li><code>padding-bottom-scaled-ouds</code></li>
+      <li><code>padding-end-ouds</code></li>
+      <li><code>padding-end-scaled-ouds</code></li>
+      <li><code>padding-ouds</code></li>
+      <li><code>padding-scaled-ouds</code></li>
+      <li><code>padding-start-ouds</code></li>
+      <li><code>padding-start-scaled-ouds</code></li>
+      <li><code>padding-top-ouds</code></li>
+      <li><code>padding-top-scaled-ouds</code></li>
+      <li><code>padding-x-ouds</code></li>
+      <li><code>padding-x-scaled-ouds</code></li>
+      <li><code>padding-y-ouds</code></li>
+      <li><code>padding-y-scaled-ouds</code></li>
       <li><code>rounded-bottom-ouds</code></li>
       <li><code>rounded-end-ouds</code></li>
       <li><code>rounded-ouds</code></li>
       <li><code>rounded-start-ouds</code></li>
       <li><code>rounded-top-ouds</code></li>
+      <li><code>row-gap-ouds</code></li>
+      <li><code>row-gap-scaled-ouds</code></li>
       <li><code>shadow-ouds</code></li>
     </ul>
   </details>
 
-- <details class="mb-2">
+- <details class="mb-short">
     <summary><span class="badge text-bg-success">New</span> CSS variable:</summary>
     <ul>
       <li><code>--bs-container-margin-x</code></li>
     </ul>
   </details>
 
-- <details class="mb-2">
+- <details class="mb-short">
     <summary><span class="badge text-bg-warning">Warning</span> Dropped Sass variables:</summary>
     <ul>
       <li><code>$boosted-prefix</code></li>
@@ -377,7 +628,7 @@ Technically, it means that you can get rid of the following things:
     </ul>
   </details>
 
-- <details class="mb-2">
+- <details class="mb-short">
     <summary><span class="badge text-bg-warning">Warning</span> Dropped CSS variables:</summary>
     <ul>
       <li><code>--bs-btn-close-active-border-color</code></li>
@@ -387,10 +638,20 @@ Technically, it means that you can get rid of the following things:
       <li><code>--bs-btn-close-color</code></li>
       <li><code>--bs-btn-close-disabled-color</code></li>
       <li><code>--bs-btn-close-hover-color</code></li>
+      <li><code>--bs-space-scaled-medium</code></li>
+      <li><code>--bs-space-scaled-none</code></li>
+      <li><code>--bs-space-scaled-short</code></li>
+      <li><code>--bs-space-scaled-shorter</code></li>
+      <li><code>--bs-space-scaled-shortest</code></li>
+      <li><code>--bs-space-scaled-smash</code></li>
+      <li><code>--bs-space-scaled-spacious</code></li>
+      <li><code>--bs-space-scaled-tall</code></li>
+      <li><code>--bs-space-scaled-taller</code></li>
+      <li><code>--bs-space-scaled-tallest</code></li>
     </ul>
   </details>
 
-- <details class="mb-2">
+- <details class="mb-short">
     <summary><span class="badge text-bg-danger">Breaking</span> CSS variables only available when <code>$enable-bootstrap-compatibility</code> is on:</summary>
     <ul>
       <li><code>--bs-border-radius</code></li>
@@ -407,14 +668,14 @@ Technically, it means that you can get rid of the following things:
     </ul>
   </details>
 
-- <details class="mb-2">
+- <details class="mb-short">
     <summary><span class="badge text-bg-warning">Warning</span> Dropped Sass mixins:</summary>
     <ul>
       <li><code>make-container-fluid-margin()</code></li>
     </ul>
   </details>
 
-- <details class="mb-2">
+- <details class="mb-short">
     <summary><span class="badge text-bg-danger">Breaking</span> keys in <code>$utilities</code> map only available when <code>$enable-bootstrap-compatibility</code> is on:</summary>
     <ul>
       <li><code>border</code></li>
@@ -424,12 +685,36 @@ Technically, it means that you can get rid of the following things:
       <li><code>border-start</code></li>
       <li><code>border-top</code></li>
       <li><code>border-width</code></li>
+      <li><code>column-gap</code></li>
+      <li><code>gap</code></li>
+      <li><code>margin-bottom</code></li>
+      <li><code>margin-end</code></li>
+      <li><code>margin</code></li>
+      <li><code>margin-start</code></li>
+      <li><code>margin-top</code></li>
+      <li><code>margin-x</code></li>
+      <li><code>margin-y</code></li>
+      <li><code>negative-margin-bottom</code></li>
+      <li><code>negative-margin-end</code></li>
+      <li><code>negative-margin</code></li>
+      <li><code>negative-margin-start</code></li>
+      <li><code>negative-margin-top</code></li>
+      <li><code>negative-margin-x</code></li>
+      <li><code>negative-margin-y</code></li>
       <li><code>opacity</code></li>
+      <li><code>padding-bottom</code></li>
+      <li><code>padding-end</code></li>
+      <li><code>padding</code></li>
+      <li><code>padding-start</code></li>
+      <li><code>padding-top</code></li>
+      <li><code>padding-x</code></li>
+      <li><code>padding-y</code></li>
       <li><code>rounded</code></li>
       <li><code>rounded-bottom</code></li>
       <li><code>rounded-end</code></li>
       <li><code>rounded-start</code></li>
       <li><code>rounded-top</code></li>
+      <li><code>row-gap</code></li>
       <li><code>shadow</code></li>
     </ul>
   </details>
diff --git a/site/content/docs/0.0/migration.md b/site/content/docs/0.0/migration.md
index 30c3b999b6..454d8c58c6 100644
--- a/site/content/docs/0.0/migration.md
+++ b/site/content/docs/0.0/migration.md
@@ -41,13 +41,13 @@ toc: true
 - <span class="badge text-bg-success">New</span> Border width utilities: `.border-none`, `.border-thin`, `.border-medium`, `.border-thick`, and `.border-thicker`.
 
 - <span class="badge text-bg-success">New</span> Border radius utilities with all sizes:
-  - Default: `.rounded`, `.rounded-top`, `.rounded-bottom`, `.rounded-start` and `.rounded-end`.
-  - None: `.rounded-none`, `.rounded-top-none`, `.rounded-bottom-none`, `.rounded-start-none` and `.rounded-end-none`.
-  - Short: `.rounded-short`, `.rounded-top-short`, `.rounded-bottom-short`, `.rounded-start-short` and `.rounded-end-short`.
-  - Medium: `.rounded-medium`, `.rounded-top-medium`, `.rounded-bottom-medium`, `.rounded-start-medium` and `.rounded-end-medium`.
-  - Tall: `.rounded-tall`, `.rounded-top-tall`, `.rounded-bottom-tall`, `.rounded-start-tall` and `.rounded-end-tall`.
-  - Circle: `.rounded-circle`, `.rounded-top-circle`, `.rounded-bottom-circle`, `.rounded-start-circle` and `.rounded-end-circle`.
-  - Pill: `.rounded-pill`, `.rounded-top-pill`, `.rounded-bottom-pill`, `.rounded-start-pill` and `.rounded-end-pill`.
+  - **Default**: `.rounded`, `.rounded-top`, `.rounded-bottom`, `.rounded-start` and `.rounded-end`.
+  - **None**: `.rounded-none`, `.rounded-top-none`, `.rounded-bottom-none`, `.rounded-start-none` and `.rounded-end-none`.
+  - **Short**: `.rounded-short`, `.rounded-top-short`, `.rounded-bottom-short`, `.rounded-start-short` and `.rounded-end-short`.
+  - **Medium**: `.rounded-medium`, `.rounded-top-medium`, `.rounded-bottom-medium`, `.rounded-start-medium` and `.rounded-end-medium`.
+  - **Tall**: `.rounded-tall`, `.rounded-top-tall`, `.rounded-bottom-tall`, `.rounded-start-tall` and `.rounded-end-tall`.
+  - **Circle**: `.rounded-circle`, `.rounded-top-circle`, `.rounded-bottom-circle`, `.rounded-start-circle` and `.rounded-end-circle`.
+  - **Pill**: `.rounded-pill`, `.rounded-top-pill`, `.rounded-bottom-pill`, `.rounded-start-pill` and `.rounded-end-pill`.
 
 - <span class="badge text-bg-success">New</span> Border style utilities: `.border-drag`.
 
@@ -58,7 +58,7 @@ toc: true
 #### Flex
 
 - <span class="badge text-bg-success">New</span> Responsive flex utilities where `breakpoint` is in `|xs|sm|md|lg|xl|2xl|3xl`:
-  `.d-{breakpoint}-flex`, `.d-{breakpoint}-inline-flex`, `.flex-{breakpoint}-{row|column}`, `.flex-{breakpoint}-{row|column}-reverse`, `.justify-content-{breakpoint}-{start|end|center|between|around|evenly}`, `.align-items-{breakpoint}-{start|end|center|baseline|stretch}`, `.align-self-{breakpoint}-{start|end|center|baseline|stretch}`, `.flex-{breakpoint}-fill`, `flex-{breakpoint}-{grow|shrink}-{0|1}`, `.flex-{breakpoint}-{nowrap|wrap|wrap-reverse}`, `.order-{breakpoint}-{number}`, `.order-{breakpoint}-{first|last}` and `.align-content-{breakpoint}-{start|end|center|between|around|stretch}`.
+  `.d-{breakpoint}-flex`, `.d-{breakpoint}-inline-flex`, `.flex-{breakpoint}-{row|column}`, `.flex-{breakpoint}-{row|column}-reverse`, `.justify-content-{breakpoint}-{start|end|center|between|around|evenly}`, `.align-items-{breakpoint}-{start|end|center|baseline|stretch}`, `.align-self-{breakpoint}-{start|end|center|baseline|stretch}`, `.flex-{breakpoint}-fill`, `.flex-{breakpoint}-{grow|shrink}-{0|1}`, `.flex-{breakpoint}-{nowrap|wrap|wrap-reverse}`, `.order-{breakpoint}-{number}`, `.order-{breakpoint}-{first|last}` and `.align-content-{breakpoint}-{start|end|center|between|around|stretch}`.
 
 #### Float
 
@@ -75,7 +75,88 @@ toc: true
 #### Shadow
 
 - <span class="badge text-bg-success">New</span> Shadows utilities:
-  `shadow-none`, `shadow-raised`, `shadow-drag`, `shadow-overlay-default`, `shadow-overlay-emphasized`, `shadow-sticky-default`, `shadow-sticky-emphasized` and `shadow-sticky-navigation-scrolled`.
+  `.shadow-none`, `.shadow-raised`, `.shadow-drag`, `.shadow-overlay-default`, `.shadow-overlay-emphasized`, `.shadow-sticky-default`, `.shadow-sticky-emphasized` and `.shadow-sticky-navigation-scrolled`.
+
+#### Spacings
+
+- <span class="badge text-bg-success">New</span> fixed margin spacing utilities:
+  - **None**: `.m-none`, `.mx-none`, `.my-none`, `.mt-none`, `.mb-none`, `.ms-none`, `.me-none`, `.m-xs-none`, etc...
+  - **Smash**: `.m-smash`, `.mx-smash`, `.my-smash`, `.mt-smash`, `.mb-smash`, `.ms-smash`, `.me-smash`, `.m-xs-smash`, etc...
+  - **Shortest**: `.m-shortest`, `.mx-shortest`, `.my-shortest`, `.mt-shortest`, `.mb-shortest`, `.ms-shortest`, `.me-shortest`, `.m-xs-shortest`, etc...
+  - **Shorter**: `.m-shorter`, `.mx-shorter`, `.my-shorter`, `.mt-shorter`, `.mb-shorter`, `.ms-shorter`, `.me-shorter`, `.m-xs-shorter`, etc...
+  - **Short**: `.m-short`, `.mx-short`, `.my-short`, `.mt-short`, `.mb-short`, `.ms-short`, `.me-short`, `.m-xs-short`, etc...
+  - **Medium**: `.m-medium`, `.mx-medium`, `.my-medium`, `.mt-medium`, `.mb-medium`, `.ms-medium`, `.me-medium`, `.m-xs-medium`, etc...
+  - **Tall**: `.m-tall`, `.mx-tall`, `.my-tall`, `.mt-tall`, `.mb-tall`, `.ms-tall`, `.me-tall`, `.m-xs-tall`, etc...
+  - **Taller**: `.m-taller`, `.mx-taller`, `.my-taller`, `.mt-taller`, `.mb-taller`, `.ms-taller`, `.me-taller`, `.m-xs-taller`, etc...
+  - **Tallest**: `.m-tallest`, `.mx-tallest`, `.my-tallest`, `.mt-tallest`, `.mb-tallest`, `.ms-tallest`, `.me-tallest`, `.m-xs-tallest`, etc...
+  - **Spacious**: `.m-spacious`, `.mx-spacious`, `.my-spacious`, `.mt-spacious`, `.mb-spacious`, `.ms-spacious`, `.me-spacious`, `.m-xs-spacious`, etc...
+  - **Huge**: `.m-huge`, `.mx-huge`, `.my-huge`, `.mt-huge`, `.mb-huge`, `.ms-huge`, `.me-huge`, `.m-xs-huge`, etc...
+  - **Jumbo**: `.m-jumbo`, `.mx-jumbo`, `.my-jumbo`, `.mt-jumbo`, `.mb-jumbo`, `.ms-jumbo`, `.me-jumbo`, `.m-xs-jumbo`, etc...
+  - **Auto**: `.m-auto`, `.mx-auto`, `.my-auto`, `.mt-auto`, `.mb-auto`, `.ms-auto`, `.me-auto`, `.m-xs-auto`, etc...
+
+- <span class="badge text-bg-success">New</span> scaled margin spacing utilities:
+  - **None**: `.m-scaled-none`, `.mx-scaled-none`, `.my-scaled-none`, `.mt-scaled-none`, `.mb-scaled-none`, `.ms-scaled-none`, `.me-scaled-none`,
+  - **Smash**: `.m-scaled-smash`, `.mx-scaled-smash`, `.my-scaled-smash`, `.mt-scaled-smash`, `.mb-scaled-smash`, `.ms-scaled-smash`, `.me-scaled-smash`,
+  - **Shortest**: `.m-scaled-shortest`, `.mx-scaled-shortest`, `.my-scaled-shortest`, `.mt-scaled-shortest`, `.mb-scaled-shortest`, `.ms-scaled-shortest`, `.me-scaled-shortest`,
+  - **Shorter**: `.m-scaled-shorter`, `.mx-scaled-shorter`, `.my-scaled-shorter`, `.mt-scaled-shorter`, `.mb-scaled-shorter`, `.ms-scaled-shorter`, `.me-scaled-shorter`,
+  - **Short**: `.m-scaled-short`, `.mx-scaled-short`, `.my-scaled-short`, `.mt-scaled-short`, `.mb-scaled-short`, `.ms-scaled-short`, `.me-scaled-short`,
+  - **Medium**: `.m-scaled-medium`, `.mx-scaled-medium`, `.my-scaled-medium`, `.mt-scaled-medium`, `.mb-scaled-medium`, `.ms-scaled-medium`, `.me-scaled-medium`,
+  - **Tall**: `.m-scaled-tall`, `.mx-scaled-tall`, `.my-scaled-tall`, `.mt-scaled-tall`, `.mb-scaled-tall`, `.ms-scaled-tall`, `.me-scaled-tall`,
+  - **Taller**: `.m-scaled-taller`, `.mx-scaled-taller`, `.my-scaled-taller`, `.mt-scaled-taller`, `.mb-scaled-taller`, `.ms-scaled-taller`, `.me-scaled-taller`,
+  - **Tallest**: `.m-scaled-tallest`, `.mx-scaled-tallest`, `.my-scaled-tallest`, `.mt-scaled-tallest`, `.mb-scaled-tallest`, `.ms-scaled-tallest`, `.me-scaled-tallest`,
+  - **Spacious**: `.m-scaled-spacious`, `.mx-scaled-spacious`, `.my-scaled-spacious`, `.mt-scaled-spacious`, `.mb-scaled-spacious`, `.ms-scaled-spacious`, `.me-scaled-spacious`
+
+- <span class="badge text-bg-success">New</span> fixed padding spacing utilities:
+  - **None**: `.p-none`, `.px-none`, `.py-none`, `.pt-none`, `.pb-none`, `.ps-none`, `.pe-none`, `.p-xs-none`, etc...
+  - **Smash**: `.p-smash`, `.px-smash`, `.py-smash`, `.pt-smash`, `.pb-smash`, `.ps-smash`, `.pe-smash`, `.p-xs-smash`, etc...
+  - **Shortest**: `.p-shortest`, `.px-shortest`, `.py-shortest`, `.pt-shortest`, `.pb-shortest`, `.ps-shortest`, `.pe-shortest`, `.p-xs-shortest`, etc...
+  - **Shorter**: `.p-shorter`, `.px-shorter`, `.py-shorter`, `.pt-shorter`, `.pb-shorter`, `.ps-shorter`, `.pe-shorter`, `.p-xs-shorter`, etc...
+  - **Short**: `.p-short`, `.px-short`, `.py-short`, `.pt-short`, `.pb-short`, `.ps-short`, `.pe-short`, `.p-xs-short`, etc...
+  - **Medium**: `.p-medium`, `.px-medium`, `.py-medium`, `.pt-medium`, `.pb-medium`, `.ps-medium`, `.pe-medium`, `.p-xs-medium`, etc...
+  - **Tall**: `.p-tall`, `.px-tall`, `.py-tall`, `.pt-tall`, `.pb-tall`, `.ps-tall`, `.pe-tall`, `.p-xs-tall`, etc...
+  - **Taller**: `.p-taller`, `.px-taller`, `.py-taller`, `.pt-taller`, `.pb-taller`, `.ps-taller`, `.pe-taller`, `.p-xs-taller`, etc...
+  - **Tallest**: `.p-tallest`, `.px-tallest`, `.py-tallest`, `.pt-tallest`, `.pb-tallest`, `.ps-tallest`, `.pe-tallest`, `.p-xs-tallest`, etc...
+  - **Spacious**: `.p-spacious`, `.px-spacious`, `.py-spacious`, `.pt-spacious`, `.pb-spacious`, `.ps-spacious`, `.pe-spacious`, `.p-xs-spacious`, etc...
+  - **Huge**: `.p-huge`, `.px-huge`, `.py-huge`, `.pt-huge`, `.pb-huge`, `.ps-huge`, `.pe-huge`, `.p-xs-huge`, etc...
+  - **Jumbo**: `.p-jumbo`, `.px-jumbo`, `.py-jumbo`, `.pt-jumbo`, `.pb-jumbo`, `.ps-jumbo`, `.pe-jumbo`, `.p-xs-jumbo`, etc...
+
+- <span class="badge text-bg-success">New</span> scaled padding spacing utilities:
+  - **None**: `.p-scaled-none`, `.px-scaled-none`, `.py-scaled-none`, `.pt-scaled-none`, `.pb-scaled-none`, `.ps-scaled-none`, `.pe-scaled-none`,
+  - **Smash**: `.p-scaled-smash`, `.px-scaled-smash`, `.py-scaled-smash`, `.pt-scaled-smash`, `.pb-scaled-smash`, `.ps-scaled-smash`, `.pe-scaled-smash`,
+  - **Shortest**: `.p-scaled-shortest`, `.px-scaled-shortest`, `.py-scaled-shortest`, `.pt-scaled-shortest`, `.pb-scaled-shortest`, `.ps-scaled-shortest`, `.pe-scaled-shortest`,
+  - **Shorter**: `.p-scaled-shorter`, `.px-scaled-shorter`, `.py-scaled-shorter`, `.pt-scaled-shorter`, `.pb-scaled-shorter`, `.ps-scaled-shorter`, `.pe-scaled-shorter`,
+  - **Short**: `.p-scaled-short`, `.px-scaled-short`, `.py-scaled-short`, `.pt-scaled-short`, `.pb-scaled-short`, `.ps-scaled-short`, `.pe-scaled-short`,
+  - **Medium**: `.p-scaled-medium`, `.px-scaled-medium`, `.py-scaled-medium`, `.pt-scaled-medium`, `.pb-scaled-medium`, `.ps-scaled-medium`, `.pe-scaled-medium`,
+  - **Tall**: `.p-scaled-tall`, `.px-scaled-tall`, `.py-scaled-tall`, `.pt-scaled-tall`, `.pb-scaled-tall`, `.ps-scaled-tall`, `.pe-scaled-tall`,
+  - **Taller**: `.p-scaled-taller`, `.px-scaled-taller`, `.py-scaled-taller`, `.pt-scaled-taller`, `.pb-scaled-taller`, `.ps-scaled-taller`, `.pe-scaled-taller`,
+  - **Tallest**: `.p-scaled-tallest`, `.px-scaled-tallest`, `.py-scaled-tallest`, `.pt-scaled-tallest`, `.pb-scaled-tallest`, `.ps-scaled-tallest`, `.pe-scaled-tallest`,
+  - **Spacious**: `.p-scaled-spacious`, `.px-scaled-spacious`, `.py-scaled-spacious`, `.pt-scaled-spacious`, `.pb-scaled-spacious`, `.ps-scaled-spacious`, `.pe-scaled-spacious`
+
+- <span class="badge text-bg-success">New</span> fixed gap spacing utilities:
+  - **None**: `.gap-none`, `.row-gap-none`, `.column-gap-none`, `.gap-xs-none`, etc...
+  - **Smash**: `.gap-smash`, `.row-gap-smash`, `.column-gap-smash`, `.gap-xs-smash`, etc...
+  - **Shortest**: `.gap-shortest`, `.row-gap-shortest`, `.column-gap-shortest`, `.gap-xs-shortest`, etc...
+  - **Shorter**: `.gap-shorter`, `.row-gap-shorter`, `.column-gap-shorter`, `.gap-xs-shorter`, etc...
+  - **Short**: `.gap-short`, `.row-gap-short`, `.column-gap-short`, `.gap-xs-short`, etc...
+  - **Medium**: `.gap-medium`, `.row-gap-medium`, `.column-gap-medium`, `.gap-xs-medium`, etc...
+  - **Tall**: `.gap-tall`, `.row-gap-tall`, `.column-gap-tall`, `.gap-xs-tall`, etc...
+  - **Taller**: `.gap-taller`, `.row-gap-taller`, `.column-gap-taller`, `.gap-xs-taller`, etc...
+  - **Tallest**: `.gap-tallest`, `.row-gap-tallest`, `.column-gap-tallest`, `.gap-xs-tallest`, etc...
+  - **Spacious**: `.gap-spacious`, `.row-gap-spacious`, `.column-gap-spacious`, `.gap-xs-spacious`, etc...
+  - **Huge**: `.gap-huge`, `.row-gap-huge`, `.column-gap-huge`, `.gap-xs-huge`, etc...
+  - **Jumbo**: `.gap-jumbo`, `.row-gap-jumbo`, `.column-gap-jumbo`, `.gap-xs-jumbo`, etc...
+
+- <span class="badge text-bg-success">New</span> scaled gap spacing utilities:
+  - **None**: `.gap-scaled-none`, `.row-gap-scaled-none`, `.column-gap-scaled-none`
+  - **Smash**: `.gap-scaled-smash`, `.row-gap-scaled-smash`, `.column-gap-scaled-smash`
+  - **Shortest**: `.gap-scaled-shortest`, `.row-gap-scaled-shortest`, `.column-gap-scaled-shortest`
+  - **Shorter**: `.gap-scaled-shorter`, `.row-gap-scaled-shorter`, `.column-gap-scaled-shorter`
+  - **Short**: `.gap-scaled-short`, `.row-gap-scaled-short`, `.column-gap-scaled-short`
+  - **Medium**: `.gap-scaled-medium`, `.row-gap-scaled-medium`, `.column-gap-scaled-medium`
+  - **Tall**: `.gap-scaled-tall`, `.row-gap-scaled-tall`, `.column-gap-scaled-tall`
+  - **Taller**: `.gap-scaled-taller`, `.row-gap-scaled-taller`, `.column-gap-scaled-taller`
+  - **Tallest**: `.gap-scaled-tallest`, `.row-gap-scaled-tallest`, `.column-gap-scaled-tallest`
+  - **Spacious**: `.gap-scaled-spacious`, `.row-gap-scaled-spacious`, `.column-gap-scaled-spacious`
 
 ### Examples
 
@@ -85,21 +166,21 @@ toc: true
 
 ### CSS and Sass variables
 
-- <span class="badge text-bg-success">New</span> A new file containing maps of token for utilities has been added. If you were using the Sass compilation, you must import this new Sass file before the variables.
+- <span class="badge text-bg-success">New</span> A new file containing composite tokens has been added. If you were using the Sass compilation, you must import the new Sass file between the semantic and component files.
 
-  <details class="mb-3">
+  <details class="mb-tall">
     <summary>See the new import stack</summary>
 
     ```diff
+      @import "tokens/semantic";
+    + @import "tokens/composite";
       @import "tokens/component";
-    + @import "ouds-maps";
-      @import "variables";
     ```
   </details>
 
 - <span class="badge text-bg-success">New</span> `$enable-container-classes` to enable or disable the generation of CSS classes for the grid system (e.g. `.row`, `.col-md-1`, etc.).
 
-- <details class="mb-2">
+- <details class="mb-short">
     <summary><span class="badge text-bg-success">New</span> Sass variables:</summary>
     <ul>
       <li><code>$enable-container-classes</code></li>
@@ -133,6 +214,32 @@ toc: true
       <li><code>$ouds-border-width-thick</code></li>
       <li><code>$ouds-border-width-thicker</code></li>
       <li><code>$ouds-border-width-thin</code></li>
+      <li><code>$ouds-dimension-0</code></li>
+      <li><code>$ouds-dimension-100</code></li>
+      <li><code>$ouds-dimension-1000</code></li>
+      <li><code>$ouds-dimension-1200</code></li>
+      <li><code>$ouds-dimension-1400</code></li>
+      <li><code>$ouds-dimension-150</code></li>
+      <li><code>$ouds-dimension-1600</code></li>
+      <li><code>$ouds-dimension-1800</code></li>
+      <li><code>$ouds-dimension-200</code></li>
+      <li><code>$ouds-dimension-25</code></li>
+      <li><code>$ouds-dimension-250</code></li>
+      <li><code>$ouds-dimension-300</code></li>
+      <li><code>$ouds-dimension-350</code></li>
+      <li><code>$ouds-dimension-400</code></li>
+      <li><code>$ouds-dimension-450</code></li>
+      <li><code>$ouds-dimension-50</code></li>
+      <li><code>$ouds-dimension-500</code></li>
+      <li><code>$ouds-dimension-550</code></li>
+      <li><code>$ouds-dimension-600</code></li>
+      <li><code>$ouds-dimension-650</code></li>
+      <li><code>$ouds-dimension-700</code></li>
+      <li><code>$ouds-dimension-75</code></li>
+      <li><code>$ouds-dimension-750</code></li>
+      <li><code>$ouds-dimension-800</code></li>
+      <li><code>$ouds-dimension-900</code></li>
+      <li><code>$ouds-dimension-base</code></li>
       <li><code>$ouds-elevation-blur-0</code></li>
       <li><code>$ouds-elevation-blur-200</code></li>
       <li><code>$ouds-elevation-blur-300</code></li>
@@ -154,6 +261,12 @@ toc: true
       <li><code>$ouds-elevation-color-sticky-default</code></li>
       <li><code>$ouds-elevation-color-sticky-emphasized</code></li>
       <li><code>$ouds-elevation-color-sticky-navigation-scrolled</code></li>
+      <li><code>$ouds-elevation-drag</code></li>
+      <li><code>$ouds-elevation-focus</code></li>
+      <li><code>$ouds-elevation-none</code></li>
+      <li><code>$ouds-elevation-overlay-default</code></li>
+      <li><code>$ouds-elevation-overlay-emphasized</code></li>
+      <li><code>$ouds-elevation-raised</code></li>
       <li><code>$ouds-elevation-spread-0</code></li>
       <li><code>$ouds-elevation-spread-300</code></li>
       <li><code>$ouds-elevation-spread-drag</code></li>
@@ -166,6 +279,9 @@ toc: true
       <li><code>$ouds-elevation-spread-sticky-default</code></li>
       <li><code>$ouds-elevation-spread-sticky-emphasized</code></li>
       <li><code>$ouds-elevation-spread-sticky-navigation-scrolled</code></li>
+      <li><code>$ouds-elevation-sticky-default</code></li>
+      <li><code>$ouds-elevation-sticky-emphasized</code></li>
+      <li><code>$ouds-elevation-sticky-navigation-scrolled</code></li>
       <li><code>$ouds-elevation-x-0</code></li>
       <li><code>$ouds-elevation-x-drag</code></li>
       <li><code>$ouds-elevation-x-none</code></li>
@@ -238,10 +354,52 @@ toc: true
       <li><code>$ouds-opacity-transparent</code></li>
       <li><code>$ouds-opacity-weak</code></li>
       <li><code>$ouds-opacity-weaker</code></li>
+      <li><code>$ouds-space-fixed-huge</code></li>
+      <li><code>$ouds-space-fixed-jumbo</code></li>
+      <li><code>$ouds-space-fixed-medium</code></li>
+      <li><code>$ouds-space-fixed-none</code></li>
+      <li><code>$ouds-space-fixed-short</code></li>
+      <li><code>$ouds-space-fixed-shorter</code></li>
+      <li><code>$ouds-space-fixed-shortest</code></li>
+      <li><code>$ouds-space-fixed-smash</code></li>
+      <li><code>$ouds-space-fixed-spacious</code></li>
+      <li><code>$ouds-space-fixed-tall</code></li>
+      <li><code>$ouds-space-fixed-taller</code></li>
+      <li><code>$ouds-space-fixed-tallest</code></li>
+      <li><code>$ouds-space-scaled-medium-desktop</code></li>
+      <li><code>$ouds-space-scaled-medium-mobile</code></li>
+      <li><code>$ouds-space-scaled-medium-tablet</code></li>
+      <li><code>$ouds-space-scaled-none-desktop</code></li>
+      <li><code>$ouds-space-scaled-none-mobile</code></li>
+      <li><code>$ouds-space-scaled-none-tablet</code></li>
+      <li><code>$ouds-space-scaled-short-desktop</code></li>
+      <li><code>$ouds-space-scaled-short-mobile</code></li>
+      <li><code>$ouds-space-scaled-short-tablet</code></li>
+      <li><code>$ouds-space-scaled-shorter-desktop</code></li>
+      <li><code>$ouds-space-scaled-shorter-mobile</code></li>
+      <li><code>$ouds-space-scaled-shorter-tablet</code></li>
+      <li><code>$ouds-space-scaled-shortest-desktop</code></li>
+      <li><code>$ouds-space-scaled-shortest-mobile</code></li>
+      <li><code>$ouds-space-scaled-shortest-tablet</code></li>
+      <li><code>$ouds-space-scaled-smash-desktop</code></li>
+      <li><code>$ouds-space-scaled-smash-mobile</code></li>
+      <li><code>$ouds-space-scaled-smash-tablet</code></li>
+      <li><code>$ouds-space-scaled-spacious-desktop</code></li>
+      <li><code>$ouds-space-scaled-spacious-mobile</code></li>
+      <li><code>$ouds-space-scaled-spacious-tablet</code></li>
+      <li><code>$ouds-space-scaled-tall-desktop</code></li>
+      <li><code>$ouds-space-scaled-tall-mobile</code></li>
+      <li><code>$ouds-space-scaled-tall-tablet</code></li>
+      <li><code>$ouds-space-scaled-taller-desktop</code></li>
+      <li><code>$ouds-space-scaled-taller-mobile</code></li>
+      <li><code>$ouds-space-scaled-taller-tablet</code></li>
+      <li><code>$ouds-space-scaled-tallest-desktop</code></li>
+      <li><code>$ouds-space-scaled-tallest-mobile</code></li>
+      <li><code>$ouds-space-scaled-tallest-tablet</code></li>
     </ul>
   </details>
 
-- <details class="mb-2">
+- <details class="mb-short">
     <summary><span class="badge text-bg-success">New</span> Sass maps:</summary>
     <ul>
       <li><code>$container-fluid-margin</code></li>
@@ -252,11 +410,15 @@ toc: true
       <li><code>$ouds-border-radiuses</code></li>
       <li><code>$ouds-border-styles</code></li>
       <li><code>$ouds-border-widths</code></li>
+      <li><code>$ouds-dimension-negative-space-fixed</code></li>
+      <li><code>$ouds-dimension-negative-space-scaled</code></li>
+      <li><code>$ouds-dimension-space-fixed</code></li>
+      <li><code>$ouds-dimension-space-scaled</code></li>
       <li><code>$ouds-elevations</code></li>
     </ul>
   </details>
 
-- <details class="mb-2">
+- <details class="mb-short">
     <summary><span class="badge text-bg-success">New</span> Sass mixins:</summary>
     <ul>
       <li><code>breakpoint-infix()</code></li>
@@ -276,7 +438,7 @@ toc: true
     </ul>
   </details>
 
-- <details class="mb-2">
+- <details class="mb-short">
     <summary><span class="badge text-bg-success">New</span> keys in <code>$utilities</code> map:</summary>
     <ul>
       <li><code>border-bottom-ouds</code></li>
@@ -286,23 +448,71 @@ toc: true
       <li><code>border-style-ouds</code></li>
       <li><code>border-top-ouds</code></li>
       <li><code>border-width-ouds</code></li>
+      <li><code>column-gap-ouds</code></li>
+      <li><code>column-gap-scaled-ouds</code></li>
+      <li><code>gap-ouds</code></li>
+      <li><code>gap-scaled-ouds</code></li>
+      <li><code>margin-bottom-ouds</code></li>
+      <li><code>margin-bottom-scaled-ouds</code></li>
+      <li><code>margin-end-ouds</code></li>
+      <li><code>margin-end-scaled-ouds</code></li>
+      <li><code>margin-ouds</code></li>
+      <li><code>margin-scaled-ouds</code></li>
+      <li><code>margin-start-ouds</code></li>
+      <li><code>margin-start-scaled-ouds</code></li>
+      <li><code>margin-top-ouds</code></li>
+      <li><code>margin-top-scaled-ouds</code></li>
+      <li><code>margin-x-ouds</code></li>
+      <li><code>margin-x-scaled-ouds</code></li>
+      <li><code>margin-y-ouds</code></li>
+      <li><code>margin-y-scaled-ouds</code></li>
+      <li><code>negative-margin-bottom-ouds</code></li>
+      <li><code>negative-margin-bottom-scaled-ouds</code></li>
+      <li><code>negative-margin-end-ouds</code></li>
+      <li><code>negative-margin-end-scaled-ouds</code></li>
+      <li><code>negative-margin-ouds</code></li>
+      <li><code>negative-margin-scaled-ouds</code></li>
+      <li><code>negative-margin-start-ouds</code></li>
+      <li><code>negative-margin-start-scaled-ouds</code></li>
+      <li><code>negative-margin-top-ouds</code></li>
+      <li><code>negative-margin-top-scaled-ouds</code></li>
+      <li><code>negative-margin-x-ouds</code></li>
+      <li><code>negative-margin-x-scaled-ouds</code></li>
+      <li><code>negative-margin-y-ouds</code></li>
+      <li><code>negative-margin-y-scaled-ouds</code></li>
+      <li><code>padding-bottom-ouds</code></li>
+      <li><code>padding-bottom-scaled-ouds</code></li>
+      <li><code>padding-end-ouds</code></li>
+      <li><code>padding-end-scaled-ouds</code></li>
+      <li><code>padding-ouds</code></li>
+      <li><code>padding-scaled-ouds</code></li>
+      <li><code>padding-start-ouds</code></li>
+      <li><code>padding-start-scaled-ouds</code></li>
+      <li><code>padding-top-ouds</code></li>
+      <li><code>padding-top-scaled-ouds</code></li>
+      <li><code>padding-x-ouds</code></li>
+      <li><code>padding-x-scaled-ouds</code></li>
+      <li><code>padding-y-ouds</code></li>
+      <li><code>padding-y-scaled-ouds</code></li>
       <li><code>rounded-bottom-ouds</code></li>
       <li><code>rounded-end-ouds</code></li>
       <li><code>rounded-ouds</code></li>
       <li><code>rounded-start-ouds</code></li>
       <li><code>rounded-top-ouds</code></li>
+      <li><code>row-gap-ouds</code></li>
+      <li><code>row-gap-scaled-ouds</code></li>
       <li><code>shadow-ouds</code></li>
     </ul>
   </details>
 
-- <details class="mb-2">
+- <details class="mb-short">
     <summary><span class="badge text-bg-success">New</span> CSS variable:</summary>
     <ul>
       <li><code>--bs-container-margin-x</code></li>
     </ul>
   </details>
 
-- <details class="mb-2">
+- <details class="mb-short">
     <summary><span class="badge text-bg-danger">Breaking</span> CSS variables only available when <code>$enable-bootstrap-compatibility</code> is on:</summary>
     <ul>
       <li><code>--bs-border-radius</code></li>
@@ -316,10 +526,20 @@ toc: true
       <li><code>--bs-box-shadow-inset</code></li>
       <li><code>--bs-box-shadow-lg</code></li>
       <li><code>--bs-box-shadow-sm</code></li>
+      <li><code>--bs-space-scaled-medium</code></li>
+      <li><code>--bs-space-scaled-none</code></li>
+      <li><code>--bs-space-scaled-short</code></li>
+      <li><code>--bs-space-scaled-shorter</code></li>
+      <li><code>--bs-space-scaled-shortest</code></li>
+      <li><code>--bs-space-scaled-smash</code></li>
+      <li><code>--bs-space-scaled-spacious</code></li>
+      <li><code>--bs-space-scaled-tall</code></li>
+      <li><code>--bs-space-scaled-taller</code></li>
+      <li><code>--bs-space-scaled-tallest</code></li>
     </ul>
   </details>
 
-- <details class="mb-2">
+- <details class="mb-short">
     <summary><span class="badge text-bg-danger">Breaking</span> keys in <code>$utilities</code> map only available when <code>$enable-bootstrap-compatibility</code> is on:</summary>
     <ul>
       <li><code>border</code></li>
@@ -329,11 +549,35 @@ toc: true
       <li><code>border-start</code></li>
       <li><code>border-top</code></li>
       <li><code>border-width</code></li>
+      <li><code>column-gap</code></li>
+      <li><code>gap</code></li>
+      <li><code>margin-bottom</code></li>
+      <li><code>margin-end</code></li>
+      <li><code>margin</code></li>
+      <li><code>margin-start</code></li>
+      <li><code>margin-top</code></li>
+      <li><code>margin-x</code></li>
+      <li><code>margin-y</code></li>
+      <li><code>negative-margin-bottom</code></li>
+      <li><code>negative-margin-end</code></li>
+      <li><code>negative-margin</code></li>
+      <li><code>negative-margin-start</code></li>
+      <li><code>negative-margin-top</code></li>
+      <li><code>negative-margin-x</code></li>
+      <li><code>negative-margin-y</code></li>
+      <li><code>padding-bottom</code></li>
+      <li><code>padding-end</code></li>
+      <li><code>padding</code></li>
+      <li><code>padding-start</code></li>
+      <li><code>padding-top</code></li>
+      <li><code>padding-x</code></li>
+      <li><code>padding-y</code></li>
       <li><code>rounded</code></li>
       <li><code>rounded-bottom</code></li>
       <li><code>rounded-end</code></li>
       <li><code>rounded-start</code></li>
       <li><code>rounded-top</code></li>
+      <li><code>row-gap</code></li>
       <li><code>shadow</code></li>
     </ul>
   </details>
@@ -353,11 +597,11 @@ From now on, by default, OUDS Web won't embed Bootstrap elements (like helpers,
 ### CSS and Sass variables
 
 - <span class="badge text-bg-success">New</span> `$enable-bootstrap-compatibility` option set to `false` by default. This option allows you to compile the Sass files with a Bootstrap compatibility mode.
-  - For instance, without the Bootstrap compatibility mode, you won't have the opacity Bootstrap utilities such as `opacity-0`, `opacity-1`, `opacity-50`, etc. You will only have the OUDS Web utilities such as `opacity-transparent`, `opacity-weaker`, `opacity-weak`, etc. [Learn more about Bootstrap compatibility]({{< docsref "/extend/approach/#bootstrap-compatibility" >}}).
+  - For instance, without the Bootstrap compatibility mode, you won't have the opacity Bootstrap utilities such as `.opacity-0`, `.opacity-1`, `.opacity-50`, etc. You will only have the OUDS Web utilities such as `.opacity-transparent`, `.opacity-weaker`, `.opacity-weak`, etc. [Learn more about Bootstrap compatibility]({{< docsref "/extend/approach/#bootstrap-compatibility" >}}).
 
 - <span class="badge text-bg-success">New</span> OUDS Web fully implements the design tokens. If you were using the Sass compilation, you must import the new Sass files before the variables.
 
-  <details class="mb-3">
+  <details class="mb-tall">
   <summary>See the new import stack</summary>
 
   ```diff
@@ -371,7 +615,7 @@ From now on, by default, OUDS Web won't embed Bootstrap elements (like helpers,
   ```
   </details>
 
-- <details class="mb-2">
+- <details class="mb-short">
     <summary><span class="badge text-bg-success">New</span> Sass variables:</summary>
     <ul>
       <li><code>$ouds-opacity-0</code></li>
@@ -383,21 +627,21 @@ From now on, by default, OUDS Web won't embed Bootstrap elements (like helpers,
     </ul>
   </details>
 
-- <details class="mb-2">
+- <details class="mb-short">
     <summary><span class="badge text-bg-success">New</span> Sass maps:</summary>
     <ul>
       <li><code>$ouds-opacities</code></li>
     </ul>
   </details>
 
-- <details class="mb-2">
+- <details class="mb-short">
     <summary><span class="badge text-bg-success">New</span> keys in <code>$utilities</code> map:</summary>
     <ul>
       <li><code>opacity-ouds</code></li>
     </ul>
   </details>
 
-- <details class="mb-2">
+- <details class="mb-short">
     <summary><span class="badge text-bg-danger">Breaking</span> keys in <code>$utilities</code> map only available when <code>$enable-bootstrap-compatibility</code> is on:</summary>
     <ul>
       <li><code>opacity</code></li>
@@ -406,7 +650,7 @@ From now on, by default, OUDS Web won't embed Bootstrap elements (like helpers,
 
 ## v0.0.1
 
-<hr class="mb-4">
+<hr class="mb-tall">
 
 OUDS Web v0.0.1 has landed, and is based and compatible with Bootstrap v5.3.3.
 
@@ -414,6 +658,6 @@ If you need more details about the changes, please refer to the [v0.0.1 release]
 
 ## v0.0.0
 
-<hr class="mb-4">
+<hr class="mb-tall">
 
 OUDS Web v0.0.0 has landed, and is based and compatible with Bootstrap v5.3.3.
diff --git a/site/content/docs/0.0/utilities/api.md b/site/content/docs/0.0/utilities/api.md
index 0425015bac..8cec871cba 100644
--- a/site/content/docs/0.0/utilities/api.md
+++ b/site/content/docs/0.0/utilities/api.md
@@ -412,8 +412,8 @@ New utilities can be added to the default `$utilities` map with a `map-merge`. M
 @import "ouds-web/scss/functions";
 @import "ouds-web/scss/tokens/raw";
 @import "ouds-web/scss/tokens/semantic";
+@import "ouds-web/scss/tokens/composite";
 @import "ouds-web/scss/tokens/component";
-@import "ouds-web/scss/ouds-maps";
 @import "ouds-web/scss/variables";
 @import "ouds-web/scss/variables-dark";
 @import "ouds-web/scss/maps";
@@ -443,8 +443,8 @@ Modify existing utilities in the default `$utilities` map with `map-get` and `ma
 @import "ouds-web/scss/functions";
 @import "ouds-web/scss/tokens/raw";
 @import "ouds-web/scss/tokens/semantic";
+@import "ouds-web/scss/tokens/composite";
 @import "ouds-web/scss/tokens/component";
-@import "ouds-web/scss/ouds-maps";
 @import "ouds-web/scss/variables";
 @import "ouds-web/scss/variables-dark";
 @import "ouds-web/scss/maps";
@@ -477,8 +477,8 @@ You can enable responsive classes for an existing set of utilities that are not
 @import "ouds-web/scss/functions";
 @import "ouds-web/scss/tokens/raw";
 @import "ouds-web/scss/tokens/semantic";
+@import "ouds-web/scss/tokens/composite";
 @import "ouds-web/scss/tokens/component";
-@import "ouds-web/scss/ouds-maps";
 @import "ouds-web/scss/variables";
 @import "ouds-web/scss/variables-dark";
 @import "ouds-web/scss/maps";
@@ -539,7 +539,7 @@ This will now generate responsive variations of `.border` and `.border-none` for
 }
 ```
 
-<!--#### Rename utilities
+#### Rename utilities
 
 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-*`:
 
@@ -547,8 +547,8 @@ Used to another naming convention? The utilities API can be used to override the
 @import "ouds-web/scss/functions";
 @import "ouds-web/scss/tokens/raw";
 @import "ouds-web/scss/tokens/semantic";
+@import "ouds-web/scss/tokens/composite";
 @import "ouds-web/scss/tokens/component";
-@import "ouds-web/scss/ouds-maps";
 @import "ouds-web/scss/variables";
 @import "ouds-web/scss/variables-dark";
 @import "ouds-web/scss/maps";
@@ -557,15 +557,15 @@ Used to another naming convention? The utilities API can be used to override the
 
 $utilities: map-merge(
   $utilities, (
-    "margin-start": map-merge(
-      map-get($utilities, "margin-start"),
+    "margin-start-ouds": map-merge(
+      map-get($utilities, "margin-start-ouds"),
       ( class: ml ),
     ),
   )
 );
 
 @import "ouds-web/scss/utilities/api";
-```-->
+```
 
 ### Remove utilities
 
@@ -575,8 +575,8 @@ Remove any of the default utilities with the [`map-remove()` Sass function](http
 @import "ouds-web/scss/functions";
 @import "ouds-web/scss/tokens/raw";
 @import "ouds-web/scss/tokens/semantic";
+@import "ouds-web/scss/tokens/composite";
 @import "ouds-web/scss/tokens/component";
-@import "ouds-web/scss/ouds-maps";
 @import "ouds-web/scss/variables";
 @import "ouds-web/scss/variables-dark";
 @import "ouds-web/scss/maps";
@@ -595,8 +595,8 @@ You can also use the [`map-merge()` Sass function](https://sass-lang.com/documen
 @import "ouds-web/scss/functions";
 @import "ouds-web/scss/tokens/raw";
 @import "ouds-web/scss/tokens/semantic";
+@import "ouds-web/scss/tokens/composite";
 @import "ouds-web/scss/tokens/component";
-@import "ouds-web/scss/ouds-maps";
 @import "ouds-web/scss/variables";
 @import "ouds-web/scss/variables-dark";
 @import "ouds-web/scss/maps";
@@ -621,8 +621,8 @@ You can add, remove, and modify many utilities all at once with the [`map-merge(
 @import "ouds-web/scss/functions";
 @import "ouds-web/scss/tokens/raw";
 @import "ouds-web/scss/tokens/semantic";
+@import "ouds-web/scss/tokens/composite";
 @import "ouds-web/scss/tokens/component";
-@import "ouds-web/scss/ouds-maps";
 @import "ouds-web/scss/variables";
 @import "ouds-web/scss/variables-dark";
 @import "ouds-web/scss/maps";
diff --git a/site/content/docs/0.0/utilities/borders.md b/site/content/docs/0.0/utilities/borders.md
index fd7dfde2cb..90dda8de37 100644
--- a/site/content/docs/0.0/utilities/borders.md
+++ b/site/content/docs/0.0/utilities/borders.md
@@ -172,7 +172,7 @@ Border raw tokens as Sass variables. **Not to be used as-is**.
 
 #### Semantic tokens
 
-Border semantic tokens are defined as a Sass map. The border utilities are declared through this map and generated using our utilities API.
+Border semantic tokens are defined as Sass variables.
 
 {{< scss-docs name="ouds-semantic-border" file="scss/tokens/_semantic.scss" >}}
 
@@ -190,7 +190,9 @@ Border semantic tokens are defined as a Sass map. The border utilities are decla
 
 ### Sass maps
 
-{{< scss-docs name="ouds-maps-borders" file="scss/_ouds-maps.scss" >}}
+The border utilities are declared through this map and generated using our utilities API.
+
+{{< scss-docs name="ouds-maps-borders" file="scss/_maps.scss" >}}
 
 <!--Color mode adaptive border colors are also available as a Sass map:
 
diff --git a/site/content/docs/0.0/utilities/display.md b/site/content/docs/0.0/utilities/display.md
index d054b00ae4..d7f773565e 100644
--- a/site/content/docs/0.0/utilities/display.md
+++ b/site/content/docs/0.0/utilities/display.md
@@ -42,13 +42,13 @@ The media queries affect screen widths with the given breakpoint *or larger*. Fo
 <!--## Examples
 
 {{< example >}}
-<div class="d-inline p-2 text-bg-primary">d-inline</div>
-<div class="d-inline p-2 text-bg-dark">d-inline</div>
+<div class="d-inline p-short text-bg-primary">d-inline</div>
+<div class="d-inline p-short text-bg-dark">d-inline</div>
 {{< /example >}}
 
 {{< example >}}
-<span class="d-block p-2 text-bg-primary">d-block</span>
-<span class="d-block p-2 text-bg-dark">d-block</span>
+<span class="d-block p-short text-bg-primary">d-block</span>
+<span class="d-block p-short text-bg-dark">d-block</span>
 {{< /example >}}-->
 
 ## Hiding elements
diff --git a/site/content/docs/0.0/utilities/flex.md b/site/content/docs/0.0/utilities/flex.md
index 63d5b78e41..e1847f0158 100644
--- a/site/content/docs/0.0/utilities/flex.md
+++ b/site/content/docs/0.0/utilities/flex.md
@@ -13,11 +13,11 @@ toc: true
 Apply `display` utilities to create a flexbox container and transform **direct children elements** into flex items. Flex containers and items are able to be modified further with additional flex properties.
 
 {{< example class="bd-example-flex" >}}
-<div class="d-flex p-2">I'm a flexbox container!</div>
+<div class="d-flex p-short">I'm a flexbox container!</div>
 {{< /example >}}
 
 {{< example class="bd-example-flex" >}}
-<div class="d-inline-flex p-2">I'm an inline flexbox container!</div>
+<div class="d-inline-flex p-short">I'm an inline flexbox container!</div>
 {{< /example >}}
 
 Responsive variations also exist for `.d-flex` and `.d-inline-flex`.
@@ -38,30 +38,30 @@ Set the direction of flex items in a flex container with direction utilities. In
 Use `.flex-row` to set a horizontal direction (the browser default), or `.flex-row-reverse` to start the horizontal direction from the opposite side.
 
 {{< example class="bd-example-flex" >}}
-<div class="d-flex flex-row mb-3">
-  <div class="p-2">Flex item 1</div>
-  <div class="p-2">Flex item 2</div>
-  <div class="p-2">Flex item 3</div>
+<div class="d-flex flex-row mb-tall">
+  <div class="p-short">Flex item 1</div>
+  <div class="p-short">Flex item 2</div>
+  <div class="p-short">Flex item 3</div>
 </div>
 <div class="d-flex flex-row-reverse">
-  <div class="p-2">Flex item 1</div>
-  <div class="p-2">Flex item 2</div>
-  <div class="p-2">Flex item 3</div>
+  <div class="p-short">Flex item 1</div>
+  <div class="p-short">Flex item 2</div>
+  <div class="p-short">Flex item 3</div>
 </div>
 {{< /example >}}
 
 Use `.flex-column` to set a vertical direction, or `.flex-column-reverse`  to start the vertical direction from the opposite side.
 
 {{< example class="bd-example-flex" >}}
-<div class="d-flex flex-column mb-3">
-  <div class="p-2">Flex item 1</div>
-  <div class="p-2">Flex item 2</div>
-  <div class="p-2">Flex item 3</div>
+<div class="d-flex flex-column mb-tall">
+  <div class="p-short">Flex item 1</div>
+  <div class="p-short">Flex item 2</div>
+  <div class="p-short">Flex item 3</div>
 </div>
 <div class="d-flex flex-column-reverse">
-  <div class="p-2">Flex item 1</div>
-  <div class="p-2">Flex item 2</div>
-  <div class="p-2">Flex item 3</div>
+  <div class="p-short">Flex item 1</div>
+  <div class="p-short">Flex item 2</div>
+  <div class="p-short">Flex item 3</div>
 </div>
 {{< /example >}}
 
@@ -83,35 +83,35 @@ Responsive variations also exist for `flex-direction`.
 Use `justify-content` utilities on flexbox containers to change the alignment of flex items on the main axis (the x-axis to start, y-axis if `flex-direction: column`). Choose from `start` (browser default), `end`, `center`, `between`, `around`, or `evenly`.
 
 <div class="bd-example bd-example-flex">
-  <div class="d-flex justify-content-start mb-3">
-    <div class="p-2 bd-highlight">Justify</div>
-    <div class="p-2 bd-highlight">Content</div>
-    <div class="p-2 bd-highlight">Start</div>
+  <div class="d-flex justify-content-start mb-tall">
+    <div class="p-short bd-highlight">Justify</div>
+    <div class="p-short bd-highlight">Content</div>
+    <div class="p-short bd-highlight">Start</div>
   </div>
-  <div class="d-flex justify-content-end mb-3">
-    <div class="p-2 bd-highlight">Justify</div>
-    <div class="p-2 bd-highlight">Content</div>
-    <div class="p-2 bd-highlight">End</div>
+  <div class="d-flex justify-content-end mb-tall">
+    <div class="p-short bd-highlight">Justify</div>
+    <div class="p-short bd-highlight">Content</div>
+    <div class="p-short bd-highlight">End</div>
   </div>
-  <div class="d-flex justify-content-center mb-3">
-    <div class="p-2 bd-highlight">Justify</div>
-    <div class="p-2 bd-highlight">Content</div>
-    <div class="p-2 bd-highlight">Center</div>
+  <div class="d-flex justify-content-center mb-tall">
+    <div class="p-short bd-highlight">Justify</div>
+    <div class="p-short bd-highlight">Content</div>
+    <div class="p-short bd-highlight">Center</div>
   </div>
-  <div class="d-flex justify-content-between mb-3">
-    <div class="p-2 bd-highlight">Justify</div>
-    <div class="p-2 bd-highlight">Content</div>
-    <div class="p-2 bd-highlight">Between</div>
+  <div class="d-flex justify-content-between mb-tall">
+    <div class="p-short bd-highlight">Justify</div>
+    <div class="p-short bd-highlight">Content</div>
+    <div class="p-short bd-highlight">Between</div>
   </div>
-  <div class="d-flex justify-content-around mb-3">
-    <div class="p-2 bd-highlight">Justify</div>
-    <div class="p-2 bd-highlight">Content</div>
-    <div class="p-2 bd-highlight">Around</div>
+  <div class="d-flex justify-content-around mb-tall">
+    <div class="p-short bd-highlight">Justify</div>
+    <div class="p-short bd-highlight">Content</div>
+    <div class="p-short bd-highlight">Around</div>
   </div>
   <div class="d-flex justify-content-evenly">
-    <div class="p-2 bd-highlight">Justify</div>
-    <div class="p-2 bd-highlight">Content</div>
-    <div class="p-2 bd-highlight">Evenly</div>
+    <div class="p-short bd-highlight">Justify</div>
+    <div class="p-short bd-highlight">Content</div>
+    <div class="p-short bd-highlight">Evenly</div>
   </div>
 </div>
 
@@ -144,30 +144,30 @@ Responsive variations also exist for `justify-content`.
 Use `align-items` utilities on flexbox containers to change the alignment of flex items on the cross axis (the y-axis to start, x-axis if `flex-direction: column`). Choose from `start`, `end`, `center`, `baseline`, or `stretch` (browser default).
 
 <div class="bd-example bd-example-flex">
-  <div class="d-flex align-items-start mb-3" style="height: 100px">
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
+  <div class="d-flex align-items-start mb-tall" style="height: 100px">
+    <div class="p-short">Flex item</div>
+    <div class="p-short">Flex item</div>
+    <div class="p-short">Flex item</div>
   </div>
-  <div class="d-flex align-items-end mb-3" style="height: 100px">
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
+  <div class="d-flex align-items-end mb-tall" style="height: 100px">
+    <div class="p-short">Flex item</div>
+    <div class="p-short">Flex item</div>
+    <div class="p-short">Flex item</div>
   </div>
-  <div class="d-flex align-items-center mb-3" style="height: 100px">
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
+  <div class="d-flex align-items-center mb-tall" style="height: 100px">
+    <div class="p-short">Flex item</div>
+    <div class="p-short">Flex item</div>
+    <div class="p-short">Flex item</div>
   </div>
-  <div class="d-flex align-items-baseline mb-3" style="height: 100px">
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
+  <div class="d-flex align-items-baseline mb-tall" style="height: 100px">
+    <div class="p-short">Flex item</div>
+    <div class="p-short">Flex item</div>
+    <div class="p-short">Flex item</div>
   </div>
   <div class="d-flex align-items-stretch" style="height: 100px">
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
+    <div class="p-short">Flex item</div>
+    <div class="p-short">Flex item</div>
+    <div class="p-short">Flex item</div>
   </div>
 </div>
 
@@ -198,30 +198,30 @@ Responsive variations also exist for `align-items`.
 Use `align-self` utilities on flexbox items to individually change their alignment on the cross axis (the y-axis to start, x-axis if `flex-direction: column`). Choose from the same options as `align-items`: `start`, `end`, `center`, `baseline`, or `stretch` (browser default).
 
 <div class="bd-example bd-example-flex">
-  <div class="d-flex mb-3" style="height: 100px">
-    <div class="p-2">Flex item</div>
-    <div class="align-self-start p-2">Aligned flex item</div>
-    <div class="p-2">Flex item</div>
+  <div class="d-flex mb-tall" style="height: 100px">
+    <div class="p-short">Flex item</div>
+    <div class="align-self-start p-short">Aligned flex item</div>
+    <div class="p-short">Flex item</div>
   </div>
-  <div class="d-flex mb-3" style="height: 100px">
-    <div class="p-2">Flex item</div>
-    <div class="align-self-end p-2">Aligned flex item</div>
-    <div class="p-2">Flex item</div>
+  <div class="d-flex mb-tall" style="height: 100px">
+    <div class="p-short">Flex item</div>
+    <div class="align-self-end p-short">Aligned flex item</div>
+    <div class="p-short">Flex item</div>
   </div>
-  <div class="d-flex mb-3" style="height: 100px">
-    <div class="p-2">Flex item</div>
-    <div class="align-self-center p-2">Aligned flex item</div>
-    <div class="p-2">Flex item</div>
+  <div class="d-flex mb-tall" style="height: 100px">
+    <div class="p-short">Flex item</div>
+    <div class="align-self-center p-short">Aligned flex item</div>
+    <div class="p-short">Flex item</div>
   </div>
-  <div class="d-flex mb-3" style="height: 100px">
-    <div class="p-2">Flex item</div>
-    <div class="align-self-baseline p-2">Aligned flex item</div>
-    <div class="p-2">Flex item</div>
+  <div class="d-flex mb-tall" style="height: 100px">
+    <div class="p-short">Flex item</div>
+    <div class="align-self-baseline p-short">Aligned flex item</div>
+    <div class="p-short">Flex item</div>
   </div>
   <div class="d-flex" style="height: 100px">
-    <div class="p-2">Flex item</div>
-    <div class="align-self-stretch p-2">Aligned flex item</div>
-    <div class="p-2">Flex item</div>
+    <div class="p-short">Flex item</div>
+    <div class="align-self-stretch p-short">Aligned flex item</div>
+    <div class="p-short">Flex item</div>
   </div>
 </div>
 
@@ -253,9 +253,9 @@ Use the `.flex-fill` class on a series of sibling elements to force them into wi
 
 {{< example class="bd-example-flex" >}}
 <div class="d-flex">
-  <div class="p-2 flex-fill">Flex item with a lot of content</div>
-  <div class="p-2 flex-fill">Flex item</div>
-  <div class="p-2 flex-fill">Flex item</div>
+  <div class="p-short flex-fill">Flex item with a lot of content</div>
+  <div class="p-short flex-fill">Flex item</div>
+  <div class="p-short flex-fill">Flex item</div>
 </div>
 {{< /example >}}
 
@@ -275,9 +275,9 @@ Use `.flex-grow-*` utilities to toggle a flex item's ability to grow to fill ava
 
 {{< example class="bd-example-flex" >}}
 <div class="d-flex">
-  <div class="p-2 flex-grow-1">Flex item</div>
-  <div class="p-2">Flex item</div>
-  <div class="p-2">Third flex item</div>
+  <div class="p-short flex-grow-1">Flex item</div>
+  <div class="p-short">Flex item</div>
+  <div class="p-short">Third flex item</div>
 </div>
 {{< /example >}}
 
@@ -285,8 +285,8 @@ Use `.flex-shrink-*` utilities to toggle a flex item's ability to shrink if nece
 
 {{< example class="bd-example-flex" >}}
 <div class="d-flex">
-  <div class="p-2 w-100">Flex item</div>
-  <div class="p-2 flex-shrink-1">Flex item</div>
+  <div class="p-short w-100">Flex item</div>
+  <div class="p-short flex-shrink-1">Flex item</div>
 </div>
 {{< /example >}}
 
@@ -306,22 +306,22 @@ Responsive variations also exist for `flex-grow` and `flex-shrink`.
 Flexbox can do some pretty awesome things when you mix flex alignments with auto margins. Shown below are three examples of controlling flex items via auto margins: default (no auto margin), pushing two items to the right (`.me-auto`), and pushing two items to the left (`.ms-auto`).
 
 {{< example class="bd-example-flex" >}}
-<div class="d-flex mb-3">
-  <div class="p-2">Flex item</div>
-  <div class="p-2">Flex item</div>
-  <div class="p-2">Flex item</div>
+<div class="d-flex mb-tall">
+  <div class="p-short">Flex item</div>
+  <div class="p-short">Flex item</div>
+  <div class="p-short">Flex item</div>
 </div>
 
-<div class="d-flex mb-3">
-  <div class="me-auto p-2">Flex item</div>
-  <div class="p-2">Flex item</div>
-  <div class="p-2">Flex item</div>
+<div class="d-flex mb-tall">
+  <div class="me-auto p-short">Flex item</div>
+  <div class="p-short">Flex item</div>
+  <div class="p-short">Flex item</div>
 </div>
 
-<div class="d-flex mb-3">
-  <div class="p-2">Flex item</div>
-  <div class="p-2">Flex item</div>
-  <div class="ms-auto p-2">Flex item</div>
+<div class="d-flex mb-tall">
+  <div class="p-short">Flex item</div>
+  <div class="p-short">Flex item</div>
+  <div class="ms-auto p-short">Flex item</div>
 </div>
 {{< /example >}}
 
@@ -330,16 +330,16 @@ Flexbox can do some pretty awesome things when you mix flex alignments with auto
 Vertically move one flex item to the top or bottom of a container by mixing `align-items`, `flex-direction: column`, and `margin-top: auto` or `margin-bottom: auto`.
 
 {{< example class="bd-example-flex" >}}
-<div class="d-flex align-items-start flex-column mb-3" style="height: 200px;">
-  <div class="mb-auto p-2">Flex item</div>
-  <div class="p-2">Flex item</div>
-  <div class="p-2">Flex item</div>
+<div class="d-flex align-items-start flex-column mb-tall" style="height: 200px;">
+  <div class="mb-auto p-short">Flex item</div>
+  <div class="p-short">Flex item</div>
+  <div class="p-short">Flex item</div>
 </div>
 
-<div class="d-flex align-items-end flex-column mb-3" style="height: 200px;">
-  <div class="p-2">Flex item</div>
-  <div class="p-2">Flex item</div>
-  <div class="mt-auto p-2">Flex item</div>
+<div class="d-flex align-items-end flex-column mb-tall" style="height: 200px;">
+  <div class="p-short">Flex item</div>
+  <div class="p-short">Flex item</div>
+  <div class="mt-auto p-short">Flex item</div>
 </div>
 {{< /example >}}
 
@@ -349,11 +349,11 @@ Change how flex items wrap in a flex container. Choose from no wrapping at all (
 
 <div class="bd-example bd-example-flex">
   <div class="d-flex flex-nowrap" style="width: 8rem;">
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
+    <div class="p-short">Flex item</div>
+    <div class="p-short">Flex item</div>
+    <div class="p-short">Flex item</div>
+    <div class="p-short">Flex item</div>
+    <div class="p-short">Flex item</div>
   </div>
 </div>
 
@@ -365,20 +365,20 @@ Change how flex items wrap in a flex container. Choose from no wrapping at all (
 
 <div class="bd-example bd-example-flex">
   <div class="d-flex flex-wrap">
-    <div class="p-2">Flex item 1</div>
-    <div class="p-2">Flex item 2</div>
-    <div class="p-2">Flex item 3</div>
-    <div class="p-2">Flex item 4</div>
-    <div class="p-2">Flex item 5</div>
-    <div class="p-2">Flex item 6</div>
-    <div class="p-2">Flex item 7</div>
-    <div class="p-2">Flex item 8</div>
-    <div class="p-2">Flex item 9</div>
-    <div class="p-2">Flex item 10</div>
-    <div class="p-2">Flex item 11</div>
-    <div class="p-2">Flex item 12</div>
-    <div class="p-2">Flex item 13</div>
-    <div class="p-2">Flex item 14</div>
+    <div class="p-short">Flex item 1</div>
+    <div class="p-short">Flex item 2</div>
+    <div class="p-short">Flex item 3</div>
+    <div class="p-short">Flex item 4</div>
+    <div class="p-short">Flex item 5</div>
+    <div class="p-short">Flex item 6</div>
+    <div class="p-short">Flex item 7</div>
+    <div class="p-short">Flex item 8</div>
+    <div class="p-short">Flex item 9</div>
+    <div class="p-short">Flex item 10</div>
+    <div class="p-short">Flex item 11</div>
+    <div class="p-short">Flex item 12</div>
+    <div class="p-short">Flex item 13</div>
+    <div class="p-short">Flex item 14</div>
   </div>
 </div>
 
@@ -390,20 +390,20 @@ Change how flex items wrap in a flex container. Choose from no wrapping at all (
 
 <div class="bd-example bd-example-flex">
   <div class="d-flex flex-wrap-reverse">
-    <div class="p-2">Flex item 1</div>
-    <div class="p-2">Flex item 2</div>
-    <div class="p-2">Flex item 3</div>
-    <div class="p-2">Flex item 4</div>
-    <div class="p-2">Flex item 5</div>
-    <div class="p-2">Flex item 6</div>
-    <div class="p-2">Flex item 7</div>
-    <div class="p-2">Flex item 8</div>
-    <div class="p-2">Flex item 9</div>
-    <div class="p-2">Flex item 10</div>
-    <div class="p-2">Flex item 11</div>
-    <div class="p-2">Flex item 12</div>
-    <div class="p-2">Flex item 13</div>
-    <div class="p-2">Flex item 14</div>
+    <div class="p-short">Flex item 1</div>
+    <div class="p-short">Flex item 2</div>
+    <div class="p-short">Flex item 3</div>
+    <div class="p-short">Flex item 4</div>
+    <div class="p-short">Flex item 5</div>
+    <div class="p-short">Flex item 6</div>
+    <div class="p-short">Flex item 7</div>
+    <div class="p-short">Flex item 8</div>
+    <div class="p-short">Flex item 9</div>
+    <div class="p-short">Flex item 10</div>
+    <div class="p-short">Flex item 11</div>
+    <div class="p-short">Flex item 12</div>
+    <div class="p-short">Flex item 13</div>
+    <div class="p-short">Flex item 14</div>
   </div>
 </div>
 
@@ -432,9 +432,9 @@ Change the _visual_ order of specific flex items with a handful of `order` utili
 
 {{< example class="bd-example-flex" >}}
 <div class="d-flex flex-nowrap">
-  <div class="order-3 p-2">First flex item</div>
-  <div class="order-2 p-2">Second flex item</div>
-  <div class="order-1 p-2">Third flex item</div>
+  <div class="order-3 p-short">First flex item</div>
+  <div class="order-2 p-short">Second flex item</div>
+  <div class="order-1 p-short">Third flex item</div>
 </div>
 {{< /example >}}
 
@@ -469,22 +469,22 @@ Use `align-content` utilities on flexbox containers to align flex items _togethe
 **Heads up!** This property has no effect on single rows of flex items.
 
 <div class="bd-example bd-example-flex">
-  <div class="d-flex align-content-start flex-wrap mb-3" style="height: 200px">
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
+  <div class="d-flex align-content-start flex-wrap mb-tall" style="height: 200px">
+    <div class="p-short">Flex item</div>
+    <div class="p-short">Flex item</div>
+    <div class="p-short">Flex item</div>
+    <div class="p-short">Flex item</div>
+    <div class="p-short">Flex item</div>
+    <div class="p-short">Flex item</div>
+    <div class="p-short">Flex item</div>
+    <div class="p-short">Flex item</div>
+    <div class="p-short">Flex item</div>
+    <div class="p-short">Flex item</div>
+    <div class="p-short">Flex item</div>
+    <div class="p-short">Flex item</div>
+    <div class="p-short">Flex item</div>
+    <div class="p-short">Flex item</div>
+    <div class="p-short">Flex item</div>
   </div>
 </div>
 
@@ -495,22 +495,22 @@ Use `align-content` utilities on flexbox containers to align flex items _togethe
 ```
 
 <div class="bd-example bd-example-flex">
-  <div class="d-flex align-content-end flex-wrap mb-3" style="height: 200px">
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
+  <div class="d-flex align-content-end flex-wrap mb-tall" style="height: 200px">
+    <div class="p-short">Flex item</div>
+    <div class="p-short">Flex item</div>
+    <div class="p-short">Flex item</div>
+    <div class="p-short">Flex item</div>
+    <div class="p-short">Flex item</div>
+    <div class="p-short">Flex item</div>
+    <div class="p-short">Flex item</div>
+    <div class="p-short">Flex item</div>
+    <div class="p-short">Flex item</div>
+    <div class="p-short">Flex item</div>
+    <div class="p-short">Flex item</div>
+    <div class="p-short">Flex item</div>
+    <div class="p-short">Flex item</div>
+    <div class="p-short">Flex item</div>
+    <div class="p-short">Flex item</div>
   </div>
 </div>
 
@@ -519,22 +519,22 @@ Use `align-content` utilities on flexbox containers to align flex items _togethe
 ```
 
 <div class="bd-example bd-example-flex">
-  <div class="d-flex align-content-center flex-wrap mb-3" style="height: 200px">
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
+  <div class="d-flex align-content-center flex-wrap mb-tall" style="height: 200px">
+    <div class="p-short">Flex item</div>
+    <div class="p-short">Flex item</div>
+    <div class="p-short">Flex item</div>
+    <div class="p-short">Flex item</div>
+    <div class="p-short">Flex item</div>
+    <div class="p-short">Flex item</div>
+    <div class="p-short">Flex item</div>
+    <div class="p-short">Flex item</div>
+    <div class="p-short">Flex item</div>
+    <div class="p-short">Flex item</div>
+    <div class="p-short">Flex item</div>
+    <div class="p-short">Flex item</div>
+    <div class="p-short">Flex item</div>
+    <div class="p-short">Flex item</div>
+    <div class="p-short">Flex item</div>
   </div>
 </div>
 
@@ -543,22 +543,22 @@ Use `align-content` utilities on flexbox containers to align flex items _togethe
 ```
 
 <div class="bd-example bd-example-flex">
-  <div class="d-flex align-content-between flex-wrap mb-3" style="height: 200px">
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
+  <div class="d-flex align-content-between flex-wrap mb-tall" style="height: 200px">
+    <div class="p-short">Flex item</div>
+    <div class="p-short">Flex item</div>
+    <div class="p-short">Flex item</div>
+    <div class="p-short">Flex item</div>
+    <div class="p-short">Flex item</div>
+    <div class="p-short">Flex item</div>
+    <div class="p-short">Flex item</div>
+    <div class="p-short">Flex item</div>
+    <div class="p-short">Flex item</div>
+    <div class="p-short">Flex item</div>
+    <div class="p-short">Flex item</div>
+    <div class="p-short">Flex item</div>
+    <div class="p-short">Flex item</div>
+    <div class="p-short">Flex item</div>
+    <div class="p-short">Flex item</div>
   </div>
 </div>
 
@@ -567,22 +567,22 @@ Use `align-content` utilities on flexbox containers to align flex items _togethe
 ```
 
 <div class="bd-example bd-example-flex">
-  <div class="d-flex align-content-around flex-wrap mb-3" style="height: 200px">
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
+  <div class="d-flex align-content-around flex-wrap mb-tall" style="height: 200px">
+    <div class="p-short">Flex item</div>
+    <div class="p-short">Flex item</div>
+    <div class="p-short">Flex item</div>
+    <div class="p-short">Flex item</div>
+    <div class="p-short">Flex item</div>
+    <div class="p-short">Flex item</div>
+    <div class="p-short">Flex item</div>
+    <div class="p-short">Flex item</div>
+    <div class="p-short">Flex item</div>
+    <div class="p-short">Flex item</div>
+    <div class="p-short">Flex item</div>
+    <div class="p-short">Flex item</div>
+    <div class="p-short">Flex item</div>
+    <div class="p-short">Flex item</div>
+    <div class="p-short">Flex item</div>
   </div>
 </div>
 
@@ -591,22 +591,22 @@ Use `align-content` utilities on flexbox containers to align flex items _togethe
 ```
 
 <div class="bd-example bd-example-flex">
-  <div class="d-flex align-content-stretch flex-wrap mb-3" style="height: 200px">
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
-    <div class="p-2">Flex item</div>
+  <div class="d-flex align-content-stretch flex-wrap mb-tall" style="height: 200px">
+    <div class="p-short">Flex item</div>
+    <div class="p-short">Flex item</div>
+    <div class="p-short">Flex item</div>
+    <div class="p-short">Flex item</div>
+    <div class="p-short">Flex item</div>
+    <div class="p-short">Flex item</div>
+    <div class="p-short">Flex item</div>
+    <div class="p-short">Flex item</div>
+    <div class="p-short">Flex item</div>
+    <div class="p-short">Flex item</div>
+    <div class="p-short">Flex item</div>
+    <div class="p-short">Flex item</div>
+    <div class="p-short">Flex item</div>
+    <div class="p-short">Flex item</div>
+    <div class="p-short">Flex item</div>
   </div>
 </div>
 
@@ -638,7 +638,7 @@ Looking to replicate the [media object component](https://getbootstrap.com/docs/
   <div class="flex-shrink-0">
     {{< placeholder width="100" height="100" color="#999" background="#e5e5e5" text="icon" >}}
   </div>
-  <div class="flex-grow-1 ms-3">
+  <div class="flex-grow-1 ms-tall">
     This is some content from a media component. You can replace this with any content and adjust it as needed.
   </div>
 </div>
@@ -651,7 +651,7 @@ And say you want to vertically center the content next to the image:
   <div class="flex-shrink-0">
     {{< placeholder width="100" height="100" color="#999" background="#e5e5e5" text="icon" >}}
   </div>
-  <div class="flex-grow-1 ms-3">
+  <div class="flex-grow-1 ms-tall">
     This is some content from a media component. You can replace this with any content and adjust it as needed.
   </div>
 </div>
diff --git a/site/content/docs/0.0/utilities/opacity.md b/site/content/docs/0.0/utilities/opacity.md
index 35e5f95c99..60eeec3d62 100644
--- a/site/content/docs/0.0/utilities/opacity.md
+++ b/site/content/docs/0.0/utilities/opacity.md
@@ -13,12 +13,12 @@ The `opacity` property sets the opacity level for an element. The opacity level
 Set the opacity of an element using `.opacity-{value}` utilities.
 
 <div class="bd-example d-sm-flex">
-  <div class="opacity-opaque p-3 m-2 bg-primary fw-bold"></div>
-  <div class="opacity-strong p-3 m-2 bg-primary fw-bold"></div>
-  <div class="opacity-medium p-3 m-2 bg-primary fw-bold"></div>
-  <div class="opacity-weak p-3 m-2 bg-primary fw-bold"></div>
-  <div class="opacity-weaker p-3 m-2 bg-primary fw-bold"></div>
-  <div class="opacity-transparent p-3 m-2 bg-primary fw-bold"></div>
+  <div class="opacity-opaque p-tall m-short bg-primary fw-bold"></div>
+  <div class="opacity-strong p-tall m-short bg-primary fw-bold"></div>
+  <div class="opacity-medium p-tall m-short bg-primary fw-bold"></div>
+  <div class="opacity-weak p-tall m-short bg-primary fw-bold"></div>
+  <div class="opacity-weaker p-tall m-short bg-primary fw-bold"></div>
+  <div class="opacity-transparent p-tall m-short bg-primary fw-bold"></div>
 </div>
 
 ```html
@@ -41,11 +41,11 @@ Set the `opacity` of an element using `.opacity-{value}` utilities.
   - Removed div text content to avoid a11y issue with semi-transparent text
 -->
 <div class="bd-example d-sm-flex">
-  <div class="opacity-100 p-3 m-2 bg-primary fw-bold"></div>
-  <div class="opacity-75 p-3 m-2 bg-primary fw-bold"></div>
-  <div class="opacity-50 p-3 m-2 bg-primary fw-bold"></div>
-  <div class="opacity-25 p-3 m-2 bg-primary fw-bold"></div>
-  <div class="opacity-0 p-3 m-2 bg-primary fw-bold"></div>
+  <div class="opacity-100 p-tall m-short bg-primary fw-bold"></div>
+  <div class="opacity-75 p-tall m-short bg-primary fw-bold"></div>
+  <div class="opacity-50 p-tall m-short bg-primary fw-bold"></div>
+  <div class="opacity-25 p-tall m-short bg-primary fw-bold"></div>
+  <div class="opacity-0 p-tall m-short bg-primary fw-bold"></div>
 </div>
 
 ```html
@@ -69,13 +69,15 @@ Opacity raw tokens as Sass variables. **Not to be used as-is**.
 
 #### Semantic tokens
 
-Opacity semantic tokens are defined as a Sass map. The opacity utilities are declared through this map and generated using our utilities API.
+Opacity semantic tokens are defined as Sass variables.
 
 {{< scss-docs name="ouds-semantic-opacity" file="scss/tokens/_semantic.scss" >}}
 
 ### Sass maps
 
-{{< scss-docs name="ouds-maps-opacities" file="scss/_ouds-maps.scss" >}}
+The opacity utilities are declared through this map and generated using our utilities API.
+
+{{< scss-docs name="ouds-maps-opacities" file="scss/_maps.scss" >}}
 
 ### Sass utilities API
 
diff --git a/site/content/docs/0.0/utilities/overflow.md b/site/content/docs/0.0/utilities/overflow.md
index e5d0f2e61a..0bd0ae6407 100644
--- a/site/content/docs/0.0/utilities/overflow.md
+++ b/site/content/docs/0.0/utilities/overflow.md
@@ -13,16 +13,16 @@ aliases:
 Adjust the `overflow` property on the fly with four default values and classes. These classes are not responsive by default.
 
 <div class="bd-example d-md-flex">
-  <div class="overflow-auto p-3 mb-3 mb-md-0 me-md-3 border" style="max-width: 260px; max-height: 100px;" tabindex="0">
+  <div class="overflow-auto p-tall mb-tall mb-md-none me-md-tall border" style="max-width: 260px; max-height: 100px;" tabindex="0">
     This is an example of using <code>.overflow-auto</code> on an element with set width and height dimensions. By design, this content will vertically scroll.
   </div>
-  <div class="overflow-hidden p-3 mb-3 mb-md-0 me-md-3 border" style="max-width: 260px; max-height: 100px;">
+  <div class="overflow-hidden p-tall mb-tall mb-md-none me-md-tall border" style="max-width: 260px; max-height: 100px;">
     This is an example of using <code>.overflow-hidden</code> on an element with set width and height dimensions.
   </div>
-  <div class="overflow-visible p-3 mb-3 mb-md-0 me-md-3 border" style="max-width: 260px; max-height: 100px;">
+  <div class="overflow-visible p-tall mb-tall mb-md-none me-md-tall border" style="max-width: 260px; max-height: 100px;">
     This is an example of using <code>.overflow-visible</code> on an element with set width and height dimensions.
   </div>
-  <div class="overflow-scroll p-3 border" style="max-width: 260px; max-height: 100px;" tabindex="0">
+  <div class="overflow-scroll p-tall border" style="max-width: 260px; max-height: 100px;" tabindex="0">
     This is an example of using <code>.overflow-scroll</code> on an element with set width and height dimensions.
   </div>
 </div>
@@ -39,19 +39,19 @@ Adjust the `overflow` property on the fly with four default values and classes.
 Adjust the `overflow-x` property to affect the overflow of content horizontally.
 
 <div class="bd-example d-md-flex">
-  <div class="overflow-x-auto p-3 mb-3 mb-md-0 me-md-3 w-100 border" style="max-width: 200px; max-height: 100px; white-space: nowrap;">
+  <div class="overflow-x-auto p-tall mb-tall mb-md-none me-md-tall w-100 border" style="max-width: 200px; max-height: 100px; white-space: nowrap;">
     <div><code>.overflow-x-auto</code> example on an element</div>
     <div> with set width and height dimensions.</div>
   </div>
-  <div class="overflow-x-hidden p-3 mb-3 mb-md-0 me-md-3 w-100 border" style="max-width: 200px; max-height: 100px;white-space: nowrap;">
+  <div class="overflow-x-hidden p-tall mb-tall mb-md-none me-md-tall w-100 border" style="max-width: 200px; max-height: 100px;white-space: nowrap;">
     <div><code>.overflow-x-hidden</code> example</div>
     <div>on an element with set width and height dimensions.</div>
   </div>
-  <div class="overflow-x-visible p-3 mb-3 mb-md-0 me-md-3 w-100 border" style="max-width: 200px; max-height: 100px;white-space: nowrap;">
+  <div class="overflow-x-visible p-tall mb-tall mb-md-none me-md-tall w-100 border" style="max-width: 200px; max-height: 100px;white-space: nowrap;">
     <div><code>.overflow-x-visible</code> example </div>
     <div>on an element with set width and height dimensions.</div>
   </div>
-  <div class="overflow-x-scroll p-3 bg-body w-100 border" style="max-width: 200px; max-height: 100px;white-space: nowrap;">
+  <div class="overflow-x-scroll p-tall bg-body w-100 border" style="max-width: 200px; max-height: 100px;white-space: nowrap;">
     <div><code>.overflow-x-scroll</code> example on an element</div>
     <div> with set width and height dimensions.</div>
   </div>
@@ -69,16 +69,16 @@ Adjust the `overflow-x` property to affect the overflow of content horizontally.
 Adjust the `overflow-y` property to affect the overflow of content vertically.
 
 <div class="bd-example d-md-flex">
-  <div class="overflow-y-auto p-3 mb-3 mb-md-0 me-md-3 w-100 border" style="max-width: 200px; max-height: 100px;">
+  <div class="overflow-y-auto p-tall mb-tall mb-md-none me-md-tall w-100 border" style="max-width: 200px; max-height: 100px;">
     <code>.overflow-y-auto</code> example on an element with set width and height dimensions.
   </div>
-  <div class="overflow-y-hidden p-3 mb-3 mb-md-0 me-md-3 w-100 border" style="max-width: 200px; max-height: 100px;">
+  <div class="overflow-y-hidden p-tall mb-tall mb-md-none me-md-tall w-100 border" style="max-width: 200px; max-height: 100px;">
     <code>.overflow-y-hidden</code> example on an element with set width and height dimensions.
   </div>
-  <div class="overflow-y-visible p-3 mb-3 mb-md-0 me-md-3 w-100 border" style="max-width: 200px; max-height: 100px;">
+  <div class="overflow-y-visible p-tall mb-tall mb-md-none me-md-tall w-100 border" style="max-width: 200px; max-height: 100px;">
     <code>.overflow-y-visible</code> example on an element with set width and height dimensions.
   </div>
-  <div class="overflow-y-scroll p-3 w-100 border" style="max-width: 200px; max-height: 100px;">
+  <div class="overflow-y-scroll p-tall w-100 border" style="max-width: 200px; max-height: 100px;">
     <code>.overflow-y-scroll</code> example on an element with set width and height dimensions.
   </div>
 </div>
diff --git a/site/content/docs/0.0/utilities/position.md b/site/content/docs/0.0/utilities/position.md
index 73bdab647c..f552f0cd7e 100644
--- a/site/content/docs/0.0/utilities/position.md
+++ b/site/content/docs/0.0/utilities/position.md
@@ -95,19 +95,19 @@ Here are some real life examples of these classes:
   Mails <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill text-bg-secondary">+99 <span class="visually-hidden">unread messages</span></span>
 </button>
 
-<div class="position-relative py-2 px-4 text-bg-secondary border border-secondary">
-  Marker <svg width="1em" height="1em" viewBox="0 0 16 16" class="position-absolute top-100 start-50 translate-middle mt-1" fill="var(-bs-secondary)" xmlns="http://www.w3.org/2000/svg"><path d="M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/></svg> // TODO: reinsert hyphens
+<div class="position-relative py-short px-tallest text-bg-secondary border border-secondary">
+  Marker <svg width="1em" height="1em" viewBox="0 0 16 16" class="position-absolute top-100 start-50 translate-middle mt-shortest" fill="var(-bs-secondary)" xmlns="http://www.w3.org/2000/svg"><path d="M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/></svg> // TODO: reinsert hyphens
 </div>
 
 <button type="button" class="btn btn-primary position-relative">
-  Alerts <span class="position-absolute top-0 start-100 translate-middle badge border rounded-circle text-bg-warning p-2"><span class="visually-hidden">unread messages</span></span>
+  Alerts <span class="position-absolute top-0 start-100 translate-middle badge border rounded-circle text-bg-warning p-short"><span class="visually-hidden">unread messages</span></span>
 </button>
 {{< /example >}}
 
 You can use these classes with existing components to create new ones. Remember that you can extend its functionality by adding entries to the `$position-values` variable.
 
 {{< example class="bd-example-position-examples" >}}
-<div class="position-relative m-4">
+<div class="position-relative m-tallest">
   <div class="progress" role="progressbar" aria-label="Progress" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="height: 1px;">
     <div class="progress-bar" style="width: 50%"></div>
   </div>
diff --git a/site/content/docs/0.0/utilities/shadows.md b/site/content/docs/0.0/utilities/shadows.md
index 61cdb262e0..eb4cab1970 100644
--- a/site/content/docs/0.0/utilities/shadows.md
+++ b/site/content/docs/0.0/utilities/shadows.md
@@ -18,14 +18,14 @@ Box-shadow styles are referred to as 'elevation' within the design system.
 You can <!--also -->quickly add or remove a shadow with our `box-shadow` utility classes. Includes support for `.shadow-none` and new semantic helpers.
 
 {{< example class="overflow-hidden" >}}
-<div class="shadow-none p-3 mb-5 bg-body-tertiary">No shadow</div>
-<div class="shadow-raised p-3 mb-5 bg-body-tertiary">Raised shadow</div>
-<div class="shadow-drag p-3 mb-5 bg-body-tertiary">Drag shadow</div>
-<div class="shadow-overlay-default p-3 mb-5 bg-body-tertiary">Overlay default shadow</div>
-<div class="shadow-overlay-emphasized p-3 mb-5 bg-body-tertiary">Overlay emphasized shadow</div>
-<div class="shadow-sticky-default p-3 mb-5 bg-body-tertiary">Sticky default shadow</div>
-<div class="shadow-sticky-emphasized p-3 mb-5 bg-body-tertiary">Sticky emphasized shadow</div>
-<div class="shadow-sticky-navigation-scrolled p-3 mb-5 bg-body-tertiary">Sticky navigation shadow</div>
+<div class="shadow-none p-tall mb-huge bg-body-tertiary">No shadow</div>
+<div class="shadow-raised p-tall mb-huge bg-body-tertiary">Raised shadow</div>
+<div class="shadow-drag p-tall mb-huge bg-body-tertiary">Drag shadow</div>
+<div class="shadow-overlay-default p-tall mb-huge bg-body-tertiary">Overlay default shadow</div>
+<div class="shadow-overlay-emphasized p-tall mb-huge bg-body-tertiary">Overlay emphasized shadow</div>
+<div class="shadow-sticky-default p-tall mb-huge bg-body-tertiary">Sticky default shadow</div>
+<div class="shadow-sticky-emphasized p-tall mb-huge bg-body-tertiary">Sticky emphasized shadow</div>
+<div class="shadow-sticky-navigation-scrolled p-tall mb-huge bg-body-tertiary">Sticky navigation shadow</div>
 {{< /example >}}
 
 {{< bootstrap-compatibility >}}
@@ -57,13 +57,19 @@ Shadow semantic tokens as Sass variables.
 
 {{< scss-docs name="ouds-semantic-elevation" file="scss/tokens/_semantic.scss" >}}
 
+#### Composite tokens
+
+Shadow composite tokens are defined as Sass variables.
+
+{{< scss-docs name="ouds-composite-elevation" file="scss/tokens/_composite.scss" >}}
+
 ### Sass variables
 
 {{< scss-docs name="box-shadow-variables" file="scss/_variables.scss" >}}
 
 ### Sass maps
 
-{{< scss-docs name="ouds-maps-elevations" file="scss/_ouds-maps.scss" >}}
+{{< scss-docs name="ouds-maps-elevations" file="scss/_maps.scss" >}}
 
 ### Sass utilities API
 
diff --git a/site/content/docs/0.0/utilities/sizing.md b/site/content/docs/0.0/utilities/sizing.md
index fc565d26e5..008306aa83 100644
--- a/site/content/docs/0.0/utilities/sizing.md
+++ b/site/content/docs/0.0/utilities/sizing.md
@@ -8,4 +8,57 @@ aliases:
 toc: true
 ---
 
-{{< callout-soon "page" >}}
+## Relative to the parent
+
+Width and height utilities are generated from the utility API in `_utilities.scss`. Includes support for `25%`, `50%`, `75%`, `100%`, and `auto` by default. Modify those values as you need to generate different utilities here.
+
+{{< example class="bd-example-flex" >}}
+<div class="w-25 p-tall">Width 25%</div>
+<div class="w-50 p-tall">Width 50%</div>
+<div class="w-75 p-tall">Width 75%</div>
+<div class="w-100 p-tall">Width 100%</div>
+<div class="w-auto p-tall">Width auto</div>
+{{< /example >}}
+
+{{< example class="bd-example-flex" >}}
+<div style="height: 100px;">
+  <div class="h-25 d-inline-block" style="width: 120px;">Height 25%</div>
+  <div class="h-50 d-inline-block" style="width: 120px;">Height 50%</div>
+  <div class="h-75 d-inline-block" style="width: 120px;">Height 75%</div>
+  <div class="h-100 d-inline-block" style="width: 120px;">Height 100%</div>
+  <div class="h-auto d-inline-block" style="width: 120px;">Height auto</div>
+</div>
+{{< /example >}}
+
+You can also use `max-width: 100%;` and `max-height: 100%;` utilities as needed.
+
+{{< example class="bd-example-flex" >}}
+<div style="width: 50%; height: 100px;">
+  <div class="mw-100" style="width: 200%;">Max-width 100%</div>
+</div>
+{{< /example >}}
+
+{{< example class="bd-example-flex" >}}
+<div style="height: 100px;">
+  <div class="mh-100" style="width: 100px; height: 200px;">Max-height 100%</div>
+</div>
+{{< /example >}}
+
+## Relative to the viewport
+
+You can also use utilities to set the width and height relative to the viewport.
+
+```html
+<div class="min-vw-100">Min-width 100vw</div>
+<div class="min-vh-100">Min-height 100vh</div>
+<div class="vw-100">Width 100vw</div>
+<div class="vh-100">Height 100vh</div>
+```
+
+## CSS
+
+### Sass utilities API
+
+Sizing 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-sizing" file="scss/_utilities.scss" >}}
diff --git a/site/content/docs/0.0/utilities/spacing.md b/site/content/docs/0.0/utilities/spacing.md
index 05442c7f07..e5972c7e0f 100644
--- a/site/content/docs/0.0/utilities/spacing.md
+++ b/site/content/docs/0.0/utilities/spacing.md
@@ -1,11 +1,372 @@
 ---
 layout: docs
 title: Spacing
-description: OUDS Web includes a wide range of shorthand responsive margin, padding and gap utility classes to modify an element's appearance.
+description: OUDS Web includes a wide range of shorthand responsive margin, padding, and gap utility classes to modify an element's appearance.
 group: utilities
 aliases:
   - "/docs/utilities/spacing/"
 toc: true
 ---
 
-{{< callout-soon "page" >}}
+## Margin and padding
+
+Assign responsive-friendly `margin` or `padding` values to an element or a subset of its sides with shorthand classes. Includes support for individual properties, all properties, and vertical and horizontal properties. Classes are built from a default Sass map ranging from `none` to `jumbo`. Classes include fixed values on zoom (using `px`).
+
+{{< callout >}}
+**Using the CSS Grid layout module?** Consider using [the gap utility](#gap) instead.
+{{< /callout >}}
+
+### Notation for fixed values
+
+Spacing utilities that apply to all breakpoints, from `2xs` to `3xl`, have no breakpoint abbreviation in them. This is because those classes are applied from `min-width: 0` and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.
+
+The classes are named using the format `{property}{sides}-{size}` for `2xs` and `{property}{sides}-{breakpoint}-{size}` for `xs`, `sm`, `md`, `lg`, `xl`, `2xl`, and `3xl`.
+
+Where *property* is one of:
+
+- `m` - for classes that set `margin`
+- `p` - for classes that set `padding`
+
+Where *sides* is one of:
+
+- `t` - for classes that set `margin-top` or `padding-top`
+- `b` - for classes that set `margin-bottom` or `padding-bottom`
+- `s` - (start) for classes that set `margin-left` or `padding-left` in LTR, `margin-right` or `padding-right` in RTL
+- `e` - (end) for classes that set `margin-right` or `padding-right` in LTR, `margin-left` or `padding-left` in RTL
+- `x` - for classes that set both `*-left` and `*-right`
+- `y` - for classes that set both `*-top` and `*-bottom`
+- blank - for classes that set a `margin` or `padding` on all 4 sides of the element
+
+Where *size* is one of:
+
+- `none` - for classes that eliminate the `margin` or `padding` by setting it to `$ouds-dimension-0`, which is `0`
+- `smash` - for classes that set the `margin` or `padding` to `$ouds-dimension-25`, which is `2px`
+- `shortest` - for classes that set the `margin` or `padding` to `$ouds-dimension-50`, which is `4px`
+- `shorter` - for classes that set the `margin` or `padding` to `$ouds-dimension-100`, which is `8px`
+- `short` - for classes that set the `margin` or `padding` to `$ouds-dimension-150`, which is `12px`
+- `medium` - for classes that set the `margin` or `padding` to `$ouds-dimension-200`, which is `16px`
+- `tall` - for classes that set the `margin` or `padding` to `$ouds-dimension-300`, which is `24px`
+- `taller` - for classes that set the `margin` or `padding` to `$ouds-dimension-400`, which is `32px`
+- `tallest` - for classes that set the `margin` or `padding` to `$ouds-dimension-500`, which is `40px`
+- `spacious` - for classes that set the `margin` or `padding` to `$ouds-dimension-600`, which is `48px`
+- `huge` - for classes that set the `margin` or `padding` to `$ouds-dimension-700`, which is `56px`
+- `jumbo` - for classes that set the `margin` or `padding` to `$ouds-dimension-800`, which is `64px`
+- `auto` - for classes that set the `margin` to auto
+
+(You can but shouldn't add more sizes by adding entries to the `$ouds-dimension-space-fixed` Sass map variable.)
+
+{{< bootstrap-compatibility >}}
+
+Spacing utilities that apply to all breakpoints, from `xs` to `xxl`, have no breakpoint abbreviation in them. This is because those classes are applied from `min-width: 0` and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.
+
+The classes are named using the format `{property}{sides}-{size}` for `xs` and `{property}{sides}-{breakpoint}-{size}` for `sm`, `md`, `lg`, `xl`, and `xxl`.
+
+Where *property* is one of:
+
+- `m` - for classes that set `margin`
+- `p` - for classes that set `padding`
+
+Where *sides* is one of:
+
+- `t` - for classes that set `margin-top` or `padding-top`
+- `b` - for classes that set `margin-bottom` or `padding-bottom`
+- `s` - (start) for classes that set `margin-left` or `padding-left` in LTR, `margin-right` or `padding-right` in RTL
+- `e` - (end) for classes that set `margin-right` or `padding-right` in LTR, `margin-left` or `padding-left` in RTL
+- `x` - for classes that set both `*-left` and `*-right`
+- `y` - for classes that set both `*-top` and `*-bottom`
+- blank - for classes that set a `margin` or `padding` on all 4 sides of the element
+
+Where *size* is one of:
+
+- `0` - for classes that eliminate the `margin` or `padding` by setting it to `0`
+- `1` - (by default) for classes that set the `margin` or `padding` to `$spacer * .25`
+- `2` - (by default) for classes that set the `margin` or `padding` to `$spacer * .75`
+- `3` - (by default) for classes that set the `margin` or `padding` to `$spacer * 1.5`
+- `4` - (by default) for classes that set the `margin` or `padding` to `$spacer * 2.5`
+- `5` - (by default) for classes that set the `margin` or `padding` to `$spacer * 3.5`
+- `auto` - for classes that set the `margin` to auto
+
+(You can add more sizes by adding entries to the `$spacers` Sass map variable.)
+
+{{< /bootstrap-compatibility >}}
+
+### Notation for scaled values
+
+Spacing utilities that evolve across all breakpoints, from `2xs` to `3xl`, have no breakpoint abbreviation in them since they are auto-sufficient from a responsive point of view.
+
+The classes are named using the format `{property}{sides}-scaled-{size}`.
+
+Where *property* is one of:
+
+- `m` - for classes that set `margin`
+- `p` - for classes that set `padding`
+
+Where *sides* is one of:
+
+- `t` - for classes that set `margin-top` or `padding-top`
+- `b` - for classes that set `margin-bottom` or `padding-bottom`
+- `s` - (start) for classes that set `margin-left` or `padding-left` in LTR, `margin-right` or `padding-right` in RTL
+- `e` - (end) for classes that set `margin-right` or `padding-right` in LTR, `margin-left` or `padding-left` in RTL
+- `x` - for classes that set both `*-left` and `*-right`
+- `y` - for classes that set both `*-top` and `*-bottom`
+- blank - for classes that set a `margin` or `padding` on all 4 sides of the element
+
+Where *size* is one of:
+
+{{< bs-table "table" >}}
+| Size name | Size for mobile (`2xs` to `md`) | Size for tablet (`md` to `xl`) | Size for desktop (`xl` to `3xl` and above) |
+| --- | --- | --- | --- |
+| `none` | `0` | `0` | `0` |
+| `smash` | `2px` | `4px` | `4px` |
+| `shortest` | `4px` | `8px` | `8px` |
+| `shorter` | `8px` | `12px` | `16px` |
+| `short` | `12px` | `16px` | `24px` |
+| `medium` | `16px` | `24px` | `32px` |
+| `tall` | `24px` | `32px` | `40px` |
+| `taller` | `32px` | `40px` | `48px` |
+| `tallest` | `40px` | `48px` | `56px` |
+| `spacious` | `48px` | `56px` | `64px` |
+{{< /bs-table >}}
+
+(You can but shouldn't add more sizes by adding entries to the `$ouds-dimension-space-scaled` Sass map variable.)
+
+### Examples
+
+Here are some representative examples of these classes:
+
+```scss
+.mt-none {
+  margin-top: $ouds-space-fixed-none !important;
+}
+
+.ms-scaled-tall {
+  margin-left: var(--bs-space-scaled-tall) !important;
+}
+
+.px-scaled-shortest {
+  padding-right: var(--bs-space-scaled-shortest) !important;
+  padding-left: var(--bs-space-scaled-shortest) !important;
+}
+
+.p-tallest {
+  padding: $ouds-space-fixed-tall !important;
+}
+```
+
+{{< bootstrap-compatibility >}}
+
+```scss
+.mt-0 {
+  margin-top: 0 !important;
+}
+
+.ms-1 {
+  margin-left: ($spacer * .25) !important;
+}
+
+.px-2 {
+  padding-left: ($spacer * .5) !important;
+  padding-right: ($spacer * .5) !important;
+}
+
+.p-3 {
+  padding: $spacer !important;
+}
+```
+
+{{< /bootstrap-compatibility >}}
+
+The first two examples show the scaled and fixed margin classes in action. The last one shows how to recreate an equivalent of `.mx-scaled-tall` by combining other responsive margin classes.
+
+Please note that if you mix the scaled and fixed classes, the fixed classes will override the scaled ones.
+
+{{< example class="bd-example-spacings" >}}
+<div class="mx-scaled-tall">Tall scaled x margin</div>
+<div class="mx-tall">Tall x margin (fixed)</div>
+<div class="mx-tall mx-md-taller mx-xl-tallest">Tall scaled x margin (manually)</div>
+{{< /example >}}
+
+### Horizontal centering
+
+Additionally, OUDS Web also includes an `.mx-auto` class for horizontally centering fixed-width block level content—that is, content that has `display: block` and a `width` set—by setting the horizontal margins to `auto`.
+
+<div class="bd-example">
+  <div class="mx-auto p-short" style="width: 200px; background-color: rgba(var(--bd-primary-light-rgb),.15); border: rgba(var(--bd-primary-light-rgb),.3) solid 1px;">
+    Centered element
+  </div>
+</div>
+
+```html
+<div class="mx-auto p-short" style="width: 200px;">
+  Centered element
+</div>
+```
+
+## Negative margin
+
+In CSS, `margin` properties can utilize negative values (`padding` cannot). These negative margins are **disabled by default**, but can be enabled in Sass by setting `$enable-negative-margins: true`.
+
+The syntax is nearly the same as the default, positive margin utilities, but with the addition of `n` before the requested size. Here are some example classes that are the opposite of `.mt-short` and `.ms-scaled-tall`:
+
+```scss
+.mt-nshort {
+  margin-top: -$ouds-space-fixed-short !important;
+}
+
+.ms-scaled-ntall {
+  margin-top: calc(-1 * var(--bs-space-scaled-tall)) !important;
+}
+```
+
+{{< bootstrap-compatibility >}}
+
+Here's an example class that's the opposite of `.mt-1`:
+
+```scss
+.mt-n1 {
+  margin-top: -0.25rem !important;
+}
+```
+
+{{< /bootstrap-compatibility >}}
+
+## Gap
+
+When using `display: grid` or `display: flex`, you can make use of `gap` utilities on the parent element. This can save on having to add margin utilities to individual children of a grid or flex container. Gap utilities are responsive by default, and are generated via our utilities API, based on the `$ouds-dimension-space-fixed` Sass map.
+
+{{< example class="bd-example-cssgrid" >}}
+<div style="grid-template-columns: 1fr 1fr;" class="d-grid gap-tall">
+  <div class="p-short">Grid item 1</div>
+  <div class="p-short">Grid item 2</div>
+  <div class="p-short">Grid item 3</div>
+  <div class="p-short">Grid item 4</div>
+</div>
+{{< /example >}}
+
+Support includes responsive options for all of OUDS Web's grid breakpoints, as well as sizes from the `$ouds-dimension-space-fixed` map (`none`–`jumbo`). There is no `.gap-auto` utility class as it's effectively the same as `.gap-none`.
+
+{{< bootstrap-compatibility >}}
+
+Gap utilities are responsive by default, and are generated via our utilities API, based on the `$spacers` Sass map.
+
+{{< example class="bd-example-cssgrid" >}}
+<div style="grid-template-columns: 1fr 1fr;" class="d-grid gap-3">
+  <div class="p-2">Grid item 1</div>
+  <div class="p-2">Grid item 2</div>
+  <div class="p-2">Grid item 3</div>
+  <div class="p-2">Grid item 4</div>
+</div>
+{{< /example >}}
+
+Support includes responsive options for all of OUDS Web's grid breakpoints, as well as six sizes from the `$spacers` map (`0`–`5`). There is no `.gap-auto` utility class as it's effectively the same as `.gap-0`.
+
+{{< /bootstrap-compatibility >}}
+
+### row-gap
+
+`row-gap` sets the vertical space between children items in the specified container.
+
+{{< example class="bd-example-cssgrid" >}}
+<div style="grid-template-columns: 1fr 1fr;" class="d-grid row-gap-tall">
+  <div class="p-short">Grid item 1</div>
+  <div class="p-short">Grid item 2</div>
+  <div class="p-short">Grid item 3</div>
+  <div class="p-short">Grid item 4</div>
+</div>
+{{< /example >}}
+
+{{< bootstrap-compatibility >}}
+
+{{< example class="bd-example-cssgrid" >}}
+<div style="grid-template-columns: 1fr 1fr;" class="d-grid row-gap-3">
+  <div class="p-2">Grid item 1</div>
+  <div class="p-2">Grid item 2</div>
+  <div class="p-2">Grid item 3</div>
+  <div class="p-2">Grid item 4</div>
+</div>
+{{< /example >}}
+
+{{< /bootstrap-compatibility >}}
+
+### column-gap
+
+`column-gap` sets the horizontal space between children items in the specified container.
+
+{{< example class="bd-example-cssgrid" >}}
+<div style="grid-template-columns: 1fr 1fr;" class="d-grid column-gap-tall">
+  <div class="p-short">Grid item 1</div>
+  <div class="p-short">Grid item 2</div>
+  <div class="p-short">Grid item 3</div>
+  <div class="p-short">Grid item 4</div>
+</div>
+{{< /example >}}
+
+{{< bootstrap-compatibility >}}
+
+{{< example class="bd-example-cssgrid" >}}
+<div style="grid-template-columns: 1fr 1fr;" class="d-grid column-gap-3">
+  <div class="p-2">Grid item 1</div>
+  <div class="p-2">Grid item 2</div>
+  <div class="p-2">Grid item 3</div>
+  <div class="p-2">Grid item 4</div>
+</div>
+{{< /example >}}
+
+{{< /bootstrap-compatibility >}}
+
+### Scaled gap
+
+We also provide scaled versions of the gap (including `row-gap` and `column-gap`). These are generated via our Utilities API, based on the `$ouds-dimension-space-scaled` Sass map.
+
+{{< example class="bd-example-cssgrid" >}}
+<div style="grid-template-columns: 1fr 1fr;" class="d-grid gap-scaled-medium">
+  <div class="p-short">Grid item 1</div>
+  <div class="p-short">Grid item 2</div>
+  <div class="p-short">Grid item 3</div>
+  <div class="p-short">Grid item 4</div>
+</div>
+{{< /example >}}
+
+## CSS
+
+### Variables
+
+CSS variables that are used to build our scaled utilities.
+
+{{< scss-docs name="root-space-scaled-var-ouds" file="scss/_root.scss" >}}
+
+### Sass tokens
+
+#### Raw tokens
+
+Dimension raw tokens as Sass variables. **Not to be used as-is**.
+
+{{< scss-docs name="ouds-raw-dimension" file="scss/tokens/_raw.scss" >}}
+
+#### Semantic tokens
+
+Spacing semantic tokens are defined as Sass variables.
+
+{{< scss-docs name="ouds-semantic-space" file="scss/tokens/_semantic.scss" >}}
+
+### Sass variables
+
+{{< scss-docs name="spacer-variables-maps" file="scss/_variables.scss" >}}
+
+### Sass maps
+
+Spacing utilities are declared via Sass map and then generated with our utilities API.
+
+{{< scss-docs name="ouds-maps-dimension" file="scss/_maps.scss" >}}
+
+### Sass utilities API
+
+Spacing 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-spacing-ouds" file="scss/_utilities.scss" >}}
+
+{{< bootstrap-compatibility false >}}
+
+{{< scss-docs name="utils-spacing" file="scss/_utilities.scss" >}}
+
+{{< /bootstrap-compatibility >}}
diff --git a/site/content/docs/0.0/utilities/z-index.md b/site/content/docs/0.0/utilities/z-index.md
index 63926119bc..6e8b48add0 100644
--- a/site/content/docs/0.0/utilities/z-index.md
+++ b/site/content/docs/0.0/utilities/z-index.md
@@ -15,11 +15,11 @@ We call these "low-level" `z-index` utilities because of their default values of
 {{< /callout >}}
 
 {{< example class="bd-example-zindex-levels position-relative" >}}
-<div class="z-3 position-absolute p-5"><span>z-3</span></div>
-<div class="z-2 position-absolute p-5"><span>z-2</span></div>
-<div class="z-1 position-absolute p-5"><span>z-1</span></div>
-<div class="z-0 position-absolute p-5"><span>z-0</span></div>
-<div class="z-n1 position-absolute p-5"><span>z-n1</span></div>
+<div class="z-3 position-absolute p-huge"><span>z-3</span></div>
+<div class="z-2 position-absolute p-huge"><span>z-2</span></div>
+<div class="z-1 position-absolute p-huge"><span>z-1</span></div>
+<div class="z-0 position-absolute p-huge"><span>z-0</span></div>
+<div class="z-n1 position-absolute p-huge"><span>z-n1</span></div>
 {{< /example >}}
 
 <!--## Overlays
diff --git a/site/content/docs/versions.md b/site/content/docs/versions.md
index 6621395dd1..0cb5fef3be 100644
--- a/site/content/docs/versions.md
+++ b/site/content/docs/versions.md
@@ -6,14 +6,14 @@ description: An appendix of hosted documentation for nearly every release of OUD
 {{< list-versions.inline >}}
 <div class="row">
   {{- range $release := sort (index $.Site.Data "docs-versions") "group" "desc" }}
-  <div class="col-md-6 col-lg-4 col-xl mb-4">
+  <div class="col-md-6 col-lg-4 col-xl mb-tallest">
     <h2>{{ $release.group }}</h2>
     <p>{{ $release.description }}</p>
     {{- $versions := sort $release.versions "" "desc" -}}
     {{- range $i, $version := $versions }}
       {{- $len := len $versions -}}
       {{ if (eq $i 0) }}<div class="list-group">{{ end }}
-        <a class="list-group-item list-group-item-action py-2 {{ if (eq $version $.Site.Params.docs_version) }} d-flex justify-content-between align-items-center{{ end }}" href="{{ urls.JoinPath $release.baseurl $version "/" }}">
+        <a class="list-group-item list-group-item-action py-short {{ if (eq $version $.Site.Params.docs_version) }} d-flex justify-content-between align-items-center{{ end }}" href="{{ urls.JoinPath $release.baseurl $version "/" }}">
           {{ $version }}
           {{ if (eq $version $.Site.Params.docs_version) -}}
           <span class="badge text-bg-primary">Latest</span>
diff --git a/site/data/sidebar.yml b/site/data/sidebar.yml
index 6d4d4b88a6..ddc9cccc1e 100644
--- a/site/data/sidebar.yml
+++ b/site/data/sidebar.yml
@@ -57,7 +57,6 @@
     - title: Grid
     - title: Columns
     - title: Gutters
-      draft: true
     - title: Utilities
     - title: Z-index
     - title: CSS Grid
@@ -213,9 +212,7 @@
     - title: Position
     - title: Shadows
     - title: Sizing
-      draft: true
     - title: Spacing
-      draft: true
     - title: Text
       draft: true
     - title: Vertical align
diff --git a/site/layouts/_default/404.html b/site/layouts/_default/404.html
index c9eecff003..8546441f5e 100644
--- a/site/layouts/_default/404.html
+++ b/site/layouts/_default/404.html
@@ -1,6 +1,6 @@
 {{ define "body_override" }}<body class="d-flex flex-column min-vh-100">{{ end }}
 {{ define "main" }}
-  <main class="my-auto p-5" id="content">
+  <main class="my-auto p-huge" id="content">
     {{ .Content }}
   </main>
 {{ end }}
diff --git a/site/layouts/_default/docs.html b/site/layouts/_default/docs.html
index c77a87cfa3..ce65fc026d 100644
--- a/site/layouts/_default/docs.html
+++ b/site/layouts/_default/docs.html
@@ -1,6 +1,6 @@
 {{ define "body_override" }}<body{{ if (eq .Page.Params.toc true) }} data-bs-spy="scroll" data-bs-target="#TableOfContents"{{ end }}>{{ end }}
 {{ define "main" }}
-  <div class="container-fluid container-max-width bd-gutter mt-3 my-md-4 bd-layout">
+  <div class="container-fluid container-max-width bd-gutter mt-tall my-md-tallest bd-layout">
     <nav class="bd-sidebar" aria-label="Docs navigation">
       <div class="offcanvas-lg offcanvas-start" tabindex="-1" id="bdSidebar" aria-labelledby="bdSidebarOffcanvasLabel">
         <div class="offcanvas-header border-bottom">
@@ -15,46 +15,46 @@ <h5 class="offcanvas-title" id="bdSidebarOffcanvasLabel">Browse docs</h5>
     </nav>
 
     <main class="bd-main order-1">
-      <div class="bd-intro pt-2 ps-lg-2">
+      <div class="bd-intro pt-short ps-lg-short">
         <div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
-          <div class="mb-3 mb-md-0 d-flex text-nowrap">
+          <div class="mb-tall mb-md-none d-flex text-nowrap">
             {{- /* This is needed because we want to show the badge if show_badge isn't present or is set to false */ -}}
             {{- if (or (and (.Page.Params.added) (not (isset .Page.Params.added "show_badge"))) (and (.Page.Params.added) (isset .Page.Params.added "show_badge") (not (eq .Page.Params.added.show_badge false)))) -}}
-              <p class="mb-0 me-2"><span class="tag tag-sm">Added in v{{ .Page.Params.added.version }}</span></p>
+              <p class="mb-none me-short"><span class="tag tag-sm">Added in v{{ .Page.Params.added.version }}</span></p>
             {{- end -}}
             <a class="btn btn-sm btn-outline-secondary" href="{{ .Site.Params.repo }}/blob/v{{ .Site.Params.current_version }}-ouds-web/site/content/{{ .Page.File.Path | replaceRE `\\` "/" }}" title="View and edit this file on GitHub" target="_blank" rel="noopener">
               View on GitHub
             </a>
           </div>
-          <h1 class="bd-title mb-0" id="content">{{ .Title | markdownify }}</h1>
+          <h1 class="bd-title mb-none" id="content">{{ .Title | markdownify }}</h1>
         </div>
-        <p class="bd-lead mt-2">{{ .Page.Params.Description | markdownify }}</p>
+        <p class="bd-lead mt-short">{{ .Page.Params.Description | markdownify }}</p>
         <!-- OUDS mod: No ads -->
       </div>
 
       {{ if (eq .Page.Params.toc true) }}
-        <div class="bd-toc mt-3 mb-5 my-lg-0 mb-lg-5 px-sm-1 text-body-secondary">
-          <h2 class="mb-0">
-            <button class="btn btn-outline-secondary p-md-0 mb-2 mb-md-0 text-decoration-none bd-toc-toggle d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#tocContents" aria-expanded="false" aria-controls="tocContents">
+        <div class="bd-toc mt-tall mb-huge my-lg-none mb-lg-huge px-sm-shortest text-body-secondary">
+          <h2 class="mb-none">
+            <button class="btn btn-outline-secondary p-md-none mb-short mb-md-none text-decoration-none bd-toc-toggle d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#tocContents" aria-expanded="false" aria-controls="tocContents">
               On this page
-              <svg class="bi d-md-none ms-2" aria-hidden="true"><use xlink:href="#chevron-expand"></use></svg>
+              <svg class="bi d-md-none ms-short" aria-hidden="true"><use xlink:href="#chevron-expand"></use></svg>
             </button>
-            <span class="d-none d-md-block h6 my-2 ms-3">On this page</span>
+            <span class="d-none d-md-block h6 my-short ms-tall">On this page</span>
           </h2>
-          <hr class="d-none d-md-block my-2 ms-3">
-          <div class="collapse bd-toc-collapse ms-md-1" id="tocContents">
+          <hr class="d-none d-md-block my-short ms-tall">
+          <div class="collapse bd-toc-collapse ms-md-shortest" id="tocContents">
             {{ .TableOfContents }}
           </div>
         </div>
       {{ end }}
 
-      <div class="bd-content ps-lg-2">
+      <div class="bd-content ps-lg-short">
         {{ if .Page.Params.sections }}
-          <div class="row g-3">
+          <div class="row g-medium">
             {{ range .Page.Params.sections }}
             <div class="col-md-6">
               <a class="d-block text-decoration-none" href="../{{ urlize .title }}/">
-                <strong class="d-block h5 mb-0">{{ .title }}</strong>
+                <strong class="d-block h5 mb-none">{{ .title }}</strong>
                 <span class="text-secondary">{{ .description }}</span>
               </a>
             </div>
diff --git a/site/layouts/_default/examples.html b/site/layouts/_default/examples.html
index 1c5612e4c4..4709520d57 100644
--- a/site/layouts/_default/examples.html
+++ b/site/layouts/_default/examples.html
@@ -100,7 +100,7 @@
     {{ partial "examples/icons" . }}
 
     {{ if ne .Page.Params.theme_selector false }}
-    <div class="dropdown dropup position-fixed bottom-0 end-0 mb-3 me-3 bd-mode-toggle">
+    <div class="dropdown dropup position-fixed bottom-0 end-0 mb-tall me-tall bd-mode-toggle">
       {{ partial "theme-toggler" .}}
     </div>
     {{- end -}}
diff --git a/site/layouts/_default/single.html b/site/layouts/_default/single.html
index c8015d0c4e..7ae2b3cdc0 100644
--- a/site/layouts/_default/single.html
+++ b/site/layouts/_default/single.html
@@ -3,23 +3,23 @@
 
   <!-- OUDS mod: Orange rendering that handles "Guidelines" page as well -->
   <main class="bd-content order-1" id="content">
-    <div class="title-bar mb-2 mb-md-0">
+    <div class="title-bar mb-short mb-md-none">
       <div class="container-fluid container-max-width">
         <h1 class="display-1">{{ .Title | markdownify }}</h1>
       </div>
     </div>
-    <div class="pb-4 pb-md-2">
-      <div class="container-fluid container-max-width bd-gutter pt-md-2 pb-md-4">
+    <div class="pb-tallest pb-md-short">
+      <div class="container-fluid container-max-width bd-gutter pt-md-short pb-md-tallest">
         <div class="row">
           <div class="col-12">
-            <p class="ll-sm h3 mb-4">{{ .Page.Params.Description | markdownify }}</p>
+            <p class="ll-sm h3 mb-tallest">{{ .Page.Params.Description | markdownify }}</p>
             {{ if eq .Title "Examples" -}}
             <div class="d-flex flex-column flex-sm-row">
               <a href="{{ .Site.Params.download.dist_examples }}" class="btn btn-primary">
-                <svg width="1.25rem" height="1.25rem" fill="currentColor" class="me-1" aria-hidden="true"><use xlink:href="#box-seam"></use></svg>
+                <svg width="1.25rem" height="1.25rem" fill="currentColor" class="me-shortest" aria-hidden="true"><use xlink:href="#box-seam"></use></svg>
                 Download examples
               </a>
-              <a href="{{ .Site.Params.download.source }}" class="btn btn-secondary mt-3 mt-sm-0 ms-sm-3">
+              <a href="{{ .Site.Params.download.source }}" class="btn btn-secondary mt-tall mt-sm-none ms-sm-tall">
                 Download source code
               </a>
             </div>
diff --git a/site/layouts/partials/docs-navbar.html b/site/layouts/partials/docs-navbar.html
index a95fad328f..97211e4b64 100644
--- a/site/layouts/partials/docs-navbar.html
+++ b/site/layouts/partials/docs-navbar.html
@@ -10,7 +10,7 @@
   </nav>
   <nav class="navbar navbar-expand-lg" data-bs-theme="dark" aria-label="Main navigation">
     <div class="container-fluid container-max-width">
-      <div class="navbar-brand me-auto me-lg-4">
+      <div class="navbar-brand me-auto me-lg-tallest">
         <a class="stretched-link" href="/">
           <img src="/docs/{{ .Site.Params.docs_version }}/assets/brand/orange-logo.svg" width="50" height="50" alt="OUDS Web - Back to Home" loading="lazy">
         </a>
@@ -22,7 +22,7 @@
         <span class="navbar-toggler-icon"></span>
       </button>
 
-      <div id="bd-navbar1" class="navbar-collapse collapse me-lg-auto bd-navbar mb-0 border-0">
+      <div id="bd-navbar1" class="navbar-collapse collapse me-lg-auto bd-navbar mb-none border-0">
         <ul class="navbar-nav">
           <li class="nav-item">
             <a class="nav-link{{ if .IsHome }} active" aria-current="page{{ end }}" href="/" onclick="dataLayer.push({'event': 'clic', 'site_name':'accessibility-boosted', 'phase':'prod', 'track_category':'navbar', 'track_name':'home'});">Home</a>
@@ -36,7 +36,7 @@
         </ul>
       </div>
       <div id="bd-navbar2" class="navbar-collapse collapse bd-navbar border-0">
-        <ul class="navbar-nav flex-row me-lg-3">
+        <ul class="navbar-nav flex-row me-lg-tall">
           <li class="nav-item">
             <a class="nav-link nav-icon" href="{{ .Site.Params.repo }}" target="_blank" rel="noopener">
               {{ partial "icons/github.svg" }}
@@ -49,7 +49,7 @@
 
           {{ partial "docs-versions" . }}
         </ul>
-        <ul class="navbar-nav flex-row ms-lg-3">
+        <ul class="navbar-nav flex-row ms-lg-tall">
           <li class="nav-item dropdown">
             {{ partial "theme-toggler" . }}
           </li>
diff --git a/site/layouts/partials/docs-sidebar.html b/site/layouts/partials/docs-sidebar.html
index 70d31c69bf..7fbacb09b0 100644
--- a/site/layouts/partials/docs-sidebar.html
+++ b/site/layouts/partials/docs-sidebar.html
@@ -2,7 +2,7 @@
   {{- $url := split .Permalink "/" -}}
   {{- $page_slug := index $url (sub (len $url) 2) -}}
 
-  <ul class="bd-links-nav list-unstyled mb-0 pb-3 pb-md-2 pe-lg-2">
+  <ul class="bd-links-nav list-unstyled mb-none pb-tall pb-md-short pe-lg-short">
   {{- range $group := .Site.Data.sidebar -}}
     {{- $link := $group.title -}}
     {{- $link_slug := $link | urlize -}}
@@ -15,15 +15,15 @@
     {{- $group_slug := $group.title | urlize -}}
     {{- $is_active_group := eq $.Page.Params.group $group_slug -}}
 
-    <li class="bd-links-group py-2">
+    <li class="bd-links-group py-short">
       <strong class="bd-links-heading d-flex w-100 align-items-center fw-semibold">
         {{- if $group.icon }}
-          <svg class="bi me-1"{{- if $group.icon_color }} style="color: var(--bs-{{ $group.icon_color }});"{{- end }} aria-hidden="true"><use xlink:href="#{{ $group.icon }}"></use></svg>
+          <svg class="bi me-shortest"{{- if $group.icon_color }} style="color: var(--bs-{{ $group.icon_color }});"{{- end }} aria-hidden="true"><use xlink:href="#{{ $group.icon }}"></use></svg>
         {{- end }}
         {{ $group.title }}
       </strong>
 
-      <ul class="list-unstyled fw-normal mt-1 pb-2 small">
+      <ul class="list-unstyled fw-normal mt-shortest pb-short small">
         {{- range $doc := $group.pages -}}
           {{- $doc_slug := $doc.title | urlize -}}
           {{- $is_draft := $doc.draft -}}
diff --git a/site/layouts/partials/docs-subnav.html b/site/layouts/partials/docs-subnav.html
index 77a4196690..37d98bbdb6 100644
--- a/site/layouts/partials/docs-subnav.html
+++ b/site/layouts/partials/docs-subnav.html
@@ -1,8 +1,8 @@
 <!--OUDS mod: doesn't exist anymore in Bootstrap-->
 
-<nav class="bd-subnavbar py-2 d-lg-none" aria-label="Secondary navigation">
+<nav class="bd-subnavbar py-short d-lg-none" aria-label="Secondary navigation">
   <div class="container-fluid container-max-width d-flex justify-content-end">
-    <button class="btn btn-outline-secondary btn-icon p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdSidebar" aria-controls="bdSidebar" aria-label="Toggle docs navigation">
+    <button class="btn btn-outline-secondary btn-icon p-short" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdSidebar" aria-controls="bdSidebar" aria-label="Toggle docs navigation">
       <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="bi" fill="currentColor" viewBox="0 0 16 16">
         <path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13A.5.5 0 0 1 1 8zM7.646.146a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 1.707V5.5a.5.5 0 0 1-1 0V1.707L6.354 2.854a.5.5 0 1 1-.708-.708l2-2zM8 10a.5.5 0 0 1 .5.5v3.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 0 1 .708-.708L7.5 14.293V10.5A.5.5 0 0 1 8 10z"></path>
       </svg>
diff --git a/site/layouts/partials/docs-versions.html b/site/layouts/partials/docs-versions.html
index b6cd487fa3..0fd8a7c8ba 100644
--- a/site/layouts/partials/docs-versions.html
+++ b/site/layouts/partials/docs-versions.html
@@ -18,7 +18,7 @@
   <button class="nav-link nav-icon dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
     <span class="d-lg-none" aria-hidden="true">OUDS Web&nbsp;</span><span class="visually-hidden">OUDS Web&nbsp;</span>v{{ .Site.Params.docs_version }} <span class="visually-hidden">(switch to other versions)</span>
   </button>
-  <ul class="dropdown-menu dropdown-menu-end mb-2 mb-lg-0">
+  <ul class="dropdown-menu dropdown-menu-end mb-short mb-lg-none">
     <li><h6 class="dropdown-header">v0 releases</h6></li>
     <li>
       <a class="dropdown-item d-flex align-items-center justify-content-between active" aria-current="true" href="{{ if .IsHome }}/{{ else }}/docs/{{ .Site.Params.docs_version }}/{{ $versions_link }}{{ end }}">
diff --git a/site/layouts/partials/examples/main.html b/site/layouts/partials/examples/main.html
index 31f4a6e330..e88f7c9924 100644
--- a/site/layouts/partials/examples/main.html
+++ b/site/layouts/partials/examples/main.html
@@ -1,5 +1,5 @@
 {{ range $entry := $.Site.Data.examples -}}
-<div class="bd-content mt-5">
+<div class="bd-content mt-huge">
   <h2 id="{{ $entry.category | urlize }}">{{ $entry.category }}</h2>
   <p>{{ $entry.description }}</p>
   {{ if eq $entry.category "RTL" -}}
@@ -11,7 +11,7 @@ <h2 id="{{ $entry.category | urlize }}">{{ $entry.category }}</h2>
     </div>
   {{ end -}}
   {{ if eq $entry.category "Starters" -}}
-    <div class="bd-callout bd-callout-warning mb-4">
+    <div class="bd-callout bd-callout-warning mb-tallest">
       <p>
         <strong>To get working OUDS Web examples based on the Bootstrap ones</strong>, you need to replace all <code>bootstrap</code> occurrences with <code>ouds-web</code> in some files.
       </p>
@@ -24,10 +24,10 @@ <h2 id="{{ $entry.category | urlize }}">{{ $entry.category }}</h2>
     {{- $len := len $entry.examples -}}
     {{ if (eq $i 0) }}<div class="row">{{ end }}
       {{ if $entry.external -}}
-        <div class="col-md-6 col-lg-4 mb-3 d-flex gap-3">
+        <div class="col-md-6 col-lg-4 mb-tall d-flex gap-tall">
           <svg class="bi fs-5 flex-shrink-0"><use xlink:href="#box-seam"></use></svg>
           <div>
-            <h3 class="h5 mb-1">
+            <h3 class="h5 mb-shortest">
               <a class="d-block link-offset-1" href="{{ urls.JoinPath $.Site.Params.bootstrap_github_org $example.url }}" target="_blank" rel="noopener">
                 {{ $example.name }}
               </a>
@@ -44,7 +44,7 @@ <h3 class="h5 mb-1">
           </div>
         </div>
       {{ else -}}
-        <div class="col-sm-6 col-md-3 mb-3">
+        <div class="col-sm-6 col-md-3 mb-tall">
           {{- $exampleNameUrlized := $example.name | urlize -}}
           {{- $exampleUrl := urls.JoinPath "/docs" $.Site.Params.docs_version "/examples" $exampleNameUrlized "/" }}
           <a class="d-block link-offset-1" href="{{ $exampleUrl }}"{{ if in $example.name "RTL" }} hreflang="ar"{{ end }}>
@@ -52,7 +52,7 @@ <h3 class="h5 mb-1">
             {{- $imgPath := urls.JoinPath $imageBasePath (printf "%s.png" $exampleNameUrlized) -}}
             {{- $imgPath2x := urls.JoinPath $imageBasePath (printf "%s@2x.png" $exampleNameUrlized) -}}
             {{- with (imageConfig (path.Join "/site/static" $imgPath)) -}}
-            <img class="img-thumbnail mb-3"
+            <img class="img-thumbnail mb-tall"
                  srcset="{{ $imgPath }}, {{ $imgPath2x }} 2x"
                  src="{{ $imgPath }}"
                  alt=""
@@ -60,7 +60,7 @@ <h3 class="h5 mb-1">
                  height="{{ .Height }}"
                  loading="lazy">
             {{- end }}
-            <h3 class="h5 mb-1">
+            <h3 class="h5 mb-shortest">
               {{ $example.name }}
             </h3>
           </a>
diff --git a/site/layouts/partials/footer.html b/site/layouts/partials/footer.html
index 18372b4683..63e4b16cec 100644
--- a/site/layouts/partials/footer.html
+++ b/site/layouts/partials/footer.html
@@ -9,7 +9,7 @@ <h2 class="visually-hidden">OUDS Web sitemap & information</h2>
       <div class="row">
         <div class="footer-column col-md-6 col-lg-2">
           <h3 class="accordion-header footer-heading" id="headingLinks">
-            <button class="accordion-button collapsed container-fluid container-max-width px-1 d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#collapseLinks" aria-expanded="true" aria-controls="collapseLinks">
+            <button class="accordion-button collapsed container-fluid container-max-width px-shortest d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#collapseLinks" aria-expanded="true" aria-controls="collapseLinks">
               Links
             </button>
             <span class="d-none d-md-flex">Links</span>
@@ -25,7 +25,7 @@ <h3 class="accordion-header footer-heading" id="headingLinks">
         </div>
         <div class="footer-column col-md-6 col-lg-2">
           <h3 class="accordion-header footer-heading" id="headingGuides">
-            <button class="accordion-button collapsed container-fluid container-max-width px-1 d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#collapseGuides" aria-expanded="true" aria-controls="collapseGuides">
+            <button class="accordion-button collapsed container-fluid container-max-width px-shortest d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#collapseGuides" aria-expanded="true" aria-controls="collapseGuides">
               Guides
             </button>
             <span class="d-none d-md-flex">Guides</span>
@@ -38,7 +38,7 @@ <h3 class="accordion-header footer-heading" id="headingGuides">
         </div>
         <div class="footer-column col-md-6 col-lg-2">
           <h3 class="accordion-header footer-heading" id="headingProjects">
-            <button class="accordion-button collapsed container-fluid container-max-width px-1 d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#collapseProjects" aria-expanded="true" aria-controls="collapseProjects">
+            <button class="accordion-button collapsed container-fluid container-max-width px-shortest d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#collapseProjects" aria-expanded="true" aria-controls="collapseProjects">
               Projects
             </button>
             <span class="d-none d-md-flex">Projects</span>
@@ -53,7 +53,7 @@ <h3 class="accordion-header footer-heading" id="headingProjects">
         </div>
         <div class="footer-column col-md-6 col-lg-2">
           <h3 class="accordion-header footer-heading" id="headingCommunity">
-            <button class="accordion-button collapsed container-fluid container-max-width px-1 d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#collapseCommunity" aria-expanded="true" aria-controls="collapseCommunity">
+            <button class="accordion-button collapsed container-fluid container-max-width px-shortest d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#collapseCommunity" aria-expanded="true" aria-controls="collapseCommunity">
               Community
             </button>
             <span class="d-none d-md-flex">Community</span>
@@ -65,15 +65,15 @@ <h3 class="accordion-header footer-heading" id="headingCommunity">
             </ul>
           </div>
         </div>
-        <div class="footer-column accordion-header col-md-12 col-lg-4 mb-3 pt-3 pt-lg-4 px-1 px-lg-0 fw-bold small">
-          <p class="mb-lg-1">
+        <div class="footer-column accordion-header col-md-12 col-lg-4 mb-tall pt-tall pt-lg-tallest px-shortest px-lg-none fw-bold small">
+          <p class="mb-lg-shortest">
             This documentation is an adaptation made by Orange. Original version designed and built with all the love in the world by the <a href="https://github.com/orgs/twbs/people" target="_blank" rel="noopener">Bootstrap core team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors" target="_blank" rel="noopener">their contributors</a>.
           </p>
-          <p class="mb-lg-1">
+          <p class="mb-lg-shortest">
             Orange modified code licensed <a href="{{ .Site.Params.repo }}/blob/ouds/main/LICENSE" target="_blank" rel="license noopener">MIT</a>-&nbsp;just like <a href="https://github.com/twbs/bootstrap/blob/main/LICENSE" target="_blank" rel="license noopener" title="Bootstrap's license" aria-label="Bootstrap's license">Bootstrap</a>, docs <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="license noopener">CC BY 3.0</a>.
           </p>
-          <p class="mb-lg-1">Currently v{{ .Site.Params.current_version }}.</p>
-          <p class="mb-lg-1">
+          <p class="mb-lg-shortest">Currently v{{ .Site.Params.current_version }}.</p>
+          <p class="mb-lg-shortest">
             <a href="https://www.netlify.com" target="_blank" rel="noopener">
               <img src="https://www.netlify.com/img/global/badges/netlify-dark.svg" alt="Deployed by Netlify" width="89" height="40">
             </a>
diff --git a/site/layouts/partials/guide-footer.md b/site/layouts/partials/guide-footer.md
index 22d4c14b89..14754cc6ef 100644
--- a/site/layouts/partials/guide-footer.md
+++ b/site/layouts/partials/guide-footer.md
@@ -1,3 +1,3 @@
-<hr class="my-5">
+<hr class="my-huge">
 
 _See something wrong or out of date here? Please [open an issue on GitHub]({{ .Site.Params.repo }}/issues/new/choose). Need help troubleshooting? [Search or start a discussion]({{ .Site.Params.repo }}/discussions) on GitHub._
diff --git a/site/layouts/partials/home/css-variables.html b/site/layouts/partials/home/css-variables.html
index f7495cd11c..8625439260 100644
--- a/site/layouts/partials/home/css-variables.html
+++ b/site/layouts/partials/home/css-variables.html
@@ -1,21 +1,21 @@
-<section class="row g-lg-5 pb-md-5 mb-5 align-items-center">
-  <div class="col-lg-8 mb-5">
-    <div class="masthead-followup-icon d-inline-block mb-3" style="--bg-rgb: var(--bd-pink-rgb);">
+<section class="row g-lg-spacious pb-md-huge mb-huge align-items-center">
+  <div class="col-lg-8 mb-huge">
+    <div class="masthead-followup-icon d-inline-block mb-tall" style="--bg-rgb: var(--bd-pink-rgb);">
       <svg class="bi fs-1"><use xlink:href="#braces"></use></svg>
     </div>
-    <h2 class="mb-3 fw-semibold lh-sm">Build and extend in real-time with CSS&nbsp;variables</h2>
+    <h2 class="mb-tall fw-semibold lh-sm">Build and extend in real-time with CSS&nbsp;variables</h2>
     <p class="lead fw-normal">
       OUDS Web is evolving with each release to better utilize CSS variables for global theme styles, individual components, and even utilities. We provide dozens of variables for colors, font styles, and more at a <code>:root</code> level for use anywhere. On components and utilities, CSS variables are scoped to the relevant class and can easily be modified.
     </p>
-    <p class="d-flex align-items-start flex-column lead fw-normal mb-0">
-      <a href="/docs/{{ .Site.Params.docs_version }}/customize/css-variables/" class="icon-link icon-link-hover fw-semibold mb-3">
+    <p class="d-flex align-items-start flex-column lead fw-normal mb-none">
+      <a href="/docs/{{ .Site.Params.docs_version }}/customize/css-variables/" class="icon-link icon-link-hover fw-semibold mb-tall">
         Learn more about CSS variables
         <svg class="bi"><use xlink:href="#arrow-right"></use></svg>
       </a>
     </p>
   </div>
-  <div class="row gx-lg-5">
-    <div class="col-lg-6 mb-3">
+  <div class="row gx-lg-spacious">
+    <div class="col-lg-6 mb-tall">
       <h3 class="fw-semibold">Using CSS variables</h3>
       <p>Use any of our <a href="/docs/{{ .Site.Params.docs_version }}/customize/css-variables/#root-variables">global <code>:root</code> variables</a> to write new styles. CSS variables use the <code>var(--bs-variableName)</code> syntax and can be inherited by children elements.</p>
       {{ highlight (printf `.component {
@@ -29,7 +29,7 @@ <h3 class="fw-semibold">Using CSS variables</h3>
   color: var(--bs-purple);
 }`) "scss" "" }}
     </div>
-    <div class="col-lg-6 mb-3">
+    <div class="col-lg-6 mb-tall">
       <h3 class="fw-semibold">Customizing via CSS variables</h3>
       <p>Override global, component, or utility class variables to customize OUDS Web just how you like. No need to redeclare each rule, just a new variable value.</p>
       {{ highlight (printf `body {
diff --git a/site/layouts/partials/home/customize.html b/site/layouts/partials/home/customize.html
index 29fb58f8c8..65056e50ca 100644
--- a/site/layouts/partials/home/customize.html
+++ b/site/layouts/partials/home/customize.html
@@ -1,8 +1,8 @@
-<section class="col-lg-7 mb-5">
-  <div class="masthead-followup-icon d-inline-block mb-3" style="--bg-rgb: var(--bs-primary-rgb);">
+<section class="col-lg-7 mb-huge">
+  <div class="masthead-followup-icon d-inline-block mb-tall" style="--bg-rgb: var(--bs-primary-rgb);">
     <svg class="bi fs-1"><use xlink:href="#palette2"></use></svg>
   </div>
-  <h2 class="mb-3 fw-semibold lh-sm">Customize everything with&nbsp;Sass</h2>
+  <h2 class="mb-tall fw-semibold lh-sm">Customize everything with&nbsp;Sass</h2>
   <p class="lead fw-normal">
     OUDS Web utilizes Sass for a modular and customizable architecture. Import only the components you need, enable global options like gradients and shadows, and write your own CSS with our variables, maps, functions, and mixins.
   </p>
@@ -14,7 +14,7 @@ <h2 class="mb-3 fw-semibold lh-sm">Customize everything with&nbsp;Sass</h2>
   </p>
 </section>
 
-<section class="row g-lg-5 mb-5 pb-md-5">
+<section class="row g-lg-spacious mb-huge pb-md-huge">
   <div class="col-lg-6">
     <h3>Include all of OUDS Web's Sass</h3>
     <p>Import one stylesheet and you're off to the races with every feature of our CSS.</p>
@@ -42,8 +42,8 @@ <h3>Include what you need</h3>
 // Required OUDS Web imports
 @import "../node_modules/@ouds/web/scss/tokens/raw";
 @import "../node_modules/@ouds/web/scss/tokens/semantic";
+@import "../node_modules/@ouds/web/scss/tokens/composite";
 @import "../node_modules/@ouds/web/scss/tokens/component";
-@import "../node_modules/@ouds/web/scss/ouds-maps";
 @import "../node_modules/@ouds/web/scss/variables";
 @import "../node_modules/@ouds/web/scss/variables-dark";
 @import "../node_modules/@ouds/web/scss/maps";
diff --git a/site/layouts/partials/home/get-started.html b/site/layouts/partials/home/get-started.html
index 66df80f754..8323dd9b01 100644
--- a/site/layouts/partials/home/get-started.html
+++ b/site/layouts/partials/home/get-started.html
@@ -1,24 +1,24 @@
-<div class="col-lg-7 mx-auto pb-3 mb-3 mb-md-5 text-md-center">
-  <div class="masthead-followup-icon d-inline-block mb-3" style="--bg-rgb: var(--bs-primary-rgb);">
+<div class="col-lg-7 mx-auto pb-tall mb-tall mb-md-huge text-md-center">
+  <div class="masthead-followup-icon d-inline-block mb-tall" style="--bg-rgb: var(--bs-primary-rgb);">
     <svg class="bi fs-1"><use xlink:href="#code"></use></svg>
   </div>
-  <h2 class="mb-3 lh-sm fw-semibold">Get started any way you&nbsp;want</h2>
+  <h2 class="mb-tall lh-sm fw-semibold">Get started any way you&nbsp;want</h2>
   <p class="lead fw-normal">
     Jump right into building with OUDS Web—use the CDN, install it via package manager, or download the source code.
   </p>
   <p class="d-flex justify-content-md-start justify-content-md-center lead fw-normal">
-    <a href="/docs/{{ .Site.Params.docs_version }}/getting-started/download/" class="icon-link icon-link-hover fw-semibold ps-md-4">
+    <a href="/docs/{{ .Site.Params.docs_version }}/getting-started/download/" class="icon-link icon-link-hover fw-semibold ps-md-tallest">
       Read installation docs
       <svg class="bi"><use xlink:href="#arrow-right"></use></svg>
     </a>
   </p>
 </div>
 
-<section class="row g-2 g-lg-5 mb-5 pb-5 justify-content-center">
-  <div class="col-lg-6 py-lg-4 pe-lg-5">
-    <svg class="bi mb-2 fs-2 text-body-secondary"><use xlink:href="#box-seam"></use></svg>
+<section class="row g-shorter g-lg-spacious mb-huge pb-huge justify-content-center">
+  <div class="col-lg-6 py-lg-tallest pe-lg-huge">
+    <svg class="bi mb-short fs-2 text-body-secondary"><use xlink:href="#box-seam"></use></svg>
     <h3 class="fw-semibold">Install via package manager</h3>
-    <p class="pe-lg-5">
+    <p class="pe-lg-huge">
       Install OUDS Web's source Sass and JavaScript files via npm, yarn, Composer, or NuGet. Package managed installs don't include documentation or our full build scripts.
     </p>
     {{ highlight (printf ("npm install @ouds/web@%s") .Site.Params.current_version) "sh" "" }}
@@ -27,10 +27,10 @@ <h3 class="fw-semibold">Install via package manager</h3>
       <a href="/docs/{{ .Site.Params.docs_version }}/getting-started/download/">Read our installation docs</a> for more info and additional package managers.
     </p>
   </div>
-  <div class="col-lg-6 py-lg-4 ps-lg-5 border-lg-start">
-    <svg class="bi mb-2 fs-2 text-body-secondary"><use xlink:href="#globe2"></use></svg>
+  <div class="col-lg-6 py-lg-tallest ps-lg-huge border-lg-start">
+    <svg class="bi mb-short fs-2 text-body-secondary"><use xlink:href="#globe2"></use></svg>
     <h3 class="fw-semibold">Include via CDN</h3>
-    <p class="pe-lg-5">
+    <p class="pe-lg-huge">
       When you only need to include OUDS Web's compiled CSS or JS, you can use <a href="https://www.jsdelivr.com/package/npm/uds-web">jsDelivr</a>. See it in action with our simple <a href="/docs/{{ .Site.Params.docs_version }}/getting-started/introduction/#quick-start">quick start</a>, or <a href="/docs/{{ .Site.Params.docs_version }}/examples/">browse the examples</a> to jumpstart your next project. You can also choose to include Popper and our JS <a href="/docs/{{ .Site.Params.docs_version }}/getting-started/introduction/#separate">separately</a>.
     </p>
     {{ highlight (printf (`<link href="%s" rel="stylesheet" integrity=%q crossorigin="anonymous">`) .Site.Params.cdn.css (.Site.Params.cdn.css_hash | safeHTMLAttr)) "html" "" }}
diff --git a/site/layouts/partials/home/masthead.html b/site/layouts/partials/home/masthead.html
index 26c4a81033..244ac0f85a 100644
--- a/site/layouts/partials/home/masthead.html
+++ b/site/layouts/partials/home/masthead.html
@@ -1,33 +1,33 @@
-<div class="bd-masthead mb-3" id="content">
+<div class="bd-masthead mb-tall" id="content">
   <div class="container-fluid container-max-width bd-gutter">
-    <div class="col-md-8 mx-auto text-center pt-lg-5">
+    <div class="col-md-8 mx-auto text-center pt-lg-huge">
       <!--
-      <p class="d-flex flex-column flex-lg-row justify-content-center align-items-center mb-4 text-dark lh-sm text-decoration-none">
-        <a href="/docs/{{ .Site.Params.docs_version }}/migration" class="tag me-2">New in v0.0</a>
+      <p class="d-flex flex-column flex-lg-row justify-content-center align-items-center mb-tallest text-dark lh-sm text-decoration-none">
+        <a href="/docs/{{ .Site.Params.docs_version }}/migration" class="tag me-short">New in v0.0</a>
         <span class="text-body-secondary">Color mode support, expanded color palette, and more!</span>
       </p>
       -->
-      <h1 class="mb-3 display-1">Build fast, responsive sites with OUDS Web</h1>
-      <p class="lead mb-2">
+      <h1 class="mb-tall display-1">Build fast, responsive sites with OUDS Web</h1>
+      <p class="lead mb-short">
         Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins.
       </p>
-      <p class="lead mb-4">
+      <p class="lead mb-tallest">
         OUDS Web is a Bootstrap based, Orange branded accessible and ergonomic components library.
       </p>
-      <div class="d-flex flex-column flex-lg-row align-items-md-stretch justify-content-md-center gap-3 mb-4">
+      <div class="d-flex flex-column flex-lg-row align-items-md-stretch justify-content-md-center gap-tall mb-tallest">
         <div class="d-inline-block v-align-middle fs-5" style="min-width: fit-content;">
           {{ highlight (printf ("npm i @ouds/web@%s") .Site.Params.current_version) "sh" "" }}
         </div>
         <a href="/docs/{{ .Site.Params.docs_version }}/getting-started/introduction/" class="btn btn-lg btn-primary">
-          <svg class="bi me-2 fs-2" aria-hidden="true"><use xlink:href="#book-half"></use></svg>
+          <svg class="bi me-short fs-2" aria-hidden="true"><use xlink:href="#book-half"></use></svg>
           Read the docs
         </a>
       </div>
-      <p class="text-body-secondary mb-0">
+      <p class="text-body-secondary mb-none">
         Currently <strong>v{{ .Site.Params.current_version }}</strong>
-        <span class="px-1">&middot;</span>
+        <span class="px-shortest">&middot;</span>
         <a href="/docs/{{ .Site.Params.docs_version }}/getting-started/download/" class="link-secondary">Download</a>
-        <span class="px-1">&middot;</span>
+        <span class="px-shortest">&middot;</span>
         <a href="/docs/versions/" class="link-secondary text-nowrap">All releases</a>
       </p>
     </div>
diff --git a/site/layouts/partials/skippy.html b/site/layouts/partials/skippy.html
index 168505214e..6f13333da5 100644
--- a/site/layouts/partials/skippy.html
+++ b/site/layouts/partials/skippy.html
@@ -1,9 +1,9 @@
 <a id="top"></a><!-- OUDS mod: anchor for back-to-top link -->
 <div class="skippy visually-hidden-focusable overflow-hidden position-fixed top-0 end-0 start-0">
-  <nav aria-label="Skip links" class="container-fluid container-max-width py-1 ps-5">
-    <a class="d-inline-flex p-2 ms-3 bg-black" href="#content">Skip to main content</a>
+  <nav aria-label="Skip links" class="container-fluid container-max-width py-shortest ps-huge">
+    <a class="d-inline-flex p-short ms-tall bg-black" href="#content">Skip to main content</a>
     {{ if (eq .Page.Layout "docs") -}}
-    <a class="d-none d-md-inline-flex p-2 bg-black" href="#bd-docs-nav">Skip to docs navigation</a>
+    <a class="d-none d-md-inline-flex p-short bg-black" href="#bd-docs-nav">Skip to docs navigation</a>
     {{- end }}
   </nav>
 </div>
diff --git a/site/layouts/partials/theme-toggler.html b/site/layouts/partials/theme-toggler.html
index dc1611c1d2..cebf8ef418 100644
--- a/site/layouts/partials/theme-toggler.html
+++ b/site/layouts/partials/theme-toggler.html
@@ -7,26 +7,26 @@
         {{ if not $isExamples }}data-bs-display="static"{{ end }}
         aria-label="Toggle mode (auto)">
   <svg class="bi theme-icon-active"><use href="#ui-auto-mode"></use></svg>
-  <span class="{{ if $isExamples }}visually-hidden{{ else }}d-lg-none ms-2{{ end }}" id="bd-theme-text">Toggle mode</span>
+  <span class="{{ if $isExamples }}visually-hidden{{ else }}d-lg-none ms-short{{ end }}" id="bd-theme-text">Toggle mode</span>
 </button>
-<ul class="dropdown-menu dropdown-menu-end{{ if $isExamples }} shadow{{ else }} mb-2{{ end }}" aria-labelledby="bd-theme-text">
+<ul class="dropdown-menu dropdown-menu-end{{ if $isExamples }} shadow{{ else }} mb-short{{ end }}" aria-labelledby="bd-theme-text">
   <li>
     <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="light" aria-pressed="false">
-      <svg class="bi me-2"><use href="#ui-light-mode"></use></svg>
+      <svg class="bi me-short"><use href="#ui-light-mode"></use></svg>
       Light
       <svg class="bi ms-auto d-none"><use href="#check2"></use></svg>
     </button>
   </li>
   <li>
     <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="dark" aria-pressed="false">
-      <svg class="bi me-2"><use href="#ui-dark-mode"></use></svg>
+      <svg class="bi me-short"><use href="#ui-dark-mode"></use></svg>
       Dark
       <svg class="bi ms-auto d-none"><use href="#check2"></use></svg>
     </button>
   </li>
   <li>
     <button type="button" class="dropdown-item d-flex align-items-center active" data-bs-theme-value="auto" aria-pressed="true">
-      <svg class="bi me-2"><use href="#ui-auto-mode"></use></svg>
+      <svg class="bi me-short"><use href="#ui-auto-mode"></use></svg>
       Auto
       <svg class="bi ms-auto d-none"><use href="#check2"></use></svg>
     </button>
diff --git a/site/layouts/shortcodes/bootstrap-compatibility.html b/site/layouts/shortcodes/bootstrap-compatibility.html
index 40186a025a..87c55c0bc5 100644
--- a/site/layouts/shortcodes/bootstrap-compatibility.html
+++ b/site/layouts/shortcodes/bootstrap-compatibility.html
@@ -1,9 +1,9 @@
 {{- $markdown := .Get 0 | default true -}}
 
-<details class="mb-4">
-  <summary class="py-2">Bootstrap <span class="tag tag-sm float-end"><code class="text-body">$enable-bootstrap-compatibility: true</code></span></summary>
+<details class="mb-tallest">
+  <summary class="py-short">Bootstrap <span class="tag tag-sm float-end"><code class="text-body">$enable-bootstrap-compatibility: true</code></span></summary>
 
-  <div class="alert alert-info alert-sm mt-2 mb-4" role="alert">
+  <div class="alert alert-info alert-sm mt-short mb-tallest" role="alert">
     <span class="alert-icon"><span class="visually-hidden">Info</span></span>
     <p>This part is enabled only when <code>$enable-bootstrap-compatibility</code> is set to <code>true</code>. Read more about <a href="/docs/extend/approach/#bootstrap-compatibility">Bootstrap compatibility</a>.</p>
   </div>
diff --git a/site/layouts/shortcodes/design-callout-alert.html b/site/layouts/shortcodes/design-callout-alert.html
index 31ee49d7e0..bf31f34c15 100644
--- a/site/layouts/shortcodes/design-callout-alert.html
+++ b/site/layouts/shortcodes/design-callout-alert.html
@@ -7,7 +7,7 @@
 <div class="alert alert-{{ $level }}">
   <span class="alert-icon"><span class="visually-hidden">{{ $level }}</span></span>
   <div>
-    <p class="alert-heading mb-1">
+    <p class="alert-heading mb-shortest">
       {{- if eq $level "danger" -}}
         Incompatibility with Orange Unified Design System.
         <a href="/docs/{{ .Site.Params.docs_version }}/getting-started/introduction/">More information</a>
diff --git a/site/layouts/shortcodes/example.html b/site/layouts/shortcodes/example.html
index b23d6014e6..72406d1392 100644
--- a/site/layouts/shortcodes/example.html
+++ b/site/layouts/shortcodes/example.html
@@ -22,7 +22,7 @@
 <div class="bd-example-snippet bd-code-snippet">
   {{- if eq $show_preview true }}
   <!-- OUDS mod: added `order-first` to handle the focus order -->
-  <div{{ with $id }} id="{{ . }}"{{ end }} class="bd-example order-first m-0 border-0{{ with $class }} {{ . }}{{ end }}">
+  <div{{ with $id }} id="{{ . }}"{{ end }} class="bd-example order-first m-none border-0{{ with $class }} {{ . }}{{ end }}">
     {{ $content }}
   </div>
   {{- end }}
@@ -37,13 +37,13 @@
 
     {{- if eq $show_preview true -}}
       <!-- OUDS mod: added `order-first` to handle the focus order -->
-      <div class="d-flex order-first align-items-center highlight-toolbar ps-3 pe-2 py-1 border-0 border-top border-bottom border-subtle border-1">
+      <div class="d-flex order-first align-items-center highlight-toolbar ps-tall pe-short py-shortest border-0 border-top border-bottom border-subtle border-1">
         <small class="font-monospace text-body-secondary text-uppercase">{{ $lang }}</small>
         <div class="d-flex ms-auto">
           <button type="button" class="btn-edit text-nowrap"{{ with $stackblitz_add_js }} data-sb-js-snippet="{{ $stackblitz_add_js }}"{{ end }} title="Try it on StackBlitz">
             <svg class="bi" aria-hidden="true"><use xlink:href="#lightning-charge-fill"/></svg>
           </button>
-          <button type="button" class="btn-clipboard mt-0 me-0" title="Copy to clipboard">
+          <button type="button" class="btn-clipboard mt-none me-none" title="Copy to clipboard">
             <svg class="bi" aria-hidden="true"><use xlink:href="#clipboard"/></svg>
           </button>
         </div>
diff --git a/site/layouts/shortcodes/js-docs.html b/site/layouts/shortcodes/js-docs.html
index a9f766acc7..ba4397b075 100644
--- a/site/layouts/shortcodes/js-docs.html
+++ b/site/layouts/shortcodes/js-docs.html
@@ -34,9 +34,9 @@
 
   <div class="bd-example-snippet bd-code-snippet bd-file-ref">
     <!-- OUDS mod: added `.border-1` and `.border-subtle` -->
-    <div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-bottom border-1 border-subtle">
+    <div class="d-flex align-items-center highlight-toolbar ps-tall pe-short py-shortest border-bottom border-1 border-subtle">
       <!-- OUDS mod: added `me-5` -->
-      <a class="me-5 font-monospace link-body-emphasis link-underline-secondary link-underline-opacity-0 link-underline-opacity-100-hover small" href="{{ .Site.Params.repo }}/blob/v{{ .Site.Params.current_version }}/{{ $file | replaceRE `\\` "/" }}">
+      <a class="me-huge font-monospace link-body-emphasis link-underline-secondary link-underline-opacity-0 link-underline-opacity-100-hover small" href="{{ .Site.Params.repo }}/blob/v{{ .Site.Params.current_version }}/{{ $file | replaceRE `\\` "/" }}">
         {{- $file -}}
       </a>
     </div>
@@ -65,8 +65,8 @@
     {{- highlight $output "js" "" -}}
 
     <!-- OUDS mod: moved this section and changed the positioning to handle a different focus order -->
-    <div class="position-absolute top-0 mt-1 end-0 me-2">
-      <button type="button" class="btn-clipboard mt-0 me-0" title="Copy to clipboard">
+    <div class="position-absolute top-0 mt-shortest end-0 me-short">
+      <button type="button" class="btn-clipboard mt-none me-none" title="Copy to clipboard">
         <svg class="bi" aria-hidden="true"><use xlink:href="#clipboard"/></svg>
       </button>
     </div>
diff --git a/site/layouts/shortcodes/scss-docs.html b/site/layouts/shortcodes/scss-docs.html
index f1c83520f8..1bc2d0c6c5 100644
--- a/site/layouts/shortcodes/scss-docs.html
+++ b/site/layouts/shortcodes/scss-docs.html
@@ -47,9 +47,9 @@
 
   <div class="bd-example-snippet bd-code-snippet bd-file-ref">
     <!-- OUDS mod: added `.border-1` and `.border-subtle` -->
-    <div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-bottom border-1 border-subtle">
+    <div class="d-flex align-items-center highlight-toolbar ps-tall pe-short py-shortest border-bottom border-1 border-subtle">
       <!-- OUDS mod: added `me-5` -->
-      <a class="me-5 font-monospace link-body-emphasis link-underline-secondary link-underline-opacity-0 link-underline-opacity-100-hover small" href="{{ .Site.Params.repo }}/blob/v{{ .Site.Params.current_version }}/{{ $file | replaceRE `\\` "/" }}">
+      <a class="me-huge font-monospace link-body-emphasis link-underline-secondary link-underline-opacity-0 link-underline-opacity-100-hover small" href="{{ .Site.Params.repo }}/blob/v{{ .Site.Params.current_version }}/{{ $file | replaceRE `\\` "/" }}">
         {{- $file -}}
       </a>
     </div>
@@ -78,8 +78,8 @@
     {{- highlight $output "scss" "" -}}
 
     <!-- OUDS mod: moved this section and changed the positioning to handle a different focus order -->
-    <div class="position-absolute top-0 mt-1 end-0 me-2">
-      <button type="button" class="btn-clipboard mt-0 me-0" title="Copy to clipboard">
+    <div class="position-absolute top-0 mt-shortest end-0 me-short">
+      <button type="button" class="btn-clipboard mt-none me-none" title="Copy to clipboard">
         <svg class="bi" aria-hidden="true"><use xlink:href="#clipboard"/></svg>
       </button>
     </div>
diff --git a/site/layouts/shortcodes/svg-docs.html b/site/layouts/shortcodes/svg-docs.html
index 05a376c264..4d7501c1d4 100644
--- a/site/layouts/shortcodes/svg-docs.html
+++ b/site/layouts/shortcodes/svg-docs.html
@@ -35,7 +35,7 @@
 
   <p class="text-end">
     <a class="btn btn-primary" href="data:image/svg+xml,{{ $target }}" download="{{ delimit $output "" }}">
-      Download<span class="small ms-1">(SVG, {{div $size 1000}}ko)</span>
+      Download<span class="small ms-shortest">(SVG, {{div $size 1000}}ko)</span>
     </a>
   </p>
 {{- end -}}
diff --git a/stories/create-stories-from-doc.js b/stories/create-stories-from-doc.js
index d349dc168f..dfb42489fb 100644
--- a/stories/create-stories-from-doc.js
+++ b/stories/create-stories-from-doc.js
@@ -97,7 +97,7 @@ createDirectoryIfNeeded(outputDirectory);
         mdxContent += `<Canvas>\n<Story of={${file[0]}_Stories.${file[0]}_${index}}/>\n</Canvas>\n\n`
 
         // Automatically remove HTML comments that would break the story
-        example[0] = `<div class="${Object.values(example[1]).join(' ')} m-0 border-0">${example[0].replace(/<!--[\S\s]*?-->/gm, '').replaceAll('`', '\\`').replaceAll('${', '\\${')}</div>`
+        example[0] = `<div class="${Object.values(example[1]).join(' ')} m-none border-0">${example[0].replace(/<!--[\S\s]*?-->/gm, '').replaceAll('`', '\\`').replaceAll('${', '\\${')}</div>`
 
         // Insert some specific JavaScript
         example[0] += '\n<script type="text/javascript">\n  /* global oudsWeb: false */\n  document.querySelectorAll(\'[href]\').forEach(link => {link.addEventListener(\'click\', event => {event.preventDefault()})})\n</script>' // Remove links behavior