/* quote */
.quote {
	width: 100%;
	max-width: var(--qt-max-width);
	text-align: center;
	margin: 0 auto;
}

/* medium */
.quote--medium {
	max-width: var(--qt-medium-max-width);
}

/* short */
.quote--short {
	max-width: var(--qt-short-max-width);
}

/* inner */
.quote--inner {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

/* text */
.quote--text {
	position: relative;
	text-wrap: balance;
	font-family: var(--qt-font-family);
	font-size: var(--qt-font-size);
	line-height: var(--qt-line-height);
	font-weight: var(--qt-font-weight);
	font-style: var(--qt-font-style);
	color: var(--qt-font-color);
}

/* text paragraphs */
.quote--text p {
	padding: 0;
	margin: 0;
	font: inherit;
	color: inherit;
}

/* multiple paragraphs */
.quote--text p + p {
	margin-top: 1em;
}

/* larger than 479px */
@media only screen and (min-width: 480px) {

	/* medium */
	.quote--medium .quote--text {
		font-size: calc(var(--qt-font-size) * var(--qt-medium-font-mult));
		line-height: calc(var(--qt-line-height) * var(--qt-medium-line-mult));
	}

	/* short */
	.quote--short .quote--text {
		font-size: calc(var(--qt-font-size) * var(--qt-short-font-mult));
		line-height: calc(var(--qt-line-height) * var(--qt-short-line-mult));
	}

}

/* attribution */
.quote--attribution {
	display: flex;
	flex-direction: column;
	row-gap: 8px;
}

/* author */
.quote--author {
	font-family: var(--brand-font-tag);
	font-size: var(--h2-font-size);
	line-height: var(--h2-line-height);
	font-weight: 400;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--text-color-primary) 70%, transparent);
}

/* meta */
.quote--meta {
	font-family: var(--qt-font-family);
	font-size: var(--large-font-size);
	line-height: var(--large-line-height);
	font-weight: 400;
	text-transform: none;
	color: color-mix(in srgb, var(--text-color-primary) 50%, transparent);
}

/* source */
.quote--source {
	font: inherit;
	color: inherit;
}

/* date */
.quote--date {
	font: inherit;
	color: inherit;
}

/* date following source */
.quote--source + .quote--date::before {
	content: " (";
}

/* date following source */
.quote--source + .quote--date::after {
	content: ")";
}