.projects

  .projects-overview-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(11, 28)
        background: $black

      .right
        position: absolute
        top: 0
        right: 0
        display: block
        height: 100%
        width: column(17, 28)
        background:
          image: url("/img/backgrounds/projects.jpg")
          size: cover
          position: center right

        &:after
          content: ''
          position: absolute
          left: 0
          top: 0
          width: 100%
          height: 100%
          background: linear-gradient(90deg, $blackGradient)
          opacity: 0.8


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

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

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

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

      .content
        margin-left: column(1, 12)
        width: column(6, 12)
        padding: 72px 0 100px
        max-width: 660px

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

        h2
          font-size: 1rem
          line-height: 1.2
          color: white
          font-weight: semi-bold()
          margin: 0 0 1rem

        p
          font-size: 0.8rem

    +respond-to-width(900)
      .background
        .left
          display: none
        .right
          width: 100%

      .grid-row
        +respond-to-width(840)
          width: 100%

        &:before
          display: none

        .sub-menu
          display: none

        .content
          width: column(10, 12)



  .overview
    //background: linear-gradient(45deg, $blueGradient)
    padding: 60px 0

    article
      position: relative
      width: 100%
      max-width: 415px
      margin-bottom: 60px
      box-shadow: 0px 0px 40px 0px rgba(0,0,0,0.2)

      @supports (display: flex)
        margin-bottom: 0

      &:last-of-type
        margin-bottom: 0

      figure
        position: relative
        z-index: 2
        width: 100%
        height: 0
        padding-bottom: 100%
        background: linear-gradient($blackGradient)

        &:after
          content: ''
          opacity: 0
          position: absolute
          left: 0
          top: 0
          display: block
          width: 100%
          height: 100%
          background: linear-gradient($redGradient)
          transition: opacity 0.3s

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

          background-size: cover
          background-position: center

        figcaption
          position: absolute
          z-index: 2
          left: 28px
          bottom: 25px
          +flex(space-between, flex-end)
          width: calc(100% - 56px)

          font-size: 1.3rem
          line-height: 1.25
          font-weight: semi-bold()
          color: $lightGray
          transition: color 0.3s

          p
            width: calc(100% - 40px)
            margin: 0

          .arrow
            position: relative
            left: -3px
            bottom: -5px
            display: inline-block
            width: 16px
            transform: translate3d(0,0,0)
            transition: transform 0.3s

            .arrow-icon

              transform-origin: center
              transform: rotate(270deg)
              .st0
                fill: $lightGray
                transition: fill 0.3s

          &.colored
            color: $black
            .arrow
              .arrow-icon
                .st0
                  fill: $black

      &:hover
        figure
          &:after
            opacity: 1
          figcaption
            color: white
            .arrow
              transform: translate3d(5px,0,0)
              .arrow-icon
                .st0
                  fill: white

      +respond-to-width(750)
        margin: 0 auto 25px

        &:last-of-type
          margin-bottom: 0

        figure
          padding-bottom: 66.67%

          figcaption
            font-size: 1rem


    .grid
      width: column(10, 12)
      margin: auto

      display: grid
      grid-template-columns: 1fr 1fr 1fr
      grid-gap: 60px 60px

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

      +respond-to-width(1250)
        width: column(10, 12)
        grid-template-columns: 1fr 1fr

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

      +respond-to-width(750)
        display: block