fix(styles): make media grid compatible with SUI

fix(styles): make media grid compatible with SUI

src/common/styles/utils.jsx

@@ -1,9 +1,7 @@
 import {css} from 'styled-components'
 import _ from 'lodash'
 
-const pxToEm = px => {
-	return px / 16 + 'em'
-}
+const pxToEm = px => px / 16 + 'em'
 
 const iWantToUseEm = true
 // NOTE: This grid don't match SUI's grid.
@@ -14,7 +12,7 @@ const sizes = _.mapValues(
 		xs: 0, // Extra small screen / phone
 		sm: 480, // Small screen / phone
 		md: 768, // Medium screen / tablet
-		lg: 1024, // Large screen / desktop
+		lg: 992, // Large screen / desktop
 		xl: 1200 // Extra large screen / wide desktop
 	},
 	(value, key) => {
@@ -27,43 +25,43 @@ const sizes = _.mapValues(
 // NOTE: @Metnew: this block may be rewritten more elegant (like the code below, from off docs)
 export const media = {
 	xs: (...args) => css`
-	  @media only screen and (max-width: ${sizes.sm}) {
-	    ${css(...args)}
-	  }
+		@media only screen and (max-width: ${sizes.sm}) {
+			${css(...args)};
+		}
 	`,
 	sm: (...args) => css`
-	  @media only screen and (max-width: ${sizes.md}) {
-	    ${css(...args)}
-	  }
+		@media only screen and (max-width: ${sizes.md}) {
+			${css(...args)};
+		}
 	`,
 	smOnly: (...args) => css`
 		@media only screen and (max-width: ${sizes.sm}) and (min-width: ${sizes.xs}) {
-			${css(...args)}
+			${css(...args)};
 		}
 	`,
 	md: (...args) => css`
-	  @media only screen and (max-width: ${sizes.lg}) {
-	    ${css(...args)}
-	  }
+		@media only screen and (max-width: ${sizes.lg}) {
+			${css(...args)};
+		}
 	`,
 	mdOnly: (...args) => css`
 		@media only screen and (max-width: ${sizes.md}) and (min-width: ${sizes.sm}) {
-			${css(...args)}
+			${css(...args)};
 		}
 	`,
 	lg: (...args) => css`
-	  @media only screen and (min-width: ${sizes.lg}) {
-	    ${css(...args)}
-	  }
+		@media only screen and (min-width: ${sizes.lg}) {
+			${css(...args)};
+		}
 	`,
 	lgOnly: (...args) => css`
 		@media only screen and (max-width: ${sizes.xl}) and (min-width: ${sizes.lg}) {
-			${css(...args)}
+			${css(...args)};
 		}
 	`,
 	xl: (...args) => css`
-	  @media only screen and (min-width: ${sizes.xl}) {
-	    ${css(...args)}
-	  }
+		@media only screen and (min-width: ${sizes.xl}) {
+			${css(...args)};
+		}
 	`
 }