.hero {
  min-height: 620px;
  background: #efe0c6;
}

.hero-photo {
  inset: 0;
  background: url("assets/mama-hawa-label-shelf-v3.png") 34% center / cover no-repeat;
  transform: none;
  will-change: auto;
}

.hero-photo::after {
  background: linear-gradient(90deg, transparent 28%, rgb(244 231 205 / 42%) 52%, rgb(244 231 205 / 96%) 72%);
}

.hero-webgl,
.hero-shelf-plane {
  display: none;
}

.hero-inner {
  min-height: 620px;
  justify-content: flex-end;
  padding-block: 48px 64px;
}

.hero-panel {
  width: min(500px, 46%);
  background: rgb(249 241 224 / 94%);
  box-shadow: 0 24px 60px rgb(57 34 20 / 16%);
}

.author-band--note {
  display: block;
  max-width: 820px;
  padding-left: clamp(1.25rem, 3vw, 2.5rem);
  border-left: 4px solid var(--color-accent);
}

.section {
  padding-block: clamp(3.5rem, 6vw, 5.5rem);
}

.shelf-item--cover {
  width: min(52%, 250px);
  max-height: 360px;
  object-fit: contain;
  filter: drop-shadow(0 18px 16px oklch(30% .03 45 / .22));
}

@media (max-width: 760px) {
  .hero {
    min-height: 0;
  }

  .hero-photo {
    position: relative;
    inset: auto;
    height: 360px;
    background-position: 30% center;
  }

  .hero-photo::after {
    background: linear-gradient(0deg, rgb(244 231 205 / 78%), transparent 48%);
  }

  .hero-inner {
    min-height: 0;
    padding: 0 0 48px;
  }

  .hero-panel {
    width: calc(100% - 24px);
    margin: -52px auto 0;
  }
}

@media (max-width: 420px) {
  .hero-photo {
    height: 300px;
  }
}