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: 100vw;
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: auto 1fr;
		gap: 48px;
		padding: 0;
		margin-top: calc(147px + 8dvh);
		height: calc(92dvh - 180px);
	}
	.menu {
		display: flex;
		gap: 40px;
		justify-content: center;
		span {
			font-family: Lato;
			font-weight: 300;
			cursor: pointer;
			transition: color 0.2s;
			&.active {
				font-weight: 400;
			}
		}
	}
	.slider {
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		grid-column: 1/2;
		grid-row: 2/3;
		max-width: 393px;
		position: absolute;
		opacity: 0;
		visibility: hidden;
		z-index: -3;
		&.active {
			opacity: 1;
			visibility: visible;
			z-index: 0;
		}
		.bubbles {
			display: none;
		}
		.slides {
			gap: 20px;
			display: flex;
			align-items: center;
			height: 100%;
			transform: translate(calc(50vw - 195px));
		}
		.slide {
			position: relative;
			height: 100%;
			min-width: 393px;
			aspect-ratio: 393/585;
			/* transform: translateX(90%) scale(0.2); */
			transition: transform 0.4s linear;
			will-change: transform;
			opacity: 0;
			&:is(.active, .check, .last-slide) {
				opacity: 1;
			}
			&.last-slide {
				/* transform: translateX(40%) scale(0.6); */
				~ .slide:not(.active, .check, .last-slide) {
					/* transform: translateX(-90%) scale(0.2); */
				}
			}
			&.check {
				/* transform: translateX(10%) scale(0.8); */
				+ .slide.last-slide {
					/* transform: translateX(-40%) scale(0.6); */
				}
			}
			&.active {
				transform: translateX(0px) scale(1);
				+ .check {
					z-index: 1;
					/* transform: translateX(-10%) scale(0.8); */
				}
				h3,
				h4 {
					opacity: 1;
				}
			}
			img {
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 90%;
				inset: 0px;
				border-radius: 3px;
				object-fit: cover;
			}
			h3 {
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				bottom: 0px;
				opacity: 0;
				transition: .3s linear;
				font-family: Lato;
				font-weight: 300;
				color: var(--text-color);
				font-size: 18px;
			}
			h4 {
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				bottom: -20px;
				opacity: 0;
				transition: .3s linear;
				font-family: Lato;
				font-weight: 300;
				color: var(--text-color);
				font-size: 14px;
			}
		}
	}
}
.vertical .promo .slide {
	max-height: 60dvh;
}
@media screen and (max-width: 1500px) {
	.promo {
		.wrapper {
			margin-top: 160px;
			gap: 30px;
			height: calc(92dvh - 141px);
		}
		.slides {
			transform: translate(calc(50vw - 170px));
		}
		.slide {
			min-width: 340px;
			max-height: 506px;
		}
	}
}
@media screen and (max-width: 1279px) {
	header {
		.wrapper > .logo {
			font-size: 35px;
		}
	}
	.vertical .promo {
		.wrapper {
			margin-top: 250px;
		}
		.slides {
			transform: translate(calc(50vw - 250px));
		}
		.slide {
			min-width: 500px;
		}
	}
}
@media screen and (max-width: 767px) {
	header {
		padding-top: 20px;
	}
	.vertical header {
		padding: 30px 20px 0;
	}
	.vertical header .wrapper > .logo {
		background: url(../images/logo.svg) 0 0 / 100% 100% !important;
	}
	.vertical .promo {
		.wrapper {
			margin-top: 160px;
		}
		.slides {
			transform: translate(calc(50vw - 169px));
		}
		.slide {
			min-width: 338px;
		}
	}
}
@media screen and (max-width: 1024px) and (max-height: 431px) {
	header {
		padding-top: 10px;
	}
	header .wrapper {
		height: auto;
	}
	.promo {
		.wrapper {
			margin-top: 60px;
			height: calc(100dvh - 70px);
			gap: 15px;
		}
		.slides {
			/* transform: translate(calc(50vw - 125px)); */
		}
		.slide {
			min-width: 250px;
		}
	}
}
@media screen and (hover:hover) {
	.promo .menu span:hover {
		color: var(--hover);
	}
}