Let's get to work on implementing our media query. As the note says here, write styles to adjust the grid at screen sizes below 700px. I'm going to write an @media and I'll say max-width of 700px, so everything up to 700px.

0:23 I'm then going to select the container div, which is what everything is inside of. That's where my grid currently is. I'm going to readjust our grid-template-areas. The way that I want to readjust them right now, this is exactly the same. We don't see a difference. It looks identical, but this is what I want.

0:43 If I shrink this down in the solution, instead of having "ad main aside," what I really want is "main main aside." We're almost there, as you can see here, but then we have our poor ad, which is supposed to go to the bottom left, ad, and then footer only takes up two columns now.

1:07 That's it. We just had to reorganize or reconfigure our grid-template-areas. I kept the names the same, of course, because otherwise that would cause a lot of problems. I already assigned those names for you. You didn't need to change main or add or aside or footer. You just need to move them around within our grid-template-areas.

1:25 This is a simple layout, just two rows and three columns. The middle column happens to be larger, but it's still just three columns. Same thing with the rows. This top row is bigger than the bottom row, but it's still just two rows. You can see right there, we hit that break point.

1:42 If you want to change that from 700 to something else, totally up to you, of course. You could probably, which is not part of the exercise, but probably would make sense to go to a one column layout on a really small size like we have here. But that's for another time.