Added overlay to header with background image

assets/css/screen.css

@@ -826,14 +826,6 @@ Search                         LOGO                    Login Subscribe
     margin-top: 40px;
 }
 
-.gh-header-image {
-    position: absolute;
-    inset: 0;
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-}
-
 .gh-header-inner {
     position: relative;
 }
@@ -1046,10 +1038,6 @@ Search                         LOGO                    Login Subscribe
     text-align: center;
 }
 
-.gh-header.is-classic.has-image .gh-header-inner {
-    color: #fff;
-}
-
 .gh-header.is-classic .gh-header-title {
     font-size: clamp(3.2rem, 3.18vw + 1.93rem, 6rem);
     font-weight: 750;
@@ -1113,6 +1101,36 @@ Search                         LOGO                    Login Subscribe
     color: var(--color-secondary-text);
 }
 
+.gh-header.is-classic.has-image {
+    margin-top: 0;
+}
+
+.gh-header.is-classic.has-image::before {
+    position: absolute;
+    inset: 0;
+    content: "";
+    opacity: 0.3;
+    background-color: var(--color-black);
+    transition: opacity 1.5s ease;
+}
+
+.gh-header.is-classic.has-image .gh-header-inner {
+    color: #fff;
+}
+
+.gh-header.is-classic.has-image .gh-header-image {
+    position: absolute;
+    inset: 0;
+    z-index: -1;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.gh-header.is-classic.has-image .gh-header-form {
+    background-color: #fff;
+}
+
 /* 9. CTA
 /* ---------------------------------------------------------- */
 
@@ -1205,6 +1223,10 @@ Search                         LOGO                    Login Subscribe
     margin-top: 100px;
 }
 
+.gh-navigation + .gh-featured {
+    margin-top: 64px;
+}
+
 .gh-featured-title {
     margin-bottom: 20px;
     padding-bottom: 12px;