a[data-fancybox] img {
    cursor: zoom-in;
  }

  .fancybox__container {
    --fancybox-color: #334155;
    --fancybox-bg: #fff;

    --fancybox-content-color: #6B7280;
    --fancybox-content-bg: #fff;

    --fancybox-thumbs-width: 48px;
    --fancybox-thumbs-ratio: 1;

    --carousel-button-svg-stroke-width: 1.5;
    --carousel-button-svg-filter: none;
  }

  .fancybox__container.certificateClass {
    --fancybox-bg: #ccc;
  }

  /**
  *  Navigation buttons
  */
  .fancybox__nav {
    --carousel-button-bg: #E5E7EB;

    --carousel-button-svg-width: 20px;
    --carousel-button-svg-height: 20px;

    --carousel-button-svg-stroke-width: 3;
  }

  .fancybox__nav .carousel__button.is-next {
    right: 30px;
  }

  .fancybox__nav .carousel__button.is-prev {
    left: 30px;
  }

  .carousel__button.is-close {
    top: 0;
    right: 0;
    z-index: 10;
  }

  /**
  *  Toolbar
  */

  .fancybox__toolbar {
    padding: 0;

    background: var(--fancybox-bg);
    text-shadow: none;

    --carousel-button-svg-width: 24px;
    --carousel-button-svg-height: 24px;
  }

  .fancybox__toolbar {
    display: flex;
    border-bottom: 1px solid #E5E7EB;
  }

/**
* Thumbnails
*/

.carousel__slide.has-thumb {
    padding: 5px;
    margin: 16px 8px;
    border: 1px solid #D1D5DB;
    border-radius: 4px;
}

.is-nav-selected .fancybox__thumb::after {
    display: none;
}

.carousel__slide.has-thumb:hover,
.carousel__slide.has-thumb.is-nav-selected {
    border-color: #6B7280;
}
.carousel__slide.has-thumb.has-video.is-selected .fancybox__thumb::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: auto;
    bottom: 0;
    background-position: center center;
    background-size: 40% 40%;
    background-repeat: no-repeat;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 24.38"><path d="M35.46 3.81A4.58 4.36 0 0032.24.75C29.37 0 17.93 0 17.93 0S6.48 0 3.63.72c-1.54.4-2.8 1.6-3.23 3.1-.75 2.72-.75 8.37-.75 8.37s0 5.68.75 8.37a4.58 4.36 0 003.22 3.07c2.9.75 14.3.75 14.3.75s11.45 0 14.32-.72a4.58 4.36 0 003.22-3.07c.75-2.72.75-8.37.75-8.37s.03-5.68-.75-8.4zm0 0" fill="red"/><path d="M14.29 17.4l9.51-5.21-9.51-5.22zm0 0" fill="white"/></svg>');

}

.carousel__slide.has-video.fancybox__video::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: auto;
    bottom: 0;
    background-position: center center;
    background-size: 18% 18%;
    background-repeat: no-repeat;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 24.38"><path d="M35.46 3.81A4.58 4.36 0 0032.24.75C29.37 0 17.93 0 17.93 0S6.48 0 3.63.72c-1.54.4-2.8 1.6-3.23 3.1-.75 2.72-.75 8.37-.75 8.37s0 5.68.75 8.37a4.58 4.36 0 003.22 3.07c2.9.75 14.3.75 14.3.75s11.45 0 14.32-.72a4.58 4.36 0 003.22-3.07c.75-2.72.75-8.37.75-8.37s.03-5.68-.75-8.4zm0 0" fill="red"/><path d="M14.29 17.4l9.51-5.21-9.51-5.22zm0 0" fill="white"/></svg>');
}
.carousel__slide.has-thumb.has-video {
--fancybox-thumbs-ratio: 16 / 9;
}

.carousel__slide.has-thumb.has-video.fancybox__thumb::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: auto;
    bottom: 0;
    background-position: center center;
    background-size: 40% 40%;
    background-repeat: no-repeat;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 24.38"><path d="M35.46 3.81A4.58 4.36 0 0032.24.75C29.37 0 17.93 0 17.93 0S6.48 0 3.63.72c-1.54.4-2.8 1.6-3.23 3.1-.75 2.72-.75 8.37-.75 8.37s0 5.68.75 8.37a4.58 4.36 0 003.22 3.07c2.9.75 14.3.75 14.3.75s11.45 0 14.32-.72a4.58 4.36 0 003.22-3.07c.75-2.72.75-8.37.75-8.37s.03-5.68-.75-8.4zm0 0" fill="red"/><path d="M14.29 17.4l9.51-5.21-9.51-5.22zm0 0" fill="white"/></svg>');
}

#mainCarousel {
    width:100%;
    margin: 0 auto 1rem auto;

    --carousel-button-color: #170724;
    --carousel-button-bg: #fff;
    --carousel-button-shadow: 0 2px 1px -1px rgb(0 0 0 / 20%),
      0 1px 1px 0 rgb(0 0 0 / 14%), 0 1px 3px 0 rgb(0 0 0 / 12%);

    --carousel-button-svg-width: 20px;
    --carousel-button-svg-height: 20px;
    --carousel-button-svg-stroke-width: 2.5;
  }

  #mainCarousel .carousel__slide {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    width: 100%;
    padding: 0;
  }

  .carousel__slide img {
    max-width: 100%;
}

  #mainCarousel .carousel__button.is-prev {
    left: -1.5rem;
  }

  #mainCarousel .carousel__button.is-next {
    right: -1.5rem;
  }

  #mainCarousel .carousel__button:focus {
    outline: none;
   /* box-shadow: 0 0 0 4px #A78BFA;*/
  }

  #thumbCarousel .carousel__slide {
    opacity: 0.5;
    padding: 0;
    margin: 0.25rem;
    width: 96px;
    height: 64px;
  }

  #thumbCarousel .carousel__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
  }

  #thumbCarousel .carousel__slide.is-nav-selected {
    opacity: 1;
    cursor: pointer;
  }