/*==========================================================================
  News overview
  ========================================================================== */
.news-overview
  position: relative

  // Offset coloring
  &:after
    content: ''
    position: absolute
    z-index: 0
    right: 0
    bottom: 0
    height: calc(100% - 120px)
    width: 50%
    background-color: white

  .news-placeholder
    position: relative
    z-index: 1
    background-color: white
    padding: 0 column(1)

    // Return link
    .return-link
      height: 120px
      +flex(flex-start, center)
      a
        font-size: 0.8rem
        color: $blue
        text-decoration: none
        font-weight: medium()
        transition: color 0.3s

        &:before
          content: ''
          margin-right: 10px
          +arrowBlue
          +translate3dRotate(0,0,0,180deg)
          transition: transform 0.3s

        &:hover
          color: $bluer
          &:before
            +translate3dRotate(-5px,0,0,180deg)

    /* News items
      ========================================================================== */
    .articles
      +flex(space-between, flex-start)
      +flex-rows

      article
        width: calc((100% - 30px) / 3)
        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: 100%
              background-image: url("/img/so-gradient.png")
              background-size: contain
              background-repeat: repeat-y
              opacity: 0.6
              [class^="vso"] &
                background-image: url("/img/vso-gradient.png")

            &.no-image
              &:after
                display: none

          .content
            position: relative
            z-index: 5
            padding: 30px
            width: 80%
            h3, .date
              text-shadow: 2px 2px 3px rgba(0, 0, 0, 0)
              transition: text-shadow 0.3s

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

              +respond-to-width(1000)
                font-size: 0.8rem

            .date
              color: $blue
              font-size: 0.9rem
              line-height: 1.2
              font-weight: medium()
              +respond-to-width(1000)
                font-size: 0.7rem

          [class^="vso"] &
            figure
              background-color: $lightTurquoise
              .overlay
                background-color: $turquoise
            .content
              .date
                color: $lightTurquoise

          &:hover
            figure
              .overlay
                width: 0
                opacity: 0
            .content
              h3, .date
                text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5)

        +respond-to-width(1500)
          width: calc((100% - 15px) / 2)