/* Контейнер превью: фиксированная ширина, вертикальная прокрутка при необходимости */

.thumbs-container {
  width: 92px;
  max-height: 350px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 6px;
  scrollbar-width: thin;
  scrollbar-color: #bdbdbd transparent;
}

/* Chrome/Edge/Safari scrollbar */

.thumbs-container::-webkit-scrollbar {
  width: 6px;
}

.thumbs-container::-webkit-scrollbar-thumb {
  background: #bdbdbd;
  border-radius: 6px;
}

.thumbs-container::-webkit-scrollbar-track {
  background: transparent;
}

/* Сама колонка миниатюр */

.thumbs {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Миниатюры */

.thumb {
  width: 84px;
  height: auto;
  object-fit: cover;
  border-radius: 6px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform .12s ease, border-color .12s ease;
}

.thumb:hover {
  transform: scale(1.03);
  border-color: rgba(13,110,253,0.5);
}

.thumb.active {
  border-color: #0d6efd;
}

/* Главное изображение */

.main-image {
  max-height: 350px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
  width: 100%;
  
/* Центрировать изображение */
/*  width: 100%;*/
/*  height: 400px;*/
/*  object-fit: contain;*/      /* Вмещает целиком, без обрезки */
/*  object-position: center;*/  /* Центрирует изображение */
/*  background-color: #f8f9fa;*/ /* Небольшой фон для пустых полей */
/*  display: block;*/
}

/* На узких экранах — превью сверху (чтобы не ужимать) */


@media (max-width: 767.98px) {
  .d-flex.align-items-start {
    flex-direction: column;
  }
  .thumbs-container {
    width: 100%;
    max-height: 110px;
    overflow-x: auto;
    overflow-y: hidden;
    display: flex;
  }
  .thumbs {
    flex-direction: row;
    gap: 8px;
  } 
  .d-flex.align-items-start {
    flex-direction: column-reverse !important;    /* Поменять местами превью и главное избражеине слайдера */
  }
  .main-image {
    margin-top: 12px;
  }
  .thumb {
    width: 80px;
    height: 80px;
  }
}