Minor fixes and improvements to FeatureLinks

.vuepress/scss/components/_feature-links.scss

@@ -12,16 +12,33 @@
   display: inline-block;
   margin-bottom: 1rem;
   position: relative;
+  transition: box-shadow 0.2s;
   vertical-align: top;
 
   > div:first-of-type {
     top: 85px; left: 5%;
 
     position: relative;
+    text-align: center;
     width: 90%;
     z-index: 1;
   }
 
+  &:not(:hover) {
+    .feature-link__background {
+      // filter: grayscale(50%);
+      filter: brightness(0.5);
+    }
+  }
+
+  &:hover {
+    box-shadow: 0 0 15px rgba($black, 0.15);
+
+    .feature-link__title {
+      color: $teal;
+    }
+  }
+
   &:not(:last-of-type) {
     margin-right: 1rem;
   }
@@ -29,12 +46,15 @@
 
 .feature-link__title {
   background-color: $white;
-  border: 1px solid rgba($black, 0.1);
+  border: 1px solid rgba(gray, 0.1);
+  box-shadow: 0 2px 5px rgba($black, 0.025);
+  border-radius: 3px;
   box-decoration-break: clone;
   display: inline;
-  font-size: 1.15rem;
+  font-size: 1rem;
   line-height: 1.7;
   padding: 0.25rem 0.5rem;
+  transition: color 0.2s;
   position: relative;
 }
 
@@ -45,6 +65,8 @@
   background-color: $teal;
   border-top-right-radius: 3px;
   border-top-left-radius: 3px;
+  transition: filter 0.2s;
+  overflow: hidden;
   position: absolute;
   z-index: 0;
 

.vuepress/scss/pages/_page.scss

@@ -179,7 +179,7 @@
     }
   }
 
-  a:not(.button) {
+  a:not(.button):not(.feature-link__title) {
     color: $teal;
     position: relative;