CSSでホバー時にカードを持ち上げるには

<div class="cards">
  <a class="card" href="#">
    <span class="card__title">カード A</span>
    <span class="card__text">カーソルを載せると持ち上がる。</span>
  </a>
  <a class="card" href="#">
    <span class="card__title">カード B</span>
    <span class="card__text">Tab キーで選んでも同じ動きになる。</span>
  </a>
</div>

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 16px;
  max-width: 400px;
  padding: 8px 0;
}
 
/* a は既定で inline なので、block にしないと transform が効かない */
.card {
  display: block;
  padding: 16px;
  border: 1px solid #e4e4e7;
  border-radius: 12px;
  background: #fff;
  color: #27272a;
  text-decoration: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  /* transition は :hover 側ではなく通常時に書く（戻るときも動かすため） */
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
 
.card__title {
  display: block;
  margin-bottom: 4px;
  font-weight: 600;
}
 
.card__text {
  font-size: 13px;
  color: #52525b;
}
 
/* マウスのように hover できる端末でだけ持ち上げる */
@media (hover: hover) {
  .card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.16);
  }
}
 
/* キーボードで選んだときも同じ見た目にする */
.card:focus-visible {
  outline: 2px solid #0f766e;
  outline-offset: 2px;
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.16);
}
 
/* 動きを減らす設定では移動をやめ、影の変化だけを残す */
@media (prefers-reduced-motion: reduce) {
  .card {
    transition: box-shadow 0.2s ease;
  }
  .card:hover,
  .card:focus-visible {
    transform: none;
  }
}