use other layout techniques such as float and clear and change the value of the display property. However, use media queries and you must use CSS grid

When using the container elements $($e$.$g$.,$ section, div, nav, aside, etc.$),$ use the id attribute to uniquely select them with CSS$.$

$$ Follow the layout, but use content $$ includes logos$,$ images, etc

$$ Do not use image placeholders or $$lorem ipsum$$ text $,$ use content such as can be anything, sports scores, movie review, favorite recipes.

$$ Change captions, titles, logos$,$ color scheme, and categories to match your content

$$ use the following semantic elements:

o Footer, header section, aside, figure, figcaption

$$ use at least one web font $$ either with @font$-$face or with @import

$$ Your media queries will support the resolutions of:

o $700$ pixels wide and under

o $701$ to $1280$ pixels wide range

o $1281$ to $1600$ pixels wide range

$$ The layout changes for each of the resolutions shown.

$$ Use the CSS grid for this and change the grid attributes within your media queries

$$ Use percentages for widths so that the layout is also liquid $$ you shouldn$$t need any fixed width values although you may need fixed height values for some items $($e$.$g$.,$ banner$)$

$$ Any text that you see in the screen shots has to be text $$ not a screen shot of text and images

$$ You are creating one document that has three media queries in it $$ not three separate documents

$$ Your CSS is in an external file $($e$.$g$.,$ style.css$)$

$$ The circle must be re$-$scalable and therefore cannot be images such as PNG$,$ JPEG, GIF $$ but they can be CSS shapes, CSS paths, or embedded SVG documents