.pull-quote {
	--top-padding: var(--space-5);
	--side-padding: var(--space-8);
	--quote-color: var(--secondary-color-400);
	--author-color: var(--gray-600);

	position: relative;
	padding: 0 var(--space-5);
	margin-bottom: var(--space-10);
}

.pull-quote .inner {
	position: relative;
	width: 100%;
	max-width: calc(var(--width-base) - 200px);
	margin: 0 auto;
	padding: var(--top-padding) var(--side-padding);
}

.pull-quote .inner::before {
	position: absolute;
	top: calc(var(--top-padding) / 2);
	left: calc(var(--side-padding) / 2);
	z-index: 1;
	display: block;
	font-family: var(--fa-6-family, 'Font Awesome 5 Free');
	font-weight: 900;
	font-size: var(--text-5xl);
	content: "\f10d";
	color: var(--quote-color);
	line-height: var(--leading-none);
	pointer-events: none;
}

.pull-quote .quote {
	position: relative;
	z-index: 2;
	font-size: var(--text-xl);
	font-style: italic;
	line-height: var(--leading-normal);
	text-indent: 2em;
}

.pull-quote .author {
	margin-top: var(--space-4);
	color: var(--author-color);
	font-size: var(--text-sm);
}

@media (min-width: 40em) {
	.pull-quote .inner {
		width: calc(100% - 200px);
	}
}

@media (min-width: 64em) {
	.pull-quote {
		--top-padding: var(--space-10);
		--side-padding: var(--space-16);

		margin-bottom: var(--space-20);
	}

	.pull-quote .inner::before {
		top: var(--space-2);
		font-size: var(--text-6xl);
	}

	.pull-quote .quote {
		font-size: var(--text-2xl);
		text-indent: 2em;
	}

	.pull-quote .author {
		margin-top: var(--space-6);
		font-size: var(--text-base);
	}
}