/* Tailwind Elements: logo-clouds.css */

@layer components {
	.logo-cloud {
		@apply grid overflow-hidden;
		/* Theme: Rounded */
		@apply rounded-container-token;
	}

	/* === Logo Item (Child) === */

	.logo-item {
		@apply: flex-auto text-center space-x-4 shadow;
		/* Center Contents */
		@apply flex justify-center items-center space-x-4;
		/* Background */
		@apply bg-surface-100-800-token;
		/* Text */
		@apply text-base font-bold text-black dark:text-white;
		/* Padding */
		@apply py-4 md:py-8;
	}

	/* === States === */

	a.logo-item {
		@apply hover:brightness-110;
	}
}