/**
  Setup for code demo only
*/
:root {
    --current-image-height: 300px;
    --thumbnails-track-height: 90px;
    --thumbnail-width: 100px;
  }
  

  
  /** Container */
  .carousel.cs-product-gallery {
    max-width: 400px;
    max-height: 400px;
    overflow: hidden ;
  }
  
  
  /** Current image */
  .cs-product-gallery .current-image {
    margin-bottom: 1px;
  }
  
 .cs-product-gallery   .current-image a {
      display: block;
      height: var(--current-image-height);
      overflow: hidden;
      position: relative;
    }
  
   .cs-product-gallery   .current-image a:before {
        content: '';
        position: absolute;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        transition: box-shadow .1s linear;
      }
  
    .cs-product-gallery  .current-image a:focus {
        outline: 0;
      }
  
    .cs-product-gallery    .current-image a:focus:before {
          box-shadow: inset 0 0 0 1px black,
                      inset 0 0 0 4px white;
        }
  
  .cs-product-gallery  .current-image img {
      display: block;
      object-fit: cover;
      width: 100%;
      height: 100%;
    }
  
  
  /** Previous and next buttons */
.cs-product-gallery  .button {
    background: none;
    border: 0;
    cursor: pointer;
    
    font-size: 30px;
    color: rgba(0,0,0,.7);
  
    padding: 0;
    margin: 0 1px;
    flex: 0 0 25px;
    
    transition: all .2s linear;
  }
  
 .cs-product-gallery   .button:hover {
      background-color: rgba(0,0,0,.1);
      color: black;
    }
  
  .cs-product-gallery  .button:focus {
      outline: none;
      background-color: #e10714;
      color: rgba(255,255,255,1);
    }
  
  .cs-product-gallery  .button[aria-disabled="true"] {
      opacity: .3;
    }
  
  /**
    Thumbnails container
  */
  .cs-product-gallery  .thumbnails-track {
    display: flex;
    overflow: hidden;
    height: 100px;
  }
  
  .cs-product-gallery  .thumbnails {
    overflow: hidden;
  }
  
  .cs-product-gallery  .slick-track {
    display: flex;
  }
  
  
  /** Single thumbnail */
  .cs-product-gallery   .thumbnail {
    flex: 0 0 var(--thumbnail-width);
    margin-right: 1px;
    position: relative;
  }
  
  .cs-product-gallery   .thumbnail-button {
      display: block;
      padding: 0;
      height: var(--thumbnails-track-height);
      width: 100%;
      
      cursor: pointer;
      border: 0;
      background: none;
      background-color: rgba(0,0,0,.2);
      transition: opacity .1s linear;
    }
  
    .cs-product-gallery    .thumbnail-button:before {
        content: '';
        position: absolute;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        transition: box-shadow .1s linear;
      }
  
      .cs-product-gallery    .thumbnail-button:focus {
        outline: 0;
      }
  
      .cs-product-gallery    .thumbnail-button:focus:before {
          box-shadow: inset 0 0 0 1px black,
                      inset 0 0 0 4px white;
        }
  
        .cs-product-gallery    .thumbnail-button:focus img,
        .cs-product-gallery   .thumbnail-button:hover img,
        .cs-product-gallery  .thumbnail-button[aria-current="true"] img {
          opacity: 1;
          filter: grayscale(0);
        }
  
        .cs-product-gallery  .thumbnail-button img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        
        opacity: .5;
        filter: grayscale(.6);
        transition: all .1s linear;
      }