Cropping content

components/01_Layouts/contentCrop/_contentCrop.scss

@@ -1,6 +1,6 @@
 @mixin RV-ContentCrop--bottom {
     img {
-        object-position: botom;
+        object-position: bottom;
     }
 }
 
@@ -28,28 +28,7 @@
     }
 }
 
-@mixin RV-ContentCrop($-line-height: 1.1, $-prefix: '&') {
+@mixin RV-ContentCrop__Text {
-
-    // Heuristic, just to be safe
-    $-line-height: $-line-height * 1.1;
-    $-background-color: white;
-    display: block;
-    overflow: hidden;
-
-    p {
-        overflow: hidden;
-        display: block;
-        text-overflow: ellipsis;
-        padding: 0;
-        margin: 0;
-        line-height: #{$-line-height};
-        // Determining the max line count and caclulating the height
-        z-index: -20;
-        position: relative;
-        background-color: #{$-background-color};
-        height: floor(100% / $-line-height / 16) * $-line-height * 16;
-    }
-
     &--fade {
         &:after {
             background: linear-gradient(180deg, rgba(255, 255, 255, 0), #{$-background-color});
@@ -77,6 +56,72 @@
             padding: 0 2px;
         }
     }
+}
+
+@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;
+
+    p {
+        overflow: hidden;
+        display: block;
+        text-overflow: ellipsis;
+        padding: 0;
+        margin: 0;
+        line-height: #{$-line-height};
+        // Determining the max line count and caclulating the height
+        z-index: -20;
+        position: relative;
+        background-color: #{$-background-color};
+        height: floor(100% / $-line-height / 16) * $-line-height * 16;
+    }
+
+    &--square,
+    &--1to1 {
+        width: 100%;
+        padding-top: 100%;
+        position: relative;
+
+        img {
+            position: absolute;
+            top: 0;
+            left: 0;
+            bottom: 0;
+            right: 0;
+        }
+    }
+
+    &--1to2 {
+        width: 50%;
+        padding-top: 100%;
+        position: relative;
+
+        img {
+            position: absolute;
+            top: 0;
+            left: 0;
+            bottom: 0;
+            right: 0;
+        }
+    }
+
+    &--2to1 {
+        width: 100%;
+        padding-top: 50%;
+        position: relative;
+
+        img {
+            position: absolute;
+            top: 0;
+            left: 0;
+            bottom: 0;
+            right: 0;
+        }
+    }
 
     img {
         width: 100%;