.reviews-list
  li
    float: left
    width: 33.33333%

    border-bottom: 1px solid $borderLight

    +respond-to(mobileNavigation)
      width: 50%

    +respond-to-width(640)
      width: 100%

.review
  position: relative
  padding: 40px 12.5% 40px 25%

  .avatar
    display: block
    +position(absolute, 40px null null 12.5%)
    overflow: hidden

    margin: 0 0 0 -25px
    width: 50px
    height: 50px

    border-radius: 25px
    background: $purpleLight

  .name
    display: block
    margin-bottom: .666665em
    font-size: 1.111111111em
    +RalewayBold

    .small
      font-size: .777777778em
      +RalewayRegular

  .date
    font-size: .777777778em
    color: #C0BAC2

  .story
    display: block
    margin-bottom: 1.33333em
    font-size: .888888889em

  .stars
    display: inline-block
    margin-right: 20px

  .star
    display: inline-block
    +sprite(-450px,-70px,17px,16px)

    &.empty
      opacity: .4

  .button
    margin-top: 30px

  &.write
    background: #FAFAFB

    .avatar
      +sprite(-460px, -210px, 50px, 50px)
      border-radius: 0
      background-color: transparent

.reviews
  .line
    position: absolute
    top: 0
    width: 1px
    z-index: 5
    height: 100%
    background: $borderLight

    &.one
      left: 33.32%

      +respond-to(mobileNavigation)
        left: 50%

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

    &.two
      left: 66.62%

      +respond-to(mobileNavigation)
        display: none