.flip-container {
perspective: 1000px;
height: 100%;
@include addEase();
&.hover,
&:hover{
.flipper {
transform: rotateY(180deg);
}
}
&.front,
&.like-card{
.flipper {
transform: rotateY(0deg);
}
}
&.card-flip{
.flipper{
@extend .card-shadow;
}
}
@include md-down{
.flipper {
transform: rotateY(180deg);
}
}
.flipper {
transition: 0.4s;
transform-style: preserve-3d;
position: relative;
height: 100%;
.flip-item{
width: 100%;
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
background: #FFF;
&.front {
z-index: 2;
transform: rotateY(0deg);
}
&.back {
transform: rotateY(180deg);
}
.info-detail,
.container-info{
flex-direction: column;
div{
padding: 0;
}
}
.score{
margin:auto 1rem 1rem auto;
}
.bg-xpert{
height: 100px;
display: flex;
img{
margin:auto auto -60px;
width: 125px;
border-radius: 50%;
}
}
.xpert-name{
text-align: center;
}
.container-list {
display: none;
}
.container-btn{
width: 100%;
justify-content: center;
}
@include md-up{
.container-md-list {
display: none;
}
.container-md-grid {
display: block;
}
.score{
text-align: right;
}
}
}
}
}