Honsely, I don't know what happened here

components/00_ContentShape/focalPoint/_focalPoint.styl

@@ -0,0 +1,48 @@
+// FocalPoint in percentage
+RV-FocalPoint(focalX=50%, focalY=50%)
+	RV-CSSParameter({
+		focalX: focalX,
+		focalY: focalY
+	})
+	
+	height 100%
+	width 100%
+	object-fit cover
+	object-position --focalX --focalY
+
+RV-FocalPoint--upperHalf()
+	RV-CSSParameter({
+		focalY: 25%
+	})
+
+RV-FocalPoint--lowerHalf()
+	RV-CSSParameter({
+		focalY: 75%
+	})
+
+RV-FocalPoint--leftHalf()
+	RV-CSSParameter({
+		focalX: 25%
+	})
+
+RV-FocalPoint--rightHalf()
+	RV-CSSParameter({
+		focalX: 75%
+	})
+
+.RV-FocalPoint
+	RV-FocalPoint()
+	
+	&--upperHalf
+		RV-FocalPoint--upperHalf()
+	
+	&--lowerHalf
+		RV-FocalPoint--lowerHalf()
+	
+	&--leftHalf	
+		RV-FocalPoint--leftHalf()
+	
+	&--rightHalf
+		RV-FocalPoint--rightHalf()	
+
+	

components/00_ContentShape/focalPoint/focalPoint.config.json

@@ -0,0 +1,4 @@
+{
+	"name": "focalPoint",
+	"title": "Focal Point"
+}

components/00_ContentShape/focalPoint/focalPoint.hbs

@@ -0,0 +1,22 @@
+
+<div>
+	<div class="RV-AspectRatio RV-AspectRatio--4to3">
+		<img class="RV-FocalPoint" style="--focalX: 50%; --focalY: 16.66%"  src="{{ path '/images/landscape.jpeg'}}"/>
+	</div>
+</div>
+
+<div class="RV-AspectRatio RV-AspectRatio--4to3">
+	<img class="RV-FocalPoint" style="--focalX: 50%; --focalY: 75%"  src="{{ path '/images/portrait_lowFocelPoint.jpeg'}}"/>
+</div>
+
+<div class="RV-AspectRatio RV-AspectRatio--4to3">
+	<img class="RV-FocalPoint" style="--focalX: 50%; --focalY: 47%"  src="{{ path '/images/hasi01.png'}}"/>
+</div>
+
+<div class="RV-AspectRatio RV-AspectRatio--4to3">
+	<img class="RV-FocalPoint RV-FocalPoint--upperHalf" src="{{ path '/images/portrait_lowFocelPoint.jpeg'}}"/>
+</div>
+
+<div class="RV-AspectRatio RV-AspectRatio--1to2">
+	<img class="RV-FocalPoint RV-FocalPoint--rightHalf" src="{{ path '/images/landscape.jpeg'}}"/>
+</div>