.project-detail
  .project-detail-content
    position: relative

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

      .left
        position: absolute
        top: 0
        left: 0
        display: block
        height: 100%
        width: column(5, 28)
        background: $black

      //.right

    .grid-row
      position: relative
      z-index: 2

      &:before
        content: ''
        position: absolute
        top: 0
        left: 0
        display: block
        height: 100%
        width: column(7, 24)
        background: linear-gradient(90deg, $blackGradient)

      .sub-menu, .dynamic-placeholder
        position: relative
        z-index: 2
        display: inline-block
        vertical-align: top
        font-size: 1rem
        line-height: 1.6

      .sub-menu
        width: column(3, 12)

      .dynamic-placeholder
        margin-left: column(1, 12)
        width: column(8, 12)
        padding: 72px 0 100px

        h1
          font-size: 1.4rem
          line-height: 1.2
          color: $semiBlack
          font-weight: semi-bold()
          margin: 0 0 32px

    +respond-to-width(840)
      .background
        display: none

      .grid-row
        width: 100%
        +flex(flex-start, flex-start)
        +flex-rows

        &:before
          display: none

        .sub-menu
          width: 100%
          padding: 50px column(1, 12)
          +order(2)
          background: linear-gradient(45deg, $blackGradient)


        .dynamic-placeholder
          +order(1)
          padding-top: 50px
          width: column(10, 12)