@charset "utf-8";

/* LOGOS */
.elements-logos {
	--gap: var(--space-xs);
	--pad: var(--space-xs);
	--multiply: 1;
	display: flex;
	flex-wrap: wrap;
	gap: var(--gap);
	margin: var(--margin-block) auto var(--gap);
	}
.elements-logos + .elements-logos {
	margin-top: var(--gap);
	}
.elements-logos-size-small {
	--columns: 3;
	}
.elements-logos-size-normal {
	--columns: 2;
	}
.elements-logos-size-large {
	--columns: 1;
	}
.elements-logos-img {
	transition: all var(--animation-duration) var(--animation-easing);
	}
.elements-logos-info {
	margin: var(--space-xs) auto 0;
	}
.elements-logos-size-small .elements-logos-info {
	font-size: 0.5rem;
	}
.elements-logos-size-normal .elements-logos-info {
	font-size: 0.625rem;
	}
.elements-logos-size-large .elements-logos-info {
	font-size: 0.6875rem;
	}
.elements-logos-header {
	color: var(--color-header);
	font-size: 2em;
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-tight);
	}
.elements-logos-text {
	font-size: 1.4em;
	line-height: var(--line-height-snug);
	margin-top: var(--space-5);
	}
/* INLINE */
.elements-logos-aspect-no {
	--gap: var(--space-md);
	}
.elements-logos-aspect-no .elements-logos-item {
	vertical-align: top;
	}
.elements-logos-aspect-no .elements-logos-img {
	display: inline-block;
	}
.elements-logos-aspect-no .elements-logos-img-src {
	width: auto;
	}
.elements-logos-aspect-no.elements-logos-size-small .elements-logos-img-src {
	max-height: 2.5rem !important;
	}
.elements-logos-aspect-no.elements-logos-size-normal .elements-logos-img-src {
	max-height: 5rem !important;
	}
.elements-logos-aspect-no.elements-logos-size-large .elements-logos-img-src {
	max-height: 7.5rem !important;
	}
/* GRID */
.elements-logos-aspect .elements-logos-item {
	flex: 0 0 calc((100% / var(--columns)) - var(--gap) + (var(--gap) / var(--columns)));
	}
.elements-logos-aspect .elements-logos-obj {
	background-color: var(--background);
	border-radius: var(--radius);
	display: flex;
	}
.elements-logos-aspect.elements-logos-layout-boxed .elements-logos-obj {
	border: 1px solid var(--background-border);
	}
.elements-logos-aspect .elements-logos-img {
	align-items: center;
	display: flex;
	justify-content: center;
	padding: var(--space-xs) calc(var(--pad) * var(--multiply));
	width: 100%;
	}
.elements-logos-aspect.elements-logos-size-small .elements-logos-obj.elements-logos-buffer-more .elements-logos-img {
	--multiply: 1.2;
	}
.elements-logos-aspect.elements-logos-size-small .elements-logos-obj.elements-logos-buffer-huge .elements-logos-img {
	--multiply: 2.4;
	}
.elements-logos-aspect.elements-logos-size-normal .elements-logos-obj.elements-logos-buffer-more .elements-logos-img {
	--multiply: 1.4;
	}
.elements-logos-aspect.elements-logos-size-normal .elements-logos-obj.elements-logos-buffer-huge .elements-logos-img {
	--multiply: 2.8;
	}
.elements-logos-aspect.elements-logos-size-large .elements-logos-obj.elements-logos-buffer-more .elements-logos-img {
	--multiply: 1.6;
	}
.elements-logos-aspect.elements-logos-size-large .elements-logos-obj.elements-logos-buffer-huge .elements-logos-img {
	--multiply: 3.2;
	}
.elements-logos-aspect .elements-logos-img-src {
	height: 100%;
	object-fit: contain;
	width: 100%;
	}
/* SCROLL */
.elements-logos-layout-scroll {
	--fade: 1.5rem;
	display: block;
	-webkit-mask-image: linear-gradient(to right, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent);
	mask-image: linear-gradient(to right, transparent, #000 var(--fade), #000 calc(100% - var(--fade)), transparent);
	overflow-x: auto;
	}
.elements-logos-scroll-ready {
	overflow: hidden;
	}
.elements-logos-scroll-track {
	display: flex;
	gap: var(--gap);
	width: max-content;
	}
.elements-logos-scroll-group {
	align-items: center;
	display: flex;
	flex: 0 0 auto;
	gap: var(--gap);
	}
.elements-logos-aspect-no.elements-logos-size-normal .elements-logos-scroll-group .elements-logos-img-src {
	max-height: 2rem !important;
	}
@media (min-width: 60em) {
	.elements-logos-scroll-group {
		gap: var(--gap-flow);
		}
	.elements-logos-aspect-no.elements-logos-size-normal .elements-logos-scroll-group .elements-logos-img-src {
		max-height: 4rem !important;
		}
}
.elements-logos-scroll-group .elements-logos-item {
	flex: 0 0 auto;
	}
.elements-logos-scroll-ready .elements-logos-scroll-track {
	animation: elements-logos-scroll var(--scroll-duration, 40s) linear infinite;
	will-change: transform;
	}
.elements-logos-scroll-ready:hover .elements-logos-scroll-track,
.elements-logos-scroll-ready:focus-within .elements-logos-scroll-track,
.elements-logos-scroll-offscreen .elements-logos-scroll-track {
	animation-play-state: paused;
	}
@keyframes elements-logos-scroll {
	to {
		transform: translateX(calc(-1 * var(--scroll-distance, 100%)));
		}
	}
@media (prefers-reduced-motion: reduce) {
	.elements-logos-scroll-ready .elements-logos-scroll-track {
		animation: none;
		}
}
/* SETTINGS */
.elements-logos-display-bw,
.elements-logos-display-bwcolor {
	filter: grayscale(100%);
	}
a.elements-logos-display-bwcolor:hover,
a.elements-logos-display-bwcolor:focus-visible {
	filter: grayscale(0%);
	}
a.elements-logos-display-color:hover,
a.elements-logos-display-color:focus-visible,
a.elements-logos-display-bw:hover,
a.elements-logos-display-bw:focus-visible {
	opacity: 0.8;
	}
@media (min-width: 30em) {
	.elements-logos-size-small {
		--columns: 4;
		}
	.elements-logos-size-normal {
		--columns: 3;
		}
}
@media (min-width: 45em) {
	.elements-logos {
		--pad: 1.25rem;
		}
	.elements-logos-size-small {
		--columns: 5;
		}
	.elements-logos-size-normal {
		--columns: 4;
		}
	.elements-logos-size-large {
		--columns: 2;
		}
}
@media (min-width: 60em) {
	.elements-logos-size-small.boxed-yes {
		--columns: 3;
		}
	.elements-logos-size-normal.boxed-yes {
		--columns: 2;
		}
	.elements-logos-size-large.boxed-yes {
		--columns: 1;
		}
	.elements-logos-size-small.boxed-no {
		--columns: 6;
		}
	.elements-logos-size-normal.boxed-no {
		--columns: 5;
		}
	.elements-logos-size-large.boxed-no {
		--columns: 3;
		}
}
@media (min-width: 80em) {
	.elements-logos-size-small.boxed-yes {
		--columns: 4;
		}
	.elements-logos-size-normal.boxed-yes {
		--columns: 3;
		}
	.elements-logos-size-large.boxed-yes {
		--columns: 2;
		}
	.elements-logos-size-small.boxed-no {
		--columns: 8;
		}
	.elements-logos-size-normal.boxed-no {
		--columns: 6;
		}
	.elements-logos-size-large.boxed-no {
		--columns: 4;
		}
}