You're still kind of thinking too hard about it, working too hard with it, and thinking too much in pixels. More specifically, thinking in specific sizes and dicking around with layout before you have content.

Content should dictate markup. Content + markup + device and user limitations dictates layout. Dicking around with a bunch of div whilst cute for learning how things like float and flex work, is an utterly bass-wackard approach to building a page.

And I mean it when I say you're overthinking it. You're micromanaging columns instead of just setting a min-width and max-width on the elements and letting wrapping -- be it via flex-wrap or columns -- do the heavy lifting for you.

See your example of three media queries for nothing. You're micromanaging the widths of those silly "--thin" presentational classes (recreating everything wrong with HTML 3) for something a single set of width and max-width with flex could handle without a single media query.

The same happens when you talk about the "iiiii" vs. "wwwwwww" button. Why are you trying to micromanage their width and declaring fixed widths in the first place?

Let them size to their content, end of problem. Let things automatically wrap and scale to the available space instead of declaring something stupid like "width:20em" or "width:320px". Fixed widths are just as stupid as pixel metric declarations.

As I keep saying, if someone's thinking in pixels, somebody's not thinking. Get that nonsense out of your skull!

Quality layouts are:

1) Elastic, sizing to the user or OS font preference

2) semi-fluid, auto adjusting to the available width instead of declaring fixed widths.

3) Responsive, adding/removing columns and otherwise adjusting the layout based on width.

And thanks to things like flex-wrap and columns by width, you often don't need media queries for that.