.title-wrapper .title {
	gap: 10px;
	padding-left: 0 !important;
	max-width: 473px;
	margin-bottom: 30px;
}
.hits {
	background: var(--grey-1);
}
h1 {
	font-size: 28px;
	font-weight: 700;
}
.promo {
	display: grid;
	grid-template-columns: 1fr 473px;
	column-gap: 10px;
	margin-bottom: 100px;
	> form {
		margin-top: 77px;
		position: sticky;
		top: 40px;
		width: 100%;
		align-self: start;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 40px 30px;
		border-radius: 20px;
		border: 1px solid #FFF;
		background: var(--white-grey);
		box-shadow: 0px 44px 44px 0px rgba(0, 0, 0, 0.09), 0px 11px 24px 0px rgba(0, 0, 0, 0.1);
		.heading {
			text-align: center;
			font-size: 20px;
			font-weight: 700;
			+ p {
				margin-bottom: 30px;
			}
		}
		label {
			display: flex;
			flex-direction: column;
			gap: 2px;
			width: 100%;
			margin-bottom: 8px;
			margin-left: 12px;
			font-size: 14px;
		}
		input {
			margin-left: -12px;
			border-radius: 10px;
			background: var(--white);
			padding: 8px 10px 9px 12px;
			color: var(--grey-4);
			border: none;
		}
		.btn {
			width: 100%;
			margin: 30px 0 20px;
			+ p {
				font-size: 12px;
				text-align: center;
				a {
					font-size: inherit;
					color: var(--ff-2-f-00);
				}
			}
		}
	}
	.project {
		display: flex;
		flex-direction: column;
		gap: 10px;
		.dot-a,
		.dot-b {
			align-items: center;
			gap: 4px;
			font-size: 14px;
			font-weight: 200;
			letter-spacing: 0.14px;
			&::after,
			&::before {
				width: 8px;
				height: 8px;
			}
		}
		.slider {
			position: relative;
			border-radius: 30px;
			overflow: hidden;
			width: 100%;
			border: 10px solid var(--white);
			.slides {
				display: flex;
				gap: 10px;
				.slide {
					position: relative;
					min-width: 100%;
					aspect-ratio: 957/576;
					border-radius: 30px;
					background: var(--bg), var(--white);
					overflow: hidden;
					cursor: pointer;
					&::before {
						content: '';
						position: absolute;
						inset: 0;
						border-radius: 20px;
						backdrop-filter: blur(15px);
						pointer-events: none;
					}
					&::after {
						content: '\e91a';
						position: absolute;
						left: 50%;
						top: 50%;
						width: 50px;
						aspect-ratio: 1;
						transform: translate(-50%, -50%);
						display: flex;
						align-items: center;
						justify-content: center;
						border-radius: 12px;
						font: 100 24px/1 'icon';
						background: rgba(66, 66, 66, 0.7);
						backdrop-filter: blur(5px);
						z-index: 1;
						color: var(--white);
						opacity: 0;
						transition: opacity .2s linear;
					}
					img {
						position: relative;
						z-index: 1;
						width: auto;
						height: 100%;
						max-width: 100%;
						margin: 0 auto;
					}
				}
			}
			.bubbles {
				position: absolute;
				z-index: 2;
				right: 10px;
			}
		}
		.info,
		.feedback {
			border-radius: 30px;
			padding: 30px;
			background: var(--white);
			.dot-a,
			.dot-b {
				align-items: center;
				gap: 4px;
				font-size: 14px;
				font-weight: 200;
				letter-spacing: 0.14px;
				&::after,
				&::before {
					width: 8px;
					height: 8px;
				}
			}
		}
		.content {
			margin-bottom: 20px;
			* {
				font-size: 20px;
				display: contents;
			}
		}
		.info {
			h2 {
				font-size: 24px;
				font-weight: 700;
				margin-bottom: 20px;
			}
			ul {
				list-style: none;
				li {
					color: var(--ff-2-f-00);
					&:not(:last-child) {
						margin-bottom: 4px;
					}
				}
			}
		}
		.feedback .content {
			margin-bottom: 0;
			+ div {
				display: flex;
				justify-content: space-between;
				align-items: center;
				gap: 10px;
				margin-top: 22px;
				span {
					&:first-child {
						display: flex;
						align-items: center;
						gap: 5px;
						&::before {
							content: '\e919';
							font: 100 18px/1 'icon';
							width: 24px;
							aspect-ratio: 1;
							flex-shrink: 0;
							display: flex;
							align-items: center;
							justify-content: center;
							border-radius: 6px;
							background: var(--white-grey);
						}
					}
					&:last-child {
						font-size: 14px;
						letter-spacing: 0.14px;
					}
				}
			}
		}
	}
}
.slider-modal {
	backdrop-filter: blur(5px);
	.window-body {
		background: none;
		width: auto;
		aspect-ratio: 12/9;
		max-width: calc(100vw - 300px);
		max-height: calc(100dvh - 180px);
		border-radius: 30px;
		box-shadow: none;
		border: none;
		.close {
			right: -44px;
			top: 0;
		}
	}
	.project-slider {
		position: relative;
		width: 100%;
		height: 100%;
		.slides-box {
			width: 100%;
			height: 100%;
			overflow: hidden;
			border-radius: 30px;
		}
		.slides {
			height: 100%;
			display: flex;
			gap: 10px;
			.slide {
				position: relative;
				min-width: 100%;
				overflow: hidden;
				img {
					width: auto;
					height: 100%;
					max-width: 100%;
					margin: 0 auto;
					border-radius: 30px;
					border: 1px solid var(--white);
				}
			}
		}
		.arrow-l,
		.arrow-r {
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			cursor: pointer;
			display: flex;
			width: 60px;
			height: 60px;
			justify-content: center;
			align-items: center;
			flex-shrink: 0;
			border-radius: 20px;
			background: var(--grey-1);
			&::before {
				content: '\e903';
				font: 400 22px/1 'icon';
			}
		}
		.arrow-l {
			right: calc(100% + 60px);
			&::before {
				transform: rotate(180deg);
			}
		}
		.arrow-r {
			left: calc(100% + 60px);
		}
		.ws-arrow-disabled {
			background: var(--grey-2);
			cursor: default;
			&::before {
				opacity: .2;
			}
		}
	}
}

@media screen and (max-width: 1440px) {
	.promo {
		grid-template-columns: 1fr 373px;
	}
	.slider-modal {
		.window-body {
			max-width: calc(100vw - 260px);
			max-height: calc(100dvh - 120px);
		}
		.project-slider {
			.arrow-l {
				right: calc(100% + 30px);
			}
			.arrow-r {
				left: calc(100% + 30px);
			}
		}
	}
}
@media screen and (max-width: 1152px) {
	.promo {
		display: flex;
		flex-direction: column;
		gap: 50px;
		> form {
			margin-top: 0;
		}
	}
	.slider-modal {
		.window-body {
			border-radius: 10px;
			max-width: calc(100vw - 40px);
			.close {
				right: 0;
				top: -40px;
			}
		}
		.project-slider {
			.slides-box {
				border-radius: 10px;
			}
			.arrow-r,
			.arrow-l {
				transform: none;
				top: calc(100% + 40px);
			}
			.arrow-l {
				right: initial;
				left: 0;
			}
			.arrow-r {
				left: initial;
				right: 0;
			}
		}
	}
}
@media screen and (max-width: 768px) {
	.title-wrapper .title {
		width: fit-content;
		margin-bottom: 40px;
		padding: 8px 10px;
	}
	h1 {
		font-size: 24px;
	}
	.promo .content * {
		font-size: 16px;
	}
	.hits {
		padding-bottom: 100px;
	}
}
@media (hover: hover) {
	.promo .slider .slides .slide:hover::after {
		opacity: 1;
	}
}