$o-logos-spacing-dynamic: 2.382vw;
$o-logos-spacing-fixed: 	space(4);

.o-logos {}

.o-logos__list {
	@include flex(wrap);
	margin-left: 0; // reset
	margin: -#{$o-logos-spacing-dynamic};
	list-style-type: none;

	@include mq($bp-max){
		margin: -#{$o-logos-spacing-fixed};
	}
}

.o-logos__item {
	flex: 0 1 100%;
	margin: $o-logos-spacing-dynamic;

	@include mq(s){
		flex-basis: calc(#{percentage(1/2)} - #{double($o-logos-spacing-dynamic)});
	}
	@include mq(m){
		flex-basis: calc(#{percentage(1/3)} - #{double($o-logos-spacing-dynamic)});
	}
	@include mq(l){
		flex-basis: calc(#{percentage(1/4)} - #{double($o-logos-spacing-dynamic)});
	}
	@include mq($bp-max){
		flex-basis: calc(#{percentage(1/4)} - #{double($o-logos-spacing-fixed)});
		margin: $o-logos-spacing-fixed;
	}
}

.o-logos__link {
	display: block;
}

.o-logos__img {
	display: block;
	width: 100%;
	height: 0;
	padding-bottom: 100%; // Aspect ratio
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
}