diff --git a/src/components/ScenicHeroJourney.module.css b/src/components/ScenicHeroJourney.module.css index 3e211d9..c6a4b3a 100644 --- a/src/components/ScenicHeroJourney.module.css +++ b/src/components/ScenicHeroJourney.module.css @@ -21,7 +21,7 @@ position: relative; width: 100%; height: auto; - min-height: clamp(36.25rem, 48vw, 43.75rem); + min-height: clamp(41.25rem, 52vw, 47.5rem); overflow: hidden; background: var(--bg-page); } @@ -138,7 +138,7 @@ @media (max-width: 1100px) and (min-width: 651px) { .heroStage { height: auto; - min-height: clamp(33.75rem, 64vw, 40rem); + min-height: clamp(38rem, 66vw, 43rem); } /* Left — visible slice ≈ width - 150px, always < content padding */ @@ -202,14 +202,13 @@ /* ================================================================ ULTRA-WIDE > 1440px Canvas capped at 1440px but vw keeps growing → bleed explodes. - Freeze at the values the clamp() formulas resolve to @ 1440px. - heroStage overflow:visible lets illustrations escape into the - extra viewport space (body overflow-x:hidden prevents scrollbar). + Freeze at the values the clamp() formulas resolve to @ 1440px and + keep enough stage height to contain the full illustration. ================================================================ */ @media (min-width: 1441px) { .heroStage { height: auto; - min-height: 42.5rem; + min-height: 47.5rem; overflow: visible; }