.cards-wrapper
  +clearfix
  position: relative
  .card
    background: #fff
    margin-bottom: 2rem

    +media($mobile)
      +span-columns(12 of 12)
      +omega(2n)

    +media($tablet)
      +span-columns(6 of 12)
      +omega(2n)

    +media($desktop)
      +span-columns(4 of 12)
      +omega(3n)

    header
      +pad(1rem)
      +clearfix
      color: #fff
      margin-bottom: .5em
      h4
        overflow: hidden
        text-overflow: ellipsis
        white-space: nowrap
      .avatar-wrapper
        +span-columns(5)
        position: relative
        .avatar
          +position(absolute, 0 0)
      .info-wrapper
        +span-columns(7)

    .card-body
      +pad(1rem)
      +clearfix


    .meta
      font-size: .9em
      color: darken(#fff, 10)
      li
        overflow: hidden
        text-overflow: ellipsis
        white-space: nowrap
      .fa
        font-size: .9em


    .headline
      height: 3em
      font-style: italic
      margin-bottom: 2rem

    .contact-info
      margin: -1rem
      padding: 1rem
      background: lighten($gray, 10)

    &.female
      header
        background: lighten($pink, 10)

    &.male
      header
        background: lighten($blue, 10)

    &:hover
      header
        .avatar
          +transform(scale(1.2))
          margin-top: -30px

.card-enter
  +transition(.5s linear all)
  opacity: 0.01

.card-enter.card-enter-active
  opacity: 1

.card-leave
  +transition(.5s linear all)
  opacity: 1

.card-leave.card-leave-active
  opacity: 0.01

