.articles-block
  padding: 20px 0 120px
  max-width: calc(1125px + 16.66666666666%)
  margin: auto


  h3
    margin: 0 auto 15px auto
    width: 95%

    span
      +arrowBottomWhite
      margin-left: 10px
      display: inline-block
      padding-bottom: 2px

  .article-footer
    background: $background

    h3
      text-align: center
      line-height: 60px

      span
        +arrowRightWhite
        margin-left: 10px
        display: inline-block
        padding-bottom: 2px

.main-content .content-red-block > div.background-container
  position: absolute
  margin-top: 63px
  width: 50%
  right: 0

  .background-article
    width: 100%
    right: -90%

    &:nth-of-type(even)
      background: $orange url('/images/structure/cross_pattern.png')
    &:nth-of-type(odd)
      background: white url('/images/structure/block_pattern.png')

  .background-footer
    background: $background
    height: 60px

.article
  min-height: 200px


  .article-image
    height: 100%
    background-size: cover
    background-position: 50% 50%
    cursor: pointer

  .article-content
    height: 100%
    cursor: pointer
    overflow: hidden

    .date
      position: absolute
      z-index: 1
      top: 10%
      color: black
      text-transform: uppercase
      +audiBold

    .article-wrapper
      position: absolute
      bottom: 10%
      width: 70%
      z-index: 1

      h4
        font-size: 28px
        line-height: 28px
        margin-bottom: 10px

      p
        font-size: 18px
        color: #000000

  .icon-wrapper
    width: 12px
    height: 12px
    padding: 10px

    position: absolute
    z-index: 1
    right: 3.5%
    bottom: 10%

    border: 2px solid
    border-radius: 40px
    +transition(right 0.5s)

  .article-hover
    border-radius: 999999px
    width: 200px
    height: 200px
    +position(absolute, -200px null null -200px)
    background: lighten($orange, 5%)
    z-index: 0
    +transform(scale(0.0))
    +transition(all 0.6s)

.article
  overflow: hidden

  .article-content
    background: $orange

    h4
      color: white

  .icon-wrapper
    border-color: white

    .icon
      +arrowRightWhiteLarge

  &:hover
    .article-hover
      +transform(scale(11.0))


.article:nth-of-type(odd)
  .article-content
    background: white

    h4
      color: $orange

    .article-hover
      background: darken(white, 5%)

  .icon-wrapper
    border-color: $orange

    .icon
      +arrowRightOrangeLarge



+media-query-larger(1750px)
  .article
    .article-content




+media-query(1400px)
  .article
    .article-content
      .article-wrapper
        h4
          font-size: 21px
          line-height: 24px

        p
          font-size: 14px


+media-query(900px)
  .articles-block
    width: 100%
    margin-left: 0
  .article
    .article-content
      .article-wrapper
        p
          display: none

+media-query(500px)
  .article
    .article-content
      .icon-wrapper
        display: none