.map-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
}
#map {
  height: 50vh;
  width: 100%;
  position: relative;
  border-radius: var(--n-radius);
}
#info-panel {
  padding: 20px;
  background: white;
  transition: opacity 0.3s ease-in-out;
}
.filter-btns {
  /* position: absolute;
  top: 10px;
  left: 10px; */
  z-index: 10;
}
.filter-btns button {
  margin: 5px;
  padding: var(--btn-space);
  border-radius: var(--n-radius);
  cursor: pointer;
  overflow: hidden;
  border: 0px;
}

.selected {
  background-color: var(--m1-color);
  color: white;
}

@keyframes dropPins {
  from {
    transform: translateY(-50px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes bounce {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}