/** OVERVIEW LATEST POSTS **/

.latest-posts
  margin-bottom: 100px
  +flex()
  +flex-rows

  +respond-to(small)
    flex-direction: column

  +respond-to-width(900)
    margin-bottom: 50px

  .post-block
    width: $contentGrid*5.5
    +respond-to(small)
      width: 100%

    margin-bottom: 25px
    +flex(flex-start, flex-start)

    +respond-to(small-mobile)
      flex-direction: column

    background:
      color: $mainTextBlockBgColor
    color: $white

    transition: background 0.4s, box-shadow 0.4s

    a
      color: $white

    &:hover
      cursor: pointer
      background: lighten($primaryColorDarker, 3%)
      box-shadow: 0 14px 28px rgba(0,0,0,0.15), 0 10px 10px rgba(0,0,0,0.15)

    .post-image
      background:
        position: center center
        size: cover
      min-width: 250px
      height: 250px

      +respond-to(small)
        min-width: 50%
        width: 50%
      +respond-to(small-mobile)
        min-width: 100%
        width: 100%

    .post-intro
      width: 100%
      height: 100%
      +flex(center, flex-start)
      flex-direction: column
      padding: $paddingSmallTextBlock

      +respond-to(small-mobile)
        width: 100%

      h2
        width: 100%
        margin-bottom: 5px
      h4
        width: 100%
        color: $tertiaryColor

      p
        width: 100%

  .timestamp
    +font-default(14px, 20px)
    color: $white
    margin-bottom: 10px


/** SINGLE POSTS **/

.single-post
  +flex()

  .post-block
    width: 100%
    margin-bottom: 25px
    +flex(flex-start, flex-start)
    background:
      color: $primaryColor
    color: $white
    transition: background 0.4s

    +respond-to(mobile)
      flex-direction: column

    a
      color: $white

    .title
      margin-bottom: 5px
    .subtitle
      color: $tertiaryColor
      margin-bottom: 25px

    .post-image
      background:
        position: center center
        size: cover
      width: 50%
      height: 100%
      max-height: 1080px

      +respond-to(mobile)
        min-height: 250px
        width: 100%

    .post-content
      //max-width: $textMaxWidth
      padding: $paddingSmallTextBlock

      a
        transition: color 0.3s ease
        color: $secondaryColor
        &:hover
          color: $highlightColor

/** DYNAMIC PAGES **/

.dynamic
  p
    max-width: $textMaxWidth
  .content-container
    width: 100%

.full-text-block
  max-width: $textMaxWidth

/** POST BACK BUTTON **/

.post-back-button
  +flex(center, center)
  width: 225px
  height: 50px
  background:
    color: $tertiaryColor
  color: $black
  transition: background 0.4s
  cursor: pointer
  margin: 0 auto 100px auto
  +respond-to-width(900)
    margin: 0 auto 50px auto

  a
    color: $linkColor
  &:hover
    background:
      color: $white