.btn-primary,
.btn-outline {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.75rem;
	padding: var(--space-2) var(--space-4);
	border: 2px solid transparent;
	border-radius: var(--radius-sm);
	font-family: var(--font-sans);
	font-size: var(--font-size-body);
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

.btn-primary {
	background: var(--color-gold);
	color: var(--color-navy);
}

.btn-primary:hover,
.btn-primary:focus-visible {
	background: var(--color-navy);
	color: var(--color-white);
}

.btn-outline {
	border-color: var(--color-blue);
	background: transparent;
	color: var(--color-blue);
}

.btn-outline:hover,
.btn-outline:focus-visible {
	background: var(--color-blue);
	color: var(--color-white);
}

.card {
	padding: var(--space-6);
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
}

.section {
	width: min(100% - (2 * var(--space-4)), var(--content-width));
	margin-inline: auto;
	padding-block: var(--space-12);
}

.badge {
	display: inline-block;
	padding: var(--space-1) var(--space-2);
	border-radius: var(--radius-pill);
	background: var(--color-navy);
	color: var(--color-white);
	font-family: var(--font-sans);
	font-size: var(--font-size-small);
	font-weight: 700;
	line-height: 1.4;
}

.grid-2,
.grid-3,
.grid-4 {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-6);
}

@media (min-width: 48rem) {
	.section {
		width: min(100% - (2 * var(--space-8)), var(--content-width));
		padding-block: var(--space-16);
	}

	.grid-2,
	.grid-3,
	.grid-4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 64rem) {
	.grid-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.grid-4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}