.city-map__title {
  margin: 16px 0 8px;
  font-size: 20px;
}
.city-map__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 0 16px;
}
.city-map__filter {
  min-width: auto;
  padding: 8px 12px;
  font-size: 14px;
}
.city-map__canvas {
  width: 100%;
  height: calc(100vh - 180px);
  min-height: 360px;
  background: #e9f3ff;
}
.city-map__sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  max-width: 560px;
  margin: 0 auto;
  background: #fff;
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -4px 24px rgba(23, 36, 58, 0.16);
}
.city-map__sheet[hidden] {
  display: none !important;
}
.city-map__sheet-distance {
  margin: 0 0 16px;
  color: #17243a;
}
.city-map__sheet-cta {
  display: inline-flex;
}
.header__top-map {
  margin-left: 16px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  padding-bottom: 3px;
  border-bottom: 1px solid #fff;
  text-decoration: none;
  white-space: nowrap;
}
.header__top-map:hover,
.header__top-map:focus,
.header__top-map:active {
  color: #fff;
  text-decoration: none;
  border-bottom: none;
}