Shrink QR code on EN WNP96 [#11070] (#11101)

bedrock/firefox/templates/firefox/whatsnew/includes/fx96-en/qr.html

@@ -7,6 +7,6 @@
 <div class="mzp-c-emphasis-box">
   <h3>Scan the QR code to get started</h3>
   <div class="qr-code-wrapper">
-    <img id="firefox-qr" src="{{ static('img/firefox/whatsnew/whatsnew96-en/qr-firefox.svg') }}" alt="Scan the QR code to get Firefox on mobile">
+    <img id="firefox-qr" src="{{ static('img/firefox/whatsnew/whatsnew96-en/qr-firefox.svg') }}" alt="Scan the QR code to get Firefox on mobile" width="180" height="180">
   </div>
 </div>

media/css/firefox/whatsnew/whatsnew-96-en-mobile.scss

@@ -15,21 +15,8 @@ $image-path: '/media/protocol/img';
 // Main content
 
 .c-main-content {
-    .mzp-c-split-media {
-        @include at2x('/media/img/firefox/whatsnew/whatsnew96-en/watercolor.png', contain);
-        background-position: center center;
-        background-repeat: no-repeat;
-        padding: $layout-md;
-
-        @media #{$mq-lg} {
-            padding: $layout-xl;
-        }
-    }
-
     .mzp-c-emphasis-box {
         margin: 0 auto;
-        max-width: $content-xs;
-        min-width: 220px;
     }
 
     .send-to-device-input {
@@ -54,3 +41,25 @@ $image-path: '/media/protocol/img';
     padding-top: $spacing-sm;
     display: inline-block;
 }
+
+@media #{$mq-md} {
+    .c-main-content {
+        .mzp-c-split-media {
+            @include at2x('/media/img/firefox/whatsnew/whatsnew96-en/watercolor.png', contain);
+            background-position: center center;
+            background-repeat: no-repeat;
+            padding: $layout-md;
+        }
+
+        .mzp-c-emphasis-box {
+            max-width: $content-xs;
+            min-width: 220px;
+        }
+    }
+}
+
+@media #{$mq-lg} {
+    .c-main-content .mzp-c-split-media {
+        padding: $layout-xl;
+    }
+}