All solutions

I think I overcomplicated the chart here by breaking it up into div soup, and realized late that I needed to go back and adjust things to fit on mobile. In a real project I think I'd settle on a charting library rather than make it all from scratch, but it's good to get some experience thinking about how things should scale. I chose to put an aspect ratio on the chart... it always bugs me when web figures will squish and squeeze until you can't hardly read them, so I was hoping fixing the aspect ratio would mitigate that.

I used a radio input for the selection, so to keep some accessibility I set up the radio buttons on top of the label with 0% opacity.

Wasn't sure how to get the rating numbers centered in their label (the extra space at the bottom of the glyph made it look off-center in such a small container), so I resorted to adding some hacky padding to nudge them into place.

Found it difficult to extract useful utility classes for layout. That is something I'll have to work on in the future to keep things clean.

I'm curious, when you want to distribute some elements in a column; how do you decide to use flexbox or a one column grid? The CSS "gap" property seems really handy, so I often reach for grid to use that, and then default to flexbox if I want it lined up in a certain way to the parent (start, center, end).

Do you check mobile sizes every time you make a site?