Update ExtraWeapons

components/ExtraWeapons/index.scss

@@ -1,14 +1,15 @@
 #ExtraGrid {
   background: var(--extra-purple-bg);
-  border-radius: 8px;
+  border-radius: $card-corner;
   box-sizing: border-box;
-  display: flex;
+  display: grid;
+  grid-template-columns: 1.42fr 3fr;
   justify-content: center;
   margin: 20px auto;
-  max-width: 766px;
+  max-width: calc($grid-width + 20px);
-  padding: 16px 16px 16px 0;
+  padding: $unit-2x $unit-2x $unit-2x 0;
   position: relative;
-  left: 8px;
+  left: $unit;
 
   @include breakpoint(tablet) {
     left: auto;
@@ -16,6 +17,13 @@
     width: 100%;
   }
 
+  @include breakpoint(phone) {
+    display: flex;
+    gap: $unit-2x;
+    padding: $unit-2x;
+    flex-direction: column;
+  }
+
   & > span {
     color: var(--extra-purple-text);
     display: flex;
@@ -24,17 +32,21 @@
     justify-content: center;
     line-height: 1.2;
     font-weight: 500;
-    margin-right: 16px;
     text-align: center;
   }
 
-  .grid_weapons {
+  #ExtraWeapons {
-    display: flex;
+    display: grid;
-    flex-direction: row;
+    gap: $unit-3x;
-    flex-wrap: wrap;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
-    margin: 0;
+
-    padding: 0;
+    @include breakpoint(tablet) {
-    max-width: 528px;
+      gap: $unit-2x;
+    }
+
+    @include breakpoint(phone) {
+      gap: $unit;
+    }
   }
 
   .WeaponUnit .WeaponImage {

components/ExtraWeapons/index.tsx

@@ -23,7 +23,7 @@ const ExtraWeapons = (props: Props) => {
   return (
     <div id="ExtraGrid">
       <span>{t('extra_weapons')}</span>
-      <ul className="grid_weapons">
+      <ul id="ExtraWeapons">
         {Array.from(Array(numWeapons)).map((x, i) => {
           return (
             <li key={`grid_unit_${i}`}>

components/WeaponGrid/index.scss

@@ -1,9 +1,10 @@
 #WeaponGrid {
+  align-items: center;
   display: flex;
+  flex-direction: column;
   justify-content: center;
 
   #MainGrid {
-    aspect-ratio: 2/1;
     display: grid;
     gap: $unit-3x;
     grid-template-columns: 1.278fr 3fr;
@@ -23,7 +24,7 @@
     }
   }
 
-  .Weapons {
+  #Weapons {
     display: grid; /* make the right-images container a grid */
     grid-template-columns: repeat(
       3,
@@ -42,9 +43,9 @@
     @include breakpoint(phone) {
       gap: $unit;
     }
+  }
 
-    li {
+  li {
-      list-style: none;
+    list-style: none;
-    }
   }
 }

components/WeaponGrid/index.tsx

@@ -361,7 +361,7 @@ const WeaponGrid = (props: Props) => {
       {incompatibleAlert()}
       <div id="MainGrid">
         {mainhandElement}
-        <ul className="Weapons">{weaponGridElement}</ul>
+        <ul id="Weapons">{weaponGridElement}</ul>
       </div>
 
       {(() => {