From 6ea13cad82e9d41a3150dcb89aa469ba9c05bbc0 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Thu, 3 Feb 2022 00:10:15 -0800
Subject: [PATCH] Make SummonGrid responsive

---
 components/ExtraSummons/index.scss |  6 +++
 components/SummonGrid/index.scss   |  1 -
 components/SummonUnit/index.scss   | 59 ++++++++++++++++++------------
 3 files changed, 42 insertions(+), 24 deletions(-)

diff --git a/components/ExtraSummons/index.scss b/components/ExtraSummons/index.scss
index 5738570e..9ff4fd60 100644
--- a/components/ExtraSummons/index.scss
+++ b/components/ExtraSummons/index.scss
@@ -10,6 +10,12 @@
     position: relative;
     left: 9px;
 
+    @media (max-width: $medium-screen) {
+        left: auto;
+        max-width: auto;
+        width: 100%;
+    }
+
     & > span {
         color: #825B39;
         display: flex;
diff --git a/components/SummonGrid/index.scss b/components/SummonGrid/index.scss
index 8c994b5e..91ae1f18 100644
--- a/components/SummonGrid/index.scss
+++ b/components/SummonGrid/index.scss
@@ -23,7 +23,6 @@
 
 #grid_summons > li {
     list-style: none;
-    min-height: 180px;
 }
 
 #ExtraSummons #grid_summons > li {
diff --git a/components/SummonUnit/index.scss b/components/SummonUnit/index.scss
index 1f1492be..1570cec7 100644
--- a/components/SummonUnit/index.scss
+++ b/components/SummonUnit/index.scss
@@ -3,6 +3,42 @@
     flex-direction: column;
     gap: 4px;
 
+    &.main .SummonImage,
+    &.friend .SummonImage {
+        aspect-ratio: 182 / 315;
+        width: 182px;
+        height: auto;
+
+        @media (max-width: $medium-screen) {
+            width: 20.3vw;
+        }
+    }
+
+    &.grid {
+        // max-width: 148px;
+        // min-height: 141px;
+        min-height: 180px;
+
+        @media (max-width: $medium-screen) {
+            min-height: 16.5vw;
+        }
+
+        .SummonImage {
+            aspect-ratio: 148 / 111;
+            list-style-type: none;
+            width: 148px;
+            height: auto;
+
+            @media (max-width: $medium-screen) {
+                width: 20vw;
+            }
+        }
+    }
+
+    &.friend {
+        margin-right: 0;
+    }
+
     .SummonImage {
         background: white;
         border: 1px solid rgba(0, 0, 0, 0);
@@ -67,26 +103,3 @@
         z-index: 2;
     }
 }
-
-/* Mainhand */
-.SummonUnit.friend {
-    margin-right: 0;
-}
-
-.SummonUnit.main .SummonImage,
-.SummonUnit.friend .SummonImage {
-    height: 315px;
-    width: 182px;
-}
-
-/* Grid */
-.SummonUnit.grid {
-    max-width: 148px;
-    min-height: 141px;
-}
-
-.SummonUnit.grid .SummonImage {
-    list-style-type: none;
-    height: 111px;
-    width: 148px;
-}
\ No newline at end of file