/* Links page styles (US2) */

.links-header {
	max-width: 72ch;
	margin-inline: auto;
	text-align: center;
	gap: var(--space-3);
}

.links-grid {
	margin-top: var(--space-8);
	align-items: stretch;
}

.social-card {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	height: 100%;
	background-image: linear-gradient(160deg, color-mix(in srgb, var(--bg-brand-subtle) 50%, transparent), transparent 45%);
}

.social-card .social-icon {
	width: 2.75rem;
	height: 2.75rem;
	border-radius: var(--radius-md);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: var(--text-sm);
	font-weight: var(--font-bold);
	color: var(--text-brand-strong);
	background-color: var(--bg-brand-subtle);
	border: 1px solid var(--border-brand);
}

.social-card .card-text {
	margin-bottom: var(--space-1);
}

.social-card .btn {
	margin-top: auto;
	align-self: flex-start;
}

.social-card .source-note {
	font-size: var(--text-xs);
	color: var(--text-tertiary);
}

.social-card .source-note a {
	color: var(--text-brand);
}

@media (width >= 1024px) {
	.links-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}