/* Hero */

/* .hero {
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	padding: 0;
}

.hero__inner {
	height: 100vh;
	padding-top: 160px;
	display: flex;
	justify-content: center;
	flex-direction: column;
	max-width: 802px;
	.title-label {
		margin-bottom: 4px;
	}
	.title {
		margin-bottom: 40px;
	}
	.title {
		color: var(--color-white);
	}
	.text {
		color: var(--color-white);
	}
} */

/* Hero */

/* Offer */

.offer {
	background-color: var(--color-dark);
	.title {
		color: var(--color-white);
	}
}
.container {
}
.offer__inner {
}
.offer__body {
	position: relative;
}
.offer__list {
	columns: 2;
	column-gap: 40px;
	list-style-position: inside;
	counter-reset: counter;
	list-style: none;
	li {
		background: rgba(255, 255, 255, 0.05);
		backdrop-filter: blur(12px);
		counter-increment: counter;
		width: 308px;
		height: 122px;
		display: flex;
		align-items: flex-end;
		padding: 24px;
		color: var(--color-white);
		line-height: 140%;
		position: relative;
		margin-bottom: 24px;
		transition: 0.2s ease-in-out;

		&::before {
			content: counter(counter, decimal-leading-zero);
			position: absolute;
			font-family: var(--title-accent-font);
			font-size: 89px;
			line-height: 1.38;

			z-index: -1;
			text-align: right;
			color: rgba(250, 230, 170, 0.3);
			top: -12px;
			right: 24px;
		}
		&.right-col {
			margin-left: auto;
			text-align: right;
			justify-content: end;
			&::before {
				right: auto;
				left: 24px;
			}
		}
		&:hover {
			background-color: rgba(255, 255, 255, 0.15);
		}
	}
}
.offer__decor {
	position: absolute;
	left: 50%;
	translate: -50%;
	top: 0;
	height: calc(100% - 24px);
	width: calc(100% - 648px);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}
/* Offer */
.boxes {
	background-color: var(--color-white-bg);
}
.boxes__inner {
}
.container {
}
.heading {
	.text {
		margin-bottom: 28px;
	}
}
.title-label {
}
.title {
}
.text {
}
.boxes__body {
	padding: 48px 0;
	position: relative;
	z-index: 1;
	&::before {
		position: absolute;
		top: 0;
		height: 100%;
		width: 100vw;
		left: 50%;
		translate: -50% 0;
		content: '';
		background-color: #fafafa;
	}
}
.boxes__slider {
}
.slider {
}
.boxes__subtitle {
	font-weight: 700;
	font-size: 24px;
	text-align: center;
	text-transform: uppercase;
	margin-bottom: 32px;
	color: var(--color-accent-dark);
}
.boxes-swiper {
}
.swiper {
}
.swiper-wrapper {
}
.swiper-slide {
}
.box-card {
	padding: 24px;
	background-color: var(--color-white-bg);
	display: flex;
	flex-direction: column;
	text-align: center;
	align-items: center;
}
.box-card__title {
	font-weight: 700;
	font-size: 24px;
	margin-bottom: 16px;
}
.box-card__body {
	position: relative;
	width: 100%;
	&::before {
		display: block;
		height: 24px;
		mask: url('../images/wedding/box-decor.svg') center/contain no-repeat;
		content: '';
		background-color: #e3e3e3;
		margin-bottom: 24px;
	}
	ul,
	ul li {
		list-style: disc;
		width: fit-content;
		user-select: none;
		line-height: 140%;
		margin: 8px auto;
	}
}
.guide {
	.field {
		flex: 1;
	}
}
.container {
}
.guide__inner {
	display: flex;
	gap: 36px;
}
.guide__content {
}
.title-label {
}
.title {
}
.description {
}
.guid__form {
	display: flex;
	align-items: flex-end;
	padding: 24px;
	gap: 16px;
	background: var(--color-white);
	.button {
		width: 308px;
	}
}

.guide__decor {
	position: relative;
	max-width: 39.375%;
}
.guild__img-sm {
	position: absolute;
	aspect-ratio: 262/397;
	bottom: 0;
	left: 0;
	border-top: 12px solid var(--color-background);
	border-right: 12px solid var(--color-background);
	width: 51.985%;
}
.guide__img {
	aspect-ratio: 1;
	margin-left: auto;
	width: 93.254%;
}

.feedback {
	border-bottom: 1px solid rgba(0, 0, 0, 0.05);
	padding-top: 0;
}
.container {
}
.heading {
}
.title-label {
}
.title {
}
.feedback__body {
}
.feedback-form {
	background-color: var(--color-white-bg);
	padding: 48px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	.button,
	.field--textarea {
		grid-column: span 3;
	}
	.button {
		max-width: 368px;
		margin-inline: auto;
		width: 100%;
	}
}
.field {
}
.field-error {
}
.error {
}
.button {
}
@media (max-width: 1199.98px) {
	/* .hero__inner {
		padding-top: 140px;
	} */
	.feedback-form {
		padding: 36px;
	}
	.offer__list {
		& li {
			&::before {
				font-size: 69px;
			}
		}
	}
	.guide__inner {
		align-items: center;
		gap: 28px;
	}
	.guild__img-sm {
		border-top-width: 10px;
		border-right-width: 10px;
	}
	.guide__decor {
		aspect-ratio: 504/582;
	}
	.guid__form {
		.button {
			width: auto;
		}
	}
}
@media (max-width: 1023.98px) {
	.feedback-form {
		grid-template-columns: repeat(2, 1fr);
		.button,
		.field--textarea {
			grid-column: span 2;
		}
	}
	.offer__list {
		li {
			width: 250px;
			margin-bottom: 18px;
			height: 100px;
		}
	}
	.offer__decor {
		width: calc(100% - 536px);
	}
}
@media (max-width: 767.98px) {
	/* .hero__inner {
		padding-top: 108px;
	}
	.hero {
		background-position: 70% center;
	}
	.hero__inner {
		text-align: center;
		.title {
			margin-bottom: 48px;
		}
	} */
	.feedback-form {
		grid-template-columns: auto;
		padding: 24px;
		gap: 12px;
		.button,
		.field--textarea {
			grid-column: inherit;
		}
	}

	.offer__list {
		& li {
			&::before {
				font-size: 49px;
			}
		}
	}
	.offer__list {
		columns: 1;
		li {
			width: 100%;
			margin-bottom: 12px;
			height: 76px;
			&::before {
				top: 50%;
				translate: 0 -50%;
				margin: 0;
				color: rgba(255, 255, 255, 0.05);
			}
			&.middle-col {
				margin-top: calc(var(--decor-height) + 24px);
			}
			&:last-child {
				margin-bottom: 0;
			}
		}
	}
	.offer__decor {
		aspect-ratio: 343 / 312;
		width: 100%;
		height: auto;
		--decor-height: calc(100% / (343 / 312));
		top: calc(50% - 15px);
		translate: -50% -50%;
	}

	.boxes-swiper {
		overflow: visible !important;
		.swiper-slide {
			width: 255px;
		}
	}
	.boxes__body {
		padding: 32px 0;
	}
	.boxes__subtitle {
		font-size: 18px;
		margin-bottom: 24px;
	}
	.box-card {
		min-height: 291px;
		padding: 16px;
	}
	.box-card__title {
		font-size: 18px;
		margin-bottom: 12px;
	}
	.box-card__body {
		&::before {
			height: 12px;
			width: 178px;
			margin-inline: auto;
			margin-bottom: 16px;
		}
	}
	.guide__inner {
		flex-direction: column;
		gap: 24px;
	}
	.guild__img-sm {
		border-top-width: 8px;
		border-right-width: 8px;
	}
	.guid__form {
		flex-direction: column;
		gap: 8px;
		align-items: normal;
	}
	.guide__decor {
		max-width: 100%;
	}
}