.hero-wrapper {
  width: 100vw;
  height: 100vh;        /* fallback */
  height: 100dvh;        /* dynamic viewport height — fixes mobile browser chrome issue */
  overflow: hidden;
}

.responsive {
  width: 100%;
  height: 100%;
  object-fit: cover;      /* fills container, crops overflow, keeps aspect ratio */
  object-position: center; /* adjust focal point if needed, e.g. "center top" */
  display: block;

  opacity: 0;
  transform: scale(1.04);
  transition: opacity 0.8s ease, transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.responsive.loaded {
    opacity: 1;
    transform: scale(1);
}