How to make a flip card responsive
<p>I have tried to create a flip card many times. I could create flip effect using preserve-3d property but it was not working in IE 11. I again searched web and tried to create flip effect. I could do it. The flip card  now works in Chrome, Firefox, and IE 11 but the final flip card is not responsive. </p>

<p>Here is the code:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.card {
  max-width: 500px;
  height: 300px;
  position: relative;
}
.card &gt; div {
  width: 500px;
  height: 300px;
  position: absolute;
  transition: transform 3s;
  border-radius: 25px;
  padding: 20px 20px 20px 20px;
  overflow: hidden;
}
.card &gt; .front {
  width: 500px;
  height: 300px;
  background-color: green;
}
.card:hover .front {
  transform: rotateY(90deg);
}
.card &gt; .back {
  width: 500px;
  height: 300px;
  background-color: lime;
  transform: rotateY(-90deg);
}
.card:hover .back {
  transform: rotateY(0deg);
}
.Card-Shadow {
  box-shadow: 3px 3px 3px brown;
  -webkit-box-shadow: 3px 3px 3px brown;
  /* -webkit is vendor prefix referring to Chrome, Safari, and Opera browsers */
}
@media only screen and (max-width: 500px) {
  .card {
    width: 100%;
  }
  .back {
    width: 100%;
  }
  .front {
    width: 100%;
  }
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="card"&gt;
  &lt;div class="front Card-Shadow"&gt;Hello&lt;/div&gt;
  &lt;div class="back Card-Shadow"&gt;Thank You&lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>Could any one help in making it responsive?</p>