.scene {
    display: flex;
    width: 100%;
    perspective: 600px;
    -webkit-perspective: 600px; /* Safari 10 */
    height: 100%;
}

.box-flip, .card__face {
    width: 100%;
    height: 100%;
}

.box-flip {
    position: relative;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d; /* Safari 10 */
    transform-origin: center left;
    -webkit-transform-origin: center left; /* Safari 10 */
    transition: transform 1s;
    -webkit-transition: -webkit-transform 1s; /* Safari 10 */
    height: 100%;
    min-height: 700px;
}

.box-flip.is-flipped {
    -ms-transform: translateX(100%) rotateY(180deg);
    -webkit-transform: translateX(100%) rotateY(180deg); /* Safari 10 */
    -moz-transform: translateX(100%) rotateY(180deg);
    -o-transform: translateX(100%) rotateY(180deg);
    transform: translateX(100%) rotateY(180deg);
    pointer-events: auto;
}

.card__face {
    position: absolute;
    text-align: center;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden; /* Safari 10 */
    -webkit-transform: translateZ(0); /* Safari 10 */
    transform: translateZ(0);
}

.card__face--back {
    -ms-transform: rotateY(180deg) translateZ(0);
    -webkit-transform: rotateY(180deg) translateZ(0); /* Safari 10 */
    -moz-transform: rotateY(180deg) translateZ(0);
    -o-transform: rotateY(180deg) translateZ(0);
    transform: rotateY(180deg) translateZ(0);
}

@media (max-width: 768px) {
    .box-flip {
        min-height: 816px;
    }
}

@media (max-width: 450px) {
    .box-flip {
        min-height: 720px;
    }
}