Bento Grid Team Block for React

Edit FOUNDER and LEADERS at the top of the file. A leader is a name, a role, a focus phrase (the line reads "Focus: …") and a city; the initials come from the name and the avatar's tone from the leader's place in the list. Four leaders fill the two-by-two block beside the founder exactly. A different count leaves a hole that shows the border colour, so change the founder's row span or the closing cell with it.

PEOPLE and COUNTRIES are two constants, and the dots are drawn from PEOPLE: one for each person, twelve to a row, with every fifth one brighter, like lamps in a row. The drawing is hidden from assistive technology because the same count is in the text beside it. Another count draws more or fewer dots; a number that is not a multiple of twelve leaves a shorter last row.

The grid has a one-pixel gap on a border-coloured background, and every cell is a background-coloured box, so the gap shows as a hairline between cells whatever their spans. The sides come from the page's rails, the top rule from Guides with + marks where it meets the rails, and the foot from the next block's top rule: the grid draws no rule of its own at its end.

Below md the grid has two columns. The founder and the count each span both, and the four leaders sit two by two. A leader's focus line has no room in a half-width cell, so it is read by screen readers and not shown there; it shows from sm. Nothing scrolls sideways at 320 pixels.

Yes: put an AvatarImage in each Avatar, before the fallback; the initials show until the picture loads, and whenever it fails. The avatars are decorative (the name is in the heading beside them), so a picture needs no alternative text. Square, greyscale pictures keep the grid as calm as the initials.

Yes. Every colour is a theme token, the avatars are three greyscale tones, and there is no dark scope, so the grid is light on a light page and dark on a dark one in whichever preset you install. The entrance is a CSS fade and lift that is off with reduced motion.