Каким образом можно подложить SVG картинки как на макете (изображение макета прикреплено)? SVG картинки это всё кроме текста, а именно оранжевые, фиолетовые, голубые пятна и погрузчик. Зелёной рамкой обозначил минимальную ширину страницы. Всё кроме оранжевых пятен сделал, но с четырмя оранжевыми пятнами ничего не получается, если делать как фон, то из блока не выходит. Да и все остальные подложки тоже под вопросом, правильно ли реализовано. Код ниже:
https://codepen.io/nomiy/pen/XWWXoMG
<body class="main">
<section class="about">
<h2 class="about__title">Выдающийся<br> имидж: гипотезы и теории глазами <span class="about__title-popup"> современников</span></h2>
<p class="about__text">Повышение жизненных стандартов неестественно экономит селлинг. <span class="about__text-question">?</span></p>
<p class="about__text">Несмотря на сложности, рекламное сообщество синхронизирует бренд.</p>
<ul class="about__list">
<li class="about__item">
<span class="about__item-big">50 +</span> <span class="about__item-middle">теорий</span><br>среди клиентов
</li>
<li class="about__item">
<span class="about__item-big about__item--background1">30 +</span> <span class="about__item-middle">стран мира</span> охвачены нами
</li>
<li class="about__item">
<span class="about__item-big">15</span> <span class="about__item-middle">лет</span><br>в отрасли
</li>
<li class="about__item">
<span class="about__item-big">1</span> <span class="about__item-middle">день</span><br>на создание имиджа
</li>
</ul>
<img class="about__image-layer1" src="https://svgshare.com/i/FUd.svg" width="778" height="556">
<img class="about__image-layer2" src="https://svgshare.com/i/FVt.svg" width="485" height="415">
<img class="about__image-layer3" src="https://svgshare.com/i/FVY.svg" width="438" height="440">
</section>
</body>
.main {
background-color: #266aa0;
background: linear-gradient(#266aa0, #081f73);
}
.about {
width: 1238px;
margin: 0 auto;
background-image: url("https://svgshare.com/i/FU8.svg");
background-size: 341px 118.44px;
background-repeat: no-repeat;
background-position: left 266px top 96px;
position: relative;
}
.about__title {
width: 702px;
font-size: 60px;
line-height: 64px;
font-weight: normal;
font-family: "Didact Gothic", "Arial", sans-serif;
color: #ffffff;
padding: 0;
margin: 0;
margin-bottom: 14px;
}
.about__title-popup {
background-image: linear-gradient(to right, #ffffff 40%, transparent 0%);
background-position: 0 1.22em;
background-repeat: repeat-x;
background-size: 10px 2px;
position: relative;
}
.about__image-layer1 {
position: absolute;
top: 18px;
right: -172px;
}
.about__image-layer2 {
position: absolute;
top: 136px;
right: -38px;
}
.about__image-layer3 {
position: absolute;
top: 60px;
right: 30px;
}
.about__text {
width: 400px;
font-size: 20px;
line-height: 32px;
color: #ffffff;
padding: 0;
margin: 0;
margin-bottom: 10px;
}
.about__text-question {
display: inline-block;
width: 16px;
height: 16px;
font-size: 12px;
line-height: 18px;
border-radius: 50%;
text-align: center;
background: #fe7338;
}
.about__list {
width: 500px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
list-style: none;
padding: 0;
margin: 0;
margin-top: 36px;
color: #ffffff;
font-size: 16px;
line-height: 22px;
}
.about__item {
width: 170px;
margin-right: 155px;
margin-bottom: 45px;
}
.about__item--background1 {
background-image: url("https://svgshare.com/i/FVB.svg");
background-size: 113px 92px;
background-repeat: no-repeat;
background-position: top -10px left -10px;
}
.about__item:nth-child(even) {
margin-right: 0;
}
.about__item-big {
font-size: 48px;
line-height: normal;
font-weight: bold;
}
.about__item-middle {
font-size: 20px;
line-height: 24px;
font-weight: bold;
}