CSS media queries inconsistency

We are using decentraland-ui for the [Governance DAO project](https://github.com/decentraland/governance), and with @andyesp we noticed there is an inconsistency regarding how mobile/tablet styling is calculated.

Particularly for the [Tabs.css](https://github.com/decentraland/ui/blob/cd2e5a45499008e467146004df5c89d91441425c/src/components/Tabs/Tabs.css#L43), the way that mobile is determined is by querying for a `max-width: 768px`.

In the same project you are also defining a hook in [Media.ts](https://github.com/decentraland/ui/blob/18002166a6bb289e262f8f81cbfdd00eeacf7f88/src/components/Media/Media.ts#L23), `useMobileMediaQuery`, which uses a `max-width` of `767px` for determining if something is mobile.

This causes for an unexpected behavior when switching to a tablet view with `768px`, where some components display for tablet, but some styles are still applied as if they were mobile.

We suggest:
* Change `Tabs.css` media query to `max-width: 767px`
* Review and update all `max-width: 768px` media queries

If you agree that this is an issue, we can open a PR with the proposed solution.