From 233a41f7c981adcfdeafad001d8832be828d13b3 Mon Sep 17 00:00:00 2001
From: Marco <marco.kunitz@googlemail.com>
Date: Tue, 25 Aug 2026 20:20:18 +0000
Subject: [PATCH] Home Blog section: cap width at max-w-[75rem], same as the
 rest of the site
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Was full-bleed w-full with no cap, so on very wide screens the featured
card (and its now-h-full image column) kept stretching wider while the
image's height stayed pinned to the text column's content height —
increasingly squashed the wider the viewport got.
---
 app/components/Blog.tsx | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/app/components/Blog.tsx b/app/components/Blog.tsx
index 1499cbe..3183126 100644
--- a/app/components/Blog.tsx
+++ b/app/components/Blog.tsx
@@ -17,7 +17,7 @@ export async function Blog() {
     <div id="blog" className="flex flex-col gap-12 items-start pb-16 w-full bg-bg-base">
 
       {/* Section header */}
-      <Reveal className="flex flex-col gap-2 items-start px-[var(--layout-padding-x)] w-full">
+      <Reveal className="flex flex-col gap-2 items-start px-[var(--layout-padding-x)] w-full max-w-[75rem] mx-auto">
         <p className="font-bold text-brand text-h-small">
           Neue Impulse
         </p>
@@ -29,8 +29,14 @@ export async function Blog() {
         </p>
       </Reveal>
 
-      {/* Posts grid */}
-      <RevealGroup className="flex flex-col gap-10 items-start px-[var(--layout-padding-x)] w-full">
+      {/* Posts grid — capped at the same max-w-[75rem] the rest of the site
+          uses (e.g. ProductSpotlight.tsx), not full-bleed w-full. Without
+          it, the featured card's fixed-height-turned-h-full image column
+          kept stretching wider on very wide screens while its height
+          stayed pinned to the text column's content height, so the photo
+          got progressively more elongated/squashed the wider the
+          viewport — capping the card's own width caps that. */}
+      <RevealGroup className="flex flex-col gap-10 items-start px-[var(--layout-padding-x)] w-full max-w-[75rem] mx-auto">
 
         {/* 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">