I am stuck on these following steps:

Go to the "Tablet and Desktop Devices: Greater than 480 pixels" section and create a media query that matches screen devices with widths greater than 480 pixels.

With wider screens, Devan does not want the panels to occupy their own rows as is the case with mobile devices. Instead, within the media query create style rules, define the width of the different classes of comic book panel images as follows:

Set the width of size1 img elements to 100%.

Set the width of size2 img elements to 60%.

Set the width of size3 img elements to 40%.

Set the width of size4 img elements to 30%.

Here's what I have so far:

/* ===================================================

Tablet and Desktop Devices: Greater than 480 pixels

===================================================

*/

@media only screen and (min-width: 481px) {

img.size1 {

width: 100%;

}

img.size2 {

width: 60%;

}

img.size3 {

width: 40%;

}

img.size4 {

width: 30%;

}

}

Not sure what I'm not doing correctly.