Start on responsive map

src/_frameless.scss

@@ -35,8 +35,8 @@ $cols11: (11 * ($column + $gutter) - $gutter) / $em;
 $cols12: (12 * ($column + $gutter) - $gutter) / $em;
 
 $desktop: 942px;
-$mobileIntermediate: 640px;
 $tabletPortrait: 768px;
+$mobileIntermediate: 640px;
 $mobile: 480px;
 
 /* Media Queries */

src/components/world-map/world-map.jsx

@@ -66,9 +66,7 @@ const WorldMap = props => (
                     pad: 0,
                     autoexpand: true
                 },
-                // autosize: true,
-                width: props.mapWidth,
-                height: props.mapHeight
+                autosize: true
             }
         }
     />

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

@@ -729,14 +729,14 @@ class AnnualReport extends React.Component {
                                 <p>
                                     <FormattedMessage id="annualReport.reachMapBlurb" />
                                 </p>
+                                <div className="map-wrapper">
                                 <MediaQuery minWidth={frameless.desktop}>
                                     <WorldMap
                                         className="map"
                                         colorIndex={colorIndex}
                                         countryData={countryData}
                                         countryNames={countryNames}
-                                        mapHeight={530}
-                                        mapWidth={1060}
+                                        mapHeight={471}
                                     />
                                 </MediaQuery>
                                 <MediaQuery
@@ -748,8 +748,7 @@ class AnnualReport extends React.Component {
                                         colorIndex={colorIndex}
                                         countryData={countryData}
                                         countryNames={countryNames}
-                                        mapHeight={450}
-                                        mapWidth={900}
+                                        mapHeight={384}
                                     />
                                 </MediaQuery>
                                 <MediaQuery
@@ -761,8 +760,7 @@ class AnnualReport extends React.Component {
                                         colorIndex={colorIndex}
                                         countryData={countryData}
                                         countryNames={countryNames}
-                                        mapHeight={400}
-                                        mapWidth={800}
+                                        mapHeight={320}
                                     />
                                 </MediaQuery>
                                 <MediaQuery maxWidth={frameless.mobileIntermediate - 1}>
@@ -771,10 +769,10 @@ class AnnualReport extends React.Component {
                                         colorIndex={colorIndex}
                                         countryData={countryData}
                                         countryNames={countryNames}
-                                        mapHeight={172}
-                                        mapWidth={396}
+                                        mapHeight={240}
                                     />
                                 </MediaQuery>
+                                </div>
                             </div>
                         </div>
                         <div className="inner">

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

@@ -551,7 +551,6 @@ p {
     }
 
     .reach-map {
-        width: 1064px;
         background-color: $ui-white;
         border-radius: 6px;
         color: $type-gray;
@@ -564,11 +563,20 @@ p {
             color: $type-gray;
             padding: 0 48px;
         }
-
+        
         @media #{$intermediate-and-smaller} {
             width: 100%;
             border-radius: 0px;
         }
+        
+        .map-wrapper {
+          width: 100%;
+        }
+        
+        .map {
+          width: 100%;
+        }
+        
     }
 
     .reach-translation {