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.
This commit is contained in:
TerryM
2026-05-31 19:24:18 +08:00
parent 186ba362f3
commit 9b08379d50

View File

@@ -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}