refactor: images sizing

.eslintrc.cjs

@@ -20,6 +20,7 @@ module.exports = {
     "max-len": "error",
     "no-shadow": "off",
     "no-unused-vars": "off",
+    "no-useless-return": "error",
     "object-shorthand": "error",
     "prefer-const": "error",
     "prefer-template": "error",

src/components/Intro_panel/index.tsx

@@ -38,6 +38,11 @@ const IntroPanel = (props: Props) => {
       justifyContent="space-between"
       minHeight="100%"
       overflow="hidden"
+      sx={{
+        [theme.breakpoints.down("tablet")]: {
+          maxWidth: "calc(100vw - 40px)",
+        },
+      }}
     >
       <Box p="24px">
         <Stack

src/components/cardSwiper/index.tsx

@@ -1,5 +1,5 @@
 import { Box, Stack, useTheme } from "@mui/material";
-import Image from "next/image";
+import Image from "next/legacy/image";
 import type { CSSProperties } from "react";
 import SwiperCore, { Navigation } from "swiper";
 import { Swiper, SwiperSlide } from "swiper/react";

src/components/intro_card/index.tsx

@@ -33,6 +33,7 @@ const IntroCard = (props: Props) => {
         display: "flex",
         flexDirection: "column",
         borderRadius: "24px",
+        maxWidth: "calc(100vw - 40px)",
         background: "#FFF",
         boxShadow:
           "0px 10px 32px -4px rgba(96, 60, 238, 0.10), 0px 6px 14px -6px rgba(96, 60, 238, 0.28)",