Relationships {
  header {
    margin-bottom: .8rem
    border-bottom: 1px gainsboro solid
  }

  div {
    display: flex
    flex-wrap: wrap
    justify-content: space-between
    align-content: flex-start

    min-height: 5rem
    margin-bottom: 2rem

    header {
      flex-basis: 100%
      
      $textSubtle
      font-size: .9rem
      
      margin-bottom: .2rem
    }

    section a {
      margin-right: .2rem

      img { $avatar-small }
    }
  }

  div.your-status {
    justify-content: flex-start
    align-items: center

    margin: 0 

    section.action {
      button { margin-left: 0 }

    }
    section.status {
    
    }
  }

  div.friends {
    section a {
      margin: 0 .2rem 0.2rem 0

      img { 
        $avatar-large
      }
    }
  }

  div.follows {
  }

  div.followers {
  }
}

$avatar-large {
  width: 56px
  height: 56px
}

$avatar-small {
  width: 32px
  height: 32px
}