.quote blockquote::before {
	content: '»';
}

.quote blockquote::after {
	content: '«';
}

.quote {
	margin-bottom: var(--component-gap);
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
	color: var(--black);
}

@media(min-width: 36em) {
	.quote {
		grid-template-columns: auto 1fr;
		gap: 2rem;
	}
}

.quote blockquote {
	font: var(--h3);
}

.quote figcaption {
	margin-top: 1rem;
	font: var(--xl);
}

@media(min-width: 36em) {
	.quote figcaption {
		margin-top: 1.5rem;
	}
}

.quote figcaption strong {
	font: var(--xl-bold);
}

.quote .media {
	margin: 0 auto;
	min-width: 80px;
	max-width: 260px;
	min-height: 3rem;
	position: relative;
}

.quote .media::after {
	position: absolute;
	top: 0;
	right: 0;
	display: inline-block;
	width: 4rem;
	height: 4rem;
	content: '';
	z-index: 2;
	background-image: url(/assets/icons/icon-quote.svg);
	background-size: 54px;
	background-repeat: no-repeat;
}

@media(min-width: 36em) {
	.quote .media::after {
		background-size: 54px;
	}
}

@media(min-width: 46em) {
	.quote .media::after {
		width: 72px;
		height: 72px;
		background-size: 72px;
	}
}

.quote .media img {
	border-radius: 50%;
}

@media(min-width: 36em) {
	.quote .media img {
		max-width: 100%;
	}
}

.quote .media:not(:has(img)) {
	margin: initial;
}

.quote .media:not(:has(img))::after {
	left: 0;
}