From 2f2155a47c17f9a33d27a273806ed18467bcbdf1 Mon Sep 17 00:00:00 2001
From: Alice Russell <alice@heysparkbox.com>
Date: Thu, 9 Dec 2021 15:54:28 -0600
Subject: [PATCH 1/5] fix: change article tags to divs

---
 components/apprentice-qualities/apprentice-qualities.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/apprentice-qualities/apprentice-qualities.js b/components/apprentice-qualities/apprentice-qualities.js
index f5a78ea..1f1a05b 100644
--- a/components/apprentice-qualities/apprentice-qualities.js
+++ b/components/apprentice-qualities/apprentice-qualities.js
@@ -9,7 +9,7 @@ const ApprenticeQualities = () => (
         alt="The three qualities sparkbox looks for in apprentices: Passion, Character, and Initiative."
         className={styles['apprentice-qualities__image']}
       />
-      <article className={styles['apprentice-qualities__article']}>
+      <div className={styles['apprentice-qualities__article']}>
         <p className={`${styles.primary} ${styles['apprentice-qualities__article-heading']}`}>
           What we look for
         </p>
@@ -41,7 +41,7 @@ const ApprenticeQualities = () => (
             provide anything and everything you can that will convince us you are that geek.
           </p>
         </div>
-      </article>
+      </div>
     </div>
   </section>
 );

From f9729df1029405a74a15ad1b1816d19a43ed0d8b Mon Sep 17 00:00:00 2001
From: Alice Russell <alice@heysparkbox.com>
Date: Thu, 9 Dec 2021 16:02:25 -0600
Subject: [PATCH 2/5] chisel: fix initial spacing and styling for
 apprentice-qualities component

---
 .../apprentice-qualities.js                   | 22 ++++-----
 .../apprentice-qualities.module.scss          | 48 +++++++++++++------
 2 files changed, 44 insertions(+), 26 deletions(-)

diff --git a/components/apprentice-qualities/apprentice-qualities.js b/components/apprentice-qualities/apprentice-qualities.js
index 1f1a05b..92e5ffd 100644
--- a/components/apprentice-qualities/apprentice-qualities.js
+++ b/components/apprentice-qualities/apprentice-qualities.js
@@ -4,21 +4,16 @@ import styles from './apprentice-qualities.module.scss';
 const ApprenticeQualities = () => (
   <section className={styles['apprentice-qualities']}>
     <div className={styles['apprentice-qualities__main']}>
-      <img
-        src="/apprentice-qualities.svg"
-        alt="The three qualities sparkbox looks for in apprentices: Passion, Character, and Initiative."
-        className={styles['apprentice-qualities__image']}
-      />
-      <div className={styles['apprentice-qualities__article']}>
-        <p className={`${styles.primary} ${styles['apprentice-qualities__article-heading']}`}>
+      <article className={styles['apprentice-qualities__article']}>
+        <h2 className={`${styles.primary} ${styles['apprentice-qualities__article-heading']}`}>
           What we look for
-        </p>
-        <h2 className={
+        </h2>
+        <h3 className={
           styles['apprentice-qualities__article-subheading']
         }
         >
           Qualities of Successful Apprentices
-        </h2>
+        </h3>
         <div className={styles['apprentice-qualities__article-text']}>
           <p>
             We build responsive, standards-compliant, content-focused,
@@ -41,7 +36,12 @@ const ApprenticeQualities = () => (
             provide anything and everything you can that will convince us you are that geek.
           </p>
         </div>
-      </div>
+        <img
+          src="/apprentice-qualities.svg"
+          alt="The three qualities sparkbox looks for in apprentices: Passion, Character, and Initiative."
+          className={styles['apprentice-qualities__image']}
+        />
+      </article>
     </div>
   </section>
 );
diff --git a/components/apprentice-qualities/apprentice-qualities.module.scss b/components/apprentice-qualities/apprentice-qualities.module.scss
index c4e5978..5a1d45b 100644
--- a/components/apprentice-qualities/apprentice-qualities.module.scss
+++ b/components/apprentice-qualities/apprentice-qualities.module.scss
@@ -8,6 +8,7 @@
 
 .apprentice-qualities {
   @include vertical-section-spacing();
+  @include horizontal-section-spacing();
   width: $component-width;
 
   &__main {
@@ -47,7 +48,7 @@
   }
 }
 
-@media (min-width: 50rem) {
+@media (min-width: 48rem) {
   .apprentice-qualities {
     min-height: 50rem;
     position: relative;
@@ -60,9 +61,9 @@
     background-repeat: repeat-x;
     background-size: 20rem;
     background-position:
-      -8rem 0,
-      2rem 17.4rem,
-      -8rem 34.7rem;
+      $medium-screen-padding+12rem 0,
+      $medium-screen-padding+2rem  17.4rem,
+      $medium-screen-padding+12rem 34.7rem;
 
     &__main {
       display: flex;
@@ -70,30 +71,45 @@
     }
 
     &__image {
+      order: 1;
       display: block;
       position: absolute;
-      left: 1.2rem;
-      top: 14.4rem;
       pointer-events: none;
       width: 21.5rem;
+      top: 6.5rem;
+      left: -23.75rem;
     }
 
     &__article {
-      padding: 2rem;
+      display: flex;
+      flex-direction: column;
       position: absolute;
-      left: 23rem;
+      left: 25rem;
       top: 8rem;
       padding-top: 3rem;
+      padding-right: 1rem;
+
+      &--heading {
+        order: 2;
+      }
+
+      &--subheading {
+        order: 3;
+      }
+
+      &-text {
+        order: 4;
+      }
     }
   }
 }
 
-@media (min-width: 70.25rem) {
+@media (min-width: 62rem) {
   .apprentice-qualities {
     background-position:
-      calc(50% - 16rem) 0,
-      calc(50% - 6rem) 17.3rem,
-      calc(50% - 16rem) 34.7rem;
+      calc(50% - 10rem) 0,
+      50% 17.3rem,
+      calc(50% - 10rem) 34.7rem;
 
     &__main {
       flex-direction: row;
@@ -102,14 +118,16 @@
     }
 
     &__image {
-      position: revert;
-      padding-top: 9.3rem;
+      position: absolute;
+      top: 14.3rem;
+      left: calc(50% - 30.75rem);
     }
 
     &__article {
       position: revert;
+      padding-right:0;
       max-width: 90ch;
-      padding: 5rem 0 0 0;
+      margin-left: 35%;
     }
   }
 }

From 051f27152acf15ea8e7e3de136e6d0787ba88ca9 Mon Sep 17 00:00:00 2001
From: Alice Russell <alice@heysparkbox.com>
Date: Thu, 9 Dec 2021 15:54:28 -0600
Subject: [PATCH 3/5] fix: change article tags to divs

---
 components/apprentice-qualities/apprentice-qualities.js       | 4 ++--
 .../apprentice-qualities/apprentice-qualities.module.scss     | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/components/apprentice-qualities/apprentice-qualities.js b/components/apprentice-qualities/apprentice-qualities.js
index 92e5ffd..306617d 100644
--- a/components/apprentice-qualities/apprentice-qualities.js
+++ b/components/apprentice-qualities/apprentice-qualities.js
@@ -4,7 +4,7 @@ import styles from './apprentice-qualities.module.scss';
 const ApprenticeQualities = () => (
   <section className={styles['apprentice-qualities']}>
     <div className={styles['apprentice-qualities__main']}>
-      <article className={styles['apprentice-qualities__article']}>
+      <div className={styles['apprentice-qualities__article']}>
         <h2 className={`${styles.primary} ${styles['apprentice-qualities__article-heading']}`}>
           What we look for
         </h2>
@@ -41,7 +41,7 @@ const ApprenticeQualities = () => (
           alt="The three qualities sparkbox looks for in apprentices: Passion, Character, and Initiative."
           className={styles['apprentice-qualities__image']}
         />
-      </article>
+      </div>
     </div>
   </section>
 );
diff --git a/components/apprentice-qualities/apprentice-qualities.module.scss b/components/apprentice-qualities/apprentice-qualities.module.scss
index 5a1d45b..0d93aa2 100644
--- a/components/apprentice-qualities/apprentice-qualities.module.scss
+++ b/components/apprentice-qualities/apprentice-qualities.module.scss
@@ -125,7 +125,7 @@
 
     &__article {
       position: revert;
-      padding-right:0;
+      padding-right: 0;
       max-width: 90ch;
       margin-left: 35%;
     }

From e4581663f24544a80a04c29741b4ebc715a20c2d Mon Sep 17 00:00:00 2001
From: Angus Chang <angus@heysparkbox.com>
Date: Mon, 13 Dec 2021 10:58:59 -0800
Subject: [PATCH 4/5] refactor: apprentice qualities padding/spacing

- adjust spacing to match other sections
- adjust background position in tablet view
- update snapshot

FSA21V2-164
---
 __tests__/__snapshots__/snapshot.js.snap      | 22 +++++++++----------
 .../apprentice-qualities.module.scss          | 17 +++++++-------
 2 files changed, 19 insertions(+), 20 deletions(-)

diff --git a/__tests__/__snapshots__/snapshot.js.snap b/__tests__/__snapshots__/snapshot.js.snap
index 64608a1..39bf83e 100644
--- a/__tests__/__snapshots__/snapshot.js.snap
+++ b/__tests__/__snapshots__/snapshot.js.snap
@@ -203,24 +203,19 @@ exports[`renders homepage unchanged 1`] = `
       <div
         className="apprentice-qualities__main"
       >
-        <img
-          alt="The three qualities sparkbox looks for in apprentices: Passion, Character, and Initiative."
-          className="apprentice-qualities__image"
-          src="/apprentice-qualities.svg"
-        />
-        <article
+        <div
           className="apprentice-qualities__article"
         >
-          <p
+          <h2
             className="primary apprentice-qualities__article-heading"
           >
             What we look for
-          </p>
-          <h2
+          </h2>
+          <h3
             className="apprentice-qualities__article-subheading"
           >
             Qualities of Successful Apprentices
-          </h2>
+          </h3>
           <div
             className="apprentice-qualities__article-text"
           >
@@ -234,7 +229,12 @@ exports[`renders homepage unchanged 1`] = `
               We’re looking primarily for those interested in an apprenticeship in web development—frontend, backend, or anything code related. What we’re looking for most, however, are individuals who are excited to make their mark on the web industry. In your application, provide anything and everything you can that will convince us you are that geek.
             </p>
           </div>
-        </article>
+          <img
+            alt="The three qualities sparkbox looks for in apprentices: Passion, Character, and Initiative."
+            className="apprentice-qualities__image"
+            src="/apprentice-qualities.svg"
+          />
+        </div>
       </div>
     </section>
     <section
diff --git a/components/apprentice-qualities/apprentice-qualities.module.scss b/components/apprentice-qualities/apprentice-qualities.module.scss
index 0d93aa2..c7619b2 100644
--- a/components/apprentice-qualities/apprentice-qualities.module.scss
+++ b/components/apprentice-qualities/apprentice-qualities.module.scss
@@ -8,11 +8,11 @@
 
 .apprentice-qualities {
   @include vertical-section-spacing();
-  @include horizontal-section-spacing();
   width: $component-width;
 
   &__main {
-    margin: auto;
+    @include horizontal-section-spacing();
+    box-sizing: border-box;
   }
 
   &__image {
@@ -20,8 +20,6 @@
   }
 
   &__article {
-    padding: 1rem;
-
     &-text {
       font-style: normal;
       font-weight: normal;
@@ -61,9 +59,9 @@
     background-repeat: repeat-x;
     background-size: 20rem;
     background-position:
-      $medium-screen-padding+12rem 0,
-      $medium-screen-padding+2rem  17.4rem,
-      $medium-screen-padding+12rem 34.7rem;
+      $medium-screen-padding+8.2rem 0,
+      $medium-screen-padding+ -1.8rem  17.4rem,
+      $medium-screen-padding+8.2rem 34.7rem;
 
     &__main {
       display: flex;
@@ -87,7 +85,7 @@
       left: 25rem;
       top: 8rem;
       padding-top: 3rem;
-      padding-right: 1rem;
+      padding-right: 3.75rem;
 
       &--heading {
         order: 2;
@@ -126,8 +124,9 @@
     &__article {
       position: revert;
       padding-right: 0;
+      width: 70ch;
       max-width: 90ch;
-      margin-left: 35%;
+      margin-left: 40%;
     }
   }
 }

From 11dd67cfd4c350bdbffa036c94bf022bfe6715a9 Mon Sep 17 00:00:00 2001
From: Alice Russell <alice@heysparkbox.com>
Date: Tue, 14 Dec 2021 14:41:22 -0600
Subject: [PATCH 5/5] fix: apprentice qualities text positioning fix

---
 .../apprentice-qualities/apprentice-qualities.module.scss      | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/components/apprentice-qualities/apprentice-qualities.module.scss b/components/apprentice-qualities/apprentice-qualities.module.scss
index c7619b2..1c6641e 100644
--- a/components/apprentice-qualities/apprentice-qualities.module.scss
+++ b/components/apprentice-qualities/apprentice-qualities.module.scss
@@ -13,6 +13,9 @@
   &__main {
     @include horizontal-section-spacing();
     box-sizing: border-box;
+    justify-content: right;
+    max-width: $max-content-width + ($xlarge-screen-padding * 2);
+    margin: auto;
   }
 
   &__image {