Fixed the SBD section for mobile devices

src/app/page.css

@@ -792,6 +792,20 @@ body {
   .friend-iframe-container {
     aspect-ratio: 16 / 9;
   }
+
+  .gym-grid {
+    gap: 12px;
+    padding: 16px;
+  }
+
+  .gym-item {
+    padding: 12px;
+    gap: 8px;
+  }
+
+  .gym-weight {
+    font-size: 1.4rem;
+  }
 }
 
 @media (max-width: 520px) {
@@ -808,7 +822,28 @@ body {
   }
 
   .gym-grid {
-    grid-template-columns: 1fr;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 4px;
+    padding: 12px 4px;
+  }
+
+  .gym-item {
+    padding: 8px 2px;
+    gap: 4px;
+    min-width: 0;
+  }
+
+  .gym-icon {
+    max-width: 32px !important;
+  }
+
+  .gym-label {
+    font-size: 0.55rem;
+    letter-spacing: 0.02em;
+  }
+
+  .gym-weight {
+    font-size: 0.95rem;
   }
 
   .project-grid {
@@ -949,11 +984,9 @@ body {
 .gym-icon {
   opacity: 0.9;
   transition: opacity 0.3s ease, filter 0.3s ease;
-}
+  width: 100%;
-
+  max-width: 48px;
-.gym-item:hover .gym-icon {
+  height: auto;
-  opacity: 1;
-  filter: drop-shadow(0 0 6px rgba(250, 189, 47, 0.5));
 }
 
 .gym-label {