Switch overview to three-column book grid

static/styles.css

@@ -75,59 +75,74 @@ h2 {
   list-style: none;
   margin: 0;
   padding: 0;
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 0.75rem;
 }
 
 .book-item {
   border: 1px solid #000;
-  margin-bottom: 0.6rem;
+  padding: 0.5rem;
-  padding: 0.6rem;
 }
 
 .book-card {
-  display: table;
+  display: block;
-  width: 100%;
   color: inherit;
   text-decoration: none;
 }
 
-.book-card-cover,
+.book-card-cover {
-.book-card-body {
+  display: block;
-  display: table-cell;
+  margin-bottom: 0.5rem;
-  vertical-align: top;
 }
 
-.book-card-cover {
+.book-card-body {
-  width: 4.8rem;
+  display: block;
-  padding-right: 0.75rem;
+}
+
+.book-detail-cover {
+  display: block;
+}
+
+.book-card-cover,
+.book-detail-cover {
+  text-align: center;
 }
 
 .book-cover,
 .book-cover-placeholder {
-  display: block;
+  display: inline-block;
-  width: 4.2rem;
+  width: 100%;
-  height: 6rem;
+  max-width: 100%;
+  aspect-ratio: 2 / 3;
   border: 1px solid #000;
   object-fit: cover;
+  vertical-align: top;
 }
 
 .book-cover-placeholder {
   text-align: center;
-  line-height: 6rem;
+  font-size: 0.75rem;
-  font-size: 0.8rem;
   font-weight: bold;
+  line-height: 1.2;
+  padding-top: 2.3rem;
+  box-sizing: border-box;
 }
 
 .book-cover-detail,
 .book-cover-placeholder-detail {
   width: 8rem;
   height: 11.5rem;
+  max-width: none;
   margin-bottom: 1rem;
 }
 
 .book-title {
   display: block;
-  min-height: 44px;
   font-weight: bold;
+  font-size: 0.95rem;
+  line-height: 1.25;
+  margin-bottom: 0.25rem;
 }
 
 .book-author,
@@ -136,10 +151,15 @@ h2 {
   margin-top: 0.2rem;
 }
 
+.book-author {
+  font-size: 0.85rem;
+  line-height: 1.25;
+}
+
 .format {
   display: block;
   margin-top: 0.2rem;
-  font-size: 0.95rem;
+  font-size: 0.85rem;
 }
 
 .book-detail {