Displayed in the image below are 3 icons - 2 of them are the same size, while one (on the left) appears larger and uneven compared to the other two.
This snippet demonstrates the HTML code related to this section:
<article class="number">
<div class="number__illu" style="margin-top: -33px">
<picture class="picture picture--no-background" style="padding-bottom: 146.875%"><img src="assets/images/svg/location-pointer.svg"></picture>
</div>
<h4>Header</h4>
<p>Part 1</p>
</article>
<article class="number">
<div class="number__illu" style="margin-bottom: -10px">
<picture class="picture picture--no-background" style="padding-bottom: 125.35%"><img src="assets/images/svg/world.svg"></picture>
</div>
<h4>Header</h4>
<p>Part 2</p>
</article>
<article class="number">
<div class="number__illu" style="margin-top: 14px">
<picture class="picture picture--no-background"><img src="assets/images/svg/users.svg"></picture>
</div>
<h4>Header</h4>
<p>Part 3</p>
</article>
Below is the corresponding CSS code:
.about__section__numbers .number {
margin: 30px auto;
text-align: center
}
.about__section__numbers .number__illu {
max-width: 100px;
margin: 0 auto 10px
}
I'm puzzled as to why the icon on the left side is presented larger than the other two.