.promo .left {
	.contacts {
		position: relative;
		overflow: hidden;
		z-index: 1;
		gap: 20px;
		&::before,
		&::after {
			content: 'KP-Energy';
			position: absolute;
			white-space: nowrap;
			color: var(--grey-1);
			font-size: 300px;
			font-weight: 700;
			line-height: .75;
			pointer-events: none;
			z-index: -1;
		}
		&::before {
			top: 0;
			left: 0;
		}
		&::after {
			bottom: 66px;
			right: 0;
		}
		.logo {
			transition: opacity .2s;
			max-width: 323px;
		}
		:is(.address, .email, .tel) {
			display: grid;
			grid-template-columns: 50px 1fr;
			align-items: center;
			gap: 4px 12px;
		}
		.tel {
			&:not(:has(a + a)) {
				grid-template-rows: 1fr;
				a {
					align-self: center !important;
				}
			}
			a {
				font-weight: 600;
				text-transform: uppercase;
				letter-spacing: 0.16px;
				align-self: start;
				white-space: nowrap;
				&:first-child {
					align-self: end;
				}
			}
			.icon-btn {
				grid-column: 1/2;
				grid-row: 1/3;
				background-color: var(--ff-2-f-00);
				color: var(--white);
				font-size: 24px;
				border-radius: 12px;
				transition: background-color .3s linear, color .3s linear;
				&::before {
					content: '\e90e';
				}
			}
		}
		:is(.address, .email) {
			font-weight: 600;
			letter-spacing: 0.16px;
			&::before {
				display: flex;
				align-items: center;
				justify-content: center;
				aspect-ratio: 1;
				border-radius: 12px;
				background-color: var(--ff-2-f-00);
				color: var(--white);
				font-family: icon;
				line-height: 1;
				font-weight: 100;
				font-size: 24px;
				transition: background-color .3s linear, color .3s linear;
			}
		}
		.address {
			max-width: 317px;
			&::before {
				content: '\e90d';
			}
		}
		.email::before {
			content: '\e90c';
		}
		.schedule {
			display: grid;
			grid-template-columns: auto 1fr;
			align-items: center;
			gap: 6px;
			font-weight: 600;
			letter-spacing: 0.16px;
			&::before {
				content: '\e908';
				aspect-ratio: 1;
				color: var(--ff-2-f-00);
				font-family: icon;
				line-height: 1;
				font-weight: 100;
				font-size: 20px;
			}
		}
		.social .head {
			font-size: 20px;
			font-weight: 700;
			margin-bottom: 10px;
		}
		.btns {
			display: flex;
			gap: 10px;
			a {
				flex: 0 0 30px;
				aspect-ratio: 1;
				border-radius: 8px;
				&::before {
					display: flex;
					align-items: center;
					justify-content: center;
					aspect-ratio: 1;
					border-radius: 8px;
					background-color: var(--ff-2-f-00);
					color: var(--white);
					font-family: icon;
					line-height: 1;
					font-weight: 100;
					font-size: 18px;
					transition: background-color .3s linear, color .3s linear;
				}
				&.facebook::before {
					content: '\e90b';
				}
				&.telegram::before {
					content: '\e906';
				}
				&.instagram::before {
					content: '\e909';
				}
			}
		}
	}
	.map {
		padding: 0;
		height: 658px;
		width: 100%;
		overflow: hidden;
	}
}
[class*="ymaps-2"][class*="-ground-pane"] {
	filter: saturate(0);
}
@media screen and (max-width: 1152px) {
	h1.title {
		margin-bottom: 0 !important;
	}
}
@media screen and (max-width: 768px) {
	.promo .left {
		.contacts::after {
			right: 50%;
			transform: translateX(52%);
			bottom: 40px;
		}
		.map {
			height: 410px;
		}
	}
}
@media screen and (hover: hover) {
	.promo .left .contacts {
		.logo:hover {
			opacity: .7;
		}
		.tel {
			a:hover {
				color: var(--ff-2-f-00);
			}
			.icon-btn:hover {
				background-color: var(--grey-2);
				color: var(--grey-dark);
			}
		}
		a:hover {
			color: var(--ff-2-f-00);
		}
		.btns a:hover::before {
			background-color: var(--white);
			color: var(--ff-2-f-00);
		}
	}
}