tools hero images

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

@@ -874,6 +874,10 @@ class AnnualReport extends React.Component {
                                         </p>
                                     </div>
                                 </div>
+                                <div className="hero">
+                                    <img className="left" src="/images/annual-report/initiatives/3.0 Left.svg" />
+                                    <img className="right" src="/images/annual-report/initiatives/3.0 Right.svg" />
+                                </div>
                                 <div className="video-container">
                                     <div className="video-background abhi">
                                         <MediaQuery minWidth={frameless.tabletPortrait}>

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

@@ -672,6 +672,45 @@ p {
         }
     }
 
+    .initiatives-tools {
+        .hero {
+            display: flex;
+            justify-content: space-between;
+        }
+
+        img {
+            &.left {
+                @media #{$big} {
+                    width: 432px;
+                }
+                @media #{$intermediate} {
+                    width: 260px;
+                }
+                @media #{$medium} {
+                    width: 192px;
+                }
+                @media #{$small} {
+                    width: 132px;
+                }
+            }
+
+            &.right {
+                @media #{$big} {
+                    width: 780px;
+                }
+                @media #{$intermediate} {
+                    width: 468px;
+                }
+                @media #{$medium} {
+                    width: 342px;
+                }
+                @media #{$small} {
+                    width: 220px;
+                }
+            }
+        }
+    }
+
     .initiatives-community {
         .hero {
             width: 100%;