.preview-gallery-title {
  margin-top: 20px;
  font-size: 15px;
}

.thumbs {
  grid-template-columns: repeat(3, minmax(135px, 1fr));
  gap: 12px;
}

.thumb-preview {
  height: 205px;
  cursor: pointer;
  outline: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.thumb-preview:hover,
.thumb-preview:focus-visible {
  border-color: #9b65d4;
  box-shadow: 0 8px 22px rgba(72, 36, 132, 0.15);
  transform: translateY(-2px);
}

.thumb-preview.selected {
  border-color: #ff2b83;
  box-shadow: 0 0 0 3px rgba(255, 43, 131, 0.14);
}

.preview-main.preview-changing img {
  animation: preview-page-in 0.18s ease-out;
}

@keyframes preview-page-in {
  from { opacity: 0.55; transform: scale(0.985); }
  to { opacity: 1; transform: scale(1); }
}

@media (max-width: 1400px) {
  .thumbs {
    grid-template-columns: repeat(2, minmax(150px, 1fr));
  }
}

@media (max-width: 700px) {
  .thumbs {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding: 3px 2px 10px;
    scroll-snap-type: x mandatory;
  }

  .thumb-preview {
    flex: 0 0 180px;
    height: 230px;
    scroll-snap-align: start;
  }
}