Responsive FAQ card using mobile-first approach

Good work on that one, regarding your questions.

1. Well it depends right, when you start first in mobile or mobile first, it would be great idea to use min-width on your break points since it will only scale up. But if you start with desktop view, max-width is the best choice since it will only scale down. I don't usually use min-height and in media breakpoints. Also when some styling overlaps another, make sure that you properly declared your styling in their respective media breakpoints. If you specified any styling outside of it, then it is declared globally and will be inherited by all. Unlike when you set styling in the breakpoints, they will only be run when your dimension is reached.

2. The reason for that is css specificity. Okay well you declare a font-size to the body right and hoping that it will change the other as well, but, there is a point where you declared in your selector .faq-section.show .answer, this selector the font size. Now what happens is that, when you declare in your body tag, the .answer will not change since it have a higher specificity than the body tag. Because as you can see body compared to .faq-section.show .answer, the latter is more specified right and specificity always win. Reading about specificity will be a great idea^

3. I think it would be better if you just make it display of block and not flex with a column direction. Because if you set it to block, if the answer appears, it will only change the height or add a height to the bottom and will not make the container shake, since when you display it to flex with column direction, the elements is justified to the center right, so it scales dynamically. So when a question appears, it then adds to the height then the parent will dynamically rearranges it so that they will be centered, therefore makes a shake. I suggest making it block, since block container usually places everything in row, unless a child is inline.

Well hoping that would clear some questions^^

I think this works pretty well. It's more usual for users to be able to open multiple expandable sections at once, so this is kind of breaking from convention. It's your choice though, as it's also not usual for expandable sections to sit within a centered card...

One thing I would definitely change though is making your questions into buttons. They need to be an interactive element so this can be accessible via keyboard and other assistive tech

On your media query questions, my only advice is to start mobile first (smallest screen size, let that be the base layout), then add min-width media queries as needed as you enlarge the screen.

Over time you'll find your css will naturally become simpler as you start to learn how to write html and your base styles so fewer changes are required in media queries.