All solutions

Really liked this project, I'd like to have an overall feedback about responsiveness and media-queries usage.

This is the first project where I had a chance to implement media queries and to think responsively in general. I'd like to have a little feedback regarding that: did I manage? Did I overdo it? Is there a way to write more sufficient media queries? So, actual questions:

• I still struggle with media queries, especially when I declare both height and weight. Say, I want to address a layout between 375-500px width and 400-600px height. Should I use min-width, min-height/max-width, max-height? Both? How can I ensure that media queries don't overwrite each other? I've encountered problems when my query for height was working fine, but width parameter was inherited from another query.
• Still a question about media queries, but I thought it would be better to address it specifically. In media queries, when I was changing the font-size for the body element, I ended up with changing only .faq-section .question element. I had to specify changes for .faq-section .answer and .faq-title every time, which can be redundant and seems counterintuitive overall. What am I missing?
• I'm not happy with smoothness of my CSS transitions, especially when 'closing' an opened FAQ section. It seems really shaky, when the container starts to shrink, then the text disappears and container just shuts down momentarily after that. Is there a way to make it smoother?

Thank you for your feedback and suggestions

I would like some feedback on overall HTML/CSS layout. Should I divide page into groups of div's and style them separately using flexbox model, or should I rely more on position: relative with some pixel tweaking? Creating many div's feels bad and counterintuitive for some reason.