Use Fraunces for blog headings

sites/poetry/src/components/sections/blog-post.tsx

@@ -19,7 +19,7 @@ const BlogPost = ({
       <section className="pb-8 pt-4">
         <div className="container max-w-4xl">
           <div className="space-y-2 text-center">
-            <h1 className="text-2xl font-bold tracking-tight md:text-4xl lg:text-5xl">
+            <h1 className="blog-post-title">
               {title}
             </h1>
             <p className="text-muted-foreground mx-auto max-w-2xl text-lg">

sites/poetry/src/components/sections/blog-posts.tsx

@@ -20,7 +20,7 @@ const BlogPosts = ({
     collection ? `/${collection}/${post.id}/` : `/${post.id}/`;
 
   return (
-    <div className="relative py-16 md:py-28 lg:py-32">
+    <div className="relative py-10 md:py-16 lg:py-20">
       <div className="absolute -inset-40 z-[-1] [mask-image:radial-gradient(circle_at_center,black_0%,black_20%,transparent_75%)]">
         <PlusSigns className="text-foreground/[0.05] h-full w-full" />
       </div>
@@ -46,7 +46,7 @@ const BlogPosts = ({
                 <Badge variant="outline" className="mb-3 w-fit">
                   Featured Post
                 </Badge>
-                <h2 className="mb-3 text-2xl font-bold group-hover:underline md:text-3xl">
+                <h2 className="blog-card-title-featured mb-3 group-hover:underline">
                   {featuredPost.data.title}
                 </h2>
                 <p className="text-muted-foreground mb-4 line-clamp-3 text-base">