/* =========================================================
   CAPACIDADES
   Growth Marketing
   ========================================================= */

.gm-capabilities {
	position: relative;

	padding:
		78px
		0
		106px;

	background: #edf5f4;

	color: #10343e;
}


/* =========================================================
   HEADER
   ========================================================= */

.gm-capabilities__header {
	display: grid;

	grid-template-columns:
		minmax(0, 1.25fr)
		minmax(360px, .75fr);

	align-items: end;

	gap: 90px;

	margin-bottom: 61px;
}


/* =========================================================
   EYEBROW
   ========================================================= */

.gm-capabilities__eyebrow {
	margin-bottom: 22px;

	font-size: 10px;
	font-weight: 850;

	line-height: 1;

	letter-spacing: .17em;

	color: #0a5065;
}


/* =========================================================
   TITLE
   ========================================================= */

.gm-capabilities__title {
	max-width: 1020px;

	margin: 0;

	font-size: clamp(54px, 4.15vw, 78px);
	font-weight: 400;

	line-height: .98;

	letter-spacing: -.058em;

	color: #153844;
}

.gm-capabilities__title span {
	display: block;

	margin-top: 5px;

	color: #67d457;
}


/* =========================================================
   INTRO
   ========================================================= */

.gm-capabilities__intro {
	display: flex;
	align-items: flex-end;

	padding-bottom: 5px;
}

.gm-capabilities__intro p {
	max-width: 490px;

	margin: 0;

	font-size: 15px;
	font-weight: 400;

	line-height: 1.7;

	color: #5f7880;
}


/* =========================================================
   GRID
   ========================================================= */

.gm-capabilities__grid {
	display: grid;

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

	border-top: 1px solid #bccfd1;
}


/* =========================================================
   CAPABILITY ITEM
   ========================================================= */

.gm-capability {
	position: relative;

	display: grid;

	grid-template-columns:
		38px
		1fr
		auto;

	align-items: center;

	gap: 14px;

	min-height: 67px;

	padding:
		0
		8px;

	border-bottom: 1px solid #bccfd1;

	color: #0a3240;

	transition:
		background .2s ease,
		color .2s ease;
}


/* DIVISOR CENTRAL */

.gm-capability:nth-child(odd) {
	border-right: 1px solid #bccfd1;

	padding-right: 42px;
}

.gm-capability:nth-child(even) {
	padding-left: 28px;
}


/* =========================================================
   NUMBER
   ========================================================= */

.gm-capability__number {
	font-size: 10px;
	font-weight: 500;

	line-height: 1;

	color: #81969b;
}


/* =========================================================
   TITLE
   ========================================================= */

.gm-capability__title {
	font-size: 14px;
	font-weight: 700;

	line-height: 1.25;

	color: #082e3b;
}


/* =========================================================
   ARROW
   ========================================================= */

.gm-capability__arrow {
	font-size: 13px;
	font-weight: 500;

	line-height: 1;

	color: #39b934;

	transition: transform .2s ease;
}


/* =========================================================
   HOVER
   ========================================================= */

.gm-capability:hover {
	background: rgba(255,255,255,.5);
}

.gm-capability:hover .gm-capability__arrow {
	transform: translate(3px, -3px);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {

	.gm-capabilities__header {
		grid-template-columns:
			minmax(0, 1.15fr)
			minmax(300px, .85fr);

		gap: 50px;
	}

	.gm-capability:nth-child(odd) {
		padding-right: 25px;
	}

	.gm-capability:nth-child(even) {
		padding-left: 25px;
	}

}


/* =========================================================
   MEDIUM
   ========================================================= */

@media (max-width: 820px) {

	.gm-capabilities {
		padding:
			70px
			0
			85px;
	}

	.gm-capabilities__header {
		display: block;

		margin-bottom: 45px;
	}

	.gm-capabilities__intro {
		margin-top: 25px;

		padding: 0;
	}

	.gm-capabilities__grid {
		grid-template-columns: 1fr;
	}

	.gm-capability:nth-child(odd),
	.gm-capability:nth-child(even) {
		padding:
			0
			8px;

		border-right: 0;
	}

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

	.gm-capabilities {
		padding:
			60px
			0
			70px;
	}

	.gm-capabilities__eyebrow {
		margin-bottom: 18px;

		font-size: 8px;
	}

	.gm-capabilities__title {
		font-size: clamp(42px, 12vw, 58px);
	}

	.gm-capabilities__intro p {
		font-size: 14px;
	}

	.gm-capability {
		grid-template-columns:
			30px
			1fr
			auto;

		min-height: 70px;
	}

	.gm-capability__title {
		font-size: 13px;
	}

}