.carousel {
  display: flex;
  overflow-x: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
}

.carousel-item {
  scroll-snap-align: start;
  flex-shrink: 0;
}

.carousel-thumbnails {
  scroll-behavior: smooth;
  padding: calc(var(--theme-spacing) * 2);
  margin: calc(var(--theme-spacing) * 2);
  margin-top: 0;
  gap: calc(var(--theme-spacing) * 2);
  overflow: hidden;
}

.carousel-thumbnail {
  width: calc((100% - (3 * calc(var(--theme-spacing) * 2))) / 4);
  border: var(--border) solid var(--theme-base-200);
  border-radius: var(--theme-radius);
  overflow-x: auto;
  opacity: .7;
  transition: transform 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.carousel-thumbnail:hover,
.carousel-thumbnail.active {
  opacity: 1;
  border: var(--border) solid var(--theme-secondary);
  transform: scale(1.05);
}

.thumbnail-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}