.lp-hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-color: #ffffff;
}

.lp-hero-bg::before {
  content: '';
  position: absolute;
  inset: -6%;
  opacity: 0.22;
  background-color: #f1f5f9;
  background-image: url('/img/hero-tiles-bg.jpg');
  background-image: image-set(
    url('/img/hero-tiles-bg.webp') type('image/webp'),
    url('/img/hero-tiles-bg.jpg') type('image/jpeg')
  );
  background-size: cover;
  background-position: center 48%;
  background-repeat: no-repeat;
  transform: perspective(820px) rotateX(11deg) scale(1.1);
  transform-origin: 50% 44%;
}

.lp-hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.22);
  pointer-events: none;
}

@media (max-width: 768px) {
  .lp-hero-bg::before {
    background-position: center 38%;
    background-size: cover;
    transform: perspective(760px) rotateX(10deg) scale(1.12);
  }
}

@media (prefers-reduced-motion: reduce) {
  .lp-hero-bg::before {
    background-attachment: scroll;
  }
}