diff --git a/src/components/text-and-media-snippet/text-and-media-snippet.jsx b/src/components/text-and-media-snippet/text-and-media-snippet.jsx
index 590636456..cb20bb069 100644
--- a/src/components/text-and-media-snippet/text-and-media-snippet.jsx
+++ b/src/components/text-and-media-snippet/text-and-media-snippet.jsx
@@ -13,8 +13,8 @@ const TextAndMediaSnippet = props => (
                     <VideoPreview
                         buttonMessage=""
                         thumbnail={props.largeImage}
-                        thumbnailWidth="300"
-                        videoHeight="216"
+                        thumbnailWidth="320"
+                        videoHeight="230"
                         videoId={props.videoId}
                         videoWidth="380"
                         alt={props.alt}
diff --git a/src/components/text-and-media-snippet/text-and-media-snippet.scss b/src/components/text-and-media-snippet/text-and-media-snippet.scss
index 9f34e2397..220622f85 100644
--- a/src/components/text-and-media-snippet/text-and-media-snippet.scss
+++ b/src/components/text-and-media-snippet/text-and-media-snippet.scss
@@ -17,11 +17,20 @@
     }
   }
   .half{
-    max-width: 330px;
+    max-width: 360px;
     width: 100%;
+    @media #{$intermediate-and-smaller} {
+      max-width: 430px;
+      width: 100%;
+      margin-bottom: 20px;
+    }
     img.large{
       max-width: 350px;
       width: 100%;
+      @media #{$intermediate-and-smaller} {
+        max-width: 430px;
+        width: 100%;
+      }
     }
   }
   p{
diff --git a/src/views/annual-report/2020/annual-report.jsx b/src/views/annual-report/2020/annual-report.jsx
index a4a0abad6..5c4a8ab12 100644
--- a/src/views/annual-report/2020/annual-report.jsx
+++ b/src/views/annual-report/2020/annual-report.jsx
@@ -918,7 +918,7 @@ class AnnualReport extends React.Component {
                                 <div className="inner">
                                     <div className="content">
                                         <div className="text">
-                                            <div className="spotlight bubble connectivity">
+                                            <div className="spotlight bubble connectivity india">
                                                 <FormattedMessage id="annualReport.2020.spotlightStory" />
                                             </div>
                                             <h2>
@@ -1302,7 +1302,7 @@ class AnnualReport extends React.Component {
                                 </div>
                             </div>
                             <div className="community-quotes">
-                                <div className="community-quote">
+                                <div className="community-quote single">
                                     <div className="quote-person">
                                         <Avatar
                                             alt={this.props.intl.formatMessage({id: 'annualReport.2020.altBenedict'})}
@@ -1327,11 +1327,11 @@ class AnnualReport extends React.Component {
                             <div className="initiatives-subsection-content">
                                 {/* eslint-disable max-len */}
                                 <div className="inner">
-                                    <div className="content flex-content">
+                                    <div className="spotlight bubble adaptation">
+                                        <FormattedMessage id="annualReport.2020.spotlightStory" />
+                                    </div>
+                                    <div className="content flex-content aaron">
                                         <div className="text">
-                                            <div className="spotlight bubble adaptation">
-                                                <FormattedMessage id="annualReport.2020.spotlightStory" />
-                                            </div>
                                             <h2>
                                                 <FormattedMessage id="annualReport.2020.adaptationHighlightName" />
                                             </h2>
@@ -1354,15 +1354,44 @@ class AnnualReport extends React.Component {
                                     <div className="flex-content">
                                         <div className="text-and-media-snippet regular between">
                                             <div className="half">
-                                                <iframe
-                                                    src="https://scratch.mit.edu/projects/389148460/embed"
-                                                    allowTransparency="true"
-                                                    width="375"
-                                                    height="310"
-                                                    frameBorder="0"
-                                                    scrolling="no"
-                                                    allowFullScreen
-                                                />
+                                                <MediaQuery
+                                                    minWidth={frameless.desktop}
+                                                >
+                                                    <iframe
+                                                        src="https://scratch.mit.edu/projects/389148460/embed"
+                                                        allowTransparency="true"
+                                                        width="360"
+                                                        height={((360 * .76) + 45)}
+                                                        frameBorder="0"
+                                                        scrolling="no"
+                                                        allowFullScreen
+                                                    />
+                                                </MediaQuery>
+                                                <MediaQuery
+                                                    maxWidth={frameless.desktop - 1}
+                                                    minWidth={frameless.mobile}
+                                                >
+                                                    <iframe
+                                                        src="https://scratch.mit.edu/projects/389148460/embed"
+                                                        allowTransparency="true"
+                                                        width="430"
+                                                        height={((430 * .76) + 45)}
+                                                        frameBorder="0"
+                                                        scrolling="no"
+                                                        allowFullScreen
+                                                    />
+                                                </MediaQuery>
+                                                <MediaQuery maxWidth={frameless.mobile - 1}>
+                                                    <iframe
+                                                        src="https://scratch.mit.edu/projects/389148460/embed"
+                                                        allowTransparency="true"
+                                                        width="300"
+                                                        height={((300 * .76) + 45)}
+                                                        frameBorder="0"
+                                                        scrolling="no"
+                                                        allowFullScreen
+                                                    />
+                                                </MediaQuery>
                                             </div>
                                             <div className="half">
                                                 <p>
@@ -1594,15 +1623,30 @@ class AnnualReport extends React.Component {
                                         />
                                     </div>
                                     <div className="iframe-holder">
-                                        <iframe
-                                            src="https://scratch.mit.edu/projects/412126066/embed"
-                                            allowTransparency="true"
-                                            width="485"
-                                            height="402"
-                                            frameBorder="0"
-                                            scrolling="no"
-                                            allowFullScreen
-                                        />
+                                        <MediaQuery
+                                            minWidth={frameless.mobile}
+                                        >
+                                            <iframe
+                                                src="https://scratch.mit.edu/projects/412126066/embed"
+                                                allowTransparency="true"
+                                                width="480"
+                                                height={((480 * .76) + 45)}
+                                                frameBorder="0"
+                                                scrolling="no"
+                                                allowFullScreen
+                                            />
+                                        </MediaQuery>
+                                        <MediaQuery maxWidth={frameless.mobile - 1}>
+                                            <iframe
+                                                src="https://scratch.mit.edu/projects/412126066/embed"
+                                                allowTransparency="true"
+                                                width="300"
+                                                height={((300 * .76) + 45)}
+                                                frameBorder="0"
+                                                scrolling="no"
+                                                allowFullScreen
+                                            />
+                                        </MediaQuery>
                                         <p>
                                             <FormattedMessage id="annualReport.2020.projectBy" /> u/STORMPRIMEX
                                         </p>
diff --git a/src/views/annual-report/2020/annual-report.scss b/src/views/annual-report/2020/annual-report.scss
index 97697afe1..53a3707f1 100644
--- a/src/views/annual-report/2020/annual-report.scss
+++ b/src/views/annual-report/2020/annual-report.scss
@@ -643,10 +643,10 @@ a, a:link, a:visited, a:active{
 
         .reach-translation-intro {
             max-width: 300px;
+        }
 
-            h3 {
-                max-width: 280px;
-            }
+        img {
+            max-width: 380px;
         }
 
         .inline{
@@ -655,13 +655,12 @@ a, a:link, a:visited, a:active{
             margin-top: 10px;
             img{
                 margin-right: 6px;
+                @media #{$intermediate-and-smaller} {
+                    max-width: 30px;
+                }
             }
         }
 
-        img {
-            max-width: 380px;
-        }
-
         @media #{$small} {
             margin-bottom: 64px;
         }
@@ -671,21 +670,18 @@ a, a:link, a:visited, a:active{
         .inner {
             max-width: 620px;
         }
-
-        .reach-translation {
-            text-align: left;
+        .inline{
+            justify-content: center;
+        }
+        .reach-translation, .reach-translation-intro {
+            flex-direction: column;
+            justify-content: center;
+            text-align: center;
             img {
                 width: 300px;
             }
         }
     }
-
-    @media #{$medium-and-smaller} {
-        .reach-translation {
-            text-align: center;
-            justify-content: center;
-        }
-    }
 }
 
 .bubble {
@@ -760,6 +756,7 @@ a, a:link, a:visited, a:active{
     }
     &.adaptation{
         background-color: $annual-report-aqua;
+        padding: 10px 13px;
     }
 }
 
@@ -1165,6 +1162,15 @@ img.comment-viz{
             @media #{$intermediate} {
                 margin-left: auto;
             }
+            &.spotlight{
+                margin-left: 50px;
+                @media #{$intermediate-and-smaller}{
+                    margin: auto;
+                }
+                &.india{
+                    margin: 0 auto 20px;
+                }
+            }
             &.inverted{
                 border: 2.5px solid $ui-purple-dark;
                 background-color: $ui-white;
@@ -1237,6 +1243,13 @@ img.comment-viz{
                     max-width: 480px;
                     width: 100%;
                 }
+                .images{
+                    max-width: 350px;
+                    width: 100%;
+                    img{
+                        width: 100%;
+                    }
+                }
             }
 
             .flex-content{
@@ -1246,14 +1259,24 @@ img.comment-viz{
                 text-align: left;
                 @media #{$medium-and-smaller} {
                     flex-direction: column;
+                    align-items: center;
+                    justify-content: center;
+                    &.aaron{
+                        flex-direction: column-reverse;
+                    }
                 }
                 &.split{
                     &.content{
                         .text{
                             max-width: 420px;
+                            width: 100%;
                         }
-                        img{
+                        .images{
                             max-width: 350px;
+                            width: 100%;
+                            img{
+                                width: 100%;
+                            }
                         }
                     }
                 }
@@ -1261,6 +1284,14 @@ img.comment-viz{
                     justify-content: space-between;
                     .text{
                         max-width: 370px;
+                        width: 100%;
+                    }
+                    .images{
+                        max-width: 350px;
+                        width: 100%;
+                        img{
+                            width: 100%;
+                        }
                     }
                 }
                 &.lg{
@@ -1370,12 +1401,22 @@ img.comment-viz{
             left: 0px;
         }
     }
-    
 
+    .world{
+        h2{
+            line-height: 1.5;
+            margin-top: 20px;
+        }
+    }
+    
     .initiatives-adaptation, .initiatives-community {
         .world{
             max-width: 600px;
             margin: 50px auto;
+            @media #{$intermediate-and-smaller} {
+                width: calc(100% - 30px);
+                padding: 0 15px;
+            }
         }
         .left-align{
             max-width: 700px;
@@ -1726,6 +1767,9 @@ img.comment-viz{
             margin-top: 0px;
             flex-direction: column;
         }
+        @media #{$small}{
+            background-size: auto;
+        }
         .tweets{
             max-width: 600px;
             width: 100%;
@@ -1735,6 +1779,8 @@ img.comment-viz{
             align-items:flex-start;
             @media #{$small} {
                 flex-direction: column;
+                justify-content: center;
+                align-items: center;
             }
             .twitter-tweet{
                 width: 100%;
@@ -1747,6 +1793,9 @@ img.comment-viz{
     .inner {
         max-width: 940px;
         padding: 80px 0;
+        @media #{$intermediate}{
+            max-width: 700px;
+        }
     }
 
     background-color: $header-gray;
@@ -2340,3 +2389,9 @@ img.comment-viz{
     position: relative;
     top: 58px;
 }
+
+.regular.between{
+    @media #{$medium-and-smaller}{
+        margin-top: 0px;
+    }
+}