candidate-card.pcss

.candidate-card__body {
  @apply grid;

  grid-template-areas: "avatar bio"
                       "affiliation affiliation"
                       "social social";
}

.candidate-card__avatar {
  @apply relative w-8 py-2;
  grid-area: avatar;
}

.candidate-card__position {
  @apply w-4 h-4 absolute bg-black text-white text-base rounded-full font-normal font-alt text-center;
  top: 1rem;
  left: 0.5rem;
  line-height: 2rem;
}

.candidate-card__bio {
  @apply px-1 py-2;
}

.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__bio {
  grid-area: bio;
}

.candidate-card__affiliation {
  grid-area: affiliation;
}

.candidate-card__social {
  @apply text-center;
  grid-area: social;
}

@screen sm {
  .candidate-card {
    padding-top: 3rem;
  }

  .candidate-card__body {
    @apply text-center;
    grid-template-areas: "avatar"
                         "bio"
                         "affiliation"
                         "social";
  }

  .candidate-card__bio {
    @apply p-2;
  }

  .candidate-card__avatar {
    @apply inline-block relative m-auto w-9 py-0;
    margin-top: -3rem;
  }

  .candidate-card__position {
    @apply w-5 h-5 text-xl;
    top: 1.75rem;
    left: -0.5rem;
    line-height: 2.5rem;
  }
}