Oi, José! Como vai?
Agradeço por compartilhar seu código com a comunidade Alura.
Seu projeto está bem estruturado logo no início. A utilização da tag section com as classes container e principal mostra uma boa organização do layout, além do uso das variáveis CSS dentro de :root, que facilita muito a manutenção das cores do projeto. Outro ponto legal é a aplicação do background-image e do background-size: contain, que ajuda a manter a imagem visível sem distorção.
Uma dica interessante para o futuro é usar o método display: flex para centralizar elementos na tela com mais facilidade. Veja este exemplo:
.container {
display: flex;
justify-content: center;
align-items: center;
}
Esse código usa flexbox para centralizar os elementos horizontalmente (justify-content) e verticalmente (align-items) dentro do container, algo muito usado em layouts modernos.
Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!
