title: Card flip on click instead of hover
body: <p>I have this</p>
  <pre><code>
  .front {
      transform: perspective(600px) rotateY(0deg);
  }
  
  .back {
      background: rgb(176, 190, 197, 0.8);
      transform: perspective(600px) rotateY(180deg);
  }
  
  
  .back-content {
      color: #2c3e50;
      text-align: center;
      padding: 0;
      margin: 0;
  }
  
  .card:hover &gt; .front {
      transform: perspective(600px) rotateY(-180deg);
      
  }
  
  .card:hover &gt; .back {
      transform: perspective(600px) rotateY(0deg);
  </code></pre>
  <p>the hover works fine on my computer but I realized you cannot hover on mobile. when I change it to :active instead it makes me hold it to keep the back part of the card displayed. Is there a way to make it so I just have to click it for it to rotate and click again for it to rotate back to the front? I cannot seem to find a solution and it’s really frustrating as I don’t have much time left to complete this (it’s a gift)</p>