Responsive fixes

src/components/Product/index.js

@@ -2,7 +2,7 @@ import React from 'react'
 import './styles.css'
 
 const Product = ({product, compare}) =>
-    <div key={product.id} className="col-3">
+    <div key={product.id} className="col-sm-6 col-md-3">
         <div className={"product " + (product.compare ? "compare" : "")} >
             <img src={product.image} alt={product.name} />
             <div className="image_overlay"></div>
@@ -13,7 +13,7 @@ const Product = ({product, compare}) =>
                 <div className="stats-container">
                     <span className="product_price">{product.price}</span>
                     <span className="product_name">{product.name}</span>
-                    <p>Men's running shirt</p>
+                    <p>{product.description}</p>
                 </div>
             </div>
         </div>

src/components/Product/styles.scss

@@ -9,7 +9,7 @@ $product-main-color: $green;
   border-radius: 5px;
   overflow: hidden;
   transition: all 500ms ease-out;
-
+  margin-bottom: 30px;
   &:hover {
     box-shadow: 0px 13px 21px -5px rgba(0, 0, 0, 0.2);
     .image_overlay {
@@ -21,7 +21,7 @@ $product-main-color: $green;
       width: 152px;
       font-size: 15px;
       margin-left: -75px;
-      top: 150px;
+      top: 35%;
       transition: all 200ms ease-out;
     }
   }