Three stacked rows, each one a pair of core/image frames at deliberately unequal widths, 64% against 36%. The wide frame changes sides from row to row: left, right, left. A 13px tracked caps label sits in the narrow column of each row, above its frame, so the labels alternate with it. The joins between the rows are currentColor hairlines carried as per-side top borders on the row groups. An intro row above the run carries a tracked label on the left and one short line on the right. Every frame is 3:2 and every frame ships empty.
The signature moment
The asymmetry changes sides down the page
A single unequal split is a layout. Three of them alternating is a rhythm. The eye is thrown left, then right, then left as it descends, and the section reads as a decision rather than as a grid that happened to come out uneven. Nothing else in the section is doing any work: there is no wash, no tint, no numeral and no offset, only two column widths and the order they are used in.
That is exactly why it survives colourlessness. The device is made of flex-basis: 64% and flex-basis: 36% and of which one comes first in each row. Take every colour away and the alternation is unchanged, because a percentage cannot be recoloured. The only painted marks in the section are the band's ground (a base chain), the type (a contrast chain) and the two hairlines, which are currentColor and therefore exactly as dark as the label beside them in any theme, light or dark, serif or sans.
The alternation also gives the emptiness a rhythm. Both frames in a row are 3:2, so at the 1240px measure the wide one is about 513px tall and the narrow one about 289px; with the columns top-aligned, the narrow column runs out of content roughly 180px above the next hairline. That leftover air falls on the right in row one, on the left in row two and on the right again in row three, so the void alternates with the frames instead of accumulating on one side.
What happens at 390px, stated plainly: the signature does not survive. Core stacks core/columns below 782px, each column becomes its own flex line at full width, and both frames in a row render the same width. There is no left and no right in a single column, so the alternation is not weakened on a phone, it is gone. What survives is everything else: six frames in the order they were authored, each label still sitting above its own frame, and the two hairlines still ruling the run into three pairs, because the border is on the row GROUP rather than between the columns and so does not stack with them. A phone reads this as a ruled run of six plates. It is a good section on a phone and it is a different one; do not buy it for the phone.
What it inherits, what it decides
Inherits: every colour (the band's ground is a base chain, all type and both hairlines follow contrast and currentColor), the typeface, and the spacing scale (spacing|70 above and below the band, spacing|50 between the intro and the first row and on either side of each hairline, spacing|40 as the stacked row gap, spacing|30 between a label and its frame).
Decides: the 64/36 split and its alternation, the 3:2 crop on all six frames, the 1240px measure and the clamp(1.25rem, 4vw, 4rem) gutters, the column gap clamp(1.25rem, 2.6vw, 2.5rem), the top alignment of each pair, and the proportion of the type (a 13px label at 0.22em tracking, an intro line clamping from 15px to 17px at 1.5).
Two mechanics are worth naming. The alignment is set on each core/column as well as on the core/columns block, because core's own align-items: normal !important overrides the columns-level class on the front end, as cover-trio found too. And the hairlines are group borders rather than core/separator blocks, because Twenty Twenty-Four narrows any separator that is not is-style-wide to a centred stub.
The band's blockGap is 0. The vertical rhythm lives in each row group's own padding instead, so the space above a hairline and the space below it are the same spacing|50 and the rule sits exactly between the two pairs it separates. The first row has no top border and no top padding, so the run starts at the intro; the last row has no bottom padding, so it stops level with its own frames rather than trailing into the band.
What a buyer changes first141 words
The photographs. All six frames ship EMPTY, which is what WordPress's own save() writes before a file is chosen and is valid at both matrix entries: click each one, choose an image, and the 3:2 crop and object-fit: cover are already set for you. Then the three labels. They are set in caps at wide tracking and read best under about 24 characters; a label that wraps to two lines pushes its frame down and softens the row's top edge, which is the one place this composition is fragile.
If you want a fourth pair, copy a whole row group and keep the alternation going: a fourth row is wide-right in the base and wide-left in the reversed variation. Copying a row and leaving it on the same side as the one above is the one edit that removes the signature.
Variations74 words
- Reversed stagger: the run starts on the other side, so the rows read wide-right, wide-left, wide-right and the labels follow the narrow column down the other edge. Same six frames, same widths, same crops and same colours; the composition is the only thing that changes. It is there because the alternation has a phase as well as a rhythm, and the right phase depends on what sits above the section on the page.
The markup
Core block markup and nothing else. Copy it, then paste it straight into the block editor: WordPress reads the delimiters and rebuilds the blocks.
Fetching the markup…Variation: Reversed stagger
Fetching the markup…