Meet landing page

1. The hero image in the assets/ folder has mobile and desktop version. The way I include them is that add them all and set display: none in my css with media query. It worked, but I'm thinking that if the style file wasn't loaded successfully, then there would be three hero images in the page, which is ugly and confusing. So what's the best way to achieve responsive design in this setting?

2. All these texts don't have a max width, so they will spread as wide as they can. Is there a general rule of setting the max-width of a card, or a block of text? Like a portion to something?

3. Pixels are not very intuitive to me. Is there any better unit to use in general?

Thanks!