.booklet {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory; /* This forces the "paging" behavior */
  scroll-behavior: smooth;
  width: 100%;
/* 
  max-width: 800px; /* Adjust to your image size */
 */
  margin: 0 auto;
  border-radius: 8px;
}

/* Hide scrollbars for a cleaner "book" look */
.booklet::-webkit-scrollbar {
  display: none;
}
.booklet {
  -ms-overflow-style: none;  
  scrollbar-width: none;  
}

.page img {
  width: 100%;
  display: block;
  height: auto;
}

.page {
  position: relative; /* Necessary to contain the absolute links */
  flex: 0 0 100%;
  scroll-snap-align: center;
}

/* The invisible tap zones */
.prev-hitbox, .next-hitbox {
  position: absolute;
  top: 0;
  height: 100%;
  width: 40%; /* Adjust width based on how large you want the tap area */
  z-index: 10;
  cursor: pointer;
}

.prev-hitbox {
  left: 0;
}

.next-hitbox {
  right: 0;
}

/* Optional: Show a subtle cursor change or hint on hover */
.next-hitbox:hover {
  cursor: e-resize;
}
.prev-hitbox:hover {
  cursor: w-resize;
}