Styling the mobile navigation

If you prefer sticking with "mobile-first" only, you are free to do that, but as I mentioned earlier in the course, I prefer to add complexity through media queries, and our mobile navigation is definitely an example of adding complexity.

Overall, the styling is fairly simple:

@media (width < 720px) {
  .primary-navigation {
    position: absolute;

    flex-direction: column;
    gap: 0;

    padding: 2rem;
    background: var(--background-accent-main);
    border-radius: 0 0 0 var(--border-radius-2);
  }

  .primary-navigation li {
    margin-block-end: 2rem;
  }

  .primary-navigation li:not(:last-of-type)::after {
    content: "";
    display: block;
    height: 2px;
    background: var(--background-accent-light);
    margin-block-end: inherit;
  }

  .primary-navigation a {
    /* style the links */
  }
}