Restructuring of cards and styling blog

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
-            key={node.id}
-            url={`blog/${node.slug}`}
-            title={node.title}
-            date={node.date}
-            excerpt={node.excerpt}
-            image={
-              node.featured_media
-                ? node.featured_media.localFile.childImageSharp.resolutions
-                : undefined
-            }
-          />
+          <div className="md:w-1/2 p-2">
+            <Card
+              key={node.id}
+              url={`blog/${node.slug}`}
+              title={node.title}
+              date={node.date}
+              excerpt={node.excerpt}
+              image={
+                node.featured_media
+                  ? node.featured_media.localFile.childImageSharp.resolutions
+                  : undefined
+              }
+            />
+          </div>
         ))}
       </div>
     )