diff --git a/src/components/FeaturePhoto/FeaturePhoto.svelte b/src/components/FeaturePhoto/FeaturePhoto.svelte
index 1b4a5d7..26590a0 100644
--- a/src/components/FeaturePhoto/FeaturePhoto.svelte
+++ b/src/components/FeaturePhoto/FeaturePhoto.svelte
@@ -1,6 +1,5 @@
 <!-- @component `FeaturePhoto` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-multimedia-featurephoto--docs) -->
 <script lang="ts">
-  import { onMount } from 'svelte';
   import type { ContainerWidth } from '../@types/global';
   import { getResponsiveSizes } from '../../utils/propValidators';
 
@@ -82,33 +81,6 @@
     left = 0,
     right = 0,
   }: Props = $props();
-
-  let intersecting = $state(false);
-  let container: HTMLElement;
-  const intersectable = typeof IntersectionObserver !== 'undefined';
-
-  onMount(() => {
-    if (!lazy) return;
-
-    if (intersectable) {
-      const rootMargin = `${bottom}px ${left}px ${top}px ${right}px`;
-
-      const observer = new IntersectionObserver(
-        (entries) => {
-          intersecting = entries[0].isIntersecting;
-          if (intersecting) {
-            observer.unobserve(container);
-          }
-        },
-        {
-          rootMargin,
-        }
-      );
-
-      observer.observe(container);
-      return () => observer.unobserve(container);
-    }
-  });
 </script>
 
 <Block {width} class="photo fmy-6 {cls}" {id}>
@@ -133,10 +105,6 @@
 </Block>
 
 <style lang="scss">
-  .placeholder {
-    background-color: #ccc;
-  }
-
   div.alt-warning {
     background-color: red;
     color: white;
diff --git a/src/components/Headline/Headline.svelte b/src/components/Headline/Headline.svelte
index 026ce36..61aafb8 100644
--- a/src/components/Headline/Headline.svelte
+++ b/src/components/Headline/Headline.svelte
@@ -68,23 +68,18 @@
   }: Props = $props();
 
   // Set the headline text size class based on the `hedSize` prop
-  let hedClass = $state('text-3xl');
-  $effect(() => {
+  let hedClass = $derived.by(() => {
     switch (hedSize) {
       case 'biggest':
-        hedClass = 'text-6xl';
-        break;
+        return 'text-6xl';
       case 'bigger':
-        hedClass = 'text-5xl';
-        break;
+        return 'text-5xl';
       case 'big':
-        hedClass = 'text-4xl';
-        break;
+        return 'text-4xl';
       case 'small':
-        hedClass = 'text-2xl';
-        break;
+        return 'text-2xl';
       default:
-        hedClass = 'text-3xl';
+        return 'text-3xl';
     }
   });
 </script>
diff --git a/src/pages/Squash.svelte b/src/pages/Squash.svelte
index 2e5054f..d226dba 100644
--- a/src/pages/Squash.svelte
+++ b/src/pages/Squash.svelte
@@ -67,9 +67,7 @@
   });
 </script>
 
-<Article
-  columnWidths="normal"
->
+<Article>
 
   <ScrollerBase
     bind:count
@@ -172,8 +170,4 @@
     position: relative;
   }
 
-  .step-background-container {
-    max-width: var(--normal-column-width, 660px);
-  }
-
 </style>
\ No newline at end of file
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 50165a9..fa8ee48 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,8 +1,11 @@
 ---
 import Layout from '../layouts/Layout.astro';
 import Squash from './Squash.svelte';
+
 import Article from '@components/Article/Article.svelte';
 import BodyText from '@components/BodyText/BodyText.svelte';
+import Headline from '@components/Headline/Headline.svelte';
+
 import graphicOne from '../assets/Photo-3468.jpg';
 import graphicTwo from '../assets/Photo-3471.jpg';
 import graphicThree from '../assets/Photo-3515.jpg';
@@ -27,6 +30,9 @@ const graphics = await Promise.all([
 ---
 
 <Layout>
+  <Headline
+    hed={'Unfriendly skies'}
+  />
   <Article>
     <BodyText text="Cras eu consectetur justo, eu luctus felis. Suspendisse lectus enim, bibendum vitae euismod et, condimentum quis tortor. Donec sit amet orci nibh. Vivamus facilisis nunc quis nunc feugiat placerat. Nunc ut augue vitae metus fermentum venenatis vel at dui. Nulla aliquet nibh porttitor odio imperdiet, in ullamcorper augue bibendum. Cras ornare nunc ut sollicitudin egestas. Suspendisse neque ipsum, faucibus eu hendrerit porttitor, tincidunt a tortor. Aliquam at facilisis diam, a ullamcorper lacus. Suspendisse pharetra faucibus venenatis. Donec efficitur condimentum neque ut vehicula." />
     <Squash client:only="svelte" {graphics} backgroundWidth="normal" />
diff --git a/src/pages/test.astro b/src/pages/test.astro
new file mode 100644
index 0000000..85150d2
--- /dev/null
+++ b/src/pages/test.astro
@@ -0,0 +1,22 @@
+---
+import Layout from '../layouts/Layout.astro';
+
+import Article from '@components/Article/Article.svelte';
+import BodyText from '@components/BodyText/BodyText.svelte';
+import Headline from '@components/Headline/Headline.svelte';
+
+
+
+
+
+---
+
+<Layout>
+  <Headline
+    hed={'Unfriendly skies'}
+  />
+  <Article>
+    <BodyText text="Cras eu consectetur justo, eu luctus felis. Suspendisse lectus enim, bibendum vitae euismod et, condimentum quis tortor. Donec sit amet orci nibh. Vivamus facilisis nunc quis nunc feugiat placerat. Nunc ut augue vitae metus fermentum venenatis vel at dui. Nulla aliquet nibh porttitor odio imperdiet, in ullamcorper augue bibendum. Cras ornare nunc ut sollicitudin egestas. Suspendisse neque ipsum, faucibus eu hendrerit porttitor, tincidunt a tortor. Aliquam at facilisis diam, a ullamcorper lacus. Suspendisse pharetra faucibus venenatis. Donec efficitur condimentum neque ut vehicula." />
+    <BodyText text="Sed feugiat, lacus id elementum tristique, urna elit consectetur mauris, in commodo ipsum neque sed turpis. Ut elit ex, pharetra laoreet leo vitae, rhoncus condimentum ligula. Morbi et sagittis tellus. Proin sed felis euismod ipsum lacinia feugiat. Donec finibus pretium dignissim. Integer ornare egestas scelerisque. Donec purus elit, viverra vitae felis at, volutpat sollicitudin tellus. Vivamus fermentum dictum dapibus. Phasellus non ligula ac augue efficitur ultrices sit amet at quam. Fusce dapibus luctus ex, non semper massa commodo eget." />
+  </Article>
+</Layout>