/* Allgemeine Styles */

.grid-item{
	margin-block-start: 32px;
	margin-block-end: 0px;
}
.grid-item img{
	width: 100%;
	height: auto;
	margin-block-end: 16px;
}

.zweiSpaltig {
	-webkit-column-count: 2; /* Chrome, Safari, Opera */
	-moz-column-count: 2; /* Firefox */
	column-count: 2;
}

.dreiSpaltig {
	-webkit-column-count: 3; /* Chrome, Safari, Opera */
	-moz-column-count: 3; /* Firefox */
	column-count: 3;
}

.zweiSpaltig,
.dreiSpaltig {
	-webkit-column-gap: 16px;
	-moz-column-gap: 16px;
	column-gap: 16px;
	-moz-hyphens: auto;
	-o-hyphens: auto;
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
	hyphenate-limit-chars: auto 5;
	orphans: 2;
	widows: 2;
}



/* Grid-Container */
.grid-container {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 16px;
	width: 100%;
	max-width: 1200px;
	padding: 16px;
	box-sizing: border-box;
}

/* Grid-Item */
.grid-item {
	padding: 8px;
}


/* Zusammengefasste Spalten */
.span-2 {
	grid-column: span 2;
}
.span-4 {
	grid-column: span 4;
}
.span-6 {
	grid-column: span 6;
}

/* Einzug */

 .mitte-4-spalten{
	 grid-column-start: 2;
	 grid-column-end: 6;
 }
 .start-2{
 	grid-column-start: 2;
 }





/* Responsive Design */
@media (max-width: 1200px) {
	.grid-container {
		grid-template-columns: repeat(4, 1fr);
	}

	.span-2 {
		grid-column: span 2;
	}
}

@media (max-width: 992px) {
	.grid-container {
		grid-template-columns: repeat(3, 1fr);
	}

	.span-2 {
		grid-column: span 3;
	}
	.zweiSpaltig,
	.dreiSpaltig {
		-webkit-column-count: 1; /* Chrome, Safari, Opera */
		-moz-column-count: 1; /* Firefox */
		column-count: 1;
	}
}

@media (max-width: 768px) {
	.grid-container {
		grid-template-columns: repeat(2, 1fr);
	}

	.span-2 {
		grid-column: span 2;
	}
	.zweiSpaltig,
	.dreiSpaltig {
		-webkit-column-count: 1; /* Chrome, Safari, Opera */
		-moz-column-count: 1; /* Firefox */
		column-count: 1;
	}
	
	
}

@media (max-width: 576px) {
	.grid-container {
		grid-template-columns: 1fr;
	}

	.span-2 {
		grid-column: span 1;
	}
	.zweiSpaltig,
	.dreiSpaltig {
		-webkit-column-count: 1; /* Chrome, Safari, Opera */
		-moz-column-count: 1; /* Firefox */
		column-count: 1;
	}
}