@charset "UTF-8";

#site-header #nav_resources {
	border-color: var(--sentry_orange);
}

article {
	&>* {
		/*calc horizontal padding for 6% or max-width of 100rem*/
		padding: 3% max(6%, calc(calc(100vw - 100rem) / 2));
		&:nth-child(even){
			background: var(--background_grey);
		}
	}
	h1, h2, h3, h4, p {
		margin: 1em 0;
		&:first-child { margin-top: 0; }
		&:last-child { margin-bottom: 0; }
	}
	h1, h2, h3, h4 { text-align: center; }
	h1 {
		margin-bottom: 0;
		&+h2 { margin-top: 0; }
	}
	&>header {
		background-color: var(--background_grey);
		padding-top: 6%;
	}
	section:last-child {
		padding-bottom: 6%;
	}
	h3 { font-size: 1.25rem; }
	ul{
		border: .15rem solid var(--sentry_grey);
		padding: 1rem;
		margin: 1rem 2%;
		justify-self: center;

		li {
			font-size: 1.1rem;
			font-weight: bold;
			&::before{
				content: "• ";
				font-weight: bold;
			}
			aside {
				font-weight: normal;
				font-size: 0.9rem;
				margin-left: 2rem;
			}
		}
	}
	.aside-container {
		overflow: auto;

		&>aside, &>img {
			float: right;
			width: 30%;
			margin-left: 1rem;
			border: .1rem dashed var(--sentry_grey);
		}
		&>aside { padding: 0.5rem 1rem; }
	}
}

@media (max-width: 40rem) {
	article .aside-container {
		display: grid;
		grid-template-areas:
			"p1"
			"aside"
			"p";
		p { grid-area: p; }
		aside+p, img+p {
			grid-area: p1;
			margin-top: 0;
		}
		aside { grid-area: aside; }
		&>aside, &>img {
			float: initial;
			width: 100%;
			max-width: 20rem;
			margin: 0;
			justify-self: center;
		}
	}
}