.hero-picture {
  background: #262344;
}
.hero-picture::before {
  content: "";
  position: absolute;
  inset: -4%;
  background: var(--hero-preview) center / cover;
  filter: blur(15px);
  transform: scale(1.04);
}
.hero-picture .hero-photo {
  opacity: 0;
  transition: opacity 650ms ease;
}
.hero-picture.is-loaded .hero-photo {
  opacity: 1;
}
.progressive-photo {
  opacity: 0;
  transition: opacity 420ms ease;
}
.progressive-photo.is-loaded {
  opacity: 1;
}
@media (max-width: 540px) {
  .hero-picture::before {
    background-image: var(--hero-mobile-preview);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-picture .hero-photo,
  .progressive-photo {
    transition: none;
  }
}