/* Portrait media invariants for upload cards and fullscreen preview. */
.upload-preview-frame {
  width: min(100%, 240px);
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border-radius: 16px;
  background: #020604;
  border: 1px solid var(--line);
}

.upload-preview-frame .upload-preview {
  display: block;
  width: 100%;
  height: 100%;
  max-height: none;
  aspect-ratio: 9 / 16;
  object-fit: contain;
  border: 0;
  border-radius: 0;
  background: #020604;
}

.fullscreen-media-frame {
  height: min(calc(100dvh - 90px), calc(100vw * 16 / 9));
  max-height: calc(100dvh - 90px);
  aspect-ratio: 9 / 16;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #020504;
}

.fullscreen-media-frame img,
.fullscreen-media-frame video {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: contain;
  background: #020504;
}

@media (max-width: 600px) {
  .upload-preview-frame { width: min(100%, 180px); }
}