.playground-page .collection-panel .hero-portrait {
  aspect-ratio: 3 / 4;
  background: #edf2f8;
}
.playground-page .collection-panel .hero-portrait img {
  object-fit: contain;
  object-position: center bottom;
}
.playground-page .hero-modal .modal-portrait-wrap {
  max-width: 288px;
  aspect-ratio: 3 / 4;
  background: #183f70;
}
.playground-page .hero-modal .modal-portrait-wrap img {
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 4;
  object-fit: contain;
  object-position: center bottom;
}
.playground-page .hero-modal {
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
}
.playground-page .draw-avatar img,
.playground-page .summon-ticket img {
  object-position: center 20%;
}
@media (max-width: 680px) {
  .playground-page .hero-modal-mask .hero-modal { width: 100%; }
  .playground-page .hero-modal .modal-portrait-wrap { max-width: 216px; }
}