Spacing is not passed down to children

components/01_Layouts/flexGrid/flexGrid.config.json

@@ -1,5 +1,8 @@
 {
 	"title": "FlexGRid",
+	"context": {
+		"item-shadow" : "drop"
+	},
 	"variants": [
 		{
 			"name": "AutoWidth",
@@ -18,6 +21,12 @@
 			"context": {
 				"modifier": "--masonry"
 			}
+		},
+		{
+			"name": "Horizontal Masonry",
+			"context": {
+				"modifier": "--horizontalMasonry"
+			}
 		}
 	]
 }

components/02_Styles/spacing/_spacing.styl

@@ -1,38 +1,55 @@
 RV-Spacing__Outer--small()
 	+RV-Element__Modifier('small')
-		margin spacing-small
 		--outer-spacing spacing-small
+		margin var(--outer-spacing)
+		* > {
+			--outer-spacing 0
+		}
 
 RV-Spacing__Outer--medium()
 	+RV-Element__Modifier('medium')
-		margin spacing-medium
 		--outer-spacing spacing-medium
+		margin var(--outer-spacing)
+		* > {
+			--outer-spacing 0
+		}
 
 RV-Spacing__Outer--large()
 	+RV-Element__Modifier('large')		
-		margin spacing-large
 		--outer-spacing spacing-large
 		
+		* > {
+			--outer-spacing 0
+		}
 RV-Spacing__Inner--small()
 	+RV-Element__Modifier('small')
-		padding spacing-small
-		gap spacing-small
-		column-gap spacing-small		
 		--inner-spacing spacing-small
+		padding var(--inner-spacing)
+		gap var(--inner-spacing)
+		column-gap var(--inner-spacing)			
+		* > {
+			--inner-spacing 0
+		}
 
 RV-Spacing__Inner--medium()
 	+RV-Element__Modifier('medium')
-		padding spacing-medium
-		gap spacing-medium
-		column-gap spacing-medium		
 		--inner-spacing spacing-medium
+		padding var(--inner-spacing)
+		gap var(--inner-spacing)
+		column-gap var(--inner-spacing)			
+		* > {
+			--inner-spacing 0
+		}
 
 RV-Spacing__Inner--large()
 	+RV-Element__Modifier('large')
-		padding spacing-large
-		gap spacing-large
-		column-gap spacing-large
 		--inner-spacing spacing-large
+		padding var(--inner-spacing)
+		gap var(--inner-spacing)
+		column-gap var(--inner-spacing)			
+		* > {
+			--inner-spacing 0
+		}
 
 +RV-Block('RV-Spacing')
 	+RV-Element('Outer')