.projects__header {
	background: var(--dark-blue);
	padding: 0 0 60px 60px; 
}
.projects__h-preview {
	width: 100%;
}
.projects__h-title > h2 {
	font-family: DIN, sans-serif; font-size: 28px; line-height: 1.5; font-weight: 500;
	color: #fff;
}
.projects__h-title > h2 > span {
	display: block; padding-top: 20px;
	line-height: 1;
	background: var(--brand-red);
}
.projects__h-title > p {
	padding-top: 24px;
	font-size: 20px; line-height: 1.25;
	color: #fff;
}

.projects__list {
	padding: 40px 16px;
	display: grid; grid-template-columns: 1fr; grid-gap: 20px;
}
.projects__item {
	display: block;
	border: 1px solid #E5E7EA; border-radius: 4px;
}
.projects__item > img {
	width: 100%; aspect-ratio: 3/2;
	object-fit: cover;
}
.projects__item-title {
	display: flex; justify-content: space-between; align-items: center;
	padding: 20px;
}
.projects__item-title > h3 {
	font-size: 20px; line-height: 24px; font-weight: 500;
	color: #212529;
}
.projects__item-title > h3 > span {
	display: block; font-size: 16px; line-height: 1; font-weight: 500;
	color: #8F959B;
}
.projects__item-title > i {
	font-size: 24px; line-height: 1; color: #0099E0;
}
.projects__view-all {
	display: flex; flex-direction: column; justify-content: center;
	padding: 40px 20px; background: var(--brand-blue);
	border-radius: 4px;
}
.projects__view-all > p {
	font-size: 18px; line-height: 24px;
	color: #fff;
}
.projects__view-all > a {
	display: block; margin: 20px 0 0 0; padding: 16px;
	font-size: 16px; line-height: 20px;
	text-align: center; color: #fff;
	background: var(--brand-red);
	border-radius: 4px;
}


@media (min-width: 768px) {
	.projects__header {
		display: flex; justify-content: flex-end; align-items: center;
		padding: 0;
		background: url('images/pattern-klassik.svg') left 24px center no-repeat var(--dark-blue);
		background-size: auto 80%;
	}
	.projects__h-preview {
		order: 2; width: 40%; margin-left: 24px;
	}
	.projects__h-title {
		order: 1;
	}
	.projects__h-title > h2 {
		font-size: 40px; line-height: 1.25;
	}
	.projects__h-title > h2 > span {
		padding-top: 10px;
	}
	.projects__list {
		grid-template-columns: 1fr 1fr;
	}
}

@media (min-width: 1280px) {
	.projects__container {
		max-width: 1920px; margin: 0 auto;
	}
	.projects__header {
		background-position: left 32px center;
		background-size: auto 60%;
	}
	.projects__h-preview {
		margin-left: 32px;
	}
	.projects__h-title > h2 {
		font-size: 60px; line-height: 1.25;
	}
	.projects__h-title > h2 > span {
		padding-top: 20px;
	}
	.projects__h-title > p {
		padding-top: 32px;
		font-size: 24px;
	}
	.projects__list {
		padding: 40px 32px;
		grid-template-columns: 1fr 1fr 1fr 1fr;
	}
}