.menu--main > .menu-item a,
.menu--main-navigation-homepage > .menu-item a {
  padding: var(--spacing-smaller) var(--spacing-smallest);
}

.menu--main > .menu-item a:focus,
.menu--main > .menu-item--active-trail a:focus {
  background-color: var(--color-focus);
  border-color: var(--color-focus);
  color: var(--color-black);
  box-shadow: 0 0 0 2px var(--color-focus), 0 4px 0 4px var(--color-black);
  outline: none;
  text-decoration: underline;
}

@media screen and (min-width: 40rem) {
  .menu--main,
  .menu--main-navigation-homepage {
    margin-left: var(--spacing);
  }
}

@media screen and (min-width: 48rem) {
  .menu--main > .menu-item--active-trail a,
  .menu--main > .menu-item a:hover {
    border-color: transparent;
    color: var(--color-white);
    background-color: transparent;
  }
}