/* From: https://davidwalsh.name/css-flip */

/* entire container, keeps perspective */
.flip-container {
  perspective: 1000px;
}

/* flip the pane when hovered */
.flip-container.flipped .flip-flipper {
  transform: rotateY(180deg);
}

/*
.flip-container,
.flip-front,
.flip-back {
  width: 320px;
  height: 480px;
}
*/

/* flip speed goes here. Both panes in one grid cell: the card is as tall as its taller pane (the Developer's
   Reaction once sent), with no fixed height leaving a gap under the button */
.flip-flipper {
  transition: 0.6s;
  transform-style: preserve-3d;

  display: grid;
}

/* hide back of pane during swap */
.flip-front,
.flip-back {
  backface-visibility: hidden;

  grid-area: 1 / 1;
}

/* front pane, placed above back */
.flip-front {
  z-index: 2;
  /* for firefox 31 */
  transform: rotateY(0deg);
}

/* back, initially hidden pane */
.flip-back {
  transform: rotateY(180deg);
}