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>
This commit is contained in:
Marco
2026-06-30 21:51:54 +00:00
parent 2ed1acf997
commit ed575d5aa0
+4 -4
View File
@@ -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>