Update

1 files changed, 16 insertions, 8 deletions

diff --git a/src/objects/_card.scss b/src/objects/_card.scss
index b7829ff..1d2817d 100644
--- a/src/objects/_card.scss
+++ b/src/objects/_card.scss
@@ -19,7 +19,6 @@
         ),
         --colors: (
             --bg:       fn.global-color(--bg-l2),
-            --image-bg: fn.global-color(--border-mute),
             --border:   fn.global-color(--border-mute),
             --divider:  fn.global-color(--border-mute),
 
@@ -32,6 +31,14 @@
                 --border:  fn.global-color(--focus --border),
                 --outline: fn.global-color(--focus --outline),
             ),
+
+            --quiet: (
+                --image: fn.global-color(--bg-base),
+
+                --hover: (
+                    --image: fn.global-color(--border),
+                ),
+            )
         ),
     ));
 
@@ -64,7 +71,6 @@
             display:          block;
             inline-size:      100%;
             object-fit:       cover;
-            background-color: fn.color(--image-bg);
 
             &:first-child {
                 border-start-start-radius: calc(fn.dim(--rounding) - fn.dim(--border));
@@ -120,7 +126,8 @@
                 &:focus-visible,
                 &:active {
                     @include iro.bem-elem('image') {
-                        opacity: 0.75;
+                        opacity:          .75;
+                        background-color: fn.color(--quiet --hover --image);
                     }
                 }
 
@@ -136,11 +143,12 @@
             }
 
             @include iro.bem-elem('image') {
-                position:        relative;
-                margin:          calc(-1 * fn.dim(--key-focus --border));
-                border:          fn.dim(--key-focus --border-offset) solid transparent;
-                border-radius:   calc(fn.dim(--rounding) + fn.dim(--key-focus --border-offset));
-                background-clip: padding-box;
+                position:         relative;
+                margin:           calc(-1 * fn.dim(--key-focus --border));
+                border:           fn.dim(--key-focus --border-offset) solid transparent;
+                border-radius:    calc(fn.dim(--rounding) + fn.dim(--key-focus --border-offset));
+                background-color: fn.color(--quiet --image);
+                background-clip:  padding-box;
             }
 
             @include iro.bem-elem('body') {