/**
 * grid.css
 *
 * Custom grid styles as needed
 *
**/

@media screen and (min-width: 400px) {

}

@media screen and (min-width: 768px) {

	.grid-2-inline {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-gap: 40px;
	}

}

@media screen and (min-width: 865px) {

	[class*="grid-"] {
		display: grid;
	}

	.grid-introblok {
		grid-template-columns: 49% 50%;
		grid-gap: 1%;
		padding-right: 0;
	}

	.home .grid-introblok {
		grid-template-columns: 58.71% 41.29%;
		grid-gap: 0;
	}

	.grid-2 {
		align-items: stretch;
		grid-template-columns: minmax(45%, 1fr) minmax(45%, 1fr);
		grid-gap: 40px;
	}

	.grid-2-leftFull {
		align-items: stretch;
		grid-template-columns: 50% 50%;
		padding: 5px 0;
	}

	.grid-2-rightFull {
		align-items: stretch;
		grid-template-columns: 50% 50%;
		padding: 5px 0;
	}

	.grid-3 {
		align-items: stretch;
		grid-template-columns: 1fr 1fr 1fr;
		grid-gap: 1%;
	}

	.grid-3 img {
		max-width: 100%;
	}

	.grid-introblok > div:first-child,
	.grid-3,
	.grid-2.l-container > div:first-child {
		padding-left: 30px;
	}

	.grid-3,
	.grid-2.l-container > div:last-child {
		padding-right: 30px;
	}

	.grid-2.l-container-leftFull > div:first-child {
		padding-left: 0;
	}

	.grid-2.l-container-rightFull > div:last-child {
		padding-right: 0;
	}

}

@media screen and (min-width: 1024px) {

	.grid-3 {
		grid-gap: 40px;
	}

}

@media screen and (min-width: 1400px) {

    .grid-introblok > div:first-child,
	.grid-3,
	.grid-2.l-container > div:first-child {
		padding-left: 104px;
	}

	.grid-2.l-container-leftFull > div:first-child {
		padding-left: 0;
	}

	.grid-3,
	.grid-2.l-container > div:last-child {
		padding-right: 104px;
	}


	.grid-2.l-container-rightFull > div:last-child {
        padding-right: 0;
    }

}