@media (max-width:767px){:root{--outer-padding:12px;--padding:7px;--tiles:2}}@media (min-width:768px){:root{--outer-padding:20px;--padding:15px;--tiles:3}}@media (max-width:1023px){:root{--body-font-size:15px;--header-font-size:3.3vw}}@media (min-width:1024px){:root{--outer-padding:25px;--padding:25px;--body-font-size:19px;--tiles:4}}@media (min-width:1280px){:root{--tiles:5}}@media (min-width:1536px){:root{--tiles:6}}@media (min-width:2048px){:root{--tiles:7}}.book-tiles{padding:0 var(--padding);text-align:left}.book-tiles a{box-sizing:border-box;display:inline-block;font-size:17px;margin:0 var(--padding) calc(var(--padding)*3);padding:0;position:relative;text-align:center;vertical-align:top;width:calc(100%/var(--tiles) - var(--padding)*2)}.book-tiles a:after{background:#f2f2f2;clip-path:polygon(0 15px,15px 0,calc(100% - 15px) 0,100% 15px,100% calc(100% - 15px),calc(100% - 15px) 100%,15px 100%,0 calc(100% - 15px));content:"";height:calc(100% + var(--padding)*2);inset:calc(var(--padding)*-1);opacity:0;position:absolute;transition:opacity .4s ease;width:calc(100% + var(--padding)*2);z-index:-1}.book-tiles a span{display:block}.book-tiles a .author{font-size:18px;font-style:italic;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.book-tiles a .author:first-letter{text-transform:uppercase}.book-tiles a .date{margin:1px 0 0}.book-tiles a .image{margin-bottom:20px;padding-bottom:129%;position:relative;width:100%}.book-tiles a .image .overlay{display:flex;flex-flow:column;flex-direction:column;height:100%;left:0;opacity:0;position:absolute;top:0;transition:opacity .4s ease;width:100%}.book-tiles a .image .overlay .flex-1{flex-grow:1}.book-tiles a .image .overlay .quote{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}@media (max-width:1279px){.book-tiles a .image .overlay .quote{-webkit-line-clamp:3}}@media (min-width:1280px){.book-tiles a .image .overlay .quote{-webkit-line-clamp:4}}.book-tiles a .image img{height:100%;left:0;-o-object-fit:contain;object-fit:contain;position:absolute;top:0;width:100%;z-index:-2}@media (hover:hover){.book-tiles a:hover:after{opacity:.9}.book-tiles a:hover .overlay{opacity:1}}.book-tiles a.no-image .overlay{opacity:1}.book-tiles a.no-image .overlay .quote,.book-tiles a.no-image .price{opacity:0;transition:opacity .4s ease}@media (hover:hover){.book-tiles a.no-image:hover .overlay .quote,.book-tiles a.no-image:hover .price{opacity:1}}
