flesh out placeholders with new artist layout

css/artist.css

@@ -2,13 +2,24 @@
   width: 100%;
   margin: 1rem 0;
   display: grid;
-  grid-template: 
+}
+
+.right {
+  grid-template:
     'imgs h3'
     'imgs desc'
     'imgs .';
   grid-template-columns: 45% auto;
 }
 
+.left {
+  grid-template:
+    'h3 imgs'
+    'desc imgs'
+    '. imgs';
+  grid-template-columns: auto 45%;
+}
+
 @media (max-width: 1050px) {
   .artist {
     grid-template:
@@ -31,24 +42,46 @@
 
 .artist h3 {
   grid-area: h3;
-  padding-left: .5rem;
   text-transform: uppercase;
 }
 
+.right h3 {
+  padding-left: .5rem;
+}
+
+.left h3 {
+  padding-right: .5rem;
+  text-align: right;
+}
+
 .description {
   grid-area: desc;
   background-color: light-dark(var(--color-dark), var(--color-light));
-  margin-left: 1.75rem;
   border-radius: 0 0 1rem 1rem;
 }
 
+.right .description {
+  margin-left: 1.75rem;
+}
+
+.left .description {
+  margin-right: 1.75rem;
+}
+
 @media (max-width: 1050px) {
   .artist h3 {
-    padding-left: 0;
+    padding: .5rem 0 0;
-    padding-top: .5rem;
   }
 
-  .description {
+  .left .description {
+    margin-right: .625rem;
+  }
+
+  .right .description {
     margin-left: .625rem;
   }
 }
+
+.description p:last-child {
+  text-align: center;
+}

css/main.css

@@ -60,6 +60,12 @@ main {
   border-radius: 1rem;
 }
 
+@media (max-width: 650px) {
+  #wip {
+    padding: .5rem;
+  }
+}
+
 img {
   display: block;
 }

index.html

@@ -37,14 +37,68 @@
 
         <h2>Who?</h2>
 
-        <div class="artist">
+        <div class="artist right">
-          <div class="fit-contain"><img src="/img/rachel.jpg"></div>
+          <div class="fit-contain"><img src="/img/greenhouse0.jpg" alt="a dilapidated greenhouse."></div>
+          <h3>Jennifer Hawke</h3>
+          <div class="description">
+            <p></p>
+            <p></p>
+          </div>
+        </div>
+
+        <div class="artist left">
+          <div class="fit-contain"><img src="/img/greenhouse1.jpg" alt="a dilapidated greenhouse."></div>
+          <h3>Brooke Osment</h3>
+          <div class="description">
+            <p>found art jackets, stitchwork, visible mending</p>
+            <p><a href="mailto:bsosment@gmail.com?subject=Beall%20Greenhouses%20Market">Email Brooke</a></p>
+          </div>
+        </div>
+
+        <div class="artist right">
+          <div class="fit-contain"><img src="/img/rachel.jpg" alt="a 3 picture collage. 2 pictures show the case and cards of a tarot deck created by Rachel. The third shows Rachel, a white person with turquoise hair, cat eye glasses, and contrasting striped jacket and dress, standing in front of paintings of shorelines."></div>
           <h3>Rachel Guinevere LordKenaga</h3>
           <div class="description">
             <p>I am an artist and art therapist living on Vashon. I'm most interested in evoking feelings and memory with my work. I will have my handmade Tarot deck and small oil paintings. I'll offer 1 card pulls for $20.</p>
             <p><a href="https://www.instagram.com/rglkart/">@rglkart on instagram</a> ● <a href="https://www.rglkart.com/">Rachel's website</a></p>
           </div>
         </div>
+        
+        <div class="artist left">
+          <div class="fit-contain"><img src="/img/greenhouse2.jpg" alt="a dilapidated greenhouse"></div>
+          <h3>Mags (Mary) McGinnis</h3>
+          <div class="description">
+            <p></p>
+            <p></p>
+          </div>
+        </div>
+
+        <div class="artist right">
+          <div class="fit-contain"><img src="/img/lee.jpg" alt="a four picture collage. two pictures show lee, a white person with curly hair and glasses; in one picture, wearing a colorful knit shawl. the other two frames show lee's work: 1, two leather card wallets with an elegant swoop on the back in vivid colors of leather; 2, a pile of greeting cards with a block-printed loon spread across front and back of the cards."></div>
+          <h3>Lee Cattarin</h3>
+          <div class="description">
+            <p>multidisciplinary artist and birder</p>
+            <p><a href="https://leecat.art/">Lee's website</a></p>
+          </div>
+        </div>
+
+        <div class="artist left">
+          <div class="fit-contain"><img src="/img/greenhouse0.jpg" alt="a dilapidated greenhouse"></div>
+          <h3>Logan Price</h3>
+          <div class="description">
+            <p></p>
+            <p></p>
+          </div>
+        </div>
+
+        <div class="artist right">
+          <div class="fit-contain"><img src="/img/greenhouse1.jpg" alt="a dilapidated greenhouse"></div>
+          <h3>Karen Biondo</h3>
+          <div class="description">
+            <p></p>
+            <p></p>
+          </div>
+        </div>
       </main>
     </div>
     <footer>