From 637e90d7a5f2b1f5e352cc649059dbf5ca3d084e Mon Sep 17 00:00:00 2001
From: Dan Head <me@danielhead.com>
Date: Wed, 27 Jan 2021 00:08:33 +0000
Subject: [PATCH] fix(card): hover effect on non-touch only

---
 src/components/card.js | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/components/card.js b/src/components/card.js
index b0ea27b..5308cdc 100644
--- a/src/components/card.js
+++ b/src/components/card.js
@@ -29,12 +29,15 @@ const Content = styled.div`
 const Container = styled.div`
   position: relative;
   overflow: hidden;
-  &:hover ${Content} {
-    background-color: rgba(0, 0, 0, 0.65);
-    transform: translate3d(0, 0, 0);
-  }
-  &:hover ${Media} {
-    transform: scale(1.05);
+
+  @media (hover: hover) and (pointer: fine) {
+    &:hover ${Content} {
+      background-color: rgba(0, 0, 0, 0.65);
+      transform: translate3d(0, 0, 0);
+    }
+    &:hover ${Media} {
+      transform: scale(1.05);
+    }
   }
 `;