/* 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)
    margin-bottom: 15px

    a
      position: relative
      display: block
      width: 100%
      text-decoration: none
      background-color: $brightBlue
      transition: background 0.4s

      figure
        position: relative
        width: 100%
        height: 0
        padding-bottom: 57.2%
        overflow: hidden

        .overlay
          position: absolute
          z-index: 1
          left: 0
          top: 0
          height: 100%
          width: 100%
          background-color: $blue
          background-size: cover
          background-position: center
          transform: scale3d(1, 1, 1)
          transition: transform 0.7s

      .content
        position: relative
        z-index: 5
        padding: 30px
        min-height: 137px

        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
        background-color: $lockBlue
        figure
          .overlay
            transform: scale3d(1.06, 1.06, 1)

  [class^="vso"] &
    p
      color: $darkTurquoise
    article
      a
        background-color: $darkTurquoise
        figure
          span
            background-color: $turquoise
        .content
          .date
            color: $textTurquoise !important

        &:hover
          background-color: $turquoise

  +respond-to-width(1500)

    .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
          padding: 25px
          min-height: 120px

          h3
            font-size: 1.1rem

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

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