From bf48a1561cad75fc02f5cd48e377da4fdddf053a Mon Sep 17 00:00:00 2001
From: Marco <marco.kunitz@googlemail.com>
Date: Tue, 25 Aug 2026 20:35:53 +0000
Subject: [PATCH] Home Blog featured post: stack image-then-text through
 1024px, not 640px

Side-by-side kicked in at sm (640px), squeezing the text column hard on
tablet widths. Moved the breakpoint to lg (1024px), matching the
secondary posts' grid below, which already used lg for the same reason.
---
 app/components/Blog.tsx | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

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>