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">
+      <Link className="no-underline" to={props.url}>
-        {props.title} - {props.date}
+        <h3 className="text-black font-bold text-xl mb-2">{props.title}</h3>
-      </div>
+      </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>
 )
 

src/templates/blog.js

@@ -7,20 +7,22 @@ class Blog extends Component {
   render() {
     const data = this.props.data
     return (
-      <div className="flex">
+      <div className="container mx-auto p-4 w-full md:flex md:flex-wrap items-stretch w-full">
         {data.allWordpressPost.edges.map(({ node }) => (
-          <Card
+          <div className="md:w-1/2 p-2">
-            key={node.id}
+            <Card
-            url={`blog/${node.slug}`}
+              key={node.id}
-            title={node.title}
+              url={`blog/${node.slug}`}
-            date={node.date}
+              title={node.title}
-            excerpt={node.excerpt}
+              date={node.date}
-            image={
+              excerpt={node.excerpt}
-              node.featured_media
+              image={
-                ? node.featured_media.localFile.childImageSharp.resolutions
+                node.featured_media
-                : undefined
+                  ? node.featured_media.localFile.childImageSharp.resolutions
-            }
+                  : undefined
-          />
+              }
+            />
+          </div>
         ))}
       </div>
     )