Как сделать изображение фона обложки карты с маркерными изображениями и правильно изменить его размер?

Question

Так что это может показаться запутанным, и я знаю, что плагин или карты Google будет проще, но это то, чего требует компания. Их парень из UI / UX создал изображение карты мира (все континенты). Они хотят, чтобы карта покрывала весь фон. Затем у них есть изображения маркеров карты, которые они хотят разместить сверху в определенных местах. Затем вы должны быть в состоянии навести курсор на каждый из них и всплывающую подсказку. Все это у меня работает, но я не могу понять, как заставить каждый маркер изменить размер с изображением карты при уменьшении экрана.

Вот что они хотят

У меня это работает, но только на полном размере, вот что происходит, когда экран изменяет размер

Вот код, который у меня сейчас есть

    $(function () {
        $('[data-toggle="tooltip"]').tooltip()
    })

    .map {
        background-image: var(--boh-map-image),url("/images/map/BOH_map_01.jpg") !important;
        background: no-repeat;
        background-size: 100%, 100%;
        height: 75rem;
    }
    
     .marker-pin-midwest {
        width: 25px;
        height: 35px;
        position: absolute;
        left: 27.05rem;
        top: 197.3rem;
    }

    .marker-pin-northeast {
        width: 25px;
        height: 35px;
        position: absolute;
        left: 33.875rem;
        top: 197.6rem;
    }

<section class="section-page-content map nomobile">
    <div class="container text-center">
        <a href="#" name="global-impact"></a>
        <h2 style="color: #359a89!important; text-transform:uppercase">Bridge of Hope Missions</h2>
    </div>

    <img class="marker-pin-midwest"
         src="~/images/map/map-marker_sm.png"
         data-toggle="tooltip"
         data-placement="top"
         data-html="true"
         title="<img width='175' height='175' src='/images/map/BOHMAP-midwest.png' /><br/><br/><b>MIDWEST</b><br/><p>Victims of tragedy across the region receive 120,000 pounds of relief funded by Bridge of Hope partners (IA, ND, AR)</p>" />

    <img class="marker-pin-northeast"
         src="~/images/map/map-marker_sm.png"
         data-toggle="tooltip"
         data-placement="top"
         data-html="true"
         title="<img width='175' height='175' src='/images/map/BOHMAP-northeast.png' /><br/><br/><b>NORTHEAST</b><br/><p>Bridge of Hope and partners deliver 120,000 pounds of aid to strengthen rescue workers and volunteers in the wake of 9/11</p>" />
</section>

Если кто-нибудь знает способ сделать эту работу так, как он того хочет, я был бы признателен за помощь, только что оказанную на этом. Спасибо