Cacher is the code snippet organizer for pro developers

/* Hero Carousel
------------------------------------------------------------------------------*/
$('#heroSlick').slick({
    dots: false,
    arrows: false,
    infinite: true,
    autoplay: true,
    speed: 500,
    fade: true,
    cssEase: 'linear',
    pauseOnHover: false,
    pauseOnFocus: false,
    // prevArrow: $('.prev'),
    // nextArrow: $('.next'),
});

.hero {
  @extend .flex;
  height: 100%;
  width: 100%;
  background: grey;
  min-height: 500px;
  color: white;
  position: relative;
  .wrapper {
    @extend .flex;
    @extend .flex--center;
    @extend .container;
    position: relative;
    z-index: 2;
  }
  .item {
    @extend .flex;
    &--1 {
      flex: 1 55%;
      // border: solid 1px red;
      .box {
        position: relative;
        max-width: 500px;
        width: 100%;
      }
    }
    &--2 {
      flex: 1 45%;
      .box {
        max-width: 400px; 
        width: 100%;
        margin-top: 215px;
      }
      // border: solid 1px yellow;
    }
  }
  .title {
    font-size: 5.4rem;
    font-weight: 400;
    line-height: 1.25;
    margin-bottom: 20px;
  }
  .form-title {
    @extend .tier-title;
    text-transform: capitalize;
  }
  p {
    font-weight: 300;
    line-height: 1.4;
  }
}

.hero-slider {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  .slick-list,
  .slick-track {
    height: 100% !important;
  }
  .image {
    width: 100%;
    height: 100%;
    &--1 {
      @include backImage('../img/hero_bg-01.jpg', 0.1); // from Mixins (url, opacity)
    }
    &--2 {
      @include backImage('../img/hero_bg-02.jpg', 0.1); // from Mixins (url, opacity)
    }
    &--3 {
      @include backImage('../img/hero_bg-03.jpg', 0.1); // from Mixins (url, opacity)
    }
  }
}

<section class="hero">
    <div class="wrapper">
        <div class="item item--1">
            <div class="box">
                <h1 class="title">You’ve got to see it, and hear it, to believe it.</h1>
                <p>
                    A digital video and voice interview technology so advanced it’s almost beyond belief. But it’s real and it’s here, and it’s a Platform + People Solution so powerful it will forever transform your enterprise-wide hiring processes.
                </p>
            </div>
        </div>
        <div class="item item--2">
            <div class="box">
                <h2 class="form-title">Learn more and experience our demo today.</h2>
                
                <?php include( __DIR__ . '/../form/form.php'); ?>

            </div>
        </div>
    </div>
    <div class="hero-slider" id="heroSlick">
        <div class="image image--1"></div>
        <div class="image image--2"></div>
        <div class="image image--3"></div>
    </div>
</section>