.emerald-site {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

.emerald-main {
	flex: 1 0 auto;
}

.emerald-container {
	width: min(100% - 2rem, 1180px);
	margin-inline: auto;
}

.emerald-section {
	padding: clamp(3rem, 8vw, 7rem) 0;
}

.emerald-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
	gap: clamp(1rem, 2vw, 1.5rem);
}

.emerald-card,
.emerald-surface {
	border: 1px solid var(--emerald-border);
	border-radius: 8px;
	background: var(--emerald-surface);
	padding: clamp(1.25rem, 3vw, 2rem);
}

.emerald-muted {
	color: var(--emerald-muted);
}

.emerald-front-foundation .emerald-surface {
	max-width: 760px;
	border: 0;
	padding: 0;
}