.card {
  position: relative;
  padding: 0;
  margin: 0;
  -webkit-perspective: 5000;
  perspective: 5000; 
}

.card .container {
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transition: 0.6s;
  transition: 0.6s; 
}

.card .container .front, .card .container .back {
  width: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden; 
}

.card .container .front .row, .card .container .front .column, .card .container .front .columns, .card .container .back .row, .card .container .back .column, .card .container .back .columns {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden; 
}

.card .container .front {
  z-index: 2; 
}

.card .container .back {
  position: absolute;
  height: 100%;
  left: 0;
  top: 0;
  overflow-y: scroll;
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg); 
}

.card .container:hover {
  -webkit-transform: rotate3d(0, 1, 0, 180deg);
  transform: rotate3d(0, 1, 0, 180deg); 
}

.card .container {
  border: solid 1px #eeeeee; 
}

.card .container .front, .card .container .back {
  padding: 1em; 
}

.card.square .container {
  width: 100%;
  height: 0;
  padding-bottom: 100%; 
}