Asymmetric Mosaic Awards Block for React

The grid is four columns from md and two below it. The lead is col-span-2 and, from md, row-span-2; the two wide cells are col-span-2; the small ones take one column. Browsers place them in order, so the lead fills the first two columns of rows one and two, the wide cells fill the other two, and the small cells fill row three. Keep that count (one lead, two wide, four small) or adjust the spans so every row is full, otherwise a gap shows the hairline colour.

Edit LEAD, WIDE and SMALL at the top of the file. Each award has a title, its programme, a result in words ("Grand prize", "Winner", "Finalist"), a fixed year and a mark; the lead and wide awards also have a category and a citation. The header's tally is counted from all three lists.

A Mark is a list of closed outlines with a faint solid fill (fills) and a list of plain strokes drawn over them (lines) in a 64 by 64 box; Drawn sizes it from the class you give it. The strokes keep a constant width at any size, and the fill is opaque, so overlapping parts hide each other's outlines. Marks are drawings only, hidden from assistive technology; the award is always in the text.

No. Quartzbridge, Juniperholt, Kilnford, Mirrowick, Orchardley, Pelhamstow and Quillfair are made-up programmes and Glyphwright a made-up marketplace. If you show a real award, use its name in text and its official badge only where its rules allow it.

Each cell is a list item that opens with the result and the year ("Grand prize, 2025"), then the award as a heading, then the programme and, in the larger cells, the category and the jury's line. The drawings are hidden from assistive technology, and each year sits in a bdi element so it keeps its place in a right-to-left layout.

Two columns: the lead and the two runners-up take a full row each, the four small cells sit in pairs, and the lead's drawing steps down from 128 to 96 pixels. Nothing scrolls sideways at 320 pixels, and the first award is in view by 560 pixels.