Абсолютная позиция с отзывчивым эффектом

Question

Новичок в CSS3 , я хотел знать, есть ли Отзывчивое решение для " Позиция: Абсолют * ", потому что, когда я переключаюсь в Адаптивный режим илиМобильное устройство, я вижу, что элемент или изображение размещены в одном месте , что делает дисплей немного странным.

Вот пример:

«В красном»: пространство, добавленное в режиме реагирования.

«В синем»: изображение, на которое влияет абсолютная позиция.

Режим рабочего стола:

Код:

.our-approach-content .delighter-1 {
  position: absolute;
  right: 110%;
  top: 0;
}
.our-approach-content .delighter-2 {
  position: absolute;
  left: 90.7%;
  top: 5%;
}
.our-approach-content .delighter-3 {
  position: absolute;
  right: 83.05%;
  top: 75%;
}
.our-approach-content .delighter-4 {
  position: absolute;
  left: 107%;
  top: 80%;
}

<img class="delighter-1 img-fluid" src="./src/img/delghter-1.png" alt="delighter" width="61" height="61">
          <img class="delighter-2 img-fluid" src="./src/img/delighter-2.png" alt="delighter" width="230" height="230">
          <img class="delighter-3 img-fluid" src="./src/img/delighter-3.png" alt="delighter" width="230" height="230">
          <img class="delighter-4 img-fluid" src="./src/img/delighter-4.png" alt="delighter" width="88" height="88">

Есть ли другой способ позиционировать изображения, которые реагируют и идут как "Position: Absolute"? Или другое решение?

Заранее спасибо.