/* We don't want to see the checkboxes. */
.lb-flipcard > input {
  display: none;
}

/* We want front and back to occupy the same place. */
.lb-flipcard {
  display: inline-grid;
  display: -ms-grid;
}
.lb-flipcard > .lb-flipcard-front,
.lb-flipcard > .lb-flipcard-back {
  grid-column: 1;
  -ms-grid-column: 1;
  grid-row: 1;
  -ms-grid-row: 1;
}

/* Make it flip. */
.lb-flipcard > .lb-flipcard-front,
.lb-flipcard > .lb-flipcard-back {
  cursor: pointer;
  backface-visibility: hidden;
  transition: transform 0.55s linear;
}
.lb-flipcard > .lb-flipcard-front {
  transform: rotateY(0deg);
}
.lb-flipcard > .lb-flipcard-back {
  transform: rotateY(180deg);
}
.lb-flipcard > input:checked ~ .lb-flipcard-front {
  transform: rotateY(-180deg);
}
.lb-flipcard > input:checked ~ .lb-flipcard-back {
  transform: rotateY(0deg);
}

/* In layout builder, show front and back visible. Use a stronger selector. */
.layout-builder .lb-flipcard > input ~ .lb-flipcard-front,
.layout-builder .lb-flipcard > input ~ .lb-flipcard-back {
  transform: rotateY(0deg);
}
/* In layout builder, show front and back beneath each other. */
.layout-builder .lb-flipcard > .lb-flipcard-back {
  grid-column: 2;
  -ms-grid-column: 2;
}