.service

  .projects-overview-content
    position: relative

    .background
      position: absolute
      top: 0
      left: 0
      width: 100%
      height: 100%
      background-color: $broosDarkBlue

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

      .right
        position: absolute
        top: 0
        right: 0
        display: block
        height: 100%
        width: column(3, 12)
        background:
          image: url("/img/backgrounds/projects.jpg")
          size: cover
          repeat: no-repeat
          position: center left

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

      &:before
        content: ''
        position: absolute
        top: 0
        left: 0
        display: block
        height: 100%
        width: column(8, 24)
        background: $broosBlue

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

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

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

        h1
          color: white
          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

        .button
          margin-top: 60px

    +respond-to-width(900)
      .background

        .left
          display: none
        .right
          width: 100%
          display: none

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

        &:before
          display: none

        .sub-menu
          display: none

        .content
          width: 100%
          margin-left: 0



  .overview
    position: relative
    padding: 120px 0
    width: 100%
    overflow: hidden
    background-color: $offsetWhite

    +respond-to-width(750)
      padding: 80px 0

    +respond-to-width(425)
      padding: 40px 0


    &:before
      content: ''
      position: absolute
      z-index: 1
      left: 0
      top: 0
      width: 100%
      height: 300px
      background-color: $broosDarkPurple

      +respond-to-width(750)
        height: 225px
      +respond-to-width(400)
        display: none

    &:after
      content: ''
      position: absolute
      z-index: 2
      left: 0
      top: 0
      width: 100%
      height: 40px
      background:
        image: url("/img/vertical-gradient.png")
        size: contain
        position: top


    article
      position: relative
      z-index: 3
      width: 100%
      max-width: 430px
      margin-bottom: 60px
      //background-color: white
      //box-shadow: 0 0 40px 0 rgba(0,0,0,0.2)

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

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

      a
        text-decoration: none

      figure
        position: relative
        z-index: 2
        width: 100%
        height: 0
        padding-bottom: 100%
        overflow: hidden
        box-shadow: 1px 1px 10px 0 rgba(0,0,0,0.03)

        .image
          position: absolute
          left: 0
          top: 0
          width: 100%
          height: 100%
          transform: scale3d(1, 1, 1)
          transform-origin: center
          transition: transform 0.5s

          background-size: cover
          background-position: center

        //.styling
        //  position: absolute
        //  right: 0
        //  bottom: 0
        //  +flex(center, center)
        //  width: 50px
        //  height: 50px
        //  background-color: $purple
        //  border-radius: 50px 0 0 0
        //  transition: all 0.4s
        //
        //  .arrow
        //    position: relative
        //    left: 4px
        //    bottom: -5px
        //    display: inline-block
        //    width: 13px
        //    transform: translate3d(0,0,0)
        //    transition: transform 0.3s
        //
        //    .arrow-icon
        //      transform-origin: center
        //      transform: rotate(270deg)
        //      .st0
        //        fill: white
        //        transition: fill 0.3s

      .content
        padding: 20px
        text-align: right

        h3
          padding: 0
          font-size: 1rem
          line-height: 1.2
          color: $broosDarkestPurple
          font-weight: semi-bold()
          text-align: center
          font-family: secondFont()


        //p
        //  font-size: 0.8rem
        //  line-height: 1.8
        //  color: $agrimacBlue
        //  text-align: left
        //
        //.button
        //  margin-left: auto
        //  margin-top: 20px
        //  border-radius: 5px
        //  background-color: transparent
        //  border: 2px solid $agrimacGreen
        //  color: $agrimacDarkBlue
        //  font-weight: semi-bold()
        //
        //  &:after
        //    display: none
        //
        //  .arrow
        //    svg.arrow-icon
        //      .st0
        //        fill: $agrimacDarkBlue



      &:hover
        figure
          .image
            transform: scale3d(1.05, 1.05, 1)

        .content
          .button
            .arrow
              transform: translate3d(5px, 0, 0)


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

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

        figure
          padding-bottom: 66.67%

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

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

      .ie &
        +flex(space-between, flex-start)
        +flex-rows

      +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