Cards, candidate cards, more headings

source/css/molecules/candidate-card.pcss

+.candidate-card {
+  @apply text-center;
+  padding-top: 3rem;
+}
+
+.candidate-card__avatar {
+  @apply inline-block relative;
+  margin-top: -3rem;
+}
+
+.candidate-card__position {
+  @apply w-5 h-5 absolute bg-black text-white rounded-full text-xl font-normal font-alt text-center;
+  top: 1.75rem;
+  left: -0.5rem;
+  line-height: 2.5rem;
+}
+
+.candidate-card__affiliation {
+  @apply text-sm bg-grey-50 flex border-t border-b border-grey-150;
+
+  > div {
+    @apply py-1 px-2 flex items-center justify-center;
+
+    &:not(:first-child) {
+      @apply border-l border-grey-150;
+    }
+
+    &:last-child {
+      flex: 1;
+    }
+  }
+}
+
+
+.candidate-card--shift-lg {
+  margin-top: 11rem;
+
+  .candidate-card__avatar {
+    margin-top: -11rem;
+  }
+}

source/css/molecules/social-icon-group.pcss

 .social-icon-group {
-  @apply space-x-1;
+  /* @apply space-x-1; */
 }

source/css/organisms/candidate-card-list.pcss

+.candidate-card-list {
+  @apply grid grid-flow-row grid-cols-4 gap-0 row-gap-2;
+}
+
+
+.candidate-card-list__item .candidate-card__wrapper {
+  @apply pr-1 ml-1 border-r border-grey-100;
+}
+
+.candidate-card-list__item--last .candidate-card__wrapper {
+  @apply border-0;
+}

source/css/style.pcss

-@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Roboto+Condensed:wght@300;400;700&family=Roboto:ital,wght@0,300;0,400;0,500;1,400&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Roboto+Condensed:wght@300;400;700&family=Roboto:ital,wght@0,300;0,400;0,500;1,300;1,400&display=swap');
 
 /**
 * This injects Tailwind's base styles and any base styles registered by
@@ -12,27 +12,30 @@
  */
  @import "tailwindcss/components";
 
-
  /**
- * This injects Tailwind's utility classes and any utility classes registered
-* by plugins.
-*/
-@import "tailwindcss/utilities";
-
-/**
-* Custom components
-*/
+ * Custom components
+ */
+@import "./atoms/avatar.pcss";
 @import "./atoms/button.pcss";
+@import "./atoms/card.pcss";
 @import "./atoms/contact-line.pcss";
 @import "./atoms/heading.pcss";
 @import "./atoms/paragraph.pcss";
 @import "./atoms/social-icon.pcss";
 
 @import "./molecules/badge.pcss";
+@import "./molecules/candidate-card.pcss";
 @import "./molecules/social-icon-group.pcss";
 
+@import "./organisms/candidate-card-list.pcss";
 @import "./organisms/footer.pcss";
 
+/**
+* This injects Tailwind's utility classes and any utility classes registered
+* by plugins.
+*/
+@import "tailwindcss/utilities";
+
 /**
  * Custom utilities
  */

tailwind.config.js

 module.exports = {
   theme: {
+    extend: {
+      maxWidth: {
+        'xxs': '16rem',
+      }
+    },
     fontFamily: {
       alt: ['Bebas Neue', 'Helvetica', 'Arial', 'sans-serif'],
       body: ['Roboto', 'Helvetica', 'Arial', 'sans-serif'],
@@ -29,7 +34,9 @@ module.exports = {
       'black': '#000000',
       'white': '#ffffff',
       'grey': {
+        '50': '#f7f7f7',
         '100': '#f3f3f3',
+        '150': '#00000012',
         '200': '#adadad',
         '300': '#4c4c4c',
         '400': '#343434',
@@ -178,5 +185,9 @@ module.exports = {
       textUnset: false,        // whether to generate utilities to unset text properties
       componentPrefix: 'typeset-',  // the prefix to use for text style classes
     }),
+    require('tailwindcss-elevation')(['responsive', 'hover'], {
+      color: "#dddddd",
+      opacityBoost: '0.23',
+    }),
   ]
 }