spacing and careers page progress

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>

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;
+  }
+
 }