From 6ec995854238b0a046bea16161ed2691bebf08b2 Mon Sep 17 00:00:00 2001
From: Thomas Smith <49042513+tsmitty11@users.noreply.github.com>
Date: Tue, 18 Oct 2022 17:22:54 -0400
Subject: [PATCH] spacing and careers page progress

---
 src/layouts/page/careers.html |   4 +-
 src/static/css/spacing.css    | 120 ++++++++++++++++++++++++++++++++++
 2 files changed, 122 insertions(+), 2 deletions(-)

diff --git a/src/layouts/page/careers.html b/src/layouts/page/careers.html
index 628bdf9..5e39b19 100644
--- a/src/layouts/page/careers.html
+++ b/src/layouts/page/careers.html
@@ -29,7 +29,7 @@
         </button>
       </h2>
       <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
-        <div class="accordion-body">
+        <div class="accordion-body two-boxes">
           <p>Employment type: <span id="typeOne"></span></p>
           <p>Department: <span id="deptOne"></span></p>
           <p>Location: <span id="locOne"></span></p>
@@ -72,7 +72,7 @@
 
 <!-- Why Work at tea -->
 <div class="row teal-bg">
-  <div class="container">
+  <div class="container two-boxes">
     <div class="row">
       <div class="col">
         <h3 class="black text-center">Why work @ tea?</h3>
diff --git a/src/static/css/spacing.css b/src/static/css/spacing.css
index 37da0c9..de91ffc 100644
--- a/src/static/css/spacing.css
+++ b/src/static/css/spacing.css
@@ -19,6 +19,30 @@
     padding-bottom: 4.185vw;
   }
 
+  .one-box-down{
+    margin-bottom: 4.185vw;
+  }
+
+  .two-boxes-down{
+    margin-bottom: 8.371vw;
+  }
+
+  .three-boxes-down{
+    margin-bottom: 12.556vw;
+  }
+
+  .one-box-up{
+    margin-top: 4.185vw;
+  }
+
+  .two-boxes-up{
+    margin-top: 8.371vw;
+  }
+
+  .three-boxes-up{
+    margin-top: 12.556vw;
+  }
+
 }
 
 @media only screen and (min-width: 992px) and (max-width: 1200px) {
@@ -38,6 +62,30 @@
     padding-bottom: 5vw;
   }
 
+  .one-box-down{
+    margin-bottom: 5vw;
+  }
+
+  .two-boxes-down{
+    margin-bottom: 10vw;
+  }
+
+  .three-boxes-down{
+    margin-bottom: 15vw;
+  }
+
+  .one-box-up{
+    margin-top: 5vw;
+  }
+
+  .two-boxes-up{
+    margin-top: 10vw;
+  }
+
+  .three-boxes-up{
+    margin-top: 15vw;
+  }
+
 }
 
 @media only screen and (min-width: 768px) and (max-width: 992px) {
@@ -57,6 +105,30 @@
     padding-bottom: 5.141vw;
   }
 
+  .one-box-down{
+    margin-bottom: 5.141vw;
+  }
+
+  .two-boxes-down{
+    margin-bottom: 10.282vw;
+  }
+
+  .three-boxes-down{
+    margin-bottom: 15.423vw;
+  }
+
+  .one-box-up{
+    margin-top: 5.141vw;
+  }
+
+  .two-boxes-up{
+    margin-top: 10.282vw;
+  }
+
+  .three-boxes-up{
+    margin-top: 15.423vw;
+  }
+
 }
 
 @media only screen and (min-width: 576px) and (max-width: 768px) {
@@ -76,6 +148,30 @@
     padding-bottom: 6.771vw;
   }
 
+  .one-box-down{
+    margin-bottom: 6.771vw;
+  }
+
+  .two-boxes-down{
+    margin-bottom: 13.542vw;
+  }
+
+  .three-boxes-down{
+    margin-bottom: 20.313vw;
+  }
+
+  .one-box-up{
+    margin-top: 6.771vw;
+  }
+
+  .two-boxes-up{
+    margin-top: 13.542vw;
+  }
+
+  .three-boxes-up{
+    margin-top: 20.313vw;
+  }
+
 }
 
 @media only screen and (max-width: 576px) {
@@ -95,4 +191,28 @@
     padding-bottom: 9.722vw;
   }
 
+  .one-box-down{
+    margin-bottom: 9.722vw;
+  }
+
+  .two-boxes-down{
+    margin-bottom: 19.444vw;
+  }
+
+  .three-boxes-down{
+    margin-bottom: 29.167vw;
+  }
+
+  .one-box-up{
+    margin-top: 9.722vw;
+  }
+
+  .two-boxes-up{
+    margin-top: 19.444vw;
+  }
+
+  .three-boxes-up{
+    margin-top: 29.167vw;
+  }
+
 }