#essayList{padding: 50px 15px;overflow:hidden;position:relative;z-index:2}
#essayList >div{display:inline-block;width: calc((100% / 3) - 25px);vertical-align:top;margin: 10px;}
#essayList .free{transition:all linear .1s;position:relative;}
#essayList .free .bg{background-color: #fff;background-size: cover;background-repeat: no-repeat;background-position: center;border-radius: 10px;transition: all 0.3s ease-in-out;}
#essayList .free:hover .bg{-webkit-filter:saturate(0.5);}
#essayList >div a{display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 2;
    top: 0;
    left: 0;}
#essayList .free h4{text-align:center;font-size:22px;line-height:110%;overflow:hidden;margin-bottom:20px;white-space: nowrap;text-overflow: ellipsis;background-color:#f93;background:-webkit-gradient(linear,left top,right top,color-stop(20%,#f93),color-stop(80%,#ff7166));background:-webkit-linear-gradient(left,#f93 20%,#ff7166 80%);background:linear-gradient(90deg,#f93 20%,#ff7166 80%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
#essayList .free p{text-align:center;font-size:15px;overflow:hidden;white-space: nowrap;text-overflow: ellipsis;}
@media screen and (min-width: 1025px) {
}
@media screen and (max-width: 1024px) {
#essayList >div{width:calc(100% / 2);margin: 10px 0;}
#essayList{padding:20px 0;}
}
@media screen and (max-width: 640px) {
#essayList >div{width:100%;}
}