/* sauna — фото-фон и две колонки сравнения */

.sauna {
	position: relative;
	overflow: hidden;
	background: #f4efe8;
}

.sauna__media {
	position: absolute;
	inset: 0;
}

.sauna__photo {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 18% 70%;
}

.sauna__photo--mob { display: none; }

.sauna__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0.36) 0%, rgba(255, 255, 255, 0) 68%);
	pointer-events: none;
}

.sauna__layout {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 30px;
}

.sauna__title { max-width: 308px; }

.sauna__scroll-wrap { position: relative; }

.sauna__scroll-wrap::after {
	content: "";
	position: absolute;
	z-index: 2;
	top: 0;
	bottom: 0;
	right: calc(var(--gutter) * -1);
	width: 36px;
	background: linear-gradient(90deg, rgba(251, 250, 247, 0), rgba(251, 250, 247, 0.94));
	pointer-events: none;
}

.sauna__scroll {
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
	margin-right: calc(var(--gutter) * -1);
	padding-right: var(--gutter);
	-webkit-overflow-scrolling: touch;
}

.sauna__scroll::-webkit-scrollbar { display: none; }

.sauna__card {
	display: grid;
	grid-template-columns: 196px 246px;
	width: max-content;
	scroll-snap-align: start;
	padding-bottom: 20px;
	border-radius: 10px;
	overflow: hidden;
	background: linear-gradient(90deg, #faf3ec 0 196px, #f1e3d3 196px);
}

.sauna__col-title {
	margin: 0 0 15px;
	padding: 20px 20px 0;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 18px;
	line-height: 1.32;
	text-transform: uppercase;
	color: var(--c-black);
}

.sauna__cell {
	position: relative;
	display: flex;
	align-items: center;
	gap: 15px;
	min-height: 56px;
	margin-bottom: 30px;
	padding: 0 20px;
}

.sauna__cell--last { margin-bottom: 0; }

.sauna__cell:not(.sauna__cell--last)::after {
	content: "";
	position: absolute;
	right: 20px;
	bottom: -15px;
	left: 20px;
	height: 1px;
	background: rgba(224, 186, 145, 0.5);
}

.sauna__icon {
	display: block;
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
}

.sauna__icon-img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.sauna__text {
	margin: 0;
	font-size: 14px;
	line-height: 1.32;
	color: var(--c-black);
}

.sauna__arrow {
	position: absolute;
	z-index: 2;
	top: 50%;
	right: 0;
	display: grid;
	place-items: center;
	width: 16px;
	height: 16px;
	color: var(--c-orange);
	transform: translate(50%, -50%);
	pointer-events: none;
}

.sauna__arrow-svg { width: 16px; height: 16px; }

@media (min-width: 768px) {
	.sauna__title { max-width: 520px; }

	.sauna__scroll-wrap::after { display: none; }

	.sauna__scroll {
		overflow: visible;
		margin-right: 0;
		padding-right: 0;
	}

	.sauna__card {
		width: min(650px, 100%);
		grid-template-columns: 1fr 1fr;
		background: linear-gradient(90deg, #faf3ec 0 50%, #f1e3d3 50% 100%);
	}
}

@media (min-width: 1200px) {
	.sauna__photo { object-position: 28% 72%; }

	.sauna__layout {
		flex-direction: row;
		align-items: flex-start;
		justify-content: flex-end;
		gap: 10px;
		min-height: 401px;
	}

	.sauna__title {
		flex: 1 1 auto;
		max-width: 640px;
		margin: 0;
	}

	.sauna__scroll-wrap {
		flex: 0 0 650px;
		width: 650px;
	}

	.sauna__card { width: 650px; }

	.sauna__col-title { font-size: 24px; }

	.sauna__icon { width: 56px; height: 56px; }

	.sauna__text { font-size: 18px; }

	.sauna__arrow,
	.sauna__arrow-svg { width: 17px; height: 17px; }
}

@media (max-width: 767px) {
	.sauna__media:has(.sauna__photo--mob) .sauna__photo--desk { display: none; }
	.sauna__photo--mob { display: block; }
}