1 files changed, 34 insertions, 11 deletions

diff --git a/src/objects/_card.scss b/src/objects/_card.scss
index 6b80e2f..e80df2c 100644
--- a/src/objects/_card.scss
+++ b/src/objects/_card.scss
@@ -14,12 +14,11 @@
         position:         relative;
         display:          flex;
         flex-direction:   column;
-        background-clip:  content-box;
         background-color: props.get(vars.$bg-color);
         border:           props.get(vars.$border-width) solid transparent;
         border-color:     props.get(vars.$border-color);
         border-radius:    props.get(vars.$rounding);
-        transition:       transform .2s, background-color .2s, border-color .2s;
+        transition:       transform .2s, background-color .2s, border-color .2s, box-shadow .2s;
 
         @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') {
             &:hover,
@@ -28,6 +27,7 @@
                 transform:        translateY(props.get(vars.$hover--offset-b));
                 background-color: props.get(vars.$hover--bg-color);
                 border-color:     props.get(vars.$hover--border-color);
+                box-shadow:       none;
             }
 
             &:focus-visible {
@@ -42,19 +42,44 @@
             }
         }
 
+        @include bem.modifier('borderless') {
+            border-color: props.get(vars.$bg-color);
+        }
+
+        @include bem.modifier('shadow') {
+            box-shadow:
+                props.get(vars.$shadow-x)
+                props.get(vars.$shadow-y)
+                props.get(vars.$shadow-blur)
+                props.get(vars.$shadow-grow)
+                props.get(vars.$shadow-color);
+
+            @include bem.modifier('quiet') {
+                @include bem.elem('image') {
+                    box-shadow:
+                        props.get(vars.$shadow-x)
+                        props.get(vars.$shadow-y)
+                        props.get(vars.$shadow-blur)
+                        props.get(vars.$shadow-grow)
+                        props.get(vars.$shadow-color);
+                }
+            }
+        }
+
         @include bem.elem('avatar') {
             margin-block-start:  props.get(vars.$pad-b);
             margin-inline-start: props.get(vars.$pad-i);
         }
 
         @include bem.elem('image') {
-            position:    relative;
-            display:     block;
-            flex:        0 0 auto;
-            inline-size: 100%;
-            overflow:    hidden;
-            object-fit:  cover;
-            transition:  background-color .2s, transform .2s, opacity .2s;
+            position:      relative;
+            display:       block;
+            flex:          0 0 auto;
+            inline-size:   calc(100% + 2 * props.get(vars.$border-width));
+            margin:        calc(-1 * props.get(vars.$border-width));
+            overflow:      hidden;
+            object-fit:    cover;
+            transition:    background-color .2s, transform .2s, opacity .2s;
 
             &:first-child {
                 border-start-start-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width));
@@ -179,8 +204,6 @@
 
         @include bem.modifier('thumbnail') {
             @include bem.elem('image') {
-                inline-size:   calc(100% + 2 * props.get(vars.$border-width));
-                margin:        calc(-1 * props.get(vars.$border-width));
                 border-radius: props.get(vars.$rounding);
             }