.expert-opinion-section {
	position: relative;
	display: flex;
	flex-flow: column;
	padding: 0 16px;

	&::before {
		content: '';
		position: absolute;
		left: 0;
		right: 0;
		top: calc(210px + 145px);
		bottom: 0;
		background-color: $color-black-100;
		z-index: -1;

		@include tablet {
			top: calc(198px + 129px);
		}
	}

	@include tablet {
		padding-bottom: 40px;
	}

	@include mobile {
		padding-bottom: 32px;

		&::before {
			display: none;
		}
	}
}

.expert-opinion-section__head {
	margin: 64px 0;

	@include tablet {
		margin: 40px 0;
	}

	@include mobile {
		margin: 32px 0 16px;
	}
}

.expert-opinion-section__slider {
	position: relative;
	align-self: center;
	width: 100%;
	max-width: 1088px;

	@include desktop {
		.slider-nav-btn {
			top: calc(145px - (48px / 2));
			transform: none;
		}
	}

	@include tablet {
		max-width: 640px;

		.swiper-slider {
			overflow: hidden;
		}

		.slider-nav-btn {
			top: calc(129px - (40px / 2));
			transform: none;
		}
	}

	@include mobile {
		max-width: 264px;

		.slider-nav-btn {
			top: 50%;
			transform: translateY(-50%);
		}
	}
}

.expert-opinion-section__slide {
	display: flex !important;
	flex-flow: column;
	border-radius: 4px;
	background-color: white;
	border: 1px solid $color-black-200;
	box-sizing: border-box;

	@include desktop {
		transition: opacity 0.3s ease;

		&:not(.swiper-slide-active) {
			opacity: 0.56;
		}
	}
}

.expert-opinion-section__slide__head {
	display: flex;
	flex-flow: column;
	justify-content: center;
	height: 144px;
	background-color: $color-black-100;

	@include tablet {
		height: 128px;
		padding: 0 32px;
	}

	@include mobile {
		height: unset;
		padding: 16px 16px 0;
		background-color: transparent;
	}
}

.expert-opinion-section__slide__head-main {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	align-self: center;
	gap: 16px;
	width: 100%;
	max-width: 768px;

	@include mobile {
		flex-flow: column;
		gap: 11px;
	}
}

.expert-opinion-section__slide__head-avatar {
	width: 112px;
	height: 112px;
	border-radius: 50%;
	object-fit: cover;
	object-position: center;
	pointer-events: none;

	@include tablet {
		width: 96px;
		height: 96px;
	}
}

.expert-opinion-section__slide__head-container {
	display: flex;
	flex-flow: column;
	align-items: flex-start;

	@include mobile {
		align-items: center;
		text-align: center;
	}
}

.expert-opinion-section__slide__head-name {
	font-size: 18px;
	line-height: 24px;
	letter-spacing: 0.02em;

	@include tablet {
		font-size: 16px;
		line-height: 22px;
	}
}

.expert-opinion-section__slide__head-text {
	margin-top: 2px;
	font-size: 15px;
	font-weight: 300;
	line-height: 17px;
	letter-spacing: 0.02em;

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

	a {
		text-decoration: underline;
		text-decoration-thickness: 1px;

		@include desktop {
			&:hover {
				text-decoration: none;
			}
		}
	}
}

.expert-opinion-section__slide__head-btn {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	gap: 3px;
	height: 32px;
	margin-top: 12px;
	padding: 4px 16px 4px 9px;
	border-radius: 24px;
	background-color: white;
	box-sizing: border-box;

	svg {
		width: 24px;
		height: 24px;
	}

	span {
		font-size: 13px;
		line-height: 13px;
		color: $color-black-300;
	}

	@include mobile {
		height: 36px;
		margin-top: 11px;
		background-color: $color-black-100;
	}
}

.expert-opinion-section__slide__content {
	display: flex;
	flex-flow: column;
	padding: 24px 0;

	@include tablet {
		padding: 24px 32px;
	}

	@include mobile {
		padding: 0 16px 16px;

		&::before {
			content: '';
			width: 64px;
			height: 3px;
			margin: 12px 0;
			background-color: $color-green-400;
			align-self: center;
		}
	}
}

.expert-opinion-section__slide__blockquote {
	position: relative;
	display: flex;
	flex-flow: column;
	align-self: center;
	gap: 24px;
	font-size: 16px;
	font-weight: 300;
	line-height: 24px;
	letter-spacing: 0.02em;
	padding-left: calc(24px + 16px);
	box-sizing: border-box;

	@include desktop {
		width: 100%;
		max-width: 768px;
	}

	@include tablet {
		padding-left: calc(17px + 8px);
		font-size: 14px;
		line-height: 21px;
	}

	@include mobile {
		font-size: 13px;
		line-height: 18px;
		text-align: center;
		padding-left: 0;
	}
}

.expert-opinion-section__slide__blockquote__icon {
	position: absolute;
	left: 0;
	width: 24px;
	height: 22px;
	color: $color-green-400;

	@include tablet {
		width: 17px;
		height: 16px;
		margin-top: 4px;
	}

	@include mobile {
		display: none;
	}
}