/* Progressive enhancement for browsers implementing CSS Overflow Level 5. */
.snap-rail {
  scroll-marker-group: after;
}

.snap-rail::scroll-marker-group {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding-top: 14px;
}

.snap-slide::scroll-marker {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-muted-strong);
  opacity: 0.45;
  transition:
    opacity var(--dur-base) var(--ease-brand),
    background-color var(--dur-base) var(--ease-brand);
}

.snap-slide::scroll-marker:target-current {
  background: var(--color-red);
  opacity: 1;
}