body {
	background-image: url(/assets/images/why-bg.png);
	background-position: top center;
	background-size: min(90em, 100%) auto;
	background-repeat: no-repeat;
}

main {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

main #head {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-start;
	width: calc(100% + 0.8 * var(--padding));
	margin-bottom: 3em;

	.circum { flex: 0 0 auto; }
	p { max-width: 28em; }
	#fistbump { flex: 0 1 auto; align-self: flex-end; margin-left: -8em; }
	img { width: min(65vw, 44em); max-width: 100%; object-fit: contain; z-index: 1; }

	@media (min-width: 60em) {
		flex-direction: row;
		margin-bottom: 6em;

		.circum { margin-bottom: 14em; }
	}
}

main #jobdescription {
	display: flex;
	flex-direction: column;
	gap: 3em;
	width: 100%;
	max-width: 40em;

	h2 {
		margin-bottom: 0.5em;
		font-size: 1.3em;
		font-weight: 900;
		max-width: unset;
		text-transform: uppercase;
		color: var(--col-green);
		line-height: 1.2em;
	}

	h3 {
		margin-top: 1.5em;
		margin-bottom: 0.5em;
		font-size: 1em;
		font-weight: 900;
		text-transform: uppercase;
		color: var(--col-green);
	}

	ul {
		display: flex;
		flex-direction: column;
		gap: 0.4em;

		li { padding-left: 1.2em; text-indent: -1.2em; }
		li::before { content: "–"; margin-right: 0.5em; }
	}
}