1 files changed, 45 insertions, 3 deletions

diff --git a/src/objects/_card.scss b/src/objects/_card.scss
index e6f266d..c87e676 100644
--- a/src/objects/_card.scss
+++ b/src/objects/_card.scss
@@ -55,11 +55,13 @@
         }
 
         @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;
+            transition:  background-color .2s, transform .2s, opacity .2s;
 
             &:first-child {
                 border-start-start-radius: props.get(vars.$rounding);
@@ -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:         5;
+            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);
@@ -128,8 +145,7 @@
         }
 
         @include bem.modifier('quiet') {
-            position:         relative;
-            margin:           0;
+            margin-inline:    0;
             background-color: transparent;
             border:           0;
 
@@ -144,6 +160,12 @@
                         opacity:          .75;
                         transform:        translateY(props.get(vars.$hover--offset-b));
                     }
+
+                    @include bem.elem('body') {
+                        @include bem.modifier('hidden') {
+                            transform: translateY(props.get(vars.$hover--offset-b));
+                        }
+                    }
                 }
 
                 &:focus-visible {
@@ -176,6 +198,11 @@
             @include bem.elem('body') {
                 padding:             0;
                 padding-block-start: props.get(vars.$spacing);
+
+                @include bem.modifier('hidden') {
+                    padding-block:  props.get(vars.$pad-b);
+                    padding-inline: props.get(vars.$pad-i);
+                }
             }
 
             @include bem.elem('footer') {
@@ -187,6 +214,21 @@
             flex-direction: row;
             align-items:    center;
 
+            @include bem.elem('image') {
+                align-self:  stretch;
+                inline-size: auto;
+
+                &:first-child {
+                    border-start-end-radius:   0;
+                    border-end-start-radius:   props.get(vars.$rounding);
+                }
+    
+                &:last-child {
+                    border-start-end-radius: props.get(vars.$rounding);
+                    border-end-start-radius: 0;
+                }
+            }
+
             @include bem.elem('body') {
                 flex: 0 0 auto;