<aside
  class="col-span-2 aero-gradient-dark p-4 rounded-bl-2xl flex flex-col gap-2 items-stretch overflow-y-auto"
>
  <section class="aero-gradient-dark text-white p-1 rounded-sm">
    <p class="aero-gradient p-2 border-b border-midnight text-lg">Main</p>
    <ul class="flex flex-col gap-1 justify-center">
      <li class="border-b border-midnight">
        <a href="/" class="flex items-center gap-2">
          <img class="w-6 h-6" src="img/icons/home.png" alt="home-icon" />
          Home
        </a>
      </li>
      <li class="border-b border-midnight flex items-center">
        <a href="/cv" class="flex items-center gap-2">
          <img class="w-6 h-6" src="img/icons/cv.png" alt="cv-icon" />
          CV
        </a>
      </li>
      <li class="border-b border-midnight flex items-center gap-2">
        <a href="/about" class="flex items-center gap-2">
          <img class="w-6 h-6" src="img/icons/about.png" alt="about-icon" />
          About
        </a>
      </li>
    </ul>
  </section>
  <section class="aero-gradient-dark text-white p-1 rounded-sm">
    <p
      class="aero-gradient p-2 border-b border-midnight text-lg flex items-center gap-2"
    >
      <img src="img/icons/folder.png" alt="folder-icon" class="w-6 h-6" />
      Projects
    </p>
    <ul class="flex flex-col gap-1 justify-center">
      <li class="border-b border-midnight">Project 1</li>
      <li class="border-b border-midnight">Project 2</li>
      <li class="border-b border-midnight">Project 3</li>
    </ul>
  </section>
  <section class="aero-gradient-dark text-white p-1 rounded-sm">
    <p
      class="aero-gradient p-2 border-b border-midnight text-lg flex items-center gap-2"
    >
      <img class="w-6 h-6" src="img/icons/games.png" alt="games-icon" />
      Games
    </p>
    <ul class="flex flex-col gap-1 justify-center">
      <li class="border-b border-midnight">Snake</li>
      <li class="border-b border-midnight">Tetris</li>
      <li class="border-b border-midnight">Wordle</li>
    </ul>
  </section>
  <section class="aero-gradient-dark text-white p-1 rounded-sm">
    <p
      class="aero-gradient p-2 border-b border-midnight text-lg flex items-center gap-2"
    >
      <img src="img/icons/disc.png" alt="disc-icon" class="w-6 h-6" />
      Multimedia
    </p>
    <ul class="flex flex-col gap-1 justify-center">
      <li class="border-b border-midnight">Podcasts</li>
      <li class="border-b border-midnight">Photos</li>
    </ul>
  </section>
</aside>
