.procate li:hover .img img{transform:scale(1.1)}
.prodetails-top{box-shadow:0px 3px 8px 0px rgba(19, 20, 21, .17)}
.procate li{border-radius:0;border:solid 1px #EEEEEE!important}
.procate li:hover .img img{transform:scale(1.02)}
.procate li:hover .img::before{opacity:.5}
.procate li:hover .info{background:var(--color);color:#FFFFFF}
.procate li:hover .info .title{color:#fff}
.procate li .img:before{content:"";display:block;position:absolute;top:0px;left:0px;right:0px;bottom:0px;background-color:rgba(0,0,0,.5);opacity:0;transition:opacity .3s;z-index:1}
.procate li .info{position:absolute;left:30px;right:30px;bottom:30px;background:#FFFFFFCF;color:var(--fontcolor);padding:3% 4%;transition:all .1s linear;z-index:2;border-radius:4px}
@media (max-width:768px){.procate li .info{left:15px;right:15px;bottom:15px}
.procate li .info .title{font-size:var(--fontsize16)}}
@media (min-width:1601px){.kche-t223 .kche-t223-flex>div.kche-t223-img,.kche-t222 .kche-t222-flex>div.kche-t222-img {max-width:800px}
.kche-t223 .kche-t223-flex>div.kche-t223-text{flex:1;padding-left:50px}
.kche-t222 .kche-t222-flex>div.kche-t222-text{flex:1;padding-right:50px}}
@media (min-width:769px){.prodetails-top{padding:20px}}