.page-nav {
  position: sticky;
  top: calc(var(--header-height));
  height: var(--top-nav-height);
  place-content: center;
  z-index: 99;
  font-size: 0.875rem;
  border-top: 1px solid var(--neutral-300);
  color: var(--neutral-300);
  background-color: #fff;
  overflow: auto;
  scrollbar-width: none;

  @media (min-width: 1025px) {
    top: var(--top-stack-height);
    background-color: var(--background-color);
  }

  .container {
    display: flex;
    align-items: center;

    @media (max-width: 1024px) {
      margin-inline: 0;
    }
  }

  .page-nav-title {
    color: var(--neutral-800);

    @media (max-width: 1024px) {
      display: none;
    }
  }

  .page-nav-divider {
    width: 20px;
    height: 1px;
    background-color: var(--neutral-300);
    margin-left: 24px;
    margin-bottom: 0;

    @media (max-width: 1024px) {
      display: none;
    }
  }

  .page-nav-list {
    display: flex;

    li {
      display: inline-block;
      padding-inline: 1rem;
      flex-shrink: 0;

      @media (min-width: 769px) {
        padding-inline: 24px;
      }

      &:not(:last-child) {
        border-right: 1px solid var(--neutral-300);
      }

      &.active a,
      a:hover {
        color: #009d61;
      }

      a {
        color: var(--neutral-800);
        transition: all 0.3s ease;
      }
    }
  }
}