/*
	Written by Artem K.
	https://www.github.com/goodguyartem
*/

#main-header-container {
	width: 85%;
	margin: 0 auto;
}

.story h2 {
	font-weight: 300;
	font-size: 1.875rem;
	text-align: center;
	color: var(--blue0);
	margin: 16px 0;
}

.story p {
	color: rgb(0, 0, 0, 25%);
	width: fit-content;
	font-size: 1.08rem;
	font-weight: 400;
	line-height: 150%;
}

.story-container {
	max-width: 100%;
	display: flex;
	flex-direction: column;
}

.story-container img {
	display: block;
	max-width: 100%;
	max-height: 520px;
	margin: auto;
}

.story-info-container {
	width: 100%;
}

.story-info-container .map-container {
	margin-top: 1em;
}

.notice {
	margin: 0.35em 0;
}

.notice:first-of-type {
	margin-top: 1em;
}

.info {
	width: 100%;
	max-width: calc(1em + 640px);
	padding: 16px;
	margin: 24px auto;
	box-sizing: border-box;
}

.faq.info {
	margin: 12px auto; /* Flex items don't collapse their margins. */
}

.info p,
.info li {
	margin: 12px 0;
	font-weight: 300;
	font-size: 1rem;
	vertical-align: middle;
	line-height: 115%;
}

.info p:first-child,
.story-info-container > p {
	margin: 0;
	text-transform: uppercase;
	color: var(--blue0);
	font-weight: 400;
	font-size: 1.25rem;
}

.info h3 {
	margin: 0;
	font-weight: 300;
	width: 45%;
	min-width: fit-content;
}

.info li {
	margin: 0;
	list-style: "- ";
}

.info ul {
	margin: 0;
	padding-left: 1ch;
}

.info address {
	display: inline;
}

.info > :last-child {
	margin-bottom: 0;
}

.main-info > .info {
	text-align: center;
}

.story-info-container > p {
	text-align: center;
}

#our-goals {
	width: 80%;
	margin: 0 auto;
}

@media (min-width: 1080px) {
	#main-header-container {
		width: 65%;
	}

	.story-container {
		flex-direction: row;
	}

	.story {
		margin: 24px 0 24px 8%;
	}

	.story h2 {
		margin: 0;
	}

	.notice:first-of-type {
		margin-top: 2em;
	}
}

@media (min-width: 1360px) {
	.main-info {
		display: flex;
		flex-direction: row;
		justify-content: space-evenly;
		margin-top: 56px;
		align-items: center;
		width: 100%;
	}

	.main-info .info {
		width: calc(1em + 360px);
		margin: 0;
	}

	.info {
		max-width: 100%;
	}
}