Add hover highlighting for feature cards

Author: J12934

src/pages/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { graphql, withPrefix, Link } from 'gatsby';
+import { graphql, withPrefix } from 'gatsby';
 import Helmet from 'react-helmet';
 import SEO from '../components/SEO';
 import Layout from '../components/Layout';
@@ -39,7 +39,7 @@ const Home = props => {
           </div>
           {json.map(edge => (
             <div key={edge.node.id} className="col-12 col-md-3 col-lg-3 mb-2">
-              <div className="feature">
+              <div className="feature hoverable">
                 {edge.node.image && (
                   <div className="feature-image">
                     <img src={withPrefix(edge.node.image)} />
@@ -84,7 +84,7 @@ const Home = props => {
               </li>
               <li>
                 <img src={notApproved} alt="unchecked icon" />
-                Teams with separate dev, ops and security teams
+                Organizations with separate dev, ops and security teams
               </li>
             </ul>
           </div>

src/scss/components/_feature.scss

@@ -100,3 +100,12 @@
     }
   }
 }
+
+.feature.hoverable {
+  cursor: pointer;
+  &:hover {
+    margin-top: -1px;
+    margin-bottom: 1px;
+    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
+  }
+}