/* >> services list Style
--- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- */

.servicesList{@extend %flexBox; align-items: stretch; justify-content: center; padding: 2rem 0; z-index: 3;
  .services__item{position: relative; width: 100%; max-width: 100%; flex-basis: 100%; margin-bottom: 1rem; margin-right: 0; text-align: center; background-color: white;
    &:nth-child(2n){margin-right: 0;}

    @media #{$mq-tab}{
      width: 49%; 
      max-width: 49%; 
      flex-basis: 49%; 
      margin-right: 2%; 
      margin-bottom: 2%;
      &:nth-child(2n){margin-right: 0;}
    }

    @media #{$mq-iPad_land}{
      width: 24%; 
      max-width: 24%; 
      flex-basis: 24%; 
      margin-bottom: 1rem; 
      margin-right: 1%;
      &:nth-child(2n){margin-right: 1%;}
      &:nth-child(4){margin-right: 1%;}
    }
  }
}

#services-slider{
  .services__item{width: 100%; margin: 3px;
    .services__item__title{font-size: 1rem;
      @media #{$mq-iPad_land}{font-size: 1.1rem;}
      @media #{$mq-pc_1600}{font-size: 1.125rem;}
    }
  }
  .slick-list{
    &:before{content:''; display: block; position: absolute; z-index: 2; top: 0; left: 0; height: 100%; width: 8%;
      background: rgb(255,255,255);
      background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
      @media #{$mq-pc_1600}{width: 12%;}
    }
    &:after{content:''; display: block; position: absolute; z-index: 2; top: 0; right: 0; height: 100%; width: 8%;
      background: rgb(255,255,255);
      background: linear-gradient(270deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
      @media #{$mq-pc_1600}{width: 12%;}
    }
  }
}

.services__item__content{position: absolute; padding: 0.75rem; left: 0; bottom: 0; width: 100%; color: white; z-index: 2;
  @media #{$mq-tab_720}{padding: 1rem;}
  .btn--arrow{width: 32px; height: 32px; margin: 0.5rem auto;
    @media #{$mq-tab_720}{width: 38px; height: 38px; margin: 1rem auto;}
  }
}

.services__item__image{ display: block; width: 100%; position: relative; overflow: hidden;
  img{@include transition();}
  &:hover{
   img{transform: scale(1.05);}
  }
  &:after{content: ''; display: block; position: absolute; width: 100%; height: 100%; left: 0; top:0;
    background: rgb(0,152,73);
    background: linear-gradient(0deg, rgba(0,152,73,1) 0%, rgba(0,152,73,0) 100%);
  }
}

.services__item__title{@include transition();display: block; width: 100%; font-size: 0.85rem; line-height: 1.2; font-weight: 700; text-transform: uppercase; text-align: center; color: white;
  @media #{$mq-iPad_land}{font-size: 1rem;}
  @media #{$mq-pc_1600}{font-size: 1.1rem;}
  &:hover{color: lighten($color-primary,12%);}
}
.services__item__lead{display: block; font-size: 0.65rem; line-height: 1.2;
  @media #{$mq-tab_720}{font-size: 0.8rem; line-height: 1.4;}
}