.photo-gallery {
  position: relative;
  isolation: isolate;
  width: 100%;
  height: clamp(360px, 48vw, 820px);
  margin: 0;
  overflow: hidden;
  background: var(--forest);
}
.gallery-photo {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--gallery-desktop, 50% 50%);
  opacity: 0;
  pointer-events: none;
}
.gallery-photo.is-current { opacity: 1; }
.gallery-playback {
  position: absolute;
  z-index: 2;
  right: clamp(12px, 1.5vw, 28px);
  bottom: clamp(12px, 1.5vw, 28px);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 11px;
  border: 0;
  border-radius: 50%;
  background: var(--forest);
  color: var(--cream);
}
.gallery-playback[hidden] { display: none; }
.gallery-playback svg { width: 22px; height: 22px; fill: currentColor; }
.gallery-playback .gallery-resume { display: none; }
.gallery-playback[data-paused="true"] .gallery-pause { display: none; }
.gallery-playback[data-paused="true"] .gallery-resume { display: block; }
.gallery-playback:hover { color: var(--mustard); }
.gallery-playback:focus-visible {
  outline: 3px solid var(--mustard);
  outline-offset: 3px;
  box-shadow: 0 0 0 7px var(--forest);
}
@media (max-width: 799px) {
  .photo-gallery { height: auto; aspect-ratio: 4 / 3; }
  .gallery-photo { object-position: var(--gallery-mobile, 50% 50%); }
}
@media (prefers-reduced-motion: reduce) {
  .gallery-photo { animation: none; transition: none; }
  .gallery-playback { display: none; }
}