.hero {
  isolation: isolate;
  background: #292929 url("assets/reference/custom-website.jpg") center/cover no-repeat;
}

.hero-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -3;
  object-fit: cover;
  object-position: center;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(90deg, rgba(12,12,12,.9) 0%, rgba(16,16,16,.73) 48%, rgba(15,15,15,.48) 100%),
    linear-gradient(0deg, rgba(0,0,0,.28), transparent 45%);
  pointer-events: none;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(circle at 79% 45%, rgba(255,120,23,.2), transparent 30%);
  pointer-events: none;
}

.hero-grid,
.hero .down {
  position: relative;
  z-index: 2;
}

.hero-device .circle {
  background: rgba(40,40,40,.56);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(8px);
}

@media (max-width: 700px) {
  .hero-bg-video {
    object-position: 60% center;
  }

  .hero::before {
    background: rgba(16,16,16,.78);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-bg-video {
    display: none;
  }
}