Rename breakpoints.

Problem/Motivation

Current breakpoint are:

• $bp-xs
• $bp-xs-small
• $bp-xs-wide
• $bp-sm
• $bp-md
• $bp-lg
• $bp-xl

The breakpoint bp-xs-small and bp-xs-wide are not consistent with the other breakpoints.

Proposed resolution

Rename breakpoints like tailwind: https://tailwindcss.com/docs/responsive-design
eg: xxl becomes 2xl.
OR even better: reduce the amount of breakpoints.