Use flex for card

1 files changed, 9 insertions, 5 deletions

diff --git a/src/objects/_card.scss b/src/objects/_card.scss
index abc691b..2eb16bc 100644
--- a/src/objects/_card.scss
+++ b/src/objects/_card.scss
@@ -11,7 +11,8 @@
     @include materialize-at-root(meta.module-variables('vars'));
 
     @include iro.bem-object('card') {
-        display:          block;
+        display:          flex;
+        flex-direction:   column;
         margin:           calc(-1 * props.get(vars.$key-focus--border-width));
         background-color: props.get(vars.$bg-color);
         background-clip:  content-box;
@@ -43,10 +44,11 @@
         }
 
         @include iro.bem-elem('image') {
-            display:          block;
-            inline-size:      100%;
-            object-fit:       cover;
-            transition:       transform .2s, opacity .2s;
+            display:     block;
+            flex:        0 0 auto;
+            inline-size: 100%;
+            object-fit:  cover;
+            transition:  transform .2s, opacity .2s;
 
             &:first-child {
                 border-start-start-radius: props.get(vars.$rounding);
@@ -64,6 +66,7 @@
         }
 
         @include iro.bem-elem('body') {
+            flex:           1 0 auto;
             padding-block:  props.get(vars.$pad-b);
             padding-inline: props.get(vars.$pad-i);
 
@@ -79,6 +82,7 @@
         }
 
         @include iro.bem-elem('footer') {
+            flex:               0 0 auto;
             padding-block:      0 props.get(vars.$pad-b);
             padding-inline:     props.get(vars.$pad-i);
             margin-block-start: calc(-1 * props.get(vars.$pad-b));