.spell-hero-figure {
  justify-self: end;
  width: min(15rem, 42vw);
  margin: 0.2rem 0 0;
  padding: 0.5rem;
  border: 1px solid var(--line);
  border-radius: 1.2rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015));
  box-shadow: var(--shadow);
}

.spell-hero-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0.85rem;
}

@media (max-width: 720px) {
  .spell-hero-figure {
    justify-self: center;
    width: min(100%, 14rem);
  }
}