.article {}
.article > .avatar {
	position: relative;
	display: block; overflow: hidden;
	margin-bottom: 20px;
}
@media (min-width: 900px)	 { .article > .avatar { border-radius: 15px; } }
@media (max-width: 899.99px) { .article > .avatar { border-radius: 7.5px; } }
.article > .avatar:before {
	content: '';
	display: block;
	padding-top: 100%;
}
.article > .avatar > img {
	position: absolute; top: 0; left: 0;
	display: block; height: 100%; width: 100%;
	object-fit: cover;
	object-position: center;
}
.loaded .article > .avatar > img { transition: transform .2s ease-out; }
.article > .avatar:hover > img { transform: scale(1.2); }
.article > .date {
	margin-bottom: 10px;
	
	font-size: 40px;
	font-weight: 100;
}
.article > .cat {
	display: block;
	margin-bottom: 15px;
	
	font-size: 15px;
	font-weight: 500;
	
	color: var(--off-color);
}
.loaded .article > .cat { transition: color .2s ease-out; }
.article > .cat:hover { color: inherit; }
.article > .title {
	display: -webkit-box; overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	
	line-height: 28px;
	font-size: 15px;
}