From 4513fd85038d9325e3155a7f97efdd1899676ad0 Mon Sep 17 00:00:00 2001
From: seotts <sotts@scratch.mit.edu>
Date: Thu, 15 Oct 2020 13:52:02 -0400
Subject: [PATCH] finish tools mobile intermediate

---
 src/views/annual-report/annual-report.scss | 84 +++++++++++++++++++++-
 1 file changed, 83 insertions(+), 1 deletion(-)

diff --git a/src/views/annual-report/annual-report.scss b/src/views/annual-report/annual-report.scss
index 4859369ff..0adde95ab 100644
--- a/src/views/annual-report/annual-report.scss
+++ b/src/views/annual-report/annual-report.scss
@@ -693,7 +693,7 @@ p {
                     width: 340px;
                 }
                 @media #{$medium} {
-                    width: 192px;
+                    width: 248px;
                 }
                 @media #{$small} {
                     width: 132px;
@@ -893,6 +893,88 @@ p {
                 }
             }
         }
+
+        @media #{$medium-and-smaller} {
+            .inner {
+                max-width: 460px;
+            }
+
+            .tools-extensions {
+                width: 100%;
+                justify-content: center;
+
+                .tools-extension {
+                    width: 100%;
+                    margin-bottom: 60px;
+
+                    .tools-stats {
+                         justify-content: space-around;
+                    }
+                }
+            }
+
+            .tools-LEGO, .tools-app {
+                width: 100%;
+                align-items: center;
+                justify-content: center;
+                margin-top: 0px;
+
+                .tools-LEGO-info, .tools-app-info {
+                    width: 100%;
+                }
+
+                h4, p {
+                    text-align: center;
+                }
+
+                h4 {
+                    margin: 36px 0;
+                }
+
+                img {
+                    width: 300px;
+                    order: -1;
+                }
+
+                .subsection-tag {
+                    align-self: center;
+                }
+            }
+
+            .tools-tutorials {
+                width: 100%;
+
+                .tutorial-list {
+                    justify-content: center;
+
+                    img {
+                        margin: 8px;
+                        width: 200px;
+                    }
+                }
+
+                .tools-stats {
+                    max-width: 100%;
+                    width: 100%;
+
+                    justify-content: space-around;
+                }
+            }
+
+            .tools-abhi {
+                h2 {
+                    margin-top: 28px;
+                }
+            }
+
+            .abhi-quote {
+                width: 460px;
+            }
+
+            .emoji-text {
+                text-align: left;
+            }
+        }
     }
 
     .initiatives-community {