.views-locator-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: start;
}

.views-locator-layout--left .views-locator-layout__view {
  order: 2;
}

.views-locator-layout--left .views-locator-layout__map-pane {
  order: 1;
}

.views-locator-layout__map-pane {
  height: 100vh;
}

.views-locator-layout__map {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.views-locator-layout__pin .views-locator-layout__marker {
  width: 20px;
  height: 20px;
  background-color: var(--pen);
  border: 2px solid var(--paper);
  border-radius: 50%;
  position: relative;
  &::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid var(--pen);
    border-radius: 50%;
    transition:
      inset 0.25s,
      border-color 0.25s;
  }
}

.views-locator-layout__pin--active .views-locator-layout__marker {
  background-color: var(--accent);
  border-color: transparent;
}