replace screenshoted images with real ones plus style footer

assets/stylesheets/global.css

@@ -22,13 +22,9 @@ body {
 }
 
 .wrapper {
-  max-width: 1024px;
+  max-width: var(--content-max-width);
   margin: 0 auto;
   padding: 0 2vw;
-
-  @media (--breakpoint-desktop) {
-    padding: 0;
-  }
 }
 
 @block wrapper-with-sidebar {
@@ -151,3 +147,44 @@ body {
     }
   }
 }
+
+@block main-navigation {
+    & ul {
+      display: flex;
+      list-style: none;
+      flex-wrap: wrap;
+      justify-content: center;
+      margin: 0;
+      padding: 0;
+
+      @media (--breakpoint-desktop) {
+        justify-content: flex-end;
+      }
+
+      & li {
+        margin: 0;
+
+        & + li {
+          margin-left: calc(var(--grid-gutter) / 4);
+        }
+
+        & a {
+          display: block;
+          text-transform: uppercase;
+          font-weight: bold;
+          padding: 0.7em 1em;
+          color: var(--color-text-grey);
+          border-radius: var(--border-radius);
+
+          &.active,
+          &:hover {
+            background: var(--color-bg-grey);
+          }
+
+          &.active {
+            color: var(--color-text-default);
+          }
+        }
+      }
+    }
+  }