*{box-sizing:border-box}.flipbook-container{margin:0;display:flex;min-height:100vh;perspective:1000px;font:1em/1.4 Poppins,sans-serif;overflow:hidden;color:#041515;background-image:radial-gradient(circle farthest-corner at 50% 50%,#dae5e7 30%,#edf3f0 100%)}.book{position:relative;margin:auto;width:min(80vw,40ch);pointer-events:none;transition:translate 1s;translate:calc(min(var(--c, 0), 1) * 50%) 0}.book,.page{display:flex;transform-style:preserve-3d}.page{--thickness:4;font-size:2ch;pointer-events:all;user-select:none;transform-origin:left center;transition:transform 1s,rotate 1s ease-in calc((min(var(--i, 0), var(--c, 0)) - max(var(--i, 0), var(--c, 0))) * 50ms);translate:calc(var(--i, 0) * -100%) 0 0;transform:translateZ(calc((var(--c, 0) - var(--i, 0) - .5) * calc(var(--thickness) * .23ch)));rotate:0 1 0 calc(clamp(0, var(--c, 0) - var(--i, 0), 1) * -180deg)}.back,.front,.page{flex:none;width:100%}.back,.front{position:relative;backface-visibility:hidden;overflow:hidden;background-color:#fff;translate:0}.back{translate:-100% 0;rotate:0 1 0 180deg}.book{counter-reset:page -1}.book a{color:inherit}.page{box-shadow:0 .5em 1em -.2em rgba(0,0,0,.125)}.back,.front{display:flex;flex-flow:column wrap;justify-content:space-between;padding:2em;border:1px solid rgba(0,0,0,.1)}.back:has(img),.front:has(img){padding:0}.back img,.front img{width:100%;height:100%;object-fit:cover}.back:after,.front:after{position:absolute;bottom:1em;counter-increment:page;content:counter(page) ".";font-size:.8em}.cover:after{content:""}.front:after{right:1em}.front{background:linear-gradient(270deg,#f7f7f7 80%,#eee);border-radius:.1em .5em .5em .1em}.back:after{left:1em}.back{background-image:linear-gradient(90deg,#f7f7f7 80%,#eee);border-radius:.5em .1em .1em .5em}.cover{background:radial-gradient(circle farthest-corner at 80% 20%,rgba(10,92,51,.3) 0,rgba(10,41,36,.1) 100%),#323962 url(/magazine/1.png) 50% /cover;color:#f8fafb}.page-with-image .back,.page-with-image .front{padding:0}@supports not (translate:0){.book{transform:translateX(calc(min(var(--c, 0), 1) * 50%))}.page{transform-origin:left center;transform:translateX(calc(var(--i, 0) * -100%)) translateZ(calc((var(--c, 0) - var(--i, 0) - .5) * calc(var(--thickness) * .23ch))) rotateY(calc(clamp(0, var(--c, 0) - var(--i, 0), 1) * -180deg))}.back{transform:translateX(-100%) rotateY(180deg)}}