.card {
    perspective: 150rem;
    -moz-perspective: 150rem;
    position: relative;
    height: 50rem;

    &__side {
        color: #fff;
        font-size: 2rem;

        height: 50rem;
        transition: all .8s ease;

        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        backface-visibility: hidden;

        &--front {
            background-color: $color-white;
        }

        &--back {
            transform: rotateY(180deg);
            background-color: green;
        }
    }

    &:hover &__side--front {
        transform: rotateY(180deg);
    }

    &:hover &__side--back {
        transform: rotateY(0);
    }
}