.leonlab-logo-cloud {
	--leonlab-logo-cols: 5;
	--leonlab-logo-speed: 28s;
	position: relative;
	border-radius: 18px;
	overflow: hidden;
}

.leonlab-logo-cloud__header {
	margin-bottom: 18px;
	max-width: 900px;
}

.leonlab-logo-cloud__headline {
	margin: 0 0 8px;
	font-size: 1.75em;
	line-height: 1.15;
}

.leonlab-logo-cloud__text {
	margin: 0;
	opacity: 0.85;
	font-size: 1.05em;
	line-height: 1.55;
}

.leonlab-logo-cloud__grid {
	display: grid;
	grid-template-columns: repeat(var(--leonlab-logo-cols), minmax(0, 1fr));
	gap: 14px;
	align-items: center;
}

@media (max-width: 900px) {
	.leonlab-logo-cloud__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 520px) {
	.leonlab-logo-cloud__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.leonlab-logo-cloud__tile {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 14px;
	border-radius: 16px;
}

.leonlab-logo-cloud--tiles .leonlab-logo-cloud__tile {
	border: 1px solid rgba(0,0,0,0.08);
	background: rgba(255,255,255,0.55);
	backdrop-filter: blur(10px);
}

.leonlab-logo-cloud__img {
	max-height: 42px;
	max-width: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
	opacity: 0.92;
	transition: filter 180ms ease, opacity 180ms ease;
}

.leonlab-logo-cloud--grayscale .leonlab-logo-cloud__img {
	filter: grayscale(1);
	opacity: 0.78;
}

.leonlab-logo-cloud--grayscale .leonlab-logo-cloud__tile:hover .leonlab-logo-cloud__img {
	filter: grayscale(0);
	opacity: 1;
}

.leonlab-logo-cloud__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	text-decoration: none;
}

/* Marquee */
.leonlab-logo-cloud__marquee {
	position: relative;
	overflow: hidden;
	mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
}

.leonlab-logo-cloud__track {
	display: flex;
	gap: 22px;
	align-items: center;
	width: max-content;
	animation: leonlab-logo-marquee var(--leonlab-logo-speed) linear infinite;
}

.leonlab-logo-cloud--pause-hover .leonlab-logo-cloud__marquee:hover .leonlab-logo-cloud__track {
	animation-play-state: paused;
}

.leonlab-logo-cloud__marqueeItem {
	flex: 0 0 auto;
	padding: 10px 14px;
	border-radius: 16px;
}

.leonlab-logo-cloud--tiles .leonlab-logo-cloud__marqueeItem {
	border: 1px solid rgba(0,0,0,0.08);
	background: rgba(255,255,255,0.55);
	backdrop-filter: blur(10px);
}

@keyframes leonlab-logo-marquee {
	0% { transform: translateX(0); }
	100% { transform: translateX(-50%); }
}