.progressive-image {
  position: relative;
  display: block;
  isolation: isolate;
  overflow: hidden;
}
.progressive-image::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -6px;
  background: var(--image-preview) center / cover no-repeat;
  filter: blur(6px);
  pointer-events: none;
  transition: opacity 400ms ease;
}
.progressive-image > img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
  transition: opacity 400ms ease, transform 400ms ease;
}
.progressive-image.is-loading > img { opacity: 0; }
.progressive-image.is-loaded::before { opacity: 0; }
.hero-image > .progressive-image,
.product-image > .progressive-image { width: 100%; height: 100%; }
.hero-image .progressive-image > img { width: 100%; max-width: 100%; margin-left: 0; }
.product-image:hover .progressive-image > img { transform: scale(1.035); }
.factory-exterior > .progressive-image { width: 100%; aspect-ratio: 2 / 1; }
.factory-processes .progressive-image { width: 100%; aspect-ratio: 3 / 2; }
.dialog-visual > .progressive-image { width: 100%; aspect-ratio: var(--image-aspect, 1); max-height: 540px; }
.dialog-visual .progressive-image > img { object-fit: contain; }
.dialog-visual .progressive-image::before { inset: 0; background-size: contain; }
@media (max-width: 760px) {
  .dialog-visual > .progressive-image { max-height: 260px; }
}
@media (max-width: 540px) {
  .hero-image > .progressive-image { width: 160%; margin-left: -30%; }
  .factory-exterior > .progressive-image { aspect-ratio: 3 / 2; }
}
@media (prefers-reduced-motion: reduce) {
  .progressive-image::before, .progressive-image > img { transition: none; }
}