.map-viewport {
  overflow: hidden;
}

.map-canvas {
  transform-origin: 0 0;
}

.map-canvas > img {
  width: calc(100% * var(--map-scale, 1));
  height: auto;
  max-height: none;
  margin-right: auto;
  margin-left: auto;
  object-fit: fill;
  transform: none;
}

.pin-group .project-pin.active:not(.cluster-pin) {
  background: var(--orange);
  transform: none;
  box-shadow: 0 0 0 4px rgb(232 98 61 / 22%), 0 3px 10px #06182766;
}

.pin-group .single-pin.pin-open {
  background: var(--orange);
  box-shadow: 0 0 0 4px rgb(232 98 61 / 22%), 0 3px 10px #06182766;
}

.pin-group .cluster-pin.active,
.pin-group .cluster-pin.cluster-open {
  background: var(--navy);
  transform: none;
  box-shadow: 0 0 0 4px rgb(16 42 67 / 22%), 0 3px 10px #06182766;
}

.map-gesture-hint {
  display: block;
  margin-top: 4px;
}

.map-hint-mobile {
  display: none;
}

@media (max-width: 900px) {
  .map-viewport {
    touch-action: pan-y;
  }

  .map-viewport.is-zoomed {
    touch-action: none;
  }

  .map-viewport .map-canvas {
    will-change: transform;
  }

  .map-hint-desktop {
    display: none;
  }

  .map-hint-mobile {
    display: inline;
  }
}