From 168f17bcefcdb7b9a1c006bd4ef60997e65c46b4 Mon Sep 17 00:00:00 2001
From: Marco <marco.kunitz@googlemail.com>
Date: Tue, 25 Aug 2026 20:29:24 +0000
Subject: [PATCH] Home Blog featured post: taller card on lg+ via min-h, image
 follows

The card's height was purely driven by the (short, fixed) text column's
content regardless of viewport width. lg:min-h-[26rem] gives it real
height on large screens; the image's sm:h-full and the text column's
justify-between both stretch to match.
---
 app/components/Blog.tsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/app/components/Blog.tsx b/app/components/Blog.tsx
index 1499cbe..242246a 100644
--- a/app/components/Blog.tsx
+++ b/app/components/Blog.tsx
@@ -32,8 +32,13 @@ 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+ */}
-        <RevealItem className="w-full border border-border rounded-xl overflow-hidden grid grid-cols-1 sm:grid-cols-12 transition-transform duration-300 hover:-translate-y-1">
+        {/* Featured post — image on top on Mobile, side-by-side from sm+.
+            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) —
+            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">
             {featured.thumbnail && (
               <Image