Fix Grid sizes

components/teks/teks-kat.js

@@ -51,7 +51,7 @@ export default function TeksKat({parole}) {
   }
 
   return (
-    <StyledGrid xs={12} sm={6} md={4}>
+    <StyledGrid size={{xs: 12, sm: 6, md: 4}}>
       <Card className={classes.root}>
         <CardActionArea onClick={() => handleClick(slug)}>
           <CardMedia

components/teks/teks.js

@@ -200,7 +200,7 @@ export default function Teks({parole}) {
         )}
       </Box>
       <Grid container justifyContent='center' spacing={1}>
-        <Grid xs={12} md={langArray.length > 0 ? 6 : null}>
+        <Grid size={{xs: 12, md: langArray.length > 0 ? 6 : null}}>
           <Box className={classes.gridText}>
             <Typography align='center' sx={{marginBottom: '0.5em'}} variant='h4'>
               Transcription
@@ -211,7 +211,7 @@ export default function Teks({parole}) {
           </Box>
         </Grid>
         {langArray.map(({title, flag, lang}) => (
-          <Grid key={title} xs={12} md={6}>
+          <Grid key={title} size={{xs: 12, md: 6}}>
             <Box className={classes.gridText}>
               <Typography align='center' sx={{marginBottom: '0.5em'}} variant='h4'>
                 {flag === 'fr' && (