[FIX] footer multiple people

main/styleguide/source/_patterns/molecules/footer/footer-person-contact.mustache

-<div class="flex space-x-2 mb-4 xl:mb-0">
+<div class="flex space-x-2 mb-4 xl:mr-4 xl:mb-0">
   <div class="mr-5">
     <img class="rounded-full shadow-sm w-16 mb-2" src="https://randomuser.me/api/portraits/women/26.jpg"
          alt="user image">

main/styleguide/source/_patterns/organisms/footer.mustache

@@ -149,7 +149,8 @@
       </div>
       <section class="bg-black py-8 xl:pb-36">
         <div class="container--wide flex flex-col lg:flex-row lg:justify-between lg:items-end">
-          <div class="mb-10 flex flex-col lg:flex-row lg:order-2 lg:mb-0">
+          <div class="mb-10 flex flex-col lg:flex-row lg:flex-wrap lg:order-2 lg:mb-0">
+            {{> molecules-footer-person-contact }}
             {{> molecules-footer-person-contact }}
             {{> molecules-footer-person-contact }}
           </div>

main/templates/main/includes/layout/footer.html

@@ -45,9 +45,9 @@
       {% if page.root_page.footer_person_list %}
         <section class="bg-black py-8 xl:pb-36">
           <div class="container--wide flex flex-col lg:flex-row lg:justify-between lg:items-end">
-            <div class="mb-10 flex flex-col lg:flex-row lg:order-2 lg:mb-0">
+            <div class="mb-10 flex flex-wrap flex-col lg:flex-row lg:flex-wrap lg:order-2 lg:mb-0">
               {% for person in page.root_page.footer_person_list %}
-                <div class="flex space-x-2 mb-4 xl:mb-0">
+                <div class="flex space-x-2 mb-4 xl:mr-4 xl:mb-0">
                   <div class="mr-5">
                     {% image person.value.person.profile_image fill-75x75 as person_profile_image %}
                     <img class="rounded-full shadow-sm w-16 mb-2" src="{{ person_profile_image.url }}"