section-nav {
  display: none;
  position: fixed;
  top: 50%;
  right: 30px;
  z-index: 2;
  width: 20px;
  transform: translateY(-50%);
  @media screen and (min-width: 768px) {
    &:not(:empty) {
      display: block;
    }
  }
  > nav {
    > ul {
      display: grid;
      margin: 0;
      padding: 0;
      list-style: none;
      > li {
        display: flex;
        justify-content: center;
        margin: 0;
        padding: 0 0 15px;
        transition: padding 0.2s;
        > a {
          display: block;
          height: 10px;
          width: 10px;
          background-color: var(--color__teal-400);
          border-radius: 50%;
          transition: all 0.2s;
          &:hover,
          &:focus-visible,
          &.active {
            background-color: var(--color__secondary);
          }
          &.active {
            height: 20px;
            width: 20px;
          }
        }
      }
      &:has(.active) li:last-child {
        padding-bottom: 5px;
      }
    }
  }
}