diff --git a/client/src/pages/home.tsx b/client/src/pages/home.tsx
index 40f7a18..36b4a4b 100644
--- a/client/src/pages/home.tsx
+++ b/client/src/pages/home.tsx
@@ -523,7 +523,7 @@ function FeaturedHeroCard({ article, focalPoints }: { article: Article; focalPoi
   return (
     <Link href={`/article/${article.slug}`}>
       <div className="relative group cursor-pointer rounded-lg overflow-hidden bg-card border border-card-border h-full flex flex-col" data-testid={`card-featured-hero-${article.id}`}>
-        <div className="relative flex-1 min-h-[300px]">
+        <div className="relative flex-none aspect-[16/10] min-h-[300px]">
           <img src={article.coverImage || ""} alt={article.title} className="w-full h-full object-cover absolute inset-0 transition-transform duration-700 group-hover:scale-105" style={{ objectPosition: objPos }} loading="lazy" />
           {isVideo && (
             <div className="absolute inset-0 flex items-center justify-center z-10">
@@ -533,7 +533,7 @@ function FeaturedHeroCard({ article, focalPoints }: { article: Article; focalPoi
             </div>
           )}
         </div>
-        <div className="p-4 flex-shrink-0">
+        <div className="p-4 flex-1">
           <div className="flex items-center gap-2 mb-1.5">
             <span className="text-xs font-medium text-primary">{article.category}</span>
             <span className="text-muted-foreground text-xs">{timeAgo(new Date(article.publishedAt))}</span>