Initial work on responsive middle banner

src/views/splash/beta/middle-banner.jsx

@@ -2,9 +2,13 @@ const FormattedMessage = require('react-intl').FormattedMessage;
 const injectIntl = require('react-intl').injectIntl;
 const React = require('react');
 
+const MediaQuery = require('react-responsive').default;
+
 const FlexRow = require('../../../components/flex-row/flex-row.jsx');
 const TitleBanner = require('../../../components/title-banner/title-banner.jsx');
 
+const frameless = require('../../../lib/frameless');
+
 require('./middle-banner.scss');
 
 const MiddleBanner = () => (
@@ -17,8 +21,15 @@ const MiddleBanner = () => (
                 href="https://beta.scratch.mit.edu/"
             >Try it!</a>
         </FlexRow>
-        <div className="beta-banner-image">
-            <img src="/images/beta/right-illustration.png" />
+        <div className="beta-banner-images">
+            <MediaQuery maxWidth={frameless.desktop - 1}>
+                <div className="beta-banner-image left">
+                    <img src="/images/beta/left-illustration.png" />
+                </div>
+            </MediaQuery>
+            <div className="beta-banner-image right">
+                <img src="/images/beta/right-illustration.png" />
+            </div>
         </div>
     </TitleBanner>
 );

src/views/splash/beta/middle-banner.scss

@@ -10,6 +10,7 @@
     background-size: cover;
     padding: 0;
     height: 17rem;
+    overflow: hidden;
     box-sizing: border-box;
     justify-content: center;
 
@@ -19,15 +20,20 @@
         flex-shrink: 0;
     }
 
-    .beta-banner-image {
+    .beta-banner-images {
         display: flex;
-        margin-right: 2rem;
-        min-width: 0;
         align-self: flex-end;
 
-        img {
-            max-width: 100%;
-            height: auto;
+        .beta-banner-image {
+            display: flex;
+            margin-right: 2rem;
+            min-width: 0;
+            align-self: flex-end;
+
+            img {
+                max-width: 100%;
+                height: auto;
+            }
         }
     }
 
@@ -46,9 +52,29 @@
 
 @media only screen and (min-width: $tablet) and (max-width: $desktop - 1) {
     .beta-middle-banner {
+        height: initial;
+        flex-direction: column;
+
         .beta-middle-container {
+            padding-top: 4rem;
+            padding-left: 0;
             align-items: center;
         }
+
+        .beta-banner-images {
+            .beta-banner-image {
+                margin: 0;
+                padding: 0;
+
+                &.left {
+                    margin-left: -2.5rem;
+                }
+
+                &.right {
+                    margin-right: -2.5rem;
+                }
+            }
+        }
     }
 }