/**
 * @# Clients
 **/
/* Image grid */
.wolf-core-clients-grid {
	display: grid;

	&:before {
		display: none;
	}

	figure {
		margin: 0;
		padding: 0;
	}

	img {
		transform: translateZ(0);
		backface-visibility: hidden;
		display: block;
		vertical-align: bottom;
		max-width: 100%;
		width: auto;
		margin: 0 auto;
	}

	/* Padding */
	&.wolf-core-clients-padding-yes {
		grid-gap: 40px;

		.wolf-core-client-grid {
			//padding: 0 40px 40px;
			//margin: 0 0 80px;
		}

		//margin-left: -16px;
		//width: calc(100% + 32px);
	}
}

.wolf-core-client {
	position: relative;
}

.wolf-core-client-inner {
	position: relative;
}

.wolf-core-client-image-inner {
	opacity: 1;
	transition: opacity 0.2s ease;
}

.wolf-core-client-image-hover-inner {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity 0.2s ease;
}

.wolf-core-client:hover .wolf-core-client-has-hover-image {
	.wolf-core-client-image-inner {
		opacity: 0;
	}
	.wolf-core-client-image-hover-inner {
		opacity: 1;
	}
}

.wolf-core-client:hover .wolf-core-client-no-hover-image {
	.wolf-core-client-image-inner {
		opacity: 0.7;
	}
}

/* Columns */
@media screen and (min-width: 480px) {
	.wolf-core-clients-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media screen and (min-width: 800px) {
	$columns: 6;
	@for $i from 1 through $columns {
		.wolf-core-clients-columns-#{$i} {
			grid-template-columns: repeat(#{$i}, 1fr);
		}
	}
}