.customer-reviews-section {
	display: flex;
	flex-flow: column;
	padding: 64px 16px;
	background-color: $color-black-100;
	overflow: hidden;

	@include tablet {
		padding: 40px 16px;
	}

	@include mobile {
		padding: 32px 16px;
	}
}

.customer-reviews-section__main {
	display: flex;
	flex-flow: column;
	align-self: center;
	gap: calc(32px * 2);
	width: 100%;
	max-width: 1088px;

	@include tablet {
		gap: 32px;
		max-width: 640px;
	}

	@include mobile {
		gap: 16px;
		max-width: 328px;
	}
}

.customer-reviews-section__head {
	display: flex;
	flex-flow: column;
	align-self: center;
	gap: 8px;
	text-align: center;
	max-width: 640px;

	@include tablet {
		gap: 4px;
		max-width: 480px;
	}

	@include mobile {
		max-width: 328px;
	}
}

.customer-reviews-section__head__title {
	font-family: $font-title;
	font-size: 42px;
	line-height: 46px;
	letter-spacing: 0.02em;

	@include tablet {
		font-size: 32px;
		line-height: 36px;
	}

	@include mobile {
		font-size: 24px;
		line-height: 28px;
	}
}

.customer-reviews-section__head__desc {
	font-size: 18px;
	font-weight: 300;
	line-height: 28px;

	@include tablet {
		font-size: 15px;
		line-height: 21px;
	}

	@include mobile {
		font-size: 13px;
		line-height: 19px;
	}
}

.customer-reviews-section__slider {
	position: relative;

	@include mobile {
		width: 100%;
		max-width: 264px;
		align-self: center;
	}

	.swiper-slide {
		$self: &;

		.customer-review-item {
			transition: opacity 0.3s ease;
		}

		&:not(#{$self}-active) {
			.customer-review-item {
				opacity: 0.56;
			}
		}
	}
}