Add picture to introduction section for mobile

src/hbs/partials/components/introduction.hbs

@@ -6,34 +6,36 @@
       class="introduction__header"
     }}
 
-    <div class="introduction__subheader text--large">
-      {{{ introduction.subheader }}}
+    <div class="introduction__img">
+      {{svg 'images/introduction.svg' }}
     </div>
 
-    <div class="introduction__content">
-      <div class="introduction__paragraph text--small">
-        {{#each introduction.content as |paragraph|}}
-          <p>{{paragraph}}</p>
-        {{/each}}
+    <div class="introduction__wrapper">
+      <div class="introduction__subheader text--large">
+        {{{ introduction.subheader }}}
       </div>
 
-      <div class="introduction__img">
-        {{svg 'images/introduction.svg' }}
+      <div class="introduction__content">
+        <div class="introduction__paragraph text--small">
+          {{#each introduction.content as |paragraph|}}
+            <p>{{paragraph}}</p>
+          {{/each}}
+        </div>
       </div>
-    </div>
 
-    <div class="introduction__button">
-      {{> components/button
-        label=introduction.button.label
-        outlineColor="#fff"
-        backgroundColor="#000"
-      }}
-    </div>
+      <div class="introduction__button">
+        {{> components/button
+          label=introduction.button.label
+          outlineColor="#fff"
+          backgroundColor="#000"
+        }}
+      </div>
 
-    <div class="introduction__link">
-      <a href="#project">
-        {{ introduction.nextSectionLink }}
-      </a>
+      <div class="introduction__link">
+        <a href="#project">
+          {{ introduction.nextSectionLink }}
+        </a>
+      </div>
     </div>
   </div>
 </section>

src/styles/components/_introduction.scss

@@ -8,23 +8,54 @@
     @include container;
 
     position: relative;
+
+    @media #{$screen-sm} {
+      display: flex;
+      flex-flow: row-reverse wrap;
+    }
+
+    @media #{$screen-lg} {
+      flex-flow: row wrap;
+    }
   }
 
-  &__content {
-    display: flex;
+  &__header {
+    margin: 30px 0;
+
+    @media #{$screen-sm} {
+      flex: 0 1 100%;
+    }
+
+    @media #{$screen-lg} {
+      margin: 80px 0;
+    }
   }
 
   &__img {
-    display: none;
+    margin-bottom: 20px;
+
+    svg {
+      width: 320px;
+    }
 
     @media #{$screen-sm} {
-      display: block;
+      flex: 1 0 50%;
+      max-width: 50%;
+
+      svg {
+        width: 100%;
+      }
+    }
+
+    @media #{$screen-md} {
+      flex: initial;
+      margin-left: auto;
     }
 
     @media #{$screen-lg} {
       position: absolute;
-      top: 60px;
-      right: 0;
+      top: 10%;
+      right: 25px;
     }
 
     @media #{$screen-xlg} {
@@ -33,14 +64,22 @@
     }
   }
 
-  &__header {
-    margin: 30px 0;
-
-    @media #{$screen-lg} {
-      margin: 80px 0;
+  &__wrapper {
+    @media #{$screen-sm} {
+      flex: 1 0 50%;
+      max-width: 50%;
     }
   }
 
+  &__subheader {
+    position: relative;
+    z-index: 2;
+  }
+
+  &__content {
+    display: flex;
+  }
+
   &__button {
     margin-bottom: 30px;
 
@@ -50,11 +89,6 @@
     }
   }
 
-  &__subheader {
-    position: relative;
-    z-index: 2;
-  }
-
   &__link {
     font-size: 12px;
     text-transform: uppercase;