/*
 * TPF — Case Study Related Work
 * "View more of our work" — heading + grid of card links.
 */

.tpf-csrw {
	background-color: #e9ecf1;
	color: #293c7b;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	margin-bottom: 0;
	padding: 4rem 0;
	font-family: proxima-nova, "Proxima Nova", -apple-system, BlinkMacSystemFont, sans-serif;
}

.tpf-csrw__inner {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 1.5rem;
}

.tpf-csrw__heading {
	font-size: 26px;
	line-height: 32px;
	font-weight: 700;
	color: #293c7b;
	margin: 0 0 32px;
	padding: 0;
}

.tpf-csrw__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 32px;
}

.tpf-csrw__grid[data-count="1"] { grid-template-columns: 1fr; }
.tpf-csrw__grid[data-count="3"] { grid-template-columns: repeat(3, 1fr); }
.tpf-csrw__grid[data-count="4"] { grid-template-columns: repeat(4, 1fr); }
.tpf-csrw__grid[data-count="5"],
.tpf-csrw__grid[data-count="6"] { grid-template-columns: repeat(3, 1fr); }

.tpf-csrw__card {
	display: block;
	color: #293c7b;
	text-decoration: none;
}

.tpf-csrw__card-media {
	width: 100%;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background-color: #1a2750;
}

.tpf-csrw__card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.tpf-csrw__card-title {
	font-size: 18px;
	line-height: 24px;
	font-weight: 700;
	color: #293c7b;
	margin: 18px 0 0;
	padding: 0;
}

.tpf-csrw__card-subtitle {
	font-size: 16px;
	line-height: 22px;
	font-weight: 400;
	color: #7C7C7C;
	margin: 6px 0 0;
	padding: 0;
}

@media (max-width: 1024px) {
	.tpf-csrw { padding: 3rem 0; }
	.tpf-csrw__heading { font-size: 22px; line-height: 28px; margin-bottom: 24px; }
	.tpf-csrw__grid,
	.tpf-csrw__grid[data-count="3"],
	.tpf-csrw__grid[data-count="4"],
	.tpf-csrw__grid[data-count="5"],
	.tpf-csrw__grid[data-count="6"] {
		grid-template-columns: repeat(2, 1fr);
		gap: 24px;
	}
}

@media (max-width: 600px) {
	.tpf-csrw { padding: 2rem 0; }
	.tpf-csrw__heading { font-size: 20px; line-height: 26px; }
	.tpf-csrw__grid,
	.tpf-csrw__grid[data-count="2"],
	.tpf-csrw__grid[data-count="3"],
	.tpf-csrw__grid[data-count="4"],
	.tpf-csrw__grid[data-count="5"],
	.tpf-csrw__grid[data-count="6"] {
		grid-template-columns: 1fr;
		gap: 20px;
	}
}