.book,
.object {
  background-image: url("../images/template-spine-horizontal.webp");
  background-repeat: no-repeat;
  background-size: 99% 98%;
  background-position: center;
  border-radius: 0.4rem;
  padding: 0.75rem 5%;
  line-height: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--gap);
  color: #000000;
  min-height: 3rem;
  margin: 0.15rem 0;
}

.checkout-archive .book {
  padding: 0.25rem 5%;
  min-height: 2.5rem;
}

.book.empty {
  background-image: url("../images/book-empty.webp");
  background-size: 100% 100%;
}

.book[data-orientation="horizontal"] {
  margin-left: calc(var(--gap) * -0.5);
  margin-right: calc(var(--gap) * -0.5);
}

.book[data-orientation="vertical"],
.object {
  writing-mode: vertical-rl;
  transform: rotateZ(180deg);
  background-image: url("../images/book-spine-v.webp");
  padding: 15% 0.5rem;
}

.book[data-orientation="vertical"].empty {
  background-image: url("../images/book-empty-v.webp");
}

.book.issue {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-areas: "title title numero link";
  grid-gap: var(--gap);
}

.checkout-archive .book.issue {
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
}

.book.issue .title {
  grid-area: title;
}

.book.issue .numero {
  grid-area: numero;
}

.book.issue .link {
  grid-area: link;
}

.object {
  background-image: url("../images/pencil.webp");
  background-size: auto 90%;
  background-position: bottom;
}