Stats preview using flexbox and picture tag

• Why does using flex: 1 on a flex item and some padding around it take more space than other sibling flex items, even though I applied flex: 1 on each child in the flexbox?
  • Or simpler: The flex-item with padding takes up around 60-70% of space than the expected 50% of shared space.
• Adding to the question above why does then using flex: 1 1 50% on each flex child stop this behaviour explained above?
  • The one with padding now takes the expected behaviour of 50%.
• I am also 90% done with this solution I am just submitting it at the moment to get suggestions on how to stop the weird behaviour of the picture tag when it is around the size of 400px - 700px, the desktop image is taking less than than the expected 50% and it shrinks faster than the text.
• How is the use of HTML and CSS classes?
• Is there a better way to approach the CSS? I have been currently applying a default style for all elements, styling each sub-section and then going into more general styles.
• It is also my first time using <picture> and <source> tags do they possess the same behaviour to the <img> tag? Was the use of the tags correct?

I would appreciate your feedback and replies to the questions above :)