Make CharacterGrid responsive

components/CharacterGrid/index.scss

@@ -5,15 +5,21 @@
 
 #grid_characters {
     display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
     margin: 0;
     padding: 0;
-    width: 761px;
+    max-width: 761px;
+
+    @media (max-width: $medium-screen) {
+        justify-content: space-between;
+        width: 100%;
+    }
 
     & > * {
-        margin-bottom: 24px;
+        margin-right: $unit * 3;
-        margin-right: 24px;
+
+        @media (max-width: $medium-screen) {
+            margin-right: inherit;
+        }
     }
 
     & > li:last-child {

components/CharacterUnit/index.scss

@@ -3,9 +3,46 @@
     flex-direction: column;
     gap: 4px;
     max-width: 200px;
-}
 
-.CharacterUnit .CharacterImage {
+    &.editable .CharacterImage:hover {
+        border: 1px solid rgba(0, 0, 0, 0.1);
+        box-shadow: rgba(0, 0, 0, 0.14) 0px 0px 14px;
+        cursor: pointer;
+        transform: $scale-tall;
+    }
+
+    &.filled h3 {
+        display: block;
+    }
+
+    &.filled ul {
+        display: flex;
+    }
+
+    h3,
+    ul {
+        display: none;
+    }
+
+    h3 {
+        color: #333;
+        font-size: $font-regular;
+        font-weight: 500;
+        margin: 0;
+        max-width: 131px;
+        text-align: center;
+        word-wrap: normal;
+    }
+
+    img {
+        position: relative;
+        width: 100%;
+        z-index: 2;
+    }
+    
+
+    .CharacterImage {
+        aspect-ratio: 131 / 238;
         background: white;
         border: 1px solid rgba(0, 0, 0, 0);
         border-radius: 8px;
@@ -14,47 +51,18 @@
         justify-content: center;
         overflow: hidden;
         transition: all 0.18s ease-in-out;
-    height: 268px;
+        height: auto;
         width: 131px;
-}
 
-.CharacterUnit.editable .CharacterImage:hover {
+        @media (max-width: $medium-screen) {
-    border: 1px solid rgba(0, 0, 0, 0.1);
+            width: 17vw;
-    box-shadow: rgba(0, 0, 0, 0.14) 0px 0px 14px;
+        }
-    cursor: pointer;
-    transform: $scale-tall;
-}
 
-.CharacterUnit.filled h3 {
+        &:hover .icon {
-    display: block;
+            color: #555;
-}
+        }
 
-.CharacterUnit.filled ul {
+        .icon {
-    display: flex;
-}
-
-.CharacterUnit h3,
-.CharacterUnit ul {
-    display: none;
-}
-
-.CharacterUnit h3 {
-    color: #333;
-    font-size: $font-regular;
-    font-weight: 500;
-    margin: 0;
-    max-width: 131px;
-    text-align: center;
-    word-wrap: normal;
-}
-
-.CharacterUnit img {
-    position: relative;
-    width: 100%;
-    z-index: 2;
-}
-
-.CharacterImage .icon {
             position: absolute;
             height: 20px;
             width: 20px;
@@ -63,8 +71,6 @@
             svg {
                 fill: #c9c9c9;
             }
-}
+        }
-
+    }
-.CharacterImage:hover .icon {
-    color: #555;
 }

components/WeaponGrid/index.scss

@@ -2,10 +2,6 @@
     display: flex;
     justify-content: center;
 
-    @media (max-width: $medium-screen) {
-        
-    }
-    
     .grid_weapons {
         display: grid;
         grid-template-columns: 1fr 1fr 1fr;