.wrapper

&.posts-wrapper
  margin-top: $section-margin * 1.2 !important
  &.page-posts
    margin-top: $section-margin/2 !important
  .post
    &.hidden
      display: none !important
      visibility: hidden !important
    h2
      font-size: 25px
      @media screen and ($tablet)
        font-size: 20px
        margin-bottom: 12px
      margin-bottom: 8px
      &.with-img
        margin-left: 330px
        @media screen and ($tablet)
          margin-left: 230px
        @media screen and ($mobile)
          margin-left: 0
    h3
      margin-top: 10px
    margin-bottom: 50px
    padding-bottom: 50px
    @media screen and ($tablet)
      margin-bottom: 30px
      padding-bottom: 30px
    border-bottom: 1px solid $light-grey
    &:last-of-type
      border-bottom: none
      margin-bottom: 0
    .post-contents
      .right
        display: flex
        justify-content: flex-start
        align-items: flex-start
        flex-direction: column
        flex-grow: 1
        width: 100%
        .date
          font-size: 13px
          color: $dark-grey
          margin-bottom: 12px
          font-style: italic
          display: block
      .left
        flex: 1 0 auto
        @media screen and ($mobile)
          width: 100%
        img
          margin-right: 30px
          margin-top: -30px
          width: 300px
          @media screen and ($tablet)
            width: 200px
          @media screen and ($mobile)
            width: 100%
            margin: 0
            margin-bottom: 20px
      display: flex
      justify-content: center
      align-items: flex-start
      flex-direction: row
      @media screen and ($mobile)
        flex-direction: column
      p
        font-size: 15px
        color: $dark-grey
        line-height: 2
      .button
        margin-top: 10px
&.single-post
  .date
    font-size: 13px
    color: $dark-grey
    margin-bottom: 15px
    font-style: italic
    display: block
    margin-top: -20px
  p
    font-size: 15px
    color: $dark-grey
    line-height: 2