#featured,
.arrow,
.thumbnail {
  cursor: pointer;
}
#featured {
  max-width: 443px;
  height: 467px;
  object-fit: contain;
}
@media (max-width: 1000px) {
  #featured {
    max-width: 100%;
  }
}
.thumbnail {
  object-fit: cover;
  max-width: 180px;
  max-height: 100px;
  opacity: 0.5;
  margin: 5px;
}
.active,
.thumbnail:hover {
  opacity: 1;
}
#slide-wrapper {
  max-width: 500px;
  display: flex;
  min-height: 100px;
  align-items: center;
  margin-left: 10%;
}
#slider {
  width: 440px;
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
}
#slider::-webkit-scrollbar {
  width: 8px;
  scrollbar-width: thin;
}
#slider::-webkit-scrollbar-track {
  background: 0 0;
}
#slider::-webkit-scrollbar-thumb {
  background-color: #ababab;
  border-radius: 80px;
  border: transparent;
}
#slider::-webkit-scrollbar-thumb:hover {
  background-color: #919191;
}
.arrow {
  width: 30px;
  height: 30px;
  transition: 0.3s;
}
.arrow:hover {
  opacity: 0.5;
  width: 35px;
  height: 35px;
}


@media (max-width: 1024px) {
    #slide-wrapper {margin-left: 0px;}
    #featured {
      width: 100%;
    }
    #slider {
      width: auto;
    }
  }