@media queries abstraction

**n.b.: This PR is a work in progress** destined to start the discussion around @media queries abstraction.

@PaulAdamDavis and I were just chatting about media queries tonight and I kinda was joking about opening a PR to spark up the conversation in a more formal way. But I got home, installed the project locally (surprisingly easily!), and started coding.

The benefit of abstracting media queries is that by having a centralised, single source of truth where all major breakpoints are defined, you can iterate on the product with more confidence and velocity.

sass-mq (http://git.io/sass-mq) can help with that ([in version 1.4.0](https://github.com/guardian/sass-mq/tree/v1.4.0), to be compatible with Libsass). Feel free to browse the README of sass-mq if you want to know the specifics.

I found a number of different breakpoints/tweakpoints. Is there a reason why there are so many? See this list:

```
<= & > 350px
<= & > 400px
<= & > 500px
<=     550px
<= & > 600px
<= & > 630px
<= & > 650px
>=     768px
<= & > 900px
<= & > 1000px
```

Sometimes having a @media query abstraction prevents proliferation and helps keeping the codebase maintainable. Maybe it would help reducing the number of breakpoints?

Let me know your thoughts and if I can help further. Ideally you could take that branch as is and just iterate on it if you like the principles behind sass-mq.