@import "../../node_modules/slick-carousel/slick/slick";

section.landing-references{
  border-color: $themePrimary;
  position: relative;
  @include media-breakpoint-down(md){
    margin-top: $sizeLarge*2;
  }
  h2{
    text-align: left;
    @include media-breakpoint-down(md){
      left: 0;
    }
  }
  .container{
    max-width: none;
    padding: 3%;
  }

  .btn{
    margin: $sizeMedium auto;
    display: block;
    background-color: transparent;
    border: 1px solid $themePrimary;
    color: $themePrimary;
  }

  .references-logos{
    .ref-logo{
      margin-bottom: $sizeSmall;
      margin-top: $sizeSmall;
      padding-top: $sizeSmall;
      padding-bottom: $sizeSmall;
      display: flex;
      align-items: center;
      justify-content: center;
      img{
        object-fit: contain ;
        max-height: 80px;
        width: 60%;
        display: block;
        margin: auto;
        filter: grayscale(10%);
        &:hover{
          filter: unset;
        }
      }
    }
    @include media-breakpoint-up(sm) {
      .ref-logo{
        padding-top: $sizeMedium;
        padding-bottom: $sizeMedium;
        img{
          width: 40%;
        }
      }
    }
    @include media-breakpoint-up(lg) {
      padding-left: 150px;
    }
    @include media-breakpoint-up(xl) {
      padding-left: 200px;
    }
  }
  @include media-breakpoint-up(lg){
    &:before{
      content: "";
      width: 140px;
      height: calc(100% + 100px);
      position: absolute;
      left: 0;
      bottom: 0;
      background-color: $themeSecondary;
      z-index: -1;
    }
  }
  @include media-breakpoint-up(xl){
    &:before{
      width: 180px;
      height: calc(100% + 164px);
    }
  }
}

section.landing-reviews{
  background-color: $themeSecondary;
  margin-top: 0;
  border: 0;
  height: 500px;
  text-align: center;
  color: $themeWhite;
  font-size: 1.2em;
  text-transform: uppercase;
  font-style: italic;
  display: flex;
  align-items: center;
  .review-item{
    @include media-breakpoint-down(lg){
      width: 80%;
      font-size: .9em;
    }
    @include media-breakpoint-down(md){
      width: 90%;
      font-size: .7em;
    }
    width: 70%;
    margin: $sizeMedium auto 0 auto;
    p{
      letter-spacing: .1em;
    }
    div{
      text-align: right;
      margin: $sizeMedium auto;
      font-size: .7em;
      text-transform: lowercase;
    }
  }
}