Scale-to-fit product shot.
A product screenshot rebuilt as real DOM at a fixed 1180px natural width, then scaled to its container via `transform: scale()` recomputed on a window `resize` listener. Stays crisp at any size and recolours to the marketing accent.
When to use
When you want a pixel-crisp, recolourable, on-brand product visual instead of a flat PNG — hero shots, feature proof, "see it in the product" moments. Skip it for true photography (use a real <img>).
The panel above is real DOM authored at a fixed 1180px and scaled to its
container — scale = container / 1180 with transform-origin: top left, and the wrapper height written back as inner.offsetHeight × scale because the scaled child is out of flow for sizing.
Resize the window and the fit recomputes. Money keeps its semantic colour; only the chrome
recolours to --m-accent.
Two honest differences from the site: 1180 is a hardcoded constant there, not a prop, and the
live script listens on window.resize plus load, fonts.ready and astro:page-load — there is no ResizeObserver, so a container that changes
width without the window resizing will not re-fit. This illustration uses Svelte's element binding
instead.