section.servicesHome
  @include spaceSection
  background-position: bottom
  background-repeat: no-repeat
  background-size: cover
  .content
    width: 100%
    align-items: flex-start
    @media (min-width: 768px)
      width: 85%
      margin: 0 auto
    @media (min-width: 1024px)
      width: 75%
    @media (min-width: 1366px)
      width: 70%
    @media (min-width: 1900px)
      width: 65%
    h1
      //text-transform: uppercase
      width: 100%
      text-align: center
      span
        font-weight: 400
        font-size: 24px
    h1, h1 span
      @media (min-width: 1024px)
        font-size: 26px
      @media (min-width: 1440px)
        font-size: 28px
      @media (min-width: 1600px)
        font-size: 30px
    h1, p
      padding: 0 7.5%
      @media (min-width: 768px)
        padding: 0
    p
      margin: auto
      text-align: center
      width: 100%
      padding: 10% 0%
      @media (min-width: 768px)
        width: 80%
        padding: 2% 0%
      @media (min-width: 1280px)
        width: 80%
        padding: 2% 0%
  .content .listServicesHome
    width: 100%
    display: flex !important
    flex-wrap: wrap !important
    justify-content: center
    @media (min-width: 768px)
      display: grid
      grid-template-columns: repeat(2, 1fr)
      gap: 2rem
    @media (min-width: 1024px)
      grid-template-columns: repeat(3, 1fr)
    @media (min-width: 1600px)
      gap: 3rem
    .slick-slide
      margin: 0 10px!important
    .item
      border-radius: 20px
      overflow: hidden
      height: 265px
      box-shadow: 0px 20px 25px -5px rgba(0,0,0,0.1) , 0px 10px 10px -5px rgba(0,0,0,0.04) 
      transition: all .3s ease
      @media (min-width: 768px)
        height: auto
        width: 30%
      @media (min-width: 1280px)
        &:hover
          transform: scale(1.02)
          box-shadow: 0px 25px 50px -12px rgba(0,0,0,0.25) 
      img 
        width: 100%
        height: 100%
        object-fit: cover
        @media (min-width: 768px)
          height: 350px
      .text
        position: absolute
        bottom: 0
        width: 100%
        justify-content: center
        align-items: center
        background: $backColor
        height: 5rem
        padding: 1rem
        @media (min-width: 1280px)
          &:hover
            a span
              color: $yellow
            a svg path
              fill: $yellow
        a span
          color: $textColor
          text-align: center
          font-size: 16px
          font-weight: 700
        svg
          display: none
          path
            fill: $textColor
        @media (min-width: 1440px)
          padding: 1rem 2rem
          a
            width: 100%
            align-items: center
            justify-content: space-between
            gap: 0 2rem
          a span
            text-align: left
          svg
            display: block
        @media (min-width: 1900px)
          a span
            font-size: 18px