Why do my notecards flip text in this weird way? – Html

function flipAll() {
  const cards = document.querySelectorAll('.card');

  cards.forEach(card => {
    card.addEventListener('click', () => {
      card.classList.toggle('flipped');
    });
  });
}

const flashcards = document.getElementById("flashcards");
flashcards.innerHTML = "";

var terms = ["a", "b", "c"];
var definitions = ["aa", "bb", "cc"];

for (let i = 0; i < terms.length; i++) {
  const card = document.createElement("div");
  card.classList.add("card");

  const cardInner = document.createElement("div");
  cardInner.classList.add("card-inner");
  card.appendChild(cardInner);

  const cardFront = document.createElement("div");
  cardFront.classList.add("card-front");
  cardFront.innerHTML = `<h2>${terms[i]}</h2>`;
  cardInner.appendChild(cardFront);

  const cardBack = document.createElement("div");
  cardBack.classList.add("card-back");
  cardBack.innerHTML = `<p>${definitions[i]}</p>`;
  cardInner.appendChild(cardBack);

  card.addEventListener("click", function() {
    card.classList.toggle("flipped");
  });

  flashcards.appendChild(card);
}

.card {
  width: 400px;
  height: 250px;
  background-color: #252525;
  border-radius: 10px;
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s;
  margin: 50px auto;
  position: relative;
}

.card:hover {
  transform: scale(1.05);
  background-color: #2e2e2e;
}

.card .card-inner {
  position: absolute;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.3s;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

.card .card-front,
.card .card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.card .card-front {
  transform: rotateY(0deg);
}

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

.card .card-back p {
  transform: rotateY(180deg);
}

.card.flipped .card-inner {
  transform: rotateY(180deg);
}

.card.flipped {
  transform: rotateY(180deg);
}

.card.flipped .card-front {
  transform: rotateY(0deg);
}

<div class="grid" id="flashcards"></div>