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,9 +21,16 @@ const MiddleBanner = () => (
                 href="https://beta.scratch.mit.edu/"
             >Try it!</a>
         </FlexRow>
-        <div className="beta-banner-image">
+        <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,6 +20,10 @@
         flex-shrink: 0;
     }
 
+    .beta-banner-images {
+        display: flex;
+        align-self: flex-end;
+
         .beta-banner-image {
             display: flex;
             margin-right: 2rem;
@@ -30,6 +35,7 @@
                 height: auto;
             }
         }
+    }
 
     .beta-header,
     .beta-copy,
@@ -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;
+                }
+            }
+        }
     }
 }