Restructuring of cards and styling blog

src/components/Card.js

@@ -1,32 +1,26 @@
 import React from 'react'
 import Link from 'gatsby-link'
-import Img from 'gatsby-image'
 
 import ImgSprint from '../images/wow-we-did-design-sprint-remotely.png'
 
 const Card = ({ ...props }) => (
-  <article className="my-4 lg:my-2 lg:mx-2 w-full rounded overflow-hidden shadow-md hover:shadow-lg">
+  <article className="h-full w-full rounded overflow-hidden shadow-md hover:shadow-lg">
     <Link to={props.url}>
       {props.image ? (
-        <Img resolutions={props.image} />
+        <img className="w-full" src={props.image.src} />
       ) : (
         <img className="w-full" src={ImgSprint} alt="Sprint Work" />
       )}
     </Link>
     <div className="px-6 py-4">
-      <div className="font-bold text-xl mb-2">
-        {props.title} - {props.date}
-      </div>
+      <Link className="no-underline" to={props.url}>
+        <h3 className="text-black font-bold text-xl mb-2">{props.title}</h3>
+      </Link>
       <p
         className="text-grey-darker text-base"
         dangerouslySetInnerHTML={{ __html: props.excerpt }}
       />
     </div>
-    <div className="px-6 py-4">
-      <span className="inline-block bg-grey-lighter rounded-full px-3 py-1 text-sm font-semibold text-grey-darker">
-        #workstyle
-      </span>
-    </div>
   </article>
 )