.carousel-dots {
  display: none;
  justify-content: center;
  gap: var(--space-8);
}

@media (width < 768px) {
  .carousel-dots {
    display: flex;
  }
}

@media (width < 1024px) {
  .carousel-dots--below-1024 {
    display: flex;
  }
}

.carousel-dots span {
  width: var(--space-8);
  height: var(--space-8);
  border-radius: 50%;
  background: var(--color-border);
  transition: background-color var(--duration-fast) var(--ease-out);
}

.carousel-dots:not([data-ready]) span:first-child,
.carousel-dots span[data-active] {
  background: var(--color-accent);
}