/* =========================================================
 * Tech Resolve — Blog Latest
 * Version: 1.1.0
 * Typography System Integration
 * ======================================================= */


/* =========================================================
 * Section
 * ======================================================= */

.tr-blog-latest {
	position: relative;

	overflow: hidden;

	padding:
		clamp(105px, 9vw, 155px)
		var(--tr-gutter);

	color:
		#0b1712;

	background:
		#f4f6f3;
}


.tr-blog-latest__shell {
	width:
		min(100%, var(--tr-container-wide));

	margin:
		auto;
}


/* =========================================================
 * Intro
 * ======================================================= */

.tr-blog-latest__intro {
	width:
		min(100%, var(--tr-container));

	margin:
		0
		auto
		clamp(58px, 6vw, 84px);
}


.tr-blog-latest__intro > span {
	display: block;

	margin-bottom:
		20px;

	color:
		var(--tr-green-deep);

	font-size:
		var(--tr-text-ui);

	font-weight:
		var(--tr-weight-label);

	line-height:
		var(--tr-line-ui);

	letter-spacing:
		0.15em;
}


.tr-blog-latest__intro > div {
	display: grid;

	grid-template-columns:
		minmax(0, 0.96fr)
		minmax(330px, 0.46fr);

	align-items:
		end;

	gap:
		clamp(50px, 7vw, 110px);
}


.tr-blog-latest__intro h2 {
	margin: 0;

	color:
		#0b1712 !important;

	font-size:
		clamp(44px, 4.7vw, 68px);

	font-weight:
		900;

	line-height:
		0.98;

	letter-spacing:
		-0.055em;
}


.tr-blog-latest__intro p {
	margin: 0;

	color:
		#66746c !important;

	font-size:
		var(--tr-text-body);

	font-weight:
		var(--tr-weight-body);

	line-height:
		var(--tr-line-body);
}


/* =========================================================
 * Grid
 * ======================================================= */

.tr-blog-latest__grid {
	display: grid;

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

	gap:
		14px;
}


/* =========================================================
 * Card
 * ======================================================= */

.tr-blog-latest__card {
	grid-column:
		span 6;

	overflow: hidden;

	background:
		#ffffff;

	border:
		1px solid #e0e7e2;

	border-radius:
		22px;
}


.tr-blog-latest__card:nth-child(6n + 1),
.tr-blog-latest__card:nth-child(6n + 6) {
	grid-column:
		span 7;
}


.tr-blog-latest__card:nth-child(6n + 2),
.tr-blog-latest__card:nth-child(6n + 5) {
	grid-column:
		span 5;
}


/* =========================================================
 * Image
 * ======================================================= */

.tr-blog-latest__image {
	display: block;

	height:
		270px;

	overflow: hidden;

	background:
		linear-gradient(
			145deg,
			#153526,
			#5f8a6f
		);
}


.tr-blog-latest__card:nth-child(6n + 1)
.tr-blog-latest__image,
.tr-blog-latest__card:nth-child(6n + 6)
.tr-blog-latest__image {
	height:
		340px;
}


.tr-blog-latest__image img {
	width: 100%;
	height: 100%;

	object-fit:
		cover;
}


.tr-blog-latest__image > span {
	display: block;

	width: 100%;
	height: 100%;

	background:
		linear-gradient(
			145deg,
			#153526,
			#5f8a6f
		);
}


/* =========================================================
 * Content
 * ======================================================= */

.tr-blog-latest__content {
	padding:
		24px;
}


/* =========================================================
 * Meta
 * ======================================================= */

.tr-blog-latest__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;

	gap:
		8px
		12px;
}


.tr-blog-latest__meta a,
.tr-blog-latest__meta span {
	font-size:
		var(--tr-text-label);

	font-weight:
		var(--tr-weight-label);

	line-height:
		var(--tr-line-ui);

	letter-spacing:
		0.06em;

	text-transform:
		uppercase;
}


.tr-blog-latest__meta a {
	color:
		var(--tr-green-deep) !important;

	text-decoration:
		none !important;
}


.tr-blog-latest__meta span {
	color:
		#8b988f;
}


/* =========================================================
 * Title
 * ======================================================= */

.tr-blog-latest__card h3 {
	margin:
		14px
		0
		0;

	color:
		#0b1712 !important;

	font-size:
		clamp(24px, 2.2vw, 34px);

	font-weight:
		900;

	line-height:
		1.04;

	letter-spacing:
		-0.045em;
}


.tr-blog-latest__card h3 a {
	color:
		inherit !important;

	text-decoration:
		none !important;
}


/* =========================================================
 * Description
 * ======================================================= */

.tr-blog-latest__card p {
	margin:
		14px
		0
		0;

	color:
		#728078 !important;

	font-size:
		var(--tr-text-card);

	font-weight:
		var(--tr-weight-body);

	line-height:
		var(--tr-line-card);
}


/* =========================================================
 * Card Footer
 * ======================================================= */

.tr-blog-latest__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;

	gap:
		20px;

	margin-top:
		20px;

	padding-top:
		16px;

	border-top:
		1px solid #e5ebe7;
}


.tr-blog-latest__foot span {
	color:
		#929e97;

	font-size:
		var(--tr-text-ui);

	font-weight:
		var(--tr-weight-body);

	line-height:
		var(--tr-line-ui);
}


.tr-blog-latest__foot a {
	display: inline-flex;
	align-items: center;

	gap:
		8px;

	color:
		#0b1712 !important;

	font-size:
		var(--tr-text-card);

	font-weight:
		var(--tr-weight-label);

	line-height:
		var(--tr-line-card);

	text-decoration:
		none !important;
}


.tr-blog-latest__foot a i {
	width: 22px;
	height: 22px;

	flex:
		0
		0
		22px;

	background:
		var(--tr-green);

	border-radius:
		50%;
}


/* =========================================================
 * Tablet
 * ======================================================= */

@media (max-width: 980px) {

	.tr-blog-latest__card,
	.tr-blog-latest__card:nth-child(n) {
		grid-column:
			span 6;
	}

}


/* =========================================================
 * Mobile
 * ======================================================= */

@media (max-width: 720px) {

	.tr-blog-latest {
		padding:
			86px
			16px;
	}


	.tr-blog-latest__intro > div {
		grid-template-columns:
			1fr;

		gap:
			26px;
	}


	.tr-blog-latest__intro h2 {
		font-size:
			clamp(40px, 10.5vw, 56px);
	}


	.tr-blog-latest__card,
	.tr-blog-latest__card:nth-child(n) {
		grid-column:
			1
			/
			-1;
	}


	.tr-blog-latest__image,
	.tr-blog-latest__card:nth-child(n)
	.tr-blog-latest__image {
		height:
			240px;
	}


	.tr-blog-latest__foot {
		align-items:
			flex-start;

		flex-direction:
			column;
	}

}