From 497ba5c6f32542ab1243781b8b2ad967f89d4448 Mon Sep 17 00:00:00 2001
From: seotts <sotts@scratch.mit.edu>
Date: Fri, 23 Oct 2020 16:45:17 -0400
Subject: [PATCH] fix tutorials spacing and size

---
 src/views/annual-report/annual-report.jsx  |  3 ---
 src/views/annual-report/annual-report.scss | 28 ++++++++++++++++------
 2 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/src/views/annual-report/annual-report.jsx b/src/views/annual-report/annual-report.jsx
index 9003bda2d..346c490ba 100644
--- a/src/views/annual-report/annual-report.jsx
+++ b/src/views/annual-report/annual-report.jsx
@@ -1978,9 +1978,6 @@ class AnnualReport extends React.Component {
                                     </Button>
                                 </a>
                             </div>
-                            <div className="financials-future">
-                                <FormattedMessage id="annualReport.financialsFutureYears" />
-                            </div>
                         </div>
                     </div>
                     <div
diff --git a/src/views/annual-report/annual-report.scss b/src/views/annual-report/annual-report.scss
index a4e969d5a..3bb02397a 100644
--- a/src/views/annual-report/annual-report.scss
+++ b/src/views/annual-report/annual-report.scss
@@ -1513,7 +1513,7 @@ p {
         }
 
         .tools-tutorials {
-            max-width: 780px;
+            width: 760px;
             text-align: center;
             display: flex;
             flex-direction: column;
@@ -1532,14 +1532,25 @@ p {
                 margin: 32px 0;
 
                 img {
-                    width: 180px;
                     border-radius: 8px;
+                    @media #{$big} {
+                        width: 180px;
+                        height: 100px;
+                    }
+                    @media #{$intermediate} {
+                        width: 140px;
+                        height: 76px;
+                    }
+                    @media #{$medium} {
+                        width: 220px;
+                        height: 120px;
+                    }
+                    @media #{$small} {
+                        width: 140px;
+                        height: 76px;
+                    }
                 }
             }
-
-            .tools-stats {
-                max-width: 460px;
-            }
         }
 
         .tools-abhi {
@@ -1603,6 +1614,10 @@ p {
                 }
             }
 
+            .tools-tutorials {
+                width: 620px;
+            }
+
             .tools-abhi {
                 width: 100%;
                 align-items: center;
@@ -1682,7 +1697,6 @@ p {
 
                     img {
                         margin: 8px;
-                        width: 200px;
                     }
                 }