Some more responsiveness fixes for intermediate size

src/views/annual-report/annual-report.jsx

@@ -289,7 +289,7 @@ class AnnualReport extends React.Component {
                                     <FormattedMessage id="annualReport.mastheadTitle" />
                                 </h1>
                             </div>
-                            <img src="/images/annual-report/message/hero-image.svg" />
+                            <img src="/images/annual-report/message/hero-image.png" />
                         </FlexRow>
                         <MediaQuery minWidth={frameless.desktop}>
                             <img

src/views/annual-report/annual-report.scss

@@ -88,31 +88,46 @@ p {
         font-weight: bold;
     }
 
-    .masthead-content {
-        max-width: 440px;
-        text-align: left;
+    @media #{$big} {
+        .masthead-content {
+            max-width: 440px;
+            text-align: left;
+        }
+
+        img {
+            max-width: 760px;
+        }
     }
 
     @media #{$intermediate-and-smaller} {
-        img {
-            width: 75%;
+        flex-direction: column;
+        align-items: center;
+        
+        .masthead-year {
+            text-align: center;
         }
 
-        .masthead-year {
+        .masthead-content {
             text-align: center;
         }
     }
 
-    @media #{$medium-and-smaller} {
-        .masthead-content {
-            text-align: center;
+    @media #{$intermediate} {
+        .masthead-content, img {
+            max-width: 620px;
+        }
+    }
+
+    @media #{$medium} {
+        .masthead-content, img {
+            max-width: 460px;
         }
     }
 
     @media #{$small} {
-        .masthead-content {
+        .masthead-content, img {
             max-width: 300px;
-        }  
+        }
     }
 }
 
@@ -1045,7 +1060,7 @@ p {
                     align-items: flex-start;
                     text-align: left;
     
-                    @media #{$medium-and-smaller} {
+                    @media #{$intermediate-and-smaller} {
                         flex-direction: column;
                         align-items: center;
                     }
@@ -1058,6 +1073,10 @@ p {
                         @media #{$medium-and-smaller} {
                             margin: 0px 0px 20px 0px;
                         }
+
+                        @media #{$intermediate} {
+                            width: 620px;
+                        }
     
                         @media #{$medium} {
                             width: 460px;
@@ -1073,6 +1092,10 @@ p {
                     align-self: center;
                     max-width: 780px;
 
+                    @media #{$intermediate} {
+                        width: 620px;
+                    }
+
                     @media #{$medium} {
                         width: 460px;
                     }
@@ -1310,6 +1333,12 @@ p {
             flex-direction: column;
             align-items: center;
 
+            @media #{$intermediate} {
+                img {
+                    max-width: 300px;
+                }
+            }
+            
             @media #{$small} {
                 img {
                     max-width: 300px;