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)); }