Как сделать так, чтобы при обновлении страницы, задняя часть карточки не крутилась?

Question

[torbach]

При обновлении страницы, задняя часть карточки прокручивается, потому-что она из начально повернута на 180 градусов. В блоке есть transition, и при загрузке страницы видно как задняя часть карточки поворачивается, как избежать этого?

<div class="card-tour">
<div class="card-tour__side card-tour__side_front">Front</div>
<div class="card-tour__side card-tour__side_back">Back</div>
</div>

.card-tour{
    height: 32.5rem;
    perspective: 93.75rem;
    -moz-perspective: 93.75rem;
    position: relative;
    transition-property: all;
    transition-duration: 1s;
}

.card-tour__side{
    width: 100%;
    height: 32.5rem;
    transition-property: all;
    transition-duration: 1s;
    transition-timing-function: ease-out;
    color:white;
    position: absolute;
    
    top: 0;
    left: 0;
backface-visibility: hidden;
}

.card-tour__side_back{
    background-color: gray;
    transform: rotateY(180deg);
}

.card-tour__side_front{
    background-color: green;
}

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

.card-tour:hover .card-tour__side_back{
    transform: rotateY(0deg);
}