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} lg={4}>
-        <Card className={classes.root}>
+    <Grid item xs={12} sm={6} md={4}>
+      <Kat>
+        <Card sx={{maxWidth: 340}}>
           <CardActionArea onClick={handleClick}>
             <CardMedia
               className={classes.media}
@@ -113,17 +109,17 @@ export default function AwtisKat({anAwtis}) {
             </CardContent>
           </Collapse>
         </Card>
-      </Grid>
-      {esByografiOuve && (
-        <AwtisBiyografi
-          alias={alias}
-          teks={teks}
-          biyografi={biyografi}
-          esByografiOuve={esByografiOuve}
-          meteEsByografiOuve={meteEsByografiOuve}
-        />
-      )}
-    </Root>
+        {esByografiOuve && (
+          <AwtisBiyografi
+            alias={alias}
+            teks={teks}
+            biyografi={biyografi}
+            esByografiOuve={esByografiOuve}
+            meteEsByografiOuve={meteEsByografiOuve}
+          />
+        )}
+      </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>