/* In the [$o-partners] map we define some settings:
 *
 * 'columns'.key 	=	number of items in a row
 * 'columns'.value 	= 	breakpoint size from which we want that number of items
 */


$o-partners: (
	'gap' : 4%,
	'columns': (
		2: 320,
		3: 620,
		4: 860,
		5: 1080,
	),
);

// Get values from the map and place them in an easy to access variable
$o-partners-columns: 				map-get($o-partners, 'columns'); // get the 'columns' list
$o-partners-column-keys: 			map-keys($o-partners-columns); // get a list of the keys from the 'columns'
$o-partners-column-smallest-bp: 	map-get($o-partners-columns, nth($o-partners-column-keys, 1)); // get breakpoint value of the first column


.o-partners__list {
	@include mq($o-partners-column-smallest-bp) {
		display: flex;
		flex-wrap: wrap;
		margin: map-get($o-partners, 'gap') * -1;
	}
}


.o-partners__item {
	max-width: 444px; // constrain the width of the element inside
	margin: map-get($o-partners, 'gap') auto;
	list-style-type: none;


	// Loop through all defined columns
	@each $count, $breakpoint in $o-partners-columns {
		$i: index($o-partners-columns, ($count $breakpoint));

		@include mq(map-get($o-partners-columns, $count)) {
			@if($i == 1) {
				// Only set these values for the first media query, no need to set them every time
				flex: none;
				margin: map-get($o-partners, 'gap');
			}

			// in case of a bug in IE we need to specify flex-basis longhand property: https://github.com/philipwalton/flexbugs#flexbug-8
			flex-basis: calc(#{percentage(1 / $count)} - (#{map-get($o-partners, 'gap')} * 2));
		}
	}
}


.o-partners__logo {
	display: flex;
	align-items: center;
	height: 100%;
	transition: opacity 150ms linear;

	&:hover {
		opacity: 0.75;
	}
}


.o-partners__figure {
	display: flex;
	align-items: center;

}


.o-partners__img {
	display: block;
	width: 100%;
	object-fit: contain;
}