.list-row
  background: $neutral

  &::after
    display: none

  .grid-row
    padding: 60px 0 100px
    max-width: 1000px

    +respond-to-width(880)
      padding-top: 100px

    h1
      margin: 0 0 60px
      font-size: 1.6rem
      line-height: 1.2
      font-family: $fontPrimary
      color: $darkblue
      text-align: left

  .list

    article
      position: relative
      z-index: 1

      + article
        margin-top: 40px

      a
        +flex(flex-start, center)
        position: relative
        background: white
        text-decoration: none
        transition: background 0.3s

        &::before
          $fakeBorderWidth: 3px
          content: ''
          position: absolute
          z-index: -1
          top: -$fakeBorderWidth
          left: -$fakeBorderWidth
          right: -$fakeBorderWidth
          bottom: -$fakeBorderWidth
          background: linear-gradient(45deg, $blue 0%, $red 100%)
          opacity: 0
          transition: opacity 0.3s

        .date
          display: block
          padding: 15px 40px
          border-right: 1px solid $borderColor
          font-size: 1.8rem
          font-weight: bold()
          font-family: $fontPrimary
          line-height: 1
          color: $darkblue
          transition: color 0.3s

        figure
          width: 120px
          margin-left: 25px
          border-radius: 10px
          overflow: hidden
          img
            width: 100%

        .content
          padding: 25px
          width: calc(100% - 122px)

          &.with-image
            width: calc(100% - 268px)

          h2
            margin: 0 0 6px
            font-size: 1.1rem
            line-height: 1.2
            color: $blue
            font-weight: bold
            transition: color 0.3s

          .read-more
            font-size: 0.8rem
            line-height: 1.2
            color: $blue
            font-weight: bold
            opacity: 0.5

            .arrow
              position: relative
              top: 2px
              display: inline-block
              margin-left: 10px
              width: 12px
              transform: translate3d(0,0,0)
              transition: transform 0.3s

              .arrow-icon
                max-height: 18px
                transform-origin: center
                transform: rotate(270deg)
                path
                  fill: $blue

        &:hover
          background: mix($neutral, white, 55%)

          &::before
            opacity: 1

          .date
            color: $blue
          h2
            color: $red

          .content
            .read-more
              .arrow
                transform: translate3d(5px,0,0)

        +respond-to-width(740)
          figure
            display: none

          .date
            font-size: 1.5rem
            padding: 15px 25px

          .content
            width: calc(100% - 85px)

            &.with-image
              width: calc(100% - 85px)

            h2
              font-size: 0.9rem

            .read-more
              font-size: 0.8rem