From feb3b6c2ca9cc6161cb8194e93206654a32f3573 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Mon, 2 Jan 2023 04:28:13 -0800
Subject: [PATCH] Smaller updates to responsive character CSS grid

---
 components/CharacterUnit/index.scss |  6 ++++++
 components/JobSection/index.scss    | 29 ++++++++++++++++++++---------
 2 files changed, 26 insertions(+), 9 deletions(-)

diff --git a/components/CharacterUnit/index.scss b/components/CharacterUnit/index.scss
index afac9443..0cf54982 100644
--- a/components/CharacterUnit/index.scss
+++ b/components/CharacterUnit/index.scss
@@ -76,4 +76,10 @@
       }
     }
   }
+
+  .CharacterName {
+    @include breakpoint(phone) {
+      font-size: $font-tiny;
+    }
+  }
 }
diff --git a/components/JobSection/index.scss b/components/JobSection/index.scss
index 6ef18d49..dcdbed48 100644
--- a/components/JobSection/index.scss
+++ b/components/JobSection/index.scss
@@ -1,14 +1,20 @@
 #Job {
   box-sizing: border-box;
   display: flex;
-  margin-bottom: $unit * 3;
+  margin-bottom: $unit-3x;
+  width: 100%;
 
-  @include breakpoint(tablet) {
-    align-items: center;
-    flex-direction: column;
-    gap: $unit;
-    justify-content: center;
-    max-width: 447px;
+  // prettier-ignore
+  @media only screen 
+      and (max-width: 800px) 
+      and (max-height: 920px) 
+      and (-webkit-min-device-pixel-ratio: 2) {
+        align-items: center;
+        flex-direction: column;
+        gap: $unit;
+        justify-content: center;
+        width: 100%;
+        // max-width: 447px;
   }
 
   select {
@@ -60,8 +66,13 @@
     width: $width;
     transition: box-shadow 0.15s ease-in-out;
 
-    @include breakpoint(tablet) {
-      margin-right: 0;
+    // prettier-ignore
+    @media only screen 
+        and (max-width: 800px) 
+        and (max-height: 920px) 
+        and (-webkit-min-device-pixel-ratio: 2) {
+          margin-right: 0;
+          width: 100%;
     }
 
     @include breakpoint(phone) {