.ifcw-box{
    perspective:1000px;
    display:block;
    position:relative;
    width:100%;
    height:300px;
}

.ifcw-inner{
    position:relative;
    width:100%;
    height:100%;
    transition:transform var(--speed);
    transform-style:preserve-3d;
}

.ifcw-box:hover .ifcw-inner{
    transform:rotateY(180deg);
}

.ifcw-box.vertical:hover .ifcw-inner{
    transform:rotateX(180deg);
}

.ifcw-front,
.ifcw-back{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
    overflow:hidden;
}

.ifcw-front{
    display:flex;
    align-items:center;
    justify-content:center;
}

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

.ifcw-back{
    transform:rotateY(180deg);
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    box-sizing:border-box;
}

.ifcw-back h3,
.ifcw-back p{
    width:100%;
    box-sizing:border-box;
}

.ifcw-box.vertical .ifcw-back{
    transform:rotateX(180deg);
}