/* =========================================================
   NUESTRO MÉTODO
   Growth Marketing
   ========================================================= */

.gm-method {
	position: relative;

	padding:
		110px
		0
		105px;

	background: #ffffff;

	color: #123540;
}


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

.gm-method__header {
	display: grid;

	grid-template-columns:
		minmax(0, 1.35fr)
		minmax(360px, .65fr);

	align-items: end;

	gap: 100px;

	margin-bottom: 60px;
}


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

.gm-method__eyebrow {
	margin-bottom: 26px;

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

	line-height: 1;

	letter-spacing: .18em;

	color: #0a5368;
}


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

.gm-method__title {
	max-width: 1100px;

	margin: 0;

	font-size: clamp(57px, 4.5vw, 84px);
	font-weight: 400;

	line-height: .97;

	letter-spacing: -.06em;

	color: #153843;
}

.gm-method__title span {
	display: block;
}


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

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

	padding-bottom: 4px;
}

.gm-method__intro p {
	max-width: 470px;

	margin: 0;

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

	line-height: 1.8;

	color: #607981;
}


/* =========================================================
   STEPS
   ========================================================= */

.gm-method__steps {
	display: grid;

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

	border-top: 1px solid #cad8da;
}


/* =========================================================
   STEP
   ========================================================= */

.gm-method-step {
	position: relative;

	display: flex;
	flex-direction: column;

	min-height: 250px;

	padding:
		41px
		30px
		32px;

	border-right: 1px solid #cad8da;
}

.gm-method-step:last-child {
	border-right: 0;
}


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

.gm-method-step__number {
	font-size: 11px;
	font-weight: 800;

	line-height: 1;

	color: #2daf2a;
}


/* =========================================================
   CONTENT
   ========================================================= */

.gm-method-step__content {
	margin-top: auto;
}

.gm-method-step h3 {
	margin:
		0
		0
		17px;

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

	line-height: 1.1;

	letter-spacing: -.035em;

	color: #07354a;
}

.gm-method-step p {
	max-width: 340px;

	margin: 0;

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

	line-height: 1.6;

	color: #677d84;
}


/* =========================================================
   HOVER MUY SUTIL
   ========================================================= */

.gm-method-step {
	transition: background .2s ease;
}

.gm-method-step:hover {
	background: #f8fbfa;
}


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

@media (max-width: 1100px) {

	.gm-method__header {
		grid-template-columns:
			minmax(0, 1.2fr)
			minmax(300px, .8fr);

		gap: 55px;
	}

	.gm-method-step {
		padding:
			35px
			24px
			30px;
	}

	.gm-method-step h3 {
		font-size: 22px;
	}

}


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

@media (max-width: 850px) {

	.gm-method {
		padding:
			80px
			0
			85px;
	}

	.gm-method__header {
		display: block;

		margin-bottom: 45px;
	}

	.gm-method__intro {
		margin-top: 28px;

		padding: 0;
	}

	.gm-method__steps {
		grid-template-columns:
			repeat(2, minmax(0, 1fr));
	}

	.gm-method-step:nth-child(2) {
		border-right: 0;
	}

	.gm-method-step:nth-child(1),
	.gm-method-step:nth-child(2) {
		border-bottom: 1px solid #cad8da;
	}

}


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

@media (max-width: 600px) {

	.gm-method {
		padding:
			65px
			0
			70px;
	}

	.gm-method__eyebrow {
		font-size: 8px;

		margin-bottom: 20px;
	}

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

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

	.gm-method__steps {
		display: block;
	}

	.gm-method-step {
		min-height: 220px;

		padding:
			30px
			20px;

		border-right: 0;
		border-bottom: 1px solid #cad8da;
	}

	.gm-method-step:last-child {
		border-bottom: 0;
	}

	.gm-method-step h3 {
		font-size: 22px;
	}

}