.aom-map {
  position: relative;
  width: min(848px, 100%);
  margin: 0 auto;
  line-height: 1.4;
}

.aom-map > img {
  display: block;
  width: 100%;
  height: auto;
}

.aom-pin {
  position: absolute;
  z-index: 2;
  width: 4.5%;
  height: 6.2%;
  transform: translate(-50%, -100%);
  cursor: pointer;
  outline: 0;
}

.aom-pin:focus-visible {
  outline: 2px solid #b5f395;
  outline-offset: 3px;
  border-radius: 8px;
}

.aom-pin:hover::after,
.aom-pin:focus::after {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 31px;
  height: 31px;
  border: 2px solid #b5f395;
  border-radius: 50%;
  box-shadow: 0 0 12px #9dfb77;
  content: '';
  transform: translateX(-50%);
}

.aom-detail {
  position: absolute;
  z-index: 3;
  bottom: 49%;
  left: 32%;
  width: min(365px, 47%);
  padding: 18px 20px;
  border: 1px solid #ffffff38;
  border-radius: 12px;
  background: #132217ed;
  color: #f7fbf5;
  box-shadow: 0 8px 22px #0009;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transition: opacity .15s ease, visibility .15s ease;
}

.aom-detail.is-visible {
  visibility: visible;
  opacity: 1;
}

.aom-detail h2 {
  margin: 0 0 10px;
  color: #b9eab3;
  font-size: 1.3rem;
}

.aom-detail ul {
  margin: 0;
  padding-left: 19px;
  font-size: .92rem;
}

.aom-detail li {
  margin: 4px 0;
}

.aom-detail a {
  color: #97e77d;
  pointer-events: auto;
}

@media (max-width: 540px) {
  .aom-pin:hover::after,
  .aom-pin:focus::after {
    width: 10px;
    height: 10px;
    box-shadow: 0 0 7px #9dfb77;
  }

  .aom-detail {
    bottom: 74%;
    left: 5%;
    width: 85%;
    max-height: 42vh;
    padding: 10px 12px;
    overflow-y: auto;
    pointer-events: auto;
  }

  .aom-detail h2 {
    font-size: .95rem;
  }

  .aom-detail ul {
    font-size: .7rem;
  }
}