.book-spread{display:grid;grid-template-columns:.85fr 2fr;gap:30px;min-height:355px;padding:14px}.book-cover{background:#23313e;border-left:8px solid var(--accent);padding:26px;box-shadow:8px 8px 0 #090b0d}.book-cover h2{font-size:34px;margin:25px 0}.book-cover span,.book-cover small{font-size:12px;color:var(--muted)}.book-cover p{font-size:14px}.cover-rule{height:1px;background:var(--accent);margin:20px 0}.book-pages{display:flex;align-items:center;padding-right:28px;isolation:isolate}.book-page{background:var(--text);color:var(--bg);padding:28px 20px;width:37%;flex-shrink:0;min-height:310px;margin-right:-14px;box-shadow:5px 8px 12px #0005;transform:rotate(var(--turn,-5deg));transition:transform .7s}.book-page:nth-child(2){--turn:1deg;z-index:2}.book-page:nth-child(3){--turn:7deg;z-index:3}.book-page small{font-size:11px;color:#46515a}.book-page h3{font-size:24px;margin:18px 0}.book-page p,.book-page li{font-size:12px}.book-page td,.book-page th{font-size:11px;padding:7px 4px;color:var(--bg);border-color:#cbd1d5}.book-page ol{padding-left:15px}.book-page.active{transform:translateY(-15px) rotate(0deg);z-index:4}.demo-button{margin-top:18px}@media(max-width:700px){.book-spread{display:block;padding:0}.book-cover{padding:20px;min-height:220px}.book-cover h2{font-size:30px;margin:15px 0}.book-cover p{margin-bottom:0}.book-pages{padding:24px 0 10px;position:relative;min-height:335px}.book-page{position:absolute;width:90%;min-height:290px;padding:20px;margin:0;left:5%}.book-page:nth-child(2){transform:rotate(3deg)}.book-page:nth-child(3){transform:rotate(6deg)}.book-page.active{transform:translateY(-5px) rotate(-2deg)}}

@media(max-width:700px){.book-cover{min-height:170px;padding:16px}.book-cover h2{font-size:26px;margin:10px 0}.book-cover h2 br{display:none}.book-cover p{font-size:12px}.cover-rule{margin:12px 0}.book-pages{min-height:300px;padding-top:18px}.book-page{min-height:270px}}