diff --git a/src/components/HeroHeadline/Hero.stories.svelte b/src/components/HeroHeadline/Hero.stories.svelte
index 1e598acd..9031a9d7 100644
--- a/src/components/HeroHeadline/Hero.stories.svelte
+++ b/src/components/HeroHeadline/Hero.stories.svelte
@@ -4,17 +4,22 @@
   // @ts-ignore
   import componentDocs from './stories/docs/component.md?raw';
   // @ts-ignore
-  // import backgroundImageDocs from './stories/docs/backgroundImage.md?raw';
+  import backgroundGraphicDocs from './stories/docs/backgroundGraphic.md?raw';
+  // @ts-ignore
+  import inlineGraphicDocs from './stories/docs/inlineGraphic.md?raw';
 
   // @ts-ignore
   import polarImgSrc from './stories/polar.jpg';
-  // import GraphicBlock from '../GraphicBlock/GraphicBlock.svelte';
 
   import HeroHeadline from './Hero.svelte';
+  import GraphicBlock from '../GraphicBlock/GraphicBlock.svelte';
+
+  import CrashMap from './stories/graphics/crash.svelte';
+  import QuakeMap from './stories/graphics/quakemap.svelte';
 
   import {
     withComponentDocs,
-    // withStoryDocs,
+    withStoryDocs,
   } from '$lib/docs/utils/withParams.js';
 
   const metaProps = {
@@ -25,6 +30,10 @@
         control: 'select',
         options: ['small', 'normal', 'big', 'bigger', 'biggest'],
       },
+      hedWidth: {
+        control: 'select',
+        options: ['normal', 'wide', 'wider', 'widest'],
+      },
       width: {
         control: 'select',
         options: ['normal', 'wide', 'wider', 'widest'],
@@ -44,11 +53,10 @@
 </Template>
 
 <Story
-  name="Default"
+  name="With backdrop photo"
   args="{{
     section: 'World News',
     hed: 'Reuters Graphics Interactive',
-    hedSize: 'normal',
     dek: 'The beginning of a beautiful page',
     authors: ['Simon Scarr', 'Vijdan Mohammad Kawoosa'],
     publishTime: new Date('2022-03-04').toISOString(),
@@ -56,12 +64,85 @@
   }}"
 />
 
-<!-- <Story name="With inline media" {...withStoryDocs(backgroundImageDocs)}>
+<Story name="With backdrop graphic" {...withStoryDocs(backgroundGraphicDocs)}>
+  <HeroHeadline
+    hed="{'Earthquake devastates Afghanistan'}"
+    hedSize="{'big'}"
+    hedWidth="wide"
+    class="mb-0"
+    dek=""
+    authors="{[
+      'Anand Katakam',
+      'Vijdan Mohammad Kawoosa',
+      'Adolfo Arranz',
+      'Wen Foo',
+      'Simon Scarr',
+      'Aman Bhargava',
+      'Jitesh Chowdhury',
+      'Manas Sharma',
+      'Aditi Bhandari',
+    ]}"
+    publishTime="{new Date('2022-06-24').toISOString()}"
+  >
+    <div slot="background">
+      <GraphicBlock
+        width="fluid"
+        role="figure"
+        class="my-0"
+        textWidth="normal"
+        notes=""
+        ariaDescription="Earthquake impact map"
+      >
+        <svelte:component this="{QuakeMap}" />
+      </GraphicBlock>
+    </div>
+  </HeroHeadline>
+  <style lang="scss">
+    .hero-headline .headline {
+      align-items: flex-end;
+
+      @media (max-width: 1100px) {
+        max-width: var(--normal-column-width) !important;
+      }
+    }
+
+    .hero-wrapper {
+      // Make hero smaller than 100vh
+      --heroHeight: 85svh;
+
+      @media (max-width: 960px) {
+        --heroHeight: 65svh;
+      }
+
+      // Custom hero sizing for landscape mobile
+      @media (max-width: 960px) and (orientation: landscape) {
+        --heroHeight: 200svh;
+      }
+    }
+  </style>
+</Story>
+
+<Story name="With inline graphic" {...withStoryDocs(inlineGraphicDocs)}>
   <HeroHeadline
     hed="{'The plunge from 29,000 feet'}"
+    hedWidth="wide"
+    class="mb-0"
     dek="{'How China Eastern Airlines flight MU5735 went from an uneventful flight at cruising altitude to disaster in just minutes.'}"
     section="{'Global news'}"
     authors="{['Simon Scarr', 'Vijdan Mohammad Kawoosa']}"
     publishTime="{new Date('2020-01-01').toISOString()}"
-  />
-</Story> -->
+  >
+    <div slot="inline">
+      <GraphicBlock
+        width="fluid"
+        role="figure"
+        class="my-0"
+        textWidth="normal"
+        notes="Source: Satellite image from Google, Maxar Technologies, CNES/Airbus, Landsat/Copernicus"
+        ariaDescription="Aerial map showing trajectory of crash"
+      >
+        <svelte:component this="{CrashMap}" />
+      </GraphicBlock>
+    </div>
+  </HeroHeadline>
+</Story>
diff --git a/src/components/HeroHeadline/Hero.svelte b/src/components/HeroHeadline/Hero.svelte
index b04fbd43..f73b5111 100644
--- a/src/components/HeroHeadline/Hero.svelte
+++ b/src/components/HeroHeadline/Hero.svelte
@@ -1,7 +1,6 @@
 <!-- @component `HeroHeadline` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-HeroHeadline--default) -->
 <script lang="ts">
   import { HeadlineSize } from '../@types/global';
-  import cssVariables from '../../actions/cssVariables/index.js';
 
   /** Set to true for embeddables. */
   export let embedded: boolean = false;
@@ -10,19 +9,7 @@
    * Path to background image
    * @type {string}
    */
-  export let img: string;
-
-  /**
-   * Size value for CSS property background-size
-   * @type {string}
-   */
-  export let backgroundSize: 'auto' | 'cover' | 'contain' = 'cover';
-
-  /**
-   * Position value for  CSS property background-position
-   * @type {string}
-   */
-  export let backgroundPos = 'center';
+  export let img: string | null = null;
 
   /**
    * ARIA description, passed in as a markdown string.
@@ -36,12 +23,6 @@
    */
   export let notes: string | null = null;
 
-  /**
-   * Height as a percetange of viewport height
-   * @type {number}
-   */
-  export let heroHeight: number = 100;
-
   /**
    * Headline, parsed as an _inline_ markdown string in an `h1` element.
    * @type {string}
@@ -64,6 +45,11 @@
    */
   export let hedAlign: 'left' | 'center' | 'right' = 'center';
 
+  /**
+   * Width of the headline.
+   */
+  export let hedWidth: 'normal' | 'wide' | 'wider' | 'widest' = 'normal';
+
   /**
    * Dek, parsed as a markdown string.
    * @type {string}
@@ -90,9 +76,9 @@
   export let updateTime: string = '';
 
   /**
-   * Width of the headline.
+   * Width of the Hero graphic.
    */
-  export let width: 'normal' | 'wide' | 'wider' | 'widest' = 'normal';
+  export let width: 'normal' | 'wide' | 'wider' | 'widest' = 'widest';
 
   import Headline from '../Headline/Headline.svelte';
   import GraphicBlock from '../GraphicBlock/GraphicBlock.svelte';
@@ -120,21 +106,15 @@
         hedClass = 'text-3xl';
     }
   }
-
-  $: variables = {
-    heroHeight: embedded ? '850px' : heroHeight + 'svh',
-    backgroundSize,
-    backgroundPos,
-  };
 </script>
 
-<div class="hero-wrapper" use:cssVariables="{variables}">
-  <!-- Background media -->
+<div class="hero-wrapper">
+  <!-- Background media hero-->
   {#if $$slots.background || img}
-    <Block width="fluid" class="hero-headline fmt-0">
+    <Block width="fluid" class="hero-headline background-hero fmt-0">
       <Headline
-        class="{cls} mt-0 !text-{hedAlign}"
-        width="{width}"
+        class="{cls} !text-{hedAlign}"
+        width="{hedWidth}"
         section="{section}"
         hedSize="{hedSize}"
         hed="{hed}"
@@ -142,11 +122,11 @@
       />
       <div class="background-container">
         {#if $$slots.background}
-          <!-- Hero named slot -->
+          <!-- Hero graphic named slot -->
           <slot name="background" />
         {:else}
           <GraphicBlock
-            width="fluid"
+            width="{width}"
             role="img"
             class="my-0"
             textWidth="normal"
@@ -160,23 +140,34 @@
         {/if}
       </div>
     </Block>
+    {#if notes}
+      <TextBlock width="normal">
+        <aside class="fmt-2">
+          {@html marked(notes)}
+        </aside>
+      </TextBlock>
+    {/if}
   {/if}
-  {#if notes}
-    <TextBlock width="normal">
-      <aside class="fmt-2">
-        {@html marked(notes)}
-      </aside>
-    </TextBlock>
+
+  <!-- Inline hero -->
+  {#if $$slots.inline}
+    <Block width="fluid" class="hero-headline inline-hero">
+      <Headline
+        class="{cls} !text-{hedAlign}"
+        width="{hedWidth}"
+        section="{section}"
+        hedSize="{hedSize}"
+        hed="{hed}"
+        dek="{dek}"
+      />
+      <div class="graphic-container">
+        <!-- Hero named slot -->
+        <slot name="inline" />
+      </div>
+    </Block>
   {/if}
 </div>
 
-{#if $$slots.inline}
-  <div class="crown-container">
-    <!-- Hero named slot -->
-    <slot name="inline" />
-  </div>
-{/if}
-
 {#if $$slots.byline}
   <!-- Custom byline/dateline -->
   <slot name="byline" />
@@ -194,26 +185,33 @@
   @import '../../scss/mixins';
 
   :global {
-    .hero-headline {
-      height: var(--heroHeight);
+    .background-hero {
+      height: var(--heroHeight, 100svh);
       max-height: 1800px;
       width: 100%;
       position: relative;
 
       .headline {
+        @include fmt-0;
+        z-index: 1;
         display: flex;
         align-items: center;
         justify-content: center;
-        z-index: 1;
         position: absolute;
+        width: 100%;
         top: 0;
         left: 50%;
-        height: var(--heroHeight);
+        height: var(--heroHeight, 100svh);
         max-height: 1800px;
         transform: translateX(-50%);
       }
     }
 
+    .byline-container {
+      z-index: 1;
+      position: relative;
+    }
+
     .hero-wrapper {
       // Caption and Sources
       aside {
@@ -224,17 +222,13 @@
     }
   }
   .background-image {
-    position: absolute;
-    width: 100%;
-    height: var(--heroHeight);
+    width: auto;
+    height: var(--heroHeight, 100svh);
     max-height: 1800px;
-    top: 0;
-    z-index: 0;
-    left: 0;
     user-select: none;
 
     background-repeat: no-repeat;
-    background-position: var(--backgroundPos);
-    background-size: var(--backgroundSize);
+    background-position: center;
+    background-size: cover;
   }
 </style>
diff --git a/src/components/HeroHeadline/stories/docs/backgroundGraphic.md b/src/components/HeroHeadline/stories/docs/backgroundGraphic.md
new file mode 100644
index 00000000..c85ced97
--- /dev/null
+++ b/src/components/HeroHeadline/stories/docs/backgroundGraphic.md
@@ -0,0 +1,66 @@
+Reuters Graphics headline with ai2svelte graphic as background.
+
+```svelte
+<script>
+  import { Headline } from '@reuters-graphics/graphics-components';
+  import Map from './ai2svelte/graphic.svelte';
+  import { assets } from '$app/paths';
+</script>
+
+<HeroHeadline
+  hed="{'Earthquake devastates Afghanistan'}"
+  hedSize="{'big'}"
+  hedWidth="wide"
+  class="mb-0"
+  dek=""
+  authors="{[
+    'Anand Katakam',
+    'Vijdan Mohammad Kawoosa',
+    'Adolfo Arranz',
+    'Wen Foo',
+    'Simon Scarr',
+    'Aman Bhargava',
+    'Jitesh Chowdhury',
+    'Manas Sharma',
+    'Aditi Bhandari',
+  ]}"
+  publishTime="{new Date('2022-06-24').toISOString()}"
+>
+  <div slot="background">
+    <GraphicBlock
+      width="fluid"
+      role="figure"
+      class="my-0"
+      textWidth="normal"
+      notes=""
+      ariaDescription="Earthquake impact map"
+    >
+      <svelte:component this="{QuakeMap}" />
+    </GraphicBlock>
+  </div>
+</HeroHeadline>
+
+<style lang="scss">
+  .hero-headline .headline {
+    align-items: flex-end;
+
+    @media (max-width: 1100px) {
+      max-width: var(--normal-column-width) !important;
+    }
+  }
+
+  .hero-wrapper {
+    // Make hero smaller than 100vh
+    --heroHeight: 85svh;
+
+    @media (max-width: 960px) {
+      --heroHeight: 65svh;
+    }
+
+    // Custom hero sizing for landscape mobile
+    @media (max-width: 960px) and (orientation: landscape) {
+      --heroHeight: 200svh;
+    }
+  }
+</style>
+```
diff --git a/src/components/HeroHeadline/stories/docs/backgroundImage.md b/src/components/HeroHeadline/stories/docs/backgroundImage.md
deleted file mode 100644
index 1c4be9cb..00000000
--- a/src/components/HeroHeadline/stories/docs/backgroundImage.md
+++ /dev/null
@@ -1,16 +0,0 @@
-> 🔨 **Under construction**: We're working on this component to make it better. Pardon our mess.
-
-Reuters Graphics headline
-
-```svelte
-<script>
-  import { Headline } from '@reuters-graphics/graphics-components';
-</script>
-
-<Headline
-  hed="{'Reuters Graphics Interactive'}"
-  dek="{'The beginning of a beautiful page'}"
-  section="{'Global news'}"
-  sectionColour="{'orange'}"
-/>
-```
diff --git a/src/components/HeroHeadline/stories/docs/component.md b/src/components/HeroHeadline/stories/docs/component.md
index 1c4be9cb..8a8b07eb 100644
--- a/src/components/HeroHeadline/stories/docs/component.md
+++ b/src/components/HeroHeadline/stories/docs/component.md
@@ -1,16 +1,17 @@
-> 🔨 **Under construction**: We're working on this component to make it better. Pardon our mess.
-
-Reuters Graphics headline
+Reuters Graphics headline with a Hero media
 
 ```svelte
 <script>
-  import { Headline } from '@reuters-graphics/graphics-components';
+  import { HeroHeadline } from '@reuters-graphics/graphics-components';
+  import { assets } from '$app/paths'; // 👈 If using in the Graphics Kit...
 </script>
 
-<Headline
+<HeroHeadline
+  img="{`${assets}/images/myImage.jpg`}"
   hed="{'Reuters Graphics Interactive'}"
   dek="{'The beginning of a beautiful page'}"
-  section="{'Global news'}"
-  sectionColour="{'orange'}"
+  section="{'World News'}"
+  authors="{['Simon Scarr', 'Vijdan Mohammad Kawoosa']}"
+  publishTime="{new Date('2022-03-04').toISOString()}"
 />
 ```
diff --git a/src/components/HeroHeadline/stories/docs/inlineGraphic.md b/src/components/HeroHeadline/stories/docs/inlineGraphic.md
new file mode 100644
index 00000000..c3b0b182
--- /dev/null
+++ b/src/components/HeroHeadline/stories/docs/inlineGraphic.md
@@ -0,0 +1,32 @@
+Reuters Graphics headline followed by a graphic or any media block.
+
+```svelte
+<script>
+  import { Headline } from '@reuters-graphics/graphics-components';
+  import Map from './ai2svelte/graphic.svelte';
+  import { assets } from '$app/paths';
+</script>
+
+<HeroHeadline
+  hed="{'The plunge from 29,000 feet'}"
+  hedWidth="wide"
+  class="mb-0"
+  dek="{'How China Eastern Airlines flight MU5735 went from an uneventful flight at cruising altitude to disaster in just minutes.'}"
+  section="{'Global news'}"
+  authors="{['Simon Scarr', 'Vijdan Mohammad Kawoosa']}"
+  publishTime="{new Date('2020-01-01').toISOString()}"
+>
+  <div slot="inline">
+    <GraphicBlock
+      width="fluid"
+      role="figure"
+      class="my-0"
+      textWidth="normal"
+      notes="Source: Satellite image from Google, Maxar Technologies, CNES/Airbus, Landsat/Copernicus"
+      ariaDescription="Aerial map showing trajectory of crash"
+    >
+      <svelte:component this="{Map}" assetsPath="{assets || '/'}" />
+    </GraphicBlock>
+  </div>
+</HeroHeadline>
+```
diff --git a/src/components/HeroHeadline/stories/graphics/CRASH_1-lg.jpeg b/src/components/HeroHeadline/stories/graphics/CRASH_1-lg.jpeg
new file mode 100644
index 00000000..60e63044
Binary files /dev/null and b/src/components/HeroHeadline/stories/graphics/CRASH_1-lg.jpeg differ
diff --git a/src/components/HeroHeadline/stories/graphics/CRASH_1-md.jpeg b/src/components/HeroHeadline/stories/graphics/CRASH_1-md.jpeg
new file mode 100644
index 00000000..abe9b17e
Binary files /dev/null and b/src/components/HeroHeadline/stories/graphics/CRASH_1-md.jpeg differ
diff --git a/src/components/HeroHeadline/stories/graphics/CRASH_1-sm.jpeg b/src/components/HeroHeadline/stories/graphics/CRASH_1-sm.jpeg
new file mode 100644
index 00000000..ca460800
Binary files /dev/null and b/src/components/HeroHeadline/stories/graphics/CRASH_1-sm.jpeg differ
diff --git a/src/components/HeroHeadline/stories/graphics/CRASH_1-xl.jpeg b/src/components/HeroHeadline/stories/graphics/CRASH_1-xl.jpeg
new file mode 100644
index 00000000..06199572
Binary files /dev/null and b/src/components/HeroHeadline/stories/graphics/CRASH_1-xl.jpeg differ
diff --git a/src/components/HeroHeadline/stories/graphics/CRASH_1-xl_copy.jpeg b/src/components/HeroHeadline/stories/graphics/CRASH_1-xl_copy.jpeg
new file mode 100644
index 00000000..e150f58c
Binary files /dev/null and b/src/components/HeroHeadline/stories/graphics/CRASH_1-xl_copy.jpeg differ
diff --git a/src/components/HeroHeadline/stories/graphics/CRASH_1-xs.jpeg b/src/components/HeroHeadline/stories/graphics/CRASH_1-xs.jpeg
new file mode 100644
index 00000000..4a8245fa
Binary files /dev/null and b/src/components/HeroHeadline/stories/graphics/CRASH_1-xs.jpeg differ
diff --git a/src/components/HeroHeadline/stories/graphics/crash.svelte b/src/components/HeroHeadline/stories/graphics/crash.svelte
new file mode 100644
index 00000000..3cdc7a56
--- /dev/null
+++ b/src/components/HeroHeadline/stories/graphics/crash.svelte
@@ -0,0 +1,609 @@
+<script>
+  export let assetsPath = './';
+  let width = null;
+
+  // @ts-ignore
+  import chartXs from './CRASH_1-xs.jpeg';
+  // @ts-ignore
+  import chartSm from './CRASH_1-sm.jpeg';
+  // @ts-ignore
+  import chartMd from './CRASH_1-md.jpeg';
+  // @ts-ignore
+  import chartLg from './CRASH_1-lg.jpeg';
+  // @ts-ignore
+  import chartXl from './CRASH_1-xl.jpeg';
+  // @ts-ignore
+  import chartXxl from './CRASH_1-xl_copy.jpeg';
+</script>
+
+<!-- Generated by ai2html v0.100.0 - 2022-03-29 17:01 -->
+
+<div id="g-CRASH_1-box" bind:clientWidth="{width}">
+  <!-- Artboard: xs -->
+  {#if width && width >= 0 && width < 510}
+    <div id="g-CRASH_1-xs" class="g-artboard" style="">
+      <div style="padding: 0 0 93.0303% 0;"></div>
+      <div
+        id="g-CRASH_1-xs-img"
+        class="g-aiImg"
+        alt=""
+        style="{`background-image: url(${chartXs});`}"
+      ></div>
+      <div
+        id="g-ai0-1"
+        class="g-xs-text g-aiAbs g-aiPointText"
+        style="top:18.0723%;margin-top:-14.5px;left:7.0539%;width:76px;"
+      >
+        <p class="g-pstyle0">Cruising at</p>
+        <p class="g-pstyle0">29,100 feet</p>
+      </div>
+      <div
+        id="g-ai0-2"
+        class="g-xs-text g-aiAbs g-aiPointText"
+        style="top:20.271%;margin-top:-21.2px;left:26.8941%;width:103px;"
+      >
+        <p class="g-pstyle1">2.21 pm</p>
+        <p class="g-pstyle0">Steep drop from</p>
+        <p class="g-pstyle0">27,025 feet</p>
+      </div>
+      <div
+        id="g-ai0-3"
+        class="g-xs-text g-aiAbs g-aiPointText"
+        style="top:42.7133%;margin-top:-15.1px;right:3.3749%;width:96px;"
+      >
+        <p class="g-pstyle2">Typical path to</p>
+        <p class="g-pstyle2">Guangzhou</p>
+      </div>
+      <div
+        id="g-ai0-4"
+        class="g-xs-text g-aiAbs g-aiPointText"
+        style="top:70.482%;margin-top:-15.4px;right:2.4487%;width:79px;"
+      >
+        <p class="g-pstyle2">Last known</p>
+        <p class="g-pstyle2">location</p>
+      </div>
+      <div
+        id="g-ai0-5"
+        class="g-xs-text g-aiAbs g-aiPointText"
+        style="top:87.4202%;margin-top:-15.4px;right:16.3453%;width:50px;"
+      >
+        <p class="g-pstyle2">Crash</p>
+        <p class="g-pstyle2">site</p>
+      </div>
+    </div>
+  {/if}
+  <!-- Artboard: sm -->
+  {#if width && width >= 510 && width < 660}
+    <div id="g-CRASH_1-sm" class="g-artboard" style="">
+      <div style="padding: 0 0 77.8431% 0;"></div>
+      <div
+        id="g-CRASH_1-sm-img"
+        class="g-aiImg"
+        alt=""
+        style="{`background-image: url(${chartSm});`}"
+      ></div>
+      <div
+        id="g-ai1-1"
+        class="g-sm-text g-aiAbs g-aiPointText"
+        style="top:17.3436%;margin-top:-16.9px;left:16.4992%;width:86px;"
+      >
+        <p class="g-pstyle0">Cruising at</p>
+        <p class="g-pstyle0">29,100 feet</p>
+      </div>
+      <div
+        id="g-ai1-2"
+        class="g-sm-text g-aiAbs g-aiPointText"
+        style="top:20.87%;margin-top:-24.9px;left:32.8523%;width:117px;"
+      >
+        <p class="g-pstyle1">2.21 pm</p>
+        <p class="g-pstyle0">Steep drop from</p>
+        <p class="g-pstyle0">27,025 feet</p>
+      </div>
+      <div
+        id="g-ai1-3"
+        class="g-sm-text g-aiAbs g-aiPointText"
+        style="top:43.9824%;margin-top:-17.6px;right:4.7685%;width:108px;"
+      >
+        <p class="g-pstyle2">Typical path to</p>
+        <p class="g-pstyle2">Guangzhou</p>
+      </div>
+      <div
+        id="g-ai1-4"
+        class="g-sm-text g-aiAbs g-aiPointText"
+        style="top:71.9421%;margin-top:-17.6px;right:4.6892%;width:89px;"
+      >
+        <p class="g-pstyle2">Last known</p>
+        <p class="g-pstyle2">location</p>
+      </div>
+      <div
+        id="g-ai1-5"
+        class="g-sm-text g-aiAbs g-aiPointText"
+        style="top:87.0554%;margin-top:-17.6px;right:19.7924%;width:55px;"
+      >
+        <p class="g-pstyle2">Crash</p>
+        <p class="g-pstyle2">site</p>
+      </div>
+    </div>
+  {/if}
+  <!-- Artboard: md -->
+  {#if width && width >= 660 && width < 930}
+    <div id="g-CRASH_1-md" class="g-artboard" style="">
+      <div style="padding: 0 0 68.7879% 0;"></div>
+      <div
+        id="g-CRASH_1-md-img"
+        class="g-aiImg"
+        alt=""
+        style="{`background-image: url(${chartMd});`}"
+      ></div>
+      <div
+        id="g-ai2-1"
+        class="g-md-text g-aiAbs g-aiPointText"
+        style="top:17.1581%;margin-top:-13.9px;left:3.6766%;width:76px;"
+      >
+        <p class="g-pstyle0">Cruising at</p>
+        <p class="g-pstyle0">29,100 feet</p>
+      </div>
+      <div
+        id="g-ai2-2"
+        class="g-md-text g-aiAbs g-aiPointText"
+        style="top:20.0216%;margin-top:-13.9px;left:19.6076%;width:92px;"
+      >
+        <p class="g-pstyle1">2.20 pm</p>
+        <p class="g-pstyle0">Slight descent</p>
+      </div>
+      <div
+        id="g-ai2-3"
+        class="g-md-text g-aiAbs g-aiPointText"
+        style="top:24.1477%;margin-top:-20.6px;left:34.5493%;width:102px;"
+      >
+        <p class="g-pstyle1">2.21 pm</p>
+        <p class="g-pstyle0">Steep drop from</p>
+        <p class="g-pstyle0">27,025 feet</p>
+      </div>
+      <div
+        id="g-ai2-4"
+        class="g-md-text g-aiAbs g-aiPointText"
+        style="top:46.8149%;margin-top:-14.5px;right:2.8165%;width:95px;"
+      >
+        <p class="g-pstyle2">Typical path to</p>
+        <p class="g-pstyle2">Guangzhou</p>
+      </div>
+      <div
+        id="g-ai2-5"
+        class="g-md-text g-aiAbs g-aiPointText"
+        style="top:80.0748%;margin-top:-14.5px;left:84.28%;width:79px;"
+      >
+        <p class="g-pstyle0">Last known</p>
+        <p class="g-pstyle0">location</p>
+      </div>
+      <div
+        id="g-ai2-6"
+        class="g-md-text g-aiAbs g-aiPointText"
+        style="top:87.5638%;margin-top:-14.5px;right:22.3457%;width:86px;"
+      >
+        <p class="g-pstyle2">Approximate</p>
+        <p class="g-pstyle2">crash site</p>
+      </div>
+    </div>
+  {/if}
+  <!-- Artboard: lg -->
+  {#if width && width >= 930 && width < 1200}
+    <div id="g-CRASH_1-lg" class="g-artboard" style="">
+      <div style="padding: 0 0 61.3978% 0;"></div>
+      <div
+        id="g-CRASH_1-lg-img"
+        class="g-aiImg"
+        alt=""
+        style="{`background-image: url(${chartLg});`}"
+      ></div>
+      <div
+        id="g-ai3-1"
+        class="g-lg-text g-aiAbs g-aiPointText"
+        style="top:16.9729%;margin-top:-17.9px;left:4.0448%;width:90px;"
+      >
+        <p class="g-pstyle0">Cruising at</p>
+        <p class="g-pstyle0">29,100 feet</p>
+      </div>
+      <div
+        id="g-ai3-2"
+        class="g-lg-text g-aiAbs g-aiPointText"
+        style="top:20.3004%;margin-top:-17.9px;left:27.525%;width:111px;"
+      >
+        <p class="g-pstyle1">2.20 pm</p>
+        <p class="g-pstyle2">Slight descent</p>
+      </div>
+      <div
+        id="g-ai3-3"
+        class="g-lg-text g-aiAbs g-aiPointText"
+        style="top:24.5911%;margin-top:-26.4px;left:40.9124%;width:124px;"
+      >
+        <p class="g-pstyle1">2.21 pm</p>
+        <p class="g-pstyle2">Steep drop from</p>
+        <p class="g-pstyle2">27,025 feet</p>
+      </div>
+      <div
+        id="g-ai3-4"
+        class="g-lg-text g-aiAbs g-aiPointText"
+        style="top:47.2373%;margin-top:-18.7px;right:2.986%;width:114px;"
+      >
+        <p class="g-pstyle3">Typical path to</p>
+        <p class="g-pstyle3">Guangzhou</p>
+      </div>
+      <div
+        id="g-ai3-5"
+        class="g-lg-text g-aiAbs g-aiPointText"
+        style="top:80.6874%;margin-top:-18.7px;left:85.4704%;width:94px;"
+      >
+        <p class="g-pstyle2">Last known</p>
+        <p class="g-pstyle2">location</p>
+      </div>
+      <div
+        id="g-ai3-6"
+        class="g-lg-text g-aiAbs g-aiPointText"
+        style="top:88.0429%;margin-top:-18.7px;right:20.5522%;width:102px;"
+      >
+        <p class="g-pstyle3">Approximate</p>
+        <p class="g-pstyle3">crash site</p>
+      </div>
+    </div>
+  {/if}
+  <!-- Artboard: xl -->
+  {#if width && width >= 1200 && width < 1350}
+    <div id="g-CRASH_1-xl" class="g-artboard" style="">
+      <div style="padding: 0 0 47% 0;"></div>
+      <div
+        id="g-CRASH_1-xl-img"
+        class="g-aiImg"
+        alt=""
+        style="{`background-image: url(${chartXl});`}"
+      ></div>
+      <div
+        id="g-ai4-1"
+        class="g-xl-text g-aiAbs g-aiPointText"
+        style="top:16.4851%;margin-top:-19px;left:21.0319%;width:95px;"
+      >
+        <p class="g-pstyle0">Cruising at</p>
+        <p class="g-pstyle0">29,100 feet</p>
+      </div>
+      <div
+        id="g-ai4-2"
+        class="g-xl-text g-aiAbs g-aiPointText"
+        style="top:20.1977%;margin-top:-17.9px;left:38.5203%;width:111px;"
+      >
+        <p class="g-pstyle1">2.20 pm</p>
+        <p class="g-pstyle2">Slight descent</p>
+      </div>
+      <div
+        id="g-ai4-3"
+        class="g-xl-text g-aiAbs g-aiPointText"
+        style="top:24.5417%;margin-top:-26.4px;left:48.8956%;width:124px;"
+      >
+        <p class="g-pstyle1">2.21 pm</p>
+        <p class="g-pstyle2">Steep drop from</p>
+        <p class="g-pstyle2">27,025 feet</p>
+      </div>
+      <div
+        id="g-ai4-4"
+        class="g-xl-text g-aiAbs g-aiPointText"
+        style="top:53.1427%;margin-top:-18.7px;right:2.0477%;width:114px;"
+      >
+        <p class="g-pstyle3">Typical path to</p>
+        <p class="g-pstyle3">Guangzhou</p>
+      </div>
+      <div
+        id="g-ai4-5"
+        class="g-xl-text g-aiAbs g-aiPointText"
+        style="top:81.3342%;margin-top:-18.7px;left:83.4281%;width:94px;"
+      >
+        <p class="g-pstyle2">Last known</p>
+        <p class="g-pstyle2">location</p>
+      </div>
+      <div
+        id="g-ai4-6"
+        class="g-xl-text g-aiAbs g-aiPointText"
+        style="top:88.781%;margin-top:-18.7px;right:21.2395%;width:102px;"
+      >
+        <p class="g-pstyle3">Approximate</p>
+        <p class="g-pstyle3">crash site</p>
+      </div>
+    </div>
+  {/if}
+  <!-- Artboard: xl_copy -->
+  {#if width && width >= 1350}
+    <div id="g-CRASH_1-xl_copy" class="g-artboard" style="">
+      <div style="padding: 0 0 46.8889% 0;"></div>
+      <div
+        id="g-CRASH_1-xl_copy-img"
+        class="g-aiImg"
+        alt=""
+        style="{`background-image: url(${chartXxl});`}"
+      ></div>
+      <div
+        id="g-ai5-1"
+        class="g-xxl-text g-aiAbs g-aiPointText"
+        style="top:13.5823%;margin-top:-19px;left:17.5449%;width:95px;"
+      >
+        <p class="g-pstyle0">Cruising at</p>
+        <p class="g-pstyle0">29,100 feet</p>
+      </div>
+      <div
+        id="g-ai5-2"
+        class="g-xxl-text g-aiAbs g-aiPointText"
+        style="top:16.11%;margin-top:-19px;left:34.2801%;width:117px;"
+      >
+        <p class="g-pstyle1">2.20 pm</p>
+        <p class="g-pstyle0">Slight descent</p>
+      </div>
+      <div
+        id="g-ai5-3"
+        class="g-xxl-text g-aiAbs g-aiPointText"
+        style="top:20.5333%;margin-top:-28px;left:45.3329%;width:130px;"
+      >
+        <p class="g-pstyle1">2.21 pm</p>
+        <p class="g-pstyle0">Steep drop from</p>
+        <p class="g-pstyle0">27,025 feet</p>
+      </div>
+      <div
+        id="g-ai5-4"
+        class="g-xxl-text g-aiAbs g-aiPointText"
+        style="top:51.1596%;margin-top:-19.8px;right:2.3384%;width:121px;"
+      >
+        <p class="g-pstyle2">Typical path to</p>
+        <p class="g-pstyle2">Guangzhou</p>
+      </div>
+      <div
+        id="g-ai5-5"
+        class="g-xxl-text g-aiAbs g-aiPointText"
+        style="top:81.3333%;margin-top:-19.8px;left:82.1208%;width:98px;"
+      >
+        <p class="g-pstyle0">Last known</p>
+        <p class="g-pstyle0">location</p>
+      </div>
+      <div
+        id="g-ai5-6"
+        class="g-xxl-text g-aiAbs g-aiPointText"
+        style="top:89.3902%;margin-top:-19.8px;right:22.7998%;width:108px;"
+      >
+        <p class="g-pstyle2">Approximate</p>
+        <p class="g-pstyle2">crash site</p>
+      </div>
+    </div>
+  {/if}
+</div>
+
+<!-- End ai2html - 2022-03-29 17:01 -->
+
+<!-- ai file: CRASH_1.ai -->
+<style lang="scss">
+  #g-CRASH_1-box,
+  #g-CRASH_1-box .g-artboard {
+    margin: 0 auto;
+  }
+  #g-CRASH_1-box p {
+    margin: 0;
+  }
+  #g-CRASH_1-box .g-aiAbs {
+    position: absolute;
+  }
+  #g-CRASH_1-box .g-aiImg {
+    position: absolute;
+    top: 0;
+    display: block;
+    width: 100% !important;
+    height: 100%;
+    background-size: contain;
+    background-repeat: no-repeat;
+  }
+  #g-CRASH_1-box .g-aiPointText p {
+    white-space: nowrap;
+  }
+  #g-CRASH_1-xs {
+    position: relative;
+    overflow: hidden;
+  }
+  #g-CRASH_1-xs p {
+    font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
+      'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    font-weight: 400;
+    line-height: 14px;
+    height: auto;
+    opacity: 1;
+    letter-spacing: 0em;
+    font-size: 12px;
+    text-align: left;
+    color: rgb(255, 255, 255);
+    text-transform: none;
+    padding-bottom: 0;
+    padding-top: 0;
+    mix-blend-mode: normal;
+    font-style: normal;
+    position: static;
+  }
+  #g-CRASH_1-xs .g-pstyle0 {
+    height: 14px;
+  }
+  #g-CRASH_1-xs .g-pstyle1 {
+    font-weight: 700;
+    height: 14px;
+  }
+  #g-CRASH_1-xs .g-pstyle2 {
+    height: 14px;
+    text-align: right;
+  }
+  #g-CRASH_1-sm {
+    position: relative;
+    overflow: hidden;
+  }
+  #g-CRASH_1-sm p {
+    font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
+      'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    font-weight: 400;
+    line-height: 16px;
+    height: auto;
+    opacity: 1;
+    letter-spacing: 0em;
+    font-size: 14px;
+    text-align: left;
+    color: rgb(255, 255, 255);
+    text-transform: none;
+    padding-bottom: 0;
+    padding-top: 0;
+    mix-blend-mode: normal;
+    font-style: normal;
+    position: static;
+  }
+  #g-CRASH_1-sm .g-pstyle0 {
+    height: 16px;
+  }
+  #g-CRASH_1-sm .g-pstyle1 {
+    font-weight: 700;
+    height: 16px;
+  }
+  #g-CRASH_1-sm .g-pstyle2 {
+    height: 16px;
+    text-align: right;
+  }
+  #g-CRASH_1-md {
+    position: relative;
+    overflow: hidden;
+  }
+  #g-CRASH_1-md p {
+    font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
+      'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    font-weight: 400;
+    line-height: 13px;
+    height: auto;
+    opacity: 1;
+    letter-spacing: 0em;
+    font-size: 12px;
+    text-align: left;
+    color: rgb(255, 255, 255);
+    text-transform: none;
+    padding-bottom: 0;
+    padding-top: 0;
+    mix-blend-mode: normal;
+    font-style: normal;
+    position: static;
+  }
+  #g-CRASH_1-md .g-pstyle0 {
+    height: 13px;
+  }
+  #g-CRASH_1-md .g-pstyle1 {
+    font-weight: 700;
+    height: 13px;
+  }
+  #g-CRASH_1-md .g-pstyle2 {
+    height: 13px;
+    text-align: right;
+  }
+  #g-CRASH_1-lg {
+    position: relative;
+    overflow: hidden;
+  }
+  #g-CRASH_1-lg p {
+    font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
+      'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    font-weight: 400;
+    line-height: 17px;
+    height: auto;
+    opacity: 1;
+    letter-spacing: 0em;
+    font-size: 15px;
+    text-align: left;
+    color: rgb(255, 255, 255);
+    text-transform: none;
+    padding-bottom: 0;
+    padding-top: 0;
+    mix-blend-mode: normal;
+    font-style: normal;
+    position: static;
+  }
+  #g-CRASH_1-lg .g-pstyle0 {
+    height: 17px;
+    color: rgb(88, 89, 91);
+  }
+  #g-CRASH_1-lg .g-pstyle1 {
+    font-weight: 700;
+    height: 17px;
+  }
+  #g-CRASH_1-lg .g-pstyle2 {
+    height: 17px;
+  }
+  #g-CRASH_1-lg .g-pstyle3 {
+    height: 17px;
+    text-align: right;
+  }
+  #g-CRASH_1-xl {
+    position: relative;
+    overflow: hidden;
+  }
+  #g-CRASH_1-xl p {
+    font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
+      'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    font-weight: 400;
+    line-height: 17px;
+    height: auto;
+    opacity: 1;
+    letter-spacing: 0em;
+    font-size: 15px;
+    text-align: left;
+    color: rgb(255, 255, 255);
+    text-transform: none;
+    padding-bottom: 0;
+    padding-top: 0;
+    mix-blend-mode: normal;
+    font-style: normal;
+    position: static;
+  }
+  #g-CRASH_1-xl .g-pstyle0 {
+    line-height: 18px;
+    height: 18px;
+    font-size: 16px;
+  }
+  #g-CRASH_1-xl .g-pstyle1 {
+    font-weight: 700;
+    height: 17px;
+  }
+  #g-CRASH_1-xl .g-pstyle2 {
+    height: 17px;
+  }
+  #g-CRASH_1-xl .g-pstyle3 {
+    height: 17px;
+    text-align: right;
+  }
+  #g-CRASH_1-xl_copy {
+    position: relative;
+    overflow: hidden;
+  }
+  #g-CRASH_1-xl_copy p {
+    font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
+      'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    font-weight: 400;
+    line-height: 18px;
+    height: auto;
+    opacity: 1;
+    letter-spacing: 0em;
+    font-size: 16px;
+    text-align: left;
+    color: rgb(255, 255, 255);
+    text-transform: none;
+    padding-bottom: 0;
+    padding-top: 0;
+    mix-blend-mode: normal;
+    font-style: normal;
+    position: static;
+  }
+  #g-CRASH_1-xl_copy .g-pstyle0 {
+    height: 18px;
+  }
+  #g-CRASH_1-xl_copy .g-pstyle1 {
+    font-weight: 700;
+    height: 18px;
+  }
+  #g-CRASH_1-xl_copy .g-pstyle2 {
+    height: 18px;
+    text-align: right;
+  }
+
+  /* Custom CSS */
+</style>
diff --git a/src/components/HeroHeadline/stories/graphics/quake-map-top-lg.jpeg b/src/components/HeroHeadline/stories/graphics/quake-map-top-lg.jpeg
new file mode 100644
index 00000000..67096d62
Binary files /dev/null and b/src/components/HeroHeadline/stories/graphics/quake-map-top-lg.jpeg differ
diff --git a/src/components/HeroHeadline/stories/graphics/quake-map-top-md.jpeg b/src/components/HeroHeadline/stories/graphics/quake-map-top-md.jpeg
new file mode 100644
index 00000000..157b8b37
Binary files /dev/null and b/src/components/HeroHeadline/stories/graphics/quake-map-top-md.jpeg differ
diff --git a/src/components/HeroHeadline/stories/graphics/quake-map-top-sm.jpeg b/src/components/HeroHeadline/stories/graphics/quake-map-top-sm.jpeg
new file mode 100644
index 00000000..f93377af
Binary files /dev/null and b/src/components/HeroHeadline/stories/graphics/quake-map-top-sm.jpeg differ
diff --git a/src/components/HeroHeadline/stories/graphics/quake-map-top-xl.jpeg b/src/components/HeroHeadline/stories/graphics/quake-map-top-xl.jpeg
new file mode 100644
index 00000000..a150f58d
Binary files /dev/null and b/src/components/HeroHeadline/stories/graphics/quake-map-top-xl.jpeg differ
diff --git a/src/components/HeroHeadline/stories/graphics/quake-map-top-xs.jpeg b/src/components/HeroHeadline/stories/graphics/quake-map-top-xs.jpeg
new file mode 100644
index 00000000..34601bd1
Binary files /dev/null and b/src/components/HeroHeadline/stories/graphics/quake-map-top-xs.jpeg differ
diff --git a/src/components/HeroHeadline/stories/graphics/quakemap.svelte b/src/components/HeroHeadline/stories/graphics/quakemap.svelte
new file mode 100644
index 00000000..fe156865
--- /dev/null
+++ b/src/components/HeroHeadline/stories/graphics/quakemap.svelte
@@ -0,0 +1,828 @@
+<script>
+  export let assetsPath = './';
+  let width = null;
+
+  // @ts-ignore
+  import chartXs from './quake-map-top-xs.jpeg';
+  // @ts-ignore
+  import chartSm from './quake-map-top-sm.jpeg';
+  // @ts-ignore
+  import chartMd from '././quake-map-top-md.jpeg';
+  // @ts-ignore
+  import chartLg from '././quake-map-top-lg.jpeg';
+  // @ts-ignore
+  import chartXl from '././quake-map-top-xl.jpeg';
+</script>
+
+<div id="g-quake-map-top-box" bind:clientWidth="{width}">
+  <!-- Artboard: xs -->
+  {#if width && width >= 0 && width < 510}
+    <div id="g-quake-map-top-xs" class="g-artboard" style="">
+      <div style="padding: 0 0 117.5758% 0;"></div>
+      <div
+        id="g-quake-map-top-xs-img"
+        class="g-aiImg"
+        alt=""
+        style="{`background-image: url(${chartXs});`}"
+      ></div>
+      <div
+        id="g-ai0-1"
+        class="g-tt g-aiAbs g-aiPointText"
+        style="top:-1.3529%;margin-top:-6.8px;left:33.0848%;width:46px;"
+      >
+        <p class="g-pstyle0">Kabul</p>
+      </div>
+      <div
+        id="g-ai0-2"
+        class="g-tt g-aiAbs g-aiPointText"
+        style="top:4.3062%;margin-top:-7.7px;left:4.0902%;width:65px;"
+      >
+        <p class="g-pstyle1">Shaking</p>
+      </div>
+      <div
+        id="g-ai0-3"
+        class="g-tt g-aiAbs g-aiPointText"
+        style="top:8.1722%;margin-top:-7.7px;left:4.0902%;width:78px;"
+      >
+        <p class="g-pstyle2">Very strong</p>
+      </div>
+      <div
+        id="g-ai0-4"
+        class="g-tt g-aiAbs g-aiPointText"
+        style="top:19.5124%;margin-top:-7.7px;left:4.0902%;width:49px;"
+      >
+        <p class="g-pstyle2">Weak</p>
+      </div>
+      <div
+        id="g-ai0-5"
+        class="g-tt g-aiAbs g-aiPointText"
+        style="top:22.4511%;margin-top:-5.1px;left:45.2353%;margin-left:-74px;width:148px;"
+      >
+        <p class="g-pstyle3">AFGHANISTAN</p>
+      </div>
+      <div
+        id="g-ai0-6"
+        class="g-tt g-aiAbs g-aiPointText"
+        style="top:29.7371%;margin-top:-8.4px;left:34.8676%;width:56px;"
+      >
+        <p class="g-pstyle4">Gardez</p>
+      </div>
+      <div
+        id="g-ai0-7"
+        class="g-tt g-aiAbs g-aiPointText"
+        style="top:39.2732%;margin-top:-8.4px;left:65.8508%;width:50px;"
+      >
+        <p class="g-pstyle4">Khost</p>
+      </div>
+      <div
+        id="g-ai0-8"
+        class="g-tt g-aiAbs g-aiPointText"
+        style="top:45.9742%;margin-top:-8.4px;left:46.1799%;width:73px;"
+      >
+        <p class="g-pstyle5">Epicentre</p>
+      </div>
+      <div
+        id="g-ai0-9"
+        class="g-tt g-aiAbs g-aiPointText"
+        style="top:49.8402%;margin-top:-8.4px;left:93.2747%;margin-left:-27px;width:54px;"
+      >
+        <p class="g-pstyle6">Bannu</p>
+      </div>
+      <div
+        id="g-ai0-10"
+        class="g-tt g-aiAbs g-aiPointText"
+        style="top:63.4369%;margin-top:-5.1px;left:65.9996%;margin-left:-50px;width:100px;"
+      >
+        <p class="g-pstyle7">PAKISTAN</p>
+      </div>
+    </div>
+  {/if}
+  <!-- Artboard: sm -->
+  {#if width && width >= 510 && width < 660}
+    <div id="g-quake-map-top-sm" class="g-artboard" style="">
+      <div style="padding: 0 0 83.5294% 0;"></div>
+      <div
+        id="g-quake-map-top-sm-img"
+        class="g-aiImg"
+        alt=""
+        style="{`background-image: url(${chartSm});`}"
+      ></div>
+      <div
+        id="g-ai1-1"
+        class="g-tt g-aiAbs g-aiPointText"
+        style="top:5.3132%;margin-top:-8.6px;left:3.5997%;width:71px;"
+      >
+        <p class="g-pstyle0">Shaking</p>
+      </div>
+      <div
+        id="g-ai1-2"
+        class="g-tt g-aiAbs g-aiPointText"
+        style="top:9.3038%;margin-top:-8.6px;left:3.5997%;width:86px;"
+      >
+        <p class="g-pstyle1">Very strong</p>
+      </div>
+      <div
+        id="g-ai1-3"
+        class="g-tt g-aiAbs g-aiPointText"
+        style="top:18.8592%;margin-top:-5.3px;left:41.2699%;margin-left:-91.5px;width:183px;"
+      >
+        <p class="g-pstyle2">AFGHANISTAN</p>
+      </div>
+      <div
+        id="g-ai1-4"
+        class="g-tt g-aiAbs g-aiPointText"
+        style="top:21.2757%;margin-top:-8.6px;left:3.5997%;width:53px;"
+      >
+        <p class="g-pstyle1">Weak</p>
+      </div>
+      <div
+        id="g-ai1-5"
+        class="g-tt g-aiAbs g-aiPointText"
+        style="top:30.6101%;margin-top:-9.4px;left:40.186%;width:61px;"
+      >
+        <p class="g-pstyle3">Gardez</p>
+      </div>
+      <div
+        id="g-ai1-6"
+        class="g-tt g-aiAbs g-aiPointText"
+        style="top:34.8355%;margin-top:-9.4px;left:9.9042%;width:60px;"
+      >
+        <p class="g-pstyle3">Ghazni</p>
+      </div>
+      <div
+        id="g-ai1-7"
+        class="g-tt g-aiAbs g-aiPointText"
+        style="top:40.4693%;margin-top:-9.4px;left:63.0024%;width:54px;"
+      >
+        <p class="g-pstyle3">Khost</p>
+      </div>
+      <div
+        id="g-ai1-8"
+        class="g-tt g-aiAbs g-aiPointText"
+        style="top:47.2768%;margin-top:-9.4px;left:48.5165%;width:80px;"
+      >
+        <p class="g-pstyle4">Epicentre</p>
+      </div>
+      <div
+        id="g-ai1-9"
+        class="g-tt g-aiAbs g-aiPointText"
+        style="top:50.7979%;margin-top:-9.4px;left:82.1761%;margin-left:-29px;width:58px;"
+      >
+        <p class="g-pstyle5">Bannu</p>
+      </div>
+      <div
+        id="g-ai1-10"
+        class="g-tt g-aiAbs g-aiPointText"
+        style="top:68.3897%;margin-top:-5.3px;left:73.6919%;margin-left:-67.5px;width:135px;"
+      >
+        <p class="g-pstyle2">PAKISTAN</p>
+      </div>
+    </div>
+  {/if}
+  <!-- Artboard: md -->
+  {#if width && width >= 660 && width < 1200}
+    <div id="g-quake-map-top-md" class="g-artboard" style="">
+      <div style="padding: 0 0 91.8182% 0;"></div>
+      <div
+        id="g-quake-map-top-md-img"
+        class="g-aiImg"
+        alt=""
+        style="{`background-image: url(${chartMd});`}"
+      ></div>
+      <div
+        id="g-ai2-1"
+        class="g-tt g-aiAbs g-aiPointText"
+        style="top:3.5477%;margin-top:-7.5px;left:2.6635%;width:62px;"
+      >
+        <p class="g-pstyle0">Shaking</p>
+      </div>
+      <div
+        id="g-ai2-2"
+        class="g-tt g-aiAbs g-aiPointText"
+        style="top:6.188%;margin-top:-7.5px;left:2.6635%;width:74px;"
+      >
+        <p class="g-pstyle1">Very strong</p>
+      </div>
+      <div
+        id="g-ai2-3"
+        class="g-tt g-aiAbs g-aiPointText"
+        style="top:7.0759%;margin-top:-6.9px;right:6.4574%;width:100px;"
+      >
+        <p class="g-pstyle2">Afghanistan</p>
+      </div>
+      <div
+        id="g-ai2-4"
+        class="g-tt g-aiAbs g-aiPointText"
+        style="top:15.2639%;margin-top:-7.5px;left:2.6635%;width:47px;"
+      >
+        <p class="g-pstyle1">Weak</p>
+      </div>
+      <div
+        id="g-ai2-5"
+        class="g-tt g-aiAbs g-aiPointText"
+        style="top:18.7377%;margin-top:-7.6px;left:38.071%;margin-left:-136.5px;width:273px;"
+      >
+        <p class="g-pstyle3">AFGHANISTAN</p>
+      </div>
+      <div
+        id="g-ai2-6"
+        class="g-tt g-aiAbs g-aiPointText"
+        style="top:30.2476%;margin-top:-10.3px;left:38.0816%;width:63px;"
+      >
+        <p class="g-pstyle4">Gardez</p>
+      </div>
+      <div
+        id="g-ai2-7"
+        class="g-tt g-aiAbs g-aiPointText"
+        style="top:33.8779%;margin-top:-10.3px;left:9.3056%;margin-left:-31px;width:62px;"
+      >
+        <p class="g-pstyle5">Ghazni</p>
+      </div>
+      <div
+        id="g-ai2-8"
+        class="g-tt g-aiAbs g-aiPointText"
+        style="top:40.1486%;margin-top:-10.3px;left:63.0563%;width:55px;"
+      >
+        <p class="g-pstyle4">Khost</p>
+      </div>
+      <div
+        id="g-ai2-9"
+        class="g-tt g-aiAbs g-aiPointText"
+        style="top:47.1569%;margin-top:-10.8px;left:47.4444%;width:86px;"
+      >
+        <p class="g-pstyle6">Epicentre</p>
+      </div>
+      <div
+        id="g-ai2-10"
+        class="g-tt g-aiAbs g-aiPointText"
+        style="top:50.8746%;margin-top:-10.3px;left:84.5785%;margin-left:-30px;width:60px;"
+      >
+        <p class="g-pstyle5">Bannu</p>
+      </div>
+      <div
+        id="g-ai2-11"
+        class="g-tt g-aiAbs g-aiPointText"
+        style="top:62.467%;margin-top:-7.6px;left:80.6735%;margin-left:-100px;width:200px;"
+      >
+        <p class="g-pstyle3">PAKISTAN</p>
+      </div>
+    </div>
+  {/if}
+  <!-- Artboard: lg -->
+  {#if width && width >= 1200 && width < 1300}
+    <div id="g-quake-map-top-lg" class="g-artboard" style="">
+      <div style="padding: 0 0 55.1667% 0;"></div>
+      <div
+        id="g-quake-map-top-lg-img"
+        class="g-aiImg"
+        alt=""
+        style="{`background-image: url(${chartLg});`}"
+      ></div>
+      <div
+        id="g-ai3-1"
+        class="g-tt g-aiAbs g-aiPointText"
+        style="top:4.1944%;margin-top:-8.8px;left:1.7817%;width:67px;"
+      >
+        <p class="g-pstyle0">Shaking</p>
+      </div>
+      <div
+        id="g-ai3-2"
+        class="g-tt g-aiAbs g-aiPointText"
+        style="top:6.9135%;margin-top:-8.8px;left:1.7817%;width:81px;"
+      >
+        <p class="g-pstyle1">Very strong</p>
+      </div>
+      <div
+        id="g-ai3-3"
+        class="g-tt g-aiAbs g-aiPointText"
+        style="top:7.006%;margin-top:-7.4px;right:4.4122%;width:100px;"
+      >
+        <p class="g-pstyle2">Afghanistan</p>
+      </div>
+      <div
+        id="g-ai3-4"
+        class="g-tt g-aiAbs g-aiPointText"
+        style="top:14.111%;margin-top:-8.4px;left:29.9587%;margin-left:-151px;width:302px;"
+      >
+        <p class="g-pstyle3">AFGHANISTAN</p>
+      </div>
+      <div
+        id="g-ai3-5"
+        class="g-tt g-aiAbs g-aiPointText"
+        style="top:16.128%;margin-top:-8.8px;left:1.7818%;width:51px;"
+      >
+        <p class="g-pstyle1">Weak</p>
+      </div>
+      <div
+        id="g-ai3-6"
+        class="g-tt g-aiAbs g-aiPointText"
+        style="top:28.2991%;margin-top:-11.3px;left:44.1554%;width:67px;"
+      >
+        <p class="g-pstyle4">Gardez</p>
+      </div>
+      <div
+        id="g-ai3-7"
+        class="g-tt g-aiAbs g-aiPointText"
+        style="top:31.9244%;margin-top:-11.3px;left:26.4286%;margin-left:-33px;width:66px;"
+      >
+        <p class="g-pstyle5">Ghazni</p>
+      </div>
+      <div
+        id="g-ai3-8"
+        class="g-tt g-aiAbs g-aiPointText"
+        style="top:37.676%;margin-top:-8.4px;left:85.4421%;margin-left:-110.5px;width:221px;"
+      >
+        <p class="g-pstyle3">PAKISTAN</p>
+      </div>
+      <div
+        id="g-ai3-9"
+        class="g-tt g-aiAbs g-aiPointText"
+        style="top:38.42%;margin-top:-11.3px;left:59.5142%;width:59px;"
+      >
+        <p class="g-pstyle4">Khost</p>
+      </div>
+      <div
+        id="g-ai3-10"
+        class="g-tt g-aiAbs g-aiPointText"
+        style="top:45.5991%;margin-top:-11.9px;left:49.9132%;width:94px;"
+      >
+        <p class="g-pstyle6">Epicentre</p>
+      </div>
+      <div
+        id="g-ai3-11"
+        class="g-tt g-aiAbs g-aiPointText"
+        style="top:53.9788%;margin-top:-11.3px;left:72.7294%;margin-left:-32px;width:64px;"
+      >
+        <p class="g-pstyle5">Bannu</p>
+      </div>
+    </div>
+  {/if}
+  <!-- Artboard: xl -->
+  {#if width && width >= 1300}
+    <div id="g-quake-map-top-xl" class="g-artboard" style="">
+      <div style="padding: 0 0 51.2308% 0;"></div>
+      <div
+        id="g-quake-map-top-xl-img"
+        class="g-aiImg"
+        alt=""
+        style="{`background-image: url(${chartXl});`}"
+      ></div>
+      <div
+        id="g-ai4-1"
+        class="g-tt g-aiAbs g-aiPointText"
+        style="top:3.8689%;margin-top:-8.8px;left:1.5293%;width:67px;"
+      >
+        <p class="g-pstyle0">Shaking</p>
+      </div>
+      <div
+        id="g-ai4-2"
+        class="g-tt g-aiAbs g-aiPointText"
+        style="top:6.063%;margin-top:-7.4px;right:4.342%;width:100px;"
+      >
+        <p class="g-pstyle1">Afghanistan</p>
+      </div>
+      <div
+        id="g-ai4-3"
+        class="g-tt g-aiAbs g-aiPointText"
+        style="top:6.5716%;margin-top:-8.8px;left:1.5293%;width:81px;"
+      >
+        <p class="g-pstyle2">Very strong</p>
+      </div>
+      <div
+        id="g-ai4-4"
+        class="g-tt g-aiAbs g-aiPointText"
+        style="top:13.726%;margin-top:-8.4px;left:30.8465%;margin-left:-151px;width:302px;"
+      >
+        <p class="g-pstyle3">AFGHANISTAN</p>
+      </div>
+      <div
+        id="g-ai4-5"
+        class="g-tt g-aiAbs g-aiPointText"
+        style="top:15.7308%;margin-top:-8.8px;left:1.5294%;width:51px;"
+      >
+        <p class="g-pstyle2">Weak</p>
+      </div>
+      <div
+        id="g-ai4-6"
+        class="g-tt g-aiAbs g-aiPointText"
+        style="top:27.8288%;margin-top:-11.3px;left:43.9511%;width:67px;"
+      >
+        <p class="g-pstyle4">Gardez</p>
+      </div>
+      <div
+        id="g-ai4-7"
+        class="g-tt g-aiAbs g-aiPointText"
+        style="top:31.4324%;margin-top:-11.3px;left:27.588%;margin-left:-33px;width:66px;"
+      >
+        <p class="g-pstyle5">Ghazni</p>
+      </div>
+      <div
+        id="g-ai4-8"
+        class="g-tt g-aiAbs g-aiPointText"
+        style="top:37.1494%;margin-top:-8.4px;left:82.0619%;margin-left:-110.5px;width:221px;"
+      >
+        <p class="g-pstyle3">PAKISTAN</p>
+      </div>
+      <div
+        id="g-ai4-9"
+        class="g-tt g-aiAbs g-aiPointText"
+        style="top:37.8889%;margin-top:-11.3px;left:58.1285%;width:59px;"
+      >
+        <p class="g-pstyle4">Khost</p>
+      </div>
+      <div
+        id="g-ai4-10"
+        class="g-tt g-aiAbs g-aiPointText"
+        style="top:45.025%;margin-top:-11.9px;left:49.2661%;width:94px;"
+      >
+        <p class="g-pstyle6">Epicentre</p>
+      </div>
+      <div
+        id="g-ai4-11"
+        class="g-tt g-aiAbs g-aiPointText"
+        style="top:53.3543%;margin-top:-11.3px;left:70.3271%;margin-left:-32px;width:64px;"
+      >
+        <p class="g-pstyle5">Bannu</p>
+      </div>
+    </div>
+  {/if}
+</div>
+
+<!-- End ai2html - 2022-06-24 21:49 -->
+
+<!-- Generated by ai2html v0.100.0 - 2022-06-24 21:49 -->
+<!-- ai file: quake-map-top.ai -->
+<style lang="scss">
+  #g-quake-map-top-box,
+  #g-quake-map-top-box .g-artboard {
+    margin: 0 auto;
+  }
+  #g-quake-map-top-box p {
+    margin: 0;
+  }
+  #g-quake-map-top-box .g-aiAbs {
+    position: absolute;
+  }
+  #g-quake-map-top-box .g-aiImg {
+    position: absolute;
+    top: 0;
+    display: block;
+    width: 100% !important;
+    height: 100%;
+    background-size: contain;
+    background-repeat: no-repeat;
+  }
+  #g-quake-map-top-box .g-aiPointText p {
+    white-space: nowrap;
+  }
+  #g-quake-map-top-xs {
+    position: relative;
+    overflow: hidden;
+  }
+  #g-quake-map-top-xs p {
+    font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
+      'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    font-weight: 300;
+    line-height: 14px;
+    height: auto;
+    opacity: 1;
+    letter-spacing: 0em;
+    font-size: 12px;
+    text-align: left;
+    color: rgb(120, 119, 120);
+    text-transform: none;
+    padding-bottom: 0;
+    padding-top: 0;
+    mix-blend-mode: normal;
+    font-style: normal;
+    position: static;
+  }
+  #g-quake-map-top-xs .g-pstyle0 {
+    font-weight: 700;
+    line-height: 11px;
+    height: 11px;
+    font-size: 9px;
+    color: rgb(0, 0, 0);
+  }
+  #g-quake-map-top-xs .g-pstyle1 {
+    font-weight: 600;
+    height: 14px;
+  }
+  #g-quake-map-top-xs .g-pstyle2 {
+    height: 14px;
+  }
+  #g-quake-map-top-xs .g-pstyle3 {
+    line-height: 7px;
+    height: 7px;
+    letter-spacing: 0.3em;
+    font-size: 14px;
+    text-align: center;
+    color: rgb(94, 94, 94);
+  }
+  #g-quake-map-top-xs .g-pstyle4 {
+    height: 14px;
+    color: rgb(64, 62, 61);
+  }
+  #g-quake-map-top-xs .g-pstyle5 {
+    font-weight: 700;
+    height: 14px;
+    color: rgb(255, 255, 255);
+  }
+  #g-quake-map-top-xs .g-pstyle6 {
+    height: 14px;
+    text-align: center;
+    color: rgb(64, 62, 61);
+  }
+  #g-quake-map-top-xs .g-pstyle7 {
+    line-height: 7px;
+    height: 7px;
+    letter-spacing: 0.3em;
+    text-align: center;
+    color: rgb(94, 94, 94);
+  }
+  #g-quake-map-top-sm {
+    position: relative;
+    overflow: hidden;
+  }
+  #g-quake-map-top-sm p {
+    font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
+      'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    font-weight: 300;
+    line-height: 7px;
+    height: auto;
+    opacity: 1;
+    letter-spacing: 0.4em;
+    font-size: 16px;
+    text-align: left;
+    color: rgb(94, 94, 94);
+    text-transform: none;
+    padding-bottom: 0;
+    padding-top: 0;
+    mix-blend-mode: normal;
+    font-style: normal;
+    position: static;
+  }
+  #g-quake-map-top-sm .g-pstyle0 {
+    font-weight: 600;
+    line-height: 16px;
+    height: 16px;
+    letter-spacing: 0em;
+    font-size: 14px;
+    color: rgb(94, 93, 92);
+  }
+  #g-quake-map-top-sm .g-pstyle1 {
+    line-height: 16px;
+    height: 16px;
+    letter-spacing: 0em;
+    font-size: 14px;
+    color: rgb(94, 93, 92);
+  }
+  #g-quake-map-top-sm .g-pstyle2 {
+    height: 7px;
+    text-align: center;
+  }
+  #g-quake-map-top-sm .g-pstyle3 {
+    line-height: 16px;
+    height: 16px;
+    letter-spacing: 0em;
+    font-size: 14px;
+    color: rgb(64, 62, 61);
+  }
+  #g-quake-map-top-sm .g-pstyle4 {
+    font-weight: 700;
+    line-height: 16px;
+    height: 16px;
+    letter-spacing: 0em;
+    font-size: 14px;
+    color: rgb(255, 255, 255);
+  }
+  #g-quake-map-top-sm .g-pstyle5 {
+    line-height: 16px;
+    height: 16px;
+    letter-spacing: 0em;
+    font-size: 14px;
+    text-align: center;
+    color: rgb(64, 62, 61);
+  }
+  #g-quake-map-top-md {
+    position: relative;
+    overflow: hidden;
+  }
+  #g-quake-map-top-md p {
+    font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
+      'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    font-weight: 300;
+    line-height: 11px;
+    height: auto;
+    opacity: 1;
+    letter-spacing: 0.7em;
+    font-size: 19px;
+    text-align: left;
+    color: rgb(94, 94, 94);
+    text-transform: none;
+    padding-bottom: 0;
+    padding-top: 0;
+    mix-blend-mode: normal;
+    font-style: normal;
+    position: static;
+  }
+  #g-quake-map-top-md .g-pstyle0 {
+    font-weight: 600;
+    line-height: 14px;
+    height: 14px;
+    letter-spacing: 0em;
+    font-size: 12px;
+    color: rgb(94, 93, 92);
+  }
+  #g-quake-map-top-md .g-pstyle1 {
+    line-height: 14px;
+    height: 14px;
+    letter-spacing: 0em;
+    font-size: 12px;
+    color: rgb(94, 93, 92);
+  }
+  #g-quake-map-top-md .g-pstyle2 {
+    font-weight: 400;
+    height: 11px;
+    letter-spacing: 0.05em;
+    font-size: 12px;
+    text-align: right;
+    text-transform: uppercase;
+    color: rgb(98, 100, 100);
+  }
+  #g-quake-map-top-md .g-pstyle3 {
+    height: 11px;
+    text-align: center;
+  }
+  #g-quake-map-top-md .g-pstyle4 {
+    line-height: 17px;
+    height: 17px;
+    letter-spacing: 0em;
+    font-size: 14px;
+    color: rgb(64, 62, 61);
+  }
+  #g-quake-map-top-md .g-pstyle5 {
+    line-height: 17px;
+    height: 17px;
+    letter-spacing: 0em;
+    font-size: 14px;
+    text-align: center;
+    color: rgb(64, 62, 61);
+  }
+  #g-quake-map-top-md .g-pstyle6 {
+    font-weight: 700;
+    line-height: 18px;
+    height: 18px;
+    letter-spacing: 0em;
+    font-size: 15px;
+    color: rgb(255, 255, 255);
+  }
+  #g-quake-map-top-lg {
+    position: relative;
+    overflow: hidden;
+  }
+  #g-quake-map-top-lg p {
+    font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
+      'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    font-weight: 300;
+    line-height: 12px;
+    height: auto;
+    opacity: 1;
+    letter-spacing: 0.7em;
+    font-size: 21px;
+    text-align: left;
+    color: rgb(94, 94, 94);
+    text-transform: none;
+    padding-bottom: 0;
+    padding-top: 0;
+    mix-blend-mode: normal;
+    font-style: normal;
+    position: static;
+  }
+  #g-quake-map-top-lg .g-pstyle0 {
+    font-weight: 600;
+    line-height: 16px;
+    height: 16px;
+    letter-spacing: 0em;
+    font-size: 13px;
+    color: rgb(94, 93, 92);
+  }
+  #g-quake-map-top-lg .g-pstyle1 {
+    line-height: 16px;
+    height: 16px;
+    letter-spacing: 0em;
+    font-size: 13px;
+    color: rgb(94, 93, 92);
+  }
+  #g-quake-map-top-lg .g-pstyle2 {
+    font-weight: 400;
+    height: 12px;
+    letter-spacing: 0.05em;
+    font-size: 12px;
+    text-align: right;
+    text-transform: uppercase;
+    color: rgb(98, 100, 100);
+  }
+  #g-quake-map-top-lg .g-pstyle3 {
+    height: 12px;
+    text-align: center;
+  }
+  #g-quake-map-top-lg .g-pstyle4 {
+    line-height: 19px;
+    height: 19px;
+    letter-spacing: 0em;
+    font-size: 16px;
+    color: rgb(64, 62, 61);
+  }
+  #g-quake-map-top-lg .g-pstyle5 {
+    line-height: 19px;
+    height: 19px;
+    letter-spacing: 0em;
+    font-size: 16px;
+    text-align: center;
+    color: rgb(64, 62, 61);
+  }
+  #g-quake-map-top-lg .g-pstyle6 {
+    font-weight: 700;
+    line-height: 20px;
+    height: 20px;
+    letter-spacing: 0em;
+    font-size: 17px;
+    color: rgb(255, 255, 255);
+  }
+  #g-quake-map-top-xl {
+    position: relative;
+    overflow: hidden;
+  }
+  #g-quake-map-top-xl p {
+    font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
+      'Segoe UI', Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    font-weight: 300;
+    line-height: 12px;
+    height: auto;
+    opacity: 1;
+    letter-spacing: 0.7em;
+    font-size: 21px;
+    text-align: left;
+    color: rgb(94, 94, 94);
+    text-transform: none;
+    padding-bottom: 0;
+    padding-top: 0;
+    mix-blend-mode: normal;
+    font-style: normal;
+    position: static;
+  }
+  #g-quake-map-top-xl .g-pstyle0 {
+    font-weight: 600;
+    line-height: 16px;
+    height: 16px;
+    letter-spacing: 0em;
+    font-size: 13px;
+    color: rgb(94, 93, 92);
+  }
+  #g-quake-map-top-xl .g-pstyle1 {
+    font-weight: 400;
+    height: 12px;
+    letter-spacing: 0.05em;
+    font-size: 12px;
+    text-align: right;
+    text-transform: uppercase;
+    color: rgb(98, 100, 100);
+  }
+  #g-quake-map-top-xl .g-pstyle2 {
+    line-height: 16px;
+    height: 16px;
+    letter-spacing: 0em;
+    font-size: 13px;
+    color: rgb(94, 93, 92);
+  }
+  #g-quake-map-top-xl .g-pstyle3 {
+    height: 12px;
+    text-align: center;
+  }
+  #g-quake-map-top-xl .g-pstyle4 {
+    line-height: 19px;
+    height: 19px;
+    letter-spacing: 0em;
+    font-size: 16px;
+    color: rgb(64, 62, 61);
+  }
+  #g-quake-map-top-xl .g-pstyle5 {
+    line-height: 19px;
+    height: 19px;
+    letter-spacing: 0em;
+    font-size: 16px;
+    text-align: center;
+    color: rgb(64, 62, 61);
+  }
+  #g-quake-map-top-xl .g-pstyle6 {
+    font-weight: 700;
+    line-height: 20px;
+    height: 20px;
+    letter-spacing: 0em;
+    font-size: 17px;
+    color: rgb(255, 255, 255);
+  }
+
+  /* Custom CSS */
+</style>
diff --git a/src/scss/reset/_typography.scss b/src/scss/reset/_typography.scss
index 0a97db56..4bc9dbaf 100644
--- a/src/scss/reset/_typography.scss
+++ b/src/scss/reset/_typography.scss
@@ -61,6 +61,10 @@ h6 {
   @include body-text;
 }
 
+text {
+  @include body-note;
+}
+
 p {
   @extend %body-type-block;
 }