Two Weight Headline Logos Block for React

It is one h2 with two spans: the claim is plain text, the continuation is a span in text-muted-foreground. Put the count in a bdi so it keeps its digits on right-to-left pages. Keep the two parts one sentence each; text-balance evens the lines.

The wall's rows have a fixed height (auto-rows-[6rem], 7rem from md), so the rule above row two sits one row down and the rule above row three two rows down. Each is a Guides with rules="top" and marks="top", pinned there with top-24 and top-48 (and the md values). If you change a row's height, change both offsets.

Edit CUSTOMERS: each entry is a name, an icon, a lettering and a mark (inline, badge, ring or trailing). Keep twelve: four columns by three rows. The last wordmark of each row is hidden below sm, which leaves nine in three rows of three.

Nine of the twelve, three across, in the same three rows. Each wordmark stacks its icon over its name so even a ten-letter name fits a 96 px column at 320 px. The names are sized to text-xs or text-sm there and step up from sm.

The headline is the section's one h2, the logos are a real list named "Running clubs on Pacewell", and the icons are hidden from assistive technology. The muted half of the headline is text-muted-foreground at full strength, which passes WCAG AA at this size.

The block fades up once when the page loads, with a CSS transition, and each logo eases to the text colour on hover. With reduced motion the entrance is off and the hover colour changes at once.