#Responsive Styles
The system has build-in responsive breakpoints.
It's simplify the responsive styling and save times.
const listSystem = compose(colorsSystem, spacingSystem);export const system = createSystem(listSystem);const styles = system({theme: {breakpoints: {scale: ["sm", "md", "lg", "xl"],sets: {sm: 768,md: 1024,lg: 1280,xl: "100em",},},},paddingTop: ["20px", "40px", "60px", "120px"],mt: {xl: "20px",},});const result = [{ paddingTop: "20px" },{ "@media screen and (min-width: 768px)": { paddingTop: "40px" } },{ "@media screen and (min-width: 1024px)": { paddingTop: "60px" } },{ "@media screen and (min-width: 1280px)": { paddingTop: "120px" } },{ "@media screen and (min-width: 100em)": { marginTop: "20px" } },];