.filter__btn{
    background-color:transparent;
    color: #ffffff;
    border: 2px solid #ffffff;
    border-radius: 14px;
    cursor: pointer;
}

.active, .filter__btn:hover{
    background-color: #ffffff;
    color: #000000;
}

.middle{
    top: 50%;
    left:50%;
    transform: translate(-50%, -50%);
}

.right{
    left:75%;
}

.card{
    cursor: pointer;
    width: 100%;
    height: 480px;
}

.front, .back{
    width: 100%;
    height: 100%;
    overflow: hidden;
    backface-visibility: hidden;
    position: absolute;
    transition: transform .6s linear;
}

.front img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.front{
    transform: perspective(600px) rotateY(0deg);
}

.back{
    background: #f1f1f1;
    transform: perspective(600px) rotateY(180deg);
}

.back__content{
    color: #000000;
    text-align: center;
    width: 100%;
}

.card:hover > .front{
    transform: perspective(600px) rotateY(-180deg);
}

.card:hover > .back{
    transform: perspective(600px) rotateY(0deg);
}