Centred Carousel Team Block for React

Edit PEOPLE at the top of the file. A person is a name, a role, one line and two tags; the initials come from the name. The count and the wrap-around read the list's length.

The carousel is Embla with align: "center" and no trimmed snaps, so the first and last cards can sit in the middle.

The card whose page is current is the middle one. It gets full scale, the raised card style and the full text colour; every other card is scaled to 82%, with a muted solid tint and the muted text colour. The dimming is a tint and a text colour, never opacity, so every word keeps its contrast.

Only the middle card. The others are inert and hidden from the reading order, so a keyboard and a screen reader meet one card at a time. A polite status line announces the new person and their place ("Anya Volkova, 2 of 7") when the card changes.

Previous and next wrap around, so a button is never disabled while it has focus. With focus on either button the arrow keys turn the cards too, and in a right-to-left page the arrows swap sides. A swipe or a drag snaps to the nearest card.

The scale, tint and entrance transitions are skipped: the cards change state instantly. Moving between cards is always something you start yourself; nothing moves by itself.

One card is about three quarters of the frame's width, with a sliver of each neighbour at the edges. The frame and its marks stay inset from the page's rails, and nothing scrolls sideways at 320 pixels.