.hero .hero-effect {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: #020403;
}

.hero::before {
  display: none;
}

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

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

@media (max-width: 720px) {
  .hero::after {
    background: linear-gradient(90deg, rgba(2, 4, 3, .85), rgba(2, 4, 3, .58)),
      linear-gradient(0deg, rgba(2, 4, 3, .6), transparent 40%);
  }
}