<header>
  <nav aria-label="Main navigation">
    <a href="#section1">Article 1</a>
    <a href="#section2">Article 2</a>
  </nav>
</header>
<article>
  <aside class="navigation">
    <nav aria-label="Article navigation">
      <a href="#section1">Section 1</a>
      <a href="#section2">Section 2</a>
    </nav>
  </aside>
  <main>
    <h1>Content</h1>
    <section id="section1">
      <h2>Section 1</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut lobortis felis mi, sed aliquet nunc pellentesque nec. Donec quis urna odio. Suspendisse euismod diam vitae velit tempus aliquet. Morbi cursus et purus et scelerisque. Fusce ex turpis, bibendum et laoreet quis, auctor ac leo. Sed diam arcu, laoreet at metus vitae, maximus sollicitudin lacus. Fusce viverra, nunc vel suscipit laoreet, nisi nulla tristique tellus, eu rutrum ante sapien eu nisl.</p>
    </section>
    <section id="section2">
      <h2>Section 2</h2>
      <p>Pellentesque ullamcorper enim non nisi lobortis, a venenatis lorem scelerisque. Morbi eu libero odio. Donec nulla tellus, accumsan sit amet lorem ut, pellentesque euismod felis. Etiam a pellentesque urna. Duis at magna vel lacus tempor euismod eu eget erat. Aenean eu leo et magna vestibulum sagittis vitae at tortor. Curabitur non dolor quis erat consectetur hendrerit. Sed pharetra diam dui, id consequat eros blandit at. Cras eget nisi eget odio accumsan tincidunt in ut nisl. Aenean eget consequat libero. Sed libero ligula, ornare euismod neque non, auctor aliquet odio. Nunc vitae accumsan ligula. Integer et tellus urna.</p>
    </section>
  </main>
  <aside>
    <button>Linkedin</button>
    <button>Reddit</button>
  </aside>
</article>

html {
  scroll-behavior: smooth;
}
article {
  display: flex;
  flex-flow: row nowrap;
  gap: 2rem;
  padding: 2rem;
}
a {
  color: midnightblue;
}

@scope (.navigation) to (nav) {
  :scope {
    display: flex;
    flex-flow: column;
    padding: 0.5rem;
    background: antiquewhite;
  }
}