.slider {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.slides {
  display: flex;
  transition: transform .5s ease;
}

.slide {
  min-width: 100%;
  position: relative;
}

.slide img {
  width: 100%;
  display: none;
}

/* LOADER */

.loader {
  position: absolute;
  inset: 0;
  margin: auto;
  background: #5d4b3b;
}

.loaderDots {
    width: 60px;
    aspect-ratio: 2;
    --_g: no-repeat radial-gradient(circle closest-side,#e0ceba 90%,#0000);
    background: 
    var(--_g) 0%   50%,
    var(--_g) 50%  50%,
    var(--_g) 100% 50%;
    background-size: calc(100%/3) 50%;
    animation: loaderAnimation 1s infinite linear;
}

@keyframes loaderAnimation {
    20% { background-position:0%   0%, 50%  50%,100%  50% }
    40% { background-position:0% 100%, 50%   0%,100%  50% }
    60% { background-position:0%  50%, 50% 100%,100%   0% }
    80% { background-position:0%  50%, 50%  50%,100% 100% }
}

/* Dots */
.dots {
  /* position: absolute;
  bottom: 15px;
  left: 50%;
  transform: translateX(-50%); */
  margin-top: 5px;
  justify-content: center;
  display: flex;
  gap: 8px;
}

.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,.5);
  cursor: pointer;
}

.dot.active {
  background: white;
}