candidate-card.pcss

.candidate-card__body {
  @apply grid;

  grid-template-areas: "avatar bio"
                       "affiliation affiliation"
                       "social social";
  /* Needs to match .candidate-card__avatar width */
  grid-template-columns: theme("width.24") 1fr;
}

.candidate-card__avatar {
  @apply relative w-24 pl-4 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 p-4;
}

.candidate-card__bio-item {
  @apply font-light font-condensed;
}

.candidate-card__affiliation {
  /* No vertical padding, proper spacing guaranteed by leading-10 - we do not expect line breaks here. */
  @apply text-sm bg-grey-50 flex border-t border-b border-grey-125 leading-10;

  > div {
    @apply px-4 flex items-center;

    &:not(:first-child) {
      @apply border-l border-grey-125;
    }

    &:last-child {
      flex: 1;
    }

    &:first-child {
      @apply w-24 justify-center;
    }

    @screen md {
      @apply justify-center;

      &:first-child {
        @apply w-auto text-left;
      }
    }
  }
}

.candidate-card__bio {
  grid-area: bio;
}

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

.candidate-card__social {
  @apply p-4;
  grid-area: social;

  @screen md {
    @apply text-center;
  }
}

@screen sm {
  .candidate-card {
    @apply flex flex-col h-full;
    padding-top: 3rem;
  }

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

  .candidate-card__bio {
    @apply p-4;
    /* This adjusts the height to keep other parts (like affiliation) uniformly
    aligned one to another. Adjustment is necessary in case of longer
    names/descriptions. */
    min-height: 10rem;
  }

  .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;
  }

  .candidate-card__social {
    @apply flex-grow;
  }
}