/* About page: engineering solutions */
.about-engineering {
	padding: 56px 0 64px;
	background-color: var(--color-navy-deep);
	background-image: url(../../images/bg-hex-dark.svg);
	background-repeat: repeat;
	color: var(--color-white);
}

.about-engineering-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 40px;
}

.about-engineering-text {
	flex: none;
	width: 680px;
}

.about-engineering-eyebrow {
	padding-bottom: 11px;
}

.about-engineering-title {
	margin-top: 28px;
	font: 600 40px/47px var(--font-title);
	color: var(--color-white);
}

.about-engineering-lead {
	margin-top: 24px;
	font: 400 16px/26px var(--font-text);
	color: var(--color-border);
}

.about-engineering-blueprint {
	position: relative;
	flex: none;
	width: 560px;
	height: 223px;
	margin-top: 55px;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: 20px;
	background-color: #04274f;
	background-image:
		linear-gradient(rgba(120, 170, 230, .12) 1px, transparent 1px),
		linear-gradient(90deg, rgba(120, 170, 230, .12) 1px, transparent 1px);
	background-size: 32px 32px;
}

.about-engineering-tasks {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	margin-top: 29px;
}

.about-engineering-task {
	display: flex;
	flex-direction: column;
	height: 100px;
	padding: 23px;
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 12px;
	background: linear-gradient(100deg, #032a5a 0%, #0a4a9c 38%, #052f66 100%);
}

.about-engineering-task-num {
	display: block;
	font: 700 14px/17px var(--font-text);
	color: var(--color-accent);
}

.about-engineering-task-name {
	display: block;
	margin-top: 14px;
	font: 700 17px/21px var(--font-text);
	color: var(--color-white);
}

.about-engineering-note {
	margin-top: 56px;
	font: 400 16px/26px var(--font-text);
	color: #bacbe0;
}

@media (max-width: 1279px) {
	.about-engineering-head {
		flex-direction: column;
	}

	.about-engineering-text {
		width: 100%;
		max-width: 680px;
	}

	.about-engineering-blueprint {
		width: 100%;
		margin-top: 0;
	}

	.about-engineering-tasks {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 767px) {
	.about-engineering {
		padding: 40px 0 40px;
	}

	.about-engineering-title {
		font-size: 28px;
		line-height: 34px;
	}

	.about-engineering-lead {
		margin-top: 20px;
		font-size: 15px;
	}

	.about-engineering-blueprint {
		height: 180px;
	}

	.about-engineering-tasks {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	.about-engineering-task {
		height: 84px;
	}

	.about-engineering-note {
		margin-top: 32px;
		font-size: 15px;
	}
}