fix: steptwo mobile styles

src/pages/startPage/CardWithImage.tsx

@@ -1,6 +1,5 @@
 import { Box, Typography, useTheme } from "@mui/material";
 
-
 interface Props {
   image: string;
   text: string;
@@ -11,18 +10,16 @@ export default function CardWithImage({ image, text, border }: Props) {
   const theme = useTheme();
 
   return (
-        <Box sx={{
+    <Box
+      sx={{
+        minWidth: "315px",
         flexGrow: 1,
         borderRadius: "12px",
         border: { border },
         backgroundColor: "white",
-            boxShadow: `0px 100px 309px rgba(210, 208, 225, 0.24), 
+        boxShadow: "0 10px 15px rgba(0, 0, 0, 0.1)",
-                        0px 41.7776px 129.093px rgba(210, 208, 225, 0.172525),
+      }}
-                        0px 22.3363px 69.0192px rgba(210, 208, 225, 0.143066),
+    >
-                        0px 12.5216px 38.6916px rgba(210, 208, 225, 0.12), 
-                        0px 6.6501px 20.5488px rgba(210, 208, 225, 0.0969343),
-                        0px 2.76726px 8.55082px rgba(210, 208, 225, 0.0674749)`,
-        }}>
       <img
         style={{
           width: "100%",
@@ -32,10 +29,9 @@ export default function CardWithImage({ image, text, border }: Props) {
         src={image}
         alt="card"
       />
-            <Typography
+      <Typography color={theme.palette.grey3.main} p="20px">
-                color={theme.palette.grey3.main}
+        {text}
-                p="20px"
+      </Typography>
-            >{text}</Typography>
     </Box>
   );
 }

src/pages/startPage/steptwo.tsx

@@ -1,4 +1,10 @@
-import {Box, Button, Typography} from "@mui/material";
+import {
+  Box,
+  Button,
+  Typography,
+  useTheme,
+  useMediaQuery,
+} from "@mui/material";
 import CardWithImage from "./CardWithImage";
 import cardImage1 from "../../assets/card-1.png";
 import cardImage2 from "../../assets/card-2.png";
@@ -8,40 +14,79 @@ import {useParams} from "react-router-dom";
 
 export default function Steptwo() {
   const params = Number(useParams().quizId);
-    const {listQuizes, updateQuizesList} = quizStore()
+  const { listQuizes, updateQuizesList } = quizStore();
-    return (
+  const theme = useTheme();
-        <Box sx={{
+  const isSmallMonitor = useMediaQuery(theme.breakpoints.down(1300));
-            mt: "60px",
-        }}>
-            <Typography variant="h5">Стартовая страница</Typography>
 
-            <Box sx={{
+  return (
+    <Box sx={{ mt: "60px" }}>
+      <Typography variant="h5">Стартовая страница</Typography>
+      <Box
+        sx={{
+          overflowX: "scroll",
+          paddingBottom: "15px",
+          "&::-webkit-scrollbar": { width: 0 },
+        }}
+      >
+        <Box
+          sx={{
+            minWidth: "950px",
             display: "flex",
             gap: "3.4%",
             mt: "40px",
-            }}>
+            padding: isSmallMonitor ? "0 15px 15px" : 0,
-                <Button variant='text'
-                        onClick={() => {
-                            updateQuizesList(params, {startpage: "standard"})
           }}
         >
-                    <CardWithImage image={cardImage1} text="Standard" border={listQuizes[params].startpage === "standard" ? "1px solid #7E2AEA" : "none"} />
+          <Button
-                </Button>
+            variant="text"
-                <Button variant='text'
             onClick={() => {
-                                updateQuizesList(params, {startpage: "expanded"})
+              updateQuizesList(params, { startpage: "standard" });
             }}
           >
-                    <CardWithImage image={cardImage2} text="Expanded" border={listQuizes[params].startpage === "expanded" ? "1px solid #7E2AEA" : "none"}/>
+            <CardWithImage
-                </Button>
+              image={cardImage1}
-                <Button variant='text'
+              text="Standard"
-                            onClick={() => {
+              border={
-                                updateQuizesList(params, {startpage: "centered"})
+                listQuizes[params].startpage === "standard"
-                            }}
+                  ? "1px solid #7E2AEA"
-                >
+                  : "none"
-                    <CardWithImage image={cardImage3} text="Centered" border={listQuizes[params].startpage === "centered" ? "1px solid #7E2AEA" : "none"}/>
+              }
-                </Button>
+            />
-            </Box>
+          </Button>
-        </Box>
+          <Button
-    )
+            variant="text"
+            onClick={() => {
+              updateQuizesList(params, { startpage: "expanded" });
+            }}
+          >
+            <CardWithImage
+              image={cardImage2}
+              text="Expanded"
+              border={
+                listQuizes[params].startpage === "expanded"
+                  ? "1px solid #7E2AEA"
+                  : "none"
+              }
+            />
+          </Button>
+          <Button
+            variant="text"
+            onClick={() => {
+              updateQuizesList(params, { startpage: "centered" });
+            }}
+          >
+            <CardWithImage
+              image={cardImage3}
+              text="Centered"
+              border={
+                listQuizes[params].startpage === "centered"
+                  ? "1px solid #7E2AEA"
+                  : "none"
+              }
+            />
+          </Button>
+        </Box>
+      </Box>
+    </Box>
+  );
 }