.flipbook {
  --size-x: calc(var(--size) / 1.414 * 2);
  --size-y: calc(var(--size));
  width: var(--size-x);
  height: var(--size-y);
  margin: 30px auto;
  position: relative;
  perspective: 1200px;
  transform-style: preserve-3d;
  overflow: visible;
}

.flipbook.landscape {
  --size-x: calc(var(--size) * 1.414 * 2);
  --size-y: calc(var(--size));
}

.flipbook::after {
  content: "";
  position: absolute;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  pointer-events: none;
  border: dashed 2px #00000033;
  inset: -4px;
}

.flipbook .sheet {
  position: absolute;
  top: 0;
  left: calc(var(--size-x) / 2);
  width: 50%;
  height: 100%;
  transform: rotateY(0deg);
  transition: transform 0.9s cubic-bezier(0.645, 0.045, 0.355, 1);
  transform-origin: 0% 0%;
  transform-style: preserve-3d;
  cursor: pointer;
  transform: rotateY(-180deg);
  opacity: 0;
}

.flipbook .sheet .front,
.flipbook .sheet .back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  background: white;
}

.flipbook .sheet .front > img,
.flipbook .sheet .back > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.flipbook .sheet .front {
  box-shadow: inset 30px 0 30px -20px #00000033;
}
.flipbook .sheet .back {
  box-shadow: inset -30px 0 30px -20px #00000033;
  transform: rotateY(180deg);
}

.flipbook .sheet .front::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 30px 0 30px -20px #00000033;
}
.flipbook .sheet .back::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset -30px 0 30px -20px #00000033;
}

.flipbook .page {
  appearance: none;
  z-index: 4;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  position: absolute;
  margin: 0;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
}

.flipbook .page:has(+ .sheet + .page:checked) {
  opacity: 1;
  pointer-events: auto;
}

.flipbook .page:checked + .sheet + .page {
  left: 50%;
  opacity: 1;
  pointer-events: auto;
}

.flipbook .sheet:has(+ .page:checked) {
  z-index: 1;
  opacity: 1;
}

.flipbook .page:checked + .sheet {
  z-index: 2;
  opacity: 1;
}

.flipbook .page:checked + .sheet + .page + .sheet {
  transform: rotateY(0deg);
  transition: transform 0.9s cubic-bezier(0.645, 0.045, 0.355, 1);
  z-index: 3;
  opacity: 1;
}

.flipbook .page:checked + .sheet + .page + .sheet + .page + .sheet {
  transform: rotateY(0deg);
  transition: 0s;
  z-index: 0;
  opacity: 1;
}