.sample-book-gallery { min-width: 0; }
.sample-book-gallery figure { margin: 0; }
.book-photo-frame, .book-thumb-art {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  background: #f5f4f1;
}
.book-photo-frame { cursor: zoom-in; }
.format-hero .book-photo-frame img, .book-thumb-art img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
}
.format-hero .book-photo-frame[data-view="detail"] img,
.book-photo-choice[data-view="detail"] img {
  position: absolute;
  bottom: 0;
  left: -15%;
  width: 130%;
  max-width: none;
  height: auto;
  aspect-ratio: auto;
}
.book-photo-choices {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(5px, 1vw, 12px);
  margin-top: 12px;
}
.book-photo-choice {
  min-width: 0;
  padding: 3px;
  border: 2px solid transparent;
  text-decoration: none;
  color: var(--ink, #171717);
  font-size: .78rem;
  line-height: 1.3;
}
.book-photo-choice > span:last-child { display: block; padding: 6px 1px 2px; }
.book-photo-choice:hover { border-color: #a39e94; }
.book-photo-choice[aria-current="true"] { border-color: currentColor; font-weight: 600; }
.sample-book-gallery figcaption { min-height: 1.45em; }
.alpi-format-gallery .book-photo-frame img, .alpi-format-gallery .book-thumb-art { background: #000; }
.alpi-format-gallery :is([data-view="open-book"], [data-view="veneer-swatches"]) img { object-fit: cover; }
@media (min-width: 1100px) {
  .alpi-format-gallery .book-photo-choices { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
  .alpi-format-gallery .book-photo-choice { overflow-wrap: anywhere; hyphens: auto; }
}
@media (max-width: 480px) {
  .book-photo-choice { padding: 2px; font-size: .72rem; }
}

.embossed-book-gallery :is(.book-photo-frame, .book-thumb-art) {
  aspect-ratio: 33 / 25;
  background: #171410;
}
:is(.embossed-book-stage, [data-book-stage]) { position: relative; }
:is(.embossed-book-stage, [data-book-stage]) button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid #ffffff80;
  border-radius: 50%;
  background: #171410bb;
  color: white;
  font: inherit;
  font-size: 1.25rem;
  cursor: pointer;
}
:is(.embossed-book-stage, [data-book-stage]) [data-book-prev] { inset-inline-start: 8px; }
:is(.embossed-book-stage, [data-book-stage]) [data-book-next] { inset-inline-end: 8px; }
:is(.embossed-book-stage, [data-book-stage]) button:is(:hover, :focus-visible) { background: #171410; }
[dir="rtl"] :is(.embossed-book-stage, [data-book-stage]) button span { transform: scaleX(-1); }
@media (min-width: 1100px) {
  .embossed-book-gallery .book-photo-choices {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 4px;
  }
  :is(.embossed-book-gallery, .natural-book-gallery) .book-photo-choice {
    font-size: .74rem;
    overflow-wrap: anywhere;
    hyphens: auto;
  }
}

.natural-book-gallery :is(.book-photo-frame, .book-thumb-art, .book-photo-frame img) { background: #000; }
.book-photo-count {
  position: absolute;
  inset-inline-end: 8px;
  bottom: 8px;
  padding: 3px 8px;
  color: white;
  background: #171410bb;
  font-size: .75rem;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
@media (min-width: 1100px) {
  .natural-book-gallery .book-photo-choices { grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 4px; }
}
@media (max-width: 820px) {
  .natural-book-gallery .book-photo-choices { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
  .natural-book-gallery .book-photo-choice { overflow-wrap: anywhere; hyphens: auto; }
}