Neste laboratório, você irá projetar um layout de jornal usando CSS Grid, incluindo conceitos como linhas da grade e colunas da grade. Objetivo: Cumprir as user stories abaixo e fazer todos os testes passarem para completar o laboratório. Histórias de Usuário: 1. Sua página deve conter um elemento main com a classe newspaper-layout. 1. O .newspaper-layout deve incluir um header com a classe title contendo um h1 para exibir o nome do jornal. 1. O .newspaper-layout deve incluir um article com a classe feature-article para a matéria principal. 1. O .feature-article deve incluir um elemento h2 para o título do artigo seguido por um elemento p para o conteúdo do artigo. 1. Você deve adicionar mais três elementos article para artigos menores, com as classes small-article1, small-article2 e small-article3. 1. Cada um dos artigos menores deve incluir um elemento h3 para o título do artigo seguido por um elemento p para o conteúdo do artigo. 1. O .newspaper-layout deve incluir um elemento article com a classe secondary-article para uma seção adicional de notícias. 1. O .secondary-article deve incluir um elemento h2 para o título do artigo seguido por um elemento p para o conteúdo do artigo. 1. A .newspaper-layout deve incluir um figure com a classe cover-image para exibir uma imagem que representa o conteúdo do jornal. 1. Os elementos com as classes title, feature-article, secondary-article, cover-image, small-article1, small-article2 e small-article3 devem ter a propriedade grid-area definida com o mesmo nome da classe. 1. Seu .newspaper-layout deve usar CSS Grid com a propriedade grid-template-areas para definir o arranjo das seções:

• O .title deve abranger toda a linha superior.
• O .feature-article deve abranger duas colunas na segunda linha, com a .cover-image na terceira coluna.
• O .secondary-article deve abranger duas colunas na terceira linha, com a .cover-image na terceira coluna.
• Os três pequenos artigos devem aparecer na quarta linha.

1. O .newspaper-layout deve ter uma propriedade grid-template-columns que divide o espaço em três colunas iguais. 1. Você deve definir a propriedade grid-template-rows do .newspaper-layout como auto para a primeira linha e dividir o espaço restante em partes iguais para as outras linhas. 1. Você deve adicionar um espaçamento entre os itens da grade. 1. Garanta que a imagem dentro de .cover-image se ajuste ao espaço designado definindo seu max-width para 100%. Nota: Certifique-se de vincular sua folha de estilos no seu HTML e aplicar seu CSS.

Testes:

• Você deve ter apenas um elemento `main`.
• Seu elemento `main` deve ter uma `class` de `newspaper-layout`.
• Você deve ter um elemento `header` com a `class` `title` dentro do seu elemento `.newspaper-layout`.
• Seu elemento `header` deve conter um elemento `h1`.
• Seu elemento `.title` deve conter algum texto.
• Você deve ter um elemento `article` para cada artigo com as classes `feature-article`, `small-article1`, `small-article2`, `small-article3` e `secondary-article`, respectivamente.
• O `.feature-article` deve incluir um elemento `h2` seguido por um elemento `p`.
• `.small-article1`, `.small-article2` e `.small-article3` devem incluir um elemento `h3` seguido por um elemento `p`.
• O `.secondary-article` deve incluir um elemento `h2` seguido por um elemento `p`.
• Você deve ter um elemento `figure` com a classe `cover-image` dentro do seu `.newspaper-layout`.
• Seu `.cover-image` deve conter um elemento `img`.
• A propriedade `display` do elemento `.newspaper-layout` deve ser definida como `grid`.
• Seu elemento `.newspaper-layout` deve ter uma propriedade `grid-template-areas` com `title` abrangendo todas as três colunas da primeira linha.
• A segunda linha do modelo de grade deve conter um `feature-article` que abranja duas colunas e um `cover-image`.
• A terceira linha do template da grade deve conter um `secondary-article` que abranja duas colunas e um `cover-image`.
• A quarta linha do modelo de grade deve conter `small-article1`, `small-article2` e `small-article3`.
• Seu seletor `.newspaper-layout` deve usar a propriedade `grid-template-columns` para dividir o espaço em três partes iguais. Lembre-se de que você pode usar a função `repeat` ou definir manualmente cada unidade fracionária.
• Seu seletor `.newspaper-layout` deve ter a propriedade `grid-template-rows` definida como `auto 1fr 1fr 1fr`.
• Você deve adicionar um espaçamento entre os itens da grade.
• `.title` deve ter uma `grid-area` de `title`.
• `.feature-article` deve ter uma `grid-area` de `feature-article`.
• `.cover-image` deve ter uma `grid-area` de `cover-image`.
• `.secondary-article` deve ter uma `grid-area` de `secondary-article`.
• `.small-article1` deve ter uma `grid-area` de `small-article1`.
• `.small-article2` deve ter uma `grid-area` de `small-article2`.
• `.small-article3` deve ter uma `grid-area` de `small-article3`.
• O `img` dentro de `.cover-image` deve ter um `max-width` de `100%`.