カードが回転するアニメーション

こちらは表です。
ホバーしてください。

回転すると裏側が見えます。
裏側でも問題なくクリック→ページ遷移できます。

ホバーで回転するアニメーションを作成しました。
aタグの想定で作成しているため、回転した後でもクリックできることを確認しながら実装しました。

<a href="#" class="c-card">
  <div class="c-card__front-side">
    <img src="https://placehold.jp/7cb2c0/ffffff/300x200.png?text=%E8%A1%A8" alt="">
    <p class="c-card__txt">こちらは表です。<br />ホバーしてください。</p>
  </div>
  <div class="c-card__back-side">
    <img src="https://placehold.jp/3d4070/ffffff/300x200.png?text=%E8%A3%8F" alt="">
    <p class="c-card__txt">
      回転すると裏側が見えます。<br />裏側でも問題なくクリック→ページ遷移できます。
    </p>
  </div>
</a>
<!-- [/c-card] -->

.c-card {
  display: block;
  width: min(100%, 300px);
  margin-inline: auto;
  aspect-ratio: 2/3;
  position: relative;
}

.c-card__front-side, .c-card__back-side {
  width: 100%;
  height: 100%;
  border: 1px solid gray;
  border-radius: 10px;
  padding: 1em;
  overflow: hidden;
  transition: transform 1s;
  backface-visibility: hidden;
}

@media (hover: hover) and (pointer: fine) {
  .c-card:hover .c-card__front-side {
    transform: rotateY(180deg);
  }
}

.c-card__back-side {
  position: absolute;
  inset: 0;
  transform: rotateY(180deg);
}

@media (hover: hover) and (pointer: fine) {
  .c-card:hover .c-card__back-side {
    transform: rotateY(0);
  }
}

.c-card__txt {
  margin-top: 24px;
}