diff --git a/app/components/Blog.tsx b/app/components/Blog.tsx
index 242246a..b0e313d 100644
--- a/app/components/Blog.tsx
+++ b/app/components/Blog.tsx
@@ -32,25 +32,28 @@ export async function Blog() {
       {/* Posts grid */}
       <RevealGroup className="flex flex-col gap-10 items-start px-[var(--layout-padding-x)] w-full">
 
-        {/* Featured post — image on top on Mobile, side-by-side from sm+.
+        {/* Featured post — image on top through lg (1024px), side-by-side
+            only from lg+ (was sm+, but that squeezed the text column too
+            hard on tablet widths — same reasoning as the secondary posts'
+            grid below, which already used this lg breakpoint).
             lg:min-h stretches the row taller on large screens (the image's
-            sm:h-full and the text column's justify-between both follow) —
+            lg:h-full and the text column's justify-between both follow) —
             without it the card's height was purely driven by the text
             column's content, which stays short regardless of viewport
             width. */}
-        <RevealItem className="w-full border border-border rounded-xl overflow-hidden grid grid-cols-1 sm:grid-cols-12 lg:min-h-[26rem] transition-transform duration-300 hover:-translate-y-1">
-          <div className="relative w-full aspect-video sm:aspect-auto sm:col-span-7 sm:h-full bg-bg-muted">
+        <RevealItem className="w-full border border-border rounded-xl overflow-hidden grid grid-cols-1 lg:grid-cols-12 lg:min-h-[26rem] transition-transform duration-300 hover:-translate-y-1">
+          <div className="relative w-full aspect-video lg:aspect-auto lg:col-span-7 lg:h-full bg-bg-muted">
             {featured.thumbnail && (
               <Image
                 alt=""
                 src={featured.thumbnail}
                 fill
-                sizes="(min-width: 640px) 58vw, 100vw"
+                sizes="(min-width: 1024px) 58vw, 100vw"
                 className="object-cover pointer-events-none"
               />
             )}
           </div>
-          <div className="flex flex-col justify-between gap-4 py-4 px-4 sm:pr-4 sm:pl-4 sm:col-span-5 min-w-0">
+          <div className="flex flex-col justify-between gap-4 py-4 px-4 lg:pr-4 lg:pl-4 lg:col-span-5 min-w-0">
             <div className="flex flex-col gap-3">
               <div className="flex gap-2 items-center font-semibold text-text-muted text-body uppercase whitespace-nowrap">
                 <span>{featured.categories.join(", ")}</span>
@@ -64,7 +67,7 @@ export async function Blog() {
                 >
                   {featured.title}
                 </p>
-                <p className="font-normal text-body leading-6 line-clamp-2 sm:line-clamp-none">
+                <p className="font-normal text-body leading-6 line-clamp-2 lg:line-clamp-none">
                   {featured.excerpt}
                 </p>
               </div>