/* book.css */

/* ---------- hero ---------- */

.bk-hero__grid, .inside__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gutter);
  align-items: center;
}
.bk-hero__copy { grid-column: 1 / span 6; }
.bk-hero__art { grid-column: 7 / span 6; }

/* ---------- 01 inside ---------- */

.inside__art { grid-column: 1 / span 4; align-self: start; position: sticky; top: 8rem; }
.inside__copy { grid-column: 6 / span 7; }
.inside__copy .lead { margin-top: 2rem; font-style: italic; color: var(--text-muted); }
.inside__rows { margin-top: 2.5rem; }

/* ---------- 02 verdict ---------- */

.verdict {
  background:
    radial-gradient(55% 70% at 85% 50%, rgba(220, 154, 92, 0.13), transparent 70%),
    var(--bg-deep);
  border-block: 1px solid var(--line);
}
.verdict__title { max-width: 20ch; }
.verdict .lead { max-width: 34ch; margin-top: 2rem; color: var(--text-muted); }

/* ---------- responsive ---------- */

@media (max-width: 61.99rem) {
  .bk-hero__grid { row-gap: 3.5rem; }
  .bk-hero__copy, .bk-hero__art { grid-column: 1 / -1; }
}

@media (max-width: 47.99rem) {
  .inside__grid { row-gap: 3.5rem; }
  .inside__art, .inside__copy { grid-column: 1 / -1; }
  .inside__art { position: static; max-width: 22rem; }
}