Better breakpoints

instead of just using the width (which is bad because it's easy to confuse a landscape phone and a portrait tablet, do something like:

```js
const breakpoints = {
  // either width between 0-500 px and height between 0-800 px, or the opposite
  mobile: [[0, 500, 'px'], [0, 800, 'px']],
  // previous behavior
  tablet: [800, 1200, 'px']
};
```