fix directory header

Author: tyrelchambers

src/components/CCIP/Hero/Hero.css

@@ -5,6 +5,8 @@
 
 .ccip-hero__heading {
   color: var(--gray-900);
+  font-size: 2.5rem;
+  margin-bottom: var(--space-6x);
 }
 
 .ccip-hero__content {
@@ -15,3 +17,10 @@
   align-items: center;
   gap: var(--space-4x);
 }
+
+@media screen and (max-width: 768px) {
+  .ccip-hero__heading {
+    font-size: 2rem;
+    margin-bottom: var(--space-4x);
+  }
+}

src/components/CCIP/Hero/Hero.tsx

@@ -2,6 +2,7 @@ import { Environment, LaneConfig } from "~/config/data/ccip/index.ts"
 import Search from "../Search/Search.tsx"
 import "./Hero.css"
 import { ChainType, ExplorerInfo } from "~/config/types.ts"
+import { Typography } from "@chainlink/blocks"
 
 interface HeroProps {
   chains: {
@@ -39,7 +40,9 @@ function Hero({ chains, tokens, environment, lanes }: HeroProps) {
   return (
     <section className="ccip-hero">
       <div className="ccip-hero__content">
-        <h1 className="ccip-hero__heading">CCIP Directory</h1>
+        <Typography variant="h1" className="ccip-hero__heading">
+          CCIP Directory
+        </Typography>
         <Search chains={chains} tokens={tokens} environment={environment} lanes={lanes} />
       </div>
     </section>