.streetmap {
  width: 100%;
}

.streetmap img {
  display: block;
}

.streetmap iframe {
  width: 100%;
  height: var(--height-streetmap);
  max-height: var(--max-height-streetmap);
  border: none;
  display: none;
}

.activate-map-placeholder {
  height: 40px;
}

.activate-map {
  background-color: var(--color-grey-1);
  padding: 8px;
}

.activate-map span {
  display: block;
  font-size: .8rem;
}

.activate-map-trigger {
  padding: 4px 6px;
  color: var(--color-white);
  background-color: var(--color-brand-secondary);
  border: none;
  transition: background-color .2s;
  cursor: pointer;
  appearance: none;
}

.activate-map-trigger:hover {
  background-color: var(--color-brand-primary);
}

.activate-map span a {
  color: var(--color-brand-primary);
  text-decoration: underline;
  transition: color .2s;
}

.activate-map span a:hover {
  color: var(--color-brand-secondary);
}

.streetmap.loaded iframe {
  display: block;
}

.streetmap.loaded img {
  display: none;
}

.streetmap.loaded + .activate-map-placeholder > .activate-map {
  display: none;
}

.is-touch-device .streetmap iframe {
  pointer-events: none;
}

@media (prefers-color-scheme: dark) {
  .streetmap {
    filter: brightness(.8);
  }
}