body {
  font-family: sans-serif;
}
.hub-image {
  max-width: 95%;
}
.hot-spot {
  position: absolute;
  border-radius: 100%;
  border: 2px solid rgba(0, 0, 0, 0.5);
  margin-top: -4%;
  margin-left: -4%;
  width: 8%;
  height: 8%;
  background-color: rgba(255, 255, 255, 0.7);
}
.hot-spot:hover {
  margin-top: -4.5%;
  margin-left: -4.5%;
  width: 9%;
  height: 9%;
  background-color: rgba(255, 255, 255, 0.8);
}
[data-quick-set] {
  border-radius: 100%;
  margin-right: 2%;
  width: 20px;
  height: 20px;
  border: 2px solid rgba(0, 0, 0, 0.5);
  background-color: rgba(255, 255, 255, 0.7);
}
[data-quick-set][data-value="0"]
{
  background-color: rgba(0, 0, 0, 0.7);
}
[data-quick-set][data-value="64"]
{
  background-color: rgba(64, 64, 64, 0.7);
}
[data-quick-set][data-value="128"]
{
  background-color: rgba(128, 128, 128, 0.7);
}
[data-quick-set][data-value="192"]
{
  background-color: rgba(192, 192, 192, 0.7);
}

.index {
  display: flex;
}
.index-item {
  width: 45%;
  position: relative;
}
.index-item img {
  width: 100%;
}