Reduce index stats cards

components/stats/kat-stats.js

@@ -2,11 +2,14 @@ import PropTypes from 'prop-types'
 import Card from '@mui/material/Card'
 import CardContent from '@mui/material/CardContent'
 import Typography from '@mui/material/Typography'
+import Grid from '@mui/material/Grid'
+
 import TraductionsStats from './traductions-stats'
 
 export default function KatStats({emoji, value, total}) {
   return (
-    <Card sx={{marginBottom: 2}} variant='outlined'>
+    <Grid item xs={12} md={6}>
+      <Card variant='outlined'>
         <CardContent>
           <Typography gutterBottom align='center' variant='h6'>
             <span dangerouslySetInnerHTML={{__html: emoji}} />
@@ -14,6 +17,7 @@ export default function KatStats({emoji, value, total}) {
           <TraductionsStats value={value} total={total} />
         </CardContent>
       </Card>
+    </Grid>
   )
 }
 

pages/index.js

@@ -80,11 +80,11 @@ export default function Home({errorCode, errorMessage, stats}) {
             <KatKayLa tit='Paroles' kantite={stats.countParole} href='/paroles' as='/paroles' />
             <KatKayLa tit='Artistes' kantite={stats.countArtiste} href='/awtis?paj&paj=1' as='/awtis/paj/1' />
           </Grid>
-          <Box marginBottom={3}>
+          <Grid container spacing={2} marginBottom={3}>
             {statsByLang.map(({code, value, emoji}) => (
               <KatStats key={code} emoji={emoji} value={value} total={stats.countParole} />
             ))}
-          </Box>
+          </Grid>
         </Container>
         <Footer />
       </Box>