/* Fixed photo frame keeps the existing copy and buttons stationary. */
.hero-slideshow {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: #160e08;
  isolation: isolate;
}
.hero .hero-slideshow .hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
  pointer-events: none;
}
.hero .hero-slideshow .hero-photo.is-active { opacity: 1; }
.hero .hero-slideshow .hero-photo-courtroom { object-position: 42% 50%; }
.hero .hero-slideshow .hero-photo-bowtie { object-position: 57% 50%; }
@media (max-width: 1000px) {
  .hero-slideshow { grid-column: 1; grid-row: 2; }
}
@media (max-width: 600px) {
  .hero-slideshow { aspect-ratio: 4 / 3; }
  .hero .hero-slideshow .hero-photo { object-position: 58% 35%; }
  .hero .hero-slideshow .hero-photo-courtroom { object-position: 38% 40%; }
  .hero .hero-slideshow .hero-photo-bowtie { object-position: 58% 35%; }
}
@media (prefers-reduced-motion: reduce) {
  .hero .hero-slideshow .hero-photo { transition: none; }
}

/* New scenes keep the centered subject visible in the narrower mobile crop. */
@media (max-width: 600px) {
  .hero .hero-slideshow .hero-photo-courthouse,
  .hero .hero-slideshow .hero-photo-courtroom-pointing,
  .hero .hero-slideshow .hero-photo-ranch-fence,
  .hero .hero-slideshow .hero-photo-pickup-town,
  .hero .hero-slideshow .hero-photo-courthouse-interior {
    object-position: 50% 35%;
  }
}