body{background-color:#f8f8f8}.article-list{padding:80px 0;min-height:100%}.article-list .article-list-wrapper{display:flex;flex-wrap:wrap;gap:24px}.article-list .article-list-wrapper .article-item{position:relative;width:calc(100% / 3 - 16px);background-color:#fff}.article-list .article-list-wrapper .article-item .article-link{padding:24px;display:block}.article-list .article-list-wrapper .article-item .article-link .photo{width:100%;aspect-ratio:4 / 3;overflow:hidden}.article-list .article-list-wrapper .article-item .article-link .photo img{width:100%;height:100%;object-fit:cover;transition:all .5s ease}.article-list .article-list-wrapper .article-item .article-link .photo img:hover{transform:scale(1.2)}.article-list .article-list-wrapper .article-item .article-link .article-content{padding-top:24px;overflow:hidden}.article-list .article-list-wrapper .article-item .article-link .article-content .date{color:#999}.article-list .article-list-wrapper .article-item .article-link .article-content .text p{margin-top:12px;font-size:14px;line-height:1.5;color:#999}.article-list .article-list-wrapper .article-item:hover .article-link .article-content .date,.article-list .article-list-wrapper .article-item:hover .article-link .article-content .text{color:var(--primary-color)}@media screen and (max-width:992px){.article-list{padding:24px 0}.article-list .article-list-wrapper .article-item{width:100%}.article-list .article-list-wrapper .article-item:hover::before{animation:initail;opacity:0}.article-list .article-list-wrapper .article-item .article-link{padding:20px;flex-direction:column}.article-list .article-list-wrapper .article-item .article-link .item-content{width:100%;flex-direction:column;padding-right:0}.article-list .article-list-wrapper .article-item .article-link .item-content .date{width:100%;padding:0;margin-bottom:10px}.article-list .article-list-wrapper .article-item .article-link .item-content .text{width:100%}.article-list .article-list-wrapper .article-item .article-link .item-content .text p{font-size:12px}.article-list .article-list-wrapper .article-item .article-link .photo{width:100%;height:200px;margin-top:20px}}