/* Keep the regular grid as a fallback until JavaScript positions the cards. */
.book-grid,.admin-grid{--masonry-columns:3}
[data-masonry].masonry-ready{display:block;position:relative}
[data-masonry].masonry-ready>*{position:absolute;box-sizing:border-box;margin:0}
/* Preserve the complete photograph and its aspect ratio in the editor too. */
.admin-thumbnail img{height:auto;object-fit:contain}
@media(max-width:950px){.book-grid{--masonry-columns:2}}
@media(max-width:800px){.admin-grid{--masonry-columns:2}}
@media(max-width:640px){.book-grid{--masonry-columns:1}}
@media(max-width:480px){.admin-grid{--masonry-columns:1}.admin-thumbnail img{height:auto}}

/* Smaller prints keep opening a photograph a meaningful enlargement. */
.book-grid{--masonry-columns:4;grid-template-columns:repeat(4,minmax(0,1fr))}
.print-frame{width:fit-content;max-width:100%;margin-inline:auto}
.print-frame img{width:auto;max-width:100%;max-height:35dvh;object-fit:contain}
@media(min-width:1500px){.book-grid{--masonry-columns:5;grid-template-columns:repeat(5,minmax(0,1fr))}}
@media(max-width:1000px){.book-grid{--masonry-columns:3;grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.book-grid{--masonry-columns:2;grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.book-grid{--masonry-columns:1;grid-template-columns:1fr}.print-frame{max-width:80%}}