Css адаптив, наложение изображений друг на друга

Не первый раз сталкиваюсь с проблемой наложения картинок друг на друга или спреев типа дыма, пыли, как можно красиво и адаптивно сделать??? Сами понимаете точечная верстка глупо, смотрел варианты и через Grid и через Position...... Кто нибудь сталкивался с такими проблемами подтолкните на путь истинный

<div class="intro__icon">
                    <div class="intro__img">
                        <img class="intro__phone" src="img/phone.png" alt="#">
                        <img class="intro__big1" src="img/big1.png" alt="#">
                        <img class="intro__big2" src="img/big2.png" alt="#">
                        <img class="intro__big3" src="img/big3.png" alt="#">
                    </div>
                </div>


    .intro__phone {
  max-width: 100%;
  z-index: 6;
  position: relative;
}
.intro__img{
    max-width: 100%;
}

.intro__big1 {
  z-index: 1;
  left: 62.22%;
right: 10.49%;
top: 30.96%;
bottom: 30.57%;
  position: absolute;
}

.intro__big2 {
  z-index: 3;
  left: 55.83%;
right: 25.68%;
top: 30.49%;
bottom: 43.52%;
  position: absolute;
}
.intro__big3 {
  z-index: 2;
  position: absolute;
  left: 65.08%;
right: 13.26%;
top: 22.36%;
bottom: 47.18%;
}