@import url("orbit.css");

.pe-products,
.pe-products *,
.pe-products *::before,
.pe-products *::after {
	box-sizing: border-box;
}

.pe-products {
	--pe-grid-ink: rgba(139, 139, 141, 0.105);
	--pe-grid-step: 80px;
	--pe-line: #8b8b8d;
	margin-inline: calc(var(--pe-header-gutter, 40px) * -1);
	background: #2b2b2f;
	color: #fff;
	font: 400 16px/1.3 Play, Arial, sans-serif;
	scroll-margin-top: 24px;
}

body:has(.pe-header.is-overlay) .pe-products {
	margin-inline: 0;
}

.pe-products * {
	min-width: 0;
}

.pe-products h2,
.pe-products h3 {
	margin: 0;
	font-family: Tektur, "Arial Narrow", sans-serif;
	font-weight: 500;
	letter-spacing: -0.5px;
	color: #fff;
}

.pe-products a {
	color: inherit;
	text-decoration: none;
}

.pe-products__empty {
	margin: 0;
	padding: 24px;
}

.pe-products__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
}

.pe-products__intro,
.pe-products__card {
	position: relative;
	overflow: hidden;
	min-height: 449px;
	border-right: 1px solid var(--pe-line);
	border-bottom: 1px solid var(--pe-line);
}

.pe-products__intro {
	display: flex;
	align-items: center;
	padding: 40px;
}

.pe-products__intro::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(90deg, var(--pe-grid-ink) 1px, transparent 1px),
		linear-gradient(0deg, var(--pe-grid-ink) 1px, transparent 1px);
	background-size: var(--pe-grid-step) var(--pe-grid-step);
	pointer-events: none;
}

.pe-products__intro::after {
	content: "";
	position: absolute;
	top: 160px;
	left: 57%;
	width: 98px;
	height: 198px;
	background: #7e33ff;
	transform: rotate(19deg);
	filter: blur(70px);
	pointer-events: none;
}

.pe-products__intro-copy {
	position: relative;
	z-index: 1;
	max-width: 540px;
}

.pe-products__intro h2 {
	margin-bottom: 12px;
	font-size: 48px;
	line-height: 1.29;
}

.pe-products__intro p {
	max-width: 440px;
	margin: 0;
}

.pe-products__card {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
	align-content: center;
	padding: 32px;
}

.pe-products__bg {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.pe-products__bg img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: saturate(0.82);
}

.pe-products__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(28, 28, 33, 0.86), rgba(28, 28, 33, 0.66) 55%, rgba(28, 28, 33, 0.4));
}

.pe-products__text,
.pe-products__more {
	position: relative;
	z-index: 1;
}

.pe-products__text {
	max-width: 622px;
}

.pe-products__card h3 {
	margin: 0 0 12px;
	font-size: clamp(28px, 1.667vw, 32px);
	line-height: 1.3;
	overflow-wrap: break-word;
}

.pe-products__text p {
	max-width: 622px;
	margin: 0;
	color: #fff;
	font-size: 16px;
	line-height: 1.3;
}

.pe-products__text p + p {
	margin-top: 12px;
}

.pe-products__more {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 12px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: #fff;
	font: 400 16px/1.3 Play, Arial, sans-serif;
	white-space: nowrap;
	cursor: pointer;
}

.pe-products__more:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}

.pe-products__academy {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 450px;
	padding: 60px 40px;
	overflow: hidden;
	border-bottom: 1px solid var(--pe-line);
}

.pe-products__academy-photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.pe-products__academy::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(-41deg, transparent 49.168%, #2b2b2f 80.474%);
}

.pe-products__academy-copy {
	position: relative;
	z-index: 1;
	width: 625px;
	max-width: 100%;
}

.pe-products__academy h3 {
	margin-bottom: 12px;
	font-size: 32px;
	line-height: 1.3;
}

.pe-products__accent,
.pe-products__academy .pe-products__more {
	color: #3dcc82;
}

.pe-products__academy p {
	margin: 0;
	font-size: 16px;
	line-height: 1.3;
}

.pe-products__academy .pe-products__more {
	justify-content: flex-start;
	margin-top: 40px;
}

@media (min-width: 1800px) {
	.pe-products__card {
		grid-template-columns: minmax(0, 1fr) 141px;
		gap: 24px;
		align-items: center;
		padding: 40px;
	}

	.pe-products__more {
		justify-content: flex-end;
	}

	.pe-products__academy .pe-products__more {
		justify-content: flex-start;
	}
}

@media (max-width: 960px) {
	.pe-products__intro,
	.pe-products__card {
		min-height: 448px;
		padding: 30px 24px;
	}

	.pe-products__intro h2 {
		font-size: 36px;
	}

	.pe-products__card h3,
	.pe-products__academy h3 {
		font-size: 25px;
	}

	.pe-products__academy {
		padding: 48px 24px;
	}
}

@media (max-width: 600px) {
	.pe-products__grid {
		grid-template-columns: 1fr;
	}

	.pe-products__intro {
		min-height: 235px;
		padding: 40px 16px;
	}

	.pe-products__intro::before {
		background-position: left bottom;
	}

	.pe-products__intro h2 {
		font-size: 30px;
		line-height: 1.2;
	}

	.pe-products__card {
		min-height: 420px;
		padding: 40px 24px;
		border-right: 0;
	}

	.pe-products__card h3 {
		font-size: 26px;
	}

	.pe-products__text p {
		line-height: 1.45;
	}

	.pe-products__bg::after {
		background: linear-gradient(90deg, rgba(28, 28, 33, 0.87), rgba(28, 28, 33, 0.7) 70%, rgba(28, 28, 33, 0.5));
	}

	.pe-products__academy {
		min-height: 400px;
		padding: 40px 24px;
	}

	.pe-products__academy::after {
		background: rgba(43, 43, 47, 0.73);
	}

	.pe-products__academy h3 {
		font-size: 26px;
	}
}