fix(docs): reserve space for the masthead ad

The asynchronously loaded desktop ad shifts the centered masthead content
when it appears.

Wrap the ad in a stable container and reserve its minimum height at medium
viewports and above so the masthead keeps its initial position.

Author: mdo

site/src/components/home/MastHead.astro

@@ -50,7 +50,9 @@ import CodeCopy from '@components/shortcodes/CodeCopy.astro'
         <span class="d-none md:d-inline">&middot;</span>
         <a href="/docs/versions/" class="theme-secondary underline-50 underline-secondary text-nowrap">All releases</a>
       </div>
-      <Ads />
+      <div class="bd-masthead-ad">
+        <Ads />
+      </div>
     </div>
   </div>
 </div>

site/src/scss/_masthead.scss

@@ -28,9 +28,14 @@
       background-color: transparent;
     }
 
-    #carbonads { // stylelint-disable-line selector-max-id
+    .bd-masthead-ad {
+      width: 100%;
       max-width: 400px;
       margin-block-start: 3rem;
+
+      @include media-breakpoint-up(md) {
+        min-height: 160px;
+      }
     }
 
     @include media-breakpoint-up(md) {