.articles {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}
.article {
	display: flex;
	flex-direction: column;
	row-gap: 20px;
}
.articles_c3 > .article-preview {
	width: calc((100% - 20px * 2) / 3);
}
.article-preview {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	row-gap: 10px;
	overflow: hidden;
	background-color: var(--color-white);
	border-radius: 12px;
	transition: box-shadow .4s;
}
.article-preview:is(:active, :focus-visible, :hover) {
	box-shadow: 0 4px 10px rgba(0, 0, 0, .15);
}
.article-preview > * {
	flex: 0 0 auto;
}
.article-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	column-gap: 16px;
	padding: 16px 0;
	border-bottom: 1px solid var(--color-gray);
}

.article__cover {
	overflow: hidden;
	width: 100%;
}
.article .article__cover {
	border-radius: 20px;
	height: 460px;
}
.article-preview .article__cover {
	height: 260px;
}
.article-link .article__cover {
	flex: 0 0 auto;
	border-radius: 8px;
	width: 124px;
	height: 74px;
}
.article__img {
	border: none;
	display: block;
	object-fit: cover;
	object-position: 50%;
	width: 100%;
	height: 100%;
}

.article__title {
	color: var(--color-brown);
	font-weight: 700;
	transition: color .4s;
}
.article .article__title {
	font-size: 1.625rem;
	line-height: 1.5em;
}
.article-preview .article__title {
	font-size: 1.25rem;
	padding: 0 10px;
}
.article-link .article__title {
	font-size: 1rem;
	max-width: 100%;
}
.article-link:is(:active, :focus-visible, :hover) .article__title {
	color: var(--color-blue);
}

.article__text {
	flex: 1 0 auto;
	font-weight: 500;
	font-size: 1rem;
}
.article .article__text {
	color: var(--color-brown);
}
.article-preview .article__text {
	color: var(--color-gray-dark);
	padding: 0 10px;
}

.article__headlines {
	display: flex;
	flex-direction: column;
	row-gap: 10px;
	background-color: var(--color-gray-light);
	border-radius: 20px;
	padding: 24px;
}
.article__headline-link {
	color: var(--color-brown);
	font-size: 1.125rem;
}
.article__headline-link:is(:active, :focus-visible, :hover) {
	color: var(--color-blue);
	text-decoration: underline;
	text-decoration-style: dashed;
}

.article__stats {
	display: flex;
	column-gap: 10px;
	color: var(--color-gray);
	font-weight: 600;
	font-size: .875rem;
}
.article-preview .article__stats {
	padding: 0 10px 10px;
}
.article__stat {
	display: flex;
	column-gap: 5px;
	align-items: center;
}

.article-aside {
	display: flex;
	flex-direction: column;
	row-gap: 4px;
	margin-left: 20px;
	width: 380px;
}
.article-aside__title {
	border-bottom: 1px solid var(--color-gray);
	color: var(--color-gray);
	font-weight: 600;
	font-size: 0.875rem;
	text-transform: uppercase;
}

@media (max-width: 1399px) {
	.article-preview .article__cover {
		height: 220px;
	}
}

@media (max-width: 1199px) {
	.article-preview .article__cover {
		height: 200px;
	}
}

@media (max-width: 991px) {
	.articles_c3 > .article-preview {
		width: calc((100% - 20px) / 2);
	}
	.article-preview .article__cover {
		height: 240px;
	}
	.article-aside {
		display: none;
	}
}

@media (max-width: 767px) {
	.article-preview .article__cover {
		height: 200px;
	}
}

@media (max-width: 575px) {
	.articles_c3 > .article-preview {
		width: 100%;
	}
	.article-preview .article__cover {
		height: 260px;
	}
}