Continue Header, Footer, add SkipNavLink

src/components/landing/ServicesCard.astro

@@ -16,7 +16,7 @@ const { title, image, items } = Astro.props;
 <div class="card">
     <Picture class="image" src={image.src} alt={image.alt} />
 
-    <h3>{title}</h3>
+    <h3 class="heading-gradient">{title}</h3>
 
     {
         !!items.length ? (
@@ -41,6 +41,14 @@ const { title, image, items } = Astro.props;
         }
     }
 
+    @media (prefers-reduced-motion: no-preference) and (hover: hover) {
+        .card:hover {
+            & picture:after {
+                backdrop-filter: blur(12px);
+            }
+        }
+    }
+
     picture {
         display: block;
         grid-row: 1 / -1;
@@ -58,6 +66,9 @@ const { title, image, items } = Astro.props;
         top: 0;
         left: 0;
         z-index: 1;
+        transition: all;
+        transition-duration: 300ms;
+        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     }
 
     .image {
@@ -72,7 +83,8 @@ const { title, image, items } = Astro.props;
         grid-row: 1;
         font-size: 2.25rem;
         line-height: var(--leading-title);
-        padding: 2.5rem;
+        padding-block: 2.5rem 1rem;
+        padding-inline: 2.5rem;
         max-width: 10ch;
     }