Skilled elarning landing page solution

This is my first "big" frontend mentor project. It took me about 8-10 hrs spanned in 3 days to complete this project. As I broke down the project into smaller pieces, it was a lot easier to write the css. As the skills from smaller projects carried over.

However, the responsive design for different screen sizes and the positioning of image into particular area of screen was challenging. I am still not sure if I did the best regarding responsive design and image. Any feedback on that matter would be much appreciated.

Moreover, there were many files with different extensions for same image. I opted to only use *2x.webp images. My question is: What are those files for and which one to use?

Thanks, Kareem