<div class="flip-card">
  <div class="flip-card-inner">
    <div class="flip-card-front">
      <h3>Front</h3>
      <p>Basic information here</p>
    </div>
    <div class="flip-card-back">
      <h3>Back</h3>
      <p>Detailed info here</p>
      <a href="#" class="btn btn-primary btn-sm">Git →</a>
    </div>
  </div>
</div>

<style>
.flip-card { perspective: 1000px; }
.flip-card-inner {
  position: relative; width: 100%; height: 200px;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.16,1,0.3,1);
}
.flip-card:hover .flip-card-inner { transform: rotateY(180deg); }
.flip-card-front, .flip-card-back {
  position: absolute; inset: 0; backface-visibility: hidden;
  border-radius: 0.75rem; padding: 1.5rem;
  display: flex; flex-direction: column; gap: 0.75rem; justify-content: center;
}
.flip-card-front { background: var(--surface); border: 1px solid var(--border); }
.flip-card-back  { background: var(--text); color: var(--bg); transform: rotateY(180deg); }
</style>