How to make my relatively-positioned elements 'stick' to a specific yet responsive background design without breaking from the design?

Question

TL;DR - I have elements that are responsive by vw but are meant to scale along with the background image in a specific way where they're always "seen" in the same position relative to the background image.

---

I'm trying to replicate a specific layout which generally looks like this:

While I'm not as adept as I'd like and I'm coming back rusty, I do need some guidance as I'm trying to make this responsive.

If you pay close eye, you'll notice that the lines travel on the dots in the background and are generally specifically tied to the dots in the background. I'm trying to do the same and have been generally successful in replicating the general layout, the frame, dots and circle-gear is .SVG while the rest is CSS.

This is what I've achieved on my own thus far: Notice how the vertical lines are aligned with the dots.

And misaligned when the viewport is smaller otherwise:

The parent element is relatively positioned, this contains the background image.

.access-terminal-frame {
    background-image: url('resources/ui-elements/access-terminal-frame.svg');
    background-size: 158vh;
    background-position: center;
    height: 90vh; width: 100vw;
    margin: 5vh 0;
}

While the child elements generally look like...

.access-terminal-dual-lines {
    background: var(--terminal-border-color);
    height: 100%; width: 1px;

    position: absolute;
    top: 0vh; left: 14.5vw;
}

.access-terminal-dual-lines::after {
    content: "";
    background: var(--terminal-border-color);
    height: 100%; width: 1px;

    position: absolute;
    top: 0; left: 1vw;
}

.access-terminal-dual-lines.second-pair {
    left: 83.45vw;
}


.access-terminal-line-divider {
    background: var(--terminal-border-color);
    height: 100%; width: 1px;

    position: absolute;
    top: 0vh; left: 22.20vw;
}

You can tell I wasn't really the smartest (at least I think) since I had to make my units decimal units and scale them very specifically with a lot of trial and error. I generally understand this as a red flag but I didn't know how else to do it.

My layout holds up with zooming in and out, but as soon as the width of the viewport changes the lines are misaligned with the dots. This is my first time trying proper responsive web design and my first time trying a design like this so please be gentle.