/** 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: $newsPostBgColor
    color: $newsPostTextColor

    transition: background 0.4s, box-shadow 0.4s

    a
      color: $white

    &:hover
      cursor: pointer
      background: $newsPostBgHoverColor
      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
      height: 100%
      +flex(center, flex-start)
      flex-direction: column
      padding: $paddingSmallTextBlock

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

      h2
        color: $newsPostTitleColor
        margin-bottom: 5px
      h4
        color: $newsPostSubTitleColor

      .arrow-right
        margin-top: 10px
        display: block
        width: 35px
        height: 35px
        background:
          image: url('/img/icons/arrows-right.svg')
          repeat: no-repeat

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


/** SINGLE POSTS **/

.single-post
  +flex()

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

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

    a
      color: $white

    .title
      color: $singleNewsPostTitleColor
      margin-bottom: 5px
    .subtitle
      color: $singleNewsPostSubTitleColor
      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: $singleNewsPostLinkColor
        &:hover
          color: $singleNewsPostLinkHoverColor

/** 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: $primaryBtnColor
  color: $primaryBtnTextColor
  transition: background 0.4s, color 0.4s
  cursor: pointer
  margin: 0 auto 100px auto
  +respond-to-width(900)
    margin: 0 auto 50px auto

  a
    color: $primaryBtnTextColor

  &:hover
    background:
      color: $primaryBtnHoverColor
    color: $primaryBtnTextHoverColor