/**
 * @author alisch berlec hönow <info@abh.eu>
 * @version 7.2
 *
 * Mdj Component: Logo Stack
 */

.logo-stack {
	--logo-count: 2;
	/*--logo-size: calc( ( var( --100vw, 100vw ) - ( var( --h-sp ) * 3 ) - ( var( --logo-h-sp ) * var( --logo-count ) ) ) / var( --logo-count ) );*/
	--logo-size: calc( ( var( --content-width ) - ( var( --h-sp ) * ( var( --logo-count ) * 0.5 + 1 ) ) - ( var( --logo-h-sp ) * var( --logo-count ) ) ) / var( --logo-count ) );
 
	--logo-v-sp: calc( var( --h-sp ) * 0.5 );
	--logo-h-sp: calc( var( --h-sp ) * 0.5 );

	overflow: hidden;
}

.is-dark-mode .logo-stack {
	mix-blend-mode: lighten;
}

.logo-stack-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;

	margin: 0 calc( var( --logo-h-sp ) * -1 ) calc( var( --logo-v-sp ) * -1 );
}



.logo {
	margin: 0 var( --logo-h-sp ) var( --logo-v-sp );
	-webkit-filter: grayscale( 1 );
	-moz-filter: grayscale( 1 );
	filter: grayscale( 1 );
}

.is-dark-mode .logo {
	-webkit-filter: grayscale( 1 ) invert( 1 );
	-moz-filter: grayscale( 1 ) invert( 1 );
	filter: grayscale( 1 ) invert( 1 );
}

.logo__markup {
	width: 100%;
}

	.logo img {
		max-width: 150px;
		max-height: 75px;
		width: auto;
		height: auto;

		/*-webkit-filter: grayscale( 1 );
		-moz-filter: grayscale( 1 );
		filter: grayscale( 1 );*/
	}



.logo-stack.display-boxes {
	--logo-v-sp: calc( var( --h-sp ) * 0.5 );
	--logo-h-sp: calc( var( --h-sp ) * 0.5 );
}

.logo-stack.display-boxes .logo-stack-inner {}

.logo-stack.display-boxes .logo {
	/*border: var( --border-width ) solid currentColor;*/
	display: flex;
	/*justify-content: center;*/
	align-content: center;
	align-items: center;

	width: var( --logo-size );
	max-height: calc( var( --logo-size ) * 0.5 );
}

.logo-stack.display-boxes .logo:nth-child( even ) {
	margin-right: calc( var( --h-sp ) - var( --logo-h-sp ) );
}

.logo-stack.display-boxes .logo-stack-inner {
	margin-right: calc( var( --h-sp ) * -1 );
}

	.logo-stack.display-boxes .logo img {
		max-width: min( 150px, var( --logo-size ) );
		max-height: min( 80px, calc( var( --logo-size ) * 0.5 ) );
	}

	.logo-stack.display-boxes .logo img[src*="swr"],
	.logo-stack.display-boxes .logo img[src*="SWR"] {
		max-height: min( 50px, calc( var( --logo-size ) * 0.5 ) );
	}



/* ------------------------- */
@media ( min-width: 700px ) {

	.logo-stack {
		--logo-count: 4;
	}
}



/* ------------------------- */
@media ( min-width: 800px ) {

	.logo img {
		max-width: 170px;
		max-height: 90px;
	}
}



/* ------------------------- */
@media ( min-width: 1200px ) {

	.logo-stack {
		--logo-count: 6;
	}
}