/* hero.css */

.hero {
  border: 1px solid var(--surface);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--mantle);
}

.hero-art {
  height: 280px;
  background: url("/assets/kitagrace-c6ffec12.png") center/cover no-repeat;
}

.hero-body {
  padding: 24px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-title {
  margin: 0 0 12px;
  text-align: center;
  color: var(--mauve);
}