.menu--secondary {
  flex-direction: column;
  align-items: start;
  --color-link-focus: var(--color-primary);
}

.menu--secondary .menu-item {
  width: 100%;
}

.menu--secondary a {
  border: 1px solid;
  padding: .25rem 1rem;
  border-radius: 2rem;
  font-size: .9rem;
}

.menu--secondary a:hover,
.menu--secondary a:focus,
.menu--secondary a:active,
.menu--secondary a.is-active {
  color: var(--color-link-focus);
  background-color: var(--color-white);
  text-decoration: none;
}
@media (min-width:1024px) {
  .menu--secondary {
    flex-direction: row;
    align-items: center;
  }

  .menu--secondary .menu-item {
    width: auto;
  }

}