[FIX] wagtail template bugs

main/templates/main/blocks/boxes_block.html

-{% load wagtailimages_tags %}
+{% load static wagtailimages_tags %}
 
 <div class="bg-cover bg-no-repeat section-clip py-16 xl:h-screen lg:py-36"
-     style="background-image: url('https://i.picsum.photos/id/630/1980/1400.jpg?hmac=WjDo021fzd9SaIlmsi9LtZJApZ02RMzdG0bYLx8iXOo')">
+     style="background-image: url('{% static 'main/images/background-images/bg-join-us.jpg' %}')">
   <div class="container--wide mx-auto z-10">
     <h2 class="head-7xl xl:text-center mb-6 xl:mb-28">
       {{ self.title }}

main/templates/main/blocks/news_block.html

 {% load wagtailcore_tags wagtailimages_tags shared_filters %}
 <div class="bg-cover bg-no-repeat section-clip mb-8 py-16 lg:py-36 lg:mb-16"
-     style="background-image: url('https://i.picsum.photos/id/630/1980/1400.jpg?hmac=WjDo021fzd9SaIlmsi9LtZJApZ02RMzdG0bYLx8iXOo')">
+     style="background-image: url('{% static 'main/images/background-images/bg-join-us.jpg' %}')">
   <div class="container--medium mx-auto px-4">
-    <h2 class="head-7xl text-center mb-6 xl:mb-28">
+    <h2 class="head-7xl xl:text-center mb-6 xl:mb-28">
       {{ self.title }}
     </h2>
     <div class="flex flex-wrap mb-5 lg:mb-10">
         {% image article_data_list.0.image original as article_img %}
-        <img src="{{ article_img.url }}" draggable="false" alt=""  class="lg:max-w-lg h-fit lg:mr-11">
+        <img src="{{ article_img.url }}" draggable="false" alt=""  class="lg:max-w-lg lg:mr-11 h-fit">
       <div class="flex flex-col max-w-xl items-start">
         <span class="text-green-500 head-3xl mt-10 mb-4 lg:mb-8">{{ article_data_list.0.date }}</span>
         <h5 class="head-4xl mb-5 lg:mb-10">{{ article_data_list.0.title }}</h5>

main/templates/main/blocks/people_overview_block.html

@@ -4,7 +4,7 @@
   <h2 class="head-7xl xl:text-center mb-6 xl:mb-28">
     {{ self.title }}
   </h2>
-  <div class="flex flex-wrap space-x-1 justify-center items-center">
+  <div class="flex flex-wrap space-x-1 justify-center gap-2 md:gap-1 items-center">
     {% for box in self.list %}
       {% image box.image fill-500x500 as box_image %}
       <div class="w-96 h-60 flex bg-white flex-col items-center bg-cover justify-center drop-shadow-xl xl:m-0 sm:w-80 sm:h-80"

main/templates/main/blocks/regions_block.html

+{% load static %}
+
 <div class="bg-cover bg-no-repeat section-clip py-16 lg:py-36"
-     style="background-image: url('https://i.picsum.photos/id/630/1980/1400.jpg?hmac=WjDo021fzd9SaIlmsi9LtZJApZ02RMzdG0bYLx8iXOo')">
+     style="background-image: url('{% static 'main/images/background-images/bg-map.jpg' %}')">
   <div class="container--medium mx-auto px-4 ">
     <h2 class="head-7xl xl:text-center mb-6 xl:mb-28">
       {{ self.title }}
@@ -18,7 +20,7 @@
               {% endfor %}
             </select>
           </div>
-            <div id='searchResultWrapper' class="mb-3">
+            <div id='searchResultWrapper'>
               {% include 'main/includes/small_article_preview.html' with article_data_list=article_data_list %}
             </div>
         </div>

main/templates/main/includes/small_article_preview.html

 {% load wagtailimages_tags %}
 {% for article_page in article_data_list  %}
-    <div class="flex">
+    <div class="flex mb-3">
       {% image article_page.image fill-128x128 as image %}
       <img
         src='{{ image.url }}' alt=""

main/templates/main/includes/twitter_widget.html

@@ -9,7 +9,7 @@
         alt="user image"
       />
          <div class="flex flex-col sm:flex-col">
-      <h5 class="font-alt mb-2">
+      <h5 class="font-alt text-xl mb-2 sm:text-base">
         {{ tweet.author_name }}
       </h5>
       <small class="mb-4 text-turquoise-400">
@@ -20,7 +20,7 @@
       <p class="text-small sm:text-base leading-6 mb-2">
         {{ tweet.text }}
       </p>
-      <a href="" class="hover:no-underline">
+      <a href="twitter.com/{{ tweet.author_username }}" class="hover:no-underline">
         <i class="ico--twitter text-turquoise-400 text-3xl sm:text-xl"></i>
       </a>
     </div>