Block position DIV element on image background (like hotspot)

i have problem with responsive element of project. Elements on the road must have been always in the same places against the background.

I set position absolute for every point on the road and i set position relative for section here background is.

<section id="blok_hotpoint" class="position-relative">

<img src="/wp-content/uploads/2022/08/road-bg.svg" id="very-specific-design" class="img-fluid ">

<div class="point-start-1">
    <div class="point-map position-relative d-flex justify-content-center align-items-center"></div>
    <div class="point d-flex flex-column justify-content-center align-items-start">
        <p class="fw-bolder"> NAME </p>
        <p> DESC</p>
    </div>
</div>

And i use this CSS

#blok_hotpoint { min-height: 1000px;

background-position: top center;
background-size: contain;
background-repeat: no-repeat;


[class*="point-start-"]{

    position: absolute;
   
}

.point-map {

    position: relative;

    &::before {
        position: absolute;
        content: "";
        background-image: url('../images/road-point.svg');
        background-size: contain;
        background-repeat: no-repeat;
        width: 42px;
        height: 42px;
        top: -42px;

    }
}

.point {

    background: #F4F4F4;
    padding: 20px;
    margin-top: 10px;

  
}

.point-start-1 {
    top: 320px;
    left: 324px;
    width: 290px;
}

}

But when browser window size change, every point change position

How block div or make it scalable? (not responsible) I use bootstrap 5 in my project.