.kp-wrap {
	--kp-cols: 4;
	--kp-col-gap: 30px;
	--kp-row-gap: 30px;
	--kp-logo-height: 80px;
}

.kp-title {
	margin-top: 0;
}

.kp-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: var(--kp-row-gap) var(--kp-col-gap);
}

/* Iga logo võtab täpse osa reast; mis ei mahu, läheb ise uuele reale */
.kp-item {
	flex: 0 0 calc((100% - (var(--kp-cols) - 1) * var(--kp-col-gap)) / var(--kp-cols));
	max-width: calc((100% - (var(--kp-cols) - 1) * var(--kp-col-gap)) / var(--kp-cols));
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
}

.kp-item a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
}

.kp-item img {
	display: block;
	max-width: 100%;
	width: auto;
	height: var(--kp-logo-height);
	object-fit: contain;
}

/* Mustvalge (hall) */
.kp-grayscale .kp-item img {
	filter: grayscale(100%);
	transition: filter .3s ease, opacity .3s ease;
}

/* Täismust (siluett) */
.kp-black .kp-item img {
	filter: brightness(0);
	transition: filter .3s ease, opacity .3s ease;
}

/* Originaalvärvid hiire all */
.kp-grayscale.kp-hover-color .kp-item img:hover,
.kp-black.kp-hover-color .kp-item img:hover {
	filter: none;
}
