Make the section top element full-width

The colored boxes of the section top element should span the full screen
width without a gap after the header. The content remains within the
content bounding box.

Author: imphil

components/FfSectionTop.vue

@@ -10,7 +10,7 @@ Style guide references:
 - Web components/Example web pages/Section top
 -->
 <template>
-  <div class="flex flex-col desktop:flex-row flex-wrap mt-20">
+  <div class="flex flex-col desktop:flex-row flex-wrap mt-[4px] desktop:mt-0">
     <slot></slot>
   </div>
 </template>

components/FfSectionTopItem.vue

@@ -4,12 +4,26 @@ Section top
 The section top presents a summary of the topic with a sub-navigation and
 signposts to child pages in the section.
 
+Use with the "full-width" layout only to have the colored boxes span the full
+width of the screen.
+
 Style guide references:
 - Web components/Example web pages/Section top
 -->
 <template>
-  <div class="basis-1/2 overflow-hidden text-white p-32 desktop:p-64" :class="wrapperClass">
-    <div class="flex-col phone:flex-row flex space-x-16">
+  <div class="group basis-1/2 overflow-hidden text-white p-32 desktop:p-64" :class="wrapperClass">
+    <!-- 1600px/2 - 96px padding == 706px -->
+    <div class="flex flex-col phone:flex-row
+                space-x-16
+                desktop:max-w-[706px]
+                tablet:px-48
+                px-24
+                group-odd:ms-auto group-odd:me-0
+                group-even:ms-0 group-even:me-auto
+                group-odd:tablet:ps-48
+                group-odd:desktop:ps-96
+                group-even:tablet:pe-48
+                group-even:desktop:pe-96">
       <div>
         <component :is="icons[icon]" class="text-[100px] mx-auto" />
       </div>

content/our-work/0.index.md

@@ -1,5 +1,5 @@
 ---
-layout: content
+layout: full-width
 title: What we do
 ---
 

content/our-work/1.projects.md

@@ -1,5 +1,6 @@
 ---
 title: Our projects
+layout: content
 ---
 
 ::ff-cards{class="mt-64"}

layouts/full-width.vue

@@ -0,0 +1,19 @@
+<!--
+Full-width content layout with header.
+
+Use for full-width content pages. Use the "default" layout if no header is
+required.
+-->
+<template>
+  <div class="w-full">
+    <FfHeader />
+    <main>
+      <FfContainer>
+        <FfNavSub />
+      </FfContainer>
+      <FfHeaderTextFrontmatter />
+      <slot />
+    </main>
+    <FfFooter />
+  </div>
+</template>