/* S04 variants: package, feature and link cards (the shared card is in sections-cards.css). */

.nbt-card-eyebrow {
	color: var(--c-cyan-text);
	font: 600 var(--text-xs) / 1.2 var(--font-mono);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.nbt-card-grid-package .nbt-card {
	--nbt-card-pad: var(--space-6);
}

@media (min-width: 48rem) {

	.nbt-card-grid-package .nbt-card {
		--nbt-card-pad: var(--space-10);
	}
}

@media (min-width: 64rem) {

	.nbt-card-grid-package .nbt-card-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.nbt-card-grid-feature .nbt-card {
	--nbt-card-pad: 0;

	border: 0;
	background: none;
}

.nbt-card-grid-feature .nbt-card-title {
	padding-top: var(--space-3);
	border-top: var(--border);
}

.nbt-card-grid-link .nbt-card-list {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
	gap: var(--space-3);
	margin-block-start: var(--space-8);
}

.nbt-card-grid-link .nbt-card {
	--nbt-card-pad: var(--space-4);

	min-height: 56px;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	align-content: center;
}

.nbt-card-grid-link .nbt-card::after {
	content: "";
	width: 1.25rem;
	height: 1.25rem;
	background: var(--c-brand);
	mask: url(../icons/arrow-right.svg) center / contain no-repeat;
}

.nbt-card-grid-link .nbt-card-title {
	font-size: var(--text-md);
}