Don't show scratch-jr-transition images on small screens. Fix lint issue.

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

@@ -860,9 +860,11 @@ class AnnualReport extends React.Component {
                                 <img src="/images/annual-report/reach/translated-illustration.svg" />
                             </div>
                         </div>
-                        <div className="scratch-jr-transition-img">
-                            <img src="/images/annual-report/reach/horizontal-command.svg" />
-                        </div>
+                        <MediaQuery minWidth={frameless.mobile}>
+                            <div className="scratch-jr-transition-img">
+                                <img src="/images/annual-report/reach/horizontal-command.svg" />
+                            </div>
+                        </MediaQuery>
                     </div>
                     <div className="reach-scratch-jr">
                         <div className="inner">
@@ -888,9 +890,11 @@ class AnnualReport extends React.Component {
                                 </h4>
                             </div>
                         </div>
-                        <div className="scratch-jr-transition-img">
-                            <img src="/images/annual-report/reach/horizontal-loop.svg" />
-                        </div>
+                        <MediaQuery minWidth={frameless.mobile}>
+                            <div className="scratch-jr-transition-img">
+                                <img src="/images/annual-report/reach/horizontal-loop.svg" />
+                            </div>
+                        </MediaQuery>
                     </div>
                     <div
                         className="initiatives-section"
@@ -1891,7 +1895,7 @@ class AnnualReport extends React.Component {
                                             <div className="conference-image-and-caption left">
                                                 {/* eslint-disable-next-line max-len */}
                                                 <img src="/images/annual-report/initiatives/schools/Conferences Story/Africa Conference.png" />
-                                                    <span className="photo-credit">
+                                                <span className="photo-credit">
                                                     <FormattedMessage
                                                         id="annualReport.conferencesAfricaImageCaption"
                                                         values={{

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

@@ -741,6 +741,10 @@ p {
         img {
             max-width: 380px;
         }
+
+        @media #{$small} {
+            margin-bottom: 64px;
+        }
     }
 
     @media #{$intermediate-and-smaller} {
@@ -801,9 +805,6 @@ p {
         @media #{$medium} {
             margin-left: 32px;
         }
-        @media #{$small} {
-            margin-left: -8px;
-        }
     }
 }
 
@@ -817,10 +818,6 @@ p {
         @media #{$medium} {
             margin-right: 12px;
         }
-        @media #{$small} {
-            margin-right: -36px;
-            overflow: hidden;
-        }
     }
 }
 
@@ -869,6 +866,10 @@ p {
             width: 100%;
         }
     }
+
+    @media #{$small} {
+        padding: 84px 0 52px 0;
+    }
 }
 
 .initiatives-section {