Divided Rows Static Grid Wall Logos Block for React

Edit BANDS, three arrays of six. Each entry is a name, an icon (any Lucide icon), a lettering and a mark: inline beside the name, badge knocked out of a filled square, ring inside a circle, trailing after the name and stacked above it. The first four of each band show on a phone, so give them the shorter names.

Each band is a grid of five columns on a phone, seven from sm and thirteen from lg, and every logo spans two columns. A logo of the middle band starts in the second column, so its row sits one column, half a logo, to the end of the first row's. The column count is why there are six logos in a band and no more: they fill twelve of the thirteen columns, leaving a half logo free at one end.

The wall ends the block. On a page the next section draws its own top rule along the wall's foot, so a line here would double it, and the column has no bottom padding for the same reason.

Yes. The header is an h2, and each band is a list named "Customers, row 1" to "row 3", with each company's name as text; the icons are hidden from assistive technology. Nothing in the wall is focusable, so the hover colour is only a visual touch. In a right-to-left layout the grid fills from the end side while each wordmark keeps its own direction, as a logo would.

So the page doesn't scroll through every customer. Each band's fifth and sixth logos are hidden below sm, which leaves two lines of two in each band. Change which indexes are hidden to show more or fewer.

The header and the wall fade up once when the page loads, with CSS transitions, and each logo's colour eases on hover. With reduced motion both are off.