Improve DenyeTeks component style

components/teks/denye-teks.js

@@ -4,6 +4,7 @@ import PropTypes from 'prop-types'
 import Container from '@mui/material/Container'
 import Grid from '@mui/material/Unstable_Grid2'
 import Typography from '@mui/material/Typography'
+import useMediaQuery from '@mui/material/useMediaQuery'
 
 import {styled} from '@mui/material/styles'
 
@@ -15,17 +16,20 @@ const classes = {
   container: `${PREFIX}-container`
 }
 
-const Root = styled('div')(() => ({
+const Root = styled('div')(props => ({
   [`&.${classes.container}`]: {
-    marginTop: '1em',
+    marginTop: '4em',
-    marginBottom: '2em'
+    marginBottom: '2em',
+    marginLeft: props.isMobile ? '' : '240px',
   }
 }))
 
 export default function DenyeTeks({denyeTeks}) {
+  const isMobile = useMediaQuery('(max-width:600px)')
+
   return (
-    <Root className={classes.container}>
+    <Root isMobile={isMobile} className={classes.container}>
-      <Container>
+      <Container align='center'>
         {denyeTeks.length === 0 && (
           <Container sx={{marginTop: 2}} align='center'>
             <Typography sx={{fontWeight: 'bold'}} variant='h6' component='h4'>