Flip Card JS richtig einstellen

[horstmann]

Guten Tag , Auf der Seite, der Hauptseite, ganz unten, wo rechts 3 Bilder sind, die Bilder sind als Flip-Karte gemacht, sie werden durch KLICKEN umgedreht. Warum bei Klick auf die Bilder , erste Bild laesst sich flippen und zweite und dritte nicht ?

<script>
const card = document.querySelector(".card__inner");
card.addEventListener("click", function (e) {
card.classList.toggle('is-flipped');
});

</script>

 <div class="card w-full pl-2 pt-6 md:w-1/2 ">
<div class="card__inner ">
<div class=" rounded-lg">
<div class="card__face ">
<img class=" rounded-lg shadow-xl " src="media/img/kreieren_740.JPG"
alt="schuhe Kreieren">
</div>
<div class="card__face--back ">
<img class=" rounded-lg shadow-xl " src="media/img/frau_kreieneren_1_740.JPG"
alt="schuhe Kreieren">
</div>
</div>
</div>
</div>