/* =========================================================
   EXPERIENCIA EN ACCIÓN
   Growth Marketing
   ========================================================= */

.gm-experience {
	position: relative;

	padding:
		95px
		0
		105px;

	background: #edf5f4;

	color: #113742;
}


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

.gm-experience__header {
	display: grid;

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

	align-items: end;

	gap: 90px;

	margin-bottom: 42px;
}


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

.gm-experience__eyebrow {
	margin-bottom: 16px;

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

	line-height: 1;

	letter-spacing: .16em;

	color: #07546a;
}


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

.gm-experience__heading h2 {
	max-width: 1050px;

	margin: 0;

	font-size: clamp(42px, 3.5vw, 65px);
	font-weight: 400;

	line-height: 1;

	letter-spacing: -.052em;

	color: #133843;
}


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

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

	padding-bottom: 4px;
}

.gm-experience__intro p {
	max-width: 430px;

	margin: 0;

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

	line-height: 1.7;

	color: #647b82;
}


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

.gm-experience__grid {
	display: grid;

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

	gap: 12px;
}


/* =========================================================
   CARD
   ========================================================= */

.gm-experience-card {
	position: relative;

	overflow: hidden;

	min-height: 400px;

	background: #123e49;

	color: #ffffff;
}


/* GRANDES */

.gm-experience-card--wide {
	grid-column: 1 / -1;

	min-height: 690px;
}


/* PEQUEÑAS */

.gm-experience-card--half {
	min-height: 390px;
}


/* =========================================================
   IMAGE
   ========================================================= */

.gm-experience-card img {
	position: absolute;

	inset: 0;

	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;

	transition:
		transform .65s cubic-bezier(.22,.61,.36,1);
}


/* AJUSTES DE ENCUADRE */

.gm-experience-card--press img {
	object-position: center 42%;
}

.gm-experience-card--operations img {
	object-position: center center;
}


/* =========================================================
   OVERLAY
   ========================================================= */

.gm-experience-card__overlay {
	position: absolute;

	inset: 0;

	z-index: 1;

	background:
		linear-gradient(
			to top,
			rgba(0, 39, 51, .88) 0%,
			rgba(0, 39, 51, .55) 14%,
			rgba(0, 39, 51, .16) 38%,
			rgba(0, 39, 51, 0) 62%
		);
}


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

.gm-experience-card__content {
	position: absolute;

	z-index: 2;

	left: 26px;
	right: 26px;
	bottom: 25px;

	max-width: 600px;
}


/* =========================================================
   LABEL
   ========================================================= */

.gm-experience-card__eyebrow {
	display: block;

	margin-bottom: 8px;

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

	line-height: 1;

	letter-spacing: .14em;

	color: #6bee58;
}


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

.gm-experience-card h3 {
	margin: 0;

	max-width: 610px;

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

	line-height: 1.08;

	letter-spacing: -.03em;

	color: #ffffff;
}

.gm-experience-card--half h3 {
	max-width: 540px;

	font-size: 20px;
}


/* =========================================================
   DESCRIPTION
   ========================================================= */

.gm-experience-card p {
	margin:
		6px
		0
		0;

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

	line-height: 1.4;

	color: rgba(255,255,255,.83);
}


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

.gm-experience-card:hover img {
	transform: scale(1.025);
}


/* =========================================================
   DESKTOP GRANDE
   ========================================================= */

@media (min-width: 1500px) {

	.gm-experience-card--wide {
		min-height: 720px;
	}

	.gm-experience-card--half {
		min-height: 405px;
	}

}


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

@media (max-width: 1100px) {

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

		gap: 50px;
	}

	.gm-experience-card--wide {
		min-height: 570px;
	}

	.gm-experience-card--half {
		min-height: 340px;
	}

}


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

@media (max-width: 820px) {

	.gm-experience {
		padding:
			75px
			0
			85px;
	}

	.gm-experience__header {
		display: block;

		margin-bottom: 35px;
	}

	.gm-experience__intro {
		margin-top: 22px;

		padding: 0;
	}

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

	.gm-experience-card,
	.gm-experience-card--wide,
	.gm-experience-card--half {
		grid-column: auto;

		min-height: 480px;
	}

}


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

@media (max-width: 600px) {

	.gm-experience {
		padding:
			60px
			0
			65px;
	}

	.gm-experience__heading h2 {
		font-size: clamp(39px, 11vw, 52px);
	}

	.gm-experience__intro p {
		font-size: 13px;
	}

	.gm-experience__grid {
		gap: 8px;
	}

	.gm-experience-card,
	.gm-experience-card--wide,
	.gm-experience-card--half {
		min-height: 410px;
	}

	.gm-experience-card__content {
		left: 18px;
		right: 18px;
		bottom: 20px;
	}

	.gm-experience-card h3,
	.gm-experience-card--half h3 {
		font-size: 19px;
	}

}