The content that breaks things, in the components that have to survive it.

Each case below is rendered at the 375 floor inside a real 375px frame, because that is where every one of them fails first. Nothing here is annotated in place of being built.

The two barn cards, side by side at 375

Identical specification, one building. The test is whether a visitor can tell them apart without reading the names.

375 frame

The Dutch Barn

Sleeps 105 bedroomsPrivate hot tubLevel access Freestanding bath (to confirm)

The lighter of the two inside — open-plan, blue and white, with the wood burner at the centre of it.

See The Dutch Barn

375 frame

The Hayloft

Sleeps 105 bedroomsPrivate hot tubLevel access Walk-in shower room (to confirm)

The warmer of the two — wool, oak and stone, and the long view out over the meadow.

See The Hayloft

Result: passes. The interior clusters read as two different places before the names are read. The four identical facts wrap to two rows at 375 without overflow, and the differing fact lands last where the eye finishes.

A service card with no image, and a product card with no image

Both must read as designed rather than as a failed load.

Result: passes. The service card has no image slot at all — a moss rule and a line mark instead — so there is nothing to fail. The product card's empty treatment is a moss-tint panel carrying the relevant line mark, which reads as deliberate.

An empty shop category

Nothing to sell is a normal state on a seasonal farm, not an error.

Result: passes. It explains why, says when, and offers an action — a destination rather than an apology.

“Cottages.com” as an unbreakable word in a 375 card

The longest label in the system, in the narrowest container, where a button that will not wrap becomes a horizontal scrollbar.

Result: passes. The label is 34 characters and “Cottages.com” is 12 of them unbroken, but the button is gs-btn--block with wrapping text rather than white-space:nowrap, so it takes two lines instead of forcing a scrollbar. In prose the word sits inside a 68ch measure with normal wrapping.

The date picker at 375 and below

Seven 44px columns in a container narrower than 320px. The rule is that targets never shrink and no column is ever hidden.

Result: passes. The month is full-bleed inside its card, so it uses the page width rather than the card's inner width. min-width:0 on the card lets it hold its track below the floor, at which point overflow-x:auto engages as a guard. At and above 375 there is no scrollbar at all.