/**
 * The main content of a document.
 *
 * This marks the content that is directly related to or expands upon the central topic of the document. The main role is a non-obtrusive alternative for "skip to main content" links, where the navigation option to go to the main content (or other landmarks) is provided by the user agent through a dialog or by assistive technologies.
 *
 * Within any `document` or `application`, the author **SHOULD** mark no more than one element with the `main` role.
 *
 * The `[role='main']` element can be a `main` or an `article`
 */

.main-container {
	overflow: hidden;

	background-color: palette('white');

	transition: margin-left 0.5s;

	@include media('<desktop') {
		.menu-controller:checked + & {
			margin-left: $off-canvas-menu-width;

			transition: margin-left 0.5s;
		}

		.menu-controller:checked + & > * {
			margin-right: $off-canvas-menu-width * -1;

			transition: margin-right 0.5s;
		}
	}
}

.content-container {
	flex: 1 0 auto;
}

main,
[role='main'] {
	clear: both;

	margin-top: span(1);
	margin-bottom: span(1);
}

article[role='main'] {
	max-width: $max-width;

	padding: gutter();
	margin-right: auto;
	margin-left: auto;
}

/**
 * The main content of a document.
 *
 * This marks the content that is directly related to or expands upon the central topic of the document. The main role is a non-obtrusive alternative for "skip to main content" links, where the navigation option to go to the main content (or other landmarks) is provided by the user agent through a dialog or by assistive technologies.
 *
 * Within any `document` or `application`, the author **SHOULD** mark no more than one element with the `main` role.
 *
 * The `[role='main']` element can be a `main` or an `article`
 */

.main-container {
	overflow: hidden;

	background-color: palette('white');

	transition: margin-left 0.5s;

	@include media('<desktop') {
		.menu-controller:checked + & {
			margin-left: $off-canvas-menu-width;

			transition: margin-left 0.5s;
		}

		.menu-controller:checked + & > * {
			margin-right: $off-canvas-menu-width * -1;

			transition: margin-right 0.5s;
		}
	}
}

.content-container {
	flex: 1 0 auto;
}

main,
[role='main'] {
	clear: both;

	max-width: $max-width;

	padding: gutter();
	margin-top: span(1);
	margin-right: auto;
	margin-bottom: span(1);
	margin-left: auto;
}

Normalize `[role='main']` paddings and margins
Normalize `[role='main']` paddings and margins
