body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: black;
}

.scene {
    width: 1000px;
    display: flex;
    justify-content: space-between;
    perspective: 800px;

    .card {
        position: relative;
        width: 240px;
        height: 300px;
        color: white;
        cursor: pointer;
        transition: 1s ease-in-out;
        transform-style: preserve-3d;

        &:hover {
            transform: rotateY(0.5turn);
        }

        .card__face {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            transition: 1s ease-in-out;
            -webkit-box-reflect: below 0
                linear-gradient(transparent, transparent, rgba(0, 0, 0, 0.4));

            img {
                width: 240px;
                height: 300px;
                object-fit: cover;
            }

            &--back {
                transform: rotateY(0.5turn);
            }
        }
    }
}