.ui-centered-page {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100dvh;
	padding: 1.5rem;

	--ui-centered-page-max-width: 36rem;
}

.ui-centered-page--narrow {
	--ui-centered-page-max-width: 30rem;
}

.ui-centered-page--wide {
	--ui-centered-page-max-width: 48rem;
}

.ui-centered-page__body {
	width: min( 100%, var( --ui-centered-page-max-width ) );
}

@media (max-width: 767px) {
	.ui-centered-page {
		padding: 1rem;
	}
}