.project-filter {
  margin-block-end: var(--spacing-4);
  display: flex;
  flex-direction: column;
  align-items: flex-start;

  position: fixed;
  top: 45%;
  z-index: 1;
  user-select: none;

  button {
    transition: color var(--transition);
    text-transform: uppercase;
    line-height: 1;
  }

  button:hover {
    color: var(--color-accent);
  }

  li {
    transition: color var(--transition);
    color: var(--color-invisible);

    font-size: 15px;
    line-height: 14px;

    &:hover {
      color: var(--color-fg);
    }
  }
}

@media (width < 768px) {
  .project-filter {
    display: none;
  }
}