.why-anvil-about-row
  position: relative
  z-index: 3
  background-color: $darkerBrown

  .background
    position: absolute
    left: 0
    top: 0
    width: 100%
    height: 100%

    .overview-page-background
      position: absolute
      left: 50%
      height: 100%
      width: calc(100vw / 14 * 3)
      max-width: 360px

      &:after
        content: ''
        position: absolute
        opacity: 0.08
        right: -40px
        top: 0
        width: 40px
        height: 100%
        background: linear-gradient(to left, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 65%,  rgba(0,0,0,1) 100%)


  .grid-row
    position: relative
    padding: calc(100vw / 12) 0 0

    +respond-to-width-beyond(1440)
      padding: 120px 0 0

    .content, .anvil-group-companies
      display: inline-block
      vertical-align: top

    .content
      width: column(9, 12)
      padding: 0 column(4, 12) calc(100vw / 12) column(1, 12)

      +respond-to-width-beyond(1440)
        padding-bottom: 120px


      .kms-content
        h2
          margin-top: 0
          color: white

          &:before
            content: ''
            +sprite(411px 28px, 27px, 25px)
            display: inline-block
            margin-right: 15px

        p
          color: $lightBrown

      .button
        color: white
        margin-top: 30px

    .anvil-group-companies
      width: column(3, 12)
      padding: 0 column(0.5, 12) calc(100vw / 12 * 3)

      +respond-to-width-beyond(1440)
        padding-bottom: 360px

      h5
        color: $lightBrown
        font-weight: medium()
        font-size: 1rem
        line-height: 1.2
        margin: 0 0 50px

      ul
        list-style: none
        padding: 0
        margin: 0

        li
          font-size: 0.9rem
          line-height: 1.4

          + li
            margin-top: 5px

          a
            color: $lightBrown
            transition: color 0.3s
            text-decoration: none

            &:hover
              color: rgba($lightBrown, 0.5)


          &.active
            a
              color: white
              font-weight: bold()

  +respond-to-width(1450)
    .background
      .overview-page-background
        width: calc(100vw / 14 * 8.5)
        max-width: none
        left: 0

    .grid-row
      .anvil-group-companies
        width: column(4, 12)
      .content
        width: column(8, 12)
        padding: 0 column(1, 12) calc(100vw / 12 * 2.5)

      #reference-block
        max-width: 600px

  +respond-to-width(1200)
    .grid-row
      .content
        padding: 0 column(1, 12) calc(100vw / 12 * 2.5 + 40px)

  +respond-to-width(1000)
    .grid-row
      padding: calc(100vw / 12) 0

      .content
        padding: 0 column(1, 12) calc(100vw / 12)

      #reference-block
        width: column(12, 14)
        max-width: 700px
        //height: 200px
        margin-left: auto
        margin-right: auto

  +respond-to-width(900)
    .background
      .overview-page-background
        display: none

    .grid-row
      .anvil-group-companies
        display: none

      .content
        width: 100%

  +respond-to-width(700)
    .grid-row
      width: 100%
      padding-bottom: 0

      .content
        padding: 0 40px calc(100vw / 12)

      #reference-block
        width: 100%
        margin-left: 0