/**
 * Blog, recommend — one section of the design.
 *
 * What to read next, three across, under the section's own name and the way
 * to the whole list.
 */

.custom-blog-recommend {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 48px;
	width: 100%;
	/* The band runs the full width; what stands in it stops at the 1344 the
	   file draws inside 1440, and centres there. */
	padding: 96px calc( 48px + max( 0px, calc( ( 100% - 1440px ) / 2 ) ) );
	box-sizing: border-box;
}

.custom-blog-recommend__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 48px;
	width: 100%;
}

.custom-blog-recommend__heading {
	margin: 0;
	padding: 0;
	width: 508px;
	max-width: 100%;
	text-transform: uppercase;
}

/* The way to the whole list keeps the round shape the design gives a press. */
.custom-blog-recommend__more {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	padding: 12px 24px;
	border-radius: 24px;
	border: 1px solid currentColor;
	color: inherit;
	text-decoration: none;
	white-space: nowrap;
	transition: opacity 300ms ease-in-out;
	box-sizing: border-box;
}

.custom-blog-recommend__more:hover {
	opacity: 0.7;
}

.custom-blog-recommend__cards {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: 24px;
	width: 100%;
}

@media ( prefers-reduced-motion: reduce ) {
	.custom-blog-recommend__more {
		transition: none;
	}
}

/* Tablet and mobile — the file draws one of them (11186:13228): the name and
   the way to the whole list on one line, the cards one under another 20 in
   from either edge and 38 apart. The client has said the tablet, which the
   file does not draw, keeps the wide tier's three across. */
@media ( max-width: 1024px ) {
	.custom-blog-recommend {
		gap: 38px;
		padding: 38px 16px;
	}

	.custom-blog-recommend__head {
		align-items: flex-end;
		gap: 16px;
	}

	.custom-blog-recommend__heading {
		width: auto;
		max-width: 178px;
	}

	.custom-blog-recommend__more {
		padding: 8px 16px;
	}

	.custom-blog-recommend__cards {
		grid-template-columns: minmax( 0, 1fr );
		gap: 38px;
		padding: 0 4px;
		box-sizing: border-box;
	}
}

@media ( min-width: 768px ) and ( max-width: 1024px ) {
	.custom-blog-recommend__heading {
		max-width: 508px;
	}

	.custom-blog-recommend__cards {
		grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
		gap: 24px;
		padding: 0;
	}
}