/** RUFALES opt-in layout primitives. */

.rufales-container {
	width: min(100% - (2 * var(--rufales-gutter)), var(--rufales-container));
	margin-inline: auto;
}

.rufales-content {
	width: min(100%, var(--rufales-content));
}

.rufales-section {
	padding-block: var(--rufales-space-3xl);
}

.rufales-section--surface {
	background: var(--rufales-color-surface);
}

.rufales-stack {
	display: flex;
	flex-direction: column;
	gap: var(--rufales-space-lg);
}

.rufales-cluster {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--rufales-space-sm) var(--rufales-space-md);
}

.rufales-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
	gap: var(--rufales-space-lg);
}

.rufales-grid--wide {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}

.rufales-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--rufales-space-2xl);
	align-items: center;
}

.rufales-flow > * + * {
	margin-block-start: var(--rufales-space-md);
}