.image-carousel {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-size-2);
  background: #000;
  max-width: calc(100vw - 32px);
}

.image-carousel-current-image-container {
  width: 100%;
  max-width: 500px;
  height: 600px;
  background: #555;
  & img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    cursor: pointer;
  }
}

.image-carousel-thumbnails {  
  white-space: pre;
  overflow-x: auto;
  width: 100%;
  margin: 8px;
  display: flex;
  & img {
    width: 100px;
    height: 100px;
    object-fit: contain;
    user-drag: none;
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    margin-right: 8px;
  }
  & .image-carousel-thumbnail-not-selected {
    border: 2px solid #333;
  }
  & .image-carousel-thumbnail-selected {
    border: 2px solid #ddd;
  }
}