/**
 * Section: Relevant insights (layout "relevant_insights").
 *
 * Figma: section/relevant insights 1613:49751 — header/XL title, 24px, then
 * three 391px card/blogpost 23.5px apart, and the 284px "See More" 56px under
 * the row. Mobile 1399:32693: header/L title, 272px cards in a row that
 * scrolls off the right edge, the button as wide as its label.
 */

.insights-section__inner {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	align-items: center;
}

.insights-section__title {
	align-self: stretch;
	font: var(--type-header-l);
	color: var(--color-text-dark);
}

/* Mobile: one scrolling row that bleeds into the gutter, like the project
 * cards. Desktop: three columns, no scrolling. */
.insights-section__row {
	display: flex;
	gap: 1rem;
	align-self: stretch;
	padding: 0 var(--gutter-mobile);
	margin: 0 calc(-1 * var(--gutter-mobile));
	overflow-x: auto;
	list-style: none;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.insights-section__row::-webkit-scrollbar {
	display: none;
}

.insights-section__item {
	flex: 0 0 auto;
	scroll-snap-align: start;
}

.insights-section__more {
	max-width: 100%;
}

@media (min-width: 64rem) {
	.insights-section__title {
		font: var(--type-header-xl);
	}

	.insights-section__row {
		gap: 1.46875rem; /* 23.5 */
		padding: 0;
		margin: 0;
		overflow: visible;
	}

	.insights-section__more {
		width: 17.75rem; /* 284 */
		margin-top: 2rem; /* 56 from the row, less the 24 column gap */
	}
}