From ed575d5aa023f0490ce78ff951b8c3454b597aa5 Mon Sep 17 00:00:00 2001
From: Marco <marco.kunitz@googlemail.com>
Date: Tue, 30 Jun 2026 21:51:54 +0000
Subject: [PATCH] fix(Blog): normalize image-to-text gap to 12px across all
 cards

Featured had 8px (only content px-2, no card gap).
Secondary had 16px (gap-2 + content p-2 left).
Both now use gap-3 (12px) at card level with no left padding on content.

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

diff --git a/app/components/Blog.tsx b/app/components/Blog.tsx
index ad6ba39..cd1f9e3 100644
--- a/app/components/Blog.tsx
+++ b/app/components/Blog.tsx
@@ -52,7 +52,7 @@ export function Blog() {
       <div className="flex flex-col gap-[2.5rem] items-start px-[5rem] w-full">
 
         {/* Featured post — thumbnail flush left, card clips with overflow-hidden */}
-        <div className="w-full border border-[#d9d9d9] rounded-xl overflow-hidden flex">
+        <div className="w-full border border-[#d9d9d9] rounded-xl overflow-hidden flex gap-3">
           <div className="relative h-[220px] shrink-0 w-[60%]">
             <img
               alt=""
@@ -60,7 +60,7 @@ export function Blog() {
               className="absolute inset-0 w-full h-full object-cover pointer-events-none"
             />
           </div>
-          <div className="flex flex-1 flex-col justify-between px-2 py-4 min-w-0">
+          <div className="flex flex-1 flex-col justify-between py-4 pr-4 min-w-0">
             <div className="flex flex-col gap-3">
               <div className="flex gap-2 items-center font-semibold text-[#777] text-[1rem] uppercase whitespace-nowrap">
                 <span>{featured.category}</span>
@@ -93,7 +93,7 @@ export function Blog() {
           {secondary.map((post) => (
             <div
               key={post.title}
-              className="flex-1 border border-[#d9d9d9] rounded-xl flex gap-2 h-[230px] items-center py-2"
+              className="flex-1 border border-[#d9d9d9] rounded-xl flex gap-3 h-[230px] items-center py-2"
             >
               {/* Thumbnail: own border-radius so it sits neatly inside the padded card */}
               <div className="rounded-xl overflow-hidden shrink-0 h-full w-[14.7rem]">
@@ -103,7 +103,7 @@ export function Blog() {
                   className="w-full h-full object-cover pointer-events-none"
                 />
               </div>
-              <div className="flex flex-1 flex-col justify-between h-full min-w-0 p-2 text-[#222221]">
+              <div className="flex flex-1 flex-col justify-between h-full min-w-0 py-2 pr-2 text-[#222221]">
                 <div className="flex flex-col gap-3">
                   <div className="flex gap-2 items-center font-semibold text-[#777] text-[1rem] uppercase whitespace-nowrap">
                     <span>{post.category}</span>