/** Shopify CDN: Minification failed

Line 16:0 Unexpected "<"
Line 133:0 Unexpected "<"
Line 139:3 Expected identifier but found "%"
Line 140:4 Unexpected "<"
Line 143:14 Unexpected "{"
Line 143:21 Expected ":"
Line 143:44 Unexpected "<"
Line 146:3 Expected identifier but found "%"
Line 147:0 Unexpected "<"
Line 190:1 Expected identifier but found "%"
... and 4 more hidden warnings

**/
<style>
  .collection-slider {
    width: 80%;
    margin: 0 auto;
    position: relative;
  }

  .content-area {
    text-align: center;
    padding: 15px 0px;
  }

  .content-area img {
    height: 150px;
    width: 150px;
    object-fit: contain; 
    border-radius: 100px;
    box-shadow: 0px 0px 2px 1px #F1F1F1;
    border: solid 1px #E5E5E5;
    margin: 10px auto;
    transition: all 0.2s ease-in-out;
    padding:8px;
  }

  @media screen and (max-width: 480px) { 
    .collection-slider {
      width: 90%;
    }
  }

  @media screen and (max-width: 480px) { 
    .collection-slider h4 {
      font-size: 1rem;
    }
  }

  @media screen and (max-width: 480px) { 
    .content-area img {
      height: 120px;
      width: 120px;
    }
  }

  @media screen and (max-width: 320px) { 
    .content-area img {
      height: 120px;
      width: 120px;
    }
  }  

  .content-area:hover img {
    transform: scale(1.1);
  }

  .content-area a {
    text-decoration: none;
  }

  .slick-prev, .slick-next {
    font-size: 0;
    line-height: 0;
    position: absolute;
    top: 46%;
    display: block;
    width: 40px;
    height: 40px;
    padding: 0;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    cursor: pointer;
    color: transparent;
    border: none;
    outline: none;
    background: #ddd;
    border-radius: 50%;
    z-index: 1;
  }

  .slick-prev:before, .slick-next:before {
    font-family: 'slick';
    font-size: 20px;
    line-height: 1;
    opacity: 0.75;
    color: #000;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  .slick-prev {
    left: -50px;
  }

  .slick-next {
    right: -50px;
  }
@media screen and (max-width: 480px) { 
    
    .slick-prev {
    left: -22px;
  }

  .slick-next {
    right: -22px;
  }
  .slick-prev, .slick-next {
    padding: 10;
  }

  }
  .slick-prev:before {
    content: '←';
  }

  .slick-next:before {
    content: '→';
  }
</style>

<link rel="stylesheet" href="{{ 'slick.css' | asset_url }}"/>
<link rel="stylesheet" href="{{ 'slick-theme.css' | asset_url }}"/>

<div class="collection-slider">
  {% for block in section.blocks %}
    <div class="content-area">
      <a href="{{ block.settings.cat_link }}">
        <img src="{{ block.settings.cat_img | img_url:'' }}"/>
        <h4> {{ block.settings.cat_title }} </h4>
      </a>
    </div>
  {% endfor %}
</div>

<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<script src="{{ 'slick.js' | asset_url }}"></script> 

<script>
  $(document).ready(function() {
    $('.collection-slider').slick({
      dots: false,
      arrows: true,
      infinite: false,
      speed: 300,
      slidesToShow: 6,
      slidesToScroll: 1,
      responsive: [
        {
          breakpoint: 1024,
          settings: {
            slidesToShow: 4,
            slidesToScroll: 1,
            infinite: true,
            dots: false,
          }
        },
        {
          breakpoint: 600,
          settings: {
            slidesToShow: 2,
            slidesToScroll: 1
          }
        },
        {
          breakpoint: 480,
          settings: {
            slidesToShow: 2,
            slidesToScroll: 1
          }
        }
      ]
    });
  });
</script>

{% schema %}
{
  "name": "Collection Slider",
  "settings": [],
  "blocks": [{
    "name": "Collection Slider",
    "type": "collection-slider",
    "settings": [
      {
        "type": "image_picker",
        "id": "cat_img",
        "label": "Collection Image"
      },
      {
        "type": "text",
        "id": "cat_title",
        "label": "Collection Name"
      },
      {
        "type": "url",
        "id": "cat_link",
        "label": "Choose Collection"
      }
    ]
  }],
  "presets": [{
    "name": "Collection Slider Section"
  }]
}
{% endschema %}