.parallax-16x9 {
  margin: 0;
  position: relative;
  aspect-ratio: 16 / 9; /* keeps the box height; remove if you set height elsewhere */
  overflow: hidden;     /* hide scaled edges */
}

.parallax-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);              /* start unzoomed */
  transform-origin: center center;  /* zoom from center */
  transition: transform 0.1s ease-out;
  will-change: transform;
}

.parallax-caption {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  color: white;
  text-shadow: 0 2px 6px rgba(0,0,0,.5);
  pointer-events: none;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .parallax-img {
    transition: none;
    transform: none !important;
  }
}