So, next, we'll again use our new media query mix-in to set the max width for

our grid container.

So, in the grid container.scsspartial, let's replace

this media query by including our mq mix-in in its place.

So, we'll say @include mq.

And let's pass the large media query breakpoint.

All right, so we can go ahead and save our grid container partial.

And since we're all done with this, we can close it out.

And then, next, remember that panel layout component we built a couple of stages ago?

Well, let's revisit that.

And this time, we'll add media queries that define styles for

these small and medium breakpoints.

So, first in the panel default placeholder rule,

we still want the top padding equivalent to 30 pixels and EMs by default.

But, in the medium grid is,

we'll want to set the bottom padding equivalent to 20 pixels and EMs.

So, right below the padding top declaration will include a media query,

and lets pass the medium break point, so now the bottom

padding will be applied only when the view port is at 769 pixels or higher.

So, next, right below in the panel padding [UNKNOWN] rule.

Let's make the top padding equivalent to 34 pixels, and it's by default.

But in the medium grid, we'll want to bump the top padding to 80 pixels, and

set the bottom padding equivalent to 34 pixels in em.

So, we'll leave these values alone.

And right up top, I'll just go ahead and copy the top heading declaration,

and let's set it to 34 pixels by default,

then right below I'll include a new medium breakpoint.

So I'll just go ahead and copy the media query included from above and

paste it in the panel padding placeholder rule.

Okay, so that should do it.

So, when we save our Extenz file and bring up the preview, we can see

how the generous padding is still applied in the medium and large break point.

But once the view port is at 768 pixels or

lower, a lot of the top panel padding is removed, and we can see that right here

[BLANK_AUDIO]

Finally, let's also revisit our nav module.

But this time, it's your turn to use what you've learned so

far about modular assess, to optimize the nav for mobile devices, and

narrow viewport sizes, because currently, it's not.

So, I'd like to see you lay out and install the nav module, for

the small breakpoint, like we're seeing here.

Remember to avoid repeating, resetting, or undoing CSS properties.

Try to abstract as much as you can if it makes sense.

And if you want, you can share what you've done on our forum.

In the next video, I'll quickly show you how I did it.

Then we'll finish up the course by creating hidden, visible, and

collapsed states for some of our modules, including the main navigation.