html {
	scroll-behavior: smooth
}


section>div.inner {
	margin:0 auto;
	padding-left:10px;
	padding-right:10px;
}

.box {
	box-sizing:border-box;
	position:relative;
	display:block;
}


/* 
many parts of the site use pre-grid floats to do this.
*/
.grid {
	display:grid;
	grid-gap:1rem;
}
	section.white .grid>* {
		background:var(--color_5);
		padding:1rem;
	}






@media (min-width: 600px) {

	.box {
		margin:0;
	}

}

@media (min-width: 1024px) {

	section>div.inner {
		max-width:1330px;
	}

	.box img {
		max-width:100%;
		display:block;
	}
	
	
	.grid_1_1 {
		grid-template-columns:1fr 1fr;
	}
	.grid_2_1 {
		grid-template-columns:2fr 1fr;
	}
	.grid_3_1 {
		grid-template-columns:3fr 1fr;
	}
	.grid_1_1_1 {
		grid-template-columns:1fr 1fr 1fr;
	}
	.grid_1_1_1_1 {
		grid-template-columns:1fr 1fr 1fr 1fr;
	}
	
	.grid_gap_2 {
		grid-gap:2rem;
	}
	.grid_gap_2 {
		grid-gap:3rem;
	}
}