.map {
  aspect-ratio: 18/10;
  position: relative;
  background-color: #b2bec3;
  margin-inline: auto;
  width: 100%;
}

.map__snapshot {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 0.5em;
}

.map__grid {
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}

.map__grid--show {
  opacity: 1;
}

.map__grid,
.map__grid-vertical {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.map__toolbox {
  position: absolute;
  z-index: 20;
  padding: 4px;
}

.map__grid-vertical {
  --color: #a3b2b8;
  > span {
    width: 1px;
    height: 100%;
    display: block;
    position: absolute;
    background-color: var(--color);
    transform: translateX(-50%);

    &:nth-child(1) {
     left: 5%;
   }
   
   &:nth-child(2) {
     left: 10%;
   }
   
   &:nth-child(3) {
     left: 15%;
   }
   
   &:nth-child(4) {
     left: 20%;
   }
   
   &:nth-child(5) {
     left: 25%;
   }
   
   &:nth-child(6) {
     left: 30%;
   }
   
   &:nth-child(7) {
     left: 35%;
   }
   
   &:nth-child(8) {
     left: 40%;
   }
   
   &:nth-child(9) {
     left: 45%;
   }
   
   &:nth-child(10) {
     left: 50%;
   }
   
   &:nth-child(11) {
     left: 55%;
   }
   
   &:nth-child(12) {
     left: 60%;
   }
   
   &:nth-child(13) {
     left: 65%;
   }
   
   &:nth-child(14) {
     left: 70%;
   }
   
   &:nth-child(15) {
     left: 75%;
   }
   
   &:nth-child(16) {
     left: 80%;
   }
   
   &:nth-child(17) {
     left: 85%;
   }
   
   &:nth-child(18) {
     left: 90%;
   }
   
   &:nth-child(19) {
     left: 95%;
   }
  }
}