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-top: .5rem;
+    padding: .5rem 0 0;
   }
 
-  .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;
 }