From 7e1c65a862436ff488a48983d661dfb5fd9a4c0e Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Wed, 28 Dec 2022 22:18:02 -0800
Subject: [PATCH] Fix CharacterGrid

---
 components/CharacterGrid/index.scss | 12 +++---------
 components/CharacterUnit/index.scss | 15 ++++++++-------
 2 files changed, 11 insertions(+), 16 deletions(-)

diff --git a/components/CharacterGrid/index.scss b/components/CharacterGrid/index.scss
index 42ec275b..e1f3ca07 100644
--- a/components/CharacterGrid/index.scss
+++ b/components/CharacterGrid/index.scss
@@ -7,7 +7,9 @@
 }
 
 #grid_characters {
-  display: flex;
+  display: grid;
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+  gap: $unit;
   margin: 0;
   padding: 0;
   max-width: 761px;
@@ -18,14 +20,6 @@
     width: 100%;
   }
 
-  & > * {
-    margin-right: $unit * 3;
-
-    @include breakpoint(tablet) {
-      margin-right: inherit;
-    }
-  }
-
   & > li:last-child {
     margin: 0;
   }
diff --git a/components/CharacterUnit/index.scss b/components/CharacterUnit/index.scss
index d2f611e5..efc05764 100644
--- a/components/CharacterUnit/index.scss
+++ b/components/CharacterUnit/index.scss
@@ -1,9 +1,10 @@
 .CharacterUnit {
+  align-items: center;
   display: flex;
   flex-direction: column;
   gap: calc($unit / 2);
-  min-height: 320px;
-  max-width: 200px;
+  // min-height: 320px;
+  // max-width: 200px;
   margin-bottom: $unit * 4;
 
   &.editable .CharacterImage:hover {
@@ -35,6 +36,10 @@
     max-width: 131px;
     text-align: center;
     word-wrap: normal;
+
+    @include breakpoint(phone) {
+      font-size: $font-small;
+    }
   }
 
   img {
@@ -54,11 +59,7 @@
     overflow: hidden;
     transition: all 0.18s ease-in-out;
     height: auto;
-    width: 131px;
-
-    @include breakpoint(tablet) {
-      width: 17vw;
-    }
+    // width: 131px;
 
     &:hover .icon svg {
       fill: var(--icon-secondary-hover);