smaller header for district

majak_uistyleguide/templates/patterns/molecules/menus/carousel.html

 <div class="__js-root">
   <div class="header-carousel">
-    <div class="block h-[700px] xl:h-screen relative group cursor-pointer">
+    <div
+      class="
+        {% block wrapper_classes %}
+          block h-[700px] xl:h-screen relative group cursor-pointer
+        {% endblock %}
+      "
+    >
       <video
         class="
           header-carousel--image
@@ -35,7 +41,14 @@
         {% endif %}
       </video>
 
-      <div class="header-carousel--text-wrapper" style="box-sizing: border-box">
+      <div
+        class="
+          {% block text_wrapper_class %}
+            header-carousel--text-wrapper
+          {% endblock %}
+        "
+        style="box-sizing: border-box"
+      >
         <div class="container--wide px-0 h-full flex flex-col justify-end items-start" style="box-sizing: border-box">
 
           <h1 class="mb-4 px-5 flex flex-col text-black block lg:hidden">

majak_uistyleguide/templates/patterns/molecules/menus/district/carousel.html

 {% extends 'patterns/molecules/menus/carousel.html' %}
+
+{% block wrapper_classes %}
+  block h-[700px] xl:h-[550px] relative group cursor-pointer
+{% endblock %}
+
+{% block text_wrapper_class %}
+  header-carousel--text-wrapper
+
+  !bottom-[22%]
+{% endblock %}