header .wrapper > .logo,
header .location,
.promo * {
	color: var(--text-color);
}
header {
	.location::before {
		background: var(--dark);
	}
	.wrapper > .buttons svg {
		fill: var(--text-color);
	}
}
.vertical header .wrapper > .logo {
	border-color: var(--dark) !important;
	&::before {
		border-color: var(--dark) !important;
	}
	span {
		color: var(--text-color) !important;
	}
}
footer {
	display: none;
}
.promo {
	display: flex;
	align-items: start;
	justify-content: center;
	.wrapper {
		position: relative;
		max-width: 1194px;
		display: grid;
		grid-template-columns: 0.385fr 0.615fr;
		justify-content: space-between;
		align-items: center;
		column-gap: 6.7%;
		padding: 0;
		margin-top: calc(147px + 8dvh);
		height: calc(92dvh - 247px);
	}
	h1 {
		display: grid;
		grid-template-columns: auto 1fr;
		align-items: center;
		gap: 20px;
		font-family: Lato;
		font-size: 24px;
		font-weight: 400;
		line-height: 133%;
		text-transform: uppercase;
		margin-bottom: 24px;
		&::after {
			content: '';
			width: 100%;
			height: 1px;
			background: var(--dark);
		}
	}
	.content {
		display: flex;
		flex-direction: column;
		gap: 10px;
		p {
			font-weight: 300;
			font-family: Lato;
			font-size: 12px;
		}
	}
	img {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		min-height: 100%;
		height: 100%;
		grid-column: 2/3;
		grid-row: 1/2;
		border-radius: 3px;
		max-height: 100%;
		object-fit: cover;
	}
}
.vertical .promo {
	.wrapper {
		display: flex;
		flex-direction: column-reverse;
		width: calc(100% - 248px);
		gap: 60px;
		margin-top: calc(160px + 8dvh);
	}
	img {
		position: static;
	}

}
@media screen and (max-width: 1500px) {
	.promo .wrapper {
		width: calc(100% - 248px);
		padding: 0;
		column-gap: 3.8%;
	}
}
@media screen and (max-width: 1279px) {
	header {
		background: #fff;
	}
	html {
		overflow: auto;
		body {
			max-height: initial;
		}
	}
	body {
		scrollbar-width: initial;
		overflow: auto;
		max-height: 200dvh;
	}
	header {
		padding: 30px 30px 0 !important;
	}
	.promo .wrapper {
		width: calc(100% - 60px);
		padding: 0;
		grid-template-columns: 1fr 1fr;
		column-gap: 3.8%;
	}
	.vertical .promo {
		height: auto;
		.wrapper {
			position: relative;
			width: calc(100% - 120px);
			height: auto;
			display: flex;
			flex-direction: column-reverse;
			align-items: end;
			gap: 50px;
			margin-top: 220px;
		}
		.box {
		}
		img {
			width: 100%;
			height: 100%;
		}
	}
}
@media screen and (max-width: 767px) {
	header {
		padding-top: 20px !important;
	}
	.vertical header .wrapper > .logo {
		background: url(../images/logo.svg) 0 0 / 100% 100% !important;
	}
	.promo h1 {
		font-size: 18px;
		margin-bottom: 20px;
	}
	.vertical .promo {
		margin-bottom: 50px;
		.wrapper {
			width: calc(100% - 52px);
			margin-top: 140px;
			gap: 30px;
		}
	}
}
@media screen and (max-width: 1024px) and (max-height: 431px) {
	header {
		padding-top: 10px !important;
		.wrapper {
			height: auto;
		}
	}
	.promo .wrapper {
		grid-template-columns: auto auto;
		margin-top: 70px;
		width: calc(100% - 60px);
		height: calc(100dvh - 90px);
		h1 {
			font-size: 18px;
			margin-bottom: 15px;
		}
		.content {
			gap: 5px;
			p {
				font-size: 12px;
			}
		}
		img {
			position: static;
			max-height: calc(100dvh - 100px);
		}
	}
}
@media screen and (max-width: 400px) and (max-height: 770px) {
	.vertical .promo .wrapper {
		gap: 25px;
		margin-top: 140px;
		height: calc(100dvh - 165px);
	}
	.promo .content p {
		font-size: 12px;
	}
}