node_modules/bulma/sass/grid/columns.scss in bulma-clean-theme-1.0.3 vs node_modules/bulma/sass/grid/columns.scss in bulma-clean-theme-1.0.4

@@ -18,11 +18,11 @@
 .#{iv.$class-prefix}column {
   display: block;
   flex-basis: 0;
   flex-grow: 1;
   flex-shrink: 1;
-  padding: $column-gap;
+  padding: cv.getVar("column-gap");
 
   .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
     > &.#{iv.$class-prefix}is-narrow {
     flex: none;
     width: unset;
@@ -135,13 +135,11 @@
 
   @for $i from 0 through 12 {
     .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
       > &.#{iv.$class-prefix}is-#{$i} {
       flex: none;
-      width: calc(
-        math.percentage(math.div($i, 12)) - calc(#{cv.getVar("column-gap")} / 2)
-      );
+      width: math.percentage(math.div($i, 12));
     }
 
     .#{iv.$class-prefix}columns.#{iv.$class-prefix}is-mobile
       > &.#{iv.$class-prefix}is-offset-#{$i} {
       margin-inline-start: math.percentage(math.div($i, 12));
@@ -241,15 +239,11 @@
     }
 
     @for $i from 0 through 12 {
       &.#{iv.$class-prefix}is-#{$i}-mobile {
         flex: none;
-        width: calc(
-          math.percentage(math.div($i, 12)) - calc(
-              #{cv.getVar("column-gap")} / 2
-            )
-        );
+        width: math.percentage(math.div($i, 12));
       }
 
       &.#{iv.$class-prefix}is-offset-#{$i}-mobile {
         margin-inline-start: math.percentage(math.div($i, 12));
       }
@@ -370,15 +364,11 @@
 
     @for $i from 0 through 12 {
       &.#{iv.$class-prefix}is-#{$i},
       &.#{iv.$class-prefix}is-#{$i}-tablet {
         flex: none;
-        width: calc(
-          math.percentage(math.div($i, 12)) - calc(
-              #{cv.getVar("column-gap")} / 2
-            )
-        );
+        width: math.percentage(math.div($i, 12));
       }
 
       &.#{iv.$class-prefix}is-offset-#{$i},
       &.#{iv.$class-prefix}is-offset-#{$i}-tablet {
         margin-inline-start: math.percentage(math.div($i, 12));
@@ -583,15 +573,11 @@
     }
 
     @for $i from 0 through 12 {
       &.#{iv.$class-prefix}is-#{$i}-desktop {
         flex: none;
-        width: calc(
-          math.percentage(math.div($i, 12)) - calc(
-              #{cv.getVar("column-gap")} / 2
-            )
-        );
+        width: math.percentage(math.div($i, 12));
       }
 
       &.#{iv.$class-prefix}is-offset-#{$i}-desktop {
         margin-inline-start: math.percentage(math.div($i, 12));
       }
@@ -691,15 +677,11 @@
     }
 
     @for $i from 0 through 12 {
       &.#{iv.$class-prefix}is-#{$i}-widescreen {
         flex: none;
-        width: calc(
-          math.percentage(math.div($i, 12)) - calc(
-              #{cv.getVar("column-gap")} / 2
-            )
-        );
+        width: math.percentage(math.div($i, 12));
       }
 
       &.#{iv.$class-prefix}is-offset-#{$i}-widescreen {
         margin-inline-start: math.percentage(math.div($i, 12));
       }
@@ -819,11 +801,13 @@
   &:last-child {
     margin-bottom: calc(-1 * #{cv.getVar("column-gap")});
   }
 
   &:not(:last-child) {
-    margin-bottom: calc(1.5rem - #{$column-gap});
+    margin-bottom: calc(
+      #{cv.getVar("block-spacing")} - #{cv.getVar("column-gap")}
+    );
   }
 
   // Modifiers
   &.#{iv.$class-prefix}is-centered {
     justify-content: center;
@@ -870,8 +854,108 @@
 
   @include mx.desktop {
     // Modifiers
     &.#{iv.$class-prefix}is-desktop {
       display: flex;
+    }
+  }
+
+  @for $i from 0 through 8 {
+    &.#{iv.$class-prefix}is-#{$i} {
+      @include cv.register-vars(
+        (
+          "column-gap": #{$i * 0.25rem},
+        )
+      );
+    }
+
+    @include mx.mobile {
+      &.#{iv.$class-prefix}is-#{$i}-mobile {
+        @include cv.register-vars(
+          (
+            "column-gap": #{$i * 0.25rem},
+          )
+        );
+      }
+    }
+
+    @include mx.tablet {
+      &.#{iv.$class-prefix}is-#{$i}-tablet {
+        @include cv.register-vars(
+          (
+            "column-gap": #{$i * 0.25rem},
+          )
+        );
+      }
+    }
+
+    @include mx.tablet-only {
+      &.#{iv.$class-prefix}is-#{$i}-tablet-only {
+        @include cv.register-vars(
+          (
+            "column-gap": #{$i * 0.25rem},
+          )
+        );
+      }
+    }
+
+    @include mx.touch {
+      &.#{iv.$class-prefix}is-#{$i}-touch {
+        @include cv.register-vars(
+          (
+            "column-gap": #{$i * 0.25rem},
+          )
+        );
+      }
+    }
+
+    @include mx.desktop {
+      &.#{iv.$class-prefix}is-#{$i}-desktop {
+        @include cv.register-vars(
+          (
+            "column-gap": #{$i * 0.25rem},
+          )
+        );
+      }
+    }
+
+    @include mx.desktop-only {
+      &.#{iv.$class-prefix}is-#{$i}-desktop-only {
+        @include cv.register-vars(
+          (
+            "column-gap": #{$i * 0.25rem},
+          )
+        );
+      }
+    }
+
+    @include mx.widescreen {
+      &.#{iv.$class-prefix}is-#{$i}-widescreen {
+        @include cv.register-vars(
+          (
+            "column-gap": #{$i * 0.25rem},
+          )
+        );
+      }
+    }
+
+    @include mx.widescreen-only {
+      &.#{iv.$class-prefix}is-#{$i}-widescreen-only {
+        @include cv.register-vars(
+          (
+            "column-gap": #{$i * 0.25rem},
+          )
+        );
+      }
+    }
+
+    @include mx.fullhd {
+      &.#{iv.$class-prefix}is-#{$i}-fullhd {
+        @include cv.register-vars(
+          (
+            "column-gap": #{$i * 0.25rem},
+          )
+        );
+      }
     }
   }
 }