Social media changes and styling

src/components/Card.js

@@ -4,7 +4,7 @@ import Link from 'gatsby-link'
 import ImgSprint from '../images/wow-we-did-design-sprint-remotely.png'
 
 const Card = ({ ...props }) => (
-  <div className="m-4 w-full rounded overflow-hidden shadow-md hover:shadow-lg">
+  <div className="my-4 lg:my-2 lg:mx-2 w-full rounded overflow-hidden shadow-md hover:shadow-lg">
     <img className="w-full" src={ImgSprint} alt="Sprint Work" />
     <div className="px-6 py-4">
       <div className="font-bold text-xl mb-2">

src/components/Footer.js

@@ -19,32 +19,40 @@ const Footer = () => (
         <img src={LogoSaburly} alt="Saburly Logo" className="w-full" />
         <div className="flex justify-between social-icons py-2">
           <div>
-            <img
+            <a href="https://facebook.com/saburly" target="_blank">
-              src={Facebook}
+              <img
-              alt="Facebook Social Media"
+                src={Facebook}
-              className="max-w-2.5 opacity-50 hover:opacity-100 w-full"
+                alt="Facebook Social Media"
-            />
+                className="max-w-2.5 opacity-50 hover:opacity-100 w-full"
+              />
+            </a>
           </div>
           <div>
-            <img
+            <a href="https://instagram.com/saburly" target="_blank">
-              src={Instagram}
+              <img
-              alt="Instagram Social Media"
+                src={Instagram}
-              className="max-w-2.5 opacity-50 hover:opacity-100 w-full"
+                alt="Instagram Social Media"
-            />
+                className="max-w-2.5 opacity-50 hover:opacity-100 w-full"
+              />
+            </a>
           </div>
           <div>
-            <img
+            <a href="https://twitter.com/saburly" target="_blank">
-              src={Twitter}
+              <img
-              alt="Twitter Social Media"
+                src={Twitter}
-              className="max-w-2.5 opacity-50 hover:opacity-100 w-full"
+                alt="Twitter Social Media"
-            />
+                className="max-w-2.5 opacity-50 hover:opacity-100 w-full"
+              />
+            </a>
           </div>
           <div>
-            <img
+            <a href="https://www.linkedin.com/company/saburly/" target="_blank">
-              src={LinkedIn}
+              <img
-              alt="LinkedIn Social Media"
+                src={LinkedIn}
-              className="max-w-2.5 opacity-50 hover:opacity-100 w-full"
+                alt="LinkedIn Social Media"
-            />
+                className="max-w-2.5 opacity-50 hover:opacity-100 w-full"
+              />
+            </a>
           </div>
         </div>
         <div>