Examine ch$07-$proj$1.$html in the browser. You will be modifying the CSS only. $2.$ Begin

modifying ch $07-$proj$1.$css by using flex layout for the element. Set the justify$-$content property of

the so that its content $($the

and the Error! Filename not specified.$)$ spaces itself out to the left and right edges of its flex

container. To vertically align the heading and image within the header, set the align $$ items

property as well. See Figure $7\mathrm{.}13$ for guidance. $3.$ Right now each card fills the entire width of

the available space. Change the width of the card class to $24\%.$ By taking less than a quarter of

the available space, we will eventually be able to fit four cards on a row. $4.$ Use flexbox mode for

mode for the cards class. Set its justify$-$content property so that its items space themselves out to

the left and right edges of its flex container just as you did with the header. When you test this

step, examine the book images when you shrink the browser width: notice how they extend

beyond the card width. $6.$ Set the max$-$width property of the card images to $100\%.$ This will

ensure these images scale themselves down to fit available space in their container. Test by

shrinking the browser width. $7.$ Add a saturation filter of $150\%$ when hovering over any of the

book covers. Add a drop shadow $($use box$-$shadow$)$ when hovering over the card. Set the initial

opacity of the button in the card to $0.$ Set the opacity of the button to $1$ when the user hovers

anywhere over the card; in addition, add a $1$ second transition on the opacity property. $8.$ When

you resize the browser, the flex containers will continue to shrink in order to maintain four

columns because you set the width to $24\%$ in step $3.$ Add a media query for mobile$-$sized screens

$($below $480$px$)$ and for tablet$-$sized screens $($between $481$px and $768$px$).$ For mobile screens, set

the card width to $100\%$ and for tablet screens, set the width to $45\%.9.$ Finally, fine tune the

tablet and mobile settings by increasing the $--$card$-$font $$ size variable to $100\%$ within the media

query for those two widths. For mobile portrait, also shrink the size of the header by changing

the $--$header$-$font$-$size variable to $24px$ and the $--$header$-$height property to $4em.$ For tablet, set

the $--$header$-$height property to $)$

$[$n $($Ctrl$)*$