Fix awtis kat

components/awtis/awtis-kat.js

@@ -29,15 +29,11 @@ const classes = {
   expandOpen: `${PREFIX}-expandOpen`
 }
 
-const Root = styled('div')((
+const Kat = styled('div')((
   {
     theme
   }
 ) => ({
-  [`& .${classes.root}`]: {
-    maxWidth: 345
-  },
-
   [`& .${classes.media}`]: {
     height: 240,
     objectFit: 'contain'
@@ -73,9 +69,9 @@ export default function AwtisKat({anAwtis}) {
   }
 
   return (
-    <Root>
+    <Grid item xs={12} sm={6} md={4}>
-      <Grid item xs={12} sm={6} lg={4}>
+      <Kat>
-        <Card className={classes.root}>
+        <Card sx={{maxWidth: 340}}>
           <CardActionArea onClick={handleClick}>
             <CardMedia
               className={classes.media}
@@ -113,7 +109,6 @@ export default function AwtisKat({anAwtis}) {
             </CardContent>
           </Collapse>
         </Card>
-      </Grid>
         {esByografiOuve && (
           <AwtisBiyografi
             alias={alias}
@@ -123,7 +118,8 @@ export default function AwtisKat({anAwtis}) {
             meteEsByografiOuve={meteEsByografiOuve}
           />
         )}
-    </Root>
+      </Kat>
+    </Grid>
   )
 }
 

pages/awtis.js

@@ -14,7 +14,7 @@ export default function Awtis({pajTotal, awtisPouChakPaj, paj}) {
     <HeadLayout title='Awtis' tab={2} slug='awtis'>
       <Pajinasyon pajTotal={pajTotal} paj={paj} />
       <Container>
-        <Grid container spacing={4}>
+        <Grid container spacing={{xs: 2, md: 3}}>
           {awtisPouChakPaj.map(anAwtis => <AwtisKat key={anAwtis._id} anAwtis={anAwtis} />)}
         </Grid>
       </Container>