.clusterMarker {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 42px !important;
  height: 42px !important;
  background-color: var(--Base-Text-High-contrast);
  border: 4px solid var(--Base-Surface-Primary-light-Normal);
  color: var(--Base-Text-Inverted);
  border-radius: var(--Corner-radius-rounded);
  box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.3s;
}

.clusterMarker:hover,
.hoveredChild {
  background:
    linear-gradient(rgba(31, 28, 27, 0.3), rgba(31, 28, 27, 0.3)),
    var(--Surface-Brand-Primary-2-Default);
  width: 46px !important;
  height: 46px !important;
}

.count {
  font-family: var(--typography-Body-Regular-fontFamily);
  font-size: var(--typography-Subtitle-2-fontSize);
  font-weight: var(--typography-Subtitle-2-fontWeight);
}
