BlogCard {
  padding: 1rem
  $backgroundPrimaryText

  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

    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%
      }
    }
  }

}

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