@layer components {
	.industry-card {
		--industry-card-accent: var(--primary);

		display: block;
		text-decoration: none;
		background: var(--color-bg-card);
		border-radius: 12px;
		padding: calc(var(--gutter) * 2.5);
	}

	.industry-card > div {
		display: flex;
		flex-direction: column;
		gap: calc(var(--gutter) * 0.75);
		block-size: 100%;
	}

	.industry-card h2 {
		font-size: var(--font-size-xxl);
		font-weight: var(--font-weight-bold);
		letter-spacing: -0.02em;
	}

	.industry-card > div > p:first-child {
		font-size: 0.75rem;
		font-weight: var(--font-weight-medium);
		letter-spacing: 0.12em;
		text-transform: uppercase;
		color: var(--industry-card-accent);
	}

	.industry-card > div > p:nth-of-type(2) {
		font-size: var(--font-size-sm);
		color: var(--color-text-muted);
	}

	.industry-card > div > div {
		margin-block-start: auto;
		padding-block-start: var(--stack);
		border-block-start: 1px solid var(--color-border);
		display: flex;
		gap: calc(var(--gutter) * 0.75);
		flex-wrap: wrap;
	}

	.industry-card > div > div > span {
		font-size: 0.75rem;
		color: var(--color-text-muted);
	}
}