@use '../../base/mixins/breakpoints' as break;
@use '../../base/functions' as *;

.logo-parade {
	display: flex;
	gap: var(--padding-medium);
	justify-content: space-evenly;
	flex-wrap: wrap;

	.logo-container {
		flex-basis: brandui-col-spacing(1);
	}
}

.logo-cluster {
	display: grid;
	justify-items: center;
	grid-template-columns: repeat(
		auto-fill,
		minmax(calc(var(--content-max) / 12 * 2), 1fr)
	);
	gap: var(--padding-large) var(--padding-small);

	.logo-container {
		max-width: brandui-col-spacing(1);
	}
}

.recognition-badges {
	display: flex;
	gap: var(--padding-extra-large);
	place-items: center;

	&-wrapper {
		margin: auto;
		display: flex;
		flex-direction: column;
		gap: var(--padding-extra-large);
	}

	@include break.max-mobile {
		flex-direction: column;
	}
}