@media (max-width: 900px) {
  .container {
    width: min(100% - 40px, 1180px);
  }
  .hero-grid {
    gap: 10px;
  }
  .hero h1 {
    font-size: 60px;
  }
  .hero-art {
    transform: scale(0.86);
  }
  .catalog-tools {
    align-items: stretch;
    flex-direction: column;
  }
  .book-grid {
    gap: 20px;
  }
  .book-card .cover {
    height: 310px;
  }
  .cover__inner strong {
    font-size: 27px;
  }
  .detail-layout {
    gap: 40px;
  }
  .detail-cover {
    height: 460px;
  }
  .reader-layout {
    grid-template-columns: 200px 1fr;
    gap: 25px;
  }
}