/* =Structure/Scaffolding
-------------------------------------------------------------- */
html {

}

body {
	background-color: $base-body-color;
	color: $primary-font-color;
	font-family: $content;
	line-height: 1.5em;
	margin: 0;
	overflow-x: hidden;
	word-break: break-word;
}

.site-header,
.site-footer,
.site-main {
	@include grid-media($mdbg) {
		@include section-container('wide');
		width: 100%;
		max-width: $maxwidth;
	}
}

main#main {
	@include grid-media($mdbg) {
		display: grid;
		grid-column-gap: 20px;
		grid-template-columns: repeat(8, [col-start] 1fr);
	}
	@include grid-media($hg) {
		grid-template-columns: repeat(12, [col-start] 1fr);
	}
}

#primary {
	@include grid-media($sm) {
		grid-column: 1 / -1;
		padding: 0 20px;
	}
	@include grid-media($mdbg) {
		grid-column: 1 / 7;
		margin-left: 20px;
		padding: 0;
	}
	@include grid-media($hg) {
		grid-column: 1 / 9;
		margin: 0;
	}
	// margin: 0 auto;

	ul, ol {
		list-style: none;
		margin-left: 20px;
		li {
			list-style-type: square;
			ul {
				li {
					list-style-type: disc;
					ul {
						li {
							list-style-type: circle;
						}
					}
				}
			}

		}
	}
}

#secondary {
	@include grid-media($sm) {
		grid-column: 1 / -1;
		padding: 0 20px;
	}
	@include grid-media($mdbg) {
		grid-column: 7 / 9;
		margin-right: 20px;
		padding: 0;
	}
	@include grid-media($hg) {
		grid-column: 9 / -1;
		margin: 0;
	}
}


