.book-container-1{width:700px;display:grid;grid-template-columns:1fr 1fr;align-items:center;justify-items:center;gap:70px 50px;margin:0 auto}.book-container-1>img{width:220px}.book-container-1 .book{width:18.5em;height:23.0991em;margin-top:-4.4em;position:relative;transform:perspective(60em) rotateX(58deg) rotateZ(-34deg) skewY(-7deg);box-shadow:-1.4em 1.7em .3em -.3em rgba(0,0,0,.8),-1.6em 1.8em .9em -.2em rgba(0,0,0,.5),.3em 1.9em 1.3em rgba(0,0,0,.3);border-top-right-radius:.4em}.book-container-1 .book img{border-top-right-radius:.4em;box-sizing:border-box;width:100%;clip:rect(0em,18.5em,23.1em,0em);display:block;position:absolute;filter:saturate(90%)}.book-container-1 .book:before,.book-container-1 .book:after{content:"";position:absolute;top:0}.book-container-1 .book:before{width:105%;height:105%;left:-5%;z-index:-1;background-repeat:no-repeat;background-image:linear-gradient(115deg,transparent 2.8%,#3f3f3f 3%,#3f3f3f 16%,transparent 16%),linear-gradient(125deg,transparent 10%,#3f3f3f 10%,#3f3f3f 17%,#222 46.8%,transparent 47%),linear-gradient(125deg,transparent 46%,rgba(0,0,0,.5) 46.5%,rgba(0,0,0,.25) 49%,transparent 53%),linear-gradient(to right,#444,#666),linear-gradient(#444,#444),linear-gradient(140deg,transparent 45%,#eee 45%,#ccc 96.8%,rgba(170,170,170,0) 97%);background-size:100% 100%,100% 100%,100% 100%,100% .4em,94% .2em,100% 100%;background-position:0 0,0 0,0 0,0 95.8%,0 100%,0 0}.book-container-1 .book:after{width:100%;height:100%;background-repeat:no-repeat;background-image:linear-gradient(to right,transparent 2%,rgba(0,0,0,.1) 3%,rgba(0,0,0,.1) 4%,transparent 5%),linear-gradient(-50deg,rgba(0,0,0,.1) 20%,transparent 100%),linear-gradient(-50deg,rgba(0,0,0,.2) 20%,transparent 100%),linear-gradient(to bottom,rgba(0,0,0,.1) 20%,transparent 100%),linear-gradient(to bottom,rgba(0,0,0,.1) 20%,transparent 100%);background-size:100% 100%,2% 20%,1% 20%,2% 20%,1% 20%;background-position:0 0,2.2% 100%,3% 100%,2.2% 0,3% 0}.book-container-2{display:grid;grid-template-columns:100%;justify-items:center;align-items:center}.book-container-2 .book{width:225px;height:350px;position:relative;text-align:center;margin:120px 10px 20px}.book-container-2 .book .book-cover{background-size:100% 100%}.book-container-2 .book:hover,.book-container-2 .book:active{cursor:pointer}.book-container-2 .book:hover .book-cover,.book-container-2 .book:active .book-cover{transform:perspective(2000px) rotateY(-30deg);-webkit-transform:perspective(2000px) rotateY(-30deg);transform-style:preserve-3d;-webkit-transform-style:preserve-3d;box-shadow:inset 4px 1px 3px rgba(255,255,255,.3764705882),inset 0 -1px 2px rgba(0,0,0,.5019607843),10px 0px 10px -5px rgba(0,0,0,.1882352941)}.book-container-2 .book:hover .effect,.book-container-2 .book:active .effect{width:40px}.book-container-2 .book:hover .light,.book-container-2 .book:active .light{opacity:1;width:70%}.book-container-2 .book:hover .title,.book-container-2 .book:active .title{opacity:1}.book-container-2 .book-cover{position:absolute;z-index:1;width:100%;height:100%;transform-origin:0 50%;-webkit-transform-origin:0 50%;background:#111;background-size:cover;border-radius:3px;box-shadow:inset 4px 1px 3px rgba(255,255,255,.3764705882),inset 0 -1px 2px rgba(0,0,0,.5019607843);transition:all .5s ease-in-out;-webkit-transition:all .5s ease-in-out}.book-container-2 .effect{width:20px;height:100%;margin-left:10px;border-left:2px solid rgba(0,0,0,.062745098);background-image:linear-gradient(90deg,rgba(255,255,255,.2) 0%,rgba(255,255,255,0) 100%);transition:all .5s ease}.book-container-2 .light{width:90%;height:100%;position:absolute;border-radius:3px;background-image:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.2) 100%);top:0;right:0;opacity:.1;transition:all .5s ease;-webkit-transition:all .5s ease}.book-container-2 .book-inside{width:calc(100% - 2px);height:96%;position:relative;top:2%;border:1px solid grey;border-radius:3px;background:#fff;box-shadow:10px 40px 40px -10px rgba(0,0,0,.1882352941),inset -2px 0 0 grey,inset -3px 0 0 #dbdbdb,inset -4px 0 0 #fff,inset -5px 0 0 #dbdbdb,inset -6px 0 0 #fff,inset -7px 0 0 #dbdbdb,inset -8px 0 0 #fff,inset -9px 0 0 #dbdbdb}.book-container-2 .title{width:100%;color:#333;text-align:center;position:absolute;top:-40px;height:1px;display:flex;align-items:flex-end;opacity:0;transition:all 1s ease-in-out;-webkit-transition:all 1s ease-in-out}.book-container-2 .title h2{font-size:18px;width:100%;margin:0;line-height:1.3}@media (min-width:586px){.book-container-2{grid-template-columns:50% 50%}}@media (min-width:992px){.book-container-2{grid-template-columns:33.33% 33.33% 33.33%}}