[Dúvida] Os modais só aparecem se for a primeira marcação.. EX: | Bootstrap 5: novos recursos e práticas recomendadas de HTML, CSS e JavaScript

Coloquei em ordem trocada para perceberem que somente o modal-2 aparece após ação do clique e se eu trocar a ordem somente o modal-1 aparece.

 <!-- Modal-2 -->

 <div class="modal fade" id="modal-2" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
   <div class="modal-dialog">
     <div class="modal-content">
       <div class="modal-header">
         <h2 class="modal-title fs-5 fw-bold" id="exampleModalLabel">Café Especiais</h2>
         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
       </div>
       <div class="modal-body">
         <img src="./assets/produtos-cafe-especial.png" class="w-100" alt="Xícara de café">
         <p>Somos conhecidos também por nossos cafés especiais, que são cuidadosamente preparados com grãos selecionados
         de alta qualidade e técnicas de preparo precisas.</p>
         <p>Entre as opções de cafés especiais do Café & Bistrô Serenatto, destacamos o café aeropress, que é preparado
         com uma técnica de imersão e pressão, resultando em uma bebida de sabor intenso e aroma acentuado. Outra
         opção popular é o café Hario V60, que é preparado com um filtro de papel em formato de cone e resulta em uma
         bebida limpa e suave, ressaltando as notas sensoriais dos grãos. Além disso, oferecemos uma variedade de
         bebidas geladas, como o café gelado, que é preparado com grãos torrados escuros e servido com gelo e leite,
         resultando em uma bebida refrescante e saborosa.</p>
       </div>
       <div class="modal-footer mx-auto">
         <button type="button" class="btn btn-secondary botao-padrao border-0" data-bs-dismiss="modal">Fechar
           Janela</button>
       </div>
     </div>
   </div>

 <!-- Modal-1 -->
 <div class="modal fade" id="modal-1" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
   <div class="modal-dialog">
     <div class="modal-content">
       <div class="modal-header">
         <h2 class="modal-title fs-5 fw-bold" id="exampleModalLabel">Café Tradicionais</h2>
         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
       </div>
       <div class="modal-body">
         <img src="./assets/produtos-cafe-tradicional.png" class="w-100" alt="Xícara de café">
         <p>O café Serenatto é conhecido por seus blends tradicionais e saborosos, que agradam aos amantes da bebida.
           Nossos grãos são cuidadosamente selecionados e torrados para produzir um aroma rico e sabor equilibrado.</p>
         <p>Entre os cafés mais tradicionais da casa, destaca-se o "Café Serenatto", um blend exclusivo de grãos com
           notas de chocolate e caramelo. Outra opção popular é o "Café Italiano", um café expresso encorpado e
           intenso. Já o "Café Cappuccino" é uma escolha clássica para quem prefere uma bebida cremosa e suave.</p>
       </div>
       <div class="modal-footer mx-auto">
         <button type="button" class="btn btn-secondary botao-padrao border-0" data-bs-dismiss="modal">Fechar
           Janela</button>
       </div>
     </div>
   </div>

Olá Raffi! Tudo ok contigo?

Aparentemente, você está enfrentando um problema ao exibir os modais em ordem trocada. Quando você troca a ordem, apenas o modal-1 aparece após o clique, e o modal-2 não é exibido.

Isso pode estar acontecendo porque você precisa garantir que os atributos data-bs-toggle e data-bs-target estejam corretamente configurados para cada card. Certifique-se de que o card "Cafés especiais" esteja com os atributos corretos para ativar o modal-2.

Além disso, verifique se o id do modal-2 está configurado corretamente como "modal-2". Certifique-se de que o valor do atributo data-bs-target e o id sejam os mesmos.

Aqui está um exemplo de como os atributos devem ser configurados no card "Cafés especiais":

<div class="card" data-bs-toggle="modal" data-bs-target="#modal-2">
  <!-- conteúdo do card -->
</div>

E aqui está um exemplo de como o modal-2 deve ser configurado:

<div class="modal fade" id="modal-2" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <!-- conteúdo do modal-2 -->
</div>

Certifique-se de que os atributos data-bs-target e id estejam exatamente iguais, como no exemplo acima.

Espero que isso resolva o problema e que agora você consiga exibir corretamente o modal-2.

Se tiver mais alguma dúvida, é só me dizer!

Espero ter ajudado, abraços e bons estudos!