CSS Flexbox practice/questions thoughts

So today I was doing bit of generic experiments/studies with CSS.

I bellieve I wrapped my mind around column drop flexbox pattern, and also mostly fluid, they are almost the same as far as I figured, and most simple ones.

Below link on my codepen. In the code itself, there are bunch of comments:
questions
thoughts
explanations

It is basically carcass for column drop layout. Maybe I will use it as boilerplate when it will be appropriate for some project.

To test it for responsivity in Chrome(if you don’t know)

ctrl+shift+i open Dev tools
ctrl+shift+m test for responsivity (at the top will appear dropdown menu, you can check how it looks on different devices )

Column drop practice

Here some more general questions.

For now I want to dive in some more common flex/grid patterns and apply some of them for my existing fCC Responsive Web Design cert. projects(I’ve done so little in terms of styling them and already refactoring it - that’s kinda feels dumb :joy:)

I wish to have some amount(?) patterns familiar to me.

I wanna set up in my head some kind of CSS-related logic:

Let’s say I have some content.
I need to make some page with this content.
I believe I am capable to end up with appropriate HTML structure.
I wanna be able to choose correct pattern first based on content and HTML structure.
Patterns are useful but not ideal, so after that I need to modify pattern for particular case.

I think for now I will stick to that. Some skills like styling text, deal with tables - I’ll polish it in the process.

And also I need some cheatsheet: what needs to be done for accessibility.

I would appreciate any feedback about stuff above.

PS.
When I am choosing font-style or some… let’s say border-radius it is extremely irritating.
I always think: 'Why the hell it’s Tahoma font?Why is it not Verdana? Or something else? That doesn’t make any sense!"
My brain wants to find some math logic, but there is none :joy: