Half Sheet

Half the screen is text and half is a single photograph. Below about 900px the photo moves above the text and crops to a 3:2 band, with the headline still the first thing read.

The split is a CSS grid with the ratio as one variable, so 50/50, 60/40 or 40/60 is a value change rather than a markup change. The image side renders a picture element with WebP and a JPEG fallback at four widths. Two variants are included: one where the photograph bleeds to the edge of the page, one where it sits inside the container behind a hairline border.

This suits a business with one decent photograph — a studio, a workshop, a person at work. It is the wrong choice if your only image is a stock desk shot or a logo on a gradient, because the layout hands the picture half the screen and a weak one will show. It also holds exactly one image. If you need three across the top, this is not the block.