Fix responsive variable column gap

Ran into this issue when building a site, see the minimal example here: https://codepen.io/letsbuildafire/pen/ExgaYgy that illustrates how the column gap would not update correctly at different breakpoints.

sass/grid/columns.sass

@@ -484,30 +484,39 @@ $column-gap: 0.75rem !default
     @for $i from 0 through 8
       &.is-#{$i}
         --columnGap: #{$i * 0.25rem}
-      +mobile
+    +mobile
+      @for $i from 0 through 8
         &.is-#{$i}-mobile
           --columnGap: #{$i * 0.25rem}
-      +tablet
+    +tablet
+      @for $i from 0 through 8
         &.is-#{$i}-tablet
           --columnGap: #{$i * 0.25rem}
-      +tablet-only
+    +tablet-only
+      @for $i from 0 through 8
         &.is-#{$i}-tablet-only
           --columnGap: #{$i * 0.25rem}
-      +touch
+    +touch
+      @for $i from 0 through 8
         &.is-#{$i}-touch
           --columnGap: #{$i * 0.25rem}
-      +desktop
+    +desktop
+      @for $i from 0 through 8
         &.is-#{$i}-desktop
           --columnGap: #{$i * 0.25rem}
-      +desktop-only
+    +desktop-only
+      @for $i from 0 through 8
         &.is-#{$i}-desktop-only
           --columnGap: #{$i * 0.25rem}
-      +widescreen
+    +widescreen
+      @for $i from 0 through 8
         &.is-#{$i}-widescreen
           --columnGap: #{$i * 0.25rem}
-      +widescreen-only
+    +widescreen-only
+      @for $i from 0 through 8
         &.is-#{$i}-widescreen-only
           --columnGap: #{$i * 0.25rem}
-      +fullhd
+    +fullhd
+      @for $i from 0 through 8
         &.is-#{$i}-fullhd
           --columnGap: #{$i * 0.25rem}