BlogCard {
  padding: 1rem
  background-color: #fff

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

  :hover {
    border: 1px solid gainsboro 
    box-shadow: gainsboro 2px 2px 10px
  }

  display: flex
  flex-direction: column

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

    display: flex
    align-items: center

    div.Link {
      height: 2rem
      img.Avatar {
        width: 2rem
        height: 2rem
      }
    }

    div.name {
      margin-right: 1rem
    }
    div.timeago {
      $colorSubtle
    }
  }

  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: #f8f8f8

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

Thumbnail {
  border-radius: .5rem
  min-width: 8rem 
  min-height: 6rem
  width: 8rem
  height: 6rem
}