.quote-band {
	background: var(--sk-gray-light) var(--sk-angle-wash) center center / cover no-repeat;
}

.quote-band__grid {
	display: grid;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;

	@media (min-width: 62rem) {
		grid-template-columns: minmax(0, 0.52fr) minmax(0, 1.48fr);
	}
}

.quote-band__media {
	max-width: 22rem;
	border-top: 5px solid var(--sk-support);

	img,
	.media-placeholder {
		width: 100%;
		aspect-ratio: 4 / 5;
		min-height: 0;
		object-fit: cover;
	}
}

.quote-band__quote {
	margin: 0;
	max-width: 48ch;
	font-family: var(--sk-font-body);
	font-size: 1.125rem;

	@media (min-width: 62rem) {
		font-size: 1.6875rem;
	}
	font-style: italic;
	line-height: 1.5;

	p {
		margin: 0;
	}

	p::before {
		content: "\201C";
	}

	p::after {
		content: "\201D";
	}
}

.quote-band__attribution {
	display: flex;
	gap: 0.75rem;
	align-items: flex-start;
	margin-top: 1.5rem;
	font-size: 0.8125rem;
	font-style: normal;

	&::before {
		flex: none;
		width: 1.5rem;
		height: 2px;
		margin-top: 0.55em;
		background: var(--sk-accent);
		content: "";
	}
}

.quote-band__byline {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
}

.quote-band__cite {
	font-style: normal;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.quote-band__role {
	color: var(--sk-gray);
}