Add page-hero media layer CSS and import into blocks bundle

styles/blocks/index.css

@@ -3,3 +3,4 @@
 @import './buttons.css';
 @import './core.css';
 @import './misc.css';
+@import './page-hero.css';

styles/blocks/page-hero.css

@@ -0,0 +1,59 @@
+/* Page Hero partial styles (page-hero.php)
+ * Scoped to .page-hero to avoid affecting the homepage-hero block. */
+
+.page-hero {
+    isolation: isolate;
+    position: relative;
+}
+
+.page-hero__media {
+    inset: 0;
+    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 30%);
+    mask-image: linear-gradient(to right, transparent 0%, black 30%);
+    position: absolute;
+    z-index: 0;
+}
+
+.page-hero__media img {
+    display: block;
+    height: 100%;
+    object-fit: cover;
+    width: 100%;
+}
+
+.page-hero__vector {
+    bottom: 0;
+    height: auto;
+    pointer-events: none;
+    position: absolute;
+    right: 0;
+    width: clamp(18rem, 38vw, 32rem);
+    z-index: 1;
+}
+
+.page-hero__content {
+    position: relative;
+    z-index: 10;
+}
+
+@media (max-width: 767px) {
+    .page-hero__media {
+        -webkit-mask-image: linear-gradient(
+            to bottom,
+            rgb(0 0 0 / 0.9) 0%,
+            rgb(0 0 0 / 0.45) 100%
+        );
+        mask-image: linear-gradient(
+            to bottom,
+            rgb(0 0 0 / 0.9) 0%,
+            rgb(0 0 0 / 0.45) 100%
+        );
+    }
+
+    .page-hero__vector {
+        bottom: 0;
+        left: 0;
+        right: auto;
+        width: 100vw;
+    }
+}