.hero-thumbnails {
  display: flex;
  gap: 8px;
  padding: 15px;
}

.hero-thumbnails-inside .hero-thumbnails {
  padding-left: 15px;
}

.hero-thumbnails__media {
  width: 48px;
  height: 48px;
  position: relative;
  cursor: pointer;
}

.hero-thumbnails picture img,
.hero-thumbnails video {
  border-radius: 12px;
}

img.hero-thumbnails__image--selected,
video.hero-thumbnails__image--selected,
.hero-thumbnails__image--selected img,
.hero-thumbnails__image--selected video,
.hero-thumbnails picture img:hover,
.hero-thumbnails video:hover {
  border: 2px solid black;
}

@media (min-width: 786px) {
  .hero-thumbnails-inside .hero-thumbnails {
    position: absolute;
    z-index: 10000;
    bottom: 0;
    right: 0;
    padding-bottom: 35px;
    padding-right: 35px;
  }
  .hero-thumbnails-inside {
    padding-bottom: 15px;
  }
  .hero-thumbnails__image {
    border-radius: 20px;
  }
}

@media (min-width: 1024px) {
  .hero-thumbnails__media {
    width: 80px;
    height: 80px;
  }
}

.hero-thumbnails-as-bars .hero-thumbnails {
  position: absolute;
  bottom: 25px;
  z-index: 1000;
  display: flex;
  flex-wrap: wrap;
}

@media (min-width: 786px) {
  .hero-thumbnails-as-bars .hero-thumbnails {
    width: 80%;
  }
}

.hero-thumbnails-as-bars .hero-thumbnails__media {
  width: 53px;
  height: 3px;
  background-color: var(--color-primary-60);
}

.hero-thumbnails-as-bars .hero-thumbnails__image--selected {
  background-color: var(--color-secondary);
  border: unset;
}

@media (min-width: 1024px) {
  .hero-thumbnails-as-bars .hero-thumbnails {
    bottom: 29px;
    left: 30px;
    gap: 10px;
  }
  .hero-thumbnails-as-bars .hero-thumbnails__media {
    width: 80px;
  }
}