From ea7f4a4b3ba7d9549f160721508ccccd81f2cb55 Mon Sep 17 00:00:00 2001
From: Marco <marco.kunitz@googlemail.com>
Date: Thu, 30 Jul 2026 21:32:54 +0000
Subject: [PATCH] Blog secondary post cards: image above text through tablet
 width
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Was sm:grid-cols-5 — with the 2-up sm:grid-cols-2 outer grid, each
card's own width through 640-1023px was too narrow for image+text
side by side. Now stacks through lg (1024px), row layout only once
each card has real width. Featured post untouched (already fine).

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 app/components/Blog.tsx | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/app/components/Blog.tsx b/app/components/Blog.tsx
index 81e41c2..7aed233 100644
--- a/app/components/Blog.tsx
+++ b/app/components/Blog.tsx
@@ -75,25 +75,29 @@ export async function Blog() {
           </div>
         </RevealItem>
 
-        {/* Secondary posts — image on top on Mobile, side-by-side from sm+ */}
+        {/* Secondary posts — image on top through lg (1024px), side-by-side
+            only from lg+. These sit 2-up (sm:grid-cols-2 below) well
+            before lg, so each card's own available width through the
+            640-1023px tablet range is too narrow for image+text side by
+            side — was sm:grid-cols-5, squeezing the text column. */}
         <div className="grid grid-cols-1 sm:grid-cols-2 gap-6 w-full">
           {secondary.map((post) => (
             <RevealItem
               key={post.id}
-              className="border border-border rounded-xl overflow-hidden grid grid-cols-1 sm:grid-cols-5 transition-transform duration-300 hover:-translate-y-1"
+              className="border border-border rounded-xl overflow-hidden grid grid-cols-1 lg:grid-cols-5 transition-transform duration-300 hover:-translate-y-1"
             >
-              <div className="relative w-full aspect-video sm:aspect-auto sm:col-span-2 sm:h-[230px] bg-bg-muted">
+              <div className="relative w-full aspect-video lg:aspect-auto lg:col-span-2 lg:h-[230px] bg-bg-muted">
                 {post.thumbnail && (
                   <Image
                     alt=""
                     src={post.thumbnail}
                     fill
-                    sizes="(min-width: 640px) 29vw, 100vw"
+                    sizes="(min-width: 1024px) 29vw, 100vw"
                     className="object-cover pointer-events-none"
                   />
                 )}
               </div>
-              <div className="flex flex-col justify-between gap-4 py-3 px-4 sm:col-span-3 min-w-0 text-text-primary">
+              <div className="flex flex-col justify-between gap-4 py-3 px-4 lg:col-span-3 min-w-0 text-text-primary">
                 <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>{post.categories.join(", ")}</span>
@@ -107,7 +111,7 @@ export async function Blog() {
                     >
                       {post.title}
                     </p>
-                    <p className="font-normal text-body leading-6 line-clamp-1 sm:line-clamp-none">
+                    <p className="font-normal text-body leading-6 line-clamp-1 lg:line-clamp-none">
                       {post.excerpt}
                     </p>
                   </div>