fix(skills): collapse bento spans at 2-col breakpoint, not 720px

Landscape phone (720-1000px band) put the parent grid at 2 columns while the
tile spans (hero span-2, full span-3) only reset at 720px. A span-3 tile in a
2-col grid forced a phantom 3rd column and collapsed the 1fr tracks to
58px 58px 760px, squishing the flagship card to ~132px off the visible area.
Move the span reset to the same 1000px breakpoint the grid drops to 2 columns:
now 446px 446px, hero full-width. Desktop 4-col + portrait 1-col unchanged.
This commit is contained in:
2026-07-03 23:56:07 +10:00
parent 0d05aae721
commit 908d311e5c
+5 -3
View File
@@ -141,9 +141,11 @@ const spanClass =
padding: 5px 10px;
}
/* bento collapses gracefully on narrow screens (grid goes 2-col then 1-col
in the parent; spans clamp automatically via grid auto-placement) */
@media (max-width: 720px) {
/* Below 1000px the parent grid is only 2 columns — so the multi-column spans
must collapse to full-width HERE, not at 720px. A `span 3` tile left active
in a 2-col grid forces a phantom 3rd column and collapses the 1fr tracks
(58px 58px 760px), squishing the first tile to ~130px in landscape phone. */
@media (max-width: 1000px) {
.tile--hero,
.tile--wide,
.tile--full {