*{
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}
.subject_list {
 display: flex;
 flex-wrap: wrap;
 gap: 20px;
}

.subject_item {
 display: block;
 width: 22.9%;
 margin-bottom: 20px;
 overflow: hidden;

}

.pic_wrapper {
 width: 100%;
 border: 1px solid #ccc;
 overflow: hidden;

}

.pic_wrapper>img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 transition: .5s;
}

.subject_title {
 font-size: 18px;
 text-align: center;
 padding: 10px;
 line-height: 20px;
 font-weight: normal;
 background: #fff;
 box-shadow: 0 0 10px 0 #efefef;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
 transition: .5s;
}

.subject_item :hover.pic>img {
 transform: scale(1.05);
}

.subject_item:hover .subject_title {
 background: #a40000;
 color: #fff !important;
}
@media only screen and (max-width:768px) {
 .subject_item {
 display: block;
 width: 48%;
 margin-bottom: 10px;
 overflow: hidden;
}
.subject_list{
 display: flex;
 flex-wrap: wrap;
 gap: 10px;
}
}