1 files changed, 19 insertions, 12 deletions

diff --git a/src/objects/_card.scss b/src/objects/_card.scss
index 6b80e2f..966bcd0 100644
--- a/src/objects/_card.scss
+++ b/src/objects/_card.scss
@@ -14,7 +14,6 @@
         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);
@@ -42,19 +41,31 @@
             }
         }
 
+        @include bem.modifier('borderless') {
+            border-color: props.get(vars.$bg-color);
+
+            @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') {
+                &:hover,
+                &:active {
+                    border-color: props.get(vars.$hover--bg-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));
@@ -121,7 +132,6 @@
             margin-inline:    0;
             background-color: transparent;
             border:           0;
-            box-shadow:       none;
 
             @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') {
                 &:hover,
@@ -141,7 +151,6 @@
                     margin:     0;
                     outline:    none;
                     border:     0;
-                    box-shadow: none;
 
                     @include bem.elem('image') {
                         margin:           calc(-1 * props.get(vars.$key-focus--border-width));
@@ -179,8 +188,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);
             }