:root {
	--header-color: rgba(148, 101, 44, 0.7);
	--border-color: #5A3D1A;
}

.container {
	display: grid;
	gap: 10px;
	grid-template-columns: 1fr 1fr 1fr;
	padding: 10px 10px 10px 10px;
}

.container > div {
	align-content: center;
	font-size: 30px;
	text-align: center;
}

.container > div > img {
	max-width: 375px;
}

@media screen and (max-width: 1200px) {
	/* fit text to viewport as the window size decreases */
	.container > div { font-size: 2.5vw; }
}

@media screen and (max-width: 900px) {
	.container {
		/* switch to single column grid layout */
		display: grid;
		grid-template-columns: 1fr;
	}
	.container > div { font-size: 3.5vw; }
}

/* start expanding text when container gets smaller */
@media screen and (max-width: 600px) {
	.container > div { font-size: 4.5vw; }
}

@media screen and (max-width: 400px) { 
	.container > div { font-size: 5.5vw; }
}
/* ------------------------------------------------ */


.container .section_titles {
	/* all of the large h2 headings on every page */
	grid-column: 1 / span 3;
	border-radius: 25px;
	background-color: var(--header-color);
	border-style: solid;
	border-width: 1px;
	border-color: var(--border-color);
}

@media screen and (max-width: 900px) {
	/* when the viewport too small, make content in 1 column */
	.container .section_titles { grid-column: 1; }
}

.container > div > h2{
	display: grid;
	align-items: center;
	margin-top: 5px;
	margin-bottom: 5px;
}

.container div > h4{
	background-color: var(--header-color);
	border-radius: 25px;
	border-style: solid;
	border-width: 1px;
	border-color: var(--border-color);
	max-width: 1080px;
	margin: auto;
}

.container > div > p {
	background: rgba(199, 125, 51, 0.5);
	border-radius:15px;
	border-style: solid;
	border-width: 1px;
	border-color: var(--border-color);
	padding: 25px;
	margin: 10px auto auto auto;
	max-width: 1080px;
	text-align: center;	
}