Restructuring Shapes

components/01_Layouts/contentCrop/_contentCrop.scss

@@ -28,7 +28,7 @@
     }
 }
 
-@mixin RV-ContentCrop__Text {
+@mixin RV-ContentCrop__Text--fade($-background-color: white) {
     &--fade {
         &:after {
             background: linear-gradient(180deg, rgba(255, 255, 255, 0), #{$-background-color});
@@ -42,7 +42,9 @@
             z-index: -10;
         }
     }
+}
 
+@mixin RV-ContentCrop__Text--ellipsis($-background-color: white) {
     &--ellipsis {
         &:after {
             position: relative;
@@ -58,13 +60,7 @@
     }
 }
 
-@mixin RV-ContentCrop($-line-height: 1.1, $-prefix: '&') {
-
-    // Heuristic, just to be safe
-    $-line-height: $-line-height * 1.1;
-    $-background-color: white;
-    display: block;
-    overflow: hidden;
+@mixin RV-ContentCrop__Text($-line-height: 1.1, $-background-color: white) {
 
     p {
         overflow: hidden;
@@ -80,49 +76,82 @@
         height: floor(100% / $-line-height / 16) * $-line-height * 16;
     }
 
-    &--square,
-    &--1to1 {
-        width: 100%;
-        padding-top: 100%;
-        position: relative;
+    &--fade {
+        @include RV-ContentCrop__Text--fade($-background-color);
+    }
 
-        img {
-            position: absolute;
-            top: 0;
-            left: 0;
-            bottom: 0;
-            right: 0;
-        }
+    &--ellipsis {
+        @include RV-ContentCrop__Text--ellipsis($-background-color);
+    }
+}
+
+@mixin RV-ContentCrop__Shapes--square {
+    width: 100%;
+    padding-top: 100%;
+    position: relative;
+
+    img,
+    div {
+        position: absolute;
+        top: 0;
+        left: 0;
+        bottom: 0;
+        right: 0;
+    }
+}
+
+@mixin RV-ContentCrop__Shapes--circle {
+    @include RV-ContentCrop__Shapes--square;
+    border-radius: 50%;
+}
+
+@mixin RV-ContentCrop__Shapes--xtoy($-x, $-y) {
+    width: 100%;
+    padding-top: 100% * ($-y / $-x);
+    position: relative;
+
+    img {
+        object-fit: cover;
+        position: absolute;
+        top: 0;
+        left: 0;
+        bottom: 0;
+        right: 0;
+    }
+}
+
+@mixin RV-ContentCrop__Shapes {
+
+    &--square {
+        @include RV-ContentCrop__Shapes--square;
+    }
+
+    &--circle {
+        @include RV_ContentCrop__Shapes--circle;
     }
 
     &--1to2 {
-        width: 50%;
-        padding-top: 100%;
-        position: relative;
-
-        img {
-            position: absolute;
-            top: 0;
-            left: 0;
-            bottom: 0;
-            right: 0;
-        }
+        @include RV-ContentCrop__Shapes--xtoy(1, 2);
     }
 
     &--2to1 {
-        width: 100%;
-        padding-top: 50%;
-        position: relative;
-
-        img {
-            position: absolute;
-            top: 0;
-            left: 0;
-            bottom: 0;
-            right: 0;
-        }
+        @include RV-ContentCrop__Shapes--xtoy(2, 1);
     }
 
+    &--4to3 {
+        @include RV-ContentCrop__Shapes--xtoy(4, 3);
+    }
+
+    &--16to9 {
+        @include RV-ContentCrop__Shapes--xtoy(16, 9);
+    }
+
+    &--3to2 {
+        @include RV-ContentCrop__Shapes--xtoy(3, 2);
+    }
+}
+
+@mixin RV-ContentCrop__Image {
     img {
         width: 100%;
         height: 100%;
@@ -130,23 +159,38 @@
         display: block;
     }
 
-    #{$-prefix}--left {
+}
+
+@mixin RV-ContentCrop($-line-height: 1.1, $-prefix: '&') {
+
+    // Heuristic, just to be safe
+    $-line-height: $-line-height * 1.1;
+    $-background-color: white;
+    display: block;
+    overflow: hidden;
+
+    @include RV-ContentCrop__Image;
+    @include RV-ContentCrop__Text($-line-height);
+
+    @include RV-ContentCrop__Shapes;
+
+    &--left {
         @include RV-ContentCrop--left;
     }
 
-    #{$-prefix}--center {
+    &--center {
         @include RV-ContentCrop--center;
     }
 
-    #{$-prefix}--top {
+    &--top {
         @include RV-ContentCrop--top;
     }
 
-    #{$-prefix}--bottom {
+    &--bottom {
         @include RV-ContentCrop--bottom;
     }
 
-    #{$-prefix}--center {
+    &--center {
         @include RV-ContentCrop--center;
     }
 }