Hero 319 - Left-bleed inset hero with dot grid on copy

Hero319 combines a viewport-bleeding muted panel on the left with copy on the right, pairing the bleed treatment with a dot grid accent behind the text column. The main image sits inside the panel with a border and top-weighted cropping, and the inset square hangs outside the bottom-right edge toward the copy side.

Shadcn UI primary and outline buttons sit under a display heading and muted paragraph in the right column. The dot grid is scoped to a decorative absolute layer so it does not interfere with text legibility.

This layout reads editorial and asymmetric, with bleed weight on the media side and a subtle pattern balancing the composition. Complexity is moderate to elaborate due to the breakout math and dual decorative layers.

Mobile stacks with the bleed panel simplifying to full width while the inset keeps outside offset via column padding.