/* Keep each photograph fully visible at rest; hovering adds the dark treatment and motion. */
.signature-experience:before { z-index: 0; }
.signature-experience:after {
  background: var(--sand);
  content: '';
  inset: 0;
  opacity: 0;
  position: absolute;
  transition: opacity .52s ease;
  z-index: 0;
}
.signature-experience > div { z-index: 1; }
.signature-experience:hover:after,
.signature-experience:focus-visible:after { opacity: 0; }

/* Touch screens do not have hover, so let guests see each experience immediately. */
@media (max-width: 760px) {
  .signature-experience:after { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .signature-experience:after { transition: none; }
}