.root {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
	height: calc(100vh - var(--header-height));
	overflow: hidden;
	background: variables.$bg-canvas;

	@include breakpoints.respond-to(breakpoints.$mobileMax) {
		height: calc(100svh - var(--header-height));
	}
}

.stepper {
	flex-shrink: 0;
	width: 100%;
}

.content {
	flex: 1;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	min-height: 0;
	padding: 16px 20px 20px;
	background: variables.$bg-canvas;
	border-top: 1px solid variables.$border-subtle;

	@include breakpoints.respond-to(breakpoints.$mobileMax) {
		padding: 12px;
	}
}
