Приветствую! Есть такой вот блок:
На данный момент выполнена следующая реализация. Вырезана девушка и рюшечки вокруг неё и вставлены как
background. Так же есть два блока, в которых записаны картинки симптомов и которые установлены как:
.symptomps-infographic {
background: url('/assets/image/girl-symptomps.png') center center / 100% auto no-repeat scroll;
height: 100vh;
}
.position-infographic {
display: flex;
flex-direction: row;
justify-content: space-between;
box-sizing: border-box;
padding: 120px 239px;
}
Методом подбора пытался выставить через
padding нужные отступы между изображениями симптомов. Но не получил искомый результат. В плане того, что есть в макете и то, что есть у меня. Проблема ещё в том, что у левого блока изображения разной ширины.
В идеях ещё есть реализовать через :nth-child() + позиционирование. Но мне кажется, что это будет мегокостыльно и очень проблематично потом в адаптиве с этим возиться. Может подскажите, какие ещё варианты реализации есть?
Средний
