.hero .hero-effect {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: #151515 url("/assets/hero-effect/assets/cash-mobile-poster.jpg") center / cover no-repeat;
}

.hero-mobile-video,
.hero-desktop-effect {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero-mobile-video {
  display: none;
  object-fit: cover;
}

.hero::before {
  display: none;
}

.hero::after {
  display: block;
  inset: 0;
  width: 100%;
  z-index: 1;
  opacity: 1;
  background: linear-gradient(90deg, rgba(21, 21, 21, .91), rgba(21, 21, 21, .72) 48%, rgba(21, 21, 21, .2)),
    linear-gradient(0deg, rgba(21, 21, 21, .55), transparent 35%);
}

.hero .container {
  position: relative;
  z-index: 2;
}

@media (max-width: 720px), (hover: none) and (pointer: coarse) {
  .hero-mobile-video {
    display: block;
  }

  .hero-desktop-effect {
    display: none;
  }

  .hero::after {
    background: linear-gradient(90deg, rgba(21, 21, 21, .85), rgba(21, 21, 21, .58)),
      linear-gradient(0deg, rgba(21, 21, 21, .6), transparent 40%);
  }
}