.related,
 main.books {
     display: flex;
     flex-wrap: wrap;
     flex-direction: row;
     gap: 0 .5ch;
     font-size: 2rem;
     width: clamp(0px, 90%, 100%);
     z-index: 3;
     position: relative;
 }

 article.book {
     font-weight: bold;




     .date {
         font-weight: 300;
         /* font-size: 50%;
         vertical-align: top; */
     }

     section.image {
         top: 50%;
         left: 50%;
         display: flex;
         justify-content: center;
         align-items: center;
         position: fixed;
         opacity: 0;
         z-index: 5;
         pointer-events: none;

     }

     img {
         display: flex;
         position: fixed;
         max-width: 50%;
         height: auto;
         max-height: 70%;
     }

     h1 {
         position: relative;
         z-index: 10;
     }

     h1:not(.date):hover {
         color: var(--custom-color);
         z-index: 10;
     }

     h1:hover+section.image {
         opacity: 1 !important;
     }


 }