@media (orientation: portrait) {
	#wrapContainer {
		flex-direction: column;
		padding-left: 1rem;
		padding-right: 1rem;
	}

	.landscapeOnly {
		display: none;
	}

	.root-half {
		flex-grow: 0;
	}
	.bg-success {
		padding-left: 0.5rem;
		padding-right: 0.5rem;
	}
}

@media (orientation: landscape) {
	#wrapContainer {
		flex-direction: row;
		padding-left: 3rem;
		padding-right: 3rem;
	}

	.portraitOnly {
		display: none;
	}

	.root-half {
		flex-grow: 1;
	}

	.bg-success {
		padding-left: 3rem;
		padding-right: 3rem;
	}
}

#wrapContainer {
	max-width: 80rem;
}

.root-half {
	max-width: calc((80rem - 12rem) / 2);
}