.page {
	.eco-top {
		min-height: calc(65vh - 86px);
		display: flex;
		align-items: center;

		position: relative;
		overflow: hidden;
		z-index: -1;

		.container {
			min-height: calc(65vh - 86px);
			grid-template-columns: 0.75fr 1fr;
			@media (max-width: 768px) {
				padding-top: var(--space-xxl);
			}

			@media (max-width: 768px) {
				grid-template-columns: 1fr;
			}

			.wp-block-heading {
				margin: 0;
			}

			h2.wp-block-heading {
				font-size: var(--font-title-md);
				line-height: 1.21;

				@media (max-width: 768px) {
					padding-top: var(--space-xxl);
				}
			}
			h3.wp-block-heading {
				font-size: var(--font-size-base);
			}

			> .wp-block-group {
				display: flex;
				flex-direction: column;
				justify-content: center;
			}
		}

		figure {
			display: flex;
			align-items: end;
		}

		&::before {
			content: '';
			position: absolute;

			inset: -50px 0;
			background-image: url('../../images/bg-ecosystem.webp');
			background-size: cover;
			background-position: center center;
			background-repeat: no-repeat;
			z-index: -1;
			will-change: transform;
			transform: translateY(var(--parallax-offset, 0));

			@media (max-width: 768px) {
				background-size: cover;
				background-position: center bottom;
			}
		}
	}

	.eco-partners {
		padding: var(--space-lg) 0;

		h2,
		p {
			max-width: 720px;
			margin: var(--space-md) auto;
		}

		h2 {
			font-size: var(--font-title-sm);
		}

		.partners-list {
			margin: var(--space-md) auto;
			display: flex;
			flex-wrap: wrap;
			gap: 1.5rem;

			justify-content: center;
			text-align: center;
			max-width: 860px;

			@media (max-width: 768px) {
				gap: var(--space-sm);
				width: 100%;
				display: grid;
				grid-template-columns: repeat(3, 1fr);
			}

			.partner {
				background: var(--smx-color-white);
				border-radius: var(--border-radius-lg);
				padding: var(--space-sm);
				width: calc(100% / 5);

				@media (max-width: 768px) {
					width: auto;
				}

				img {
					max-height: 48px;
					max-width: 100%;
					height: auto;
					width: auto;
					display: block;
					margin: 0 auto;
					@media (max-width: 768px) {
						max-height: 36px;
					}
				}

				display: flex;
				flex-direction: column;
				justify-content: center;
			}
		}

		/* Tablet */
		@media (max-width: 1024px) {
			.partners-list {
				grid-template-columns: repeat(4, 1fr);
			}
		}

		/* Mobile */
		@media (max-width: 768px) {
			.partners-list {
				grid-template-columns: repeat(3, 1fr);
			}

			.partner {
				padding: var(--space-sm);
			}
		}
	}

	.eco-solid {
		padding-left: var(--space-sm);
		padding-right: var(--space-sm);

		.card {
			background: var(--smx-color-white);
			border-radius: var(--border-radius-xl);
			overflow: hidden;

			.is-layout-flex {
				display: grid;
				grid-template-columns: 1fr 1fr;
				align-items: normal;

				@media (max-width: 768px) {
					display: flex;
					flex-direction: column-reverse;
				}

				img,
				figure {
					display: block;
					width: 100%;
					height: auto;
				}

				.wp-block-group {
					padding-left: var(--space-lg);
					padding-top: var(--space-lg);
					padding-bottom: var(--space-lg);
				}

				h2.wp-block-heading {
					font-size: var(--font-title-sm);
					line-height: 1.2;
				}
				h3.wp-block-heading {
					font-size: var(--font-size-base);
					line-height: 1.2;
					font-weight: normal;
					margin-top: var(--space-sm);
					margin-bottom: var(--space-sm);
				}
				p {
					border-top: 1.5px solid var(--smx-color-primary);
					padding-top: var(--space-md);
					font-size: var(--font-text);
				}
			}
		}
	}

	.eco-track {
		padding: var(--space-lg) 0;
		background: linear-gradient(175deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);

		@media (max-width: 768px) {
			.is-layout-constrained {
				padding: 0;
			}
		}

		h2.wp-block-heading {
			font-size: var(--font-title-sm);
			margin: 0;
		}
		h3.wp-block-heading {
			font-size: var(--font-size-base);
			margin: 0;
			margin-bottom: var(--space-md);
		}

		h4 {
			color: var(--smx-color-primary-contrast);
		}

		p {
			font-size: var(--font-text);
		}

		img,
		figure {
			border-radius: var(--border-radius-lg);
		}

		.container {
			align-items: end;
		}

		.is-layout-grid,
		.is-layout-flex {
			@media (max-width: 768px) {
				display: grid;
				grid-template-columns: 1fr;
				gap: var(--space-sm);
			}
		}

		.eco-time-row {
			display: grid;
			margin-top: var(--space-lg);

			gap: 0;
			grid-template-columns: auto 1fr;
			border-bottom: 1px solid rgba(var(--smx-color-black-rgb), 0.1);
			margin-block-start: 0;
			margin-top: 0;

			@media (max-width: 768px) {
				display: grid;
				grid-template-columns: 1fr;
			}

			.has-text-align-right {
				font-size: var(--font-size-base);
				border-right: 1px solid rgba(var(--smx-color-black-rgb), 0.1);
				padding: var(--space-md);

				@media (max-width: 768px) {
					text-align: left;
					font-size: var(--font-subtitle);
					border-right: none;
					padding: 0;
					padding-top: var(--space-md);
				}
			}

			.wp-block-group {
				padding: var(--space-md);

				@media (max-width: 768px) {
					padding: 0;
					padding-bottom: var(--space-md);
				}
				p {
					font-size: var(--font-text);
					margin: 0;
				}
			}
		}

		.eco-time-row:last-child {
			border-bottom: none;
		}
	}

	.eco-labs {
		background: linear-gradient(175deg, rgba(52, 0, 125, 1) 0%, rgba(87, 5, 203, 1) 100%);
		background-image: url('../../images/wireframe.webp');
		background-size: cover;
		background-position: bottom center;
		background-repeat: no-repeat;
		color: var(--smx-color-background-light);
		padding: var(--space-lg) var(--space-sm);
		margin-top: var(--space-lg);

		.is-layout-grid {
			@media (max-width: 768px) {
				display: grid;
				grid-template-columns: 1fr;
				gap: var(--space-sm);
			}
		}

		.bg-labs {
			display: flex;
			height: 100%;
			overflow: visible;
			position: relative;

			@media (max-width: 768px) {
				display: grid;
				grid-template-columns: 1fr;
			}

			&::before {
				content: '';
				position: absolute;

				inset: -50px 0;
				background-image: url('../../images/labs.webp');
				background-size: contain;
				background-position: top center;
				background-repeat: no-repeat;
				z-index: 0;
				will-change: transform;
				transform: translateY(var(--parallax-offset, 0));

				@media (max-width: 768px) {
					background-size: cover;
					background-position: center bottom;
					display: none;
				}
			}
		}

		.labs-top {
			h2 {
				font-size: var(--font-title-main);
				font-weight: bold;
				margin: 0;
				border-bottom: 1.5px solid var(--smx-color-primary);
				b,
				strong {
					font-weight: bold;
					color: var(--smx-color-primary);
				}
			}

			.subtitle {
				gap: 0;
				align-items: end;
				vertical-align: baseline;
				line-height: 1.2;

				h3 {
					margin: 0;
					font-size: var(--font-title-sm);
					font-weight: bold;
					padding-right: var(--space-md);
					border-right: 1px solid rgb(var(--smx-color-white-rgb), 0.5);
					line-height: 1em;
				}
				h3:last-child {
					font-size: var(--font-size-base);
					font-weight: normal;
					padding-left: var(--space-md);
					color: var(--smx-color-primary-tint);
					border-right: 0;
					line-height: 1em;
				}
			}
			h3 {
				color: var(--smx-color-primary-tint);
			}

			h4 {
				font-size: var(--font-size-base);
				font-weight: normal;
				margin: 0;
				margin-top: var(--space-sm);
				color: var(--smx-color-primary-tint);
			}

			p {
				margin: var(--space-sm) 0;
				font-size: var(--font-text);
				line-height: 1.2;
			}

			> .is-layout-grid {
				grid-template-columns: 1.4fr 0.6fr;
				@media (max-width: 768px) {
					display: grid;
					grid-template-columns: 1fr;
				}

				.labs-columns {
					.card {
						border-radius: var(--space-md);
						text-align: center;
						padding: var(--space-md);
						font-weight: bold;
						background-color: var(--smx-color-primary-contrast);
						p {
							margin: 0;
						}
					}
				}
				.labs-list {
					gap: 0;
					@media (max-width: 768px) {
						display: grid;
						grid-template-columns: 1fr;
						gap: var(--space-sm);
					}

					.card {
						h3 {
							color: var(--smx-color-primary-tint);
						}
						@media (max-width: 769px) {
							border-bottom: 1px solid rgb(var(--smx-color-white-rgb), 0.3);

							&:last-child {
								border-bottom: none;
							}
						}
					}
					@media (min-width: 769px) {
						.card:nth-child(1) {
							padding-bottom: var(--space-md);
							padding-right: var(--space-md);
							border-bottom: 1px solid rgb(var(--smx-color-white-rgb), 0.3);
						}
						.card:nth-child(2) {
							padding-bottom: var(--space-md);
							padding-left: var(--space-md);
							border-bottom: 1px solid rgb(var(--smx-color-white-rgb), 0.3);
							border-left: 1px solid rgb(var(--smx-color-white-rgb), 0.3);
						}
						.card:nth-child(3) {
							padding-top: var(--space-md);
							padding-right: var(--space-md);
						}
						.card:nth-child(4) {
							padding-top: var(--space-md);
							padding-left: var(--space-md);
							border-left: 1px solid rgb(var(--smx-color-white-rgb), 0.3);
						}
					}
				}
			}
		}

		.labs-partners {
			padding-top: var(--space-lg);
			padding-bottom: var(--space-lg);

			.labs-impact {
				h2 {
					font-size: var(--font-title-sm);
					margin-bottom: 0;
					strong {
						color: var(--smx-color-primary-tint);
					}
				}
				h3 {
					font-size: var(--font-subtitle);
					color: var(--smx-color-primary-tint);
				}

				@media (max-width: 768px) {
					display: grid;
					grid-template-columns: 1fr;
				}

				.card {
					overflow: hidden;
					border-radius: var(--border-radius-lg);
					padding: var(--space-lg);
					height: 100%;
					display: flex;
					flex-direction: column;
					backdrop-filter: blur(2.4rem);

					h3 {
						margin-top: var(--space-sm);
						margin-bottom: var(--space-md);
						font-size: var(--font-subtitle);
						color: var(--smx-color-primary-tint);
						line-height: 1.2;
					}

					p {
						margin: 0;
						font-size: var(--font-text);
						color: var(--smx-color-background-light);

						em {
							display: inline-block;
							font-style: normal;
							font-weight: bold;
							color: var(--smx-color-white);
							background-color: var(--smx-color-primary-contrast);
							padding: var(--space-xs) var(--space-sm);
							line-height: 1;
							border-radius: var(--border-radius-full);
						}
					}
				}
			}
		}
	}

	.academy {
		padding: var(--space-xl) var(--space-sm);
		background: var(--smx-color-white);

		.title-area {
			img {
				max-width: 320px;
			}

			h2 {
				font-size: var(--font-title-main);
				line-height: 1.2;
				color: var(--smx-color-text-bold);
			}

			p {
				font-size: var(--font-subtitle);
			}
		}

		.is-layout-flex {
			@media (max-width: 768px) {
				gap: var(--space-sm);
				flex-direction: column-reverse;
			}
		}

		.is-layout-grid {
			@media (max-width: 768px) {
				grid-template-columns: 1fr;
				gap: var(--space-sm);
			}
			.card {
				background-color: var(--smx-color-background-light);
				border-radius: var(--border-radius-lg);
				color: var(--smx-color-text);
				display: flex;
				flex-direction: column;
				height: 100%;
				padding: var(--space-md);
				h3 {
					font-size: var(--font-size-lg);
					color: var(--smx-color-primary-contrast);
					line-height: 1.2;
				}
				p {
					flex: auto;
					margin-top: var(--space-sm);
					font-size: var(--font-text);
					color: var(--smx-color-text-bold);
				}
			}
		}
		.data-ai {
			h2 {
				color: var(--smx-color-primary);
				padding: var(--space-md) 0;
			}
			.cards-group {
				position: relative;
				padding: var(--space-lg) 0;
				border-radius: var(--border-radius-xl);
				padding: var(--space-md);
				background-color: var(--smx-color-primary-contrast);
				margin-top: 0;

				h2 {
					color: var(--smx-color-white);
					margin: 0;
				}

				.more-group {
					margin-top: 0;
					color: var(--smx-color-white);
					p {
						margin: 0;
					}
				}

				.is-layout-grid {
					@media (max-width: 768px) {
						grid-template-columns: 1fr;
						gap: var(--space-sm);
					}
					.card {
						background-color: var(--smx-color-white);
						border-radius: var(--border-radius-lg);
						color: var(--smx-color-text);
						display: flex;
						flex-direction: column;
						height: 100%;
						padding: var(--space-md);

						img {
							max-width: 32px;
						}

						h3 {
							font-size: var(--font-size-lg);
							color: var(--smx-color-primary-contrast);
							line-height: 1.2;
						}
						p {
							flex: auto;
							margin-top: var(--space-sm);
							font-size: var(--font-text);
							color: var(--smx-color-text-bold);
						}
					}
				}
			}
		}
	}

	.cat-career {
		padding: var(--space-xl) 0;

		.is-layout-grid {
			@media (max-width: 768px) {
				grid-template-columns: 1fr;
				gap: var(--space-md);
			}
		}

		.card {
			position: relative;
			overflow: hidden;
			border-radius: var(--border-radius-xl);

			img {
				display: block;
			}

			.card-content {
				position: absolute;
				left: 0;
				right: 0;
				bottom: 0;
				top: 0;
				z-index: 1;
				padding: var(--space-lg);
				text-align: center;
				color: var(--smx-color-white);
				background: linear-gradient(0deg, rgba(0, 0, 0, 0.76) 16%, rgba(0, 0, 0, 0) 100%);
				display: flex;
				flex-direction: column;
				justify-content: flex-end;
				margin-top: auto;
				height: 100%;

				p {
					font-size: var(--font-size-base);
					font-weight: bold;
				}

				.is-layout-flex {
					justify-content: center;
				}

				a.wp-block-button__link {
					background-color: var(--smx-color-white);
					color: var(--smx-color-primary);
					border: 2px solid var(--smx-color-primary);
					font-weight: bold;
					@media (max-width: 768px) {
						display: block;
					}
					margin: 0 auto;
					margin-bottom: var(--space-lg);
				}
				.contact-button {
					a.wp-block-button__link {
						background: linear-gradient(
							0deg,
							var(--smx-color-primary-contrast) 0%,
							var(--smx-color-primary) 100%
						);
						color: var(--smx-color-white);
					}
				}
			}
		}
	}
}