📝 Update docs

Author: exah

docs/grid.mdx

@@ -16,7 +16,7 @@ import { Box, Grid } from '../src'
 
 [Grid Layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout)
 
-- Item conrolled with `col`, `row` prop in `Grid.Item` component
+- Item conrolled with `column`, `row` prop in `Grid.Item` component
 - [Space](https://github.com/exah/pss/blob/master/docs/api.md#space) between items conrolled with `gap`, `columnGap` and `rowGap` props
 - [Box alignment](https://rachelandrew.co.uk/css/cheatsheets/box-alignment) styles
 
@@ -129,7 +129,7 @@ import { Grid } from 'pss-components'
   </Grid>
 </Playground>
 
-### Control each item `col` and `row` props
+### Control each item `column` and `row` props
 
 <Playground>
   <Grid templateColumns='repeat(12, 1fr)' gap={1}>

docs/match-media.mdx

@@ -38,7 +38,7 @@ With values from `media` prop:
     <MatchMediaConsumer>
       {(matchedMedia) => (
         <Box>
-          Current media: {matchedMedia.key}
+          Current media: {matchedMedia.matches.join(', ')}
         </Box>
       )}
     </MatchMediaConsumer>
@@ -52,7 +52,7 @@ From `theme`:
     <MatchMediaConsumer>
       {(matchedMedia) => (
         <Box>
-          Current media: {matchedMedia.key}
+          Current media: {matchedMedia.matches.join(', ')}
         </Box>
       )}
     </MatchMediaConsumer>

docs/theme-defaults.mdx

@@ -24,11 +24,11 @@ import { ThemeDefaults } from 'pss-components'
 
 <Playground>
   <Box>
-    <Box tm={true} ratio={16 / 9} p={1} mb={1}>
+    <Box tm='auto' ratio={16 / 9} p={1} mb={1}>
       Content
     </Box>
     <ThemeDefaults palette='inverted'>
-      <Box tm={true} ratio={16 / 9} p={1}>
+      <Box tm='auto' ratio={16 / 9} p={1}>
         Content
       </Box>
     </ThemeDefaults>