From 4715bbc9c0e2ddbc19b27c1b4f4b0c7826200650 Mon Sep 17 00:00:00 2001
From: Lauri Eskola <lauri.eskola@acquia.com>
Date: Wed, 22 Dec 2021 16:36:07 +0200
Subject: [PATCH] Issue #3255119 by mherchel, andy-blum: Olivero: Use CSS
 custom properties to for the grid related variables

---
 core/themes/olivero/css/base/variables.css    | 124 ++++++++++--------
 .../olivero/css/base/variables.pcss.css       |  91 ++++++-------
 .../css/components/content-moderation.css     |  29 +---
 .../components/content-moderation.pcss.css    |  15 +--
 .../olivero/css/components/embedded-media.css |  64 +++------
 .../css/components/embedded-media.pcss.css    |  23 +---
 .../css/components/header-navigation.css      |   4 +-
 .../css/components/header-navigation.pcss.css |   4 +-
 .../css/components/header-search-wide.css     |   4 +-
 .../components/header-search-wide.pcss.css    |   4 +-
 .../css/components/header-site-branding.css   |  35 +----
 .../components/header-site-branding.pcss.css  |  16 +--
 .../olivero/css/components/node-teaser.css    |  46 +------
 .../css/components/node-teaser.pcss.css       |  24 +---
 .../olivero/css/components/wide-image.css     |  60 ++-------
 .../css/components/wide-image.pcss.css        |  30 +----
 core/themes/olivero/css/layout/grid.css       |  16 +--
 core/themes/olivero/css/layout/grid.pcss.css  |  17 +--
 .../layout/layout-builder-fourcol-section.css |  26 ++--
 .../layout-builder-fourcol-section.pcss.css   |  16 +--
 .../layout-builder-threecol-section.css       |  26 ++--
 .../layout-builder-threecol-section.pcss.css  |  20 +--
 .../layout/layout-builder-twocol-section.css  |  60 ++++-----
 .../layout-builder-twocol-section.pcss.css    |  40 +++---
 .../css/layout/layout-content-narrow.css      | 119 ++---------------
 .../css/layout/layout-content-narrow.pcss.css |  56 +-------
 core/themes/olivero/css/layout/layout.css     |  14 +-
 .../themes/olivero/css/layout/layout.pcss.css |   4 -
 .../css/layout/region-content-below.css       |  12 +-
 .../css/layout/region-content-below.pcss.css  |   8 +-
 30 files changed, 314 insertions(+), 693 deletions(-)

diff --git a/core/themes/olivero/css/base/variables.css b/core/themes/olivero/css/base/variables.css
index 678751daf91..6c23c928127 100644
--- a/core/themes/olivero/css/base/variables.css
+++ b/core/themes/olivero/css/base/variables.css
@@ -4,16 +4,31 @@
  * https://www.drupal.org/node/3084859
  * @preserve
  */
-/*
-  Custom CSS properties.
 
-  These are "compiled" by postcss/postcss-custom-properties for IE11 compatibility.
+/*
+  Global CSS custom properties.
 */
+
+/*
+ * Media query breakpoints.
+ * Processed by postcss/postcss-custom-media.
+ */
+
+/* Navigation related breakpoints */
+
+/* Grid related breakpoints */
+
+/* Grid shifts from 6 to 14 columns. */
+
+/* Width of the entire grid maxes out. */
+
+/* stylelint-disable */
+
 :root {
   --font-sans: "metropolis", sans-serif;
   --font-serif: "Lora", "georgia", serif;
 
-  /* Typography */
+  /* Typography helpers. */
   --font-size-base: 1rem;
   --font-size-l: 1.125rem;
   --font-size-s: 0.875rem;
@@ -22,68 +37,73 @@
   --line-height-base: 1.6875rem;
   --line-height-s: 1.125rem;
 
-  /* Layout */
+  /* Layout helpers. */
   --max-width: 84.375rem;
-  --max-bg-color: 98.125rem;
+  --max-bg-color: 98.125rem; /* Width to which the background color extends to. */
   --sp: 1.125rem;
   --content-left: 5.625rem;
-  --container-padding: var(--sp);
-  --container-padding-nav: var(--sp2);
   --site-header-height-wide: var(--sp10);
+  --container-padding: var(--sp); /* Inline padding on .container elements. */
+}
+
+@media (min-width: 75rem) {
+
+:root {
+    --container-padding: var(--sp2);
+}
+  }
+
+:root {
 
   /* Drupal administrative toolbar heights and width. */
   --toolbar-height: 2.4375rem;
   --toolbar-tray-height: 2.5rem;
   --toolbar-tray-vertical-width: 14.9375rem;
 
-  /*
-    Grid helpers.
-
-    These variables help authors apply widths and negative margins to break items out of
-    the grid, while still conforming to the larger grid system.
-
-    Note we cannot change the values of these custom properties within media queries,
-    as they are processed by postcss/postcss-custom-properties (for IE11 compatibility),
-    which does not support that functionality. Therefore, we need a separate custom
-    property for each breakpoint. 😭
-  */
-
-  --scrollbar-width: 0.9375rem; /* Approximate width of a scrollbar. Doesn't have to be perfect. */
-
-  /* Grid gap across various breakpoints. */
-  --grid-gap: var(--sp);
-  --grid-gap--md: var(--sp2);
-  --grid-gap--lg: var(--grid-gap--md);
-  --grid-gap--nav: var(--grid-gap--md);
-  --grid-gap--max: var(--grid-gap--md);
-
-  /* Column counts at various breakpoints. */
+  /**
+   * Grid helpers.
+   *
+   * These variables help authors apply widths and negative margins to break items out of
+   * the grid, while still conforming to the larger grid system.
+   */
+  --scrollbar-width: 0px; /* Unit must be specified here for calc() to work properly.*/
   --grid-col-count: 6;
-  --grid-col-count--md: 14;
-  --grid-col-count--lg: var(--grid-col-count--md);
-  --grid-col-count--nav: var(--grid-col-count--md);
-  --grid-col-count--max: var(--grid-col-count--md);
+  --grid-gap: var(--sp);
+  --grid-gap-count: calc(var(--grid-col-count) - 1); /* Count of grid-gaps. */
+  --grid-full-width: calc(100vw - var(--sp2) - var(--scrollbar-width)); /* Width of the entire grid. */
+  --grid-col-width: calc((var(--grid-full-width) - var(--grid-gap-count)*var(--grid-gap))/var(--grid-col-count)); /* Width of a grid column. */
+}
 
-  /* Count of grid-gaps at various breakpoints. */
-  --grid-gap-count: calc(var(--grid-col-count) - 1);
-  --grid-gap-count--md: calc(var(--grid-col-count--md) - 1);
-  --grid-gap-count--lg: var(--grid-gap-count--md);
-  --grid-gap-count--nav: var(--grid-gap-count--md);
-  --grid-gap-count--max: var(--grid-gap-count--md);
+@media (min-width: 43.75rem) {
 
-  /* Width of the entire grid at various breakpoints. */
-  --grid-full-width: calc(100vw - var(--sp2));
-  --grid-full-width--md: var(--grid-full-width);
-  --grid-full-width--lg: calc(var(--grid-full-width) - var(--scrollbar-width));
-  --grid-full-width--nav: calc(100vw - var(--scrollbar-width) - var(--content-left) - var(--sp4));
-  --grid-full-width--max: calc(var(--max-width) - var(--sp4));
+:root {
+    --grid-col-count: 14;
+    --grid-gap: var(--sp2);
+}
+  }
 
-  /* Width of a grid column at various breakpoints */
-  --grid-col-width: calc((var(--grid-full-width) - var(--grid-gap-count)*var(--grid-gap))/var(--grid-col-count));
-  --grid-col-width--md: calc((var(--grid-full-width--md) - var(--grid-gap-count--md)*var(--grid-gap--md))/var(--grid-col-count--md));
-  --grid-col-width--lg: calc((var(--grid-full-width--lg) - var(--grid-gap-count--lg)*var(--grid-gap--lg))/var(--grid-col-count--lg));
-  --grid-col-width--nav: calc((var(--grid-full-width--nav) - var(--grid-gap-count--nav)*var(--grid-gap--nav))/var(--grid-col-count--nav));
-  --grid-col-width--max: calc((var(--grid-full-width--max) - var(--grid-gap-count--max)*var(--grid-gap--max))/var(--grid-col-count--max));
+@media (min-width: 62.5rem) {
+
+:root {
+    --scrollbar-width: 0.9375rem; /* Approximate width of a scrollbar. Doesn't have to be perfect. */
+}
+  }
+
+@media (min-width: 75rem) {
+
+:root {
+    --grid-full-width: calc(100vw - var(--scrollbar-width) - var(--content-left) - var(--sp4));
+}
+  }
+
+@media (min-width: 90rem) {
+
+:root {
+    --grid-full-width: calc(var(--max-width) - var(--sp4));
+}
+  }
+
+:root {
 
   /* Layout helpers */
   --sp0-25: calc(var(--sp)*0.25);
diff --git a/core/themes/olivero/css/base/variables.pcss.css b/core/themes/olivero/css/base/variables.pcss.css
index 61ad00b4d30..2e6f116b0d2 100644
--- a/core/themes/olivero/css/base/variables.pcss.css
+++ b/core/themes/olivero/css/base/variables.pcss.css
@@ -1,13 +1,16 @@
 /*
-  Custom CSS properties.
-
-  These are "compiled" by postcss/postcss-custom-properties for IE11 compatibility.
+  Global CSS custom properties.
 */
+
+@import "./media-queries.pcss.css";
+
+/* stylelint-disable */
+
 :root {
   --font-sans: "metropolis", sans-serif;
   --font-serif: "Lora", "georgia", serif;
 
-  /* Typography */
+  /* Typography helpers. */
   --font-size-base: 16px;
   --font-size-l: 18px;
   --font-size-s: 14px;
@@ -16,68 +19,52 @@
   --line-height-base: 27px;
   --line-height-s: 18px;
 
-  /* Layout */
+  /* Layout helpers. */
   --max-width: 1350px;
-  --max-bg-color: 1570px;
+  --max-bg-color: 1570px; /* Width to which the background color extends to. */
   --sp: 18px;
   --content-left: 90px;
-  --container-padding: var(--sp);
-  --container-padding-nav: var(--sp2);
   --site-header-height-wide: var(--sp10);
+  --container-padding: var(--sp); /* Inline padding on .container elements. */
+
+  @media (--nav) {
+    --container-padding: var(--sp2);
+  }
 
   /* Drupal administrative toolbar heights and width. */
   --toolbar-height: 39px;
   --toolbar-tray-height: 40px;
   --toolbar-tray-vertical-width: 239px;
 
-  /*
-    Grid helpers.
-
-    These variables help authors apply widths and negative margins to break items out of
-    the grid, while still conforming to the larger grid system.
-
-    Note we cannot change the values of these custom properties within media queries,
-    as they are processed by postcss/postcss-custom-properties (for IE11 compatibility),
-    which does not support that functionality. Therefore, we need a separate custom
-    property for each breakpoint. 😭
-  */
-
-  --scrollbar-width: 15px; /* Approximate width of a scrollbar. Doesn't have to be perfect. */
-
-  /* Grid gap across various breakpoints. */
-  --grid-gap: var(--sp);
-  --grid-gap--md: var(--sp2);
-  --grid-gap--lg: var(--grid-gap--md);
-  --grid-gap--nav: var(--grid-gap--md);
-  --grid-gap--max: var(--grid-gap--md);
-
-  /* Column counts at various breakpoints. */
+  /**
+   * Grid helpers.
+   *
+   * These variables help authors apply widths and negative margins to break items out of
+   * the grid, while still conforming to the larger grid system.
+   */
+  --scrollbar-width: 0px; /* Unit must be specified here for calc() to work properly.*/
   --grid-col-count: 6;
-  --grid-col-count--md: 14;
-  --grid-col-count--lg: var(--grid-col-count--md);
-  --grid-col-count--nav: var(--grid-col-count--md);
-  --grid-col-count--max: var(--grid-col-count--md);
+  --grid-gap: var(--sp);
+  --grid-gap-count: calc(var(--grid-col-count) - 1); /* Count of grid-gaps. */
+  --grid-full-width: calc(100vw - var(--sp2) - var(--scrollbar-width)); /* Width of the entire grid. */
+  --grid-col-width: calc((var(--grid-full-width) - (var(--grid-gap-count) * var(--grid-gap))) / var(--grid-col-count)); /* Width of a grid column. */
 
-  /* Count of grid-gaps at various breakpoints. */
-  --grid-gap-count: calc(var(--grid-col-count) - 1);
-  --grid-gap-count--md: calc(var(--grid-col-count--md) - 1);
-  --grid-gap-count--lg: var(--grid-gap-count--md);
-  --grid-gap-count--nav: var(--grid-gap-count--md);
-  --grid-gap-count--max: var(--grid-gap-count--md);
+  @media (--md) {
+    --grid-col-count: 14;
+    --grid-gap: var(--sp2);
+  }
 
-  /* Width of the entire grid at various breakpoints. */
-  --grid-full-width: calc(100vw - var(--sp2));
-  --grid-full-width--md: var(--grid-full-width);
-  --grid-full-width--lg: calc(var(--grid-full-width) - var(--scrollbar-width));
-  --grid-full-width--nav: calc(100vw - var(--scrollbar-width) - var(--content-left) - var(--sp4));
-  --grid-full-width--max: calc(var(--max-width) - var(--sp4));
+  @media (--lg) {
+    --scrollbar-width: 15px; /* Approximate width of a scrollbar. Doesn't have to be perfect. */
+  }
 
-  /* Width of a grid column at various breakpoints */
-  --grid-col-width: calc((var(--grid-full-width) - (var(--grid-gap-count) * var(--grid-gap))) / var(--grid-col-count));
-  --grid-col-width--md: calc((var(--grid-full-width--md) - (var(--grid-gap-count--md) * var(--grid-gap--md))) / var(--grid-col-count--md));
-  --grid-col-width--lg: calc((var(--grid-full-width--lg) - (var(--grid-gap-count--lg) * var(--grid-gap--lg))) / var(--grid-col-count--lg));
-  --grid-col-width--nav: calc((var(--grid-full-width--nav) - (var(--grid-gap-count--nav) * var(--grid-gap--nav))) / var(--grid-col-count--nav));
-  --grid-col-width--max: calc((var(--grid-full-width--max) - (var(--grid-gap-count--max) * var(--grid-gap--max))) / var(--grid-col-count--max));
+  @media (--nav) {
+    --grid-full-width: calc(100vw - var(--scrollbar-width) - var(--content-left) - var(--sp4));
+  }
+
+  @media (--grid-max) {
+    --grid-full-width: calc(var(--max-width) - var(--sp4));
+  }
 
   /* Layout helpers */
   --sp0-25: calc(0.25 * var(--sp));
diff --git a/core/themes/olivero/css/components/content-moderation.css b/core/themes/olivero/css/components/content-moderation.css
index 3bba060bc02..e36f7369c13 100644
--- a/core/themes/olivero/css/components/content-moderation.css
+++ b/core/themes/olivero/css/components/content-moderation.css
@@ -110,15 +110,15 @@
 @media (min-width: 43.75rem) {
 
 [dir="ltr"] .layout--content-narrow .entity-moderation-form,[dir="ltr"]  .layout--pass--content-narrow > * .entity-moderation-form,[dir="ltr"]  .layout--content-medium .entity-moderation-form,[dir="ltr"]  .layout--pass--content-medium > * .entity-moderation-form {
-      margin-left: calc(var(--grid-col-width--md)*-2 + var(--grid-gap--md)*-2)
+      margin-left: calc(var(--grid-col-width)*-2 + var(--grid-gap)*-2)
   }
 
 [dir="rtl"] .layout--content-narrow .entity-moderation-form,[dir="rtl"]  .layout--pass--content-narrow > * .entity-moderation-form,[dir="rtl"]  .layout--content-medium .entity-moderation-form,[dir="rtl"]  .layout--pass--content-medium > * .entity-moderation-form {
-      margin-right: calc(var(--grid-col-width--md)*-2 + var(--grid-gap--md)*-2)
+      margin-right: calc(var(--grid-col-width)*-2 + var(--grid-gap)*-2)
   }
 
 .layout--content-narrow .entity-moderation-form, .layout--pass--content-narrow > * .entity-moderation-form, .layout--content-medium .entity-moderation-form, .layout--pass--content-medium > * .entity-moderation-form {
-      width: calc(var(--grid-col-width--md)*14 + var(--grid-gap--md)*13);
+      width: calc(var(--grid-col-count)*var(--grid-col-width) + var(--grid-gap-count)*var(--grid-gap));
       margin-top: var(--sp2);
       margin-bottom: var(--sp4)
   }
@@ -127,30 +127,15 @@
 @media (min-width: 62.5rem) {
 
 [dir="ltr"] .layout--content-narrow .entity-moderation-form,[dir="ltr"]  .layout--pass--content-narrow > * .entity-moderation-form,[dir="ltr"]  .layout--content-medium .entity-moderation-form,[dir="ltr"]  .layout--pass--content-medium > * .entity-moderation-form {
-      margin-left: calc(var(--grid-col-width--lg)*-1 + var(--grid-gap--lg)*-1)
+      margin-left: calc(var(--grid-col-width)*-1 + var(--grid-gap)*-1)
   }
 
 [dir="rtl"] .layout--content-narrow .entity-moderation-form,[dir="rtl"]  .layout--pass--content-narrow > * .entity-moderation-form,[dir="rtl"]  .layout--content-medium .entity-moderation-form,[dir="rtl"]  .layout--pass--content-medium > * .entity-moderation-form {
-      margin-right: calc(var(--grid-col-width--lg)*-1 + var(--grid-gap--lg)*-1)
+      margin-right: calc(var(--grid-col-width)*-1 + var(--grid-gap)*-1)
   }
 
 .layout--content-narrow .entity-moderation-form, .layout--pass--content-narrow > * .entity-moderation-form, .layout--content-medium .entity-moderation-form, .layout--pass--content-medium > * .entity-moderation-form {
-      width: calc(var(--grid-col-width--lg)*12 + var(--grid-gap--lg)*11)
-  }
-    }
-
-@media (min-width: 75rem) {
-
-[dir="ltr"] .layout--content-narrow .entity-moderation-form,[dir="ltr"]  .layout--pass--content-narrow > * .entity-moderation-form,[dir="ltr"]  .layout--content-medium .entity-moderation-form,[dir="ltr"]  .layout--pass--content-medium > * .entity-moderation-form {
-      margin-left: calc(var(--grid-col-width--nav)*-1 + var(--grid-gap--nav)*-1)
-  }
-
-[dir="rtl"] .layout--content-narrow .entity-moderation-form,[dir="rtl"]  .layout--pass--content-narrow > * .entity-moderation-form,[dir="rtl"]  .layout--content-medium .entity-moderation-form,[dir="rtl"]  .layout--pass--content-medium > * .entity-moderation-form {
-      margin-right: calc(var(--grid-col-width--nav)*-1 + var(--grid-gap--nav)*-1)
-  }
-
-.layout--content-narrow .entity-moderation-form, .layout--pass--content-narrow > * .entity-moderation-form, .layout--content-medium .entity-moderation-form, .layout--pass--content-medium > * .entity-moderation-form {
-      width: calc(var(--grid-col-width--nav)*12 + var(--grid-gap--nav)*11)
+      width: calc(var(--grid-col-width)*12 + var(--grid-gap)*11)
   }
     }
 
@@ -165,6 +150,6 @@
   }
 
 .layout--content-narrow .entity-moderation-form, .layout--pass--content-narrow > * .entity-moderation-form, .layout--content-medium .entity-moderation-form, .layout--pass--content-medium > * .entity-moderation-form {
-      width: calc(var(--grid-col-width--max)*10 + var(--grid-gap--max)*11)
+      width: calc(var(--grid-col-width)*10 + var(--grid-gap)*11)
   }
     }
diff --git a/core/themes/olivero/css/components/content-moderation.pcss.css b/core/themes/olivero/css/components/content-moderation.pcss.css
index f22346f23cf..99ba9d8d969 100644
--- a/core/themes/olivero/css/components/content-moderation.pcss.css
+++ b/core/themes/olivero/css/components/content-moderation.pcss.css
@@ -49,23 +49,18 @@
     }
 
     @media (--grid-md) {
-      width: calc(14 * var(--grid-col-width--md) + 13 * var(--grid-gap--md));
+      width: calc(var(--grid-col-count) * var(--grid-col-width) + var(--grid-gap-count) * var(--grid-gap));
       margin-block: var(--sp2) var(--sp4);
-      margin-inline-start: calc(-2 * ((var(--grid-col-width--md) + var(--grid-gap--md))));
+      margin-inline-start: calc(-2 * (var(--grid-col-width) + var(--grid-gap)));
     }
 
     @media (--lg) {
-      width: calc(12 * var(--grid-col-width--lg) + 11 * var(--grid-gap--lg));
-      margin-inline-start: calc(-1 * (var(--grid-col-width--lg) + var(--grid-gap--lg)));
-    }
-
-    @media (--nav) {
-      width: calc(12 * var(--grid-col-width--nav) + 11 * var(--grid-gap--nav));
-      margin-inline-start: calc(-1 * (var(--grid-col-width--nav) + var(--grid-gap--nav)));
+      width: calc(12 * var(--grid-col-width) + 11 * var(--grid-gap));
+      margin-inline-start: calc(-1 * (var(--grid-col-width) + var(--grid-gap)));
     }
 
     @media (--grid-max) {
-      width: calc(10 * var(--grid-col-width--max) + 11 * var(--grid-gap--max));
+      width: calc(10 * var(--grid-col-width) + 11 * var(--grid-gap));
       margin-inline-start: 0;
     }
   }
diff --git a/core/themes/olivero/css/components/embedded-media.css b/core/themes/olivero/css/components/embedded-media.css
index d940ac710af..638530fbc5d 100644
--- a/core/themes/olivero/css/components/embedded-media.css
+++ b/core/themes/olivero/css/components/embedded-media.css
@@ -136,16 +136,21 @@ figcaption {
 
 /* Pull out of grid if nested in content narrow layout. */
 
+.layout--content-narrow .align-right,
+.layout--pass--content-narrow > * .align-right {
+  /* @todo this can be simplified. */
+}
+
 @media (min-width: 43.75rem) {
 
 [dir="ltr"] .layout--content-narrow .align-right,[dir="ltr"] 
 .layout--pass--content-narrow > * .align-right {
-    margin-right: calc(var(--grid-col-width--md)*-1 + var(--grid-gap--md)*-1);
+    margin-right: calc(var(--grid-col-width)*-1 + var(--grid-gap)*-1);
   }
 
 [dir="rtl"] .layout--content-narrow .align-right,[dir="rtl"] 
 .layout--pass--content-narrow > * .align-right {
-    margin-left: calc(var(--grid-col-width--md)*-1 + var(--grid-gap--md)*-1);
+    margin-left: calc(var(--grid-col-width)*-1 + var(--grid-gap)*-1);
   }
   }
 
@@ -153,12 +158,12 @@ figcaption {
 
 [dir="ltr"] .layout--content-narrow .align-right,[dir="ltr"] 
 .layout--pass--content-narrow > * .align-right {
-    margin-right: calc(var(--grid-col-width--lg)*-2 + var(--grid-gap--lg)*-2);
+    margin-right: calc(var(--grid-col-width)*-2 + var(--grid-gap)*-2);
   }
 
 [dir="rtl"] .layout--content-narrow .align-right,[dir="rtl"] 
 .layout--pass--content-narrow > * .align-right {
-    margin-left: calc(var(--grid-col-width--lg)*-2 + var(--grid-gap--lg)*-2);
+    margin-left: calc(var(--grid-col-width)*-2 + var(--grid-gap)*-2);
   }
   }
 
@@ -166,12 +171,12 @@ figcaption {
 
 [dir="ltr"] .layout--content-narrow .align-right,[dir="ltr"] 
 .layout--pass--content-narrow > * .align-right {
-    margin-right: calc(var(--grid-col-width--nav)*-3 + var(--grid-gap--nav)*-3);
+    margin-right: calc(var(--grid-col-width)*-3 + var(--grid-gap)*-3);
   }
 
 [dir="rtl"] .layout--content-narrow .align-right,[dir="rtl"] 
 .layout--pass--content-narrow > * .align-right {
-    margin-left: calc(var(--grid-col-width--nav)*-3 + var(--grid-gap--nav)*-3);
+    margin-left: calc(var(--grid-col-width)*-3 + var(--grid-gap)*-3);
   }
   }
 
@@ -179,12 +184,12 @@ figcaption {
 
 [dir="ltr"] .layout--content-narrow .align-right,[dir="ltr"] 
 .layout--pass--content-narrow > * .align-right {
-    margin-right: calc(var(--grid-col-width--max)*-3 + var(--grid-gap--max)*-3);
+    margin-right: calc(var(--grid-col-width)*-3 + var(--grid-gap)*-3);
   }
 
 [dir="rtl"] .layout--content-narrow .align-right,[dir="rtl"] 
 .layout--pass--content-narrow > * .align-right {
-    margin-left: calc(var(--grid-col-width--max)*-3 + var(--grid-gap--max)*-3);
+    margin-left: calc(var(--grid-col-width)*-3 + var(--grid-gap)*-3);
   }
   }
 
@@ -250,51 +255,12 @@ figcaption {
 
 [dir="ltr"] .layout--content-narrow .align-left,[dir="ltr"] 
 .layout--pass--content-narrow > * .align-left {
-    margin-left: calc(var(--grid-col-width--md)*-1 + var(--grid-gap--md)*-1);
+    margin-left: calc(var(--grid-col-width)*-1 + var(--grid-gap)*-1);
   }
 
 [dir="rtl"] .layout--content-narrow .align-left,[dir="rtl"] 
 .layout--pass--content-narrow > * .align-left {
-    margin-right: calc(var(--grid-col-width--md)*-1 + var(--grid-gap--md)*-1);
-  }
-  }
-
-@media (min-width: 62.5rem) {
-
-[dir="ltr"] .layout--content-narrow .align-left,[dir="ltr"] 
-.layout--pass--content-narrow > * .align-left {
-    margin-left: calc(var(--grid-col-width--lg)*-1 + var(--grid-gap--lg)*-1);
-  }
-
-[dir="rtl"] .layout--content-narrow .align-left,[dir="rtl"] 
-.layout--pass--content-narrow > * .align-left {
-    margin-right: calc(var(--grid-col-width--lg)*-1 + var(--grid-gap--lg)*-1);
-  }
-  }
-
-@media (min-width: 75rem) {
-
-[dir="ltr"] .layout--content-narrow .align-left,[dir="ltr"] 
-.layout--pass--content-narrow > * .align-left {
-    margin-left: calc(var(--grid-col-width--nav)*-1 + var(--grid-gap--nav)*-1);
-  }
-
-[dir="rtl"] .layout--content-narrow .align-left,[dir="rtl"] 
-.layout--pass--content-narrow > * .align-left {
-    margin-right: calc(var(--grid-col-width--nav)*-1 + var(--grid-gap--nav)*-1);
-  }
-  }
-
-@media (min-width: 90rem) {
-
-[dir="ltr"] .layout--content-narrow .align-left,[dir="ltr"] 
-.layout--pass--content-narrow > * .align-left {
-    margin-left: calc(var(--grid-col-width--max)*-1 + var(--grid-gap--max)*-1);
-  }
-
-[dir="rtl"] .layout--content-narrow .align-left,[dir="rtl"] 
-.layout--pass--content-narrow > * .align-left {
-    margin-right: calc(var(--grid-col-width--max)*-1 + var(--grid-gap--max)*-1);
+    margin-right: calc(var(--grid-col-width)*-1 + var(--grid-gap)*-1);
   }
   }
 
diff --git a/core/themes/olivero/css/components/embedded-media.pcss.css b/core/themes/olivero/css/components/embedded-media.pcss.css
index 8e0c54c51f9..b17cacf357a 100644
--- a/core/themes/olivero/css/components/embedded-media.pcss.css
+++ b/core/themes/olivero/css/components/embedded-media.pcss.css
@@ -47,20 +47,21 @@ figcaption {
 /* Pull out of grid if nested in content narrow layout. */
 .layout--content-narrow .align-right,
 .layout--pass--content-narrow > * .align-right {
+  /* @todo this can be simplified. */
   @media (--grid-md) {
-    margin-inline-end: calc(-1 * ((var(--grid-col-width--md) + var(--grid-gap--md))));
+    margin-inline-end: calc(-1 * ((var(--grid-col-width) + var(--grid-gap))));
   }
 
   @media (--lg) {
-    margin-inline-end: calc(-2 * ((var(--grid-col-width--lg) + var(--grid-gap--lg))));
+    margin-inline-end: calc(-2 * ((var(--grid-col-width) + var(--grid-gap))));
   }
 
   @media (--nav) {
-    margin-inline-end: calc(-3 * ((var(--grid-col-width--nav) + var(--grid-gap--nav))));
+    margin-inline-end: calc(-3 * ((var(--grid-col-width) + var(--grid-gap))));
   }
 
   @media (--grid-max) {
-    margin-inline-end: calc(-3 * ((var(--grid-col-width--max) + var(--grid-gap--max))));
+    margin-inline-end: calc(-3 * ((var(--grid-col-width) + var(--grid-gap))));
   }
 }
 
@@ -86,19 +87,7 @@ figcaption {
 .layout--content-narrow .align-left,
 .layout--pass--content-narrow > * .align-left {
   @media (--grid-md) {
-    margin-inline-start: calc(-1 * ((var(--grid-col-width--md) + var(--grid-gap--md))));
-  }
-
-  @media (--lg) {
-    margin-inline-start: calc(-1 * ((var(--grid-col-width--lg) + var(--grid-gap--lg))));
-  }
-
-  @media (--nav) {
-    margin-inline-start: calc(-1 * ((var(--grid-col-width--nav) + var(--grid-gap--nav))));
-  }
-
-  @media (--grid-max) {
-    margin-inline-start: calc(-1 * ((var(--grid-col-width--max) + var(--grid-gap--max))));
+    margin-inline-start: calc(-1 * ((var(--grid-col-width) + var(--grid-gap))));
   }
 }
 
diff --git a/core/themes/olivero/css/components/header-navigation.css b/core/themes/olivero/css/components/header-navigation.css
index 6154aa66126..a0522503054 100644
--- a/core/themes/olivero/css/components/header-navigation.css
+++ b/core/themes/olivero/css/components/header-navigation.css
@@ -224,7 +224,7 @@ body.is-always-mobile-nav.toolbar-horizontal.toolbar-fixed.toolbar-tray-open .he
 
 body.is-always-mobile-nav .header-nav {
       overflow: auto;
-      max-width: calc(var(--grid-col-width--nav)*7 + var(--grid-gap--nav)*7);
+      max-width: calc(var(--grid-col-width)*7 + var(--grid-gap)*7);
       transition: transform 0.2s, visibility 0.2s;
       border-top-width: var(--sp11)
   }
@@ -241,7 +241,7 @@ body.is-always-mobile-nav .header-nav {
   }
 
 body.is-always-mobile-nav .header-nav {
-      max-width: calc(100vw - var(--max-width) - var(--content-left) + var(--grid-col-width--max)*7 + var(--grid-gap--max)*7)
+      max-width: calc(100vw - var(--max-width) - var(--content-left) + var(--grid-col-width)*7 + var(--grid-gap)*7)
   }
     }
 
diff --git a/core/themes/olivero/css/components/header-navigation.pcss.css b/core/themes/olivero/css/components/header-navigation.pcss.css
index 2e3814fc8e3..2cf97593420 100644
--- a/core/themes/olivero/css/components/header-navigation.pcss.css
+++ b/core/themes/olivero/css/components/header-navigation.pcss.css
@@ -123,14 +123,14 @@ body.is-always-mobile-nav {
   & .header-nav {
     @media (--nav) {
       overflow: auto;
-      max-width: calc((7 * (var(--grid-col-width--nav) + var(--grid-gap--nav))));
+      max-width: calc((7 * (var(--grid-col-width) + var(--grid-gap))));
       padding-inline-end: var(--sp);
       transition: transform 0.2s, visibility 0.2s;
       border-top-width: var(--sp11);
     }
 
     @media (--grid-max) {
-      max-width: calc(100vw - (var(--max-width) + var(--content-left)) + ((7 * (var(--grid-col-width--max) + var(--grid-gap--max)))));
+      max-width: calc(100vw - (var(--max-width) + var(--content-left)) + ((7 * (var(--grid-col-width) + var(--grid-gap)))));
       padding-inline-end: calc(100vw - (var(--max-width) + var(--content-left) - var(--sp)));
     }
   }
diff --git a/core/themes/olivero/css/components/header-search-wide.css b/core/themes/olivero/css/components/header-search-wide.css
index 1498a14015f..24cc9b555fd 100644
--- a/core/themes/olivero/css/components/header-search-wide.css
+++ b/core/themes/olivero/css/components/header-search-wide.css
@@ -319,8 +319,8 @@
 
 .block-search-wide__grid {
   display: grid;
-  grid-template-columns: repeat(var(--grid-col-count--md), 1fr);
-  grid-column-gap: var(--grid-gap--md);
+  grid-template-columns: repeat(var(--grid-col-count), 1fr);
+  grid-column-gap: var(--grid-gap);
 }
 
 /* Override specificity from container-inline.module.css */
diff --git a/core/themes/olivero/css/components/header-search-wide.pcss.css b/core/themes/olivero/css/components/header-search-wide.pcss.css
index d7c34681214..f98b0a629d8 100644
--- a/core/themes/olivero/css/components/header-search-wide.pcss.css
+++ b/core/themes/olivero/css/components/header-search-wide.pcss.css
@@ -176,8 +176,8 @@
 
 .block-search-wide__grid {
   display: grid;
-  grid-template-columns: repeat(var(--grid-col-count--md), 1fr);
-  grid-column-gap: var(--grid-gap--md);
+  grid-template-columns: repeat(var(--grid-col-count), 1fr);
+  grid-column-gap: var(--grid-gap);
 }
 
 /* Override specificity from container-inline.module.css */
diff --git a/core/themes/olivero/css/components/header-site-branding.css b/core/themes/olivero/css/components/header-site-branding.css
index 9beff6257ac..e6948ffecd6 100644
--- a/core/themes/olivero/css/components/header-site-branding.css
+++ b/core/themes/olivero/css/components/header-site-branding.css
@@ -53,8 +53,8 @@
   display: flex;
   flex-shrink: 1;
   align-items: flex-end;
-  min-width: calc(var(--grid-col-width)*2 + var(--grid-gap)*2 + var(--container-padding));
-  min-height: var(--sp3);
+  min-width: calc(var(--grid-col-width)*2 + var(--grid-gap)*2 + var(--container-padding)); /* Span minimum of 2 column widths. */
+  min-height: var(--sp3); /* Negative margin to break out of .container element. */
   padding-top: 0;
   padding-bottom: var(--sp0-5);
 
@@ -72,6 +72,7 @@
 @media (min-width: 43.75rem) {
 
 .site-branding {
+    min-width: calc(var(--grid-col-width)*4 + var(--grid-gap)*4 + var(--container-padding)); /* Span minimum of 4 column widths. */
     min-height: var(--sp6);
     padding-bottom: var(--sp)
 }
@@ -80,51 +81,27 @@
 @media (min-width: 62.5rem) {
 
 .site-branding {
-    min-width: calc(var(--grid-col-width--lg)*2 + var(--grid-gap--lg)*2 + var(--container-padding))
+    min-width: calc(var(--grid-col-width)*2 + var(--grid-gap)*2 + var(--container-padding)) /* Span minimum of 2 column widths. */
 }
   }
 
 @media (min-width: 75rem) {
 
 [dir="ltr"] .site-branding {
-    margin-left: calc(var(--container-padding-nav)*-1)
+    margin-left: calc(var(--container-padding)*-1)
   }
 
 [dir="rtl"] .site-branding {
-    margin-right: calc(var(--container-padding-nav)*-1)
-  }
-
-[dir="ltr"] .site-branding {
-    padding-left: var(--container-padding-nav)
-  }
-
-[dir="rtl"] .site-branding {
-    padding-right: var(--container-padding-nav)
-  }
-
-[dir="ltr"] .site-branding {
-    padding-right: var(--container-padding-nav)
-  }
-
-[dir="rtl"] .site-branding {
-    padding-left: var(--container-padding-nav)
+    margin-right: calc(var(--container-padding)*-1)
   }
 
 .site-branding {
-    min-width: calc(var(--grid-col-width--nav)*2 + var(--grid-gap--nav)*2 + var(--container-padding-nav));
     min-height: var(--site-header-height-wide);
     padding-top: 0;
     padding-bottom: 0
 }
   }
 
-@media (min-width: 90rem) {
-
-.site-branding {
-    min-width: calc(var(--grid-col-width--max)*2 + var(--grid-gap--max)*2 + var(--container-padding-nav))
-}
-  }
-
 [dir="rtl"] .site-branding {
   background-image: linear-gradient(-160deg, var(--color--blue-50) 0%, #0d7ab8 78.66%);
 }
diff --git a/core/themes/olivero/css/components/header-site-branding.pcss.css b/core/themes/olivero/css/components/header-site-branding.pcss.css
index ecd5f37984c..7e995b2f7af 100644
--- a/core/themes/olivero/css/components/header-site-branding.pcss.css
+++ b/core/themes/olivero/css/components/header-site-branding.pcss.css
@@ -9,9 +9,9 @@
   display: flex;
   flex-shrink: 1;
   align-items: flex-end;
-  min-width: calc((2 * var(--grid-col-width)) + (2 * var(--grid-gap)) + var(--container-padding));
+  min-width: calc((2 * var(--grid-col-width)) + (2 * var(--grid-gap)) + var(--container-padding)); /* Span minimum of 2 column widths. */
   min-height: var(--sp3);
-  margin-inline: calc(-1 * var(--container-padding)) var(--sp);
+  margin-inline: calc(-1 * var(--container-padding)) var(--sp); /* Negative margin to break out of .container element. */
   padding-block: 0 var(--sp0-5);
   padding-inline-start: var(--container-padding);
   padding-inline-end: var(--container-padding);
@@ -24,25 +24,19 @@
   }
 
   @media (--md) {
+    min-width: calc((4 * var(--grid-col-width)) + (4 * var(--grid-gap)) + var(--container-padding)); /* Span minimum of 4 column widths. */
     min-height: var(--sp6);
     padding-block-end: var(--sp);
   }
 
   @media (--lg) {
-    min-width: calc((2 * var(--grid-col-width--lg)) + (2 * var(--grid-gap--lg)) + var(--container-padding));
+    min-width: calc((2 * var(--grid-col-width)) + (2 * var(--grid-gap)) + var(--container-padding)); /* Span minimum of 2 column widths. */
   }
 
   @media (--nav) {
-    min-width: calc((2 * var(--grid-col-width--nav)) + (2 * var(--grid-gap--nav)) + var(--container-padding-nav));
     min-height: var(--site-header-height-wide);
-    margin-inline-start: calc(-1 * var(--container-padding-nav));
+    margin-inline-start: calc(-1 * var(--container-padding));
     padding-block: 0;
-    padding-inline-start: var(--container-padding-nav);
-    padding-inline-end: var(--container-padding-nav);
-  }
-
-  @media (--grid-max) {
-    min-width: calc((2 * var(--grid-col-width--max)) + (2 * var(--grid-gap--max)) + var(--container-padding-nav));
   }
 }
 
diff --git a/core/themes/olivero/css/components/node-teaser.css b/core/themes/olivero/css/components/node-teaser.css
index b87157cd8b3..1b32f4d0d6e 100644
--- a/core/themes/olivero/css/components/node-teaser.css
+++ b/core/themes/olivero/css/components/node-teaser.css
@@ -102,35 +102,19 @@
 @media (min-width: 62.5rem) {
 
 .node--view-mode-teaser .primary-image img {
-        width: var(--grid-col-width--lg);
-        height: var(--grid-col-width--lg)
-    }
-      }
-
-@media (min-width: 75rem) {
-
-.node--view-mode-teaser .primary-image img {
-        width: var(--grid-col-width--nav);
-        height: var(--grid-col-width--nav)
-    }
-      }
-
-@media (min-width: 90rem) {
-
-.node--view-mode-teaser .primary-image img {
-        width: var(--grid-col-width--max);
-        height: var(--grid-col-width--max)
+        width: var(--grid-col-width);
+        height: var(--grid-col-width)
     }
       }
 
 @media (min-width: 62.5rem) {
 
 [dir="ltr"] .node--view-mode-teaser .primary-image {
-      left: calc(var(--grid-col-width--lg)*-1 + var(--grid-gap--lg)*-1)
+      left: calc(var(--grid-col-width)*-1 + var(--grid-gap)*-1)
   }
 
 [dir="rtl"] .node--view-mode-teaser .primary-image {
-      right: calc(var(--grid-col-width--lg)*-1 + var(--grid-gap--lg)*-1)
+      right: calc(var(--grid-col-width)*-1 + var(--grid-gap)*-1)
   }
 
 .node--view-mode-teaser .primary-image {
@@ -140,28 +124,6 @@
   }
     }
 
-@media (min-width: 75rem) {
-
-[dir="ltr"] .node--view-mode-teaser .primary-image {
-      left: calc(var(--grid-col-width--nav)*-1 + var(--grid-gap--nav)*-1)
-  }
-
-[dir="rtl"] .node--view-mode-teaser .primary-image {
-      right: calc(var(--grid-col-width--nav)*-1 + var(--grid-gap--nav)*-1)
-  }
-    }
-
-@media (min-width: 90rem) {
-
-[dir="ltr"] .node--view-mode-teaser .primary-image {
-      left: calc(var(--grid-col-width--max)*-1 + var(--grid-gap--max)*-1)
-  }
-
-[dir="rtl"] .node--view-mode-teaser .primary-image {
-      right: calc(var(--grid-col-width--max)*-1 + var(--grid-gap--max)*-1)
-  }
-    }
-
 .node--view-mode-teaser .node__title {
     margin: 0;
     margin-bottom: var(--sp1);
diff --git a/core/themes/olivero/css/components/node-teaser.pcss.css b/core/themes/olivero/css/components/node-teaser.pcss.css
index e20b3926077..ed086879276 100644
--- a/core/themes/olivero/css/components/node-teaser.pcss.css
+++ b/core/themes/olivero/css/components/node-teaser.pcss.css
@@ -65,35 +65,17 @@
       border-radius: 50%;
 
       @media (--lg) {
-        width: var(--grid-col-width--lg);
-        height: var(--grid-col-width--lg);
-      }
-
-      @media (--nav) {
-        width: var(--grid-col-width--nav);
-        height: var(--grid-col-width--nav);
-      }
-
-      @media (--grid-max) {
-        width: var(--grid-col-width--max);
-        height: var(--grid-col-width--max);
+        width: var(--grid-col-width);
+        height: var(--grid-col-width);
       }
     }
 
     @media (--lg) {
       position: absolute;
       inset-block-start: 0;
-      inset-inline-start: calc(-1 * ((var(--grid-col-width--lg) + var(--grid-gap--lg))));
+      inset-inline-start: calc(-1 * ((var(--grid-col-width) + var(--grid-gap))));
       margin: 0;
     }
-
-    @media (--nav) {
-      inset-inline-start: calc(-1 * ((var(--grid-col-width--nav) + var(--grid-gap--nav))));
-    }
-
-    @media (--grid-max) {
-      inset-inline-start: calc(-1 * ((var(--grid-col-width--max) + var(--grid-gap--max))));
-    }
   }
 
   & .node__title {
diff --git a/core/themes/olivero/css/components/wide-image.css b/core/themes/olivero/css/components/wide-image.css
index 1090ff48356..1652d64bf8f 100644
--- a/core/themes/olivero/css/components/wide-image.css
+++ b/core/themes/olivero/css/components/wide-image.css
@@ -47,15 +47,15 @@
 @media (min-width: 43.75rem) {
 
 [dir="ltr"] .wide-image {
-    margin-left: calc(var(--grid-col-width--md)*-1 + var(--grid-gap--md)*-1)
+    margin-left: calc(var(--grid-col-width)*-1 + var(--grid-gap)*-1)
   }
 
 [dir="rtl"] .wide-image {
-    margin-right: calc(var(--grid-col-width--md)*-1 + var(--grid-gap--md)*-1)
+    margin-right: calc(var(--grid-col-width)*-1 + var(--grid-gap)*-1)
   }
 
 .wide-image {
-    width: calc(var(--grid-col-width--md)*14 + var(--grid-gap--md)*13);
+    width: calc(var(--grid-col-count)*var(--grid-col-width) + var(--grid-gap-count)*var(--grid-gap));
     margin-top: var(--sp2);
     margin-bottom: var(--sp4)
 }
@@ -64,45 +64,15 @@
 @media (min-width: 62.5rem) {
 
 [dir="ltr"] .wide-image {
-    margin-left: calc(var(--grid-col-width--lg)*-1 + var(--grid-gap--lg)*-1)
+    margin-left: calc(var(--grid-col-width)*-1 + var(--grid-gap)*-1)
   }
 
 [dir="rtl"] .wide-image {
-    margin-right: calc(var(--grid-col-width--lg)*-1 + var(--grid-gap--lg)*-1)
+    margin-right: calc(var(--grid-col-width)*-1 + var(--grid-gap)*-1)
   }
 
 .wide-image {
-    width: calc(var(--grid-col-width--lg)*12 + var(--grid-gap--lg)*11)
-}
-  }
-
-@media (min-width: 75rem) {
-
-[dir="ltr"] .wide-image {
-    margin-left: calc(var(--grid-col-width--nav)*-1 + var(--grid-gap--nav)*-1)
-  }
-
-[dir="rtl"] .wide-image {
-    margin-right: calc(var(--grid-col-width--nav)*-1 + var(--grid-gap--nav)*-1)
-  }
-
-.wide-image {
-    width: calc(var(--grid-col-width--nav)*12 + var(--grid-gap--nav)*11)
-}
-  }
-
-@media (min-width: 90rem) {
-
-[dir="ltr"] .wide-image {
-    margin-left: calc(var(--grid-col-width--max)*-1 + var(--grid-gap--max)*-1)
-  }
-
-[dir="rtl"] .wide-image {
-    margin-right: calc(var(--grid-col-width--max)*-1 + var(--grid-gap--max)*-1)
-  }
-
-.wide-image {
-    width: calc(var(--grid-col-width--max)*12 + var(--grid-gap--max)*11)
+    width: calc(var(--grid-col-width)*12 + var(--grid-gap)*11)
 }
   }
 
@@ -111,28 +81,14 @@
 @media (min-width: 62.5rem) {
 
 .sidebar-grid .wide-image {
-    width: calc(var(--grid-col-width--lg)*9 + var(--grid-gap--lg)*8)
-}
-  }
-
-@media (min-width: 75rem) {
-
-.sidebar-grid .wide-image {
-    width: calc(var(--grid-col-width--nav)*9 + var(--grid-gap--nav)*8)
+    width: calc(var(--grid-col-width)*9 + var(--grid-gap)*8)
 }
   }
 
 @media (min-width: 81.25rem) {
 
 .sidebar-grid .wide-image {
-    width: calc(var(--grid-col-width--nav)*10 + var(--grid-gap--nav)*9)
-}
-  }
-
-@media (min-width: 90rem) {
-
-.sidebar-grid .wide-image {
-    width: calc(var(--grid-col-width--max)*10 + var(--grid-gap--max)*9)
+    width: calc(var(--grid-col-width)*10 + var(--grid-gap)*9)
 }
   }
 
diff --git a/core/themes/olivero/css/components/wide-image.pcss.css b/core/themes/olivero/css/components/wide-image.pcss.css
index 74f95016160..241338708cd 100644
--- a/core/themes/olivero/css/components/wide-image.pcss.css
+++ b/core/themes/olivero/css/components/wide-image.pcss.css
@@ -12,43 +12,25 @@
   margin-inline-end: 0;
 
   @media (--grid-md) {
-    width: calc(14 * var(--grid-col-width--md) + 13 * var(--grid-gap--md));
+    width: calc(var(--grid-col-count) * var(--grid-col-width) + var(--grid-gap-count) * var(--grid-gap));
     margin-block: var(--sp2) var(--sp4);
-    margin-inline-start: calc(-1 * ((var(--grid-col-width--md) + var(--grid-gap--md))));
+    margin-inline-start: calc(-1 * ((var(--grid-col-width) + var(--grid-gap))));
   }
 
   @media (--lg) {
-    width: calc(12 * var(--grid-col-width--lg) + 11 * var(--grid-gap--lg));
-    margin-inline-start: calc(-1 * (var(--grid-col-width--lg) + var(--grid-gap--lg)));
-  }
-
-  @media (--nav) {
-    width: calc(12 * var(--grid-col-width--nav) + 11 * var(--grid-gap--nav));
-    margin-inline-start: calc(-1 * (var(--grid-col-width--nav) + var(--grid-gap--nav)));
-  }
-
-  @media (--grid-max) {
-    width: calc(12 * var(--grid-col-width--max) + 11 * var(--grid-gap--max));
-    margin-inline-start: calc(-1 * (var(--grid-col-width--max) + var(--grid-gap--max)));
+    width: calc(12 * var(--grid-col-width) + 11 * var(--grid-gap));
+    margin-inline-start: calc(-1 * (var(--grid-col-width) + var(--grid-gap)));
   }
 }
 
 /* Ensure that image doesn't overlap sidebar. */
 .sidebar-grid .wide-image {
   @media (--lg) {
-    width: calc(9 * var(--grid-col-width--lg) + 8 * var(--grid-gap--lg));
-  }
-
-  @media (--nav) {
-    width: calc(9 * var(--grid-col-width--nav) + 8 * var(--grid-gap--nav));
+    width: calc(9 * var(--grid-col-width) + 8 * var(--grid-gap));
   }
 
   @media (--xl) {
-    width: calc(10 * var(--grid-col-width--nav) + 9 * var(--grid-gap--nav));
-  }
-
-  @media (--grid-max) {
-    width: calc(10 * var(--grid-col-width--max) + 9 * var(--grid-gap--max));
+    width: calc(10 * var(--grid-col-width) + 9 * var(--grid-gap));
   }
 }
 
diff --git a/core/themes/olivero/css/layout/grid.css b/core/themes/olivero/css/layout/grid.css
index 3041568acc1..318dd2ac3b5 100644
--- a/core/themes/olivero/css/layout/grid.css
+++ b/core/themes/olivero/css/layout/grid.css
@@ -36,14 +36,6 @@
     display: block;
   }
 
-@media (min-width: 43.75rem) {
-
-.grid-full {
-    grid-template-columns: repeat(var(--grid-col-count--md), minmax(0, 1fr));
-    grid-column-gap: var(--grid-gap--md)
-}
-  }
-
 /*
   If the .grid-full is nested within the following, apply the appropriate number of columns.
     - .layout--content-narrow class.
@@ -54,7 +46,7 @@
 
 .layout--content-narrow .grid-full,
 .layout--pass--content-narrow > * .grid-full {
-    grid-template-columns: repeat(calc(var(--grid-col-count--md) - 2), minmax(0, 1fr))
+    grid-template-columns: repeat(calc(var(--grid-col-count) - 2), minmax(0, 1fr))
 }
   }
 
@@ -62,7 +54,7 @@
 
 .layout--content-narrow .grid-full,
 .layout--pass--content-narrow > * .grid-full {
-    grid-template-columns: repeat(calc(var(--grid-col-count--lg) - 6), minmax(0, 1fr))
+    grid-template-columns: repeat(calc(var(--grid-col-count) - 6), minmax(0, 1fr))
 }
   }
 
@@ -76,7 +68,7 @@
 
 .layout--content-medium .grid-full,
 .layout--pass--content-medium > * .grid-full {
-    grid-template-columns: repeat(calc(var(--grid-col-count--md) - 2), minmax(0, 1fr))
+    grid-template-columns: repeat(calc(var(--grid-col-count) - 2), minmax(0, 1fr))
 }
   }
 
@@ -84,6 +76,6 @@
 
 .layout--content-medium .grid-full,
 .layout--pass--content-medium > * .grid-full {
-    grid-template-columns: repeat(calc(var(--grid-col-count--md) - 4), minmax(0, 1fr))
+    grid-template-columns: repeat(calc(var(--grid-col-count) - 4), minmax(0, 1fr))
 }
   }
diff --git a/core/themes/olivero/css/layout/grid.pcss.css b/core/themes/olivero/css/layout/grid.pcss.css
index 7880c392b54..c4b586e175f 100644
--- a/core/themes/olivero/css/layout/grid.pcss.css
+++ b/core/themes/olivero/css/layout/grid.pcss.css
@@ -15,11 +15,6 @@
   & .grid-full .grid-full {
     display: block;
   }
-
-  @media (--grid-md) {
-    grid-template-columns: repeat(var(--grid-col-count--md), minmax(0, 1fr));
-    grid-column-gap: var(--grid-gap--md);
-  }
 }
 
 /*
@@ -30,13 +25,11 @@
 .layout--content-narrow .grid-full,
 .layout--pass--content-narrow > * .grid-full {
   @media (--grid-md) {
-    -ms-grid-columns: (minmax(0, 1fr))[ calc(var(--grid-col-count--md) - 2) ];
-    grid-template-columns: repeat(calc(var(--grid-col-count--md) - 2), minmax(0, 1fr));
+    grid-template-columns: repeat(calc(var(--grid-col-count) - 2), minmax(0, 1fr));
   }
 
   @media (--lg) {
-    -ms-grid-columns: (minmax(0, 1fr))[ calc(var(--grid-col-count--lg) - 6) ];
-    grid-template-columns: repeat(calc(var(--grid-col-count--lg) - 6), minmax(0, 1fr));
+    grid-template-columns: repeat(calc(var(--grid-col-count) - 6), minmax(0, 1fr));
   }
 }
 
@@ -48,12 +41,10 @@
 .layout--content-medium .grid-full,
 .layout--pass--content-medium > * .grid-full {
   @media (--grid-md) {
-    -ms-grid-columns: (minmax(0, 1fr))[ calc(var(--grid-col-count--md) - 2) ];
-    grid-template-columns: repeat(calc(var(--grid-col-count--md) - 2), minmax(0, 1fr));
+    grid-template-columns: repeat(calc(var(--grid-col-count) - 2), minmax(0, 1fr));
   }
 
   @media (--lg) {
-    -ms-grid-columns: (minmax(0, 1fr))[ calc(var(--grid-col-count--md) - 4) ];
-    grid-template-columns: repeat(calc(var(--grid-col-count--md) - 4), minmax(0, 1fr));
+    grid-template-columns: repeat(calc(var(--grid-col-count) - 4), minmax(0, 1fr));
   }
 }
diff --git a/core/themes/olivero/css/layout/layout-builder-fourcol-section.css b/core/themes/olivero/css/layout/layout-builder-fourcol-section.css
index 7253ae22cac..9ddc38d98b5 100644
--- a/core/themes/olivero/css/layout/layout-builder-fourcol-section.css
+++ b/core/themes/olivero/css/layout/layout-builder-fourcol-section.css
@@ -36,7 +36,7 @@
 @media (min-width: 43.75rem) {
 
 .layout--fourcol-section > .layout__region {
-      flex-basis: calc(50% - var(--grid-gap--md)*0.5);
+      flex-basis: calc(50% - var(--grid-gap)*0.5);
       flex-grow: 0;
       flex-shrink: 0;
       margin-bottom: 0
@@ -51,27 +51,27 @@
 @media (min-width: 43.75rem) {
     .layout--fourcol-section > .layout__region--first,
     .layout--fourcol-section > .layout__region--second {
-      margin-bottom: var(--grid-gap--md);
+      margin-bottom: var(--grid-gap);
     }
 
     [dir="ltr"] .layout--fourcol-section > .layout__region--first,[dir="ltr"] 
     .layout--fourcol-section > .layout__region--third {
-      margin-right: calc(var(--grid-gap--md)*0.5)
+      margin-right: calc(var(--grid-gap)*0.5)
   }
 
     [dir="rtl"] .layout--fourcol-section > .layout__region--first,[dir="rtl"] 
     .layout--fourcol-section > .layout__region--third {
-      margin-left: calc(var(--grid-gap--md)*0.5)
+      margin-left: calc(var(--grid-gap)*0.5)
   }
 
     [dir="ltr"] .layout--fourcol-section > .layout__region--second,[dir="ltr"] 
     .layout--fourcol-section > .layout__region--fourth {
-      margin-left: calc(var(--grid-gap--md)*0.5)
+      margin-left: calc(var(--grid-gap)*0.5)
   }
 
     [dir="rtl"] .layout--fourcol-section > .layout__region--second,[dir="rtl"] 
     .layout--fourcol-section > .layout__region--fourth {
-      margin-right: calc(var(--grid-gap--md)*0.5)
+      margin-right: calc(var(--grid-gap)*0.5)
   }
   }
 
@@ -82,7 +82,7 @@
 
 @media (min-width: 62.5rem) {
     .layout--fourcol-section > .layout__region {
-      flex-basis: calc(25% - var(--grid-gap--md)*0.75);
+      flex-basis: calc(25% - var(--grid-gap)*0.75);
     }
 
     .layout--fourcol-section > .layout__region--first,
@@ -91,24 +91,24 @@
     }
 
     [dir="ltr"] .layout--fourcol-section > .layout__region--first {
-      margin-right: calc(var(--grid-gap--md)*0.5)
+      margin-right: calc(var(--grid-gap)*0.5)
   }
 
     [dir="rtl"] .layout--fourcol-section > .layout__region--first {
-      margin-left: calc(var(--grid-gap--md)*0.5)
+      margin-left: calc(var(--grid-gap)*0.5)
   }
 
     .layout--fourcol-section > .layout__region--second,
     .layout--fourcol-section > .layout__region--third {
-      margin-left: calc(var(--grid-gap--md)*0.5);
-      margin-right: calc(var(--grid-gap--md)*0.5);
+      margin-left: calc(var(--grid-gap)*0.5);
+      margin-right: calc(var(--grid-gap)*0.5);
     }
 
     [dir="ltr"] .layout--fourcol-section > .layout__region--fourth {
-      margin-left: calc(var(--grid-gap--md)*0.5)
+      margin-left: calc(var(--grid-gap)*0.5)
   }
 
     [dir="rtl"] .layout--fourcol-section > .layout__region--fourth {
-      margin-right: calc(var(--grid-gap--md)*0.5)
+      margin-right: calc(var(--grid-gap)*0.5)
   }
   }
diff --git a/core/themes/olivero/css/layout/layout-builder-fourcol-section.pcss.css b/core/themes/olivero/css/layout/layout-builder-fourcol-section.pcss.css
index cd7a7358311..012c2437cbe 100644
--- a/core/themes/olivero/css/layout/layout-builder-fourcol-section.pcss.css
+++ b/core/themes/olivero/css/layout/layout-builder-fourcol-section.pcss.css
@@ -14,7 +14,7 @@
     margin-block-end: var(--grid-gap);
 
     @media (--md) {
-      flex-basis: calc(50% - (var(--grid-gap--md) * 0.5));
+      flex-basis: calc(50% - (var(--grid-gap) * 0.5));
       flex-grow: 0;
       flex-shrink: 0;
       margin-block-end: 0;
@@ -25,24 +25,24 @@
   @media (--md) {
     & > .layout__region--first,
     & > .layout__region--second {
-      margin-block-end: var(--grid-gap--md);
+      margin-block-end: var(--grid-gap);
     }
 
     & > .layout__region--first,
     & > .layout__region--third {
-      margin-inline-end: calc(var(--grid-gap--md) * 0.5);
+      margin-inline-end: calc(var(--grid-gap) * 0.5);
     }
 
     & > .layout__region--second,
     & > .layout__region--fourth {
-      margin-inline-start: calc(var(--grid-gap--md) * 0.5);
+      margin-inline-start: calc(var(--grid-gap) * 0.5);
     }
   }
 
   /* Four column layout. */
   @media (--lg) {
     & > .layout__region {
-      flex-basis: calc(25% - (var(--grid-gap--md) * 0.75));
+      flex-basis: calc(25% - (var(--grid-gap) * 0.75));
     }
 
     & > .layout__region--first,
@@ -51,16 +51,16 @@
     }
 
     & > .layout__region--first {
-      margin-inline-end: calc(var(--grid-gap--md) * 0.5);
+      margin-inline-end: calc(var(--grid-gap) * 0.5);
     }
 
     & > .layout__region--second,
     & > .layout__region--third {
-      margin-inline: calc(var(--grid-gap--md) * 0.5);
+      margin-inline: calc(var(--grid-gap) * 0.5);
     }
 
     & > .layout__region--fourth {
-      margin-inline-start: calc(var(--grid-gap--md) * 0.5);
+      margin-inline-start: calc(var(--grid-gap) * 0.5);
     }
   }
 }
diff --git a/core/themes/olivero/css/layout/layout-builder-threecol-section.css b/core/themes/olivero/css/layout/layout-builder-threecol-section.css
index 9a670c2f66c..9caf4ff712f 100644
--- a/core/themes/olivero/css/layout/layout-builder-threecol-section.css
+++ b/core/themes/olivero/css/layout/layout-builder-threecol-section.css
@@ -44,51 +44,51 @@
 
 @media (min-width: 62.5rem) {
     [dir="ltr"] .layout--threecol-section > .layout__region--first {
-      margin-right: calc(var(--grid-gap--md)*0.5)
+      margin-right: calc(var(--grid-gap)*0.5)
   }
     [dir="rtl"] .layout--threecol-section > .layout__region--first {
-      margin-left: calc(var(--grid-gap--md)*0.5)
+      margin-left: calc(var(--grid-gap)*0.5)
   }
 
     .layout--threecol-section > .layout__region--second {
-      margin-left: calc(var(--grid-gap--md)*0.5);
-      margin-right: calc(var(--grid-gap--md)*0.5);
+      margin-left: calc(var(--grid-gap)*0.5);
+      margin-right: calc(var(--grid-gap)*0.5);
     }
 
     [dir="ltr"] .layout--threecol-section > .layout__region--third {
-      margin-left: calc(var(--grid-gap--md)*0.5)
+      margin-left: calc(var(--grid-gap)*0.5)
   }
 
     [dir="rtl"] .layout--threecol-section > .layout__region--third {
-      margin-right: calc(var(--grid-gap--md)*0.5)
+      margin-right: calc(var(--grid-gap)*0.5)
   }
     .layout--threecol-section--25-50-25 > .layout__region--first,
     .layout--threecol-section--25-50-25 > .layout__region--third {
-      flex-basis: calc(25% - var(--grid-gap--md)*0.5);
+      flex-basis: calc(25% - var(--grid-gap)*0.5);
     }
 
     .layout--threecol-section--25-50-25 > .layout__region--second {
-      flex-basis: calc(50% - var(--grid-gap--md));
+      flex-basis: calc(50% - var(--grid-gap));
     }
     .layout--threecol-section--25-25-50 > .layout__region--first,
     .layout--threecol-section--25-25-50 > .layout__region--second {
-      flex-basis: calc(25% - var(--grid-gap--md)*0.5);
+      flex-basis: calc(25% - var(--grid-gap)*0.5);
     }
 
     .layout--threecol-section--25-25-50 > .layout__region--third {
-      flex-basis: calc(50% - var(--grid-gap--md));
+      flex-basis: calc(50% - var(--grid-gap));
     }
     .layout--threecol-section--50-25-25 > .layout__region--first {
-      flex-basis: calc(50% - var(--grid-gap--md));
+      flex-basis: calc(50% - var(--grid-gap));
     }
 
     .layout--threecol-section--50-25-25 > .layout__region--second,
     .layout--threecol-section--50-25-25 > .layout__region--third {
-      flex-basis: calc(25% - var(--grid-gap--md)*0.5);
+      flex-basis: calc(25% - var(--grid-gap)*0.5);
     }
     .layout--threecol-section--33-34-33 > .layout__region--first,
     .layout--threecol-section--33-34-33 > .layout__region--second,
     .layout--threecol-section--33-34-33 > .layout__region--third {
-      flex-basis: calc(33.33% - var(--grid-gap--md)*0.667);
+      flex-basis: calc(33.33% - var(--grid-gap)*0.667);
     }
 }
diff --git a/core/themes/olivero/css/layout/layout-builder-threecol-section.pcss.css b/core/themes/olivero/css/layout/layout-builder-threecol-section.pcss.css
index b9bb2c4b059..afb669c67e9 100644
--- a/core/themes/olivero/css/layout/layout-builder-threecol-section.pcss.css
+++ b/core/themes/olivero/css/layout/layout-builder-threecol-section.pcss.css
@@ -24,48 +24,48 @@
 @media (--lg) {
   .layout--threecol-section {
     & > .layout__region--first {
-      margin-inline-end: calc(var(--grid-gap--md) * 0.5);
+      margin-inline-end: calc(var(--grid-gap) * 0.5);
     }
 
     & > .layout__region--second {
-      margin-inline: calc(var(--grid-gap--md) * 0.5);
+      margin-inline: calc(var(--grid-gap) * 0.5);
     }
 
     & > .layout__region--third {
-      margin-inline-start: calc(var(--grid-gap--md) * 0.5);
+      margin-inline-start: calc(var(--grid-gap) * 0.5);
     }
   }
 
   .layout--threecol-section--25-50-25 {
     & > .layout__region--first,
     & > .layout__region--third {
-      flex-basis: calc(25% - (var(--grid-gap--md) * 0.5));
+      flex-basis: calc(25% - (var(--grid-gap) * 0.5));
     }
 
     & > .layout__region--second {
-      flex-basis: calc(50% - var(--grid-gap--md));
+      flex-basis: calc(50% - var(--grid-gap));
     }
   }
 
   .layout--threecol-section--25-25-50 {
     & > .layout__region--first,
     & > .layout__region--second {
-      flex-basis: calc(25% - (var(--grid-gap--md) * 0.5));
+      flex-basis: calc(25% - (var(--grid-gap) * 0.5));
     }
 
     & > .layout__region--third {
-      flex-basis: calc(50% - var(--grid-gap--md));
+      flex-basis: calc(50% - var(--grid-gap));
     }
   }
 
   .layout--threecol-section--50-25-25 {
     & > .layout__region--first {
-      flex-basis: calc(50% - var(--grid-gap--md));
+      flex-basis: calc(50% - var(--grid-gap));
     }
 
     & > .layout__region--second,
     & > .layout__region--third {
-      flex-basis: calc(25% - (var(--grid-gap--md) * 0.5));
+      flex-basis: calc(25% - (var(--grid-gap) * 0.5));
     }
   }
 
@@ -73,7 +73,7 @@
     & > .layout__region--first,
     & > .layout__region--second,
     & > .layout__region--third {
-      flex-basis: calc(33.33% - (var(--grid-gap--md) * 0.667));
+      flex-basis: calc(33.33% - (var(--grid-gap) * 0.667));
     }
   }
 }
diff --git a/core/themes/olivero/css/layout/layout-builder-twocol-section.css b/core/themes/olivero/css/layout/layout-builder-twocol-section.css
index f7179d5af73..1f3d68644dc 100644
--- a/core/themes/olivero/css/layout/layout-builder-twocol-section.css
+++ b/core/themes/olivero/css/layout/layout-builder-twocol-section.css
@@ -44,108 +44,108 @@
 
 @media (min-width: 43.75rem) {
     [dir="ltr"] .layout--twocol-section--50-50 > .layout__region--first {
-      margin-right: calc(var(--grid-gap--md)*0.5)
+      margin-right: calc(var(--grid-gap)*0.5)
   }
     [dir="rtl"] .layout--twocol-section--50-50 > .layout__region--first {
-      margin-left: calc(var(--grid-gap--md)*0.5)
+      margin-left: calc(var(--grid-gap)*0.5)
   }
     .layout--twocol-section--50-50 > .layout__region--first {
-      flex-basis: calc(50% - var(--grid-gap--md)*0.5);
+      flex-basis: calc(50% - var(--grid-gap)*0.5);
     }
 
     [dir="ltr"] .layout--twocol-section--50-50 > .layout__region--second {
-      margin-left: calc(var(--grid-gap--md)*0.5)
+      margin-left: calc(var(--grid-gap)*0.5)
   }
 
     [dir="rtl"] .layout--twocol-section--50-50 > .layout__region--second {
-      margin-right: calc(var(--grid-gap--md)*0.5)
+      margin-right: calc(var(--grid-gap)*0.5)
   }
 
     .layout--twocol-section--50-50 > .layout__region--second {
-      flex-basis: calc(50% - var(--grid-gap--md)*0.5);
+      flex-basis: calc(50% - var(--grid-gap)*0.5);
     }
     [dir="ltr"] .layout--twocol-section--33-67 > .layout__region--first {
-      margin-right: calc(var(--grid-gap--md)*0.3333)
+      margin-right: calc(var(--grid-gap)*0.3333)
   }
     [dir="rtl"] .layout--twocol-section--33-67 > .layout__region--first {
-      margin-left: calc(var(--grid-gap--md)*0.3333)
+      margin-left: calc(var(--grid-gap)*0.3333)
   }
     .layout--twocol-section--33-67 > .layout__region--first {
-      flex-basis: calc(33.33% - var(--grid-gap--md)*0.3333);
+      flex-basis: calc(33.33% - var(--grid-gap)*0.3333);
     }
 
     [dir="ltr"] .layout--twocol-section--33-67 > .layout__region--second {
-      margin-left: calc(var(--grid-gap--md)*0.6666)
+      margin-left: calc(var(--grid-gap)*0.6666)
   }
 
     [dir="rtl"] .layout--twocol-section--33-67 > .layout__region--second {
-      margin-right: calc(var(--grid-gap--md)*0.6666)
+      margin-right: calc(var(--grid-gap)*0.6666)
   }
 
     .layout--twocol-section--33-67 > .layout__region--second {
-      flex-basis: calc(66.66% - var(--grid-gap--md)*0.6666);
+      flex-basis: calc(66.66% - var(--grid-gap)*0.6666);
     }
     [dir="ltr"] .layout--twocol-section--67-33 > .layout__region--first {
-      margin-right: calc(var(--grid-gap--md)*0.6666)
+      margin-right: calc(var(--grid-gap)*0.6666)
   }
     [dir="rtl"] .layout--twocol-section--67-33 > .layout__region--first {
-      margin-left: calc(var(--grid-gap--md)*0.6666)
+      margin-left: calc(var(--grid-gap)*0.6666)
   }
     .layout--twocol-section--67-33 > .layout__region--first {
-      flex-basis: calc(66.66% - var(--grid-gap--md)*0.6666);
+      flex-basis: calc(66.66% - var(--grid-gap)*0.6666);
     }
 
     [dir="ltr"] .layout--twocol-section--67-33 > .layout__region--second {
-      margin-left: calc(var(--grid-gap--md)*0.3333)
+      margin-left: calc(var(--grid-gap)*0.3333)
   }
 
     [dir="rtl"] .layout--twocol-section--67-33 > .layout__region--second {
-      margin-right: calc(var(--grid-gap--md)*0.3333)
+      margin-right: calc(var(--grid-gap)*0.3333)
   }
 
     .layout--twocol-section--67-33 > .layout__region--second {
-      flex-basis: calc(33.33% - var(--grid-gap--md)*0.3333);
+      flex-basis: calc(33.33% - var(--grid-gap)*0.3333);
     }
     [dir="ltr"] .layout--twocol-section--25-75 > .layout__region--first {
-      margin-right: calc(var(--grid-gap--md)*0.25)
+      margin-right: calc(var(--grid-gap)*0.25)
   }
     [dir="rtl"] .layout--twocol-section--25-75 > .layout__region--first {
-      margin-left: calc(var(--grid-gap--md)*0.25)
+      margin-left: calc(var(--grid-gap)*0.25)
   }
     .layout--twocol-section--25-75 > .layout__region--first {
-      flex-basis: calc(25% - var(--grid-gap--md)*0.25);
+      flex-basis: calc(25% - var(--grid-gap)*0.25);
     }
 
     [dir="ltr"] .layout--twocol-section--25-75 > .layout__region--second {
-      margin-left: calc(var(--grid-gap--md)*0.75)
+      margin-left: calc(var(--grid-gap)*0.75)
   }
 
     [dir="rtl"] .layout--twocol-section--25-75 > .layout__region--second {
-      margin-right: calc(var(--grid-gap--md)*0.75)
+      margin-right: calc(var(--grid-gap)*0.75)
   }
 
     .layout--twocol-section--25-75 > .layout__region--second {
-      flex-basis: calc(75% - var(--grid-gap--md)*0.75);
+      flex-basis: calc(75% - var(--grid-gap)*0.75);
     }
     [dir="ltr"] .layout--twocol-section--75-25 > .layout__region--first {
-      margin-right: calc(var(--grid-gap--md)*0.75)
+      margin-right: calc(var(--grid-gap)*0.75)
   }
     [dir="rtl"] .layout--twocol-section--75-25 > .layout__region--first {
-      margin-left: calc(var(--grid-gap--md)*0.75)
+      margin-left: calc(var(--grid-gap)*0.75)
   }
     .layout--twocol-section--75-25 > .layout__region--first {
-      flex-basis: calc(75% - var(--grid-gap--md)*0.75);
+      flex-basis: calc(75% - var(--grid-gap)*0.75);
     }
 
     [dir="ltr"] .layout--twocol-section--75-25 > .layout__region--second {
-      margin-left: calc(var(--grid-gap--md)*0.25)
+      margin-left: calc(var(--grid-gap)*0.25)
   }
 
     [dir="rtl"] .layout--twocol-section--75-25 > .layout__region--second {
-      margin-right: calc(var(--grid-gap--md)*0.25)
+      margin-right: calc(var(--grid-gap)*0.25)
   }
 
     .layout--twocol-section--75-25 > .layout__region--second {
-      flex-basis: calc(25% - var(--grid-gap--md)*0.25);
+      flex-basis: calc(25% - var(--grid-gap)*0.25);
     }
 }
diff --git a/core/themes/olivero/css/layout/layout-builder-twocol-section.pcss.css b/core/themes/olivero/css/layout/layout-builder-twocol-section.pcss.css
index 59014f16f6d..ea05bc6a604 100644
--- a/core/themes/olivero/css/layout/layout-builder-twocol-section.pcss.css
+++ b/core/themes/olivero/css/layout/layout-builder-twocol-section.pcss.css
@@ -24,61 +24,61 @@
 @media (--md) {
   .layout--twocol-section--50-50 {
     & > .layout__region--first {
-      flex-basis: calc(50% - (var(--grid-gap--md) * 0.5));
-      margin-inline-end: calc(var(--grid-gap--md) * 0.5);
+      flex-basis: calc(50% - (var(--grid-gap) * 0.5));
+      margin-inline-end: calc(var(--grid-gap) * 0.5);
     }
 
     & > .layout__region--second {
-      flex-basis: calc(50% - (var(--grid-gap--md) * 0.5));
-      margin-inline-start: calc(var(--grid-gap--md) * 0.5);
+      flex-basis: calc(50% - (var(--grid-gap) * 0.5));
+      margin-inline-start: calc(var(--grid-gap) * 0.5);
     }
   }
 
   .layout--twocol-section--33-67 {
     & > .layout__region--first {
-      flex-basis: calc(33.33% - (var(--grid-gap--md) * 0.3333));
-      margin-inline-end: calc(var(--grid-gap--md) * 0.3333);
+      flex-basis: calc(33.33% - (var(--grid-gap) * 0.3333));
+      margin-inline-end: calc(var(--grid-gap) * 0.3333);
     }
 
     & > .layout__region--second {
-      flex-basis: calc(66.66% - (var(--grid-gap--md) * 0.6666));
-      margin-inline-start: calc(var(--grid-gap--md) * 0.6666);
+      flex-basis: calc(66.66% - (var(--grid-gap) * 0.6666));
+      margin-inline-start: calc(var(--grid-gap) * 0.6666);
     }
   }
 
   .layout--twocol-section--67-33 {
     & > .layout__region--first {
-      flex-basis: calc(66.66% - (var(--grid-gap--md) * 0.6666));
-      margin-inline-end: calc(var(--grid-gap--md) * 0.6666);
+      flex-basis: calc(66.66% - (var(--grid-gap) * 0.6666));
+      margin-inline-end: calc(var(--grid-gap) * 0.6666);
     }
 
     & > .layout__region--second {
-      flex-basis: calc(33.33% - (var(--grid-gap--md) * 0.3333));
-      margin-inline-start: calc(var(--grid-gap--md) * 0.3333);
+      flex-basis: calc(33.33% - (var(--grid-gap) * 0.3333));
+      margin-inline-start: calc(var(--grid-gap) * 0.3333);
     }
   }
 
   .layout--twocol-section--25-75 {
     & > .layout__region--first {
-      flex-basis: calc(25% - (var(--grid-gap--md) * 0.25));
-      margin-inline-end: calc(var(--grid-gap--md) * 0.25);
+      flex-basis: calc(25% - (var(--grid-gap) * 0.25));
+      margin-inline-end: calc(var(--grid-gap) * 0.25);
     }
 
     & > .layout__region--second {
-      flex-basis: calc(75% - (var(--grid-gap--md) * 0.75));
-      margin-inline-start: calc(var(--grid-gap--md) * 0.75);
+      flex-basis: calc(75% - (var(--grid-gap) * 0.75));
+      margin-inline-start: calc(var(--grid-gap) * 0.75);
     }
   }
 
   .layout--twocol-section--75-25 {
     & > .layout__region--first {
-      flex-basis: calc(75% - (var(--grid-gap--md) * 0.75));
-      margin-inline-end: calc(var(--grid-gap--md) * 0.75);
+      flex-basis: calc(75% - (var(--grid-gap) * 0.75));
+      margin-inline-end: calc(var(--grid-gap) * 0.75);
     }
 
     & > .layout__region--second {
-      flex-basis: calc(25% - (var(--grid-gap--md) * 0.25));
-      margin-inline-start: calc(var(--grid-gap--md) * 0.25);
+      flex-basis: calc(25% - (var(--grid-gap) * 0.25));
+      margin-inline-start: calc(var(--grid-gap) * 0.25);
     }
   }
 }
diff --git a/core/themes/olivero/css/layout/layout-content-narrow.css b/core/themes/olivero/css/layout/layout-content-narrow.css
index 5b392b301d9..6b02444f0fc 100644
--- a/core/themes/olivero/css/layout/layout-content-narrow.css
+++ b/core/themes/olivero/css/layout/layout-content-narrow.css
@@ -90,55 +90,22 @@
 @media (min-width: 43.75rem) {
 
 [dir="ltr"] .layout--content-narrow.text-content blockquote:before,[dir="ltr"]  .layout--content-narrow .text-content blockquote:before,[dir="ltr"]  .layout--pass--content-narrow > *.text-content blockquote:before,[dir="ltr"]  .layout--pass--content-narrow > * .text-content blockquote:before {
-          left: calc(var(--grid-col-width--md)*-1 + var(--grid-gap--md)*-1)
+          left: calc(var(--grid-col-width)*-1 + var(--grid-gap)*-1)
   }
 
 [dir="rtl"] .layout--content-narrow.text-content blockquote:before,[dir="rtl"]  .layout--content-narrow .text-content blockquote:before,[dir="rtl"]  .layout--pass--content-narrow > *.text-content blockquote:before,[dir="rtl"]  .layout--pass--content-narrow > * .text-content blockquote:before {
-          right: calc(var(--grid-col-width--md)*-1 + var(--grid-gap--md)*-1)
-  }
-        }
-
-@media (min-width: 62.5rem) {
-
-[dir="ltr"] .layout--content-narrow.text-content blockquote:before,[dir="ltr"]  .layout--content-narrow .text-content blockquote:before,[dir="ltr"]  .layout--pass--content-narrow > *.text-content blockquote:before,[dir="ltr"]  .layout--pass--content-narrow > * .text-content blockquote:before {
-          left: calc(var(--grid-col-width--lg)*-1 + var(--grid-gap--lg)*-1)
-  }
-
-[dir="rtl"] .layout--content-narrow.text-content blockquote:before,[dir="rtl"]  .layout--content-narrow .text-content blockquote:before,[dir="rtl"]  .layout--pass--content-narrow > *.text-content blockquote:before,[dir="rtl"]  .layout--pass--content-narrow > * .text-content blockquote:before {
-          right: calc(var(--grid-col-width--lg)*-1 + var(--grid-gap--lg)*-1)
-  }
-        }
-
-@media (min-width: 75rem) {
-
-[dir="ltr"] .layout--content-narrow.text-content blockquote:before,[dir="ltr"]  .layout--content-narrow .text-content blockquote:before,[dir="ltr"]  .layout--pass--content-narrow > *.text-content blockquote:before,[dir="ltr"]  .layout--pass--content-narrow > * .text-content blockquote:before {
-          left: calc(var(--grid-col-width--nav)*-1 + var(--grid-gap--nav)*-1)
-  }
-
-[dir="rtl"] .layout--content-narrow.text-content blockquote:before,[dir="rtl"]  .layout--content-narrow .text-content blockquote:before,[dir="rtl"]  .layout--pass--content-narrow > *.text-content blockquote:before,[dir="rtl"]  .layout--pass--content-narrow > * .text-content blockquote:before {
-          right: calc(var(--grid-col-width--nav)*-1 + var(--grid-gap--nav)*-1)
-  }
-        }
-
-@media (min-width: 90rem) {
-
-[dir="ltr"] .layout--content-narrow.text-content blockquote:before,[dir="ltr"]  .layout--content-narrow .text-content blockquote:before,[dir="ltr"]  .layout--pass--content-narrow > *.text-content blockquote:before,[dir="ltr"]  .layout--pass--content-narrow > * .text-content blockquote:before {
-          left: calc(var(--grid-col-width--max)*-1 + var(--grid-gap--max)*-1)
-  }
-
-[dir="rtl"] .layout--content-narrow.text-content blockquote:before,[dir="rtl"]  .layout--content-narrow .text-content blockquote:before,[dir="rtl"]  .layout--pass--content-narrow > *.text-content blockquote:before,[dir="rtl"]  .layout--pass--content-narrow > * .text-content blockquote:before {
-          right: calc(var(--grid-col-width--max)*-1 + var(--grid-gap--max)*-1)
+          right: calc(var(--grid-col-width)*-1 + var(--grid-gap)*-1)
   }
         }
 
 @media (min-width: 43.75rem) {
 
 [dir="ltr"] .layout--content-narrow.text-content blockquote:after,[dir="ltr"]  .layout--content-narrow .text-content blockquote:after,[dir="ltr"]  .layout--pass--content-narrow > *.text-content blockquote:after,[dir="ltr"]  .layout--pass--content-narrow > * .text-content blockquote:after {
-          left: calc(var(--grid-col-width--md)*-1 + var(--grid-gap--md)*-1)
+          left: calc(var(--grid-col-width)*-1 + var(--grid-gap)*-1)
   }
 
 [dir="rtl"] .layout--content-narrow.text-content blockquote:after,[dir="rtl"]  .layout--content-narrow .text-content blockquote:after,[dir="rtl"]  .layout--pass--content-narrow > *.text-content blockquote:after,[dir="rtl"]  .layout--pass--content-narrow > * .text-content blockquote:after {
-          right: calc(var(--grid-col-width--md)*-1 + var(--grid-gap--md)*-1)
+          right: calc(var(--grid-col-width)*-1 + var(--grid-gap)*-1)
   }
 
 [dir="ltr"] .layout--content-narrow.text-content blockquote:after,[dir="ltr"]  .layout--content-narrow .text-content blockquote:after,[dir="ltr"]  .layout--pass--content-narrow > *.text-content blockquote:after,[dir="ltr"]  .layout--pass--content-narrow > * .text-content blockquote:after {
@@ -155,39 +122,6 @@
       }
         }
 
-@media (min-width: 62.5rem) {
-
-[dir="ltr"] .layout--content-narrow.text-content blockquote:after,[dir="ltr"]  .layout--content-narrow .text-content blockquote:after,[dir="ltr"]  .layout--pass--content-narrow > *.text-content blockquote:after,[dir="ltr"]  .layout--pass--content-narrow > * .text-content blockquote:after {
-          left: calc(var(--grid-col-width--lg)*-1 + var(--grid-gap--lg)*-1)
-  }
-
-[dir="rtl"] .layout--content-narrow.text-content blockquote:after,[dir="rtl"]  .layout--content-narrow .text-content blockquote:after,[dir="rtl"]  .layout--pass--content-narrow > *.text-content blockquote:after,[dir="rtl"]  .layout--pass--content-narrow > * .text-content blockquote:after {
-          right: calc(var(--grid-col-width--lg)*-1 + var(--grid-gap--lg)*-1)
-  }
-        }
-
-@media (min-width: 75rem) {
-
-[dir="ltr"] .layout--content-narrow.text-content blockquote:after,[dir="ltr"]  .layout--content-narrow .text-content blockquote:after,[dir="ltr"]  .layout--pass--content-narrow > *.text-content blockquote:after,[dir="ltr"]  .layout--pass--content-narrow > * .text-content blockquote:after {
-          left: calc(var(--grid-col-width--nav)*-1 + var(--grid-gap--nav)*-1)
-  }
-
-[dir="rtl"] .layout--content-narrow.text-content blockquote:after,[dir="rtl"]  .layout--content-narrow .text-content blockquote:after,[dir="rtl"]  .layout--pass--content-narrow > *.text-content blockquote:after,[dir="rtl"]  .layout--pass--content-narrow > * .text-content blockquote:after {
-          right: calc(var(--grid-col-width--nav)*-1 + var(--grid-gap--nav)*-1)
-  }
-        }
-
-@media (min-width: 90rem) {
-
-[dir="ltr"] .layout--content-narrow.text-content blockquote:after,[dir="ltr"]  .layout--content-narrow .text-content blockquote:after,[dir="ltr"]  .layout--pass--content-narrow > *.text-content blockquote:after,[dir="ltr"]  .layout--pass--content-narrow > * .text-content blockquote:after {
-          left: calc(var(--grid-col-width--max)*-1 + var(--grid-gap--max)*-1)
-  }
-
-[dir="rtl"] .layout--content-narrow.text-content blockquote:after,[dir="rtl"]  .layout--content-narrow .text-content blockquote:after,[dir="rtl"]  .layout--pass--content-narrow > *.text-content blockquote:after,[dir="rtl"]  .layout--pass--content-narrow > * .text-content blockquote:after {
-          right: calc(var(--grid-col-width--max)*-1 + var(--grid-gap--max)*-1)
-  }
-        }
-
 @media (min-width: 43.75rem) {
 
 [dir="ltr"] .layout--content-narrow.text-content blockquote,[dir="ltr"]  .layout--content-narrow .text-content blockquote,[dir="ltr"]  .layout--pass--content-narrow > *.text-content blockquote,[dir="ltr"]  .layout--pass--content-narrow > * .text-content blockquote {
@@ -199,37 +133,16 @@
   }
 
 .layout--content-narrow.text-content blockquote, .layout--content-narrow .text-content blockquote, .layout--pass--content-narrow > *.text-content blockquote, .layout--pass--content-narrow > * .text-content blockquote {
-        width: calc(var(--grid-col-width--md)*10 + var(--grid-gap--md)*9);
+        width: calc(var(--grid-col-width)*10 + var(--grid-gap)*9);
         margin-top: var(--sp3);
         margin-bottom: var(--sp3)
     }
       }
 
-@media (min-width: 62.5rem) {
-
-.layout--content-narrow.text-content blockquote, .layout--content-narrow .text-content blockquote, .layout--pass--content-narrow > *.text-content blockquote, .layout--pass--content-narrow > * .text-content blockquote {
-        width: calc(var(--grid-col-width--lg)*10 + var(--grid-gap--lg)*9)
-    }
-      }
-
-@media (min-width: 75rem) {
-
-.layout--content-narrow.text-content blockquote, .layout--content-narrow .text-content blockquote, .layout--pass--content-narrow > *.text-content blockquote, .layout--pass--content-narrow > * .text-content blockquote {
-        width: calc(var(--grid-col-width--nav)*10 + var(--grid-gap--nav)*9)
-    }
-      }
-
-@media (min-width: 90rem) {
-
-.layout--content-narrow.text-content blockquote, .layout--content-narrow .text-content blockquote, .layout--pass--content-narrow > *.text-content blockquote, .layout--pass--content-narrow > * .text-content blockquote {
-        width: calc(var(--grid-col-width--max)*10 + var(--grid-gap--max)*9)
-    }
-      }
-
 @media (min-width: 43.75rem) {
 
 .layout--content-narrow.text-content pre, .layout--content-narrow .text-content pre, .layout--pass--content-narrow > *.text-content pre, .layout--pass--content-narrow > * .text-content pre {
-        width: calc(var(--grid-col-width--md)*10 + var(--grid-gap--md)*9);
+        width: calc(var(--grid-col-width)*10 + var(--grid-gap)*9);
         margin-top: var(--sp3);
         margin-bottom: var(--sp3)
     }
@@ -238,29 +151,15 @@
 @media (min-width: 62.5rem) {
 
 [dir="ltr"] .layout--content-narrow.text-content pre,[dir="ltr"]  .layout--content-narrow .text-content pre,[dir="ltr"]  .layout--pass--content-narrow > *.text-content pre,[dir="ltr"]  .layout--pass--content-narrow > * .text-content pre {
-        margin-left: calc(var(--grid-col-width--lg)*-1 + var(--grid-gap--lg)*-1)
+        margin-left: calc(var(--grid-col-width)*-1 + var(--grid-gap)*-1)
   }
 
 [dir="rtl"] .layout--content-narrow.text-content pre,[dir="rtl"]  .layout--content-narrow .text-content pre,[dir="rtl"]  .layout--pass--content-narrow > *.text-content pre,[dir="rtl"]  .layout--pass--content-narrow > * .text-content pre {
-        margin-right: calc(var(--grid-col-width--lg)*-1 + var(--grid-gap--lg)*-1)
+        margin-right: calc(var(--grid-col-width)*-1 + var(--grid-gap)*-1)
   }
 
 .layout--content-narrow.text-content pre, .layout--content-narrow .text-content pre, .layout--pass--content-narrow > *.text-content pre, .layout--pass--content-narrow > * .text-content pre {
-        width: calc(var(--grid-col-width--lg)*12 + var(--grid-gap--lg)*11)
-    }
-      }
-
-@media (min-width: 75rem) {
-
-.layout--content-narrow.text-content pre, .layout--content-narrow .text-content pre, .layout--pass--content-narrow > *.text-content pre, .layout--pass--content-narrow > * .text-content pre {
-        width: calc(var(--grid-col-width--nav)*12 + var(--grid-gap--nav)*11)
-    }
-      }
-
-@media (min-width: 90rem) {
-
-.layout--content-narrow.text-content pre, .layout--content-narrow .text-content pre, .layout--pass--content-narrow > *.text-content pre, .layout--pass--content-narrow > * .text-content pre {
-        width: calc(var(--grid-col-width--max)*12 + var(--grid-gap--max)*11)
+        width: calc(var(--grid-col-width)*12 + var(--grid-gap)*11)
     }
       }
 
diff --git a/core/themes/olivero/css/layout/layout-content-narrow.pcss.css b/core/themes/olivero/css/layout/layout-content-narrow.pcss.css
index 825b5ffb041..25e27124701 100644
--- a/core/themes/olivero/css/layout/layout-content-narrow.pcss.css
+++ b/core/themes/olivero/css/layout/layout-content-narrow.pcss.css
@@ -54,79 +54,35 @@
     & blockquote {
       &:before {
         @media (--grid-md) {
-          inset-inline-start: calc(-1 * (var(--grid-col-width--md) + var(--grid-gap--md)));
-        }
-
-        @media (--lg) {
-          inset-inline-start: calc(-1 * (var(--grid-col-width--lg) + var(--grid-gap--lg)));
-        }
-
-        @media (--nav) {
-          inset-inline-start: calc(-1 * (var(--grid-col-width--nav) + var(--grid-gap--nav)));
-        }
-
-        @media (--grid-max) {
-          inset-inline-start: calc(-1 * (var(--grid-col-width--max) + var(--grid-gap--max)));
+          inset-inline-start: calc(-1 * (var(--grid-col-width) + var(--grid-gap)));
         }
       }
 
       &:after {
         @media (--grid-md) {
-          inset-inline-start: calc(-1 * (var(--grid-col-width--md) + var(--grid-gap--md)));
+          inset-inline-start: calc(-1 * (var(--grid-col-width) + var(--grid-gap)));
           width: var(--sp);
           height: calc(100% - 45px);
           margin-inline-start: 2px;
         }
-
-        @media (--lg) {
-          inset-inline-start: calc(-1 * (var(--grid-col-width--lg) + var(--grid-gap--lg)));
-        }
-
-        @media (--nav) {
-          inset-inline-start: calc(-1 * (var(--grid-col-width--nav) + var(--grid-gap--nav)));
-        }
-
-        @media (--grid-max) {
-          inset-inline-start: calc(-1 * (var(--grid-col-width--max) + var(--grid-gap--max)));
-        }
       }
 
       @media (--grid-md) {
-        width: calc(10 * var(--grid-col-width--md) + 9 * var(--grid-gap--md));
+        width: calc(10 * var(--grid-col-width) + 9 * var(--grid-gap));
         margin-block: var(--sp3);
         padding-inline-start: 0;
       }
-
-      @media (--lg) {
-        width: calc(10 * var(--grid-col-width--lg) + 9 * var(--grid-gap--lg));
-      }
-
-      @media (--nav) {
-        width: calc(10 * var(--grid-col-width--nav) + 9 * var(--grid-gap--nav));
-      }
-
-      @media (--grid-max) {
-        width: calc(10 * var(--grid-col-width--max) + 9 * var(--grid-gap--max));
-      }
     }
 
     & pre {
       @media (--grid-md) {
-        width: calc(10 * var(--grid-col-width--md) + 9 * var(--grid-gap--md));
+        width: calc(10 * var(--grid-col-width) + 9 * var(--grid-gap));
         margin-block: var(--sp3);
       }
 
       @media (--lg) {
-        width: calc(12 * var(--grid-col-width--lg) + 11 * var(--grid-gap--lg));
-        margin-inline-start: calc(-1 * (var(--grid-col-width--lg) + var(--grid-gap--lg)));
-      }
-
-      @media (--nav) {
-        width: calc(12 * var(--grid-col-width--nav) + 11 * var(--grid-gap--nav));
-      }
-
-      @media (--grid-max) {
-        width: calc(12 * var(--grid-col-width--max) + 11 * var(--grid-gap--max));
+        width: calc(12 * var(--grid-col-width) + 11 * var(--grid-gap));
+        margin-inline-start: calc(-1 * (var(--grid-col-width) + var(--grid-gap)));
       }
     }
   }
diff --git a/core/themes/olivero/css/layout/layout.css b/core/themes/olivero/css/layout/layout.css
index 6c82f8f8d6b..941dfec0a65 100644
--- a/core/themes/olivero/css/layout/layout.css
+++ b/core/themes/olivero/css/layout/layout.css
@@ -27,17 +27,9 @@
   width: 100%;
   max-width: var(--max-width);
   padding-left: var(--container-padding);
-  padding-right: var(--container-padding)
+  padding-right: var(--container-padding);
 }
 
-@media (min-width: 75rem) {
-
-.container {
-    padding-left: var(--container-padding-nav);
-    padding-right: var(--container-padding-nav)
-}
-  }
-
 .page-wrapper {
   max-width: var(--max-bg-color);
   background: var(--color--white);
@@ -57,11 +49,11 @@
 @media (min-width: 75rem) {
 
 [dir="ltr"] .main-content {
-    margin-right: auto
+    margin-right: auto;
   }
 
 [dir="rtl"] .main-content {
-    margin-left: auto
+    margin-left: auto;
   }
 
 .main-content {
diff --git a/core/themes/olivero/css/layout/layout.pcss.css b/core/themes/olivero/css/layout/layout.pcss.css
index e4eac76d5a2..170778c727d 100644
--- a/core/themes/olivero/css/layout/layout.pcss.css
+++ b/core/themes/olivero/css/layout/layout.pcss.css
@@ -9,10 +9,6 @@
   width: 100%;
   max-width: var(--max-width);
   padding-inline: var(--container-padding);
-
-  @media (--nav) {
-    padding-inline: var(--container-padding-nav);
-  }
 }
 
 .page-wrapper {
diff --git a/core/themes/olivero/css/layout/region-content-below.css b/core/themes/olivero/css/layout/region-content-below.css
index 27eb5c890ce..096f8c57747 100644
--- a/core/themes/olivero/css/layout/region-content-below.css
+++ b/core/themes/olivero/css/layout/region-content-below.css
@@ -31,15 +31,15 @@
 }
 
     [dir="ltr"] .region--content-below > * {
-      margin-right: var(--grid-gap--md)
+      margin-right: var(--grid-gap)
 }
 
     [dir="rtl"] .region--content-below > * {
-      margin-left: var(--grid-gap--md)
+      margin-left: var(--grid-gap)
 }
 
     .region--content-below > * {
-      flex-basis: calc(50% - var(--grid-gap--md)/2);
+      flex-basis: calc(50% - var(--grid-gap)/2);
       flex-grow: 1;
       flex-shrink: 0
     }
@@ -57,17 +57,17 @@
 
 @media (min-width: 43.75rem) {
     .region--content-below > * {
-      flex-basis: calc(33.33% - var(--grid-gap--md)*0.667)
+      flex-basis: calc(33.33% - var(--grid-gap)*0.667)
     }
 
       [dir="ltr"] .region--content-below > *:nth-child(2n),[dir="ltr"] 
       .region--content-below > *:last-child {
-        margin-right: var(--grid-gap--md)
+        margin-right: var(--grid-gap)
 }
 
       [dir="rtl"] .region--content-below > *:nth-child(2n),[dir="rtl"] 
       .region--content-below > *:last-child {
-        margin-left: var(--grid-gap--md)
+        margin-left: var(--grid-gap)
 }
 
       [dir="ltr"] .region--content-below > *:nth-child(3n),[dir="ltr"] 
diff --git a/core/themes/olivero/css/layout/region-content-below.pcss.css b/core/themes/olivero/css/layout/region-content-below.pcss.css
index 6d16436bb95..8fbc8373f75 100644
--- a/core/themes/olivero/css/layout/region-content-below.pcss.css
+++ b/core/themes/olivero/css/layout/region-content-below.pcss.css
@@ -11,10 +11,10 @@
     flex-wrap: wrap;
 
     & > * {
-      flex-basis: calc(50% - (var(--grid-gap--md) / 2));
+      flex-basis: calc(50% - (var(--grid-gap) / 2));
       flex-grow: 1;
       flex-shrink: 0;
-      margin-inline-end: var(--grid-gap--md);
+      margin-inline-end: var(--grid-gap);
 
       &:nth-child(2n),
       &:last-child {
@@ -25,11 +25,11 @@
 
   @media (--md) {
     & > * {
-      flex-basis: calc(33.33% - (var(--grid-gap--md) * 0.667));
+      flex-basis: calc(33.33% - (var(--grid-gap) * 0.667));
 
       &:nth-child(2n),
       &:last-child {
-        margin-inline-end: var(--grid-gap--md);
+        margin-inline-end: var(--grid-gap);
       }
 
       &:nth-child(3n),