.projects-home-row
  width: 90%

  .first-column, .second-column
    margin-right: 30px

  .first-column, .second-column, .third-column
    width: calc((100% - 61px) /3)
    float: left

  .mobile-column
    display: none

    .left-column, .right-column
      width: calc(50% - 5px)

  //#home-project-1,#home-project-3,#home-project-5,#home-project-6,#home-project-8,#home-project-9,#home-project-12, .coffee-home
  //  height: 415px
  //
  //#home-project-2,#home-project-4,#home-project-7,#home-project-10,#home-project-11
  //  height: 860px

  .project, .coffee-home
    margin-bottom: 30px
    background-size: cover
    background-position: 50% 50%

  #home-project-1
    height: 355px
  #home-project-2
    height: 635px
  #home-project-3
    height: 295px
  #home-project-4
    height: 505px
  #home-project-5
    height: 355px
  #home-project-6
    height: 255px
  #home-project-7
    height: 675px
  #home-project-8
    height: 300px
  #home-project-9
    height: 640px
  #home-project-10
    height: 500px
  #home-project-11
    height: 350px
  #home-project-12
    height: 300px

  .coffee-home
    height: 175px
    background: $black
    cursor: pointer
    margin: 0
    margin-bottom: 30px
    width: 100%
    display: block
    color: white
    +flex(center, center)
    +font-bold(80px, 80px)
    box-sizing: border-box
    +transition(all 0.3s)
    border: 0px solid $yellow

    &:hover
      em
        color: $yellow
      span:after
        opacity: 0

      &.left
        span:after
          +transform(translate3d(200px, 0, 0))
      &.right
        span:after
          +transform(translate3d(-300px, 0, 0))
      &.top
        span:after
          +transform(translate3d(0, 110px, 0))
      &.bottom
        span:after
          +transform(translate3d(0, -180px, 0))

    span
      color: white
      +font-bold(80px, 80px)
      position: relative
      &:after
        content: ''
        width: 100%
        height: 6px
        +position(absolute, null 0 0 0)
        background: $yellow
        +transform(translate3d(0,0,0))
        opacity: 1
        +transition(all 0.3s)
    em
      color: white
      +font-bold(80px, 80px)
      font-style: normal
      +transition(all 0.2s)

+media-query(1380px)
  .projects-home-row
    max-width: 900px
    width: 98%

    .first-column, .second-column, .third-column
      width: calc((100% - 41px) /3)

    .project.home, .coffee-home
      margin-bottom: 20px

    .first-column, .second-column
      margin-right: 20px

    .coffee-home
      height: 115px
      +font-bold(60px, 60px)
      span, em
        +font-bold(60px, 60px)


    #home-project-1
      height: 233px
    #home-project-2
      height: 417px
    #home-project-3
      height: 194px
    #home-project-4
      height: 332px
    #home-project-5
      height: 233px
    #home-project-6
      height: 168px
    #home-project-7
      height: 443px
    #home-project-8
      height: 197px
    #home-project-9
      height: 420px
    #home-project-10
      height: 330px
    #home-project-11
      height: 230px
    #home-project-12
      height: 196px

+media-query(900px)
  .projects-home-row
    max-width: 600px

    .first-column, .second-column, .third-column
      width: calc((100% - 21px) /3)

    .project.home, .coffee-home
      margin-bottom: 10px

    .first-column, .second-column
      margin-right: 10px

    .coffee-home
      height: 75px
      +font-bold(40px, 40px)
      span, em
        +font-bold(40px, 40px)
      span:after
        height: 3px

    #home-project-1
      height: 155px
    #home-project-2
      height: 275px
    #home-project-3
      height: 135px
    #home-project-4
      height: 215px
    #home-project-5
      height: 155px
    #home-project-6
      height: 115px
    #home-project-7
      height: 295px
    #home-project-8
      height: 130px
    #home-project-9
      height: 280px
    #home-project-10
      height: 210px
    #home-project-11
      height: 145px
    #home-project-12
      height: 145px

+media-query(600px)
  .projects-home-row
    .first-column, .second-column, .third-column
      display: none

    .mobile-column
      +flex(space-between, flex-start)

    .project.home
      width: 100%
      height: initial !important