@media (max-width: 700px) {
  .hero-image {
    overflow: hidden;
    background: none;
  }

  .hero-image::before,
  .hero-image::after {
    content: "";
    position: absolute;
    inset: 0;
  }

  .hero-image::before {
    background: url("/assets/dubai-real-sunset-unsplash.jpg") center 53% / cover no-repeat;
    filter: blur(12px);
    opacity: 0.55;
    transform: scale(1.04);
  }

  .hero-image::after {
    background: url("/assets/dubai-real-sunset-unsplash.jpg") center 12% / 100% auto no-repeat;
  }
}