.articles {
	padding: 20px 0 0;
	margin-bottom: 84px;
}

.articles .flex {
	gap: 20px;
	flex-wrap: wrap;
}

.articles article {
	width: 30%;
	height: 320px;
	position: relative;
}

article .img {
	border-radius: 10px;
	height: 320px;
}

article .img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 10px;
	overflow: hidden;
}

article .text-content {
	position: absolute;
	bottom: 0;
	height: 141px;
	background-color: rgba(0, 0, 0, 0.8);
	border-bottom-right-radius: 10px;
	border-bottom-left-radius: 10px;
	padding: 20px 25px 25px;
	overflow: hidden;
}

article .text-content .text {
	height: 100px;
	overflow: hidden;
}

article .text-content .date {
	font-size: 14px;
	font-weight: 300;
	line-height: 1;
	color: #26ace2;
	margin-bottom: 11px;
}

article:nth-child(2) .text-content .date {
	color: #ff13cc;
}

article:nth-child(3) .text-content .date {
	color: #ffe013;
}

article .text-content h5 {
	font-size: 20px;
	font-weight: normal;
	line-height: 1;
	color: #ffffff;
	margin-bottom: 11px;
}

article .text-content .sub-text {
	line-height: 1.33;
	color: #a3b8c9;
}

article .text-content .sub-text:hover {
	color: #0eade9;
}