:root {
  --country-map-width: 720px;
  --country-map-aspect-ratio: 1 / 1;
  --country-map-icon-width: 60px;
  --country-map-icon-aspect-ratio: 1 / 1;
}

.country-map {
  position: relative;
  container-type: inline-size;
  width: clamp(360px, 40vw, var(--country-map-width));
  aspect-ratio: var(--country-map-aspect-ratio);
  flex: 0 0 auto;
}

.country-map-shape {
  position: absolute;
  inset: 0;
  background-color: var(--color-map-base);
  mask: var(--map-image) center / contain no-repeat;
  -webkit-mask: var(--map-image) center / contain no-repeat;
}

.country-map-locations {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.country-map-marker {
  position: absolute;
  left: var(--marker-x);
  top: var(--marker-y);
  width: 9.0277777778%;
  aspect-ratio: 65 / 104;
  color: var(--color-icon-secondary);
  text-decoration: none;
  pointer-events: auto;
}

.country-map-marker--primary {
  color: var(--color-icon-primary);
}

.country-map-marker[href] {
  cursor: pointer;
}

.country-map-marker[href]:hover,
.country-map-marker[href]:focus-visible {
  color: var(--color-icon-hover);
}

.country-map-marker:focus-visible {
  outline: 2px solid var(--color-icon-hover);
  outline-offset: 4px;
}

.country-map-marker-icon {
  position: absolute;
  left: 4.6153846154%;
  top: 0;
  width: 92.3076923077%;
  aspect-ratio: var(--country-map-icon-aspect-ratio);
  background-color: currentColor;
  mask: var(--marker-icon) center / contain no-repeat;
  -webkit-mask: var(--marker-icon) center / contain no-repeat;
  transition: background-color 150ms ease;
}

.country-map-marker-label {
  position: absolute;
  left: 49.2307692308%;
  top: 8.3333333333cqw;
  transform: translateX(-50%);
  width: max-content;
  text-align: center;
  font-family: var(--type-family-display), monospace;
  font-size: 2.5cqw;
  line-height: 1.3333333333;
  font-weight: var(--type-weight-regular);
  font-variation-settings: "CRSV" 0, "ELSH" 0, "ELXP" 0;
  white-space: pre;
  text-transform: uppercase;
  color: currentColor;
}

.country-map-marker--secondary .country-map-marker-label {
  line-height: 1.2222222222;
}

.country-map-marker-connector {
  position: absolute;
  display: flex;
  gap: 0.8333333333cqw;
  pointer-events: none;
}

.country-map-marker-connector > span {
  width: 0.8333333333cqw;
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: currentColor;
}

@media (prefers-reduced-motion: reduce) {
  .country-map-marker-icon {
    transition: none;
  }
}

@media (max-width: 444px) {
  .country-map {
    width: 100%;
  }
}