How to have button size same when zooming in

Question

When zooming in to the phone screen, my button size remains the same. So I'm trying to have my button size change according to the aspect ratio of the mobile screen.

What is happening: https://i.postimg.cc/SRZt3pYF/ezgif-com-gif-maker.gif

Is there any way to make these small so that their size remains the same and have them in the same position as they were on the desktop? If not then what would be the best way to approach this.

JSFiddle: https://jsfiddle.net/jscy072p/7/

I have tried with media queries but doesn't seem to affect much.

.back {
  background-color: #2b2b2b;
}

.distribution-map {
  position: relative;
  width: 100%;
  padding: 20px;
  margin: 0 auto;
  color: invert(rgb(26, 26, 26));
  text-align: center;
  box-sizing: border-box;
}

.distribution-map>img {
  width: 100%;
  position: relative;
  margin: 0;
  padding: 0;
}

.map-point {
  cursor: pointer;
  outline: none;
  z-index: 0;
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 20px;
  opacity: 0.8;
  transform: translate(-50%, -50%);
  transition: opacity 0.25s ease-in-out 0.25s, width 0.25s ease-in-out 0.25s, height 0.25s ease-in-out 0.25s, z-index 0.25s ease-in-out 0.25s;
  background: rgba(26, 26, 26, 0.85);
  border: 5px solid #7fcff7;
}

.map-point:active,
.map-point:focus {
  margin: 0;
  padding: 0;
  opacity: 1;
  width: 300px;
  height: 220px;
  color: invert(rgb(26, 26, 26));
  z-index: 1;
  transition: opacity 0.25s ease-in-out, width 0.25s ease-in-out, height 0.25s ease-in-out;
  padding: 0 10px;
}

@media (max-width: 1025px) {
  .map-point {
    width: 20px;
    height: 20px;
    border-radius: 20px;
    border: 4px solid #7fcff7;
  }
}

@media (max-width: 450px) {
  .map-point {
    border-radius: 10px;
    border: 2px solid #7fcff7;
    height: 15px;
    width: 5px;
  }
}

<div class="back">
  <div class="distribution-map">
    <img src="https://i.postimg.cc/g0Rv0z7K/map.png" alt="Map">

    <!-- China -->
    <button class="map-point" style="top:46%;left:80%"></button>

    <!-- MA -->
    <button class="map-point" style="top:38%;left:28%"></button>

    <!-- Belgium -->
    <button class="map-point" style="top:32%;left:49%"></button>

    <!-- CA -->
    <button class="map-point" style="top:45%;left:15%"></button>

    <!-- UK -->
    <button class="map-point" style="top:32%;left:46.5%"></button>

    <!-- NY -->
    <button class="map-point" style="top:37%;left:27%"></button>

    <!-- Aus -->
    <button class="map-point" style="top:80%;left:88%"></button>

    <!-- CA -->
    <button class="map-point" style="top:43%;left:15%"></button>

    <!-- CA -->
    <button class="map-point" style="top:40%;left:13.5%"></button>

    <!-- MA -->
    <button class="map-point" style="top:36%;left:29%"></button>

    <!-- NJ -->
    <button class="map-point" style="top:40%;left:27%"></button>

    <!-- Spain -->
    <button class="map-point" style="top:41%;left:47.5%"></button>

    <!-- China -->
    <button class="map-point" style="top:48%;left:79.5%"></button>

    <!-- Taiwan -->
    <button class="map-point" style="top:51%;left:79.5%"></button>

    <!-- Canada -->
    <button class="map-point" style="top:33%;left:27.5%"></button>

    <!-- China -->
    <button class="map-point" style="top:48%;left:76%"></button>

    <!-- China -->
    <button class="map-point" style="top:45%;left:78%"></button>
  </div>
</div>