Olá, João!
Isso ocorre também no código da aula, portanto não se preocupe, o Bootstrap possui comandos que visam sempre a responsividade. Ao definir o tamanho que um determinado card ocupará, a responsividade é considerada, alterando o tamanho da imagem. Observe o código da aula para que você possa aprimorar o seu.
<div class="col-6 col-md-4 col-xxl-2">
<div class="card rounded-0 border-0">
<img class="d-md-none d-block" src="./assets/Mobile/categorias/categoria-calcados.png"
alt="Par de tênis unissex com cor predominante branca e traços na cores laranja, azul, verde e cadarço vermelho, em fundo verde limão.">
<img class="d-none d-md-block d-xl-none" src="./assets/Tablet/categorias/categoria-calcados.png"
alt="Par de tênis unissex com cor predominante branca e traços na cores laranja, azul, verde e cadarço vermelho, em fundo verde limão.">
<img class="d-none d-xl-block" src="./assets/Desktop/categorias/categoria-calcados.png"
alt="Par de tênis unissex com cor predominante branca e traços na cores laranja, azul, verde e cadarço vermelho, em fundo verde limão.">
<div class="card-header bg-black text-bg-dark">
<p class="text-center card-text">
Calçados
</p>
</div>
</div>
</div>
O código acima está com a responsividade já ativada, outro ponto importante é que a imagem deve se ajustar conforme o tamanho da tela. Se limitarmos o tamanho ddela, pode ficar muito grande, em telas menores.
Reforço que em casos de dúvidas, conte sempre com o fórum da comunidade Alura! Bons estudos!
Sucesso ✨
Um grande abraço e até mais!
Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!
