From 39cfc90b449234e95b3b04f69c2ea202dfcf3351 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Mon, 26 Dec 2022 16:23:47 -0800
Subject: [PATCH] Mobile hotfix

---
 components/JobSection/index.scss | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/components/JobSection/index.scss b/components/JobSection/index.scss
index dfd34109..f2d49b57 100644
--- a/components/JobSection/index.scss
+++ b/components/JobSection/index.scss
@@ -1,13 +1,20 @@
 #Job {
+  box-sizing: border-box;
   display: flex;
   margin-bottom: $unit * 3;
 
+  @media (max-width: $phone) {
+    flex-direction: column;
+    gap: $unit;
+  }
+
   select {
     flex-grow: 1;
     width: auto;
   }
 
   .JobDetails {
+    box-sizing: border-box;
     display: flex;
     flex-direction: column;
     width: 100%;
@@ -31,9 +38,11 @@
     $height: 252px;
     $width: 447px;
 
+    aspect-ratio: 7/9;
     background: url('/images/background_a.jpg');
     background-size: 500px 281px;
     border-radius: $unit;
+    box-sizing: border-box;
     box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
     display: block;
     flex-grow: 2;
@@ -47,6 +56,13 @@
     width: $width;
     transition: box-shadow 0.15s ease-in-out;
 
+    @media (max-width: $phone) {
+      aspect-ratio: 16/9;
+      margin: 0;
+      width: inherit;
+      height: inherit;
+    }
+
     img {
       -webkit-filter: drop-shadow(4px 4px 8px rgba(0, 0, 0, 0.48));
       filter: drop-shadow(4px 4px 8px rgba(0, 0, 0, 0.48));