.ba-slider-wrapper {
  width: 100%;
  max-width: 900px; /* Maksymalna szerokość slidera */
  margin: 0 auto; /* Wyśrodkowanie slidera */
  position: relative; /* Ustawienie pozycji względnej dla elementów wewnętrznych */
}

.ba-slider {
  position: relative; /* Ustawienie pozycji względnej dla elementów wewnętrznych */
  overflow: hidden; /* Ukrycie części obrazów wychodzących poza kontener */
  height: 600px; /* Wysokość slidera */
}

.ba-image-before {
  display: block; /* Wyświetlenie jako blok */
  width: 100%; /* Szerokość na 100% kontenera */
  height: 100%; /* Wysokość na 100% kontenera */
  position: absolute; /* Absolutne pozycjonowanie względem kontenera */
  top: 0;
  left: 0;
  z-index: 1; /* Ustawienie obrazu "before" poniżej obrazu "after" */
  object-fit: cover; /* Dostosowanie obrazu do kontenera */
}

.ba-image-after {
  display: block; /* Wyświetlenie jako blok */
  width: 100%; /* Szerokość na 100% kontenera */
  height: 100%; /* Wysokość na 100% kontenera */
  position: absolute; /* Absolutne pozycjonowanie względem kontenera */
  top: 0;
  left: 0;
  z-index: 2; /* Ustawienie obrazu "after" powyżej obrazu "before" */
  object-fit: cover; /* Dostosowanie obrazu do kontenera */
  clip: rect(0, 50%, 600px, 0); /* Początkowe przycięcie obrazu "after" */
}

.ba-handle {
  width: 50px; /* Szerokość uchwytu */
  height: 50px; /* Wysokość uchwytu */
  border-radius: 50%; /* Okrągły uchwyt */
  position: absolute; /* Absolutne pozycjonowanie uchwytu */
  top: 50%; /* Ustawienie uchwytu na środku w osi Y */
  left: 50%; /* Początkowa pozycja uchwytu na środku w osi X */
  transform: translate(-50%, -50%); /* Wyśrodkowanie uchwytu */
  cursor: pointer; /* Kursor przesuwania w poziomie */
  z-index: 10; /* Ustawienie uchwytu powyżej obrazów */
  border: 3px solid #FF0000; /* Obramowanie uchwytu */
  display: flex; /* Dodanie flexboxa do centrowania SVG */
  align-items: center; /* Wyśrodkowanie w pionie */
  justify-content: center; /* Wyśrodkowanie w poziomie */
}

.ba-handle__thumb{
  width:80%;
  height:80%;
}

.ba-handle:before,
.ba-handle:after{
  content:" ";
  display: block;
  width: 3px;
  background: #FF0000;
  height: 9999px;
  position: absolute;
  left: 50%;
  margin-left: -1px;
  z-index: 30;
}
.ba-handle:before{
  top:100%;
}
.ba-handle:after{
  bottom:100%;
}