rework artist in residence layout

artists/hawke/index.html

@@ -34,10 +34,10 @@
 			<header><!-- auto-populated by nav.js --></header>
 
 			<main id="main">
-				<div class="resident">
+				<div class="topic">
-					<h1>Jennifer Hawke</h1>
 					<img src="/assets/img/artists/hawke.jpg" alt="jennifer hawke, the artist, a white person with a beard and knowing eyes. the top half of their face is painted blue with a white heart, and they are wearing a huge elaborate flower crown, a red shawl, and several chunky pendants.">
-					<div id="bio">
+					<h1>Jennifer Hawke</h1>
+					<div class="desc">
 						<p>Jennifer Hawke hails from Billings, Montana where they got their degree in Cast Metals and Painting. They have been on Vashon Island for about 18 years and love doing the Bearded Lady Road Report. They have had their Studio at the Beall Greenhouses for about 8 years and only recently started opening to the public. Their space is warmed by a singular woodstove & all the ephemera that comes with being the child of an antique dealer.</p>
 					</div>
 				</div>

assets/styles/artist-resident.css

@@ -1,51 +1,91 @@
-.resident {
+.topic {
-	margin: 2rem auto;
+	margin: 4rem auto;
 	display: grid;
-	grid-template:
-		'img h1'
-		'img desc'
-		'img .';
-	grid-template-columns: 1fr 1fr;
 }
 
-@media (max-width: 1050px) {
+.topic:nth-child(odd) {
-	.resident {
+	grid-template:
+		'img h'
+		'img desc'
+		'img .';
+	grid-template-columns: 45% auto;
+}
+
+.topic:nth-child(even) {
+	grid-template:
+		'h img'
+		'desc img'
+		'. img';
+	grid-template-columns: auto 45%;
+}
+
+@media (max-width: 950px) {
+	.topic:nth-child(odd),
+	.topic:nth-child(even) {
 		grid-template:
 			'img'
-			'h1'
+			'h'
 			'desc';
 	}
 }
 
-.resident h1 {
+.topic img {
-	grid-area: h1;
-	font-size: 2rem;
-	margin: 0;
-	border-bottom: .25rem solid var(--color-accent);
-}
-
-.resident img {
 	grid-area: img;
 	border-radius: 1rem;
 }
 
-.resident #bio {
+@media (max-width: 950px) {
-	grid-area: desc;
+	.topic img {
-	margin-left: 1.75rem;
-}
-
-@media (max-width: 1050px) {
-	.resident img {
 		border-radius: 1rem 1rem 0 0;
 		border-bottom: .25rem solid var(--color-accent);
 	}
+}
 
-	.resident #bio {
+.topic h1,
+.topic h2 {
+	margin: 0;
+	grid-area: h;
+	border-bottom: .25rem solid var(--color-accent);
+	padding: .25rem;
+}
+
+.topic:nth-child(odd) h2 {
+	padding-left: .75rem;
+}
+
+.topic:nth-child(even) h2 {
+	text-align: right;
+	padding-right: .75rem;
+}
+
+@media (max-width: 950px) {
+	.topic:nth-child(odd) h2,
+	.topic:nth-child(even) h2 {
+		padding: .25rem 0;
+	}
+}
+
+.topic .desc {
+	grid-area: desc;
+	background-color: var(--color-bg-alt);
+	border-radius: 0 0 1rem 1rem;
+}
+
+.topic:nth-child(odd) .desc {
+	margin-left: 1.5rem;
+}
+
+.topic:nth-child(even) .desc {
+	margin-right: 1.5rem;
+}
+
+@media (max-width: 950px) {
+	.topic:nth-child(odd) .desc,
+	.topic:nth-child(even) .desc {
 		margin: 0;
 	}
 }
 
-.resident #bio,
 .contact ul {
 	background-color: var(--color-bg-alt);
 	border-radius: 0 0 1rem 1rem;