<div class="container mx-auto" id="menu-container">
  <div class="row row-gap-3 row-flex justify-content-around">
    <div
      class="<%= section == 'about' ? 'hide-menu-item' : '' %> text-center col-xl-2 col-lg-4 col-md-6 col-sm-8"
    >
      <div class="card pb-2" id="about-me-card">
        <a class="mt-2" href="/about-me">
          <span class="fa-stack fa-2x">
            <i
              class="fa-regular fa-circle fa-stack-2x"
              style="color: #769fcd"
            ></i>
            <i
              class="fa-solid fa-user-large fa-stack-1x fa-inverse"
              style="color: #769fcd"
            ></i>
          </span>
        </a>

        <div class="card-body pb-0">
          <h4 class="card-title">ABOUT ME</h4>
          <p class="card-text">Learn more about my story.</p>
        </div>
      </div>
    </div>

    <div
      class="<%= section == 'resume' ? 'hide-menu-item' : '' %> text-center col-xl-2 col-lg-4 col-md-6 col-sm-8"
    >
      <div class="card pb-2" id="resume-card">
        <a class="mt-2" href="/resume">
          <span class="fa-stack fa-2x">
            <i
              class="fa-regular fa-circle fa-stack-2x"
              style="color: #769fcd"
            ></i>
            <i
              class="fa-regular fa-file-lines fa-stack-1x fa-inverse"
              style="color: #769fcd"
            ></i>
          </span>
        </a>

        <div class="card-body pb-0">
          <h4 class="card-title">RESUME</h4>
          <p class="card-text">View and download my CV.</p>
        </div>
      </div>
    </div>

    <div
      class="<%= section == 'blog' ? 'hide-menu-item' : '' %> text-center col-xl-2 col-lg-4 col-md-6 col-sm-8"
    >
      <div class="card pb-2" id="blog-card">
        <a class="mt-2" href="/blog">
          <span class="fa-stack fa-2x">
            <i
              class="fa-regular fa-circle fa-stack-2x"
              style="color: #769fcd"
            ></i>
            <i
              class="fa-solid fa-book fa-stack-1x fa-inverse"
              style="color: #769fcd"
            ></i>
          </span>
        </a>

        <div class="card-body pb-0">
          <h4 class="card-title">BLOG</h4>
          <p class="card-text">Read interesting posts.</p>
        </div>
      </div>
    </div>

    <div
      class="<%= section == 'project' ? 'hide-menu-item' : '' %> text-center col-xl-2 col-lg-4 col-md-6 col-sm-8"
    >
      <div class="card pb-2" id="projects-card">
        <a class="mt-2" href="https://www.github.com/dillardm89">
          <span class="fa-stack fa-2x">
            <i
              class="fa-regular fa-circle fa-stack-2x"
              style="color: #769fcd"
            ></i>
            <i
              class="fa-regular fa-file-code fa-stack-1x fa-inverse"
              style="color: #769fcd"
            ></i>
          </span>
        </a>

        <div class="card-body pb-0">
          <h4 class="card-title">PROJECTS</h4>
          <p class="card-text">View some of my portfolio projects.</p>
        </div>
      </div>
    </div>

    <div
      class="<%= section == 'gallery' ? 'hide-menu-item' : '' %> text-center col-xl-2 col-lg-4 col-md-6 col-sm-8"
    >
      <div class="card pb-2" id="gallery-card">
        <a class="mt-2" href="/gallery-1">
          <span class="fa-stack fa-2x">
            <i
              class="fa-regular fa-circle fa-stack-2x"
              style="color: #769fcd"
            ></i>
            <i
              class="fa-solid fa-camera fa-stack-1x fa-inverse"
              style="color: #769fcd"
            ></i>
          </span>
        </a>

        <div class="card-body pb-0">
          <h4 class="card-title">GALLERY</h4>
          <p class="card-text">Enjoy pictures from my travels.</p>
        </div>
      </div>
    </div>

    <div
      class="<%= section == 'contact' ? 'hide-menu-item' : '' %> text-center col-xl-2 col-lg-4 col-md-6 col-sm-8"
    >
      <div class="card pb-2" id="contact-card">
        <a class="mt-2" href="/contact-me">
          <span class="fa-stack fa-2x">
            <i
              class="fa-regular fa-circle fa-stack-2x"
              style="color: #769fcd"
            ></i>
            <i
              class="fa-regular fa-envelope fa-stack-1x fa-inverse"
              style="color: #769fcd"
              id="menu-envelope"
            ></i>
          </span>
        </a>

        <div class="card-body pb-0">
          <h4 class="card-title">CONTACT</h4>
          <p class="card-text">Send me a message.</p>
        </div>
      </div>
    </div>
  </div>
</div>
