/* Keep the original grid footprint so the adjacent copy does not move. */
.hero-photo.hero-slideshow {
  display: flex;
  align-items: center;
  overflow: visible;
  background: transparent;
  box-shadow: none;
}
.hero-slideshow .hero-photo-frame {
  position: relative;
  --hero-photo-overhang: min(45px, 3.5vw);
  width: calc(100% + var(--hero-photo-overhang) + var(--hero-photo-overhang));
  margin-left: calc(-1 * var(--hero-photo-overhang));
  flex: 0 0 auto;
  aspect-ratio: 7 / 5;
  overflow: hidden;
  border-radius: 28px;
  background: #eadde5;
  box-shadow: var(--shadow);
  isolation: isolate;
}
.hero-slideshow .hero-photo-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-slideshow .hero-photo-tallinn { object-position: 50% 25%; }
.hero-slideshow .hero-photo-coast {
  object-position: center;
  opacity: 0;
  transition: opacity 850ms ease-in-out;
}
.hero-slideshow.show-coast .hero-photo-coast { opacity: 1; }
@media (max-width: 900px) {
  .hero-photo.hero-slideshow {
    width: 100%;
    height: 250px;
    aspect-ratio: auto;
  }
  .hero-slideshow .hero-photo-frame {
    width: 100%;
    margin-left: 0;
    height: 100%;
    aspect-ratio: auto;
  }
}