media queries, button animation, flexbox

👾Hello Otto, congratulations for your new solution!

Your solution seems great and the html structure is really good too. Well done!

Something you can consider to improve is to make the component responsive deleting the property width: 100% in the container and letting max-width: 900px to make it contract, you cannot use both and the CSS will consider the first.

You should also use the media query a little later to have container horizontally and contracting with the screen if you activate it too earlier you creat a huge gap lateral and doesnt have a good look.

You can also consider using the <picture> to replace the div you use to swap imagens and wrap both desktop and mobile images together in the same tag, and render each image depending of the device (phone / computer) by the settings for the width you'll insert in the html

If you're not familiar with the picture tag here's a quick guide: https://www.w3schools.com/tags/tag_picture.asp

👋 I hope this helps you and happy coding!

for the image on your mobile, you should use this code instead of making it a background image img { display: block; object-fit: cover; max-width: 100%; } I hope you find this helpful.