Builds from our styling exercise, using very similar HTML.
We use a funny method here: I have provided all the relevant selectors, but I have commented most of them out. In class, we'll use Firefox Dev tools to sequentially "uncomment" the relevant selectors. You can do the same on your own, experimenting as you go.
Another great place to learn this stuff is in the MDN Layout sections which start here and cover this material as well as a lot more.
For now, this exercise covers basics of both flex and grid. You will need to extend this lesson slightly to use nesting in the homework.