🐞 fix: Update header/hero to swap based on service page children

styles/blocks/page-hero.css

@@ -1,7 +1,25 @@
-/* Page Hero partial styles (page-hero.php)
- * Scoped to .page-hero to avoid affecting the homepage-hero block. */
+.page-hero__heading {
+    @apply text-cwc-blue-01;
 
-.page-hero {
+    line-height: 1;
+    margin: 0 0 1.5rem;
+    text-align: left;
+
+    em {
+        color: var(--color-secondary);
+        font-style: normal;
+    }
+}
+
+.page-hero__intro {
+    font-weight: 300;
+    line-height: 1;
+    text-align: left;
+}
+
+/* Page Hero partial styles (page-hero-services.php)
+ * Scoped to .page-hero-services to avoid affecting the homepage-hero block. */
+.page-hero-services {
     background: linear-gradient(73.83deg, #8FC9E6 -8.7%, #006196 21.51%, #032F46 60.7%);
     isolation: isolate;
     margin-bottom: 10rem;
@@ -9,13 +27,13 @@
     position: relative;
 }
 
-.page-hero__content {
+.page-hero-services__content {
     padding-block: clamp(2rem, 6vw, 4rem);
     position: relative;
     z-index: 10;
 }
 
-.page-hero__heading {
+.page-hero-services__heading {
     color: #fff;
     line-height: 1;
     margin: 3rem 0 1.5rem;
@@ -28,7 +46,7 @@
     }
 }
 
-.page-hero__intro {
+.page-hero-services__intro {
     color: #fff;
     font-size: clamp(1rem, 1.5vw, 1.25rem);
     font-weight: 300;
@@ -38,7 +56,7 @@
     text-align: left;
 }
 
-.page-hero__media {
+.page-hero-services__media {
     bottom: -5%;
     height: auto;
     max-height: none;
@@ -52,7 +70,7 @@
     max-width: clamp(20rem, 30vw, 28rem);
 }
 
-.page-hero__vector {
+.page-hero-services__vector {
     bottom: clamp(1.5rem, 4vw, 3rem);
     height: auto;
     left: 0;
@@ -63,18 +81,18 @@
 }
 
 @media (max-width: 767px) {
-    .page-hero {
+    .page-hero-services {
         min-height: clamp(28rem, 130vw, 40rem);
     }
 
-    .page-hero__media {
+    .page-hero-services__media {
         bottom: -8%;
         right: 0;
         top: auto;
         max-width: 60vw;
     }
 
-    .page-hero__vector {
+    .page-hero-services__vector {
         bottom: clamp(1rem, 3vw, 2rem);
         width: 100%;
     }