# Duo weight > Two photograph frames at deliberately unequal weight: a tall 3:4 portrait across 64% of the width and a small square at 36%, sitting on the same bottom line. The space left above the square is kept empty apart from one display numeral and a single line beneath it. Includes replaceable example images. States no colour and no font of its own. Canonical: https://patternpaste.com/pattern/duo-weight.html Section: Gallery Access: Included in Pattern Paste access. Needs: Requires a block theme on WordPress 7.0 to 7.1. Classic themes and page builders are outside our supported setup. Adaptive patterns use the block theme’s colour, spacing and typography presets; styled variations declare their own colours or type. Blocks: column, columns, group, heading, image, paragraph Keywords: gallery, two up, portrait, square, asymmetric, numeral, pair ## Variations (2) ### Portrait left (the default) Identical markup in every theme. The tall frame leads on the left and the square answers on the right, both bottom-aligned, with the numeral standing alone in the space above the square. On a phone the two columns stack and the empty space closes, leaving portrait, numeral and square in descending scale. ### Mirrored duo Identical markup in every theme. The same two frames, flipped: the square and its numeral move to the left and the tall portrait takes the right. Identical proportions and identical colours; the type in the empty space aligns right so the whole spread reads as a mirror. --- ## The signature moment: two frames and the void between them The idea is the refusal to fill the space above the small frame. Two frames of different weight, hung from a shared bottom edge, produce an empty rectangle by arithmetic; most layouts then find something to put in it. This one puts a single numeral in it, at a scale nothing else in the section approaches (`clamp(3.5rem, 7vw, 6rem)`, weight 700, tracking `-0.045em`, line-height 1), and one short line under that. **The numeral is secondary to the frame relationship.** It occupies the void; it is not the idea. Swap it for a year, a room number or a roman numeral and the section is unchanged, because what a visitor reads is the proportion between a tall frame and a small one and the quiet that sits over the small one. It survives colourlessness because it is made of proportion, alignment and emptiness: 64/36, a shared bottom edge, and a scale collision between a 56px to 96px numeral and a 15px to 18px line. Nothing here is carried by a hue, so it looks the same argument in a theme whose `base` is cream and one whose `base` is white, and it reads the same in a serif face and a sans one. The bottom alignment is set on **each `core/column`** (`verticalAlignment: "bottom"`, rendered as `is-vertically-aligned-bottom`), not only on the `core/columns` block: the columns-level class is overridden by core's own `align-items: normal !important` on the front end and does nothing there. Set on the parent alone, the two frames would top-align, the void would open under the square instead of over it, and the section would read as a frame with a hole beneath it. ## What happens at 390px Core stacks `core/columns` below 782px, so the columns become two full-width rows, the bottom alignment has nothing left to act on, and **the void closes**. The section becomes portrait, then numeral and line, then square, in that order. That is an honest change rather than a preserved one: the empty rectangle is a consequence of two columns side by side and cannot exist in one column. What survives is the descent in scale, a tall frame, a large numeral with a small line under it, and a square half its height, which still reads as deliberate sequencing rather than three stacked blocks. Nothing shifts, overlaps or offsets on the way down, because the composition is built from column widths and alignment and not from a negative margin. ## What it inherits, what it decides Inherits: every colour (the band is a `base` chain, all four pieces of type a `contrast` chain, and there is no accent anywhere and no rule or border to carry one), the typeface, and the spacing scale (`spacing|70` above and below the band, `spacing|50` between the label and the row, `spacing|40` between the frames once stacked, `spacing|30` under the numeral, `spacing|50` above the square). Decides: the 64/36 split, the 3:4 and 1:1 crops, the shared bottom edge, the 1240px measure with `clamp(1.25rem, 4vw, 4rem)` gutters, the `clamp(1.25rem, 2.6vw, 2.5rem)` gap between the frames, and the whole type ramp, which is three sizes and no more: a 14px tracked label, the display numeral, and a 15px to 18px line. The heading states its own text colour rather than inheriting the band's, because a theme's heading element style beats an inherited group colour. Both images use `"scale":"cover"` with a stated `aspectRatio`, so whatever the buyer uploads is cropped to the proportion the composition needs rather than changing it. ## What a buyer changes first The two photographs. **Both image blocks include example photographs**; choose Replace to select an image from your media library. The pair wants two distinct subjects rather than two crops of one, since the whole section is a comparison of weights. Then the numeral. Two characters is the size it was drawn for; three still work, four will wrap at 390px. Then the line under it, which should stay short enough to run to two lines at most in the 36% column, and the label above the pair, which is set in caps with wide tracking and reads best under about 25 characters. If the void feels too large for a particular pair of photographs, the honest lever is the square's aspect ratio, not a margin: the empty area is exactly the difference between the two frames' heights. ## Variations - **Mirrored duo** (`duo-mirror`): the spread flips. The square and its numeral move to the left column, the tall portrait takes the right, and the type in the void and the label above align right so the mirror is complete. Same two frames, same 64/36 proportion, same colours; only the composition changes, which is the one axis a variation is allowed to move. On a phone it stacks to numeral, line, square, portrait, so the mirror also reverses the order of the two frames. ## Display type Off the theme's ladder on purpose, because the size is the composition: - paragraph at clamp(3.5rem, 7vw, 6rem) ## Included images The copied markup includes WordPress Photo Directory example photographs. The public image URLs keep the examples visible after pasting. Select an image or cover and choose **Replace** to use your own Media Library files. See [image credits](/image-credits/) for the sources and licenses. Pasting an image URL does not import a Media Library attachment.