.book-container {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  row-gap: 1.5em;

  --overlap: 1.5em;
  margin-right: var(--overlap);
  margin-top: 1.5em;
}

.book-item {
  width: calc((var(--width) * 1em) - var(--overlap));
  height: calc(var(--height) * 1em);
}

.book {
  --rotate-angle: 30deg;

  height: 100%;
  width: calc(var(--width) * 1em);
  perspective: 400px;
  transform-origin: bottom right;

  transition: 100ms ease-in-out;
}

.spine {
  width: calc(var(--thickness) * 1em);
  height: calc(var(--height) * 1em);
  position: absolute;
  background: var(--spine-color);
  border-right: 2px solid var(--spine-color);

  transform-origin: bottom left;
  transform: rotateY(calc(var(--rotate-angle) - 90deg));
  transition: 100ms ease-in-out;
}

.cover {
  position: absolute;
  width: calc(var(--width) * 1em);
  height: calc(var(--height) * 1em);

  transform-origin: bottom left;
  transform: rotateY(var(--rotate-angle))
    translateZ(calc(var(--thickness) * 1em));
  transition: 100ms ease-in-out;
}

.book-item:not(:has(:checked)):hover .book {
  transform: scale(1.05) rotate(-2deg);
}

[type="radio"] {
  display: none;
}

.book-item:has(:checked) .book {
  --rotate-angle: 10deg;
  transform: scale(1.05);
}

.book-item:has(:checked) {
  z-index: 2;
  width: auto;
  margin-right: 0.5em;
  display: flex;
  gap: 0.5em;
}

.book-item:has(:checked) .label {
  padding-top: 1.5em;
  align-self: stretch;
  display: block;
  max-width: 15em;
}

.book-item .label {
  display: none;
}