.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