/*********
ACREO - 3 Spalten & 2 Spalten
*********/
.content-block-center {
    width: 100%;
	max-width: 1300px;
	margin-left: auto;
	margin-right: auto;
}

.grid-4 {
	display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 3rem;
}

.grid-3 {
	display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 3rem;
    row-gap: 3rem;
}

.grid-2 {
	display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 3rem;
}

.grid-2-1 {
    display: grid;
    grid-template-columns: 2fr minmax(0, 1fr);
    column-gap: 3rem;
}

.grid-1-2 {
    display: grid;
    grid-template-columns: 1fr 2fr;
    column-gap: 3rem;
}

.zweier {
    grid-column: 1 / 3;
}

.dreier {
    grid-column: 1 / 4;
}

.ganze-breite {
    grid-column: 1 / end;
}


@media 
only screen and (min-width : 800px) and (max-width : 1200px) {
    .grid-4, .grid-3, .grid-2, .grid-2-1, .grid-1-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    
/*
    .grid-2-1, .grid-1-2 {
        grid-template-columns: 1fr;
    }
*/
    
    .tablet-zweier {
        grid-column: 1 / 3;
    }
    
    .dreier {
        grid-column: 1 / 3;
    }
}

@media 
only screen and (max-width : 799.9px) {
    .grid-4, .grid-3, .grid-2, .grid-2-1, .grid-1-2 {
        grid-template-columns: 100%;
        column-gap: 2rem;
        row-gap: 2rem;
    }
    
    .zweier, .dreier, .ganze-breite {
        grid-column: auto;
    }
	
	.cta .grid-2,
	.cta-portrait .grid-1-2 {
		row-gap: 0rem;
	}
	
	.dienstleistungen .grid-3 {
		row-gap: 0rem;
	}
}