.Navigation {
  max-inline-size: none;
  background-color: var(--base-grey);
}

.Navigation ul,
.Navigation li {
  list-style: none;
  position: relative;
}
.Navigation ul {
  margin-inline: auto;
  max-inline-size: none;
}

.Navigation li svg {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 0;
  inline-size: 100%;
  block-size: 100%;
  max-inline-size: none;
}

.Navigation svg:not(#icon) > g {
  opacity: 0.075;
}
.Navigation svg .back,
.Navigation.Navigation-footer svg .backborder {
  transform: translateY(172px);
  transition: transform 250ms var(--elastic-easing);
}
.Navigation.Navigation-footer svg .back,
.Navigation svg .backborder {
  transform: translateY(-172px);
}
.Navigation a:hover + svg > .back,
.Navigation a:hover + svg > .backborder {
  /* filter: saturate(50%); */
  transform: translateY(0);
  transition: transform 250ms var(--elastic-easing);
}

.Navigation li a {
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  block-size: 100%;
  inline-size: 100%;
  font-weight: 900;
  text-transform: uppercase;
  text-decoration-color: var(--link-border);
  color: var(--link);
}
.Navigation li {
  border-inline: 1px solid white;
}

.Navigation a {
  animation: var(--animation-act-small);
}

.Navigation a:hover {
  animation-name: bounce;
  animation-duration: 250ms;
  animation-timing-function: var(--elastic-easing);
  animation-fill-mode: both;
  text-decoration-color: var(--card-border-color);
}