/* Full-bleed photo arc. The existing motion belt owns horizontal movement. */
.moments { overflow: hidden; }
.moments .gallery-heading { margin-bottom: 12px; }
.gallery.motion-gallery {
  position: relative;
  width: 100%;
  padding-block: 64px 76px;
  overflow-y: hidden;
  isolation: isolate;
}
.gallery.motion-gallery:focus-visible {
  outline: 1px solid #9ed0ff85;
  outline-offset: -8px;
}
.gallery.motion-gallery .gallery-group {
  gap: clamp(16px, 1.65vw, 28px);
  padding-right: clamp(16px, 1.65vw, 28px);
}
.gallery.motion-gallery img {
  flex: 0 0 clamp(210px, 17vw, 284px);
  width: clamp(210px, 17vw, 284px);
  height: auto;
  aspect-ratio: 221 / 393;
  border-radius: 24px;
  border: 1px solid #b8dfff26;
  box-shadow: 0 18px 35px -18px #000c, 0 0 24px -12px #4586bb30;
  filter: none;
  transform-origin: center;
  transform: perspective(1100px) translate3d(0, var(--photo-y, 0px), var(--photo-z, 0px)) rotateY(var(--photo-turn, 0deg)) rotateZ(var(--photo-tilt, 0deg));
  transition: border-color .3s, box-shadow .3s;
  backface-visibility: hidden;
}
.gallery.motion-gallery img:hover {
  filter: none;
  transform: perspective(1100px) translate3d(0, var(--photo-y, 0px), var(--photo-z, 0px)) rotateY(var(--photo-turn, 0deg)) rotateZ(var(--photo-tilt, 0deg));
  border-color: #b8dfff66;
  box-shadow: 0 20px 40px -16px #000e, 0 0 26px -12px #7dbbff55;
}
@media (max-width: 700px) {
  .gallery.motion-gallery { padding-block: 42px 50px; }
  .gallery.motion-gallery img { flex-basis: 190px; width: 190px; border-radius: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .gallery.motion-gallery img,
  .gallery.motion-gallery img:hover { transform: none; transition: none; }
}