Small refactoring

components/CharacterGrid/index.scss

@@ -1,4 +1,4 @@
-.CharacterGrid {
+#CharacterGrid {
     display: flex;
     justify-content: center;
 }

components/CharacterGrid/index.tsx

@@ -194,7 +194,7 @@ const CharacterGrid = (props: Props) => {
 
     // Render: JSX components
     return (
-        <div className="CharacterGrid">
+        <div id="CharacterGrid">
             <ul id="grid_characters">
                 {Array.from(Array(numCharacters)).map((x, i) => {
                     return (

components/ExtraSummons/index.scss

@@ -28,6 +28,23 @@
         width: 387px;
     }
 
+    #grid_summons {
+        display: grid;
+        grid-template-columns: auto auto;
+        grid-column-gap: $unit * 2;
+        grid-template-rows: 1fr;
+        grid-row-gap: $unit * 3;
+
+        & > li {
+            list-style: none;
+            min-height: 0;
+
+            .SummonUnit {
+                min-height: 0;
+            }
+        }
+    }
+
     .SummonUnit .SummonImage {
         background: #facea7;
     }

components/SummonGrid/index.scss

@@ -1,4 +1,4 @@
-.SummonGrid {
+#SummonGrid {
     display: grid;
     grid-template-columns: auto auto auto;
     grid-column-gap: $unit * 2;
@@ -11,7 +11,6 @@
         margin-bottom: $unit;
         text-align: center;
     }
-}
 
     #grid_summons {
         display: grid;
@@ -19,16 +18,9 @@
         grid-column-gap: $unit * 2;
         grid-template-rows: 1fr;
         grid-row-gap: $unit * 3;
-}
 
-#grid_summons > li {
+        & > li {
             list-style: none;
         }
-
-#ExtraSummons #grid_summons > li {
-    min-height: 0;
-
-    .SummonUnit {
-        min-height: 0;
     }
 }

components/SummonGrid/index.tsx

@@ -265,7 +265,7 @@ const SummonGrid = (props: Props) => {
     )
     return (
         <div>
-            <div className="SummonGrid">
+            <div id="SummonGrid">
                 { mainSummonElement }
                 { friendSummonElement }
                 { summonGridElement }