fix page width on mobile

Author: tyrasd

_includes/about.html

@@ -10,7 +10,7 @@ <h1 class="space-bottom2">State of the Map 2025</h1>
             <p>
               Watch the conference teaser to get ready for SotM 2025!
             </p>
-            <iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/Q5dyxy6YxG0?si=66s53Bi5HnWr4fex" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+            <iframe class="youtube-teaser" src="https://www.youtube-nocookie.com/embed/Q5dyxy6YxG0?si=66s53Bi5HnWr4fex" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
           </div>
         </div>
         <div class="col4 clearfix contain">

_includes/css/sotm.css

@@ -336,6 +336,9 @@ header.intro .credits {
         background-position-x: right 20%;
         height: 420px
     }
+    header.intro h1 {
+      display: none;
+    }
     header.intro .credits {
         position: absolute;
     }
@@ -348,6 +351,11 @@ header.intro .credits {
     header.intro .logo a.btn {
         visibility: hidden;
     }
+
+    .youtube-teaser {
+      width: 100%;
+      height: auto;
+    }
 }
 
 @media(min-width:767px) {
@@ -367,6 +375,11 @@ header.intro .credits {
     .intro .intro-body .attending img {
         float: right;
     }
+
+    .youtube-teaser {
+      width: 560px;
+      height: 315px;
+    }
 }
 
 .btn-circle {