Reduce media query code

Use <picture> tag instead of <img> tag in HTML

In mobile devices, we need to use smaller poster images for performance reason. Img tag allows one src while The <picture> HTML element contains zero or more <source> elements and one <img> element to offer alternative versions of an image for different display/device scenarios.

e.g:

<picture>
<source srcset="mdn-logo-wide.png" media="(min-width: 600px)">
<img src="mdn-logo-narrow.png" alt="MDN">
</picture>

Use Grid and Flex layout

Use rem and em values for fonts