.nav-menu {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  padding: 1em;
}

.nav-menu .nav-menu__button {
  width: auto;
  color: var(--color-gray-dark) !important;
  background-color: var(--color-white);
  border-color: var(--color-gray);
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

.nav-menu .nav-menu__button:hover {
  color: var(--color-primary) !important;
  background-color: var(--color-white);
  border-color: var(--color-primary);
}

.nav-menu .nav-menu__button.nav-menu__button_selected {
  color: var(--color-black) !important;
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
}

.nav-menu .nav-menu__button.nav-menu__button_selected:hover {
  color: var(--color-primary) !important;
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
}

@media (min-width: 576px) {
  .nav-menu {
    gap: 1em;
    padding: 1.5em;
  }
}

@media (min-width: 768px) {
  .nav-menu {
    gap: 1.25em;
    padding: 2em;
  }
}

@media (min-width: 992px) {
  .nav-menu {
    padding: 2.5em;
  }
}