Neste laboratório, você criará um layout de exposição fotográfica usando as classes utilitárias do Tailwind CSS. Para as imagens, você pode usar os seguintes URLs se desejar:

• https://cdn.G.E.A.R ACADEMY.org/curriculum/labs/colosseo.jpg
• https://cdn.G.E.A.R ACADEMY.org/curriculum/labs/alps.jpg
• https://cdn.G.E.A.R ACADEMY.org/curriculum/labs/sea.jpg

Objetivo: Cumprir as user stories abaixo e fazer todos os testes passarem para completar o laboratório. Histórias de Usuário: 1. Você deve ter um elemento com uma classe chamada main-container. 2. Seu elemento .main-container também deve conter as seguintes classes utilitárias do Tailwind CSS:

• a classe utilitária correta para criar um contêiner CSS Grid.
• uma classe utilitária para definir o número de colunas dentro da grade. Você deve usar a classe utilitária que utiliza o número fixo de colunas. Ex. grid-cols-<number>.
• uma classe utilitária para definir o espaçamento entre linhas e colunas dos itens da grade.

3. Dentro do seu elemento .main-container, deve haver pelo menos três elementos, cada um com uma classe chamada card. 4. Cada um dos seus elementos .card também deve conter as seguintes classes utilitárias do Tailwind CSS:

• uma classe utilitária para definir uma borda arredondada de sua escolha.
• uma classe utilitária para definir o padding de sua escolha. Você deve usar este formato p-<number>.

5. Dentro de cada um dos seus elementos .card, você deve ter os seguintes elementos:

• um elemento de imagem com os atributos src e alt.
• um elemento com a classe chamada subheading.
• um elemento com a classe chamada description.

6. Cada um dos seus elementos de imagem deve ter uma classe utilitária para definir uma borda arredondada de sua escolha. 7. Cada um dos seus elementos .subheading deve usar classes utilitárias para definir o peso e o tamanho da fonte de sua escolha. 8. Cada um dos seus elementos .description deve usar uma classe utilitária para definir o tamanho da fonte de sua escolha.

Testes:

• Você deve ter um elemento com uma classe chamada `main-container`.
• Seu elemento `.main-container` deve usar a classe utilitária correta do Tailwind CSS para criar um contêiner CSS Grid.
• Seu elemento `.main-container` deve usar uma classe utilitária para definir o número de colunas dentro da grade.
• Seu elemento `.main-container` deve usar uma classe utilitária para definir o espaçamento entre linhas e colunas dos itens da grade.
• Seu elemento `.main-container` deve conter pelo menos três elementos, cada um com uma classe chamada `card`.
• Cada um dos seus elementos `.card` deve ter uma classe utilitária para definir uma borda arredondada.
• Cada um dos seus elementos `.card` deve ter uma classe utilitária para definir o padding.
• Cada um dos seus elementos `.card` deve conter um elemento de imagem.
• Cada um dos seus elementos `img` deve ter um atributo `src`.
• Cada um dos seus elementos `img` deve ter um atributo `alt`.
• Cada um dos seus elementos `.card` deve conter um elemento com a classe chamada `subheading`.
• Cada um dos seus elementos `.subheading` deve conter algum conteúdo de texto.
• Cada um dos seus elementos `.card` deve conter um elemento com a classe chamada `description`.
• Cada um dos seus elementos `.description` deve conter algum texto.
• Cada um dos seus elementos `img` deve ter uma classe utilitária para definir uma borda arredondada.
• Cada um dos seus elementos `.subheading` deve usar classes utilitárias para definir o peso da fonte.
• Cada um dos seus elementos `.subheading` deve usar classes utilitárias para definir o tamanho da fonte.
• Cada um dos seus elementos `.description` deve usar uma classe utilitária para definir o tamanho da fonte.