implement requested changes

majak_uistyleguide/templates/patterns/templates/main/europe_in_motion/europe.html

@@ -4,13 +4,13 @@
 <main role="main">
     <div class="container--wide grid grid-cols-1 xl:grid-cols-2 gap-8">
         <div>
-            <div class="prose prose-black text-2xl xl:text-3xl mb-8">
+            <div class="prose prose-black text-2xl xl:text-3xl mb-8 xl:!w-[115%]">
                 Lidé se svěřují Pirátům a Pirátkám s tím, co
                 je trápí. A Piráti zařídí, aby se to stalo.
                 Ještě je to pak další, krátký úvodní text.
             </div>
 
-            <div class="bg-grey-175 border-grey-200 border-2">
+            <div class="bg-grey-175 border-grey-200 border-2 xl:!w-[115%]">
                 <div class="flex gap-0 xl:flex-row flex-col">
                     <img
                         class="h-32 xl:flex-1"
@@ -21,7 +21,7 @@
                     <div
                         class="
                             font-alt text-3xl xl:border-l-2 border-grey-200 xl:w-48 justify-center items-center flex
-                            hover:bg-grey-200 duration-100 cursor-pointer
+                            hover:bg-grey-600 duration-100 cursor-pointer bg-black text-white
                             h-24
                         "
                         id="open_wish"
@@ -70,7 +70,7 @@
             <video
                 width="720"
                 height="1280"
-                class="w-96 mr-16"
+                class="w-full xl:w-96 xl:mr-16"
                 autoplay controls muted
             >
                 <source src="../../../../../static/images/makeawish/sample_video.mp4" type="video/mp4">
@@ -81,9 +81,9 @@
     <div class="bg-black">
         <div class="container--wide text-white pb-16 pt-24 xl:pr-[71px]">
             <div class="grid grid-cols-1 xl:grid-cols-3">
-                <div class="xl:col-span-2 xl:pr-32">
-                    <h2 class="head-14xl xl:head-9xl">Co trápí čechy a češky</h2>
-                    <div class="text-7xl xl:text-9xl">▼</div>
+                <div class="xl:col-span-2 xl:pr-32 text-center xl:text-left">
+                    <h2 class="head-14xl xl:text-8xl xl:leading-[7rem] leading-[6rem]">Co trápí čechy a češky</h2>
+                    <div class="text-7xl xl:text-center">▼</div>
                 </div>
             </div>
 
@@ -107,7 +107,7 @@
             </div>
 
             <div class="mt-12 xl:p-12 p-6 bg-grey-50 text-black">
-                <h3 class="head-4xl text-5xl px-6 pt-6">Máte přání tour</h3>
+                <h3 class="head-4xl text-5xl pt-6">Máte přání tour</h3>
 
                 <ul class="flex flex-col gap-4 mt-8">
                     {% for a in 'abcd' %}
@@ -130,7 +130,7 @@
             <h3 class="mt-12 xl:head-6xl head-9xl text-white">Naše data</h3>
 
             <div class="mt-4 p-6 bg-grey-50 text-black flex gap-8 xl:gap-16 justify-between xl:flex-row flex-col">
-                {% for a in 'abcd' %}
+                {% for a in 'abc' %}
                     <div class="flex gap-4 items-center">
                         <div class="text-6xl font-alt">1000</div>
                         <div class="text-3xl font-alt">