/* MyMappi v713 — a saved-place photo should preview as a real cover, not a teal media tile. */

html body .app-shell #memoryForm.is-save-for-later .memory-media-preview,
html body main.app-shell #memoryForm#memoryForm.is-save-for-later .memory-media-preview {
  display: grid !important;
  width: 100% !important;
  min-height: 0 !important;
  padding: 7px 0 2px !important;
  place-items: center !important;
}

html body .app-shell #memoryForm.is-save-for-later button.memory-media-thumb,
html body main.app-shell #memoryForm#memoryForm.is-save-for-later button.memory-media-thumb {
  width: min(46vw, 174px) !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 2px solid rgba(255, 255, 255, 0.96) !important;
  border-radius: 21px !important;
  background: #f5f1e8 !important;
  box-shadow:
    0 14px 30px rgba(5, 43, 50, 0.15),
    0 2px 7px rgba(5, 43, 50, 0.08) !important;
}

html body .app-shell #memoryForm.is-save-for-later .memory-media-thumb img,
html body main.app-shell #memoryForm#memoryForm.is-save-for-later .memory-media-thumb img {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  background: #f5f1e8 !important;
}

html body .app-shell #memoryForm.is-save-for-later .memory-media-thumb small,
html body main.app-shell #memoryForm#memoryForm.is-save-for-later .memory-media-thumb small {
  right: auto !important;
  bottom: 10px !important;
  left: 10px !important;
  padding: 6px 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: 999px !important;
  color: #fff !important;
  background: rgba(5, 37, 45, 0.72) !important;
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.16) !important;
  backdrop-filter: blur(10px) !important;
}

html body .app-shell #memoryForm.is-save-for-later .memory-media-remove,
html body main.app-shell #memoryForm#memoryForm.is-save-for-later .memory-media-remove {
  top: 9px !important;
  right: 9px !important;
  width: 30px !important;
  height: 30px !important;
  border-color: rgba(255, 255, 255, 0.42) !important;
  background: rgba(5, 37, 45, 0.72) !important;
  backdrop-filter: blur(10px) !important;
}

@media (max-width: 390px) {
  html body .app-shell #memoryForm.is-save-for-later button.memory-media-thumb,
  html body main.app-shell #memoryForm#memoryForm.is-save-for-later button.memory-media-thumb {
    width: min(48vw, 160px) !important;
  }
}