#events-map {
  width: 100%;
  height: min(100vh, 700px);
  min-height: 450px;
}

.event-map-popup {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 11rem;
  color: var(--color-text);
  margin: 0 .5rem 0 0;
}

.event-map-popup__title {
  font-weight: 600;
  font-size: var(--text-base);
}

.event-map-popup__date,
.event-map-popup__place {
  font-size: 0.875rem;
}

.event-map-popup__link {
  display: inline-block;
  margin-top: 0.5rem;
}

.maplibregl-popup-content {
  font-family: inherit;
  padding: 1rem!important;
  background: #ddf8edeb!important;
  border-radius: 1rem!important;
  box-shadow: 0 1px 2px var(--color-text)!important;
}

.maplibregl-popup-close-button{
  font-size: var(--text-lg);
    color: var(--color-text);
    right: .2rem!important;
    top: .2rem!important;
}

.maplibregl-popup-close-button:hover{
  background: none!important;
  color: var(--color-accent);
}

.maplibregl-popup-anchor-top .maplibregl-popup-tip {
  border-bottom-color: #ddf8edeb!important;
}

.maplibregl-popup-anchor-bottom .maplibregl-popup-tip {
  border-top-color: #236248!important;
}

.maplibregl-popup-anchor-right .maplibregl-popup-tip {
  border-left-color: #b1c6bd !important
}

.maplibregl-popup-anchor-left .maplibregl-popup-tip {
  border-right-color: #b1c6bd !important
}

#events-map {
  width: 100%;
  height: min(70vh, 700px);
  min-height: 450px;
}

#events-map.single-event-map {
  height: 250px;
  min-height: 150px;
}

@media (max-width: 700px) {
  #events-map.single-event-map {
    height: 350px;
    min-height: 300px;
  }
}