/* article cards */
.article-cards .center { position: relative; padding: 0; margin-top: 30px; width: 740px; }
.article-cards .card-wrap { display: flex; flex-direction: column; position: relative; gap: 20px; justify-items: center; }
.article-cards .card { position: relative; padding: 5px; border-radius: 22px; flex-shrink: 0; box-shadow: 0px 2px 10px 0 rgba(0,0,0,.12); width: calc(100% - 10px); height: 180px; }
.article-cards .card:hover { border-color: var(--text); }
.article-cards .card picture { position: absolute; top: 5px; left: 5px; width: 180px; height: 180px; border-radius: 18px 0 0 18px; overflow: hidden; background-image: url('/images/background/no-photo.jpg'); background-repeat: no-repeat; background-position: center center; background-size: 100% 100%; }
.article-cards .card picture .photo { position: absolute; display: block; height: 100%; width: 100%; object-fit: cover; transition: .2s ease-out; }
.article-cards .card:hover picture .photo { transform: scale(1.05); }
.article-cards .card .text { position: absolute; color: var(--text); width: calc(100% - 270px); left: 210px; top: 20px; }
.article-cards .card .text .card-title { margin: 5px 0 13px; font-size: 22px; font-weight: bold; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 2; text-overflow: ellipsis; }
.article-cards .card .text .card-title:hover { color: var(--text-blue); }
.article-cards .card .text .card-description { font-size: 14px; color: var(--text-gray); font-weight: normal; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 3; text-overflow: ellipsis; }
.article-cards .card .text:before { content: ''; position: absolute; height: 40px; width: 100%; bottom: 0; left: 0; background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%); z-index: 1; }
.article-cards .card .read { position: absolute; outline: 1px solid var(--text-blue); right: 20px; bottom: 20px; padding: 8px 30px; background-color: var(--bg); border-radius: 8px; color: var(--text-blue); font-size: 14px; font-weight: bold; z-index: 2; }
.article-cards .card .read:hover { outline-width: 2px; }
.article-cards .published { position: absolute; bottom: 30px; left: 210px; color: var(--text-gray); font-size: 13px; z-index: 2; }

[theme-dark] .article-cards .card { box-shadow: none; outline: 1px solid var(--bg-gray); }
[theme-dark] .article-cards .card .text:before { background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(5,20,38,1) 100%);}

@media screen and (max-width: 740px) {
.article-cards .card-wrap { padding: 0 20px; }
.article-cards .center { width: 100%; }
}
@media screen and (max-width: 440px) {
.article-cards .card { width: cacl(100% - 40px); height: 300px; }
.article-cards .card picture { width: calc(100% - 10px); border-radius: 18px 18px 0 0; }
.article-cards .card .text { width: calc(100% - 20px); left: 10px; top: 190px; }
.article-cards .card .text .card-title { margin: 3px 0 7px; font-size: 15px; }
.article-cards .card .text .card-description { font-size: 13px; }
.article-cards .card .text:before { height: 60px; }
.article-cards .card .read { right: 14px; bottom: 14px; padding: 6px 22px; }
.article-cards .published { display: none; }
}