New dedicated component for aspect Ratio

components/02_ContentShape/aspectRatio/_aspectRatio.styl

@@ -0,0 +1,61 @@
+/**
+ * Mixins to maintain aspect ratio of an element.
+ */
+RV-AspectRatio--XtoY(aspectX=1, aspectY=1)
+	+RV-Block--modifier()
+		RV-CSSParameter({
+			aspectX: aspectX,
+			aspectY: aspectY
+		})
+		
+		padding-top 'calc(100% * calc(%s / %s))' % (--aspectY --aspectX)
+		&:last-child
+			margin-bottom 'calc(-1 * 100% * calc(%s / %s) + var(--outer-spacing))' % (--aspectY --aspectX)
+			
+		RV-Utils__ElementAmount(1, @(index, totale){
+			margin-bottom 0px
+		})
+
+RV-AspectRatio--1to2()
+	+RV-Block--modifier()
+		RV-AspectRatio--XtoY(1, 2)
+		
+RV-AspectRatio--2to1()
+	+RV-Block--modifier()
+		RV-AspectRatio--XtoY(2, 1)
+	
+RV-AspectRatio--3to2()
+	+RV-Block--modifier()
+		RV-AspectRatio--XtoY(3, 2)
+		
+RV-AspectRatio--4to3()
+	+RV-Block--modifier()
+		RV-AspectRatio--XtoY(4, 3)
+		
+RV-AspectRatio--16to9()
+	+RV-Block--modifier()
+		RV-AspectRatio--XtoY(16, 9)
+
+
+RV-AspectRatio()
+	position relative
+	overflow hidden
+	height unset
+	width unset
+
+	*
+		object-fit cover
+		position absolute
+		top 0
+		left 0
+		bottom 0
+		right 0
+
++RV-Block('RV-AspectRatio')
+	RV-AspectRatio()
+	
+	RV-AspectRatio--1to2()
+	RV-AspectRatio--2to1()
+	RV-AspectRatio--3to2()
+	RV-AspectRatio--4to3()
+	RV-AspectRatio--16to9()

components/02_ContentShape/aspectRatio/aspectRatio.config.json

@@ -0,0 +1,45 @@
+{
+	"name": "aspectRatio",
+	"title": "Aspect Ratio",
+	"context": {
+		"modifier_list": [
+			"RV-AspectRatio--1to2 RV-Dummy--orange",
+			"RV-AspectRatio--2to1 RV-Dummy--blue",
+			"RV-AspectRatio--3to2 RV-Dummy--green",
+			"RV-AspectRatio--4to3 RV-Dummy--red",
+			"RV-AspectRatio--16to9 RV-Dummy--yellow"
+		]
+	},
+	"variants": [
+		{
+			"name": "1 to 2",
+			"context": {
+				"modifier": "RV-AspectRatio--1to2"
+			}
+		},
+		{
+			"name": "2 to 1",
+			"context": {
+				"modifier": "RV-AspectRatio--2to1"
+			}
+		},
+		{
+			"name": "3 to 2",
+			"context": {
+				"modifier": "RV-AspectRatio--3to2"
+			}
+		},
+		{
+			"name": "4 to 3",
+			"context": {
+				"modifier": "RV-AspectRatio--4to3"
+			}
+		},
+		{
+			"name": "16 to 9",
+			"context": {
+				"modifier": "RV-AspectRatio--16to9"
+			}
+		}
+	]
+}

components/02_ContentShape/aspectRatio/aspectRatio.hbs

@@ -0,0 +1,12 @@
+
+{{#if modifier}}
+	<div class="RV-Dummy RV-AspectRatio {{modifier}}"></div>
+{{else}}
+	<div class="RV-FlexGrid RV-FlexGrid--masonry">
+	{{#each modifier_list}}
+		<div class="RV-FlexGrid__Item ">
+			<div class="RV-Dummy RV-AspectRatio {{this}}"></div>
+		</div>
+	{{/each}}
+	</div>
+{{/if}}