diff --git a/client/src/pages/home.tsx b/client/src/pages/home.tsx
index b9887d1..70ad69a 100644
--- a/client/src/pages/home.tsx
+++ b/client/src/pages/home.tsx
@@ -186,11 +186,9 @@ function WideCard({ article, focalPoints }: { article: Article; focalPoints?: Re
   const objPos = getObjectPosition(article.coverImage, focalPoints);
   return (
     <Link href={`/article/${article.slug}`}>
-      <div className="relative group cursor-pointer rounded-lg overflow-hidden bg-card border border-card-border flex flex-col sm:flex-row h-full" data-testid={`card-wide-${article.id}`}>
-        <div className="relative flex-shrink-0 sm:w-1/2">
-          <div className="overflow-hidden h-full">
-            <img src={thumbUrl(article.coverImage)} alt={article.title} className="w-full h-full aspect-video sm:aspect-auto object-cover transition-transform duration-500 group-hover:scale-105" style={{ objectPosition: objPos, minHeight: "100%" }} loading="lazy" />
-          </div>
+      <div className="relative group cursor-pointer rounded-lg overflow-hidden bg-card border border-card-border h-full" data-testid={`card-wide-${article.id}`}>
+        <div className="relative aspect-[4/3] overflow-hidden">
+          <img src={thumbUrl(article.coverImage)} alt={article.title} className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105" style={{ objectPosition: objPos }} loading="lazy" />
           {isVideo && (
             <div className="absolute inset-0 flex items-center justify-center">
               <div className="w-12 h-12 rounded-full bg-primary/90 flex items-center justify-center group-hover:bg-primary transition-colors">
@@ -198,17 +196,17 @@ function WideCard({ article, focalPoints }: { article: Article; focalPoints?: Re
               </div>
             </div>
           )}
-        </div>
-        <div className="p-4 sm:p-5 flex flex-col flex-1 justify-center">
-          <div className="flex items-center gap-2 mb-2">
-            <span className="text-xs font-medium text-primary">{article.author}</span>
-            <span className="text-muted-foreground text-xs">{timeAgo(new Date(article.publishedAt))}</span>
-          </div>
-          <h3 className="font-bold text-card-foreground text-lg leading-snug line-clamp-2 group-hover:text-primary transition-colors">{article.title}</h3>
-          <p className="text-sm text-muted-foreground mt-2 leading-relaxed line-clamp-4 flex-1">{article.excerpt}</p>
-          <div className="flex items-center gap-2 mt-3 text-muted-foreground text-[10px]">
-            <Eye className="w-3 h-3" />
-            {article.views.toLocaleString()}
+          <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent" />
+          <div className="absolute bottom-0 left-0 right-0 p-4">
+            <div className="flex items-center gap-2 mb-1.5">
+              <span className="text-xs font-medium text-primary">{article.author}</span>
+              <span className="text-white/60 text-xs">{timeAgo(new Date(article.publishedAt))}</span>
+            </div>
+            <h3 className="font-bold text-white text-base leading-snug line-clamp-2 group-hover:text-primary transition-colors">{article.title}</h3>
+            <div className="flex items-center gap-2 mt-2 text-white/50 text-[10px]">
+              <Eye className="w-3 h-3" />
+              {article.views.toLocaleString()}
+            </div>
           </div>
         </div>
       </div>