Refactoring: Wrap as block modifier

components/01_Layouts/breakPoint/_breakPoint.styl

@@ -1,21 +1,20 @@
-RV-BreakPoint__Item()
+RV-BreakPoint__Item(breakPoint)
 	+RV-Element()
 		RV-FlexRow__Item()
-		flex-basis 'calc(%s * 999 - 100% * 999)' % --localBreakPoint
+		flex-basis 'calc(%s * 999 - 100% * 999)' % breakPoint
 		overflow: hidden;
 		--outer-spacing 0
 		--inner-spacing 0
 
 RV-BreakPoint__Item--outside()
 	+RV-Element--modifier()
-		margin-bottom -100vh
 		flex-shrink 999
 
 RV-BreakPoint__Item--inside()
 	+RV-Element--modifier()
 		flex-grow 0
 
-RV-BreakPoint(localBreakPoint)
+RV-BreakPoint(breakPoint)
 	RV-FlexRow()
 	+RV-Squash()
 		RV-FlexRow--wrap()
@@ -26,10 +25,16 @@ RV-BreakPoint(localBreakPoint)
 	gap 0px
 	
 	RV-Utils__ElementAmount--range(0, 20, @(index, total){
-			min-width "calc((%s - (var(--spacing-inner) * (%s - 1))) / %s - (2 * var(--spacing-inner)))" % (localBreakPoint index index)
+			min-width "calc((%s - (var(--spacing-inner) * (%s - 1))) / %s - (2 * var(--spacing-inner)))" % (breakPoint index index)
 		}
 	)
 
+RV-BreakPoint--wrap()
+	+RV-Block--modifier()
+		+RV-Element('Item')
+			+RV-Element--modifier('outside')
+				margin-bottom -100vh
+
 RV-BreakPoint--horizontal()
 	+RV-Block--modifier()
 		flex-wrap nowrap
@@ -53,21 +58,22 @@ RV-BreakPoint--vertical()
 
 +RV-Block('RV-BreakPoint')
 	RV-CSSParameter({
-		localBreakPoint: 500px
+		breakPoint: 500px
 		fixedSize: 100px
 	})
 	
 	&&
 		--inner-spacing 0
 	
-	RV-BreakPoint(--localBreakPoint)
+	RV-BreakPoint(--breakPoint)
 	
 	+RV-Element()
-		RV-BreakPoint__Item(--localBreakPoint)
+		RV-BreakPoint__Item(--breakPoint)
 		RV-BreakPoint__Item--outside()
 		RV-BreakPoint__Item--inside()
 		RV-BreakPoint__Item--fixedSize(--fixedSize)
 		
+	RV-BreakPoint--wrap()
 	RV-BreakPoint--horizontal()
 	RV-BreakPoint--vertical()
 		

components/01_Layouts/breakPoint/breakPoint.config.json

@@ -1,5 +1,8 @@
 {
 	"title": "BreakPoint",
+	"context": {
+		"modifier": "--wrap"
+	},
 	"variants": [
 		{
 			"name": "Horizontal",