Added blend mode to header

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=philosophy-layout-and-image-border-fix">
+    <link rel="stylesheet" href="styles.css?version=tradition-mix-blend-overlap">
   </head>
 
   <body id="top">
@@ -121,7 +121,11 @@
         </div>
       </section>
 
-      <section class="editorial-section approach-section" id="approach" aria-labelledby="approach-title">
+      <section
+        class="editorial-section approach-section image-overlap-heading-dynamic-inversion-container"
+        id="approach"
+        aria-labelledby="approach-title"
+      >
         <div class="site-width-boundary">
           <header class="numbered-section-heading">
             <span class="numbered-section-index" aria-hidden="true">02</span>
@@ -129,7 +133,12 @@
             <p>Approach</p>
           </header>
 
-          <h2 class="oversized-editorial-title" id="approach-title">Tradition.</h2>
+          <h2
+            class="oversized-editorial-title approach-image-overlap-title image-overlap-heading-dynamic-inversion"
+            id="approach-title"
+          >
+            Tradition.
+          </h2>
 
           <div class="approach-content-grid">
             <div class="approach-supporting-copy">

styles.css

@@ -229,7 +229,8 @@ ul {
   isolation: isolate;
 }
 
-.homepage-hero-section.image-overlap-heading-dynamic-inversion-container {
+.homepage-hero-section.image-overlap-heading-dynamic-inversion-container,
+.approach-section.image-overlap-heading-dynamic-inversion-container {
   background-color: var(--color-weathered-paper);
 }
 
@@ -436,6 +437,10 @@ ul {
   overflow: hidden;
 }
 
+.approach-image-overlap-title {
+  transform: translateY(25%);
+}
+
 .oversized-editorial-title {
   position: relative;
   z-index: 2;
@@ -452,11 +457,12 @@ ul {
   grid-template-columns: repeat(12, minmax(0, 1fr));
   align-items: end;
   gap: clamp(2rem, 4vw, 4.5rem);
-  margin-top: clamp(1rem, 2vw, 2rem);
+  margin-top: 0;
 }
 
 .approach-supporting-copy {
   grid-column: 1 / 4;
+  min-width: 0;
   padding-top: clamp(3rem, 7vw, 7rem);
   color: var(--color-softened-black);
   font-size: 0.94rem;
@@ -464,7 +470,8 @@ ul {
 
 .approach-image-figure {
   grid-column: 4 / 12;
-  margin-top: -1.5rem;
+  min-width: 0;
+  margin-top: 0;
 }
 
 .approach-principles-grid {
@@ -917,8 +924,14 @@ ul {
     grid-column: 1 / 5;
   }
 
+  .approach-content-grid {
+    align-items: start;
+    margin-top: 0;
+  }
+
   .approach-image-figure {
     grid-column: 5 / 13;
+    margin-top: 0;
   }
 
   .work-heading-grid .oversized-editorial-title {
@@ -1097,6 +1110,28 @@ ul {
   }
 }
 
+@media (min-width: 32.0625rem) and (max-width: 48rem) {
+  .approach-content-grid {
+    display: grid;
+    grid-template-columns: repeat(12, minmax(0, 1fr));
+    align-items: start;
+    gap: clamp(1.5rem, 4vw, 2.5rem);
+    margin-top: 0;
+  }
+
+  .approach-supporting-copy {
+    grid-column: 1 / 6;
+    max-width: none;
+    padding-top: clamp(2rem, 6vw, 3rem);
+  }
+
+  .approach-image-figure {
+    grid-column: 6 / 13;
+    margin-top: 0;
+    margin-left: 0;
+  }
+}
+
 @media (max-width: 40rem) {
   .approach-principles-grid {
     grid-template-columns: minmax(0, 1fr);
@@ -1170,6 +1205,13 @@ ul {
     letter-spacing: 0.02em;
   }
 
+  .approach-image-overlap-title {
+    transform: none;
+    color: var(--color-noel-black);
+    filter: none;
+    mix-blend-mode: normal;
+  }
+
   .work-heading-grid .oversized-editorial-title {
     font-size: clamp(3.15rem, 15.5vw, 5rem);
   }