diff --git a/frontend/src/routes/home3/+page.svelte b/frontend/src/routes/home3/+page.svelte index 6d10ece..60eb50c 100644 --- a/frontend/src/routes/home3/+page.svelte +++ b/frontend/src/routes/home3/+page.svelte @@ -186,11 +186,11 @@ max-width: 1180px; width: 100%; margin: 0 auto; box-sizing: border-box; padding: 0 clamp(18px, 5vw, 44px) 16px; display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(0, 1.82fr); gap: 18px; - align-items: center; /* right column floats CENTERED in the space (FIX1) — never stretch */ } - /* right column is independent of the (taller) News card, so Art/Play/Moment keep their - natural size and sit centered against News instead of stretching to match it */ - .rightcol { display: flex; flex-direction: column; gap: 18px; } + /* right column matches the News height; Art stays pinned to the TOP and the Play/Moment + pair to the BOTTOM, with the extra space distributed BETWEEN them (FIX1). The cards + themselves keep their natural size and never stretch. */ + .rightcol { display: flex; flex-direction: column; justify-content: space-between; gap: 18px; } .card { border-radius: 18px; overflow: hidden; text-decoration: none; color: inherit; transition: transform 0.18s ease, box-shadow 0.18s ease;