Social proof section mobile first with HTML & CSS

Hi Antonius!

Great solution! 🥳

I loved how simple your layout is. You managed to make it all work with few Flexbox uses. Nice use of min-* max-*, it is all flowing like it should. I will definitely take an approach similar to yours in my next challenge.

I also noticed you used background-repeat: space, which I did not know it existed until reading your solution.

That being said, there is only one thing I could add:

• You can remove position: relative and bottom: XXXrem on .left-card and .middle-card if you take advantage of flexbox's align-item property in conjunction to margin-bottom. Only margin-bottom won't do the trick, because when you create your flex container on .cards-section using display: flex, CSS defaults the value of justify-content to "flex-start" (items align to start of the main axis - left of the container) and align-items to "stretch" (items stretch in the cross - vertical - direction). So, you need to set .cards-section's align-items property to "flex-end" and them add, for example, margin-bottom: 1em to .middle-card and margin-bottom: 2em to .left-card.

If my feedback helped you in any way, please consider upvoting it!

Also, it would be great to receive your feedback on my solution too 😄