fix: fix mobile breakpoint so menu and links never overstep screen width

src/lib/css/variables.scss

@@ -1,4 +1,4 @@
-$mobile-breakpoint: "max-width: 768px";
+$mobile-breakpoint: "max-width: 970px";
 
 :root {
     --background-dark: url("/img/background-black-red.jpg");

src/lib/nav.html

@@ -16,7 +16,6 @@
       <a href="#news" class="nav-bar--menu-link">{{ gettext('News') }}</a>
       <a href="#" class="nav-bar--menu-link">{{ gettext('Contact') }}</a>
     </div>
-    <div class="nav-bar--separator"></div>
     <div class="nav-bar--links">
       <a class="nav-bar--link" href="mailto:contact@frog-collective.com">
           <img class="nav-bar--link-icon" src="/img/mail-fill.svg" alt-text="{{ gettext('Mail') }}"></img>

src/lib/nav.scss

@@ -111,6 +111,7 @@
     }
 
     &--separator {
+        grid-area: 1 / 4 / 2 / 5;
         align-self: center;
         height: 40%;
         width: 2px;
@@ -124,6 +125,7 @@
     }
 
     &--languages {
+        grid-area: 1 / 5 / 2 / 6;
         align-self: center;
         padding: 0 var(--space-xsmall);
 
@@ -184,6 +186,7 @@
     }
 
     &--links {
+        grid-area: 1 / 3 / 2 / 4;
         display: flex;
         justify-self: end;
         align-self: center;