.photo-placeholder.has-memory-photo,
.photo-placeholder-one.has-memory-photo {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.memory-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.has-memory-photo > .photo-label {
  position: absolute;
  bottom: 0.75rem;
  left: 50%;
  z-index: 2;
  max-width: calc(100% - 1.5rem);
  transform: translateX(-50%);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-shadow: 0 6px 20px rgb(55 31 32 / 20%);
}

.memory-photo-collage {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3px;
  overflow: hidden;
  background: #fff8f6;
}

.memory-photo-collage .memory-photo {
  position: relative;
  inset: auto;
  min-width: 0;
}

.photo-placeholder-one .memory-photo {
  object-position: center 52%;
}

.photo-placeholder-2 .memory-photo {
  object-position: center 48%;
}

.photo-placeholder-3 .memory-photo {
  object-position: center 68%;
}

.photo-placeholder-4 .memory-photo {
  object-position: center 68%;
}

.photo-placeholder-5 .memory-photo {
  object-position: center 45%;
}

.photo-placeholder-6 .memory-photo {
  object-position: center 42%;
}

.photo-placeholder-7 .memory-photo {
  object-position: center 55%;
}

.photo-placeholder-8 .memory-photo {
  object-position: center 50%;
}