[ADD] people page into wagtail

main/templates/main/includes/person_contact_big.html

 {% load wagtailimages_tags %}
-<div class="flex mb-8 person-box-big max-w-md xl:max-w-xl flex-col xl:flex-row xl:mb-16">
-  <div class="shrink-0 mr-2">
+<div class="flex mb-8 person-box-big max-w-sm gap-6 xl:max-w-xl flex-col xl:flex-row xl:mb-16">
+  <div class="xl:shrink-0">
     {% image person_page.profile_image fill-350x350 as profile_image %}
     <img
-      class="rounded-full shadow-sm w-30 xl:w-60 mb-2"
+      class="rounded-full shadow-sm w-30 xl:w-60"
       src="{{ profile_image.url }}"
       alt=" {{ person_page.title }}"
     >
   </div>
   <div class="flex flex-col justify-between py-4">
-    <div class="flex flex-col mb-4">
+    <div class="flex flex-col mb-8">
       <h4 class="font-bold mb-2 text-2xl xl:text-4xl">
         {{ person_page.title }}
       </h4>
-      <span class="leading-6 mb-6 w-10/12">
+      <span class="leading-6 mb-4 xl:mb-6 w-10/12">
         {{ person_page.position | default_if_none:'' }}
       </span>
-      <span class="font-bold mb-1 text-grey-300">
+      <span class="font-bold mb-2 text-grey-300">
         {{ person_page.phone | default_if_none:'' }}
       </span>
       <span class="text-turquoise-500 underline">

main/templates/main/main_people_page.html

@@ -5,10 +5,10 @@
 
 {% include 'main/includes/layout/simple_page_header.html' %}
 
-<main role="main">
+<main role="main" class="mb-4 xl:mb-20">
   <div class="grid-container">
     <div class="grid-content">
-      <p class="font-alt leading-4 xl:leading-6 mb-3 text-base xl:text-xl xl:mb-12">
+      <p class="font-alt text-xl leading-7 mb-5">
         {{ page.perex }}
       </p>
     </div>
@@ -21,6 +21,7 @@
         v-slot="{ isCurrentView, toggleView }"
       >
         <div class="flex justify-center mb-12">
+          <ui-horizontal-scrollable>
             <div class="switch">
               {% for people_group in page.people %}
                 <a @click="toggleView('{{ people_group.value.slug }}-{{ forloop.counter }}')" class="switch__item"
@@ -30,8 +31,9 @@
                 </a>
               {% endfor %}
             </div>
+          </ui-horizontal-scrollable>
         </div>
-        <div class="flex flex-wrap justify-center mb-12">
+        <div class="flex flex-wrap gap-4 xl:justify-center">
           {% for people_group in page.people %}
             <template v-if="isCurrentView('{{ people_group.value.slug }}-{{ forloop.counter }}')">
               {% for person_page in people_group.value.person_list %}