Margin and Padding at 'Container Queries'

components/01_Layouts/contentCrop/_contentCrop.styl

@@ -124,8 +124,9 @@ RV-ContentCrop(line-height=1.1, height=350px)
 	display block
 	overflow hidden
 
-	height calc_height()
+	height 100%
-	width calc_width()
+	width 100%
+	box-sizing border-box
 
 	
 	.RV-Image

components/01_Layouts/dummy/_dummy.styl

@@ -34,16 +34,19 @@
 	
 	+RV-Element('Square')
 		min-width 300px
-		width 100%
+		--width 100%
 		min-height 300px
 		
+		height var(--height)
+		width var(--width)
+		
 		+RV-Element__Modifier('large')
-			height 500px
+			--height 500px
-			width 500px
+			--width 500px
 			
 		+RV-Element__Modifier('small')
-			height 100px
+			--height 100px
-			width 100px
+			--width 100px
 
 	+RV-Block__Modifier('square')
 		height 350px

components/01_Layouts/fan/_fan.styl

@@ -25,9 +25,20 @@ RV-Fan--horizontal(base-height, base-width)
 			flex-shrink 9999
 			flex-grow 1
 			max-width base-width
+			
+			margin 0
+			padding 0
+			--_spacing-difference calc(var(--inner-spacing) - var(--outer-spacing))
+			*
+				position relative
+				height calc(100% - var(--_spacing-difference))
+				width calc(100% - var(--_spacing-difference))
+				top calc(var(--_spacing-difference) / 2)
+				left calc(var(--_spacing-difference) / 2)
 		
 		+RV-Element('Surface')
-			height calc_height(base-height)
+			height base-height
+			box-sizing border-box
 			flex-basis 'calc(2 * (%s + 2 * var(--inner-spacing) + 2 * var(--outer-spacing)) * 999 - 100% * 999)' % base-width
 
 /*
@@ -42,7 +53,8 @@ RV-Fan--vertical(base-height, base-width)
 		min-width initial
 		
 		+RV-Element('Surface')
-			width calc_width(base-width)
+			width base-width
+			box-sizing border-box
 			min-width initial
 			min-height base-height
 
@@ -60,7 +72,8 @@ RV-Fan--auto(base-height, base-width)
 			flex-grow 1
 
 		+RV-Element('Surface')
-			height calc_height(base-height)
+			height base-height
+			box-sizing border-box
 			flex-grow 99999
 
 
@@ -69,25 +82,27 @@ RV-Fan--auto(base-height, base-width)
  * ############### */
 RV-Fan__Base(base-height, base-width)
 	+RV-Element--name('Base')
-		height calc_height(base-height)
+		box-sizing border-box
-		
+		flex-basis base-width
-		flex-basis calc_width(base-width)
 		flex-shrink 0
 		flex-grow 0
 
 RV-Fan__Surface--fixedHeight(height)
 	+RV-Element__Modifier--name('fixedHeight')
-		height calc_height(height)
+		height height
+		box-sizing border-box
 
 RV-Fan__Surface--fixedWidth(width)
 	+RV-Element__Modifier--name('fixedWidth')
-		max-width calc_width(width)
+		max-width width
+		box-sizing border-box
 
 RV-Fan__Surface(base-height, base-width)
 	+RV-Element--name('Surface')
 		overflow hidden
-		height calc_height(base-height)
+		box-sizing border-box
-		flex-basis calc_width(base-width)
+		height base-height
+		flex-basis base-width
 		flex-grow 1
 
 /* ############

components/01_Layouts/flexRow/_flexRow.styl

@@ -50,6 +50,17 @@ RV-FlexRow--breakPoint(localBreakPoint, mediaBreakPoint=0)
 				
 			+RV-Element__Modifier()
 				RV-FlexRow__Item--insideBreakPoint()
+				
+			margin 0
+			padding 0
+			--_spacing-difference calc(var(--inner-spacing) - var(--outer-spacing))
+			--height 100%
+			*
+				position relative
+				height calc(var(--height) - var(--_spacing-difference))
+				width calc(var(--height) - var(--_spacing-difference))
+				top calc(var(--_spacing-difference) / 2)
+				left calc(var(--_spacing-difference) / 2)
 		
 		@media(max-width mediaBreakPoint)
 			flex-direction row

components/04_Molecules/teaser/_teaser.styl

@@ -44,4 +44,4 @@
 		RV-FlexRow--horizontal()
 		padding 0
 		
-	RV-Fan--fullWidth(--image-height, --image-width)
+	RV-Fan--auto(--image-height, --image-width)