.case-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--font-size-body-case);
  line-height: var(--line-height-body-case);
}

.case-list li {
  display: flex;
  gap: var(--space-12);
  align-items: flex-start;
}

.list-marker {
  flex: none;
  height: 1lh;
  color: var(--color-text-secondary);
  transition: color var(--duration-fast) var(--ease-out);
}

.list-marker__fill {
  fill: transparent;
  transition: fill var(--duration-fast) var(--ease-out);
}

.list-marker__pins {
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .case-list li:hover .list-marker {
    color: var(--color-accent);
  }

  .case-list li:hover .list-marker__fill {
    fill: currentColor;
  }

  .case-list li:hover .list-marker__pins {
    opacity: 1;
  }
}