.book-cover picture { display: block; height: 100%; }
.book-cover img { display: block; width: 100%; height: 100%; object-fit: contain; }
.book-cover .jacket-cover { object-fit: cover; object-position: right; }

@media (max-width: 1099px) {
  main.page { display: flex; flex-direction: column; }
  .reading-list { display: contents; }
  .reading-list > :not(h1) { order: 2; }
  .bookshelf {
    order: 1;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 84px;
    grid-template-rows: 126px;
    gap: 10px;
    min-width: 0;
    overflow-x: auto;
    margin-bottom: 24px;
    padding-bottom: 8px;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
  }
  .book-cover { min-width: 0; scroll-snap-align: start; }
}

@media (min-width: 1100px) {
  main.page {
    max-width: 1480px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 64px;
  }
  .reading-list { min-width: 0; }
  .bookshelf {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 120px));
    grid-auto-rows: 180px;
    gap: 10px;
    align-content: start;
    padding-top: 44px;
  }
  .book-cover {
    display: block;
    height: 100%;
    width: 100%;
    max-width: 120px;
    aspect-ratio: 2 / 3;
    min-width: 0;
    min-height: 0;
    max-height: 180px;
    justify-self: center;
  }
}

@media (min-width: 1400px) {
  .bookshelf { grid-template-columns: repeat(5, minmax(0, 120px)); }
}

@media (min-width: 1100px) and (max-width: 1399px) {
  .now li { flex-wrap: wrap; gap: 0 6px; }
  .now .meta { flex-basis: 100%; }
}