.hero-art .mascot-frame {
  position: absolute;
  z-index: 1;
  width: min(78%, 510px);
  left: 50%;
  bottom: 75px;
  background: #fff;
  border: 8px solid #fff;
  border-radius: 22px;
  box-shadow: 0 28px 60px #061c7355;
  overflow: hidden;
  transform: translateX(-50%);
  transition: border-radius .5s ease, box-shadow .5s ease;
}

.hero-art .mascot {
  position: static;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  background: #fff;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  filter: none;
  animation: none;
  transform: translateX(-2%) scale(1.04);
}

@media (max-width: 800px) {
  .hero-art .mascot-frame { width: min(72%, 420px); bottom: 38px; }
}

@media (max-width: 600px) {
  .hero-art .mascot-frame { width: min(78%, 315px); bottom: 34px; border-width: 5px; border-radius: 16px; }
}