diff --git a/core/css/decanter.css b/core/css/decanter.css
index 5b3826f61..0a434a4e8 100644
--- a/core/css/decanter.css
+++ b/core/css/decanter.css
@@ -6757,22 +6757,10 @@ button,
   .su-card__contents {
     padding: 3.2rem; } }
 
-@media only screen and (min-width: 576px) {
-  .su-card__contents {
-    padding: 3.2rem; } }
-
 @media only screen and (min-width: 768px) {
   .su-card__contents {
     padding: 3.6rem; } }
 
-@media only screen and (min-width: 992px) {
-  .su-card__contents {
-    padding: 3.6rem; } }
-
-@media only screen and (min-width: 1200px) {
-  .su-card__contents {
-    padding: 3.6rem; } }
-
 @media only screen and (min-width: 1500px) {
   .su-card__contents {
     padding: 3.8rem; } }
@@ -6945,26 +6933,11 @@ button,
         padding-top: 3.2rem;
         padding-bottom: 3.2rem;
         padding-left: 3.2rem; } }
-    @media only screen and (min-width: 576px) {
-      .su-card--horizontal img {
-        padding-top: 3.2rem;
-        padding-bottom: 3.2rem;
-        padding-left: 3.2rem; } }
     @media only screen and (min-width: 768px) {
       .su-card--horizontal img {
         padding-top: 3.6rem;
         padding-bottom: 3.6rem;
         padding-left: 3.6rem; } }
-    @media only screen and (min-width: 992px) {
-      .su-card--horizontal img {
-        padding-top: 3.6rem;
-        padding-bottom: 3.6rem;
-        padding-left: 3.6rem; } }
-    @media only screen and (min-width: 1200px) {
-      .su-card--horizontal img {
-        padding-top: 3.6rem;
-        padding-bottom: 3.6rem;
-        padding-left: 3.6rem; } }
     @media only screen and (min-width: 1500px) {
       .su-card--horizontal img {
         padding-top: 3.8rem;
@@ -7089,22 +7062,10 @@ button,
     .su-global-footer {
       padding-top: 2.31111104rem;
       padding-bottom: 2.31111104rem; } }
-  @media only screen and (min-width: 576px) {
-    .su-global-footer {
-      padding-top: 2.31111104rem;
-      padding-bottom: 2.31111104rem; } }
   @media only screen and (min-width: 768px) {
     .su-global-footer {
       padding-top: 2.59999992rem;
       padding-bottom: 2.59999992rem; } }
-  @media only screen and (min-width: 992px) {
-    .su-global-footer {
-      padding-top: 2.59999992rem;
-      padding-bottom: 2.59999992rem; } }
-  @media only screen and (min-width: 1200px) {
-    .su-global-footer {
-      padding-top: 2.59999992rem;
-      padding-bottom: 2.59999992rem; } }
   @media only screen and (min-width: 1500px) {
     .su-global-footer {
       padding-top: 2.74444436rem;
@@ -7152,18 +7113,9 @@ button,
     @media only screen and (min-width: 0) {
       .su-global-footer .su-global-footer__brand {
         margin-bottom: 0.8rem; } }
-    @media only screen and (min-width: 576px) {
-      .su-global-footer .su-global-footer__brand {
-        margin-bottom: 0.8rem; } }
     @media only screen and (min-width: 768px) {
       .su-global-footer .su-global-footer__brand {
         margin-bottom: 0.9rem; } }
-    @media only screen and (min-width: 992px) {
-      .su-global-footer .su-global-footer__brand {
-        margin-bottom: 0.9rem; } }
-    @media only screen and (min-width: 1200px) {
-      .su-global-footer .su-global-footer__brand {
-        margin-bottom: 0.9rem; } }
     @media only screen and (min-width: 1500px) {
       .su-global-footer .su-global-footer__brand {
         margin-bottom: 0.95rem; } }
diff --git a/core/scss/utilities/mixins/modular-scale/_modular-spacing.scss b/core/scss/utilities/mixins/modular-scale/_modular-spacing.scss
index b9d19c191..562949fc0 100644
--- a/core/scss/utilities/mixins/modular-scale/_modular-spacing.scss
+++ b/core/scss/utilities/mixins/modular-scale/_modular-spacing.scss
@@ -3,10 +3,12 @@
 //
 // @modular-spacing
 //
-// A mixin for adding spacing (margin or padding) between elements or between an element and the edge of its container.
-// The amount of spacing is returned using a unitless scaling system with a curated scale.
+// A mixin for adding spacing (margin or padding) between elements or between an
+// element and the edge of its container. The amount of spacing is returned
+// using a unitless scaling system with a curated scale.
 //
-// Please see core/scss/utilities/variables/core/_modular-spacing.scss for variable maps.
+// Please see core/scss/utilities/variables/core/_modular-spacing.scss for
+// variable maps.
 //
 // **Examples:**
 // - `@include modular-spacing(3);`
@@ -21,51 +23,73 @@
 //
 
 @mixin modular-spacing($type: 'padding', $steps: 0, $grid: $grid-media) {
-  @each $key, $breakpoint in $grid {
-    @include grid-media($key) {
-      @if length($steps) == 1 {
-        #{$type}: (calculate-modular-spacing($steps, $key));
-      } @else if length($steps) == 2 {
-        @if nth($steps, 1) != null {
-          #{$type}-top: (calculate-modular-spacing(nth($steps, 1), $key));
-          #{$type}-bottom: (calculate-modular-spacing(nth($steps, 1), $key));
-        }
+  // Get a list of all breakpoint keys in $grid.
+  $bp_list: map-keys($grid);
+  // Find total number of breakpoints in our grid.
+  $number_bp: length($bp_list);
 
-        @if nth($steps, 2) != null {
-          #{$type}-left: (calculate-modular-spacing(nth($steps, 2), $key));
-          #{$type}-right: (calculate-modular-spacing(nth($steps, 2), $key));
-        }
-      } @else if length($steps) == 3 {
-        @if nth($steps, 1) != null {
-          #{$type}-top: (calculate-modular-spacing(nth($steps, 1), $key));
-        }
+  @for $i from 1 through $number_bp {
+    // Get modular-spacing base value for current breakpoint.
+    $current_base: get-modular-spacing-base(nth($bp_list, $i));
+    // Initialize $previous_base.
+    $previous_base: null;
 
-        @if nth($steps, 2) != null {
-          #{$type}-right: (calculate-modular-spacing(nth($steps, 2), $key));
-          #{$type}-left: (calculate-modular-spacing(nth($steps, 2), $key));
-        }
+    // If $i is not 1, replace $previous_base with modular-spacing base value
+    // for previous breakpoint.
+    @if $i != 1 {
+      $previous_base: get-modular-spacing-base(nth($bp_list, $i - 1));
+    }
 
-        @if nth($steps, 3) != null {
-          #{$type}-bottom: (calculate-modular-spacing(nth($steps, 3), $key));
-        }
-      } @else if length($steps) == 4 {
-        @if nth($steps, 1) != null {
-          #{$type}-top: (calculate-modular-spacing(nth($steps, 1), $key));
-        }
+    // Only write media query if $i = 1 or if $current_base is different from
+    // $previous_base.
+    @if $current_base != $previous_base {
+      $key: nth($bp_list, $i);
 
-        @if nth($steps, 2) != null {
-          #{$type}-right: (calculate-modular-spacing(nth($steps, 2), $key));
-        }
+      @include grid-media($key) {
+        @if length($steps) == 1 {
+          #{$type}: (calculate-modular-spacing($steps, $key));
+        } @else if length($steps) == 2 {
+          @if nth($steps, 1) != null {
+            #{$type}-top: (calculate-modular-spacing(nth($steps, 1), $key));
+            #{$type}-bottom: (calculate-modular-spacing(nth($steps, 1), $key));
+          }
 
-        @if nth($steps, 3) != null {
-          #{$type}-bottom: (calculate-modular-spacing(nth($steps, 3), $key));
-        }
+          @if nth($steps, 2) != null {
+            #{$type}-left: (calculate-modular-spacing(nth($steps, 2), $key));
+            #{$type}-right: (calculate-modular-spacing(nth($steps, 2), $key));
+          }
+        } @else if length($steps) == 3 {
+          @if nth($steps, 1) != null {
+            #{$type}-top: (calculate-modular-spacing(nth($steps, 1), $key));
+          }
+
+          @if nth($steps, 2) != null {
+            #{$type}-right: (calculate-modular-spacing(nth($steps, 2), $key));
+            #{$type}-left: (calculate-modular-spacing(nth($steps, 2), $key));
+          }
+
+          @if nth($steps, 3) != null {
+            #{$type}-bottom: (calculate-modular-spacing(nth($steps, 3), $key));
+          }
+        } @else if length($steps) == 4 {
+          @if nth($steps, 1) != null {
+            #{$type}-top: (calculate-modular-spacing(nth($steps, 1), $key));
+          }
+
+          @if nth($steps, 2) != null {
+            #{$type}-right: (calculate-modular-spacing(nth($steps, 2), $key));
+          }
+
+          @if nth($steps, 3) != null {
+            #{$type}-bottom: (calculate-modular-spacing(nth($steps, 3), $key));
+          }
 
-        @if nth($steps, 4) != null {
-          #{$type}-left: (calculate-modular-spacing(nth($steps, 4), $key));
+          @if nth($steps, 4) != null {
+            #{$type}-left: (calculate-modular-spacing(nth($steps, 4), $key));
+          }
+        } @else if length($steps) > 4 or length($steps) == 0 {
+          @error '$steps should have 1 to 4 values';
         }
-      } @else if length($steps) > 4 or length($steps) == 0 {
-        @error '$steps should have 1 to 4 values';
       }
     }
   }