00:00 We're going to make sure we pay attention to every little change here. So we're going to go with a fine comb, check the padding around the first container, check the gap between each element, like here, here, there, check the size of the logo tiles, check the gap between the tiles. So we've done all this already for the mobile design,

00:18 but we need to go and check for all the differences as we jumped to the next breakpoint, which is the small breakpoint, and then continuing our way through the design. So the outer gap from the main container was 64 vertical and 16 horizontal. This looks to be exactly the same at the next breakpoint. So we're good.

00:36 The logo was and still is 80 by 80. So that's the same. Next, the spacing between the logo and the heading is 24 for both. So far, nothing has changed. We have 48 pixel gap between the contents and the tiles. And aha, here's the first change.

00:55 Now we have 64 pixels between the content section and the logo section. So this is the small breakpoint. And so we can do our first change in our layout container, which contains both the content section and then the logo lists. So here we have a gap of 12, which is 48.

01:15 And at the small breakpoint, we're going to change that to a gap of 16 to reach 64. So when we grow, the gap is going to increase. You can see the difference here changing right there. And it gets bigger. Let's continue checking everything for the small breakpoint. And then we move to the next one.

01:33 We've mentioned before the tiles, which are initially 80 pixels by 80 pixels, grow to become 96 pixels by 96 pixels from the small breakpoint. And so we need to go find our LI items here, or actually the anchor tag where we have size 20. And at the small breakpoint,

01:51 we're going to increase that to size 24 to reach 96 pixels. So we should have our tiles increasing in size. And they sure do. Not only does the size of the tiles increase, but also the gap between tiles goes from 8 pixels on mobile to 16 pixels.

02:10 The padding is not changing. It's still 16. But the gap between each element doubles to 16 pixels. That happens on the parents, the unordered list. We have gap 2 and then SM gap 4, which is going to increase that gap as we grow. Perfect.

02:25 And I feel like this is all the changes needed at the small breakpoint. So we can move on to the next one. On to the medium breakpoint. The outer container is still 64 and 16. Then we have now increased from 24 to 32 between the logo and the heading tag.

02:45 And remember, we had set this spacing with a margin top of 6. And so on the MD breakpoint, we want to go to empty 8. This is going to increase the spacing here when we reach the MD breakpoint right here. The next spacing is 24. The next spacing is now 24. And it used to be 16.

03:06 So we also need to increase the margin top on the paragraph tag from empty 4 to empty 6. Let's go find it here. Empty 4 and then at the MD breakpoint, we go empty 6. Like so. So once again, this is going to increase this spacing here.

03:26 What about the gap between the content section and the tiles? It is still 64. So we're good to go. The tiles are still 96 and the gap is still 16. So we are good to move to the next breakpoint, which is the LG breakpoint.

03:42 Once again, 64 and 16 on the outer container. That doesn't change. The logo is still 80. 32 and 24, which are the same values we had set here and here. So we are good. The gap is 64. So no changes here. The tiles are 96 pixels.

04:01 The gap is 16. So we actually have nothing to change, I believe, at the large breakpoint. And if we look at the final breakpoint, we actually haven't done the side-by-side layout change. We'll do that next. So let's not worry about this gap change. But we'll need to remember that.

04:18 Otherwise, the logo is still 80 by 80. The gap is 32 and then 24. So we have nothing to change. Let's make a mental note that the gap between the two elements has increased to 96 from what it was, which was 64.

04:35 But we'll take care of that when we do the side-by-side layout in the next challenge.