/* Read more news
    ========================================================================== */

.next-news-items
  margin-top: 60px
  padding-left: column(3, 15)
  p
    font-size: 1.05rem
    font-weight: bold()
    color: $darkBlue
    margin: 0 0 15px

  .main &
    .no-news.button
      margin-top: 10px


  .wrapper
    +flex(space-between, flex-start)

  article
    width: calc((100% - 15px) / 2)
    height: 200px
    margin-bottom: 15px

    a
      position: relative
      display: block
      height: 100%
      width: 100%
      text-decoration: none

      figure
        position: absolute
        width: 100%
        height: 100%
        background-color: $blue
        background-size: cover
        background-position: center

        .overlay
          position: absolute
          z-index: 1
          left: 0
          top: 0
          height: 100%
          width: 80%
          background-color: $brightBlue
          transition: opacity 0.5s, width 0.6s
        &:after
          content: ''
          position: absolute
          left: 0
          top: 0
          height: 100%
          width: 90%
          background-image: url("/img/so-gradient.png")
          background-size: contain
          background-repeat: repeat-y
          opacity: 0.6

      .content
        position: relative
        z-index: 5
        padding: 30px
        width: 75%

        h3
          color: white
          font-size: 1rem
          line-height: 1.2
          font-weight: bold()

        .date
          color: $blue
          font-size: 0.9rem
          line-height: 1.2
          font-weight: medium()


      &:hover
        figure
          .overlay
            width: 0
            opacity: 0

  [class^="vso"] &
    p
      color: $darkTurquoise
    article
      a
        figure
          background-color: $lightTurquoise
          &:after
            background-image: url("/img/vso-gradient.png")

          .overlay
            background-color: $turquoise
        .content
          .date
            color: $textTurquoise !important

  +respond-to-width(1300)

    .wrapper
      display: block

    article
      width: 100%
      max-width: 430px

  +respond-to-width(840)
    margin-top: 0
    padding-left: column(1, 14)

  +respond-to-width(500)
    padding-left: 0
    p
      padding-left: column(1, 14)

    .wrapper
      font-size: 0

    article
      height: auto
      width: 100%
      max-width: none
      background-color: $darkBlue
      margin-bottom: 1px

      &:nth-of-type(odd)
        background-color: $lockBlue

      a
        .content
          width: calc( 100% - 120px )
          padding: 25px
          min-height: 120px

          h3
            font-size: 1.1rem

          .date
            font-size: 0.9rem
            margin: 0 !important

        figure
          width: 120px
          right: 0
          top: 0

          .overlay
            display: none

          &:after
            display: none

    [class^="vso"] &
      article
        background-color: $darkTurquoise
        &:nth-of-type(odd)
          background-color: $turquoise