.lndc-map__title {
  margin: 0 0 1.5rem;
  color: var(--color-text, #333);
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  font-weight: 400;
}

.lndc-map__sidebar {
  display: flex;
  height: var(--lndc-map-height);
  flex-direction: column;
}

.lndc-map__panel {
  min-height: 0;
  flex: 1 1 auto;
  overflow: hidden;
  border: 1px solid var(--color-surface, #f4f4f4);
  background-color: var(--color-bg, #fff);
}

.lndc-map__locations {
  height: 100%;
  margin: 0;
  overflow-y: auto;
  padding: 0;
  border-top: 1px solid var(--color-surface, #f4f4f4);
  list-style: none;
}

.lndc-map__location-item {
  display: block;
}

.lndc-map__mobile-more {
  display: none;
}

.lndc-map__mobile-count {
  margin: 1rem 0 .75rem;
  color: var(--color-muted, #777);
}

.lndc-map__location {
  display: flex;
  width: 100%;
  min-height: 62px;
  align-items: flex-start;
  gap: .75rem;
  padding: .85rem 1rem;
  border: 0;
  border-bottom: 1px solid var(--color-surface, #f4f4f4);
  background-color: var(--color-bg, #fff);
  color: var(--color-text, #333);
  text-align: left;
}

.lndc-map__location:hover,
.lndc-map__location:focus-visible {
  background-color: var(--color-surface, #f4f4f4);
}

.lndc-map__location > svg {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  fill: var(--color-accent, #0063a4);
}

.lndc-map__location span {
  display: flex;
  flex-direction: column;
  gap: .2rem;
}

.lndc-map__location strong {
  font-weight: 400;
}

.lndc-map__location small {
  color: var(--color-muted, #777);
}

.lndc-map__canvas-frame {
  position: relative;
  width: 100%;
  height: var(--lndc-map-height);
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--radius-sm) !important;
  background-color: var(--color-surface, #f4f4f4);
  clip-path: inset(0 round var(--radius-sm));
  -webkit-mask-image: -webkit-radial-gradient(#fff, #000);
}

.lndc-map__canvas {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.lndc-map__marker {
  display: flex;
  width: var(--marker-size);
  height: var(--marker-size);
  align-items: center;
  justify-content: center;
  border: 3px solid #fff;
  border-radius: 50%;
  background-color: var(--marker-color);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
  color: #fff;
  font-size: .85rem;
  font-weight: 700;
  transform: translate(-50%, -50%);
}

.lndc-map__marker--pin {
  border-radius: 50% 50% 50% 0;
  transform: translate(-50%, -70%) rotate(-45deg);
}

.lndc-map__marker--pin::after {
  width: 32%;
  height: 32%;
  border-radius: 50%;
  background-color: #fff;
  content: '';
}

.lndc-map__cluster {
  border-width: 2px;
}

.lndc-map__error {
  margin-top: .75rem;
  color: #a51f18;
}

@media (width <992px) {
  .lndc-map__canvas-frame {
    height: min(var(--lndc-map-height), 520px);
  }

  .lndc-map__sidebar {
    height: min(var(--lndc-map-height), 520px);
  }

  .lndc-map__panel {
    height: auto;
  }
}

@media (width <1200px) {
  .lndc-map__canvas-frame {
    height: min(var(--lndc-map-height), 100vw);
  }

  .lndc-map__sidebar {
    height: auto;
  }

  .lndc-map__panel {
    height: auto;
    overflow: visible;
    border: 0;
    background-color: transparent;
  }

  .lndc-map__locations {
    display: flex;
    height: auto;
    flex-direction: column;
    overflow: visible;
    border: 0;
    gap: .75rem;
  }

  .lndc-map__location {
    min-height: 60px;
    align-items: center;
    padding: .7rem 1rem;
    border: 1px solid #dbe7f4;
    border-radius: var(--radius-sm);
    background-color: var(--color-bg, #fff);
    box-shadow: 0 .25rem 1rem rgba(0, 78, 128, .06);
    font-size: var(--fs-sm, .875rem);
  }

  .lndc-map__location-item:nth-child(n + 6) {
    display: none;
  }

  .lndc-map.is-expanded .lndc-map__location-item:nth-child(n + 6) {
    display: flex;
  }

  .lndc-map__location > svg {
    width: 27px;
    height: 27px;
    flex-basis: 27px;
  }

  .lndc-map__location::after {
    width: .65rem;
    height: .65rem;
    margin-left: auto;
    border-top: 2px solid var(--color-accent, #0063a4);
    border-right: 2px solid var(--color-accent, #0063a4);
    content: '';
    transform: rotate(45deg);
  }

  .lndc-map__mobile-more {
    display: block;
  }

  .lndc-map__mobile-more .btn {
    min-height: 46px;
    border-width: 2px;
    border-radius: var(--radius-sm);
    border-color: var(--color-accent, #0063a4);
    color: var(--color-accent, #0063a4);
    font-size: var(--fs-sm, .875rem);
    font-weight: 600;
  }

  .lndc-map__mobile-more .btn:hover,
  .lndc-map__mobile-more .btn:focus-visible {
    border-color: var(--color-accent, #0063a4);
    background-color: var(--color-accent, #0063a4);
    color: #fff;
  }
}