07-3-column-preview-card-component-main

E aí @eric-suzuki-dev!

Belo projeto! Ficou show!

Tenho apenas 2 sugestões:

• Crie classes auxiliares pra elementos que tem o mesmo estilo. Por exemplo, vi que os seus 3 cards compartilham essas propriedades:

    height: 25.625rem;
    width: 13rem;
    padding: 2.8125rem 2.8125rem;

Você pode criar uma classe auxiliar, colocar essas propriedades nessa nova classe e adicionar essa nova classe aos 3 cards. Dessa forma você evita repetição de código.

• A segunda sugestão é envolver os seus cards dentro da tag main, indicando que esse é o conteúdo principal. Além de tornar seu HTML mais semântico, você consegue resolver o problema da border-radius. Ao invés de adicioná-la a cada card separado, você pode adicionar a borda ao main container. Mais uma coisa que irá reduzir seu código.

Fora esses pequenos detalhes, seu projeto ficou excelente!

Espero que ajude! 😁

Fala @eric-suzuki-dev, tudo bem? Parabéns por mais um projeto concluído. Tenho algumas sugestões para você.

Na media query, recomendo deixar um tamanho de min-width: 920px. A pessoa que não tiver um monitor grande, só vai conseguir visualizar a versão mobile do seu projeto.

Na parte de cada modelo dos carros, você repediu as propriedades css para os 3 modelos, você pode estruturar assim:

HTML

 <section class="container  orange">  restante do código....</section> 
 <section class="container  cyan">  restante do código....</section>
 <section class="container  green">  restante do código....</section> 

CSS

.container {
    height: 21.625rem;
    width: 14.0625rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    border-radius: 0 0 10px 10px;
    padding: 3rem 3.1875rem;
}

.orange { background: var(--bright-orange); }
.cyan { background: var(--dark-cyan); }
.green { background: var(--very-dark-cyan); }