@media only screen and (max-width: 600px) {
	html {
		--member-bio-pic-margin: 0;
		--member-bio-pic-width: 30%;
	}
}

@media only screen and (min-width: 601px) {
	html {
		--member-bio-pic-margin: 5pt;
		--member-bio-pic-width: 15%;
	}
}

div.member-bio {
	--member-bio-width: 90%;

	--member-bio-text-width: calc(var(--member-bio-width) - var(--member-bio-pic-width) - 2*var(--member-bio-pic-margin));
	width: var(--member-bio-width);
	
	--member-bio-margin-bottom: 10vh;
	margin-bottom: calc(--member-bio-margin-bottom);
}

div.member-bio img.bio-pic {
	max-width: var(--member-bio-pic-width);
	margin: var(--member-bio-pic-margin);
}

div.member-bio div.bio-text {
	width: var(--member-bio-text-width)
}


div.member-bio:nth-child(odd) img.bio-pic {
	float: left;
}

div.member-bio:nth-child(odd) div.bio-text {
	margin-left: calc(var(--member-bio-pic-width) + 2*var(--member-bio-pic-margin));
}

div.member-bio:nth-child(odd) h2, div.member-bio:nth-child(odd) h3 {
	text-align: left;
}

div.member-bio:nth-child(even) img.bio-pic {
	float: right;
	margin-right: calc(var(--member-bio-pic-margin) + 100% - var(--member-bio-width));
}

div.member-bio:nth-child(even) h2, div.member-bio:nth-child(even) h3 {
	text-align: right;
}