With Susy you can have as many breakpoints as you need. However, rather than try and remember the various widths for the breakpoints in ems or pixels, let’s make a couple of variables, one called $M (for medium-sized viewport widths) and the other called $L for larger ones. We’ll add these in the _layouts.scss partial below the other Susy settings:

// Breakpoint variables
// ====================================================================
$M: 47em; // roughly speaking, around 750px wide with 16px body font
$L: 75em; // roughly speaking, around 1200px wide with 16px body font

Remember that our first layout will actually be the absence of media queries: that’s our ‘accessibility’ layout. With these two variables we can therefore ultimately facilitate three layouts, the initial accessibility layout (where no media query is used), a layout at a breakpoint of 47em (around 750px wide assuming a 16px body font) and a layout at a breakpoint of 75em (around 1200px...