💖 Rename `config.breakpoints` to `config.viewports` and add `4xs`

[1aron]

Description

In CSS and web development, the width generally referred to is the viewport width, not the device width or the screen's physical width.

In the future, we may allow you to set the viewport range like this viewports: { md: { min: 1024, max: 1280 } }, so calling it a breakpoint may not be appropriate.

Expect

export default {
-   breakpoints: {
-       '3xs': 360,
-       '2xs': 480,
-       xs: 600,
-       sm: 768,
-       md: 1024,
-       lg: 1280,
-       xl: 1440,
-       '2xl': 1600,
-       '3xl': 1920,
-       '4xl': 2560
-   },
+   viewports: {
+       '4xs': 360,
+       '3xs': 480,
+       '2xs': 600,
+       'xs': 768,
+       'sm': 834,
+       'md': 1024,
+       'lg': 1280,
+       'xl': 1440,
+       '2xl': 1600,
+       '3xl': 1920,
+       '4xl': 2560
+   }
}

[1aron]

🎉 Released in https://github.com/master-co/css/releases/tag/v2.0.0-beta.166