Pull request updates.

src/css/component.section.css

@@ -5,6 +5,7 @@
   --section-gutters-y: var(--size-10);
   padding-bottom: var(--section-gutters-y);
   padding-top: var(--section-gutters-y);
+  scroll-margin-top: var(--size-scroll-top);
 }
 
 .section--full {

src/css/component.sub-menu.css

@@ -26,15 +26,18 @@
     position: relative;
   }
 
-  .sub-menu--2 > li {
+  .sub-menu > li:nth-last-child(2):first-child,
+  .sub-menu > li:nth-last-child(2):first-child ~ li {
     flex: 1 0 var(--size-1-2);
   }
 
-  .sub-menu--3 > li {
+  .sub-menu > li:nth-last-child(3):first-child,
+  .sub-menu > li:nth-last-child(3):first-child ~ li {
     flex: 1 0 var(--size-1-3);
   }
 
-  .sub-menu--4 > li {
+  .sub-menu > li:nth-last-child(4):first-child,
+  .sub-menu > li:nth-last-child(4):first-child ~ li {
     flex: 1 0 var(--size-1-4);
   }
 

src/css/settings.sizes.css

@@ -63,4 +63,6 @@
   /* screen */
   --size-h-screen: 100vh;
   --size-w-screen: 100vw;
+
+  --size-scroll-top: 5.25rem; /* 84px */
 }

src/en-GB/discover/benefits/index.html

@@ -10,7 +10,7 @@ <h1 class="h1">Benefits</h1>
     <h2 class="color-white h2">Ceph offers industry leading performance, reliablity and&nbsp;flexibility.</h2>
     <p class="color-white mb-0 p">But don’t take our word for it, the numbers below speak for themselves.</p>
   </div>
-  <ul class="sub-menu sub-menu--4 ul">
+  <ul class="sub-menu ul">
     <li>
       <a href="#performance"><img alt="" src="/assets/svgs/icon-performance-blue-red.svg" />Performance</a>
     </li>
@@ -26,8 +26,8 @@ <h2 class="color-white h2">Ceph offers industry leading performance, reliablity
   </ul>
 </section>
 
-<section class="section text-center">
-  <h2 class="h2" id="performance">Performance</h2>
+<section class="section text-center" id="performance">
+  <h2 class="h2">Performance</h2>
   <p class="p">
     Vestibulum id ligula porta felis euismod semper. Maecenas sed diam eget risus varius blandit sit amet non magna. Fusce dapibus.
   </p>