1 files changed, 67 insertions, 5 deletions

diff --git a/src/objects/_card.scss b/src/objects/_card.scss
index 5783ac1..9f84d7a 100644
--- a/src/objects/_card.scss
+++ b/src/objects/_card.scss
@@ -18,18 +18,26 @@
             ),
         ),
         --colors: (
-            --bg:      fn.global-color(--bg-l2),
-            --border:  fn.global-color(--border-mute),
-            --divider: fn.global-color(--border-mute),
+            --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),
 
             --hover: (
                 --border: fn.global-color(--border),
             ),
+
             --key-focus: (
                 --label:   fn.global-color(--focus --text),
                 --border:  fn.global-color(--focus --border),
                 --outline: fn.global-color(--focus --outline),
             ),
+
+            --quiet: (
+                --hover: (
+                    --border: fn.global-color(--text-disabled),
+                ),
+            ),
         ),
     ));
 
@@ -59,8 +67,20 @@
         }
 
         @include iro.bem-elem('image') {
-            position: relative;
-            width:    100%;
+            position:         relative;
+            width:            100%;
+            overflow:         hidden;
+            background-color: fn.color(--image-bg);
+
+            &:first-child {
+                border-start-start-radius: calc(fn.dim(--rounding) - fn.dim(--border));
+                border-start-end-radius:   calc(fn.dim(--rounding) - fn.dim(--border));
+            }
+
+            &:last-child {
+                border-end-start-radius: calc(fn.dim(--rounding) - fn.dim(--border));
+                border-end-end-radius:   calc(fn.dim(--rounding) - fn.dim(--border));
+            }
 
             @include iro.bem-next-elem('avatar') {
                 margin-block-start: calc(-.7 * fn.foreign-dim(--avatar, --xl --size));
@@ -102,5 +122,47 @@
                 background-color: fn.color(--divider);
             }
         }
+
+        @include iro.bem-modifier('quiet') {
+            position:         relative;
+            border:           0;
+            background-color: transparent;
+
+            @include iro.bem-multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') {
+                &:hover,
+                &:active {
+                    @include iro.bem-elem('image') {
+                        outline:        fn.dim(--border) solid fn.color(--quiet --hover --border);
+                        outline-offset: calc(-1 * fn.dim(--key-focus --border) - fn.dim(--border));
+                    }
+                }
+                
+                &:focus-visible {
+                    outline:    none;
+                    box-shadow: none;
+
+                    @include iro.bem-elem('image') {
+                        outline:    fn.color(--key-focus --border) solid fn.dim(--key-focus --border);
+                        box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline);
+                    }
+                }
+            }
+
+            @include iro.bem-elem('image') {
+                margin:          calc(-1 * fn.dim(--key-focus --border));
+                border:          fn.dim(--key-focus --border) solid transparent;
+                border-radius:   calc(fn.dim(--rounding) + fn.dim(--key-focus --border));
+                background-clip: padding-box;
+            }
+
+            @include iro.bem-elem('body') {
+                padding:             0;
+                padding-block-start: fn.dim(--spacing);
+            }
+
+            @include iro.bem-elem('footer') {
+                padding-inline: 0;
+            }
+        }
     }
 }