/* Memories: preserve the floating archival-photo character while using the new landscape photo. */
.world-object--memory {
  width: clamp(128px, 12vw, 188px);
  aspect-ratio: 4 / 3;
}

.memory-photo {
  padding: 6% 6% 17%;
  background: linear-gradient(145deg, #c8bea7, #8e8778 58%, #d7ccb4);
  box-shadow:
    0 24px 44px rgba(0, 0, 0, .72),
    0 0 0 1px rgba(255,255,255,.08) inset;
}

.memory-photo img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center 35%;
  filter: grayscale(.28) sepia(.1) contrast(.96) brightness(.78) saturate(.82);
  opacity: .92;
}

.memory-photo::after {
  bottom: 5.5%;
}

.memory-detail-visual {
  align-self: center;
  padding: 16px 16px 44px;
  background: linear-gradient(145deg, #c8bea7, #918a7b 60%, #d8cdb6);
}

.memory-detail-visual img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center 35%;
  filter: grayscale(.22) sepia(.08) contrast(.95) brightness(.84) saturate(.86);
}

@media (max-width: 760px) {
  .world-object--memory {
    width: 138px;
    aspect-ratio: 4 / 3;
  }

  .memory-detail-visual {
    margin: 28px 24px 0;
  }
}