.book{perspective:4000px;aspect-ratio:980/552;cursor:pointer;border-radius:16px;width:980px;max-width:calc(100% - 20px);height:100%;margin:10px auto;display:flex;position:relative}.book__frame{z-index:-1;--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);-webkit-box-shadow:var(--tw-ring-offset-shadow,0 0 transparent), var(--tw-ring-shadow,0 0 transparent), var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow,0 0 transparent), var(--tw-ring-shadow,0 0 transparent), var(--tw-shadow);background:#ededf0;border-radius:22px;position:absolute;top:-10px;bottom:-10px;left:-10px;right:-10px}.book__frame:before{content:"";z-index:-1;background:radial-gradient(rgba(255,255,255,0) 0,rgba(255,255,255,0) 76%,rgba(255,255,255,.5) 90%,#fff 120%);border-radius:18px;position:absolute;top:4.5px;bottom:4.5px;left:4.5px;right:4.5px}.book__frame:after{content:"";z-index:-1;background:#ededf0;border-radius:18px;position:absolute;top:6px;bottom:6px;left:6px;right:6px}.book__page{width:50%;height:100%;display:grid;position:relative}.book__page img{-o-object-fit:cover;object-fit:cover;width:100%;height:100%;overflow:hidden}.book__page img.page--left{-o-object-position:left;object-position:left;border-radius:16px 0 0 16px}.book__page img.page--right{-o-object-position:right;object-position:right;border-radius:0 16px 16px 0}.book__page--animated{cursor:pointer;z-index:2;pointer-events:none;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;transform-origin:0 0;transition:transform 1.3s cubic-bezier(.645,.045,.355,1);position:absolute;right:0;transform:rotateY(0)}.book:hover .book__page--animated{transform:rotateY(-180deg)}.book__page-front{width:100%;height:100%;position:absolute;transform:rotateY(0)translateZ(1px)}.book__page-back{width:100%;height:100%;padding:0 calc(var(--baseline) * 1.8);position:absolute;transform:rotateY(180deg)translateZ(1px)}