Oii, Roger
Não há problema em utilizar a tag <br> para quebrar a linha e exibir os itens um abaixo do outro. No entanto, é importante lembrar que a tag <br> é um elemento de estrutura de texto e não de layout. Ou seja, ela serve para quebrar linhas dentro de um parágrafo, por exemplo, e não para controlar o posicionamento de elementos na página.
O uso excessivo de <br> para controle de layout pode tornar o código mais difícil de manter e menos flexível. Além disso, pode prejudicar a acessibilidade do site para tecnologias assistivas, como leitores de tela.
No caso do seu código, você está adicionando itens ao carrinho, e cada item é uma unidade que deve ser tratada separadamente. No exemplo dado na aula, cada item é envolvido por uma tag <section>, que é um elemento de bloco e, portanto, ocupa toda a linha, fazendo com que os itens subsequentes apareçam abaixo.
Se você quiser seguir a estrutura proposta na aula, poderia fazer algo assim:
itemAdicionado.innerHTML += `<section class="carrinho__produtos__produto">
<span class="texto-azul">${pegaQuantidadeItens()}x</span> ${pegaProdutoPrecoEscolhido()[0]}
<span class="texto-azul">R$${pegaProdutoPrecoEscolhido()[1]}</span>
</section>`;
Dessa forma, cada item adicionado ao carrinho será uma nova seção e aparecerá abaixo do item anterior, sem a necessidade de usar <br>.
Espero ter ajudado e bons estudos!
