[Dúvida] Desafio Organizar cards de forma responsiva

Oi, Dimi, tudo bem?

Para alguns tamanhos de tela as classes que você utilizou podem funcionar adequadamente de forma responsiva. Contudo, uma abordagem mais recomendada para tornar os cards responsivos é utilizar as classes de grid do Bootstrap, como row e col. Dessa forma, você pode definir o número de colunas que os cards ocuparão em diferentes tamanhos de tela. Por exemplo, você pode usar a classe col-lg-4 para que os cards ocupem 4 colunas em telas grandes, col-md-6 para 6 colunas em telas médias e assim por diante.

Segue abaixo como ficaria utilizando o grid do Bootstrap:

<section class="py-5">

<h2 class="fw-bold text-center pb-1">Nossos produtos</h2>

<div class="row mx-0">

    <div class="col-12 col-md-6 col-lg-4">
        <div class="card border-0 mx-auto btn" data-bs-toggle="modal" data-bs-target="#modal-1"
            style="width: 18rem;">
            <img src="./assets/produtos-cafe-tradicional.png" class="card-img-top" alt="Café preto.">
            <div class="card-body">
                <h3 class="card-text text-center fw-bold">Cafés Tradicionais</h3>
            </div>
        </div>
    </div>

    <div class="col-12 col-md-6 col-lg-4">
        <div class="card border-0 mx-auto btn" data-bs-toggle="modal" data-bs-target="#modal-2"
            style="width: 18rem;">
            <img src="./assets/produtos-cafe-especial.png" class="card-img-top" alt="Café expresso.">
            <div class="card-body">
                <h3 class="card-text fw-bold text-center">Cafés Especiais</h3>
            </div>
        </div>
    </div>

    <div class="col-12 col-md-6 col-lg-4">
        <div class="card border-0 mx-auto btn" style="width: 18rem;">
            <img src="./assets/produtos-vitaminas.png" class="card-img-top" alt="Vitaminas variadas">
            <div class="card-body">
                <h3 class="card-text text-center fw-bold text-nowrap">Smoothies e Vitaminas</h3>
            </div>
        </div>
    </div>

    <div class="col-12 col-md-6 col-lg-4">
        <div class="card border-0 mx-auto btn" style="width: 18rem;">
            <img src="./assets/produtos-paes.png" class="card-img-top" alt="Pães variados">
            <div class="card-body">
                <h3 class="card-text text-center fw-bold">Pães e Focaccias</h3>
            </div>
        </div>
    </div>

    <div class="col-12 col-md-6 col-lg-4">
        <div class="card border-0 mx-auto btn" style="width: 18rem;">
            <img src="./assets/produtos-doces.png" class="card-img-top" alt="Bolo de morango">
            <div class="card-body">
                <h3 class="card-text text-center fw-bold">Doces</h3>
            </div>
        </div>
    </div>

    <div class="col-12 col-md-6 col-lg-4">
        <div class="card border-0 mx-auto btn" style="width: 18rem;">
            <img src="./assets/produtos-salgados.png" class="card-img-top" alt="Torta salgada">
            <div class="card-body">
                <h3 class="card-text text-center fw-bold">Salgados</h3>
            </div>
        </div>
    </div>
</div>

</section>

Para mais informações sobre o grid no Bootstrap, segue a documentação abaixo:

• Grid no Bootstrap

Espero ter ajudado. Caso tenha dúvidas, conte com o fórum. Abraços!

Entendi obrigado pela explicação