@use "../../../../styles/int.scss";

.dots-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--size), 1fr));
  width: 100%;
  gap: int.$spacing-2;
  place-items: center;
}

.dot {
  width: var(--size, int.$spacing-1);
  height: var(--size, int.$spacing-1);
  border-radius: 100%;
  background-color: var(--cand-color, int.$warmgray-20);
  transition: background-color 500ms ease-in-out;
}