Slick carousel responsive breakpoints not working

Breakpoints not working

by joshmoto

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css">
<div class="wrapper">
  <div class="carousel">
    <div class="carousel-item">
      <div class="small">
        <img src="images/projects/project1-small.png">
        <h4 class="project-title">Project name1</h4>
      </div>
      <div class="expanded">
        <img src="images/projects/project1-big.png" alt="" srcset="">
        <h4 class="project-title">Project name2</h4>
      </div>
    </div>
    <div class="carousel-item">
      <div class="small">
        <img src="images/projects/project1-small.png">
        <h4 class="project-title">Project name1</h4>
      </div>
      <div class="expanded">
        <img src="images/projects/project1-big.png" alt="" srcset="">
        <h4 class="project-title">Project name2</h4>
      </div>
    </div>
    <div class="carousel-item">
      <div class="small">
        <img src="images/projects/project1-small.png">
        <h4 class="project-title">Project name1</h4>
      </div>
      <div class="expanded">
        <img src="images/projects/project1-big.png" alt="" srcset="">
        <h4 class="project-title">Project name2</h4>
      </div>
    </div>

  </div>
</div>

SCSS

.wrapper{
  width:100%;
  padding-top: 5rem;
  text-align:center;
}

.carousel{
  width:100%;
  margin:0px auto;
}
.slick-slide{
  position: relative; 
  width: 300px;
  height: 350px;
  margin: 0 50px;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 16px 16px -20px, rgba(0, 0, 0, 0.05) 4px 32px 64px -50px, rgba(0, 0, 0, 0.2) 8px 60px 50px -20px; 
  white-space: normal;
  text-shadow: rgba(255, 255, 255, 0.75) 1px 1px 0px;
  z-index: 2;
  cursor: pointer;
  border-radius: 1rem;
  overflow: hidden;
  background-color: rgb(255, 255, 255);
  outline: none;
  
  .expanded{
    display: none;
    position: absolute;
    top: 0;
    left: 0;
  }

  .project-title{
    position: absolute;
    top: 20%;
    width: 100%;
    text-align: center;
    font-size: 2rem;
  }
  
}

.slick-list{
  margin: 0 -50px;
}

.slick-slide img{
  width:100%;
  opacity: 0.25;
}

.slick-center{
  width: 600px;
  height: 450px !important;
  padding: 25px;
  background-color: transparent;
  box-shadow: none;
  transition: width 1s;
  transition-delay: 0.3s;

  .small{
    opacity: 0;
  }
  
  .expanded{
    display: block;
  }

  img{
    opacity: 1;
  }
  
}

JavaScript

jQuery(document).ready(function ($) {

  $('.carousel').slick({
    arrows: false,
    //slidesToShow: 3,
    dots: false,
    centerMode: true,
    variableWidth: true,
    focusOnSelect: true,
    useCSS: true,
    infinite: true
  });

  $('.slick-slider').on('click', '.slick-slide', function(e) {
    e.stopPropagation();
    var index = $(this).data("slick-index");
    if ($('.slick-slider').slick('slickCurrentSlide') !== index) {
      $('.slick-slider').slick('slickGoTo', index);
    }

  });
  
});