.yp_prod{display: flex;flex-wrap: wrap;padding: 80px 0;}
.yp_prod>h1{color: #333;text-align: center;line-height: 3;width: 100%;}
.yp_item{width: 23%;margin-right: calc(8% / 3);margin-bottom: 40px;position: relative;overflow: hidden;transition: .3s;border: 1px solid #e9e9e9;}
.yp_item:nth-child(4n){margin-right: 0;}
.yp_item_img{overflow: hidden;text-align: center;padding-top: 20px;}
.yp_item_img>img{width: 80%;height: 300px;object-fit: contain;transition: .3s;}
.yp_item>h1{text-align: center;font-size: 14px;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;text-align: center;font-weight: 600;line-height: 46px;color: #666;transition: .6s;}
.yp_item>p{color: #999;line-height: 2;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;text-overflow: ellipsis;text-align: center;}
.yp_item:hover{box-shadow: 10px 10px 40px 1px #eee;transform: translateY(-5px);}
.yp_item:hover>h1{color: var(--base);}

@media screen and (max-width: 766px) {
    .yp_prod{padding: 6rem 0;flex-direction: column;}
    .yp_item{width: 100%;}
    .yp_item_img>img{height: 22rem;}
}