Quote gallery

The quotation is a core/paragraph and the attribution is another, for the same reason as quote-break: core/quote and core/pullquote take their border, their italic and their padding from the theme, and each stock block theme does something different with them, so a quotation that is sometimes italic, sometimes bordered and sometimes neither is not one design. Paragraphs with explicit proportion are the same design everywhere. The quotation marks are typed, as curly quotes, inside the paragraph.

verticalAlignment: "bottom" is set on the core/columns block and on each core/column. The columns-level class alone does nothing on the front end, because core ships align-items: normal !important on the column, which overrides it; cover-trio shipped that way in its first draft and the frames sat top-aligned. So each column carries is-vertically-aligned-bottom in its own right. With the frames shorter than the type block, the alignment is what puts the two captions level with the attribution instead of leaving them floating halfway up the band.

Core stacks core/columns below 782px, so the section becomes frame, quote, frame in that order, each at the full width of the phone. Two things go, and they should be said plainly:

• The bracketing goes, because there is no left and right on a phone. Two frames above and below a sentence are a sequence, not brackets.
• The scale inversion goes with it. The quotation floors at 28px, while each frame is now the full 350px of column width and therefore about 467px tall by its own 3:4 ratio. On a phone the photographs are the biggest things on the screen, which is the opposite of the signature.

What still works is the symmetry and the order: one frame, the sentence, one frame, with the quotation still the only display-size type in the section and the two captions still holding the same weight and tracking. It reads as a deliberate stack rather than as a broken row, and the quotation is still the thing you read first because it is the only large type there. It is honestly a weaker composition than the desktop one, not an equal one; the idea is a left-and-right idea and a phone does not have a left and right.

Every pair in the section is a contrast chain on a base chain, inverted in the variation. The quotation is the only text judged at the 3:1 large-text bar: it floors at 28px, which is above the 24px threshold at every viewport width. The attribution and both frame captions are 13px and are held to the full 4.5:1; they are made small by size and tracking, never by fading the colour, and both carry the band's full-strength ink.

1. The photographs. Both image blocks ship EMPTY, which is what WordPress's own save() writes before a file is chosen and is valid at 6.6 and 7.0. Click each frame, choose an image, set the focal point. The 3:4 crop and object-fit: cover are already set, so any upload is cropped to the proportion the composition needs. Two portraits of the same subject or the same room read as brackets; two unrelated landscapes do not.
2. The quotation. Keep it under about 110 characters. At 48px it is six or seven lines in the centre column, which is what makes it the tallest thing in the section; much shorter and the frames start to out-measure it, much longer and it stops being a quotation.
3. The attribution and the two captions. All three are uppercase and tracked, and all three want to be short: under about 26 characters for the attribution and under about 14 for each caption, so no incidental label wraps at 390.

• Ink quote: the band inverts. The ground becomes a contrast chain and every piece of type a base chain, on the quotation, the attribution and both captions. The composition, the widths, the crops and the alignment are identical to the base's; only the colour relationship changes, which is the one axis a variation is allowed to move. It suits photographs that are mostly light, where an inked band gives the two frames an edge to sit against.

The base and the variation both hold to the preset contract, survive an editor round-trip, and were rendered and inspected at 1280 and 390.

Off the theme's ladder on purpose, because the size is the composition:

• paragraph at clamp(1.75rem, 3.4vw, 3rem)