.discovery-project-media {
  position: relative;
}

.discovery-speaker-map {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.discovery-speaker-marker {
  position: absolute;
  opacity: 0;
  transform: translateY(5px) scale(.99);
  transition:
    opacity .58s ease,
    transform .72s cubic-bezier(.2, .7, .2, 1);
}

.discovery-speaker-marker-left {
  top: 4.2%;
  left: 16.2%;
  width: 15.1%;
  aspect-ratio: 2.18 / 1;
}

.discovery-speaker-marker-right {
  top: 18.6%;
  left: 57.4%;
  width: 11.2%;
  aspect-ratio: 2.12 / 1;
  transition-delay: .08s;
}

.discovery-speaker-marker svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.discovery-speaker-marker polygon {
  fill: rgba(20, 43, 54, .06);
  stroke: rgba(20, 43, 54, .42);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.discovery-speaker-marker span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(20, 43, 54, .62);
  font-size: clamp(10px, .72vw, 13px);
  font-weight: 400;
  letter-spacing: .04em;
  line-height: 1;
  white-space: nowrap;
}

.discovery-speaker-map.is-visible .discovery-speaker-marker {
  opacity: 1;
  transform: none;
}

.discovery-trigger[aria-expanded="true"] .discovery-trigger-icon {
  transform: none;
}

@media (max-width: 700px) {
  .discovery-speaker-marker-left {
    top: 14%;
    left: 10%;
    width: 31%;
  }

  .discovery-speaker-marker-right {
    top: 25%;
    left: 46%;
    width: 27%;
  }

  .discovery-speaker-marker span {
    font-size: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .discovery-speaker-marker {
    transition: none;
  }
}