#work-at-block
  position: absolute
  right: 0
  bottom: 0
  +flex(space-between, flex-start)
  height: calc(100vw / 12 * 2)
  width: column(6, 12)
  background-color: $lightBrown
  text-decoration: none
  transition: background-color 0.4s

  +respond-to-width-beyond(1440)
    height: 240px
    width: column(5, 12)

  +respond-to-width(1350)
    width: calc(100vw / 12 * 7)

  +respond-to-width(1000)
    height: 200px

  .content
    width: column(3, 5)
    padding: 25px 30px

    h4
      margin: 0
      font-size: 1.4rem
      line-height: 1.4
      color: white

      span
        display: block

  .button
    position: absolute
    left: 30px
    bottom: 30px
    +flex(space-between, center)
    width: 220px
    padding: 10px 20px
    color: white
    font-weight: medium()
    border-color: rgba(white, 0.5)

    .counter
      +flex(center, center)
      width: 24px
      height: 24px
      font-size: 15px

    +respond-to-width(1200)
      display: none

  .icon
    position: absolute
    background-color: $lighterBrown
    right: 0
    top: 0
    +flex(center, center)
    width: column(2, 5)
    height: 100%

    .counter
      position: absolute
      right: -16px
      top: -16px
      display: none
      width: 32px
      height: 32px
      font-size: 18px

      +respond-to-width(1200)
        +flex(center, center)

    &:before
      content: ''
      display: inline-block
      +sprite(269px 1px, 85px, 84px)
      transform-origin: center
      transform: scale3d(1,1,1)
      transition: transform 0.4s

  .counter
    text-align: center
    color: white
    line-height: 1
    font-weight: bold()
    background-color: $red
    border-radius: 100%

    &:before
      position: relative
      top: -1px
      content: attr(data-counter)

  &:hover
    background-color: darken($lightBrown, 5%)
    .icon
      &:before
        transform: scale3d(0.8, 0.8, 1)