mobile flag bg

main/templates/main/includes/molecules/menus/carousel.html

@@ -4,7 +4,19 @@
   <div class="header-carousel">
     <div class="h-[700px] xl:h-screen relative">
       <img
-        class="header-carousel--image"
+        class="
+          header-carousel--image
+          lg:hidden
+        "
+        src="{% static 'main/images/background-images/bg-flag-mobile.gif' %}"
+        draggable="false"
+      >
+
+      <img
+        class="
+          header-carousel--image
+          hidden lg:block
+        "
         src="{% static 'main/images/background-images/bg-flag.webp' %}"
         draggable="false"
       >

main/templates/main/includes/organisms/articles/main_articles_timeline.html

 <div class="flex justify-center">
   <div class="container--wide w-full">
-    <div class="flex flex-col gap-8 mb-8" id="showMoreTimelineResultsWrapper">
+    <div
+      class="flex flex-col gap-8 mb-16"
+      id="showMoreTimelineResultsWrapper"
+    >
       {% include 'main/includes/organisms/articles/articles_timeline_list.html' with article_timeline_list=article_timeline_list %}
     </div>
 

main/templates/main/includes/organisms/header/people_header.html

 {% extends 'main/includes/organisms/header/simple_header_with_ui_switch.html' %}
 
-{% block classes %}xl:pt-32 xl:pb-16{% endblock %}
+{% block classes %}
+  bg-black flex items-center w-full mb-20 pt-28 pb-8
+
+  xl:pt-32 xl:pb-16
+{% endblock %}
 
 {% block description %}
    <div

main/templates/main/includes/organisms/header/simple_header.html

 <header
   class="
-    bg-black flex items-center w-full mb-20 pt-28 pb-8
+    {% block classes %}
+      bg-black flex items-center w-full mb-20 pt-28 pb-8
 
-    xl:pt-48 xl:pb-24
-
-    {% block classes %}{% endblock %}
+      xl:pt-48 xl:pb-24
+    {% endblock %}
   "
 >
   <div class="flex justify-start w-full">