.background-photos {
  position: absolute;
  left: 0;
  top: 0;
  width: 1440px;
  height: 2700px;
  pointer-events: none;
}

.background-photo {
  position: absolute;
  z-index: 1;
  margin: 0;
  padding: 0;
  overflow: visible;
  pointer-events: auto;
  outline: none;
}

.background-photo-image {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  transform: scale(1);
  transform-origin: bottom left;
  transition: transform 400ms cubic-bezier(.35, .05, .25, 1);
  pointer-events: none;
  user-select: none;
}

.background-photo::after {
  content: '';
  position: absolute;
  z-index: 2;
  inset: 0;
  box-sizing: border-box;
  border: .5px solid #080204;
  pointer-events: none;
}

.background-photo:not([inert]):hover,
.background-photo:not([inert]):focus {
  z-index: 3;
}

.background-photo:not([inert]):hover .background-photo-image,
.background-photo:not([inert]):focus .background-photo-image {
  transform: scale(var(--photo-hover-scale));
}

.background-photo:focus-visible::after {
  outline: 2px solid #273238;
  outline-offset: -3px;
}

.background-photo[inert] {
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .background-photo-image { transition: none; }
}

/* The foreground grid owns shared boundaries; photo frames do not add a second stroke. */
.background-photo::after { border: 0; }

/* Source band y5400..5760 relative to the original5040px tail origin. */
.background-color-band {
  position: absolute;
  left: 0;
  top: 360px;
  display: block;
  width: 1440px;
  height: 360px;
  background: linear-gradient(to right,
    #ce3a77 0 360px,
    #b3e8a0 360px 720px,
    #64701d 720px 1080px,
    #95a3aa 1080px 1440px);
  pointer-events: none;
}