/* fix layout shifts */

.blaze-slider.my-slider {
  --slides-to-show: 3;
  --slide-gap: 20px;

}

@media (max-width: 1200px) {
  .blaze-slider.my-slider {
    --slides-to-show: 2;
  }
}

@media (max-width: 768px) {
  .blaze-slider.my-slider {
    --slides-to-show: 1;
  }
}

/* other styles */

.blaze-slider.dragging .blaze-track {
  cursor: grabbing;
}

.blaze-track > * {
  min-height: 300px;
  display: flex;
  font-size: 30px;
  justify-content: center;
  align-items: center;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell,
    "Noto Sans", sans-serif;

  transition: width 500ms ease;
  font-size: 120px;
  border-radius: 6px;
  background: linear-gradient(to top, hsl(0deg 0% 2%), hsl(0deg 0% 9%));
  border: 1px solid hsl(0deg 0% 20%);
  box-shadow: inset 0 0 26px hsl(0deg 0% 0% / 70%);
  color: hsl(0deg 0% 25%);
}

/* pagination buttons */

.blaze-pagination {
  display: flex;
  gap: 15px;
}

.blaze-pagination button {
  font-size: 0;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  outline: none;
  border: none;
  background: hsl(0deg, 0%, 15%);
  cursor: pointer;
  transition: transform 300ms ease, background-color 300ms ease;
}

.blaze-pagination button.active {
  background: white;
  transform: scale(1.3);
}

.blaze-next,
.blaze-prev {
  border: none;
  font-size: 0;
  width: 20px;
  height: 20px;
  background: none;
  cursor: pointer;
  background-position: center;
  background-size: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 0 24 24' width='24'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath fill='white' d='M11.67 3.87L9.9 2.1 0 12l9.9 9.9 1.77-1.77L3.54 12z'/%3E%3C/svg%3E");
}

.blaze-next {
  transform: rotate(180deg);
}

/* for loop: false */
.blaze-slider.start .blaze-prev,
.blaze-slider.end .blaze-next {
  opacity: 0.5;
  cursor: not-allowed;
}


.app {
  padding: 30px;
  margin-bottom: 20px;
  width: 100%;
  max-width: 1000px;
}

.controls {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 50px;
  gap: 20px;
}