Add picture to introduction section for mobile

src/hbs/partials/components/introduction.hbs

@@ -6,6 +6,11 @@
       class="introduction__header"
     }}
 
+    <div class="introduction__img">
+      {{svg 'images/introduction.svg' }}
+    </div>
+
+    <div class="introduction__wrapper">
       <div class="introduction__subheader text--large">
         {{{ introduction.subheader }}}
       </div>
@@ -16,10 +21,6 @@
             <p>{{paragraph}}</p>
           {{/each}}
         </div>
-
-      <div class="introduction__img">
-        {{svg 'images/introduction.svg' }}
-      </div>
       </div>
 
       <div class="introduction__button">
@@ -36,4 +37,5 @@
         </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;
     }
 
-  &__content {
-    display: flex;
+    @media #{$screen-lg} {
+      flex-flow: row wrap;
+    }
+  }
+
+  &__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;