.c-pull-quote {
	background: var(--pq-section-bg);
}

.c-pull-quote__inner {
	max-width: calc(var(--width-narrow) + var(--gutter) * 2);
	padding-block: var(--block-spacing-top, var(--spacing-xl)) var(--block-spacing-bottom, var(--spacing-xl));
}

.c-pull-quote__card {
	margin: 0;
	color: var(--color-navy);
}

.c-pull-quote__card--on-dark {
	color: var(--color-white);
}

.c-pull-quote__content {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-md);
	padding: var(--spacing-lg);
	background: var(--pq-bg);
}

.c-pull-quote__quote {
	margin: 0;
}

.c-pull-quote__quote p {
	margin: 0;
	color: inherit;
	text-wrap: pretty;
}

.c-pull-quote__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-md);
}

.c-pull-quote__attribution {
	color: inherit;
}

.c-pull-quote__illustration {
	flex-shrink: 0;
	width: 64px;
	height: 64px;
	margin-block: calc(var(--spacing-md) * -1);
	margin-left: auto;
}

.c-pull-quote__illustration svg,
.c-pull-quote__illustration img {
	display: block;
	width: 100%;
	height: 100%;

	object-fit: contain;
}

.c-pull-quote__edge {
	display: block;
	line-height: 0;
	color: var(--pq-bg);
}

.c-pull-quote__edge svg {
	display: block;
	width: 100%;
	height: 20px;
	fill: currentColor;
	transform: scaleY(-1) translateY(1px);
}

@media (width < 768px) {
	.c-pull-quote__illustration {
		width: 48px;
		height: 48px;
		margin-block: calc(var(--spacing-sm) * -1);
	}
}