fix(grid): gutters change above lg breakpoint to match the brand

scss/_variables.scss

@@ -350,13 +350,14 @@ $container-max-widths: (
 
 $grid-columns:                12 !default;
 $grid-gutter-width:           $spacer !default;
+$grid-gutter-breakpoint:      "md" !default; // Boosted mod: gutter depends on breakpoint
 $grid-row-columns:            6 !default;
 
 $gutters: $spacers !default;
 
 // Container padding
 
-$container-padding-x: 1rem !default;
+$container-padding-x: $grid-gutter-width / 2 !default;
 
 
 // Components

scss/mixins/_container.scss

@@ -1,9 +1,16 @@
 // Container mixins
 
 @mixin make-container($padding-x: $container-padding-x) {
+  --o-padding-x: #{$padding-x / 2}; // Boosted mod: gutter depends on breakpoint
   width: 100%;
-  padding-right: $padding-x;
-  padding-left: $padding-x;
+  padding-right: var(--o-padding-x); // Boosted mod: gutter depends on breakpoint
+  padding-left: var(--o-padding-x); // Boosted mod: gutter depends on breakpoint
   margin-right: auto;
   margin-left: auto;
+
+  // Boosted mod: gutter depends on breakpoint
+  @include media-breakpoint-up($grid-gutter-breakpoint) {
+    --o-padding-x: $padding-x;
+  }
+  // End mod
 }

scss/mixins/_grid.scss

@@ -3,14 +3,20 @@
 // Generate semantic grid columns with these mixins.
 
 @mixin make-row($gutter: $grid-gutter-width) {
-  --bs-gutter-x: #{$gutter};
+  --bs-gutter-x: #{$gutter / 2}; // Boosted mod: gutter depends on breakpoint
   --bs-gutter-y: 0;
   display: flex;
   flex: 1 0 100%;
   flex-wrap: wrap;
   margin-top: calc(var(--bs-gutter-y) * -1); // stylelint-disable-line function-blacklist
   margin-right: calc(var(--bs-gutter-x) / -2); // stylelint-disable-line function-blacklist
   margin-left: calc(var(--bs-gutter-x) / -2); // stylelint-disable-line function-blacklist
+
+  // Boosted mod: gutter depends on breakpoint
+  @include media-breakpoint-up($grid-gutter-breakpoint) {
+    --bs-gutter-x: #{$gutter};
+  }
+  // End mod
 }
 
 @mixin make-col-ready($gutter: $grid-gutter-width) {

site/content/docs/5.0/examples/grid/grid.css

@@ -2,12 +2,13 @@
   padding-top: .75rem;
   padding-bottom: .75rem;
   background-color: rgba(86, 61, 124, .15);
-  border: 1px solid rgba(86, 61, 124, .2);
+  outline: 1px solid rgba(86, 61, 124, .2); /* Boosted mod */
 }
 
 .themed-container {
-  padding: .75rem;
+  padding-top: .75rem; /* Boosted mod */
+  padding-bottom: .75rem; /* Boosted mod */
   margin-bottom: 1.5rem;
   background-color: rgba(0, 123, 255, .15);
-  border: 1px solid rgba(0, 123, 255, .2);
+  outline: 1px solid rgba(0, 123, 255, .2); /* Boosted mod */
 }