/* shelves of "books": image + caption cards (index, /projects, /travel). big = 350x198, small = 230x130 */
.shelf{display:grid; justify-content:center; gap:16px; margin:50px auto 0; padding:0 calc(16px + var(--safe-r)) 0 calc(16px + var(--safe-l)); max-width:1200px}
.shelf.big{grid-template-columns:repeat(auto-fit, 350px); gap:16px 100px}
.shelf.small{grid-template-columns:repeat(auto-fit, 230px); gap:16px 20px}
.book{text-align:center}
.book img{display:block; width:100%; height:auto; border-radius:3px}
.book p{margin:6px 0 0; line-height:1.3}
.shelf.big .book p{font-size:20pt}
.shelf.small .book p{font-size:12pt}
.content .shelf{padding:0; justify-content:start}

@media (max-width:560px){
  .shelf{margin-top:36px}
  .shelf.big, .shelf.small{grid-template-columns:1fr; gap:22px}
  .shelf.big .book p{font-size:19px}
  .shelf.small .book p{font-size:16px}
}