/*--------------------------------------------------------------
# Featured Articles
--------------------------------------------------------------*/

.cg-articles{

	padding:100px 0;

	background:#ffffff;

}

.articles-grid{

	display:grid;

	grid-template-columns:2fr 1fr 1fr;

	gap:30px;

	margin-top:60px;

}

.article-card{

	background:#fff;

	border-radius:24px;

	overflow:hidden;

	border:1px solid #E8EEF6;

	box-shadow:0 18px 50px rgba(15,23,42,.06);

	transition:.35s;

}

.article-card:hover{

	transform:translateY(-10px);

	box-shadow:0 30px 80px rgba(15,23,42,.12);

}

.article-card.featured{

	grid-row:span 2;

}

.article-image{

	position:relative;

	height:240px;

	overflow:hidden;

}

.article-card.featured .article-image{

	height:360px;

}

.article-image img{

	width:100%;

	height:100%;

	object-fit:cover;

	transition:.4s;

}

.article-card:hover img{

	transform:scale(1.08);

}

.article-category{

	position:absolute;

	top:20px;

	left:20px;

	background:#24346E;

	color:#fff;

	padding:8px 18px;

	border-radius:40px;

	font-size:13px;

	font-weight:700;

}

.article-content{

	padding:28px;

}

.article-content h3{

	font-size:28px;

	line-height:1.35;

	color:#0F172A;

	margin-bottom:15px;

}

.article-card:not(.featured) h3{

	font-size:22px;

}

.article-author{

	color:#64748B;

	margin-bottom:18px;

}

.article-meta{

	display:flex;

	justify-content:space-between;

	margin-bottom:25px;

	font-size:14px;

	color:#64748B;

}

.article-btn{

	display:inline-flex;

	align-items:center;

	padding:14px 24px;

	background:#24346E;

	color:#fff;

	text-decoration:none;

	border-radius:12px;

	font-weight:700;

	transition:.3s;

}

.article-btn:hover{

	background:#EC7A1C;

}

@media(max-width:1024px){

.articles-grid{

	grid-template-columns:repeat(2,1fr);

}

.article-card.featured{

	grid-row:auto;

	grid-column:span 2;

}

}

@media(max-width:767px){

.cg-articles{

	padding:70px 0;

}

.articles-grid{

	grid-template-columns:1fr;

}

.article-card.featured{

	grid-column:auto;

}

.article-card.featured .article-image{

	height:240px;

}

.article-content h3{

	font-size:22px;

}

.article-meta{

	flex-direction:column;

	gap:8px;

}

}