diff --git a/scss/_variables.scss b/scss/_variables.scss
index 3974d02405d910dd8706df8490c9b9ba0695fff4..0c60f2210719eb0514e256bd9f39562872f62afd 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -191,6 +191,15 @@ $container-max-widths: (
 $grid-columns:                12 !default;
 $grid-gutter-width:           30px !default;
 
+$grid-gutter-widths: (
+  xs: $grid-gutter-width,     // 30px
+  sm: $grid-gutter-width,     // 30px
+  md: $grid-gutter-width,     // 30px
+  lg: $grid-gutter-width,     // 30px
+  xl: $grid-gutter-width      // 30px
+) !default;
+
+
 // Components
 //
 // Define common padding and border radius sizes and more.
diff --git a/scss/mixins/_grid-framework.scss b/scss/mixins/_grid-framework.scss
index 41bdf4646da2140fc46a514131a7886bfbc961f8..3bf16a3da7362587b675245e72f141c95c572ad8 100644
--- a/scss/mixins/_grid-framework.scss
+++ b/scss/mixins/_grid-framework.scss
@@ -3,14 +3,12 @@
 // Used only by Bootstrap to generate the correct number of grid classes given
 // any value of `$grid-columns`.
 
-@mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) {
+@mixin make-grid-columns($columns: $grid-columns, $gutters: $grid-gutter-widths, $breakpoints: $grid-breakpoints) {
   // Common properties for all breakpoints
   %grid-column {
     position: relative;
     width: 100%;
     min-height: 1px; // Prevent columns from collapsing when empty
-    padding-right: ($gutter / 2);
-    padding-left: ($gutter / 2);
   }
 
   @each $breakpoint in map-keys($breakpoints) {
@@ -27,6 +25,30 @@
       @extend %grid-column;
     }
 
+    // Allow gutter width to be different depending on breakpoints
+    @include media-breakpoint-only($breakpoint, $breakpoints) {
+      $gutter: map-get($gutters, $breakpoint);
+
+      @for $i from 1 through $columns {
+        .col#{$infix}-#{$i} {
+          padding-right: ($gutter / 2);
+          padding-left: ($gutter / 2);
+        }
+      }
+
+      .col,
+      .col#{$infix},
+      .col#{$infix}-auto {
+        padding-right: ($gutter / 2);
+        padding-left: ($gutter / 2);
+      }
+
+      .row {
+        margin-right: ($gutter / -2);
+        margin-left: ($gutter / -2);
+      }
+    }
+
     @include media-breakpoint-up($breakpoint, $breakpoints) {
       // Provide basic `.col-{bp}` classes for equal-width flexbox columns
       .col#{$infix} {