Further adjusted mobile styles

components/BottomNav.module.css

@@ -23,20 +23,12 @@
   align-items: center;
 }
 
-@media screen and (max-width: 768px) {
+.arrow {
-  .subBox {
+  width: 250px;
-    flex-direction: column;
+  height: 20px;
-  }
-
-  .subBoxLeft {
-    flex-direction: column-reverse;
-  }
-
-  .container {
-    justify-content: center;
-  }
 }
 
+
 .item:after {
   content: '';
   position: absolute;
@@ -66,4 +58,38 @@
 
 .left {
   transform: rotate(180deg);
+}
+
+@media screen and (max-width: 768px) {
+  .subBox {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .subBoxLeft {
+    flex-direction: column-reverse;
+    align-items: flex-end;
+  }
+
+
+  .item {
+    font-size: calc(20rem / 16);
+    margin: 0;
+    margin-bottom: 10px;
+  }
+
+  .arrow {
+    width: 200px;
+  }
+}
+
+@media screen and (max-width: 500px) {
+  .container {
+    justify-content: center;
+    gap: 50px;
+  }
+
+  .arrow {
+    width: 200px;
+  }
 }

components/BottomNav.tsx

@@ -42,9 +42,9 @@ interface ArrowProps {
 function Arrow({ isPointRight }: ArrowProps) {
   return (
     <svg
-      width="250px"
+      className={
-      height="20px"
+        (isPointRight ? styles.right : styles.left) + " " + styles.arrow
-      className={isPointRight ? styles.right : styles.left}
+      }
     >
       <defs>
         <marker