diff --git a/src/components/GasStation/Hero/index.tsx b/src/components/GasStation/Hero/index.tsx
index e0e2aafe3..228bc8d09 100644
--- a/src/components/GasStation/Hero/index.tsx
+++ b/src/components/GasStation/Hero/index.tsx
@@ -1,11 +1,13 @@
import type { BaseBlock } from '@/components/Home/types'
import Slider from '@/components/GasStation/Slider'
-import css from './styles.module.css'
import { Button, Typography } from '@mui/material'
+import clsx from 'clsx'
+import css from './styles.module.css'
const Hero = ({ title, text, link }: BaseBlock) => {
return (
+
-
+
)
}
diff --git a/src/components/GasStation/Hero/styles.module.css b/src/components/GasStation/Hero/styles.module.css
index e33e9c75a..376ab253d 100644
--- a/src/components/GasStation/Hero/styles.module.css
+++ b/src/components/GasStation/Hero/styles.module.css
@@ -1,5 +1,6 @@
.videoWrapper {
position: relative;
+ z-index: -1;
}
.video {
@@ -16,17 +17,24 @@
}
@media (min-width: 900px) {
- .gradient {
+ .gradientBase {
position: absolute;
- width: 138px;
+ width: 94px;
top: 0;
- right: 0;
- bottom: 39px;
+ bottom: 38px;
+ left: 0;
background: linear-gradient(270deg, rgba(18, 19, 18, 0) 0%, var(--mui-palette-background-default) 100%);
- transform: scaleX(-1.005); /* prevent 1px gap glitch */
z-index: 1;
}
+ .gradientFlipped {
+ left: auto;
+ right: 0;
+ bottom: 38px;
+ width: 138px;
+ transform: scaleX(-1);
+ }
+
.videoWrapper {
margin-top: calc(-1 * var(--header-height));
}