Resolved blending issue with headers

index.html

@@ -15,7 +15,7 @@
       href="https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;500;600&display=swap"
       rel="stylesheet"
     >
-    <link rel="stylesheet" href="styles.css?version=editorial-expansion-2">
+    <link rel="stylesheet" href="styles.css?version=dynamic-headline-contrast-filter-test">
   </head>
 
   <body id="top">
@@ -40,10 +40,16 @@
     </header>
 
     <main id="main-content">
-      <section class="site-width-boundary homepage-hero-section" aria-labelledby="homepage-hero-title">
+      <section
+        class="site-width-boundary homepage-hero-section image-overlap-heading-dynamic-inversion-container"
+        aria-labelledby="homepage-hero-title"
+      >
         <p class="section-context-label">Seasonal environment design <span aria-hidden="true">/</span> Pacific Northwest</p>
 
-        <h1 class="homepage-hero-title" id="homepage-hero-title">
+        <h1
+          class="homepage-hero-title image-overlap-heading-dynamic-inversion"
+          id="homepage-hero-title"
+        >
           <span>Composing</span>
           <span>the season.</span>
         </h1>