Consistent breakpoints across fronts and content (up to and including tablet breakpoint)

Making the breakpoints we use across fronts and content pages makes the using the website a more coherent experience, and makes developing containers that appear on all pages types much easier. In this first stage, I’ve focused on aligning breakpoints up to and including tablets. In short, the following has changed:

### Mobile
![screen shot 2014-08-29 at 15 23 29](https://cloud.githubusercontent.com/assets/813383/4091541/b9c4ede0-2f89-11e4-90b6-b27cccab8d6a.png)

Layouts are fluid, then become fixed at 8 columns. (Previously, fronts maxed-out at 7 columns, article pages maxed out at 9 columns.)

### Tablet
![screen shot 2014-08-29 at 15 24 00](https://cloud.githubusercontent.com/assets/813383/4091547/c3b4e738-2f89-11e4-88e9-5de523443299.png)

Layouts are fixed at 9-columns. (Previously, fronts were fixed at 9 columns, article pages fixed at 8-columns). To ensure the line length on articles remains of sane length, text doesn’t grow longer than 8-columns wide:

![screen shot 2014-08-29 at 15 36 18](https://cloud.githubusercontent.com/assets/813383/4091559/e26ad804-2f89-11e4-8eab-2df9477c99c0.png)

(Apologies for the new breakpoint name; I hang my head in shame!)
you'll need to update https://github.com/guardian/frontend/blob/master/common/app/assets/javascripts/utils/detect.js#L58 with the new tweakpoint