Improve KatKayLa component

components/kat-kay-la.js

@@ -1,44 +1,29 @@
 import PropTypes from 'prop-types'
 import {useRouter} from 'next/router'
-import {
-  Card,
-  CardContent,
-  CardActionArea,
-  Typography,
-  Grid
-} from '@mui/material'
-import {styled} from '@mui/material/styles'
-
-const PREFIX = 'kat-kay-la'
-
-const classes = {
-  root: `${PREFIX}-root`,
-}
-
-const StyledGrid = styled(Grid)({
-  [`& .${classes.root}`]: {
-    minWidth: 275
-  },
-})
+import Grid from '@mui/material/Grid'
+import Card from '@mui/material/Card'
+import CardActionArea from '@mui/material/CardActionArea'
+import CardContent from '@mui/material/CardContent'
+import Typography from '@mui/material/Typography'
 
 export default function KatKayLa({tit, kantite, href, as}) {
   const router = useRouter()
 
   return (
-    <StyledGrid item xs={12} md={6}>
-      <Card className={classes.root} variant='outlined'>
+    <Grid item xs={12} md={6}>
+      <Card variant='outlined'>
         <CardActionArea onClick={() => router.push(href, as).then(() => window.scrollTo(0, 0))}>
           <CardContent>
-            <Typography gutterBottom style={{fontWeight: 'bold'}} align='center' variant='h4' component='h1'>
+            <Typography style={{fontWeight: 'bold'}} align='center' variant='h5' component='h4'>
               {kantite}
             </Typography>
-            <Typography align='center' variant='h5' component='h2'>
+            <Typography align='center' variant='h6' component='h5'>
               {tit}
             </Typography>
           </CardContent>
         </CardActionArea>
       </Card>
-    </StyledGrid>
+    </Grid>
   )
 }