.customer-review-item {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	gap: 32px;
	padding: 32px 160px;
	border-radius: 4px;
	background-color: white;

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

	@include mobile {
		flex-flow: column;
		gap: 0;
		padding: 16px;
	}
}

.customer-review-item__customer {
	display: flex;
	flex-flow: column;
	align-items: center;

	@include desktop {
		margin-top: calc(-32px * 2);
	}

	@include tablet {
		flex: 0 0 150px;
	}

	&-avatar {
		width: 192px;
		aspect-ratio: 2 / 2;
		border-radius: 50%;
		background-color: #fee8c2;
		object-fit: cover;
		object-position: center;
		pointer-events: none;

		@include tablet {
			width: 96px;
		}
	}

	&-name {
		margin-top: 16px;
		font-size: 18px;
		line-height: 24px;
		text-align: center;
		letter-spacing: 0.02em;

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

	&-label {
		margin-top: 2px;
		font-size: 15px;
		font-weight: 300;
		line-height: 17px;
		text-align: center;
		letter-spacing: 0.02em;

		@include tablet {
			margin-top: 0;
			font-size: 15px;
			line-height: 17px;
		}
	}

	&-btn {
		display: flex;
		flex-flow: row nowrap;
		align-items: center;
		gap: 3px;
		margin-top: 16px;
		padding: 6px 16px 6px 9px;
		min-height: 36px;
		text-align: left;
		border-radius: 24px;
		background-color: $color-black-100;
		box-sizing: border-box;

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

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

		@include tablet {
			margin-top: 10px;
		}
	}
}

.customer-review-item__blockquote {
	display: flex;
	flex-flow: row nowrap;
	gap: 12px;
	font-size: 16px;
	font-weight: 300;
	line-height: 24px;
	letter-spacing: 0.02em;

	&::before {
		content: '';
		width: 24px;
		min-width: 24px;
		height: 22px;
		background-size: contain;
		background-repeat: no-repeat;
		background-image: url("data:image/svg+xml,%3Csvg width='24' height='22' viewBox='0 0 24 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M24 11.3657V10.6343C23.703 10.3093 22.7624 9.35457 21.1782 7.77008L17.7921 4.41828L13.6634 0.0609418L13.3069 0L12.2079 0.792244L12.1485 1.12742C15.8713 6.10434 18.1683 9.3952 19.0396 11C18.5446 11.8329 17.5545 13.3259 16.0693 15.4792C14.5644 17.6325 13.2574 19.4303 12.1485 20.8726L12.2079 21.2078L13.3069 22L13.6634 21.9391C16.3762 19.0748 18.8515 16.5254 21.0891 14.2909L24 11.3657ZM11.8218 11.3657V10.6343C11.5248 10.3093 10.5842 9.35457 9 7.77008L5.64356 4.41828L1.48515 0.0609418L1.12871 0L0.0297031 0.792244L0 1.12742C3.70297 6.10434 5.9901 9.3952 6.86139 11C6.38614 11.8329 5.39604 13.3259 3.89109 15.4792C2.38614 17.6325 1.08911 19.4303 0 20.8726L0.0297031 21.2078L1.12871 22L1.48515 21.9391C4.21782 19.0748 6.70297 16.5254 8.94059 14.2909L11.8218 11.3657Z' fill='%23A1C74F'/%3E%3C/svg%3E");
	}

	@include tablet {
		gap: 8px;
		font-size: 14px;
		line-height: 21px;

		&::before {
			position: absolute;
			width: 17px;
			min-width: 17px;
			height: 16px;
			margin-left: calc(-17px - 8px);
		}
	}

	@include mobile {
		flex-flow: column;
		align-items: center;
		gap: 0;
		text-align: center;
		font-size: 13px;
		line-height: 18px;

		&::before {
			position: unset;
			width: 64px;
			height: 3px;
			background-size: unset;
			background-repeat: unset;
			background-image: unset;
			background-color: $color-green-400;
			margin: 12px 0;
		}
	}
}