Pagination Molecule

components/01_Layouts/flexRow/_flexRow.styl

@@ -13,6 +13,16 @@ RV-FlexRow--vertical()
 	+RV-Block__Modifier--name('vertical')
 		flex-direction column
 
+
+RV-FlexRow__Item--outsideBreakPoint()
+	+RV-Element__Modifier--name('outsideBreakPoint')
+		margin-bottom -100vh
+		height max-content
+		flex-shrink 999
+
+RV-FlexRow__Item--insideBreakPoint()
+	+RV-Element__Modifier--name('insideBreakPoint')
+		flex-grow 0
 /*
  * Breaks from row to column orientation at the given breakpoint
  * breaks when the container is smaller than $-localBreakPoint or when the viewport is smaller than $-mediaBreakPoint.
@@ -33,13 +43,11 @@ RV-FlexRow--breakPoint(localBreakPoint, mediaBreakPoint)
 			flex-basis 'calc(%s * 999 - 100% * 999)' % localBreakPoint
 			overflow hidden
 			
-			+RV-Element__Modifier('outsideBreakPoint')
-				margin-bottom -100vh
-				height max-content
-				flex-shrink 999
+			+RV-Element__Modifier()
+				RV-FlexRow__Item--outsideBreakPoint()
 				
-			+RV-Element__Modifier('insideBreakPoint')
-				flex-grow 0
+			+RV-Element__Modifier()
+				RV-FlexRow__Item--insideBreakPoint()
 		
 		@media(max-width mediaBreakPoint)
 			flex-direction row