BlogCard {
  padding: 1.5rem 0
  $backgroundPrimaryText

  border: 1px solid #fff
  transition: all .5s ease

  display: flex
  flex-direction: column

  div.context {
    font-size: .8rem
    margin-bottom: 1.5rem

    display: flex
    align-items: center

    img.Avatar {
      margin-right: .5rem
    }

    div.name {
      margin-right: 1rem
    }
  
    div.Timeago {}
  }

  div.content {
    display: flex
    flex-direction: row
    flex-grow: 1

    cursor: pointer


    div.Thumbnail {
      margin-right: 1rem
    }

    div.text {
      display: flex
      flex-wrap: wrap

      h2 {
        $markdownLarge
        margin: 0 .5rem 0 0
      }
      div.Button.-channel {}
      div.summary {
        flex-basis: 100%
      }
    }
  }
  background-color: #fff

  -unread {
    div.content {
      font-weight: bold
    }
    background-color: #fff
  }
}

Thumbnail {
  border-radius: .5rem
  min-width: 9rem 
  width: 9rem
  min-height: 7rem
  height: 7rem

  -empty {
    color: #fff
    font-size: 1.8rem
    opacity: .8

    display: flex
    justify-content: center
    align-items: center
  }
}