fix(blog): use object-cover so card and detail covers fill the frame (#558)

The earlier switch to object-contain was meant to preserve the full image, but it left dark letterbox bands around banners on both the BlogCard grid and the post-details hero. With properly-sized cover banners, object-cover fills the frame without visible cropping. Authors should size cover images for a 2:1 ratio on the card and the responsive heights on the details page.

Author: Benjtalkshow

components/landing-page/blog/BlogCard.tsx

@@ -24,7 +24,7 @@ const BlogCard = ({ post, onCardClick }: BlogCardProps) => {
             src={post.coverImage}
             alt={post.title}
             fill
-            className='object-contain transition-transform duration-500 group-hover:scale-105'
+            className='object-cover transition-transform duration-500 group-hover:scale-105'
             sizes='(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw'
           />
           {/* Gradient Overlay */}

components/landing-page/blog/BlogPostDetails.tsx

@@ -140,7 +140,7 @@ const BlogPostDetails: React.FC<BlogPostDetailsProps> = ({
                   src={post.coverImage}
                   alt={post.title}
                   fill
-                  className='rounded-lg object-contain'
+                  className='rounded-lg object-cover'
                   priority
                   sizes='(max-width: 768px) 100vw, (max-width: 1200px) 80vw, 70vw'
                 />