Second pass at responsive top banner

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

@@ -9,9 +9,6 @@ require('./top-banner.scss');
 
 const TopBanner = () => (
     <TitleBanner className="beta-top-banner">
-        <div className="beta-banner-image left">
-            <img src="/images/beta/left-illustration.png" />
-        </div>
         <FlexRow className="beta-top-container column">
             <h1 className="beta-header">The Next Generation of Scratch</h1>
             <h3 className="beta-copy">Try out the beta version of Scratch 3.0</h3>
@@ -20,9 +17,14 @@ const TopBanner = () => (
                 href="https://beta.scratch.mit.edu/"
             >Try it!</a>
         </FlexRow>
+        <div className="beta-banner-images">
+            <div className="beta-banner-image left">
+                <img src="/images/beta/left-illustration.png" />
+            </div>
             <div className="beta-banner-image right">
                 <img src="/images/beta/right-illustration.png" />
             </div>
+        </div>
     </TitleBanner>
 );
 

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

 @import "../../../colors";
+@import "../../../frameless";
 
 .beta-top-banner {
     display: flex;
+    position: relative;
     background-color: $ui-orange;
     background-image: url("/images/beta/bg-pattern.png");
     background-size: cover;
@@ -11,12 +13,22 @@
     justify-content: center;
 
     .beta-top-container {
-        flex-shrink: 0;
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        margin: auto;
+        height: 15rem;
+    }
+
+    .beta-banner-images {
+        display: flex;
+        width: 100%;
+        justify-content: space-between;
     }
 
     .beta-banner-image {
         display: flex;
-        min-width: 0;
+        width: 27rem;
         align-self: flex-end;
 
         img {
@@ -46,3 +58,13 @@
         font-size: 1em;
     }
 }
+
+@media only screen and (min-width: $tablet) and (max-width: 1150px) {
+    .beta-top-banner {
+        height: 23rem;
+
+        .beta-banner-image {
+            width: 20rem;
+        }
+    }
+}