Add card image overlays

1 files changed, 19 insertions, 2 deletions

diff --git a/src/objects/_card.scss b/src/objects/_card.scss
index e6f266d..d1463d3 100644
--- a/src/objects/_card.scss
+++ b/src/objects/_card.scss
@@ -14,7 +14,7 @@
         position:         relative;
         display:          flex;
         flex-direction:   column;
-        margin:           calc(-1 * props.get(vars.$key-focus--border-width));
+        margin-inline:    calc(-1 * props.get(vars.$key-focus--border-width));
         background-color: props.get(vars.$bg-color);
         background-clip:  content-box;
         border:           props.get(vars.$key-focus--border-offset) solid transparent;
@@ -55,9 +55,11 @@
         }
 
         @include bem.elem('image') {
+            position:    relative;
             display:     block;
             flex:        0 0 auto;
             inline-size: 100%;
+            overflow:    hidden;
             object-fit:  cover;
             transition:  transform .2s, opacity .2s;
 
@@ -76,6 +78,21 @@
             }
         }
 
+        @include bem.elem('image-img') {
+            display:     block;
+            inline-size: 100%;
+            object-fit:  cover;
+        }
+
+        @include bem.elem('image-overlay') {
+            position:        absolute;
+            inset-block-end: 0;
+            inset-inline:    0;
+            z-index:         10;
+            padding-block:   props.get(vars.$image-overlay--pad-b);
+            padding-inline:  props.get(vars.$image-overlay--pad-i);
+        }
+
         @include bem.elem('body') {
             flex:            1 0 auto;
             padding-block:   props.get(vars.$pad-b);
@@ -129,7 +146,7 @@
 
         @include bem.modifier('quiet') {
             position:         relative;
-            margin:           0;
+            margin-inline:    0;
             background-color: transparent;
             border:           0;