/* =========================================================
 * Tech Resolve — Website Included
 * ======================================================= */

.tr-website-included {
	padding:
		clamp(105px, 10vw, 175px)
		var(--tr-gutter);

	color: #0b1912;

	background: #f4f6f3;
}


.tr-website-included__shell {
	width: min(100%, var(--tr-container));
	margin: 0 auto;
}


/* =========================================================
 * Header
 * ======================================================= */

.tr-website-included__header {
	display: grid;
	grid-template-columns:
		minmax(0, 1.1fr)
		minmax(330px, .9fr);
	align-items: end;
	gap: clamp(50px, 8vw, 120px);

	margin-bottom: clamp(55px, 7vw, 90px);
}


.tr-website-included__eyebrow {
	display: block;

	margin-bottom: 18px;

	color: #08b95d;

	font-size: 9px;
	font-weight: 800;
	letter-spacing: .15em;
}


.tr-website-included__header h2 {
	max-width: 880px;
	margin: 0;

	font-size: clamp(43px, 5.2vw, 74px);
	font-weight: 800;
	line-height: .99;
	letter-spacing: -.053em;
}


.tr-website-included__intro > p {
	margin: 0;

	color: #68746d;

	font-size: 14px;
	line-height: 1.78;
}


.tr-website-included__intro > div {
	display: flex;
	align-items: center;
	justify-content: space-between;

	margin-top: 26px;
	padding-top: 15px;

	border-top: 1px solid #dce3df;
}


.tr-website-included__intro span {
	color: #98a19c;

	font-size: 8px;
	font-weight: 800;
	letter-spacing: .12em;
}


.tr-website-included__intro strong {
	color: #08b95d;

	font-size: 9px;
}


/* =========================================================
 * Stack
 * ======================================================= */

.tr-website-included__stack {
	display: grid;
	grid-template-columns:
		repeat(5, minmax(0, 1fr));

	background: #fff;

	border: 1px solid #dfe5e1;
	border-radius: 23px;

	overflow: hidden;

	box-shadow:
		0 30px 90px rgba(10, 28, 18, .06);
}


.tr-website-included__item {
	position: relative;

	min-height: 290px;
	padding: 22px;

	border-right: 1px solid #e4e9e6;
	border-bottom: 1px solid #e4e9e6;

	transition:
		background 180ms ease;
}


.tr-website-included__item:nth-child(5n) {
	border-right: 0;
}


.tr-website-included__item:hover {
	background:
		linear-gradient(
			145deg,
			rgba(25, 224, 120, .055),
			transparent
		);
}


/* =========================================================
 * Head
 * ======================================================= */

.tr-website-included__item-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
}


.tr-website-included__item-head > span {
	color: #08b95d;

	font-size: 9px;
	font-weight: 800;
}


.tr-website-included__item-head small {
	color: #a0aaa4;

	font-size: 7px;
	font-weight: 800;
	letter-spacing: .09em;
}


/* =========================================================
 * Icon
 * ======================================================= */

.tr-website-included__icon {
	position: relative;

	width: 62px;
	height: 62px;
	margin-top: 30px;

	background:
		rgba(25, 224, 120, .055);

	border: 1px solid rgba(8, 185, 93, .15);
	border-radius: 14px;
}


.tr-website-included__icon > span {
	position: absolute;
	top: 50%;
	left: 50%;

	width: 23px;
	height: 23px;

	border: 1px solid #08b95d;
	border-radius: 50%;

	transform: translate(-50%, -50%);
}


.tr-website-included__icon > i {
	position: absolute;
	top: 50%;
	left: 50%;

	width: 7px;
	height: 7px;

	background: #19e078;

	border-radius: 50%;

	transform: translate(-50%, -50%);

	box-shadow:
		0 0 0 5px rgba(25,224,120,.08);
}


.tr-website-included__icon--design > span,
.tr-website-included__icon--responsive > span {
	border-radius: 5px;
}


.tr-website-included__icon--performance > span {
	border-top-color: transparent;

	transform:
		translate(-50%, -50%)
		rotate(35deg);
}


.tr-website-included__icon--security > span {
	border-radius:
		50% 50% 65% 65%;
}


.tr-website-included__icon--launch > span {
	transform:
		translate(-50%, -50%)
		rotate(45deg);
}


/* =========================================================
 * Copy
 * ======================================================= */

.tr-website-included__item h3 {
	margin: 25px 0 0;

	font-size: 18px;
	line-height: 1.12;
	letter-spacing: -.02em;
}


.tr-website-included__item p {
	margin: 13px 0 0;

	color: #707b75;

	font-size: 10px;
	line-height: 1.7;
}


.tr-website-included__state {
	position: absolute;
	right: 22px;
	bottom: 20px;
	left: 22px;

	display: flex;
	align-items: center;
	gap: 7px;

	color: #9aa39e;

	font-size: 7px;
	font-weight: 800;
	letter-spacing: .1em;
}


.tr-website-included__state i {
	width: 5px;
	height: 5px;

	background: #19e078;

	border-radius: 50%;
}


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

.tr-website-included__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;

	margin-top: 11px;
	padding: 17px 19px;

	color: #8e9993;

	background: #fff;

	border: 1px solid #dfe5e1;
	border-radius: 11px;

	font-size: 8px;
	font-weight: 800;
	letter-spacing: .12em;
}


.tr-website-included__footer > div {
	display: flex;
	align-items: center;
	gap: 8px;

	color: #08b95d;
}


.tr-website-included__footer i {
	width: 6px;
	height: 6px;

	background: #19e078;

	border-radius: 50%;
}


@media (max-width: 1180px) {

	.tr-website-included__stack {
		grid-template-columns:
			repeat(3, minmax(0, 1fr));
	}


	.tr-website-included__item:nth-child(5n) {
		border-right: 1px solid #e4e9e6;
	}


	.tr-website-included__item:nth-child(3n) {
		border-right: 0;
	}

}


@media (max-width: 780px) {

	.tr-website-included__header {
		grid-template-columns: 1fr;
	}


	.tr-website-included__stack {
		grid-template-columns: 1fr;
	}


	.tr-website-included__item,
	.tr-website-included__item:nth-child(3n),
	.tr-website-included__item:nth-child(5n) {
		border-right: 0;
	}

}