How to make Infographic block responsive?

Question

I have problems to make a infographic block that I created responsive. I have a block in which their is an image, on the image their are cogwheels, under image numeric line. Each time when user hovers on cogweel or numeric line item it's modal window with information opens. Now I need to make it responsive but I can't. Can someone try to help me?

I tried to write media queris for each screen, for example @ media (min-width: 960, 1024, 1200, 1920) etc. but the problem is that the cogwheels are not staying in their position and sometimes read the styles from other media query.

HTML

<section class="kpb_block">
    <div class="infographic-section">
        <div class="robot-container">
          <div class="robot">
            <!-- Gear images -->
            <img src="./images/gear.png" alt="Cogwheel" class="cogwheel cogwheel-1" data-modal="modal-1">
            <img src="./images/gear.png" alt="Cogwheel" class="cogwheel cogwheel-2" data-modal="modal-2">
            <img src="./images/gear.png" alt="Cogwheel" class="cogwheel cogwheel-3" data-modal="modal-3">
            <img src="./images/gear.png" alt="Cogwheel" class="cogwheel cogwheel-4" data-modal="modal-4">
            <img src="./images/gear.png" alt="Cogwheel" class="cogwheel cogwheel-5" data-modal="modal-5">
            <img src="./images/gear.png" alt="Cogwheel" class="cogwheel cogwheel-6" data-modal="modal-6">
            <img src="./images/gear.png" alt="Cogwheel" class="cogwheel cogwheel-7" data-modal="modal-7">
        </div>
        <div class="info-line">
          <div class="info" data-dot="1"><span>1. Part One</span>
            <img src="./images/6B6GZK-LogoMakr.png" alt="Logo 1" class="infographic-logo">
            <p>Falcon 9’s first stage lofts Dragon to orbit. Falcon 9’s first and second stage separate. Second stage accelerates Dragon to orbital velocity.</p>
          </div>
          <div class="info" data-dot="2"><span>2. Part Two</span>
            <img src="./images/camera.png" alt="Logo 2" class="infographic-logo">
            <p>Dragon performs delta-velocity orbit raising maneuvers to catch up with the International Space Station.</p>
          </div>
          <div class="info" data-dot="3"><span>3. Part Three</span>
            <img src="./images/tracking.png" alt="Logo 3" class="infographic-logo">
            <p>Dragon separates from Falcon 9’s second stage and performs initial orbit activation and checkouts of propulsion, life support, and thermal control systems.</p>
          </div>
          <div class="info" data-dot="4"><span>4. Part Four</span>
            <img src="./images/light.png" alt="Logo 4" class="infographic-logo">
            <p>Dragon establishes a communication link with the International Space Station and performs its final orbit raising delta-velocity burn.</p>
          </div>
          <div class="info" data-dot="5"><span>5. Part Five</span>
            <img src="./images/wifi.png" alt="Logo 5" class="infographic-logo">
            <p>Dragon establishes relative navigation to the International Space Station and arrives along the docking axis, initiating an autonomous approach.</p>
          </div>
          <div class="info" data-dot="6"><span>6. Part Six</span>
            <img src="./images/lidar.png" alt="Logo 6" class="infographic-logo">
            <p>Dragon establishes relative navigation to the International Space Station and arrives along the docking axis, initiating an autonomous approach.</p>
          </div>
          <div class="info" data-dot="7"><span>7. Part Seven</span>
            <img src="./images/robot-arm.png" alt="Logo 7" class="infographic-logo">
            <p>Dragon establishes a communication link with the International Space Station and performs its final orbit raising delta-velocity burn.</p>
          </div>
          <!-- Add more info elements -->
        </div>
        <div class="modal" id="modal-1">
          <!-- Modal content for dot 1 -->
          <div class="modal-content">
              <h2>Modal Heading</h2>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vel ultrices ante. Quisque volutpat, erat ac viverra ultrices, mi mauris malesuada nulla, et auctor ante magna rutrum elit.</p>
              <img src="./images/kenji-x1/Kenji-8.jpg" alt="Image 1">
          </div>
        </div>
        <div class="modal" id="modal-2">
          <!-- Modal content for dot 2 -->
          <div class="modal-content">
              <h2>Modal Heading</h2>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vel ultrices ante. Quisque volutpat, erat ac viverra ultrices, mi mauris malesuada nulla, et auctor ante magna rutrum elit.</p>
              <img src="./video/tower_rotation_smallsize.gif" alt="Image 1">
          </div>
        </div>
        <div class="modal" id="modal-3">
          <!-- Modal content for dot 3 -->
          <div class="modal-content">
              <h2>Modal Heading</h2>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vel ultrices ante. Quisque volutpat, erat ac viverra ultrices, mi mauris malesuada nulla, et auctor ante magna rutrum elit.</p>
            <!--<img src="./images/kenji-x1/" alt="Image 3"> -->
            <video autoplay muted loop controls>
              <source src="./video/Baseboard_video.mp4" type="video/mp4">
            </video>
          </div>
        </div>
        <div class="modal" id="modal-4">
          <!-- Modal content for dot 4 -->
          <!-- <img src="./images/kenji-x1/Kenji-6.jpg" alt="Image 4"> -->
          <div class="modal-content">
              <h2>Modal Heading</h2>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vel ultrices ante. Quisque volutpat, erat ac viverra ultrices, mi mauris malesuada nulla, et auctor ante magna rutrum elit.</p>
              <img src="./images/kenji-x1/Kenji-6.jpg" alt="Image 6">
          </div>
        </div>
        <div class="modal" id="modal-5">
          <!-- Modal content for dot 5 -->
          <div class="modal-content">
              <h2>Modal Heading</h2>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vel ultrices ante. Quisque volutpat, erat ac viverra ultrices, mi mauris malesuada nulla, et auctor ante magna rutrum elit.</p>
              <video autoplay muted loop controls>
                <source src="./video/video-console.mp4" type="video/mp4">
              </video>
          </div>
        </div>
        <div class="modal" id="modal-6">
          <!-- Modal content for dot 6 -->
          <div class="modal-content">
              <h2>Modal Heading</h2>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vel ultrices ante. Quisque volutpat, erat ac viverra ultrices, mi mauris malesuada nulla, et auctor ante magna rutrum elit.</p>
            <video autoplay muted loop controls>
              <source src="./video/Lab_Application_1.gif.mp4" type="video/mp4">
            </video>
          </div>
        </div>
        <div class="modal" id="modal-7">
          <!-- Modal content for dot 7 -->
          <div class="modal-content">
              <h2>Modal Heading</h2>
              <p>Lorem ipsum dolor sit amet, In vel ultrices ante. elit. In vel ultrices ante. Quisque volutpat, erat ac viverra ultrices, mi mauris malesuada nulla, et auctor ante magna rutrum elit.</p>
              <img src="./images/kenji-x1/Kenji-6.jpg" alt="Your GIF">
          </div>
        </div>
    </div>
</section>


CSS

body {
  background-color: #000;
  font-family: 'Familjen Grotesk', sans-serif;
}

.infographic-section {
  position: relative;
  height: 150vh;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  border: 1px solid green;
  overflow: hidden;
}

.robot-container {
  position: relative;
  background-image: url('../images/Kenji-drivedown.png');
  background-size: 55%;
  background-repeat: no-repeat;
  background-position: center center;
  width: 100%;
  height: 100vh;
  border: 1px solid green;
}

.robot {
  position: relative;
  border: 1px solid green;
}

.cogwheel {
  position: absolute; 
  width: 30px; 
  height: 30px;
  background-image: url('../images/gear.png');
  background-size: cover;
  transition: transform 0.5s ease-in-out;
}

.cogwheel::before,
.cogwheel::after {
  content: '';
  position: absolute;
  width: 2px;
  height: 100px;
  background-color: white;
}

.cogwheel:hover {
  transform: rotate(360deg);
}

/* Adjust cogwheel positions */
.cogwheel-1 {
  top: 429px;
  left: 460px;
}

.cogwheel-2 {
  top: 270px;
  left: 460px;
}

.cogwheel-3 {
  top: 100px;
  left: 720px;
}

.cogwheel-4 {
  top: 270px;
  left: 755px;
}

.cogwheel-5 {
  top: 200px;
  left: 590px;
}

.cogwheel-6 {
  top: 320px;
  left: 600px;
}

.cogwheel-7 {
  top: 420px;
  left: 710px;
}

.info-line {
  text-align: center;
  position: relative;
  border: 1px solid green;
  display: flex;
  width: 100%;
  height: 40vh;
  margin-top: 650px;
}

.info {
  display: inline-block;
  cursor: pointer;
  margin: 20px;
  padding: 10px;
  transition: color 0.3s ease;
  width: 125px;
  opacity: 0;
  visibility: inherit;
  font-size: 12px;
  line-height: 18px;
  font-weight: 700;
  text-align: left;
  color: #fff;
  position: relative;
}

.info:hover {
  color: grey;
}

.info-line .info:nth-child(1) {
  animation: revealUp 0.5s ease forwards;
  animation-delay: 0s;
}

.info-line .info:nth-child(2) {
  animation: revealUp 0.5s ease forwards;
  animation-delay: 0.5s;
}

.info-line .info:nth-child(3) {
  animation: revealUp 0.5s ease forwards;
  animation-delay: 1s;
}

.info-line .info:nth-child(4) {
  animation: revealUp 0.5s ease forwards;
  animation-delay: 1.5s;
}

.info-line .info:nth-child(5) {
  animation: revealUp 0.5s ease forwards;
  animation-delay: 2s;
}

.info-line .info:nth-child(6) {
  animation: revealUp 0.5s ease forwards;
  animation-delay: 2.5s;
}

.info-line .info:nth-child(7) {
  animation: revealUp 0.5s ease forwards;
  animation-delay: 3s;
}

@keyframes revealUp {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.info > span {
  display: block;
  position: relative;
  font-family: 'Familjen Grotesk', sans-serif;
  font-size: 14px;
  line-height: 18px;
  font-weight: 700;
  text-transform: uppercase;
}

.info p {
  display: none;
  margin-top: 10px;
  overflow: hidden;
  width: 125px;
  text-align: left;
  position: relative;
  font-size: 12px;
  line-height: 16px;
  margin-top: 5px;
  color: rgba(255,255,255,.5);
  text-transform: none;
}

.info:hover p {
  display: block;
}

.infographic-logo {
  position: absolute;
  width: 50px;
  height: 50px;
  display: none;
  top: -50px; 
  left: 40%;
  transform: translateX(-50%);
}

.info:hover .infographic-logo {
  display: block;
}

.modal {
  display: none;
  position: absolute;
  width: 300px; 
  height: auto;
  border: none;
  background-color: #fff;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  padding: 20px;
}

/* Adjust modal positions */
#modal-1 {
  left: 100px;
  top: 150px;
}

#modal-2 {
  left: 100px;
  top: 150px;
}

#modal-3 {
  left: 100px;
  top: 150px;
}

#modal-4 {
  left: 850px;
  top: 50px;
}

#modal-5 {
  left: 850px;
  top: 50px;
}

#modal-6 {
  left: 850px;
  top: 50px;
}

#modal-7 {
  left: 850px;
  top: 50px;
}

.modal-content {
  padding: 10px;
  text-align: left;
}

.modal-content h2 {
  color: #000;
  font-size: 20px;
  margin-bottom: 10px;
  font-family: 'Familjen Grotesk', sans-serif;
}

.modal-content p {
  font-size: 14px;
  font-weight: 200;
  margin-bottom: 15px;
  color: #333;
  text-transform: lowercase;
}

.modal-content img, .modal-content video {
  width: 100%;
  height: auto;
  border-radius: 8px;
  border: 1px solid black;
  margin-top: 10px;
}

.modal-content video {
  max-height: 300px;
}


JS

document.addEventListener("DOMContentLoaded", function() {
    const gears = document.querySelectorAll('.cogwheel');
    const infoElements = document.querySelectorAll('.info');
    const modals = document.querySelectorAll('.modal');
    const logoImages = document.querySelectorAll('.infographic-logo');
    const infoTexts = document.querySelectorAll('.info p');

    function handleGearHover(gear, index) {
        // Rotate gear
        gear.style.transform = 'rotate(360deg)';
        // Show modal
        modals[index].style.display = 'block';
        // Show info logo and text
        logoImages[index].style.display = 'block';
        infoTexts[index].style.display = 'block';
    }

    function handleGearReset(gear, index) {
        // Reset gear rotation
        gear.style.transform = 'rotate(0deg)';
        // Hide modal
        modals[index].style.display = 'none';
        // Hide info logo and text
        logoImages[index].style.display = 'none';
        infoTexts[index].style.display = 'none';
    }

    gears.forEach((gear, index) => {
        // Handle gear hover
        gear.addEventListener('mouseenter', () => {
            handleGearHover(gear, index);
        });
        gear.addEventListener('mouseleave', () => {
            handleGearReset(gear, index);
        });
    });

    infoElements.forEach((info, index) => {
        // Handle info line hover
        info.addEventListener('mouseenter', () => {
            // Rotate corresponding gear
            gears[index].style.transform = 'rotate(360deg)';
            // Show modal
            modals[index].style.display = 'block';
            // Show info logo and text
            logoImages[index].style.display = 'block';
            infoTexts[index].style.display = 'block';
        });
        info.addEventListener('mouseleave', () => {
            // Reset corresponding gear rotation
            gears[index].style.transform = 'rotate(0deg)';
            // Hide modal
            modals[index].style.display = 'none';
            // Hide info logo and text
            logoImages[index].style.display = 'none';
            infoTexts[index].style.display = 'none';
        });
    });

    modals.forEach((modal, index) => {
        // Hide modal initially
        modal.style.display = 'none';
    });

    logoImages.forEach((logoImage, index) => {
        // Hide logo images initially
        logoImage.style.display = 'none';
    });

    infoTexts.forEach((infoText, index) => {
        // Hide info texts initially
        infoText.style.display = 'none';
    });
});