styles.css

.review-list {
	display: flex;
	padding-inline: 0;
	gap: 30px;
	overflow-x: auto;
	list-style: none;
}

.review-list li {
	width: 18.4em;
	flex-shrink: 0;
}

.review-list figure {
	display: flex;
	flex-direction: column;
	height: 100%;
	margin: 0;
}

.review-list figcaption {
	margin-block: 10px;
}

.review-list blockquote {
	position: relative;
	flex-grow: 1;
	margin: 0;
	padding-inline: 10px;
	border: 2px solid var(--border-bubble);
	border-radius: 32px;
}

.review-list blockquote::after {
	content: "";
	position: absolute;
	border-top: 10px solid var(--border-bubble);
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	top: 100%;
	left: 20px;
}

.review-list li:not(:hover) blockquote {
	color: var(--color-dim);
}

.review-list blockquote p::before {
	content: "\201C";
}

.review-list blockquote p::after {
	content: "\201D";
}

.review-list mark {
	background: none;
	text-decoration: 2px dotted hsl(300 100% 50%) underline;
	color: var(--color);
}

.review-list time {
	display: block;
	color: var(--color-dim);
}

.faq-list h3 {
	font-weight: normal;
	font-style: italic;
}