gutters are globalised

src/components/adjacent-image-text/adjacent-image-text.scss

@@ -2,9 +2,6 @@
   display: block;
 }
 
-$gutter-mobile: 16px;
-$gutter-narrow: 24px; //tablet
-$gutter-extrawide: 32px;
 $margin-mobile: 16px;
 $margin-narrow: 32px;
 
@@ -43,10 +40,10 @@ $margin-narrow: 32px;
     }
 
     @include breakpoint($wide) {
-      flex: calc(((100% - #{$gutter-narrow} * 11) / 12) * 6 + #{$gutter-narrow} * 6);
+      flex: calc(((100% - #{var(--gutter-narrow)} * 11) / 12) * 6 + #{var(--gutter-narrow)} * 6);
     }
     @include breakpoint($extrawide) {
-      flex: calc(((100% - #{$gutter-extrawide} * 11) / 12) * 6 + #{$gutter-extrawide} * 6);
+      flex: calc(((100% - #{var(--gutter-extrawide)} * 11) / 12) * 6 + #{var(--gutter-extrawide)} * 6);
     }
   }
 
@@ -77,7 +74,7 @@ $margin-narrow: 32px;
     @include breakpoint($wide) {
       border-image: none;
       border-left: none;
-      flex: calc(((100% - #{$gutter-narrow} * 11) / 12) * 6 + #{$gutter-narrow} * 5);
+      flex: calc(((100% - #{var(--gutter-narrow)} * 11) / 12) * 6 + #{var(--gutter-narrow)} * 5);
       margin-left: 0;
       margin-top: 0;
       padding-top: 0;
@@ -87,7 +84,7 @@ $margin-narrow: 32px;
       -o-border-image: none;
     }
     @include breakpoint($extrawide) {
-      flex: calc(((100% - #{$gutter-extrawide} * 11) / 12) * 6 + #{$gutter-extrawide} * 5);
+      flex: calc(((100% - #{var(--gutter-extrawide)} * 11) / 12) * 6 + #{var(--gutter-extrawide)} * 5);
     }
 
     &__info-wrapper {
@@ -97,12 +94,12 @@ $margin-narrow: 32px;
         padding-left: 50px;
       }
       @include breakpoint($wide) {
-        padding-left: calc((100% - #{$gutter-narrow} * 5) / 6);
-        padding-right: calc((100% - #{$gutter-narrow} * 5) / 6);
+        padding-left: calc((100% - #{var(--gutter-narrow)} * 5) / 6);
+        padding-right: calc((100% - #{var(--gutter-narrow)} * 5) / 6);
       }
       @include breakpoint($extrawide) {
-        padding-left: calc((100% - #{$gutter-extrawide} * 5) / 6);
-        padding-right: calc((100% - #{$gutter-extrawide} * 5) / 6);
+        padding-left: calc((100% - #{var(--gutter-extrawide)} * 5) / 6);
+        padding-right: calc((100% - #{var(--gutter-extrawide)} * 5) / 6);
       }
     }
 

src/global/_gutters.scss

+:root {
+  --gutter-mobile: 16px;
+  --gutter-narrow: 24px;
+  --gutter-medium: 24px;
+  --gutter-wide: 24px;
+  --gutter-extrawide: 32px;
+}

src/global/styles.scss

 @charset "UTF-8";
 
-@import "../../node_modules/breakpoint-sass/stylesheets/breakpoint";
+@import '../../node_modules/breakpoint-sass/stylesheets/breakpoint';
 
-@import "colors";
-@import "typography";
-@import "mixins";
-@import "breakpoints";
+@import 'colors';
+@import 'gutters';
+@import 'typography';
+@import 'mixins';
+@import 'breakpoints';