Fixed contrast issues

2 files changed, 7 insertions, 3 deletions

diff --git a/assets/css/_vars.scss b/assets/css/_vars.scss
index cf4af60..f6929a2 100644
--- a/assets/css/_vars.scss
+++ b/assets/css/_vars.scss
@@ -107,7 +107,7 @@ $content--width:  44rem;
     $gray2: hsl(220, 5%, 88%);
     $gray3: hsl(220, 5%, 83%);
     $gray4: hsl(220, 5%, 68%);
-    $gray5: hsl(220, 5%, 47%);
+    $gray5: hsl(220, 5%, 44%);
     $gray6: hsl(220, 5%, 16%);
     $gray7: hsl(220, 5%, 0%);
 
diff --git a/assets/css/components/_card.scss b/assets/css/components/_card.scss
index e1f92b0..2e32a48 100644
--- a/assets/css/components/_card.scss
+++ b/assets/css/components/_card.scss
@@ -75,7 +75,9 @@
 
                 @include element('row') {
                     @include modifier('hidden') {
-                        opacity: 1;
+                        visibility: visible;
+                        transition: opacity .2s;
+                        opacity:    1;
                     }
                 }
 
@@ -119,16 +121,18 @@
             }
 
             @include modifier('hidden') {
+                visibility:       hidden;
                 position:         absolute;
                 z-index:          10;
                 right:            0;
                 bottom:           0;
                 left:             0;
-                transition:       opacity .2s;
+                transition:       opacity .2s, visibility 0s .2s;
                 opacity:          0;
                 background-color: prop(--colors --hover --bg);
 
                 @media (hover: none) {
+                    visibility:       visible;
                     position:         static;
                     opacity:          1;
                     background-color: transparent;