Grid bugando em tamanho reduzido

Fala, pessoal, tudo bem? Participei da Imersão CSS da Alura para a criação do site/portfólio pessoal e na parte de Projetos foi utilizado Grid para criar as colunas. Acontece que, em algum momento depois da imersão, quando atualizei algumas coisas no site, devo ter feito algo errado, pois está bugando quando reduzo a tela para uma resolução de mobile (menor que 560px), os cards do portfolio ficam numa coluna única como deveriam, mas um deles fica sobre o outro e o card-back de todos fica desproporcional e não estou conseguindo arrumar. Site: https://gibuselli.github.io/imersaocss/

CSS da parte dos Projetos:

.portfolio {
  text-align: center;
}

.portfolio .grid {
    gap: 2em;
    align-content: center;
    justify-content: center;
}

.portfolio .be-the-hero {
  margin-left: 18px;
}

@media (min-width: 560px) {
  .portfolio .grid {
    display: grid;
    grid-template-columns: 240px 240px;
  }  
}


@media (min-width: 880px) {
  .portfolio .grid {
    grid-template-columns: 260px 260px 260px;
    align-content: center;
    justify-content: center;
    height: calc(100vh - 8em - 48px);
  }
}



@media (min-width: 1200px) {
  .portfolio .grid {
    grid-template-columns: repeat(3, 260px);
    align-content: center;
    justify-content: center;
    height: calc(100vh - 4em - 48px - 1.5em);
  }
}


.portfolio figure {
  text-align: center;

}

.img-portfolio {
  height: 180px;
  width: 220px;
  object-fit: cover;
  border-radius: 20%;
}

.flip-card {
  perspective: 500px;
}

.card {
  position: relative;
  transform-style: preserve-3d;
  transition: transform 2s;
}

.flip-card:hover .card {
  transform: rotateY(180deg);
}

.card-front, .card-back {
  position: absolute;
  backface-visibility: hidden;
  left: 0;
  top: 0;
}

.card-back {
  background-color: white;
  height: 180px;
  width: 240px;
  transform: rotateY(180deg);
  border-radius: 20%;
  color: black;

  vertical-align: middle;
}

E o HTML:

<section class="portfolio" id="portfolio">

        <h2>Projetos</h2>

        <div class="grid">

          <div class="flip-card">
            <div class="card">
              <figure class="card-front">
                <img class="img-portfolio be-the-hero" src="./img/be-the-hero.png" alt="Be The Hero" />
                <figcaption>Be The Hero</figcaption>
              </figure>

              <div class="card-back">
                <br>
                Aplicação Web e Mobile, desenvolvida com ReactJS, Node.js e React Native, durante a Semana Omnistack 11
              </div>
            </div>
          </div>

          <div class="flip-card">
            <div class="card">
              <figure>
                <img class="img-portfolio" src="img/em-breve.png" alt="Em Breve" />
                <figcaption>Em Breve</figcaption>
              </figure> 

              <div class="card-back">
                <br><br><br>
                Aguarde novidades :)
              </div>
            </div>
          </div>

          <div class="flip-card">
            <div class="card">
              <figure>
                <img class="img-portfolio" src="img/em-breve.png" alt="Em Breve" />
                <figcaption>Em Breve</figcaption>
              </figure> 

              <div class="card-back">
                <br><br><br>
                Aguarde novidades :)
              </div>
            </div>
          </div>

          <div class="flip-card">
            <div class="card">
              <figure>
                <img class="img-portfolio" src="img/em-breve.png" alt="Em Breve" />
                <figcaption>Em Breve</figcaption>
              </figure> 

              <div class="card-back">
                <br><br><br>
                Aguarde novidades :)
              </div>
            </div>
          </div>

          <div class="flip-card">
            <div class="card">
              <figure>
                <img class="img-portfolio" src="img/em-breve.png" alt="Em Breve" />
                <figcaption>Em Breve</figcaption>
              </figure> 

              <div class="card-back">
                <br><br><br>
                Aguarde novidades :)
              </div>
            </div>
          </div>

        </div>



      </section>