I built the wedding invitation site with a mobile‑first target because nearly every guest opens this on a phone, so the phone layout is the one the spacing and ordering are tuned for; wider screens are a widening of the same thing.
I render each section with a single responsive component so that the desktop view is just a widened version of the phone view and there is no duplicated desktop code.
I removed hero parallax because it was taken out on request so the screen matches the reference exactly.
Prop sets swap at the xl breakpoint while backdrop props swap at md, avoiding overlapping props on tablets and small laptops.
Wide‑screen props use hard‑coded pixel offsets left-[460px], right-[470px] and a 540 px vase, which begin to overlap around ~1280 px.
The envelope seal hit‑area is an invisible round button sized to 31 % of the image width and centred, giving a large tappable target without covering the artwork.
The envelope wrapper is locked to a 536:940 aspect ratio so the centre aligns with the envelope centre rather than the viewport.
The wedding‑song audio file is 3.3 MB and is preloaded with preload="auto" while the guest looks at the envelope.
I also made the countdown component lazy‑render after the first client tick to avoid flashing zeros, and the scratch‑card a focusable button that respects prefers‑reduced‑motion.