@nnc-digital/nnc-design-system 1.0.0-beta14 → 1.0.0-beta15

package/build/index.mjs.js

@@ -26118,6 +26118,8 @@ var Header = function (_a) {
  * Optimised for an image in 16:5 ratio on all but small width screens
  */
 const Container$u = styled.div`
+  position: relative;
+  overflow: hidden;
   background-image: ${(props) => {
     const gradient = !props.$backgroundBox ? `linear-gradient(to bottom left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75))` : '';
     const imageUrl = props.$image && props.$image.trim() ? `url('${props.$image}')` : '';
@@ -26141,6 +26143,17 @@ const Container$u = styled.div`
   flex-direction: row;
   align-items: flex-end;
 
+  /* Max heights for large screens */
+  @media screen and (min-width: ${(props) => props.theme.theme_vars.breakpoints.m}) {
+    max-height: 410px;
+  }
+  @media screen and (min-width: ${(props) => props.theme.theme_vars.breakpoints.l}) {
+    max-height: 560px;
+  }
+  @media screen and (min-width: ${(props) => props.theme.theme_vars.breakpoints.xl}) {
+    max-height: 636px;
+  }
+
   &::before {
     content: '';
     /* phones */
@@ -26161,7 +26174,7 @@ const InnerContainer = styled.div`
   margin-right: auto;
   margin-left: auto;
   flex-grow: 1;
-  z-index: 1;
+  z-index: 2;
 
   @media screen and (min-width: ${(props) => props.theme.theme_vars.breakpoints.l}) {
     max-width: ${(props) => props.theme.theme_vars.breakpoints.l};
@@ -26287,38 +26300,22 @@ const Search = styled.div`
 
 const VideoContainer = styled.div`
   position: absolute;
+  top: 0;
+  left: 0;
   width: 100%;
-  @media screen and (max-width: ${(props) => props.theme.theme_vars.breakpoints.m}) {
-    height: 580px;
-  }
-  @media screen and (min-width: ${(props) => props.theme.theme_vars.breakpoints.m}) and (max-width: ${(props) => props.theme.theme_vars.breakpoints.l}) {
-    height: 410px;
-  }
-  @media screen and (min-width: ${(props) => props.theme.theme_vars.breakpoints.l}) {
-    height: 560px;
-  }
-  @media screen and (min-width: ${(props) => props.theme.theme_vars.breakpoints.xl}) {
-    height: 636px;
-  }
+  height: 100%;
+  overflow: hidden;
+  z-index: 0;
 `;
 
 const VideoBackground = styled.video`
   position: absolute;
+  top: 0;
+  left: 0;
   width: 100%;
-  height: 575px;
+  height: 100%;
   object-fit: cover;
-  @media screen and (max-width: ${(props) => props.theme.theme_vars.breakpoints.m}) {
-    height: 590px;
-  }
-  @media screen and (min-width: ${(props) => props.theme.theme_vars.breakpoints.m}) and (max-width: ${(props) => props.theme.theme_vars.breakpoints.l}) {
-    height: 420px;
-  }
-  @media screen and (min-width: ${(props) => props.theme.theme_vars.breakpoints.l}) {
-    height: 568px;
-  }
-  @media screen and (min-width: ${(props) => props.theme.theme_vars.breakpoints.xl}) {
-    height: 645px;
-  }
+  z-index: 0;
 `;
 
 const PlayPauseButton = styled.button`
@@ -26330,7 +26327,7 @@ const PlayPauseButton = styled.button`
     display: flex;
     align-items: center;
     justify-content: center;
-    z-index: 1;
+    z-index: 3;
     background: rgba(0, 0, 0, 0.5);
     border: 1px solid white;
     color: white;