Feat/BOOK-240 hero video

Approved-by: Chuma Mcphoy (We Ahead)
Approved-by: Christel Westerberg

packages/design-system/lib/components/VideoPlayer/videoPlayer.module.css

@@ -5,6 +5,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
+  z-index: 0;
 
   &.inline {
     border-radius: var(--Corner-radius-md);
@@ -22,6 +23,18 @@
       right: var(--Space-x2);
     }
   }
+
+  &.hasOverlay::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(
+      180deg,
+      rgba(255, 255, 255, 0) 0%,
+      rgba(31, 28, 27, 0.25) 48.08%,
+      rgba(31, 28, 27, 0.8) 100%
+    );
+  }
 }
 
 .video {
@@ -32,17 +45,30 @@
 
 .playButton {
   position: absolute;
+  z-index: 1;
 }
 
 .muteButton {
   position: absolute;
   top: var(--Space-x2);
   right: var(--Space-x2);
+  z-index: 1;
 }
 
 @media screen and (min-width: 768px) {
-  .videoPlayer.hero .playButton {
-    bottom: var(--Space-x4);
-    right: var(--Space-x4);
+  .videoPlayer {
+    &.hero .playButton {
+      bottom: var(--Space-x4);
+      right: var(--Space-x4);
+    }
+
+    &.hasOverlay::after {
+      background: linear-gradient(
+        180deg,
+        rgba(255, 255, 255, 0) 0%,
+        rgba(31, 28, 27, 0.25) 53.8%,
+        rgba(31, 28, 27, 0.74) 97.6%
+      );
+    }
   }
 }