/* How we work process grid: 1–5 items = one row; 6+ = 3 columns, new row aligns to column 1. */

.approach .process.process--cols-1 {
	grid-template-columns: 1fr;
}

.approach .process.process--cols-2 {
	grid-template-columns: repeat(2, 1fr);
}

.approach .process.process--cols-3 {
	grid-template-columns: repeat(3, 1fr);
}

.approach .process.process--cols-4 {
	grid-template-columns: repeat(4, 1fr);
}

.approach .process.process--cols-5 {
	grid-template-columns: repeat(5, 1fr);
}

.approach .process article,
.approach .process article + article {
	padding-left: 34px;
	padding-right: 34px;
	border-right: 1px solid var(--line);
}

.approach .process--cols-1 article,
.approach .process--cols-2 article:nth-child(2n + 1),
.approach .process--cols-3 article:nth-child(3n + 1),
.approach .process--cols-4 article:nth-child(4n + 1),
.approach .process--cols-5 article:nth-child(5n + 1) {
	padding-left: 0;
}

.approach .process--cols-2 article:nth-child(2n),
.approach .process--cols-3 article:nth-child(3n),
.approach .process--cols-4 article:nth-child(4n),
.approach .process--cols-5 article:nth-child(5n),
.approach .process article:last-child {
	border-right: 0;
	padding-right: 0;
}

.approach .process--cols-3 article:nth-child(n + 4) {
	border-top: 1px solid var(--line);
}

@media (width <= 700px) {
	.approach .process[class*="process--cols-"] {
		grid-template-columns: 1fr;
	}

	.approach .process article,
	.approach .process article + article {
		border-right: 0;
		border-top: 0;
		border-bottom: 1px solid var(--line);
		padding: 26px 4px;
	}

	.approach .process article:last-child {
		border-bottom: 0;
	}
}