refactor(card): rework

src/components/card.js

@@ -3,59 +3,58 @@ import { Link as GatsbyLink } from "gatsby";
 import Img from "gatsby-image";
 import styled from "@emotion/styled";
 
-const Container = styled.div`
+const Media = styled.div`
+  transition: transform 0.15s ease-in;
+`;
+const Heading = styled.div``;
+const Body = styled.div``;
+
+const Content = styled.div`
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
   display: flex;
-  align-items: center;
-  margin: 0 calc(var(--spacing-x-xs) * -1) var(--spacing-y-sm);
+  flex-direction: column;
+  justify-content: space-between;
+  padding: var(--spacing-y-sm) var(--spacing-x-xs);
+  color: var(--color-white);
+  text-align: center;
+  background-color: rgba(0, 0, 0, 0.25);
+  transform: translate3d(0, calc(100% - 58px), 0);
+  transition: transform 0.15s ease-in, background-color 0.3s ease-in;
+`;
 
-  @media (max-width: 30em) {
-    &:nth-of-type(even) {
-      flex-direction: row-reverse;
-    }
+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);
   }
-`;
-
-const Media = styled.span`
-  padding: 0 var(--spacing-x-xs);
-  transition: transform 0.15s ease-in, filter 0.15s ease-in;
-`;
-
-const Content = styled.span`
-  padding: 0 var(--spacing-x-xs);
 `;
 
 const Link = styled(GatsbyLink)`
   outline: 0;
   text-decoration: none;
-  color: var(--color-black);
-
-  &:hover ${Media} {
-    transform: scale(1.1);
-    filter: brightness(110%) contrast(110%);
-  }
-
-  @media (max-width: 30em) {
-    &:nth-of-type(even) ${Container} {
-      flex-direction: row-reverse;
-    }
-  }
 `;
 
-export default function Card({ image, children, to }) {
+export default function Card({ image, heading, children, to }) {
   const render = () => (
     <Container>
       {image && (
         <Media>
-          <Img
-            style={{
-              display: "block",
-              borderRadius: "5px"
-            }}
-            fixed={image}
-          />
+          <Img fluid={image} />
         </Media>
       )}
-      <Content>{children}</Content>
+      <Content>
+        {heading && <Heading>{heading}</Heading>}
+        <Body>{children}</Body>
+      </Content>
     </Container>
   );
   return to ? <Link to={to}>{render()}</Link> : render();