Show demo only at 760+px (#33529)

sass/homeassistant/homepage/_hero_unit.scss

@@ -8,7 +8,7 @@
   padding-bottom: 0;
   margin-top: -88px;
   margin-bottom: 24px;
-  padding-top: 88px; 
+  padding-top: 88px;
   overflow: hidden;
   border-bottom: 1px solid rgba(0, 0, 0, 0.1);
   max-height: 1080px;
@@ -84,7 +84,7 @@
     // animation-duration: 3s;
     // animation-iteration-count: infinite;
     // animation-direction: alternate;
-        
+
     @media only screen and (max-height: 720px) {
       border-bottom: 0;
       margin-bottom: -8px;
@@ -114,7 +114,7 @@
     .lead {
       font-size: 1.15rem;
     }
-    
+
     .hero-buttons a {
       &.primary {
         font-size: 1.25rem;
@@ -123,15 +123,19 @@
   }
 }
 
-@media only screen and (max-width: $palm-end) {
+@media only screen and (max-width: 760px) {
   .hero {
-    
+    .flex {
+      flex-direction: column;
+    }
+
     #HAdemo {
       display: none;
     }
-  
+
     #HAdemoScreenshot {
       display: block;
     }
+
   }
-}
+}

source/_includes/site/hero_unit.html

@@ -1,10 +1,10 @@
 <div class="hero">
   <div class="grid-wrapper">
     <div class="grid flex">
-      <div class="grid__item flex__item three-fifths lap-one-half palm-one-whole">
+      <div class="grid__item flex__item three-fifths lap-one-whole palm-one-whole">
       {% include custom/welcome.html %}
       </div>
-      <div class="grid__item flex__item two-fifths lap-one-half palm-one-whole">
+      <div class="grid__item flex__item two-fifths lap-one-whole palm-one-whole">
         <iframe id="HAdemo" title="Home Assistant Demo"
           src="https://demo.home-assistant.io/?frontpage">
         </iframe>

source/index.html

@@ -326,7 +326,7 @@ feedback: false
 
 
     <!-- Sponsor section -->
-    
+
     <section class="sponsor">
       <div class="sponsored-by grid__item one-whole">
         <h2>The Home Assistant project is sponsored by</h2>