/*
  Monotone palette (horizontal gallery, 3 items visible)
  Make it visually + behaviorally identical to the StoneMix and ColorMix palette galleries.
  Markup uses background-image on .monotonePaletteItem.
*/

.monotonePaletteBlock{
  margin-top: 10px;
  margin-bottom: 16px;
}

.monotonePaletteTitle{
  font-size: 16px;
  font-weight: 700;
  margin: 8px 0 10px;
  opacity: 0.9;
}

.monotonePaletteScroll{
  display: flex;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px 2px 10px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.monotonePaletteScroll::-webkit-scrollbar{
  height: 6px;
}

.monotonePaletteScroll::-webkit-scrollbar-thumb{
  background: rgba(0,0,0,0.18);
  border-radius: 6px;
}

.monotonePaletteItem{
  flex: 0 0 calc((100% - 20px) / 3); /* 3 cards per viewport (2 gaps) */
  aspect-ratio: 3 / 4;
  border-radius: 5px;
  border: 1px solid rgba(0,0,0,0.10);
  /* Match StoneMix/ColorMix gallery behavior */
  background-size: cover;
  background-repeat: no-repeat;
  /* keep transparent like other galleries */
  background-color: transparent;
  background-position: center;
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
  scroll-snap-align: start;
}