.card {
    height: 23rem;
    width: 23rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: ease-in-out .5s;
} 

.card__front, 
.card__back {
    font-size: 3rem;
    transition: ease-in-out .5s;
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    align-items: center;
    justify-content: center;
    display: flex;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 1rem;
}

.card__front {
    transform: rotateY(0deg);
    background-image: url(./images/david-von-diemar-BmksdGwP6yk-unsplash.jpg);
}
.card__back {
    transform: rotateY(-180deg);
    background-image: url(./images/david-von-diemar-b4YzjC1EAfA-unsplash.jpg);
}

.card:hover .card__front {
    transform: rotateY(-180deg);
}

.card:hover .card__back {
    transform: rotateY(0deg);
}