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 criar uma página da web que exiba pelo menos três cartas de baralho. 1. Você deve ter um elemento main com um ID de playing-cards. 1. Dentro do elemento #playing-cards, você deve ter pelo menos três elementos div, cada um com uma classe de card. 1. Dentro de cada elemento .card, você deve ter três elementos div, o primeiro com uma classe de left, o segundo com uma classe de middle e o terceiro com uma classe de right. 1. O elemento #playing-cards deve usar flexbox para centralizar horizontalmente os elementos filhos, permitir que eles se agrupem e colocar um espaço de 20px entre eles. 1. Cada um dos elementos .card deve usar flexbox para justificar os elementos filhos usando space-between. 1. Cada um dos elementos .left deve usar propriedades de item do flexbox para se alinhar no início do contêiner pai. 1. Cada um dos elementos .middle deve usar propriedades de item do flexbox para se alinhar ao centro do contêiner pai. 1. Cada um dos elementos .right deve usar propriedades de item do flexbox para se alinhar ao final do contêiner pai. 1. Cada um dos elementos .middle deve usar o flexbox para exibir os elementos filhos em uma coluna. Aqui estão alguns caracteres que você pode copiar e colar para usar em seus cartões, se desejar: ♠, ♣, ♥ e ♦.

Testes:

• Você deve ter um elemento `main` com um `id` de `playing-cards`.
• Você deve ter pelo menos três elementos `div` com uma classe de `card` dentro do elemento `#playing-cards`.
• Cada um dos elementos `.card` deve ter uma largura e altura.
• Cada um dos elementos `.card` deve ter exatamente três elementos `div` como filhos.
• Você deve ter uma `div` com uma classe de `left` dentro de cada elemento `.card`.
• Você deve ter uma `div` com uma classe de `middle` dentro de cada elemento `.card`.
• Você deve ter uma `div` com uma classe de `right` dentro de cada elemento `.card`.
• Você deve ter um seletor `#playing-cards` que defina o `display` dos elementos como `flex`.
• Você deve ter um seletor `#playing-cards` que defina o `justify-content` dos elementos como `center`.
• Você deve ter um seletor `#playing-cards` que defina o `flex-wrap` dos elementos como `wrap`.
• Você deve ter um seletor `#playing-cards` que defina o `gap` dos elementos como `20px`.
• Você deve ter um seletor `.card` que defina o `display` dos elementos como `flex`.
• Você deve ter um seletor `.card` que defina o `justify-content` dos elementos como `space-between`.
• Você deve ter um seletor `.left` que defina o `align-self` dos elementos como `flex-start`.
• Você deve ter um seletor `.middle` que defina o `align-self` dos elementos como `center`.
• Você deve ter um seletor `.right` que defina o `align-self` dos elementos como `flex-end`.
• Você deve ter um seletor `.middle` que define o `display` de seus elementos como `flex`.
• Você deve ter um `flex-direction` definido como `column` na sua classe `.middle`.