diff --git a/src/components/BeforeAfter/BeforeAfter.svelte b/src/components/BeforeAfter/BeforeAfter.svelte
index 8853e725..03d0a302 100644
--- a/src/components/BeforeAfter/BeforeAfter.svelte
+++ b/src/components/BeforeAfter/BeforeAfter.svelte
@@ -38,6 +38,13 @@
    */
   export let afterAlt: string | null = null;
 
+  /**
+   * Set a class to target with SCSS.
+   * @type {string}
+   */
+  let cls: string = '';
+  export { cls as class };
+
   /** Drag handle colour */
   export let handleColour = 'white';
   /** Drag handle opacity */
@@ -153,11 +160,12 @@
 />
 
 {#if beforeSrc && beforeAlt && afterSrc && afterAlt}
-  <Block width="{width}" id="{id}" class="photo before-after">
+  <Block width="{width}" id="{id}" class="photo before-after fmy-6 {cls}">
     <div
       style="height: {containerHeight}px;"
       bind:clientWidth="{containerWidth}"
     >
+      <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
       <figure
         style="{figStyle}"
         class="before-after-container relative overflow-hidden my-0 mx-auto"
diff --git a/src/components/BodyText/BodyText.svelte b/src/components/BodyText/BodyText.svelte
index f65b299a..daee64b2 100644
--- a/src/components/BodyText/BodyText.svelte
+++ b/src/components/BodyText/BodyText.svelte
@@ -18,7 +18,7 @@
   import Block from '../Block/Block.svelte';
 </script>
 
-<Block id="{id}" class="fmy-5 {cls}">
+<Block id="{id}" class="fmy-6 {cls}">
   {#if text}
     {@html marked.parse(text)}
   {/if}
diff --git a/src/components/FeaturePhoto/FeaturePhoto.svelte b/src/components/FeaturePhoto/FeaturePhoto.svelte
index b221966f..2d002473 100644
--- a/src/components/FeaturePhoto/FeaturePhoto.svelte
+++ b/src/components/FeaturePhoto/FeaturePhoto.svelte
@@ -90,7 +90,7 @@
   });
 </script>
 
-<Block width="{width}" class="photo fmy-5 {cls}" id="{id}">
+<Block width="{width}" class="photo fmy-6 {cls}" id="{id}">
   <figure
     bind:this="{container}"
     aria-label="media"
diff --git a/src/components/GraphicBlock/GraphicBlock.svelte b/src/components/GraphicBlock/GraphicBlock.svelte
index 89490fa2..ea564382 100644
--- a/src/components/GraphicBlock/GraphicBlock.svelte
+++ b/src/components/GraphicBlock/GraphicBlock.svelte
@@ -79,7 +79,7 @@
   role="{role}"
   width="{width}"
   ariaLabel="{ariaLabel}"
-  class="graphic fmy-5 {cls}"
+  class="graphic fmy-6 {cls}"
 >
   {#if $$slots.title}
     <PaddingReset containerIsFluid="{width === 'fluid'}">
diff --git a/src/components/Headline/Headline.stories.svelte b/src/components/Headline/Headline.stories.svelte
index 5034fc44..4a6dd31a 100644
--- a/src/components/Headline/Headline.stories.svelte
+++ b/src/components/Headline/Headline.stories.svelte
@@ -108,7 +108,7 @@
       slot="crown"
       src="{crownImgSrc}"
       width="100"
-      class="mb-0"
+      class="mx-auto mb-0"
       alt="Illustration of Europe"
     />
     <!-- Override the hed with a named slot -->
diff --git a/src/components/Headline/Headline.svelte b/src/components/Headline/Headline.svelte
index 5f7bf7f7..a966ec8d 100644
--- a/src/components/Headline/Headline.svelte
+++ b/src/components/Headline/Headline.svelte
@@ -73,72 +73,68 @@
   }
 </script>
 
-<Block width="{width}" class="headline text-center fmt-7 fmb-5 {cls}">
-  <header class="relative">
-    {#if $$slots.crown}
-      <div class="crown-container">
-        <!-- Crown named slot -->
-        <slot name="crown" />
+<div class="headline-wrapper" style="display:contents;">
+  <Block width="{width}" class="headline text-center fmy-7 fmb-6 {cls}">
+    <header class="relative">
+      {#if $$slots.crown}
+        <div class="crown-container">
+          <!-- Crown named slot -->
+          <slot name="crown" />
+        </div>
+      {/if}
+      <div class="title">
+        {#if section}
+          <p
+            class="section-title mb-0 font-subhed text-xxs text-secondary font-bold uppercase whitespace-nowrap tracking-wider"
+          >
+            {section}
+          </p>
+        {/if}
+        {#if $$slots.hed}
+          <!-- Headline named slot -->
+          <slot name="hed" />
+        {:else}
+          <h1 class="{hedClass}">{@html marked.parseInline(hed)}</h1>
+        {/if}
+        {#if $$slots.dek}
+          <!-- Dek named slot-->
+          <div class="dek fmx-auto fmb-5">
+            <slot name="dek" />
+          </div>
+        {:else if dek}
+          <div class="dek fmx-auto fmb-5">
+            {@html marked(dek)}
+          </div>
+        {/if}
       </div>
-    {/if}
-    <div class="title">
-      {#if section}
-        <p
-          class="section-title mb-0 font-subhed text-xxs text-secondary font-bold uppercase whitespace-nowrap tracking-wider"
-        >
-          {section}
-        </p>
+      {#if $$slots.byline}
+        <!-- Custom byline/dateline -->
+        <slot name="byline" />
+      {:else if authors.length > 0 || publishTime}
+        <Byline
+          class="fmy-3"
+          authors="{authors}"
+          publishTime="{publishTime}"
+          updateTime="{updateTime}"
+          align="center"
+        />
       {/if}
-      {#if $$slots.hed}
-        <!-- Headline named slot -->
-        <slot name="hed" />
-      {:else}
-        <h1 class="{hedClass}">{@html marked.parseInline(hed)}</h1>
-      {/if}
-      {#if $$slots.dek}
-        <!-- Dek named slot-->
-        <div class="dek fmx-auto fmb-5">
-          <slot name="dek" />
-        </div>
-      {:else if dek}
-        <div class="dek fmx-auto fmb-5">
-          {@html marked(dek)}
-        </div>
-      {/if}
-    </div>
-    {#if $$slots.byline}
-      <!-- Custom byline/dateline -->
-      <slot name="byline" />
-    {:else if authors.length > 0 || publishTime}
-      <Byline
-        class="fmy-3"
-        authors="{authors}"
-        publishTime="{publishTime}"
-        updateTime="{updateTime}"
-        align="center"
-      />
-    {/if}
-  </header>
-</Block>
+    </header>
+  </Block>
+</div>
 
 <style lang="scss">
   @use '../../scss/mixins' as *;
-
-  :global {
-    header {
-      .dek {
-        max-width: $column-width-normal;
-        p {
-          @include fmt-0;
-          @include fmb-3;
-          @include font-note;
-          @include text-base;
-          @include font-regular;
-          @include leading-tight;
-          @include text-primary;
-          @include font-light;
-        }
-      }
+  .headline-wrapper {
+    :global(.dek) {
+      max-width: $column-width-normal;
+    }
+    :global(.dek p) {
+      @include fmt-0;
+      @include font-note;
+      @include leading-tight;
+      @include font-light;
+      @include fmb-3;
     }
   }
 </style>
diff --git a/src/components/Headline/stories/docs/withCrownImage.md b/src/components/Headline/stories/docs/withCrownImage.md
index e8becaaa..f705d9cb 100644
--- a/src/components/Headline/stories/docs/withCrownImage.md
+++ b/src/components/Headline/stories/docs/withCrownImage.md
@@ -12,7 +12,7 @@ Add a crown image in the `crown` named slot and override the headline in the `he
     slot="crown"
     src="{crownImgSrc}"
     width="100"
-    class="mb-0"
+    class="mx-auto mb-0"
     alt="Illustration of Europe"
   />
   <!-- Override the hed with a named slot -->
diff --git a/src/components/HeroHeadline/Hero.svelte b/src/components/HeroHeadline/Hero.svelte
index bb2cffde..353c40b3 100644
--- a/src/components/HeroHeadline/Hero.svelte
+++ b/src/components/HeroHeadline/Hero.svelte
@@ -159,7 +159,7 @@
       </Block>
       {#if notes}
         <TextBlock width="normal">
-          <aside class="fmt-2">
+          <aside>
             {@html marked(notes)}
           </aside>
         </TextBlock>
@@ -226,6 +226,10 @@
       position: relative;
     }
 
+    :global(.hero-headline) {
+      overflow-x: hidden;
+    }
+
     :global(.background-hero .headline) {
       @include fmt-0;
       z-index: 1;
diff --git a/src/components/NoteText/NoteText.svelte b/src/components/NoteText/NoteText.svelte
index 354b763a..f5223367 100644
--- a/src/components/NoteText/NoteText.svelte
+++ b/src/components/NoteText/NoteText.svelte
@@ -11,7 +11,7 @@
   import Block from '../Block/Block.svelte';
 </script>
 
-<Block class="notes fmt-5 fmb-7">
+<Block class="notes fmt-6 fmb-8">
   {#if text}
     {@html marked.parse(text)}
   {/if}
@@ -37,6 +37,7 @@
 
     p {
       @include body-caption;
+      @include fmt-0;
     }
   }
 </style>
diff --git a/src/components/PhotoCarousel/PhotoCarousel.svelte b/src/components/PhotoCarousel/PhotoCarousel.svelte
index 4f91b640..2d99346d 100644
--- a/src/components/PhotoCarousel/PhotoCarousel.svelte
+++ b/src/components/PhotoCarousel/PhotoCarousel.svelte
@@ -97,7 +97,7 @@
   };
 </script>
 
-<Block width="{width}" id="{id}" class="photo-carousel fmy-5 {cls}">
+<Block width="{width}" id="{id}" class="photo-carousel fmy-6 {cls}">
   <div class="carousel-container" bind:clientWidth="{containerWidth}">
     <Splide
       hasTrack="{false}"
diff --git a/src/components/PhotoPack/PhotoPack.svelte b/src/components/PhotoPack/PhotoPack.svelte
index af242a73..a1f81abf 100644
--- a/src/components/PhotoPack/PhotoPack.svelte
+++ b/src/components/PhotoPack/PhotoPack.svelte
@@ -89,7 +89,7 @@
   $: rows = groupRows(images, layout);
 </script>
 
-<Block width="{width}" id="{id}" class="photopack fmy-5 {cls}">
+<Block width="{width}" id="{id}" class="photopack fmy-6 {cls}">
   <div class="photopack-container w-full" bind:clientWidth="{containerWidth}">
     {#each rows as row, ri}
       <div
@@ -158,15 +158,4 @@
       @include body-caption;
     }
   }
-
-  // :global {
-  //   .photopack-captions-container {
-  //     @include \!fmy-2;
-  //     div.caption {
-  //       p {
-  //         @include body-caption;
-  //       }
-  //     }
-  //   }
-  // }
 </style>
diff --git a/src/components/ReferralBlock/ReferralBlock.svelte b/src/components/ReferralBlock/ReferralBlock.svelte
index a5765a37..af88c6dd 100644
--- a/src/components/ReferralBlock/ReferralBlock.svelte
+++ b/src/components/ReferralBlock/ReferralBlock.svelte
@@ -76,7 +76,7 @@
 </script>
 
 {#if $referrals.length === number}
-  <Block width="{width}" id="{id}" class="referrals-block fmy-5 {cls}">
+  <Block width="{width}" id="{id}" class="referrals-block fmy-8 {cls}">
     {#if heading}
       <div
         class="heading h4 font-bold"
diff --git a/src/components/Scroller/Scroller.svelte b/src/components/Scroller/Scroller.svelte
index bb1b67f0..377efec7 100644
--- a/src/components/Scroller/Scroller.svelte
+++ b/src/components/Scroller/Scroller.svelte
@@ -87,6 +87,13 @@
    */
   export let parallax: boolean = false;
 
+  /**
+   * Set a class to target with SCSS.
+   * @type {string}
+   */
+  let cls: string = '';
+  export { cls as class };
+
   // @ts-ignore
   import SvelteScroller from '@sveltejs/svelte-scroller';
   import Background from './Background.svelte';
@@ -101,7 +108,7 @@
 </script>
 
 {#if !embedded}
-  <Block width="fluid" class="scroller-container fmy-5" id="{id}">
+  <Block width="fluid" class="scroller-container fmy-6 {cls}" id="{id}">
     <SvelteScroller
       bind:index="{index}"
       bind:offset="{offset}"
diff --git a/src/components/SiteHeadline/SiteHeadline.svelte b/src/components/SiteHeadline/SiteHeadline.svelte
index 271be5fa..efc6b634 100644
--- a/src/components/SiteHeadline/SiteHeadline.svelte
+++ b/src/components/SiteHeadline/SiteHeadline.svelte
@@ -70,7 +70,7 @@
   }
 </script>
 
-<Block id="{id}" class="headline-container fmt-7 fmb-5 {cls}" width="normal">
+<Block id="{id}" class="headline-container fmt-7 fmb-6 {cls}" width="normal">
   <header class="headline">
     <div class="title">
       {#if section}
diff --git a/src/components/Table/Table.svelte b/src/components/Table/Table.svelte
index 896edb93..1e65d7bd 100644
--- a/src/components/Table/Table.svelte
+++ b/src/components/Table/Table.svelte
@@ -214,7 +214,7 @@
   });
 </script>
 
-<Block width="{width}" id="{id}" class="fmy-5 {cls}">
+<Block width="{width}" id="{id}" class="fmy-6 {cls}">
   <article class="table-wrapper">
     {#if title || dek || searchable || filterList}
       <header class="table--header w-full">
diff --git a/src/scss/reset/_typography.scss b/src/scss/reset/_typography.scss
index 00d4ef33..95d3447d 100644
--- a/src/scss/reset/_typography.scss
+++ b/src/scss/reset/_typography.scss
@@ -118,7 +118,6 @@ kbd {
 }
 
 figcaption {
-  @include fmt-2;
   @include body-caption;
 }
 
diff --git a/src/scss/tokens/text/mixins/_text-role.scss b/src/scss/tokens/text/mixins/_text-role.scss
index 02ce6047..47b15293 100644
--- a/src/scss/tokens/text/mixins/_text-role.scss
+++ b/src/scss/tokens/text/mixins/_text-role.scss
@@ -22,7 +22,7 @@
   @include leading-tighter;
   @include text-xl;
   @include fmt-7;
-  @include fmb-3;
+  @include fmb-4;
 
   @media (max-width: 768px) {
     @include text-2xl;
@@ -53,7 +53,7 @@
 
 @mixin body-text {
   @include fmt-0;
-  @include fmb-3;
+  @include fmb-4;
   @include font-body;
   @include text-base;
   @include font-regular;
@@ -76,7 +76,7 @@
   @include text-xs;
   @include leading-tighter;
   @include font-regular;
-  @include fmb-1;
+  @include fmy-1;
 }
 
 @mixin body-link {