.map-container {
  grid-column: 1;
  grid-row: 1;
  margin-block-start: 14vh;
}

.map-container th-map svg {
  display: block;
  width: 100%;
  height: 100%;
}

th-map .spot-group {
  transition: opacity var(--speed-medium);
}

th-map .spot-group[data-active="false"] {
  pointer-events: none;
}

th-map .spot-group[data-spot-group="introduction"] {
  pointer-events: none !important;
}

th-map .spot-group[data-active="true"] {
  pointer-events: all;
}

th-map .spot:hover {
  cursor: pointer;
}

th-map .spot {
  opacity: 0;
  transition: opacity var(--speed-medium);
}

th-map .spot-group[data-active="true"] .spot {
  opacity: 1;
}

th-map .spot text {
  font-family: var(--font-secondary);
  font-size: 1.125rem;
  fill: var(--color-primary);
}

th-map [data-spot-group="introduction"] text {
  visibility: hidden;
}

th-map .spot path {
  fill: #BF6D31;
}

@media (min-width: 72rem) {
  .map-container {
    position: fixed;
    z-index: var(--z-middle);
    display: flex;
    place-content: center;
    max-width: 800px;
    height: var(--pageHeight);
    margin-block: 0;
  }

  .map-container th-map {
    padding: var(--step-0);
  }

  th-map .spot-group {
    opacity: 1;
  }
}

@media (min-width: 92rem) {
  .map-container {
    max-width: 1200px;
  }
}