nav[id="primary-navigation"].grid.coloredGrid ul li a:hover,
.grid.coloredGrid ul[id="primary-menu"] .menu-item:hover .sub-menu {
  background: var(--theme-color);
}

nav[id="primary-navigation"].grid.coloredGrid ul li a:hover,
.grid.coloredGrid ul[id="primary-menu"] .menu-item:hover .sub-menu a {
  color: #fff;
}

.grid ul[id="primary-menu"] .menu-item .sub-menu {
  grid-template-columns: repeat(5, 1fr);
}

@media (min-width: 900px) and (max-width: 1200px) {
  #primary-menu > li a {
    font-size: 0.68rem !important;
  }
}