.books-product-card {
  color: inherit;
  text-decoration: none;
  display: block;
  position: relative;
  overflow: hidden;
}

.books-product-card:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 5px;
}

.books-product-card .product-visual {
  background:
    radial-gradient(circle at 75% 18%, rgba(202, 113, 70, .3), transparent 31%),
    linear-gradient(145deg, #25140f, #070605 70%);
}

.books-product-card .book-object {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 42%;
  aspect-ratio: .68;
  transform: translate(-50%, -46%) rotate(-8deg);
  border-radius: 4px 12px 12px 4px;
  background: linear-gradient(150deg, #f7eee3, #c76c46 68%, #71331f);
  box-shadow: -10px 14px 0 #0b0908, 0 30px 55px rgba(0, 0, 0, .55);
  transition: transform .45s cubic-bezier(.2,.8,.2,1);
}

.books-product-card .book-object::before {
  content: 'STILL\A FIGURING\A IT OUT';
  white-space: pre;
  position: absolute;
  inset: 18% 12%;
  color: #22110c;
  font: 700 clamp(.65rem, 1vw, 1rem)/1.1 Georgia, serif;
  letter-spacing: .08em;
}

.books-product-card .book-object::after {
  content: 'AASTA';
  position: absolute;
  left: 12%;
  bottom: 10%;
  color: #22110c;
  font: 700 .58rem/1 ui-sans-serif, system-ui;
  letter-spacing: .18em;
}

.books-product-card .page-wave {
  position: absolute;
  inset: auto 12% 15%;
  height: 32%;
  border: 1px solid rgba(255,255,255,.24);
  border-left: 0;
  border-bottom: 0;
  transform: skewY(-10deg);
  opacity: .65;
}

.books-product-card:hover .book-object {
  transform: translate(-50%, -50%) rotate(-3deg) scale(1.04);
}

.books-product-card .product-link b {
  display: inline-block;
  transition: transform .25s ease;
}

.books-product-card:hover .product-link b {
  transform: translate(3px, -3px);
}

@media (prefers-reduced-motion: reduce) {
  .books-product-card .book-object,
  .books-product-card .product-link b {
    transition: none;
  }
}