Design a Photography Exhibit

In this lab, you'll create a photography exhibit layout using Tailwind CSS utility classes. For the images, you can use the following URLs if you like: - https://cdn.freecodecamp.org/curriculum/labs/colosseo.jpg - https://cdn.freecodecamp.org/curriculum/labs/alps.jpg - https://cdn.freecodecamp.org/curriculum/labs/sea.jpg **Objective:** Fulfill the user stories below and get all the tests to pass to complete the lab. **User Stories:** 1. You should have an element with a class called `main-container`. 2. Your `.main-container` element should also have the following Tailwind CSS utility classes: - the correct utility class for creating a CSS Grid container. - a utility class for defining the number of columns within the grid. You should use the utility class that utilizes the fixed number of columns. Ex. `grid-cols-<number>`. - a utility class for setting the row and column gap for the grid items. 3. Inside your `.main-container` element, there should be at least three elements each with a class called `card`. 4. Each of your `.card` elements should also have the following Tailwind CSS utility classes: - a utility class for setting a rounded border of your choice. - a utility class for setting padding of your choice. You should use this format `p-<number>`. 5. Inside each of your `.card` elements, you should have the following elements: - an image element with `src` and `alt` attributes. - an element with the class called `subheading`. - an element with the class called `description`. 6. Each of your image elements should have a utility class for setting a rounded border of your choice. 7. Each of your `.subheading` elements should use utility classes to set the font weight and size of your choosing. 8. Each of your `.description` elements should use a utility class to set the font size of your choosing.