nav[id$=-footer] {
  text-align: center;
  margin: auto;
}
nav[id$=-footer] .menu {
  display: flex;
  padding-left: 0;
  margin-bottom: 0;
}
@media (max-width: 1199.98px) {
  nav[id$=-footer] .menu {
    flex-direction: column;
  }
}
nav[id$=-footer] .menu > li {
  display: inline-block;
  color: var(--footer-link-color, #fff);
}
@media (min-width: 1200px) {
  nav[id$=-footer] .menu > li:not(:last-child)::after {
    content: "|";
    margin-left: 0.25rem;
    margin-right: 0.25rem;
    color: var(--footer-link-color, #fff);
  }
}
nav[id$=-footer] .menu > li > a {
  color: var(--footer-link-color, #fff);
}
nav[id$=-footer] .menu > li > a:hover {
  text-decoration: underline;
}