Hero 320 block design & features
Hero320 keeps a contained two-column structure with copy on the left and a bordered main image on the right. The inset detail is larger than baseline siblings and rotated a few degrees counterclockwise, sitting outside the bottom-left corner on a white card with a subtle shadow. Shadcn UI buttons handle primary and secondary actions beneath the heading stack.
The rotation turns the inset into a deliberate focal point rather than a flat overlay. The main image uses top-weighted cropping with muted fill and border inside a four-to-three frame.
The aesthetic is slightly playful within a professional marketing layout, using transform and shadow for depth without extra background layers. Complexity is moderate and CSS-forward.
Extra padding on the media column bottom and left prevents the rotated inset from clipping on narrow and wide breakpoints.