/* default layout styles here */

.layout-container {
	background-color: var(--color-mid-green);
	color: white;
	overflow: hidden;
}

.layout-content {
	--safe-height: min(calc(33.33% * 0.72), calc(315px * 0.72));
	padding: 4em var(--pad) var(--safe-height);
}

.sidebar {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1.2em;
}

.block-system-branding-block img {
	display: block;
}

.region-breadcrumb:not(:empty)~main>.layout-content {
	padding-top: 1em;
}

.intro {
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
}

@media screen and (min-width: 768px) {
	/* wider layout styles here */

	.sidebar {
		padding: 0 2em !important;
		flex-grow: 1;
		flex-direction: row;
		justify-content: flex-start;
	}

	.sidebar .menu-main {
		flex-direction: row;
	}

	.sidebar .menu-social {
		display: none;
	}

	.layout-content {
		max-width: 1440px;
		margin: 0 auto;
		padding: 120px var(--pad) var(--safe-height);
	}

	.region-breadcrumb:not(:empty)~main>.layout-content {
		padding-top: 2em;
	}

	.intro {
		text-align: center;
		margin-bottom: 3em;
	}
}