Tudo junto: um cartão de produto profissional

Hora de combinar tudo do curso num componente real. Um cartão de produto usa: caixa (padding), border-radius, cor, Flexbox para centralizar e :hover.

.produto {
  padding: 20px;
  border-radius: 12px;
  text-align: center;
  transition: 0.2s;
}
.produto:hover {
  transform: scale(1.03); /* cresce um pouquinho */
}

Cada peça você já domina isolada. Juntá-las é o que se chama, de verdade, saber CSS.

🎓 Ao completar este projeto, você não "tocou em peças" — você construiu um componente que existe em milhares de lojas reais. É esse o objetivo.