.recommended {
	padding-block: clamp(1rem, 15vw, 3rem);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.recommended > h2.section-title {
	color: var(--text-color);
	font-family: var(--heading-font);

	padding: clamp(20px, 0.02vw, 50px);
}

.recommended > section {
	display: flex;
	width: 100%;
	padding: 1% 3% 0 3%;
}

.recommended > section > .column {
	flex: 1;
}

.recommended > section > .column > div {
	padding: clamp(.5rem, 2vw, 1.5rem);
	min-width: 270px;
}

.recommended > section > .column > div > h4.name {
	color: var(--text-color);
	font-family: var(--heading-font);

	position: relative;
	padding-left: 0.9rem;
}

.recommended > section > .column > div > h4.name::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.15rem;
	bottom: 0.15rem;
	width: 3px;
	border-radius: 2px;
	background: var(--spine-gold);
}

.recommended > section > .column > div > p.quote {
	color: var(--muted-color);
	font-family: var(--body-font);
}

@media (max-width: 600px) {
	.recommended > section {
		flex-wrap: wrap;
	}

	.recommended > section > .column > div > p.quote {
		font-size: .9rem;
	}
}