/*
 * Shared horizontal layout: this carries the #wrapper rules from main.css's
 * <=1152px layout to any viewport. Load it after main.css.
 */
body #wrapper {
	padding: 0;
}

body #wrapper:before {
	display: none;
}

body #wrapper section {
	grid-template-areas: "header" "content" "footer";
	grid-template-columns: 1fr;
	grid-template-rows: 3fr;
	margin: 6rem 0 0;
}

body #wrapper section > header {
	justify-self: start;
	padding: 0;
	text-align: left;
	width: 100%;
}

body #wrapper section > header ul.actions {
	justify-content: flex-start;
}

body #wrapper section > .content {
	padding: 0;
	width: 100%;
	max-width: 60rem;
	overflow-x: hidden;
}

body #wrapper section > footer {
	padding: 0;
	text-align: left;
}

body #wrapper section > footer ul.actions {
	justify-content: flex-start;
}

body #wrapper > section {
	margin: 0;
}

body #wrapper > section > header {
	padding: 4rem;
	background-attachment: fixed;
	background-color: #F7BA00;
	background-image: url("../images/horizontal-section-background.svg");
	background-position: 25% 50%;
	background-repeat: repeat-y;
	background-size: 40rem auto;
}

body #wrapper > section > .content {
	padding: 4rem;
}

body #wrapper > section > footer {
	padding: 0 4rem 4rem;
}

body #wrapper > section > header > * {
	max-width: 25rem;
}

body #wrapper > section > header > h1,
body #wrapper > section > header > h2,
body #wrapper > section > header > h3,
body #wrapper > section > header > h4,
body #wrapper > section > header > h5,
body #wrapper > section > header > h6 {
	width: 100%;
	max-width: 100%;
}

body #wrapper > section > header > :last-child {
	margin-bottom: 0;
}

body #wrapper > section > header:before,
body #wrapper > section > header h1:before,
body #wrapper > section > header h1:after,
body #wrapper > section > header h2:before,
body #wrapper > section > header h2:after {
	display: none;
}

body #wrapper > section > .content > :last-child {
	margin-bottom: 0;
}

body #wrapper > section > .content > section {
	left: 0;
	margin: 4rem 0;
}

body #wrapper > section > .content > section:first-child {
	margin-top: 0;
}

body #wrapper > section > .content > section > header {
	width: 100%;
}

body #wrapper > section > .content > section:last-child {
	margin-bottom: 0;
}

body #wrapper > section > footer > :last-child {
	margin-bottom: 0;
}

body #wrapper > section.intro {
	margin-bottom: 0;
}

body #wrapper > section.intro > header {
	margin-bottom: 0;
	padding: 8rem 4rem 5rem;
}

body #wrapper > section.intro > header ul.actions {
	display: none;
}

body #wrapper > section.intro > header > ul.actions {
	margin-left: -1rem;
}

body #wrapper > section.intro > header > * {
	width: 100%;
	max-width: 25rem;
	margin-right: 0;
	margin-left: 0;
}

body #wrapper > section.intro > header:before {
	margin-left: 0;
}

body #wrapper > section.intro > .content {
	height: 100vh;
	max-width: none;
}

body #wrapper > section:last-of-type > header:after {
	display: none;
}

body #wrapper .copyright {
	left: 0;
	width: 100%;
	padding: 0 4rem 4rem;
}

@media screen and (max-width: 736px) {
	body #wrapper section {
		margin: 3rem 0 0;
	}

	body #wrapper > section {
		margin: 0;
	}

	body #wrapper > section > header,
	body #wrapper > section > .content {
		padding: 3rem 2rem;
	}

	body #wrapper > section > .content > section {
		margin: 3rem 0;
	}

	body #wrapper > section > footer {
		padding: 0 2rem 3rem;
	}

	body #wrapper > section.intro > header {
		padding: 5.5rem 2rem 2.5rem;
	}

	body #wrapper > section.intro > .content {
		height: clamp(15rem, 42vh, 22rem);
	}

	body #wrapper .copyright {
		padding: 0 2rem 2rem;
	}
}

@media screen and (max-width: 360px) {
	body #wrapper section {
		margin: 2.25rem 0 0;
	}

	body #wrapper > section {
		margin: 0;
	}

	body #wrapper > section > header,
	body #wrapper > section > .content {
		padding: 2.25rem 1.5rem;
	}

	body #wrapper > section > .content > section {
		margin: 2.25rem 0;
	}

	body #wrapper > section > footer {
		padding: 0 1.5rem 2.25rem;
	}

	body #wrapper > section.intro > header {
		padding: 4.875rem 1.5rem 1.875rem;
	}

	body #wrapper .copyright {
		padding: 0 1.5rem 1.5rem;
	}
}