.title-product {
    position: absolute;
    bottom: 0;
    width: calc(100% + .5rem);
    right: -.25rem;
    padding: 2rem;
    background-image: radial-gradient(#554860,#332b3a);
    color: #fff;
    box-shadow: 0 4px 10px rgba(0,0,0,.4);
    text-align: center;
    z-index: 10;
    border-bottom-left-radius: .5rem;
    border-bottom-right-radius: .5rem;
}
.card {
    border: unset;
    height: 22rem;
    position: relative;
    width: 100%;
    background-color: transparent;
    transition: all .1s linear;
    filter: brightness(70%);
}
    .card:hover {
        filter: brightness(100%);
    }
.card .card-body{
    z-index:1;
}
.card-body img {
    box-shadow: 0px 2px 10px #000;
    border-radius:.3rem;
    transition:all .3s linear;
}
.card:hover img {
    transform: translateY(-.7rem);
}
.card:before{
    position:absolute;
    bottom:5.5rem;
    right:-.21rem;
    background-color:#28212e;
    content:"";
    transform:skewY(45deg);
    width:5rem;
    height:3rem;
}
.card:after {
    position: absolute;
    bottom: 5.5rem;
    left: -.21rem;
    background-color: #28212e;
    content: "";
    transform: skewY(-45deg);
    width: 5rem;
    height: 3rem;
}
@media(max-width:992px){
    .card{
        height:18rem !important;
    }
}