.articles-list {
	margin: -20px;
}
.articles-list__item {
	padding: 20px;
	list-style: none;
	display: block;
}
@media all and (min-width: 599px) {
	.articles-list {
		display: flex;
		flex-wrap: wrap;
	}
	.articles-list__item {
		flex-shrink: 0;
	}
	.articles-list__item > .blog-article {
		height: 100%;
	}
}
@media all and (min-width: 600px) and (max-width: 959px) {
	.articles-list__item {
		width: 50%;
	}
}
@media all and (min-width: 960px) {
	.articles-list__item {
		width: 33.3333%;
	}
}
.blog-article {
	display: flex;
	flex-direction: column;
	container: blog-article / inline-size;
}
.blog-article__top, .blog-article__bottom {
	flex-shrink: 0;
}
.blog-article__preview {
	flex-grow: 2;
}
.blog-article__img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
}
.blog-article__img-wrapper {
	display: block;
	border-radius: var(--border-radius);
	overflow: hidden;
}
.blog-article__img-wrapper:after {
	content:'';
	display:block;
	position:absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 60%;
	background: linear-gradient(to bottom, transparent 0%, hsl(var(--bg-dark-h), var(--bg-dark-s), var(--bg-dark-l), 95%) 100%) transparent;
}
.blog-article__title {
	color: #fff;
	position: absolute;
	bottom: 15px;
	left: 20px;
	right: 20px;
	font-size: clamp(1.14rem, 6cqw, 1.4285rem);
	font-weight: 600;
}
.blog-article__preview {
	margin-top: 20px;
}
.blog-article__date {
	font-size: 0.8571rem;
	color:var(--text-color3);
}
.blog-article__bottom {
	margin-top: 20px;
	display: flex;
	flex-direction: row-reverse;
	justify-content: space-between;
	align-items: center;
}