Você recebe três cartões.
Atualize o layout seguindo os requisitos abaixo. Cada cartão deve:
- Ter uma **largura** de 200px.
- Ter **espaçamento interno** de 20px.
- Ter 15px de espaço **entre os cartões**.
- Ter uma **borda** de 2 pixels de largura, com estilo sólido e cor cinza.
- Manter a largura declarada **inalterada** mesmo após adicionar padding e borda.

PCFkb2N0eXBlIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaW5kZXguY3NzIiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxkaXYgY2xhc3M9ImNhcmQiPkNhcmQgMTwvZGl2PgogICAgPGRpdiBjbGFzcz0iY2FyZCI+Q2FyZCAyPC9kaXY+CiAgICA8ZGl2IGNsYXNzPSJjYXJkIj5DYXJkIDM8L2Rpdj4KICA8L2JvZHk+CjwvaHRtbD4=

LmNhcmQgewogIGRpc3BsYXk6IGlubGluZS1ibG9jazsKICAvKiBDaGFuZ2UgdGhlIGNvZGUgYmVsb3cgdGhpcyBsaW5lICovCiAgX19fCiAgX19fCiAgX19fCiAgX19fCiAgX19fCiAgLyogQ2hhbmdlIHRoZSBjb2RlIGFib3ZlIHRoaXMgbGluZSAqLwp9

- Utilize a propriedade `width` para definir a largura do elemento.
- Utilize `padding` para o espaçamento interno.
- Utilize `margin` para criar espaço entre os cartões.
- Utilize `border: 2px solid gray` para adicionar a borda.
- Utilize `box-sizing: border-box` para evitar que o padding e a borda aumentem a largura total.

LmNhcmQgewogIGRpc3BsYXk6IGlubGluZS1ibG9jazsKICAvKiBDaGFuZ2UgdGhlIGNvZGUgYmVsb3cgdGhpcyBsaW5lICovCiAgd2lkdGg6IDIwMHB4OwogIHBhZGRpbmc6IDIwcHg7CiAgbWFyZ2luOiAxNXB4OwogIGJvcmRlcjogMnB4IHNvbGlkIGdyYXk7CiAgYm94LXNpemluZzogYm9yZGVyLWJveDsKICAvKiBDaGFuZ2UgdGhlIGNvZGUgYWJvdmUgdGhpcyBsaW5lICovCn0=

Domine os fundamentos do CSS, a linguagem de estilização que transforma a aparência e a experiência visual das páginas web. Explore conceitos essenciais como estilos de texto, cores, espaçamento, modelo de caixa, Flexbox e efeitos decorativos. Desenvolva habilidades para criar páginas web visualmente atraentes e bem estruturadas.

Compreenda como o CSS se conecta ao HTML e como os estilos são aplicados por meio de seletores. Aplicação de cores, estilização de texto e efeitos de hover para controlar a apresentação visual.

Aprimoramento da tipografia utilizando altura de linha, espaçamento, propriedades de fonte e fontes personalizadas. Controle de famílias tipográficas, peso, estilo e tamanho da fonte para melhor legibilidade.

Controle da estrutura do layout utilizando propriedades de margem, preenchimento, bordas e largura. Compreensão do comportamento do dimensionamento da caixa e dos tipos de exibição de elementos, como block, inline e inline-block.

Controle layouts horizontais e verticais utilizando propriedades do Flexbox. Ajuste direção, alinhamento e espaçamento para estruturar componentes de interface de usuário.

Aprimoramento de layouts utilizando cores de fundo, imagens, pseudo-elementos e sombras. Estilização de componentes visuais para profundidade e contraste.

Desafio: Corrigir um Layout Quebrado