Apply responsive size for cards and images

src/components/molecules/BattlesuitCard.tsx

@@ -24,7 +24,7 @@ const BattlesuitCard = ({ battlesuit, hidden }: BattlesuitCardProps) => {
     <Card
       className={hidden ? 'hidden' : ''}
       sx={{
-        width: [140, 160],
+        width: 120,
         padding: 2,
         margin: 2,
         '&.hidden': {
@@ -39,7 +39,7 @@ const BattlesuitCard = ({ battlesuit, hidden }: BattlesuitCardProps) => {
         <SquareImageBox
           alt={battlesuitName}
           src={`/assets/honkai3rd/battlesuits/portrait-${battlesuit.id}.png`}
-          size={[120, 140]}
+          size={100}
         />
         <Box
           sx={{

src/components/molecules/ElfCard.tsx

@@ -21,7 +21,7 @@ const ElfCard = ({ elf }: ElfCardProps) => {
       sx={{
         m: 2,
         p: 2,
-        width: [140, 160],
+        width: [120],
         '&.hiden': {
           display: 'none',
         },
@@ -31,7 +31,7 @@ const ElfCard = ({ elf }: ElfCardProps) => {
         <SquareImageBox
           alt={elfName}
           src={`/assets/honkai3rd/elfs/icon-${elf.id}.png`}
-          size={[120, 140]}
+          size={[100]}
         />
         <Box
           sx={{

src/components/molecules/StigmataCard.tsx

@@ -20,14 +20,14 @@ const StigmataCard = ({ stigmata }: StigmataCardProps) => {
   return (
     <Card
       sx={{
-        width: '120px',
+        width: [85, 120],
-        padding: 2,
+        padding: [1, 2],
-        margin: 2,
+        margin: [1, 2],
       }}
     >
       <PageLink href={`/honkai3rd/stigmata/${stigmata.id}`}>
         <SquareImageBox
-          size={100}
+          size={[75, 100]}
           alt={stigmataName}
           src={`/assets/honkai3rd/stigmata/icon-${stigmata.id}.png`}
         />

src/components/pages/SingleStigmataPage.tsx

@@ -62,15 +62,15 @@ const SingleStigmataPage = ({
             position: 'relative',
             overflow: 'hidden',
             width: '100%',
-            maxWidth: '600px',
+            maxWidth: [300, 400],
             borderRadius: 4,
           }}
         >
           <Image
             alt={stigmataName}
             src={`/assets/honkai3rd/stigmata/${stigmataData.id}.png`}
-            width={600}
+            width={400}
-            height={600}
+            height={400}
             layout='responsive'
           />
         </Box>

src/pages/honkai3rd/battlesuits/[battlesuitId].tsx

@@ -64,14 +64,14 @@ const BattlesuitShowPage = ({ battlesuit }: BattlesuitShowPageProps) => {
               position: 'relative',
               overflow: 'hidden',
               width: '100%',
-              maxWidth: '600px',
+              maxWidth: [300, 400],
             }}
           >
             <Image
               alt={battlesuitName}
               src={`/assets/honkai3rd/battlesuits/${battlesuit.id}.png`}
-              width={600}
+              width={400}
-              height={600}
+              height={400}
               layout='responsive'
             />
           </Box>

src/pages/honkai3rd/elfs/[elfId].tsx

@@ -45,8 +45,8 @@ const ElfShowPage = ({ elf }: ElfShowPageProps) => {
             sx={{
               position: 'relative',
               overflow: 'hidden',
-              width: '400px',
+              width: [300, 400],
-              height: '400px',
+              height: [300, 400],
               borderRadius: 4,
             }}
           >