.blog-masthead
  background-color: $blue

.blog-strap
  font-family: sans-serif

.blog-wrapper
  background-color: $white
  display: flex
  flex-wrap: wrap
  justify-content: space-between
  padding: 5vh 5vw

.post-title
  background-color: rgba(0, 0, 0, .4)
  padding: 20px
  text-align: center

.post-title,
.post-subtitle
  font-weight: 300

.post-preview-wrapper
  flex-basis: 100%
  padding-bottom: 5vh

.post-preview-img
  background-position: center
  background-size: cover
  height: 40vh

.post-preview-text
  background-color: $white
  border: solid 1px rgb(230, 232, 237)
  border-radius: 10px
  box-shadow: 0 0 6px rgba(0, 0, 0, .1)
  margin: 0 auto
  margin-top: -15vh
  max-width: 512px
  padding: 20px 0
  transition: all 0.6s cubic-bezier(.2, .3, 0, 1)
  width: 90%

  h2,
  h3,
  p
    margin: 0
    padding: 0
    padding-bottom: 10px
    text-align: center

.post-preview-title,
.post-meta li
  color: $black
  transition: all .1s ease-in

// there must be a better way
.post-preview-title:hover,
.post-meta li:hover
  color: $vivid-blue

.post-meta
  display: inline-block
  font-size: .8rem
  margin: 0 auto

  i
    color: $soft-black

.post-tag
  background-color: $light-grey
  border-radius: 6px
  display: inline-block
  font-size: .7rem
  margin: 0 5px
  padding: 4px 8px

.blog-content
  margin: 10vh auto
  max-width: 768px
  width: 90%

  p
    font-size: 1.1rem
    line-height: 2rem

  a
    text-decoration: underline

  h1,
  h2,
  h3,
  h4,
  h5,
  h6
    padding: 3rem 0 0 0

.blog-image
  width: 100%

.theme-colors
  height: 90px
  stroke: $soft-black
  stroke-width: 1px
  width: 90px

.theme-images
  height: auto
  margin: auto
  max-height: 100px
  max-width: 300px
  padding: 15px 0
  width: auto

.flex-display
  align-items: center
  display: flex
  flex-wrap: wrap
  justify-content: center
  margin: auto
  padding: 40px 0

@media screen and ( min-width: 1024px )
  .post-preview-wrapper
    flex-basis: 42.5vw
    height: 55vh
    max-width: 600px
    padding: 0

  .theme-colors
    height: 120px
    width: 120px

  .post-preview-wrapper:hover

    .post-preview-text
      margin-top: -15.5vh
      box-shadow: 2px 4px 20px rgba(0, 0, 0, .1)

  .post-preview-text
    width: 80%

  .blog-wrapper
    padding: 10vh 5vw