CSS Grid Layout - How to horizontally center all elements in all Grid Lines of a Sub-Grid?

I'm working on a college project and we're using Grid Layout to design an e-commerce focused on animals. There was some doubt during the creation process regarding the centralization of grids content in different resolutions and types of devices.

The simplified CSS code is:

#produtos-grid {
    grid-area: grid-produtos;
    display: grid;
    grid-template-areas:    "produtos-destaque-titulo"
                            "produtos-destaque"
    grid-row-gap: 10px;
}

#produtos-destaque-titulo-grid {
    grid-area: produtos-destaque-titulo;
}

#produtos-destaque-grid {
    grid-area: produtos-destaque;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(225px, 350px));
    text-align: center;
    justify-content: center;
    margin: 0 0 20px 0;
    grid-row-gap: 1em;
}

We are not yet adding the items directly from the database to php because the project is well in the beginning at this point and we did not have time to model everything, so the info was placed directly in the HTML to test the positioning of the elements in the view Again, the short code is:

<main class="container" id="produtos-grid">     

      <div id="produtos-destaque-titulo-grid">
        <h5 class="text-center">Mais Vendidos</h5>
        <hr>
      </div>

      <div id="produtos-destaque-grid">

        <div class="card bordered">
          <div>
            <a href="<?=base_url()?>/index.php/produto/visualizar/17">
              <img class="card-img-top" src="<?=base_url()?>/assets/imagens/produtos/cama-suiça-bege-bichinho-chic.jpg" alt="Imagem Produto">
            </a>
          </div>
          <div class="card-block">
            <h5 class="card-text">Cama Suiça Bege Bichinho Chic</h5>
            <p class="card-text">a partir de: R$ 51,90</p>
          </div>
        </div>

        <div class="card bordered">
          <div>
            <a href="<?=base_url()?>index.php/produto/visualizar/1">
              <img class="card-img-top" src="<?=base_url()?>/assets/imagens/produtos/racao-whiskas-gatos-castrados-carne.jpg" alt="Imagem Produto">
            </a>
          </div>
          <div class="card-block">
            <h5 class="card-text">Ração Whiskas Gatos Castrados Carne</h5>
            <p class="card-text">a partir de: R$ 11,99</p>
          </div>
        </div>

        <div class="card bordered">
          <div>
            <a href="<?=base_url()?>index.php/produto/visualizar/5">
              <img class="card-img-top" src="<?=base_url()?>/assets/imagens/produtos/brinquedo-cenoura-nylon-buddy-toys.jpg" alt="Imagem Produto">
            </a>
          </div>
          <div class="card-block">
            <h5 class="card-text">Brinquedo Cenoura Nylon Buddy Toys</h5>
            <p class="card-text">a partir de: R$ 37,90</p>
          </div>
        </div>

      </div>  

</main>

The code generates the following result when the display width property is equal to or greater than 1200px:

Whentheresolutionisbelow1200px,oneoftheimagesisplayeddirectlytothepositionbelowtheother(2ndGridLine),whichisexactlywhatwewant.TheproblemisthattheimageshouldbeCentralizedinthemiddleoftheothertwo,nottheleft.

What solution can be used to centralize all grid items horizontally, regardless of the Grid Line they are in?