fixup! fixup! Feat(web): Add spacing property to Grid #DS-1388

packages/web/src/scss/components/Grid/_Grid.scss

@@ -11,6 +11,19 @@
     @include tools.gutters(theme.$grid-gutters, theme.$breakpoints);
 }
 
+// stylelint-disable-next-line selector-max-universal -- Let's be bold and reset spacing for all direct descendants regardless of their type.
+.Grid > * {
+    @each $breakpoint-name, $breakpoint-value in theme.$breakpoints {
+        @if $breakpoint-value > 0 {
+            --grid-spacing-x-#{$breakpoint-name}: initial;
+            --grid-spacing-y-#{$breakpoint-name}: initial;
+        } @else {
+            --grid-spacing-x: initial;
+            --grid-spacing-y: initial;
+        }
+    }
+}
+
 @include tools.equal-columns(theme.$grid-equal-columns, theme.$breakpoints);
 
 @include tools.item(theme.$breakpoints);

packages/web/src/scss/components/Grid/_tools.scss

@@ -12,10 +12,10 @@
     $row-property-name: --grid-spacing-y;
     // stylelint-enable
 
-    $column-fallback: map.get($gutters, 'mobile');
-    $row-fallback: map.get($gutters, 'mobile');
-
     @each $breakpoint-name, $breakpoint-value in $breakpoints {
+        $column-fallback: map.get($gutters, $breakpoint-name);
+        $row-fallback: map.get($gutters, $breakpoint-name);
+
         @if not map.has-key($gutters, $breakpoint-name) {
             @error 'Invalid breakpoint specified! #{$breakpoint-name} doesn\'t exist. Use one of #{map.keys($breakpoints)}';
         }