Split Label Strip Logos Block for React

Edit CUSTOMERS at the top of the file: each entry is a name, an icon (any Lucide icon) and a lettering, the Tailwind classes for the name's type. The ring around each icon is drawn by Wordmark, so every logo shares it.

The column has no padding of its own: the two cells carry it. That lets the second cell's start border run the whole height of the strip and meet the spine's rule, with a + mark where they cross (a Guides with marks="start", shown from lg).

Six in one row from xl; at lg, where the label takes a fifth of the width, they fall into two rows of three; from sm below lg they are three across under the label, and two across on a phone. Six fills every row at each of those widths.

Replace each icon and name with the company's one-colour logo at about h-6 tall, drawn in currentColor so it keeps the muted colour and the hover. Give an img the company's name as its alt, or an inline svg a role="img" and an aria-label. The strip needs no other change.

A strip is a line of proof, not a section of its own. The label is a paragraph and the logos are a list named "Schools on Merlinly". If your page needs the strip in its outline, make the label's first line a heading.

The logos are a real list, each item's name is text, and the icons are hidden from assistive technology. The names use text-muted-foreground at full strength, which passes WCAG AA on the page background. Nothing is focusable, so the hover colour is a visual touch only, and each logo keeps its own direction on a right-to-left page.