Modify the second in egypt.html to use the srcset and sizes attributes.

The srcset attribute should indicate the image names and associated sizes:

luxor$\_600.$jpg is $600$ pixels wide

luxor$\_800.$jpg is $800$ pixels wide

luxor$\_1200.$jpg is $1200$ pixels wide

The sizes attribute should describe the image size requirements for various viewport widths:

When the viewport width is at least $700$px wide, the image width should be $600$px$.$

When the viewport width is at least $500$px wide, the image width should be $400$px$.$

The default image width should be $200$px$.$

Resizing the browser width should cause the three different images to display at the $500$ and $700$ breakpoints.

Art direction for different viewport widths $(3$ points$)$

Add tags around the third in egypt.html$.$ Then add the appropriate tag inside so hotel$\_$wide.jpg is displayed instead of hotel$\_$narrow.jpg when the viewport width is at least $500$px wide.

Resizing the browser should display hotel$\_$narrow.jpg when the viewport width is $<500$px wide and hotel$\_$wide.jpg otherwise.

SVG image for list background $(2$ points$)$

Modify styles.css so check.svg is displayed centered in the background of the unordered list. Set the following CSS properties:

background$-$image should display check.svg

background$-$repeat should be no$-$repeat

background$-$position should be center

background$-$size should be $60$vw

Resizing the browser width should cause the check.svg image to grow and shrink.