[FIX] background image opacity

main/static/main/css/styles.css

@@ -1538,7 +1538,24 @@ video {
 
 .photo-header {
   height: 414px;
+  position: relative;
+
+}
+
+.photo-header:after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: black;
+    opacity: 0.4;
+    z-index: 1;
+  }
 
+.photo-header > div {
+    z-index: 10;
   }
 
 @media (min-width: 768px) {
@@ -2478,6 +2495,10 @@ p{
   position: relative;
 }
 
+.header-carousel img {
+    filter: brightness(60%);
+  }
+
 .header-carousel .header-carousel--text{
   font-family: Bebas Neue, Helvetica, Arial, sans-serif;
 }

main/styleguide/source/css/atoms/extra_sizing.pcss

@@ -14,7 +14,23 @@
 
 .photo-header {
   height: 414px;
+  position: relative;
 
+  &:after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: black;
+    opacity: 0.4;
+    z-index: 1;
+  }
+
+  > div {
+    z-index: 10;
+  }
   @screen md {
     height: 40vw;
   }

main/styleguide/source/css/molecules/carousels.pcss

@@ -29,6 +29,10 @@
   margin: 0 auto;
   position: relative;
 
+  img {
+    filter: brightness(60%);
+  }
+
   .header-carousel--text {
     @apply font-alt text-4xl sm:text-5xl uppercase lg:text-7xl;
     max-width: 1200px;