footer {
  display: flex;
  justify-content: space-between;
  align-items: top;
  padding-block: 1rem;
  white-space: nowrap;
  gap: 1rem;
}

footer nav {
  overflow-x: auto;
  scrollbar-color: var(--code-color) transparent;
  scrollbar-width: thin;
  mask-image: linear-gradient(to right, black 50%, hsla(0, 0%, 0%, 0.6) 100%);
  max-width: 50%;
}

footer nav > a::after{
  content: " · ";
  color: var(--main-color);
}

footer nav > a:last-child::after{
  content: "";
}

footer abbr {
  cursor: help;
  text-decoration: none;
}

@media (min-width: 768px) {
  footer br {
    display: none;
  }
  footer span::after{
    content: " · ";
  }
  footer span:last-child::after{
    content: "";
  }
}