$c-quote-gap: space(3);


.c-quote {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	margin-top: -$c-quote-gap;
	max-width: 528px;
}


.c-quote__image {
	margin-top: $c-quote-gap;
	margin-right: $c-quote-gap;
	border-radius: 100%;
	min-width: 50px;
	max-width: 120px;
	width: 10vw;
	background-color: palette(neutral, 300);
}


.c-quote__content {
	@include hyphenate;
	flex-grow: 999;
	flex-basis: 0;
	min-width: column(3,5);
	margin: $c-quote-gap 0 0 0; // reset blockquote
}


.c-quote__text {
	@include font-size(l);
	@include font-weight(medium);
	color: palette(neutral, 800);
	quotes: "‘" "’";

	&::before {
		content: open-quote;
	}
	&::after {
		content: close-quote;
	}
}


.c-quote__cite {
	margin-top: space(2);
	display: inline-flex;
	flex-direction: column;
	font-style: normal;
}


.c-quote__name {
	//@include font-size(base);
	//@include font-weight(regular);
	color: palette(neutral, 700);
}

.c-quote__function {
	@include font-size(s);
	@include font-weight(regular);
	color: palette(neutral, 400);
}


.c-quote--on-dark {
	.c-quote__text,
	.c-quote__name {
		color: palette(neutral, 0);
	}
	.c-quote__function {
		color: palette(neutral, 300);
	}
}