.site-nav {
  background-color: var(--color-background);
  grid-column: var(--grid-column-site-nav);
  grid-row: 1;
  text-align: right;
  z-index: 1000;
  padding: var(--width-gutter);
}

.site-nav__list {
  list-style: none;
  display: flex;
  flex-direction: column;
}

.site-nav__item--placeholder {
  display: var(--display-site-nav-item-placeholder);
  visibility: hidden;
}

.site-nav__link:hover,
.site-nav__link:focus {
  &:not(.is-active) {
    font-style: italic;
  }
}

.site-nav__link.is-active {
  color: var(--color-text-active);
}