.hero-art-frame {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 660px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 7px solid rgba(255, 255, 255, 0.12);
  border-radius: 30px;
  background: #dcead7;
  box-shadow: 0 38px 80px rgba(0, 0, 0, 0.32);
}

.hero-art-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.16), transparent 30%, rgba(16, 44, 36, 0.12));
  pointer-events: none;
}

.hero-art {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 67% center;
}

.card-power { top: 72px; }
.card-storage { bottom: 72px; }

@media (max-width: 950px) {
  .hero-art-frame {
    width: 100%;
    max-width: 720px;
    aspect-ratio: 16 / 10;
  }
}

@media (max-width: 600px) {
  .hero-art-frame {
    width: 100%;
    aspect-ratio: 4 / 3;
    border-width: 5px;
    border-radius: 22px;
  }
  .hero-art { object-position: 69% center; }
}