
.owner-header
  padding: 0 $column-gutter/2
  margin-bottom: 3rem
  color: #969496
  a
    color: #969496
  .owner-title
    margin: .3em 0 .2em
    font-size: 36px
    font-weight: 400
    line-height: .9
    @media #{$medium-up}
      white-space: nowrap
  .owner-handle
    margin: 0
    font-size: $font-size-ml
    .icon
      width: 1.1em
      height: 1.2em
      vertical-align: middle
    a:hover
      text-decoration: underline
  img
    border-radius: 50%
    background-color: #F4F3ED

  .sync-button
    margin-top: .8rem
    p, button
      margin: 0
  .sync-last
    color: #969496
    font-size: $font-size-sm

.owner-avatar,
.owner-info
  @extend %inline-block
  vertical-align: middle
  
.owner-avatar
  width: grid-calc(4, 12)
  @media #{$medium-up}
    width: grid-calc(2, 12)

.owner-info
  width: grid-calc(7, 12)
  @media #{$medium-up}
    width: grid-calc(29, 36)
    position: relative
    overflow: hidden
    &:after
      content: ""
      @include fadeOut(right, -90deg, $white)

.tabs--owner
  padding : 0 $column-gutter/2

  .active,
  .active:hover,
    position: relative
    color: $teal-dark
    &:after
      content: ""
      position: absolute
      left: 0
      bottom: -0.25em
      width: 100%
      height: 2px
      background-color: $teal-light
  .active
    font-weight: 600

.tabnav--owner
  margin-bottom: 1.5rem
  @media #{$medium-up}
    height: 2.2em
    border-bottom: solid 2px $cream-dark


.owner-tiles
  padding: 0
  list-style-type: none

  .build-status
    text-transform: capitalize

.owner-tile
  padding: .4em 0 .3em

  @media #{$medium-up}
    & > div:first-of-type
      width: 30%
      padding-left: 1em
    & > div:nth-of-type(2)
      width: 10%
    & > div:nth-of-type(3)
      width: 15%
    & > div:nth-of-type(4)
      width: 15%
    & > div:nth-of-type(5)
      width: 24%
