.supt-section-testimonial {
	@mixin clamp padding-top, $spacing-16, $spacing-32, $breakpoint-xs, $breakpoint-xl;
	@mixin clamp padding-bottom, $spacing-8, $spacing-16, $breakpoint-xs, $breakpoint-xl;
	background-color: $color-grey-background;

	&__title {
		@extend %t-h2;
		margin-bottom: $spacing-4;
	}
	&__introduction {
		@extend %t-body-s;
		color: $color-grey-5;
	}

	&__icon {
		@mixin clamp width, 24px, 32px, $breakpoint-xs, $breakpoint-xl;
		height: auto;
		display: block;
	}

	&__testimonial {
		display: flex;
		flex-direction: column;
		gap: $spacing-8;

		margin-top: $spacing-10;
		padding-inline: $spacing-6;

		@media (min-width: $breakpoint-md) {
			margin-top: 0;
			padding-inline: 0;
			gap: $spacing-10;
		}
	}

	&__quote__text {
		@extend %t-body-sm;
		font-weight: $font-weight-medium;
	}

	&__cite {
		display: flex;
		align-items: center;
		gap: $spacing-3-5;
		@media (min-width: $breakpoint-md) {
			gap: $spacing-4;
		}

		&__image {
			width: 40px;
			height: 40px;
			border-radius: 50%;

			@media (min-width: $breakpoint-md) {
				width: 44px;
				height: 44px;
			}
		}

		&__text {
			@extend %t-body-s;
			display: flex;
			flex-direction: column;
		}
		&__name {
			font-weight: $font-weight-medium;
		}
		&__role {
			color: $color-grey-5;
		}
	}
}