Variable: PanelPhotoPreview

const PanelPhotoPreview: FC<{ children: ReactNode; imageUrl: string; region: PanelPhotoRegion; }>

Composites a design over a scene photo, placed at region - a percentage rect of the photo's natural size.

The outer element fills the available space and is a size container; the inner "stage" is sized with container query units to exactly the photo's fitted ("contain") box, so the photo, its alpha mask and the region's percentage coordinates all share one box - there is no letterboxing anywhere for the overlay to drift against, at any viewport aspect ratio. Size containment also means a tall/high-res photo can never grow the page past its bounds.

The design is laid out as the region's only flex item and should size itself to fill it (e.g. width/height: 100%).