Time for action – creating a tiled layout with different width items

Perform the following steps to take the tiled layout we've already created and to make it work for items with different widths:

1. First, we need to create items of different widths. A few of the items in the layout have images that are landscape rather than portrait orientation, which means those items appear particularly small in the layout. Let's make those the width of two columns so they stand out more. Go back to the HTML file for the list of items and add a class of w2 to each item that will now be two columns wide:

   <li class="cat w2">
     <figure>
       <img src="images/himalayan.jpg">
       <figcaption>
         <h2>Himalayan</h2>
       </figcaption>
     </figure>
     <div class="info">
       ...
     </div>
   </li>

2. Next, open your styles.css file and style these items with a wider width. As all items are of full width at narrow screen sizes, we only have to add the new width...