Responsive book grid

1 files changed, 6 insertions, 5 deletions

diff --git a/public/main.css b/public/main.css
index d920a26..32fa377 100644
--- a/public/main.css
+++ b/public/main.css
@@ -3,14 +3,15 @@
 :root {
   --color-focus: #888833;
 
-  --width-close-button: 3rem;
-
   --font-size-dog: 1.5rem;
 
   --spacing-mouse: 0.25rem;
   --spacing-cat: 0.5rem;
   --spacing-dog: 1rem;
   --spacing-horse: 2rem;
+
+  --width-close-button: 3rem;
+  --width-book: 13rem;
 }
 
 /* Top level */
@@ -154,7 +155,7 @@ header {
 
 .g-Books {
   display: grid;
-  grid-template-columns: repeat(7, minmax(0, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(var(--width-book), 1fr));
   grid-gap: 1rem;
 }
 
@@ -177,7 +178,7 @@ header {
 
 .g-Book__Image {
   display: flex;
-  width: 13rem;
+  width: var(--width-book);
   transition: all 0.2s ease-in-out;
 }
 
@@ -189,7 +190,7 @@ header {
 }
 
 .g-BookDetail img {
-  width: 13rem;
+  width: var(--width-book);
   margin-right: var(--spacing-horse);
   border: 1px solid #EEE;
 }