Outsource Breakpoint to its own component

components/01_Layouts/breakPoint/_breakPoint.styl

@@ -0,0 +1,73 @@
+RV-BreakPoint__Item(localBreakPoint)
+	+RV-Element()
+		RV-FlexRow__Item()
+		flex-basis 'calc(%s * 999 - 100% * 999)' % localBreakPoint
+		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-FlexRow()
+	+RV-Squash()
+		RV-FlexRow--wrap()
+	
+	overflow-y hidden
+	
+	RV-Reset()
+	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)
+		}
+	)
+
+RV-BreakPoint--horizontal()
+	+RV-Block--modifier()
+		flex-wrap nowrap
+		min-width max-content
+		
+		+RV-Element('Item')
+			+RV-Element--modifier('outside')
+				margin-bottom unset
+				height unset		
+
+RV-BreakPoint--vertical()
+	+RV-Block--modifier()
+		flex-direction column
+		flex-wrap nowrap
+		height 100%
+		
+		+RV-Element('Item')
+			+RV-Element--modifier('outside')
+				margin-bottom unset
+				height unset
+
++RV-Block('RV-BreakPoint')
+	RV-CSSParameter({
+		localBreakPoint: 500px
+	})
+	
+	&&
+		--inner-spacing 0
+	
+	RV-BreakPoint(--localBreakPoint)
+	
+	+RV-Element()
+		RV-BreakPoint__Item(--localBreakPoint)
+		RV-BreakPoint__Item--outside()
+		RV-BreakPoint__Item--inside()
+		
+	RV-BreakPoint--horizontal()
+	RV-BreakPoint--vertical()
+		
+	
+	

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

@@ -0,0 +1,17 @@
+{
+	"title": "BreakPoint",
+	"variants": [
+		{
+			"name": "Horizontal",
+			"context": {
+				"modifier": "--horizontal"
+			}
+		},
+		{
+			"name": "Vertical",
+			"context": {
+				"modifier": "--vertical"
+			}
+		}
+	]
+}

components/01_Layouts/breakPoint/breakPoint.hbs

@@ -0,0 +1,27 @@
+
+<style>
+	#wrapper {
+		height: 100vh;
+		--outer-spacing: 0;
+	}
+</style>
+<div class="RV-BreakPoint RV-BreakPoint{{modifier}}">
+	<div class="RV-BreakPoint__Item RV-Dummy RV-Spacing__Inner--medium">
+		<div>ItemItem</div>
+	</div>
+	<div class="RV-BreakPoint__Item RV-BreakPoint__Item--outside RV-Dummy RV-Dummy--red">
+		<div>Larger</div>
+	</div>
+	<div class="RV-BreakPoint__Item RV-Dummy">
+		<div>ItemItem</div>
+	</div>
+	<div class="RV-BreakPoint__Item RV-Dummy">
+		<div>ItemItem</div>
+	</div>
+	<div class="RV-BreakPoint__Item RV-BreakPoint__Item--inside RV-Dummy--yellow RV-Dummy">
+		<div style="margin: 15px;">Smaller</div>
+	</div>
+	<div class="RV-BreakPoint__Item RV-Dummy">
+		<div>ItemItem</div>
+	</div>
+</div>