.candidate-card__body {
  @apply grid;

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

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

.candidate-card__position {
  @apply w-8 h-8 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-2 py-4;
}

.candidate-card__affiliation {
  @apply text-sm bg-grey-50 flex border-t border-b border-grey-150;

  > div {
    @apply py-2 px-4 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 p-4;
  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-4;
  }

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

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