/*==========================================================================
  Service - Overview page
  ========================================================================== */



.ajax-container.services
  display: grid
  grid-template-columns: 1fr 1fr 1fr
  grid-template-rows: 1fr 1fr 1fr
  overflow: hidden

  .title
    position: relative
    padding: 40px

    &.loaded-animation
      &:after
        opacity: 0

      h1
        opacity: 0

    &:after
      content: ''
      position: absolute
      top: 0
      left: 0
      width: 100%
      height: 100%
      background-repeat: no-repeat
      background-position: center
      background-size: cover
      background-image: url("/img/our-work-overlay.jpg")
      opacity: 0.2
      transition: opacity 0.4s

    h1
      position: relative
      z-index: 2
      font-size: 3rem
      line-height: 1.2
      text-transform: uppercase
      color: $darkRed
      opacity: 1
      transition: opacity 0.4s

      +respond-to-width(1650)
        font-size: 2.4rem

      +respond-to-width(1420)
        font-size: 2.2rem

      small
        display: block
        font-size: 0.5em
        color: white
        opacity: 0.5
        +translate3d(0,0,0)

  a
    position: relative
    background-color: $red
    overflow: hidden
    transition: opacity 0.3s, background 0.5s

    figure
      position: absolute
      left: 2.5%
      top: 2.5%
      width: 95%
      height: 95%
      background-position: center
      background-size: contain
      background-repeat: no-repeat
      filter: blur(0px)
      opacity: 1
      transition: opacity 0.3s, top 0.3s, left 0.3s, width 0.3s, height 0.3s
      transition-delay: 0.3s
      will-change: height, width, top, left, opacity

    &.animation-part
      background-color: transparent !important

      figure
        opacity: 0
        width: 75%
        height: 75%
        top: 12.5%
        left: 12.5%

    &:nth-child(odd)
      background-color: $lightGray

    p
      position: absolute
      left: 0
      top: 0
      z-index: 2
      width: 100%
      height: 100%
      +flex(center, center)
      margin: 0
      padding: 20px
      font-size: 2.5rem
      line-height: 1.2
      font-family: din()
      text-transform: uppercase
      text-align: center
      white-space: nowrap
      color: $red
      opacity: 0
      letter-spacing: 20px
      transition: letter-spacing 0.3s, opacity 0.3s, height 0.3s
      will-change: letter-spacing, opacity

      +respond-to-width(1500)
        font-size: 2.2rem

      +respond-to-width(980)
        font-size: 1.8rem

      &:after
        content: ''
        position: absolute
        z-index: -1
        top: 0
        left: 0
        width: 100%
        height: 100%
        opacity: 0.7
        background-color: black
        transition: opacity 0.3s


    &:hover
      figure
        filter: blur(3px)
        width: 75%
        height: 75%
        top: 12.5%
        left: 12.5%
        transition-delay: 0s
      p
        opacity: 1
        letter-spacing: 0

  &.animateOut
    .title
      opacity: 0
    a
      background-color: transparent
      transition-delay: 0.5s

      figure
        opacity: 0
        width: 75%
        height: 75%
        top: 12.5%
        left: 12.5%
        transition-delay: 0s


      p
        opacity: 0

  /* Tablet view
     ========================================================================== */
  +respond-to-width-or-height(900, 700)
    +flex(flex-start, flex-start)
    +flex-rows

    .title
      width: 100%
      height: calc(100vh - 800px - 120px)
      min-height: 200px
      padding: 80px 40px 40px
      background-color: lighten($gray, 15%)

      h1
        color: $red
        font-size: 2.5rem

      &:after
        display: none


    >a
      width: 50%
      height: 200px

      &.graphicDesign
        figure
          width: 80%
          height: 85%
          top: 7.5%
          left: 10%

      &:nth-child(odd)
        background-color: $red

      &:nth-child(4),&:nth-child(5),&:nth-child(8),&:nth-child(9)
        background-color: $lightGray



  /* Mobile view
    ========================================================================== */
  +respond-to-width-or-height(500, 600)

    .title
      height: auto

    >a
      width: 100%
      height: 300px

      &:nth-child(4),&:nth-child(5),&:nth-child(8),&:nth-child(9)
        background-color: $red

      &:nth-child(odd)
        background-color: $lightGray !important

      figure
        height: 70%
        top: 5%

      p
        top: auto
        bottom: 0
        height: 20%
        padding: 0 20px
        opacity: 1
        font-size: 1.2rem
        line-height: 1.1
        letter-spacing: 6px

      &:hover
        figure
          filter: blur(3px)
          width: 70%
          height: 60%
          top: 10%
          left: 15%

        p
          letter-spacing: 6px
          &:after
            opacity: 1