Фронтальный подход к созданию контента, который должен быть зафиксирован в некотором месте изображения

Question

Мне нужно создать веб-сайт, где основная идея дизайна заключается в том, чтобы у него было изображение в виде пути, проходящее через все его блоки, и контент должен быть привязан к некоторым точкам этого изображения. Я вставил это изображение в раздел головы и дал ему абсолютное позиционирование. Проблема в том, что, когда я начинаю изменять ширину области просмотра, содержимое становится масштабируемым, а изображение также разбивается на точки, где изображение и содержимое должны находиться на одной строке. пример: 1) ширина области просмотра, на которой изначально был построен веб-сайт

2) уменьшенная область просмотра

Что является правильным Подход к построению адаптивного веб-сайта с учетом того, что контент должен быть всегда рядом с некоторыми точками изображения. ОБНОВЛЕНИЕ, добавлен код:

/* head-section */
#head-section{
    padding: 0 8%;
    /* background-image: url("img/animations/mainpage/animation.gif");    */
    background-repeat: no-repeat;
    background-position-x: 99.5%;
    background-position-y: 188%;
    background-size: 50%;
}
#menu{
    padding-top: 3%;
    width: 60%;
    text-align: left;
    font: Bold 1vw Montserrat;
    letter-spacing: 0;
    color: #261E3C;
}
#consultation-btn{
    background: #B9EFE6 0% 0% no-repeat padding-box;
    padding: 3%;
    width: auto
}
#heading-text{
    flex-direction: column;
    align-items: start;
    text-align: left;
    font: Bold 3vw Montserrat;
    letter-spacing: 1.55px;
    color: #261E3C;
}
#highlihted{
    background: #B9EFE6 0% 0% no-repeat padding-box;
    padding: 1%;
}
#subheading-text{
    text-align: left;
    font: 1.5vw Montserrat;
    letter-spacing: 0;
    color: #261E3C;
    margin: 5% 0;
    width: 60%;
}
#consult-btn{
    display: block;
    text-align: left;
    font: Bold 2vw Montserrat;
    letter-spacing: 0;
    color: #444D83;
    width: 85%;
}
#head-content{
    margin-bottom: 7%;
}
/* revolution section */
.superheading{
    text-align: left;
    font: Bold 3vw Montserrat;
    letter-spacing: 1.55px;
    color: #261E3C;
}
.heading{
    text-align: left;
    font: Bold 2vw Montserrat;
    letter-spacing: 1.05px;
    color: #261E3C;
}
.description-text{
    text-align: left;
    font: 1.3vw Montserrat;
    letter-spacing: 0;
    color: #261E3C;
}
.features-item{
    background: #F4F3F6 0% 0% no-repeat padding-box;
    padding: 5% 2%;
    width: 35%;
    border-top-right-radius: 4em;
    margin-right: 15%;
    margin-bottom: 5%;
    margin-top: 10%;
    z-index: 999
}
.item-heading{
    text-align: left;
    font: Bold 1.5vw Montserrat;
    letter-spacing: 0;
    color: #261E3C;
    width: 70%;
}
.item-text{
    text-align: left;
    font: 1vw Montserrat;
    letter-spacing: 0;
    color: #261E3C;
    width: 70%;
}
.item-btn{
    text-align: left;
    font: 1vw Montserrat;
    letter-spacing: 0;
    color: #444D83;
}
#revolution-section-heading{
    margin-top: 23vw;
}
#revolution-section-superheading{
    margin-top: 28%;
}
/* stand out section */
#stand-out-bullet{
    text-align: left;
    font: Bold 1.2vw Montserrat;
    letter-spacing: 0;
    color: #261E3C;
    margin-top: 11%;
}
#stand-out-bullet p {
    margin-top: 10%;
}
.service-feature{
    position: relative;
    text-align: left;
    font: Bold 1.2vw Montserrat;
    letter-spacing: 0;
    color: #261E3C;
}
.decorative-div{
    position: absolute;
    z-index: -99;
    width: 3em;
    height: 3em;
    background-color: #e6e6e6;
    border-top-right-radius: 1em;
}
.kyc-row{
    margin-top: 10%;
}
.learn-more{
    text-align: left;
    font: Bold 1.3vw Montserrat;
    letter-spacing: 0;
    color: #444D83;
}

<section id="main-page" style='overflow: visible; position:relative; overflow: hidden'>
        <section id='head-section'>
            <div class='container'>
                <div class='row flexing'>
                    <img class='img-fluid' src='img\assets\1. home\logo.svg'>
                    <div class='flexing' id='menu'>
                        <p>Home</p>
                        <p>Consulting</p>
                        <p>Fintech Platform</p>
                        <p>KYC</p>
                        <p id='consultation-btn'>Get a consultation</p>
                    </div>
                </div>
                <div class='row flexing' id='head-content'>
                    <div class='flexing' style='flex-direction: column; align-items: flex-start; margin-top: 20%'>
                        <span id='heading-text' class='flexing'>
                            <span id='highlihted'>Blockchain</span>
                            <span>transformation consulting</span>
                        </span>
                        <span id='subheading-text'>
                            Understand the beneficial impact of blockchain on your organization.
                        </span>
                        <span class='flexing' id='consult-btn'>
                            <img class='img-fluid' src='img\assets\1. home\circle_btn.svg'>
                            Get consultation
                        </span>
                    </div>
                    <div>
                        <img class='img-fluid' style='position:absolute; width: 97%;left: 3vw;top: 17%; z-index: -999' src='img/big_line.gif'>
                    </div>
                </div>
            </div>
        </section>
        <section id="revolution-section">
            <div class='container'>
                <div class='row flexing' id='revolution-section-superheading' style='justify-content: flex-start;'>
                    <p class='superheading' style='width: 60%; margin-left:10%'>Join the next digital revolution.</p>
                </div>
                <div class='row flexing' id='revolution-section-heading' style='justify-content: flex-start; padding-left: 31%'>
                    <p class='heading'>DIGITAL TRANSFORMATION CONSULTING</p>
                    <p class="description-text" style='width: 60%'>With 20 years of digital transformation experience, Thrupny offers structural and benefit-rich advice on strategy and delivery. We’re more than just a consulting platform; we deliver real results to clients across the world by aid in the implementation of technologically rich experiences.</p>
                </div>
                <div class='row' style='padding-left: 31%'>
                    <div class='features-item' style='margin-top: 10%'>
                        <p class='item-heading'>Stakeholder onboarding</p>
                        <p class='item-text'>Align all stakeholders by drifting away from the traditional onboarding process.</p>
                        <span class='item-btn'>Learn More</span>
                    </div>
                    <div class='features-item' style='margin-top: 10%'>
                        <p class='item-heading'>Stakeholder onboarding</p>
                        <p class='item-text'>Align all stakeholders by drifting away from the traditional onboarding process.</p>
                        <span class='item-btn'>Learn More</span>
                    </div>
                    <div class='features-item'>
                        <p class='item-heading'>Stakeholder onboarding</p>
                        <p class='item-text'>Align all stakeholders by drifting away from the traditional onboarding process.</p>
                        <span class='item-btn'>Learn More</span>
                    </div>
                    <div class='features-item'>
                        <p class='item-heading'>Stakeholder onboarding</p>
                        <p class='item-text'>Align all stakeholders by drifting away from the traditional onboarding process.</p>
                        <span class='item-btn'>Learn More</span>
                    </div>
                </div>
            </div>
        </section>
        <section id="stand-out-section">
            <div class='container'>
                <div class="row" style='margin-top: 25%'>
                    <p class='superheading' style='width: 60%; margin-left:10%'>How we stand out</p>
                </div>
                <div class="row flexing" style='justify-content:flex-start; align-items: flex-start; margin-top: 15vw'>
                    <img class='img-fluid' style='width: 20%' src='img\blue_chain.svg'>
                    <div style='width: 60%; padding-top: 2%; margin-left:2%'>
                        <p class='heading'>BLOCKCHAIN BASED FINTECH PLATFORM</p>
                        <br>
                        <p class="description-text" >Enable smooth financial transactions through dependable blockchain technologies that utilize KYC identification capabilities to ensure the utmost security and scalable solutions.</p>
                        <br>
                        <div id='stand-out-bullet' class="flexing" style='flex-direction: column; align-items: flex-start;'>
                            <p style='margin-top: 0 '>Tokenised Fund Raising Platform</p>
                            <p>Token Distribution Platform specifically for non token holders</p>
                            <p>Security Token Robot Trustee Platform</p>
                        <div>
                    </div>
                </div>
            </div>
        </section>