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 

    display: flex

    section {
      button { margin: 0 }

      -friendship {
        display: flex
        div.relationship-status {
          margin: auto
          margin-left: .5rem
        }

      }
      -blocking {
        margin-left: 8rem
        position: relative

        button {}

        div.explainer {
          visibility: hidden
          position: absolute
          background: #fff
          width: 24rem
          left: 1rem
          bottom: 2rem
          padding: .5rem
          box-shadow: rgba(0, 0, 0, 0.2) 2px 2px 8px

          ul {
            font-size: .8rem
            padding-left: 1rem
          }
        }

        :hover {
          div.explainer {
            visibility: visible
          }
        }
      }
    }

  }

  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
}