/* === Drawings === */
.drawing-slide-wrapper {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: 1rem 0;
}

.drawing-slide-track {
  gap: 1.5rem;
  width: max-content;
  display: inline-flex;    /* important for stable scrollWidth + no wrap */
  white-space: nowrap;     /* belt-and-braces */
  will-change: transform;
}

.drawing-slide-track img {
  height: 160px;
  border-radius: 10px;
  cursor: pointer;
  transition: transform 0.3s ease;
  flex-shrink: 0;
}
.drawing-slide-track img:hover { transform: scale(1.05); }

/* Fade masks */
.drawing-fade-left,
.drawing-fade-right {
  position: absolute; top: 0; bottom: 0; width: 80px;
  pointer-events: none; z-index: 2;
}
.drawing-fade-left  { left: 0;  background: linear-gradient(to right, #f8f8f8, transparent); }
.drawing-fade-right { right: 0; background: linear-gradient(to left,  #f8f8f8, transparent); }

/* === Books === */
.book-slide-wrapper {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: 1rem 0;
}

.book-slide-track {
  gap: 1.5rem;
  width: max-content;
  display: inline-flex;    /* important for stable scrollWidth + no wrap */
  white-space: nowrap;     /* belt-and-braces */
  will-change: transform;
}

.book-slide-track img {
  height: 160px;
  border-radius: 10px;
  cursor: pointer;
  transition: transform 0.3s ease;
  flex-shrink: 0;
}
.book-slide-track img:hover { transform: scale(1.05); }

/* Fade masks */
.book-fade-left,
.book-fade-right {
  position: absolute; top: 0; bottom: 0; width: 80px;
  pointer-events: none; z-index: 2;
}
.book-fade-left  { left: 0;  background: linear-gradient(to right, #f8f8f8, transparent); }
.book-fade-right { right: 0; background: linear-gradient(to left,  #f8f8f8, transparent); }