.testimonial-single {
	--testimonial-grid-template: 1fr;
	--testimonial-single-radius: var(--radius-4xl);
	--testimonial-transform: calc(var(--padding-xs) * -1);
	/* image */
	--image-size: 256px;
	--max-author-lines: 4;
	--max-text-lines: 6;

	--speech-radius: var(--radius-2xl);
	--speech-tail-rigt: var(--size-6);

	display: grid;
	grid-template-columns: var(--testimonial-grid-template);
	grid-template-rows: auto 0 auto auto;

	background-color: var(--element-bg);
	border-radius: var(--testimonial-single-radius);
	overflow: hidden;

	padding: var(--padding-xs);

	blockquote {
		position: relative;
		background: var(--background-neutral);
		border-radius: var(--speech-radius);
		border: var(--padding-xs) solid var(--background-neutral);
		align-self: end;
		font-size: var(--font-size-medium);
		line-height: var(--lh-large);
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: var(--max-text-lines);
		line-clamp: var(--max-text-lines);
		overflow: hidden;
	}

	.tail {
		position: relative;
		width: 100%;
		z-index: 1;
		svg {
			position: absolute;
			right: var(--speech-tail-rigt, 24px);
			fill: var(--background-neutral);
			transform: scaleX(-1);
		}
	}

	img {
		margin-top: calc(var(--padding-xs) * -1);
		width: var(--image-size);
		height: var(--image-size);
	}

	figcaption {
		margin-top: var(--padding-xs);
		align-self: end;

		span {
			color: var(--element-text);
			display: -webkit-box !important;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: var(--max-author-lines);
			line-clamp: var(--max-author-lines);
			overflow: hidden;
			text-align: right;
		}
	}

	@media (min-width: 768px) {
		--testimonial-grid-template: 1fr var(--image-size);
		--max-author-lines: 2;

		--testimonial-transform: calc(var(--padding-md) * -1);
		/* image */
		--image-size: 262px;

		padding-left: var(--padding-md);
		padding-right: 0;

		grid-template-rows: 1fr var(--size-8) auto;

		.tail {
			grid-column: 1;
			grid-row: 2;

			svg {
				transform-origin: top;
				transform: scale(1, 0.75);
			}
		}

		img {
			grid-column: 2;
			grid-row: 1 / -1;

			margin-top: calc(var(--padding-xs) * -1);
			margin-bottom: calc(var(--padding-xs) * -1);
		}
		blockquote {
			margin-right: var(--testimonial-transform);
		}
		figcaption {
			grid-column: 1;
			grid-row: 3;
			margin: 0;
			padding-right: var(--padding-md);
			padding-left: var(--padding-md);
		}
	}

	@media (min-width: 1280px) {
		grid-template-columns: 1fr var(--image-size);
		--max-text-lines: 5;
	}
}