@media (max-width: 560px) {
  .hub-topbar {
    position: static;
    flex-wrap: wrap;
    gap: 10px;
    padding-block: 12px;
  }

  .family-brand {
    flex: 1 1 100%;
  }

  .family-brand small {
    display: block;
  }

  .hub-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .hub-nav a {
    text-align: center;
  }
}

@media (max-width: 600px) {
  .wiki-topbar {
    flex-wrap: wrap;
    gap: 10px;
    padding-block: 12px;
  }

  .wiki-topbar .brand {
    flex: 1 1 100%;
  }

  .topbar-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .topbar-links a,
  .topbar-links a:first-child {
    display: block;
    padding: 8px 5px;
    text-align: center;
  }

  .topbar-links a:nth-child(3) {
    display: none;
  }
}