diff --git a/src/css/custom.scss b/src/css/custom.scss
index 25c884b..d1dc63a 100644
--- a/src/css/custom.scss
+++ b/src/css/custom.scss
@@ -9,4 +9,20 @@ html {
 // TODO: breadcrumbs: false in docusaurus.config.js does not work
 .theme-doc-breadcrumbs {
   display: none;
-}
\ No newline at end of file
+}
+
+.mdx-hero-video__video::after,
+.mdx-hero-video__placeholder::after {
+  width: 100%;
+  height: 100%;
+  content: ' ';
+  position: absolute;
+  top: 0;
+  left: 0;
+  background: linear-gradient(
+    to top,
+    rgba(var(--lsd-surface-primary), 1),
+    rgba(var(--lsd-surface-primary), 0.24),
+    rgba(var(--lsd-surface-primary), 0.05)
+  );
+}