.explosion-drawing {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--c-grayscale-off-white);
  margin-top: 0;
  padding: 4rem 5.913rem;
}
.explosion-drawing button {
  background: none;
  border: none;
}
.explosion-drawing ul {
  list-style: none;
}
@media (max-width: 767px) {
  .explosion-drawing {
    padding: var(--s-lg) var(--s-lg);
  }
}
.explosion-drawing__container {
  position: relative;
}
@media (max-width: 767px) {
  .explosion-drawing__container {
    margin-top: var(--s-7xl);
    margin-bottom: var(--s-4xl);
  }
}
.explosion-drawing__container img {
  width: auto;
  mix-blend-mode: multiply;
}
.explosion-drawing .headline {
  position: absolute;
  top: var(--s-3xl);
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  margin: 0;
}
@media (max-width: 767px) {
  .explosion-drawing .headline {
    top: var(--s-lg);
  }
}
.explosion-drawing__content {
  position: relative;
}
.explosion-drawing__hotspots {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.explosion-drawing__hotspots-toggle {
  display: none;
  color: var(--c-brand);
  font-size: var(--text-lg);
  font-weight: 700;
  margin-top: var(--s-md);
  text-align: right;
  cursor: pointer;
}
@media (max-width: 767px) {
  .explosion-drawing__hotspots-toggle {
    display: block;
  }
  .explosion-drawing__hotspots-toggle span {
    display: none;
  }
  .explosion-drawing__hotspots-toggle span.show {
    display: inline-block;
  }
  .explosion-drawing__hotspots-toggle.disabled span.hide {
    display: inline-block;
  }
  .explosion-drawing__hotspots-toggle.disabled span.show {
    display: none;
  }
}
.explosion-drawing__tooltips {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
@media (max-width: 767px) {
  .explosion-drawing__tooltips--visible {
    position: relative;
    margin-bottom: var(--s-2xl);
    margin-top: var(--s-3xl);
  }
}
.explosion-drawing .hotspot {
  position: absolute;
  width: var(--s-3xl);
  height: var(--s-3xl);
  box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.25);
  background-color: #fff;
  border-radius: 50%;
  font-size: 0;
  z-index: 100;
}
.explosion-drawing .hotspot::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: var(--s-lg);
  height: var(--s-lg);
  background-color: var(--c-brand);
  border-radius: 50%;
  transition: width 0.2s, height 0.2s;
}
.explosion-drawing .hotspot.clickable {
  cursor: pointer;
}
.explosion-drawing .hotspot.show::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='25'%3E%3Cpath fill='none' fill-rule='evenodd' stroke='%23FFF' stroke-linecap='round' stroke-width='1.28' d='m5.5 5.51 14 14m0-14-14 14'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  width: 1.8rem;
  height: 1.8rem;
}
.explosion-drawing .hotspot.hide {
  display: none;
}
.explosion-drawing .tooltip {
  position: absolute;
  max-width: var(--w-narrow);
  border-radius: 6px;
  box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.15);
  background-color: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(5px);
  padding: var(--s-lg);
  font-size: var(--text-base);
  display: none;
}
.explosion-drawing .tooltip.show {
  display: block;
  z-index: 101;
}
@media (max-width: 767px) {
  .explosion-drawing .tooltip {
    position: relative;
    top: 0 !important;
    left: 0 !important;
    width: 100%;
    max-width: 100%;
    margin-bottom: -7.5rem;
  }
}
.explosion-drawing .tooltip p {
  color: var(--c-grayscale-off-dark);
  margin-bottom: var(--s-xs);
}
.explosion-drawing .tooltip a::after {
  vertical-align: middle;
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='21'%3E%3Cpath fill='none' stroke='%23C70017' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.28' d='m7.5 5.19 5.833 5.833L7.5 16.856'/%3E%3C/svg%3E");
}