.HotspotAnnotation {
  position: absolute;
  height: auto;
  max-width: 100vw;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
  line-height: 1.2;
}

.HotspotAnnotation img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  display: block;
}

.Hotspot[slot="hotspot-4"] .HotspotAnnotation {
  align-items: center;
  text-align: center;
  padding: 1rem;
}

.Hotspot[slot="hotspot-4"] .HotspotAnnotation img {
  height: 35vh;
}

.Hotspot[slot="hotspot-4"] .HotspotAnnotation a {
  font-size: 1rem;
}

.Hotspot[slot="hotspot-7"] .HotspotAnnotation {
  transform: translateY(-100%);
}

.Hotspot[slot="hotspot-6"] .HotspotAnnotation img,
.Hotspot[slot="hotspot-7"] .HotspotAnnotation img {
  max-width: 90%;
}

.Hotspot[slot="hotspot-8"] .HotspotAnnotation {
  transform: translateY(-130%) translateX(-85%);
}

@media only screen and (max-width: 500px) {
  .color-options {
    flex-direction: row;
    justify-content: center;
    width: 100%;
    bottom: 2%;
    top: unset;
    right: unset;
  }
}

@media screen and (max-width: 666px) {
  .Hotspot[slot="hotspot-4"] .HotspotAnnotation {
    height: 30vh;
    left: -400%;
    top: 100%;
    transform: translateY(2%);
  }

  .Hotspot[slot="hotspot-4"] .HotspotAnnotation img {
    height: 25vh;
  }

  .Hotspot[slot="hotspot-4"] .HotspotAnnotation a {
    font-size: 0.8rem;
  }

  .Hotspot[slot="hotspot-6"] .HotspotAnnotation#annotation6 {
    left: -180px;
  }
}