Responsive candidate table row

source/_patterns/01-molecules/03-candidate-table-row/candidate-table-row.mustache

 <div class="candidate-table-row">
-  <div class="candidate-table-row__position head-allcaps-heavy-2xs pr-4 pl-7 text-right">{{ person.position }}</div>
-  {{> atoms-basic-avatar(classes: "w-5 candidate-table-row__avatar") }}
-  <div class="candidate-table-row__name head-allcaps-heavy-2xs font-bold px-4">{{ person.first }} {{ person.last }}</div>
-  <div class="candidate-table-row__bio head-allcaps-3xs px-4 border-l border-grey-150">{{ person.age }} let, {{ person.occupation }}</div>
-  <div class="candidate-table-row__affiliation pl-4 pr-7">
+  <div class="candidate-table-row__position head-allcaps-heavy-2xs text-right">{{ person.position }}</div>
+  {{> atoms-basic-avatar(classes: "candidate-table-row__avatar") }}
+  <div class="candidate-table-row__name head-allcaps-heavy-2xs font-bold">{{ person.first }} {{ person.last }}</div>
+  <div class="candidate-table-row__bio head-allcaps-3xs">{{ person.age }} let, {{ person.occupation }}</div>
+  <div class="candidate-table-row__affiliation">
     {{> atoms-basic-avatar(classes: "w-3 mr-1") }}
     <span class="font-bold font-condensed">{{ person.party }}</span>
   </div>

source/css/molecules/candidate-table-row.pcss

 .candidate-table-row {
   /* Relative for box shadow to layer properly. */
-  @apply relative w-full p-sm grid grid-cols-candidate-table-row items-center;
+  @apply relative w-full py-2 grid items-center;
+
+  grid-template-areas: "position avatar name"
+                       "position avatar bio"
+                       "position avatar affiliation";
 
   &:after {
     content: '';
@@ -12,10 +16,54 @@
   }
 }
 
+.candidate-table-row__position {
+  @apply px-3;
+  grid-area: position;
+}
+
+.candidate-table-row__avatar {
+  @apply w-7;
+  grid-area: avatar;
+}
+
+.candidate-table-row__name {
+  @apply px-3;
+  grid-area: name;
+}
+
 .candidate-table-row__bio {
-  @apply truncate;
+  @apply truncate py-sm px-3;
+  grid-area: bio;
 }
 
 .candidate-table-row__affiliation {
-  @apply flex items-center justify-start whitespace-no-wrap;
+  @apply flex items-center justify-start whitespace-no-wrap px-3;
+  grid-area: affiliation;
+}
+
+@screen md {
+  .candidate-table-row {
+    @apply py-sm grid-cols-candidate-table-row;
+    grid-template-areas: "position avatar name bio affiliation";
+  }
+
+  .candidate-table-row__avatar {
+    @apply w-5;
+  }
+
+  .candidate-table-row__name {
+    @apply px-4;
+  }
+
+  .candidate-table-row__position {
+    @apply pl-7;
+  }
+
+  .candidate-table-row__bio {
+    @apply border-l border-grey-150 py-0 px-4;
+  }
+
+  .candidate-table-row__affiliation {
+    @apply pl-4 pr-7;
+  }
 }