update for different screen sizing

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

 <div class="__js-root">
   <div class="header-carousel">
-    <div class="h-[700px] xl:h-[75vh] relative bg-black">
+    <div class="h-[700px] xl:h-[max(800px,_75vh)] relative bg-black">
       <img
         class="header-carousel--image--nakopneme inline lg:hidden z-20"
         src="{{ mobile_background_image_url }}"
@@ -29,8 +29,8 @@
         >
           <div
             class="
-              mb-4 px-5 flex flex-col lg:hidden nakopneme-font text-7xl z-10
-              sm:text-9xl
+              mb-4 px-5 flex flex-col lg:hidden nakopneme-font z-10
+              sm:text-9xl xs:text-8xl text-[4.5rem]
             "
           >
             <div>NAKOPNEME
@@ -40,14 +40,16 @@
 
           <div
             class="
-              mb-4 px-5 flex-col hidden lg:flex whitespace-nowrap nakopneme-font xl:text-[12rem] 2xl:text-[15.5rem] text-9xl z-10
+              mb-4 px-5 flex-col hidden lg:flex whitespace-nowrap nakopneme-font
+              xl:text-[12rem] 2xl:text-[15.5rem]
+              text-9xl z-10
             "
           >
             <div>NAKOPNEME TO!</div>
           </div>
 
           <div class="ml-4 text-lg group">
-            {% include "patterns/atoms/buttons/round_button.html" with url='#manifesto' classes="bg-white text-black z-50 absolute left-8 lg:left-[unset] lg:right-0 mt-8 lg:mt-32 text-xl lg:text-2xl" show_arrow_on_hover=True button_text=button_text %}
+            {% include "patterns/atoms/buttons/round_button.html" with url='#manifesto' classes="bg-white text-black z-50 absolute left-8 lg:left-[unset] lg:right-0 mt-8 xs:mt-0 sm:mt-64 lg:mt-32 text-xl lg:text-2xl" show_arrow_on_hover=True button_text=button_text %}
           </div>
         </h1>
       </div>

src/css/molecules/carousels.pcss

@@ -56,7 +56,8 @@
 
 
 .header-carousel--image--nakopneme {
-  @apply mx-auto max-w-full lg:max-w-[900px] xl:max-w-[1000px] 2xl:max-w-[1366px] 3xl:max-w-[1800px] object-cover absolute bottom-0;
+  @apply mx-auto max-w-full lg:max-w-[900px] xl:max-w-[1000px] 2xl:max-w-[1366px] 3xl:max-w-[1800px];
+  @apply object-cover absolute bottom-0 left-0 right-0;
 }
 
 

tailwind.config.js

@@ -68,6 +68,8 @@ module.exports = {
         },
         // Breakpoints
         screens: {
+            '2xs': '300px',
+            'xs': '400px',
             'sm': '576px',
             'md': '768px',
             'lg': '992px',