From 9b08379d501980e190e29053aab584d55f5a988b Mon Sep 17 00:00:00 2001
From: TerryM <chiachintat10@gmail.com>
Date: Sun, 31 May 2026 19:24:18 +0800
Subject: [PATCH] fix: 2-column masonry at md with side padding, 3 at lg

- md (768-1023px): 2 columns with px-4 so cards don't kiss the screen edge.
- lg+ (>=1024px): 3 columns, parent wrapper provides spacing.
- <768px stays on the original single-column mobile branch.
---
 src/pages/Home/index.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx
index 31aa5e9..c8a20a8 100644
--- a/src/pages/Home/index.tsx
+++ b/src/pages/Home/index.tsx
@@ -471,8 +471,10 @@ export function Home() {
                 </Reveal>
               ))}
             </div>
-            {/* Desktop: 3-column masonry that matches the Figma layout. */}
-            <div className="mt-7 hidden gap-4 md:block md:columns-3">
+            {/* Desktop: masonry that matches the Figma layout. 2 columns at
+                md (with horizontal padding so cards don't kiss the screen
+                edge), 3 columns at lg+. */}
+            <div className="mt-7 hidden gap-4 px-4 md:block md:columns-2 lg:columns-3 lg:px-0">
               {latestPosts.map((post, index) => (
                 <Reveal
                   key={post.id}