finish desktop view pt1

src/app/cities/cities.html

@@ -1,44 +1,48 @@
 <div class="container mx-auto py-10 px-5 bg-white flex flex-col gap-6">
-  <div class="text-center text-2xl text-ejc-dark font-extrabold leading-[130%]">
+  <div
+    class="text-center text-2xl text-ejc-dark font-extrabold leading-[130%] md:text-[40px]">
     Discover the host cities!
   </div>
-  <div class="flex flex-col gap-6">
-    <img src="/images/tatabanya.jpg" alt="Tatabánya" />
-    <div class="text-ejc-dark font-extrabold text-xl text-center">
-      Tatabánya
-    </div>
-    <div class="text-center text-[16px] text-ejc-dark leading-[160%]">
-      Tatabánya, located in north-western Hungary, is a vibrant city with
-      cultural and natural attractions that make it a great destination for
-      athletes and visitors alike. Explore the iconic Turul Monument atop
-      Gerecse Mountain offering panoramic views, and unwind in the scenic
-      Gerecse Forest Park or the nearby Szelim cave, perfect for outdoor
-      enthusiasts and families.
-    </div>
-    <div class="flex justify-center">
-      <div
-        class="bg-ejc-light-blue text-white rounded-md px-7.5 py-2.5 uppercase flex justify-center gap-2 w-43 items-center font-extrabold">
-        More info
-        <app-chevron-right></app-chevron-right>
+  <div class="flex flex-col gap-6 md:flex-row">
+    <div class="flex flex-col gap-6 md:flex-1">
+      <img class="aspect-video" src="/images/tatabanya.jpg" alt="Tatabánya" />
+      <div class="text-ejc-dark font-extrabold text-xl text-center">
+        Tatabánya
+      </div>
+      <div class="text-center text-[16px] text-ejc-dark leading-[160%]">
+        Tatabánya, located in north-western Hungary, is a vibrant city with
+        cultural and natural attractions that make it a great destination for
+        athletes and visitors alike. Explore the iconic Turul Monument atop
+        Gerecse Mountain offering panoramic views, and unwind in the scenic
+        Gerecse Forest Park or the nearby Szelim cave, perfect for outdoor
+        enthusiasts and families.
+      </div>
+      <div class="flex justify-center">
+        <div
+          class="bg-ejc-light-blue text-white rounded-md px-7.5 py-2.5 uppercase flex justify-center gap-2 w-43 items-center font-extrabold">
+          More info
+          <app-chevron-right></app-chevron-right>
+        </div>
       </div>
     </div>
-  </div>
-  <div class="flex flex-col gap-6">
-    <img src="/images/tata.png" alt="Tata" />
-    <div class="text-ejc-dark font-extrabold text-xl text-center">Tata</div>
-    <div class="text-center text-[16px] text-ejc-dark leading-[160%]">
-      Tata, known as the “Town of Waters”, is one of Hungary's most picturesque
-      destinations, famous for beautiful lakes, historic landmarks and peaceful
-      atmosphere. Visitors can explore the stunning Old Lake (Öreg-tó), the
-      iconic Tata Castle situated on its shores and enjoy relaxing walks in the
-      English Garden. Surrounded by natural beauty and rich cultural heritage,
-      Tata offers a perfect setting for both recreation and sightseeing.
-    </div>
-    <div class="flex justify-center">
-      <div
-        class="bg-ejc-light-blue text-white rounded-md px-7.5 py-2.5 uppercase flex justify-center gap-2 w-43 items-center font-extrabold">
-        More info
-        <app-chevron-right></app-chevron-right>
+    <div class="flex flex-col gap-6 md:flex-1">
+      <img class="aspect-video" src="/images/tata.png" alt="Tata" />
+      <div class="text-ejc-dark font-extrabold text-xl text-center">Tata</div>
+      <div class="text-center text-[16px] text-ejc-dark leading-[160%]">
+        Tata, known as the “Town of Waters”, is one of Hungary's most
+        picturesque destinations, famous for beautiful lakes, historic landmarks
+        and peaceful atmosphere. Visitors can explore the stunning Old Lake
+        (Öreg-tó), the iconic Tata Castle situated on its shores and enjoy
+        relaxing walks in the English Garden. Surrounded by natural beauty and
+        rich cultural heritage, Tata offers a perfect setting for both
+        recreation and sightseeing.
+      </div>
+      <div class="flex justify-center">
+        <div
+          class="bg-ejc-light-blue text-white rounded-md px-7.5 py-2.5 uppercase flex justify-center gap-2 w-43 items-center font-extrabold">
+          More info
+          <app-chevron-right></app-chevron-right>
+        </div>
       </div>
     </div>
   </div>

src/app/cover/cover.html

@@ -1,12 +1,15 @@
 <div
-  class="h-[calc(100dvh-76px)] flex flex-col justify-center items-center px-5 gap-6 bg-[#EAEFFA] md:flex-row md:justify-around">
-  <img src="/images/cover_logo.png" class="w-6/12 md:order-last md:max-h-[268px] md:w-auto" alt="EJC2026 logo" />
-  <div class="flex flex-col justify-center items-center gap-6 md:gap-7.5">
+  class="h-[calc(100dvh-76px)] md:h-[calc(100dvh-108px)] flex flex-col justify-center items-center px-5 gap-6 bg-[#EAEFFA] md:flex-row md:bg-[url(/images/tatabanya.jpg)] md:bg-cover md:gap-72 md:bg-blend-overlay md:bg-ejc-dark-blue/50">
+  <img
+    src="/images/cover_logo.png"
+    class="w-6/12 md:order-last md:max-h-67 md:w-auto"
+    alt="EJC2026 logo" />
+  <div class="flex flex-col justify-center items-center gap-6 md:gap-7.5 md:items-start">
     <div
       class="text-ejc-dark text-2xl xs:text-[30px] font-extrabold leading-[130%] text-center md:text-left md:text-[60px] md:text-white">
       2026 European Junior<br />Championships
     </div>
-    <div class="text-center text-ejc-orange font-bold text-[16px]">
+    <div class="text-center text-ejc-orange font-bold text-[16px] md:text-[20px]">
       18-27 Augustus 2026
     </div>
   </div>

src/app/footer/footer.html

@@ -1,10 +1,10 @@
 <div class="w-screen bg-ejc-dark-blue px-5 py-10">
-  <div class="container mx-auto flex flex-col gap-6">
+  <div class="container mx-auto flex flex-col gap-6 md:flex-row md:justify-between">
     <div class="flex justify-center">
       <img src="/images/logo.png" class="max-w-43.75" alt="Logo" />
     </div>
     <div class="flex flex-col gap-3">
-      <div class="text-white font-bold text-[16px]">Location</div>
+      <div class="text-white font-bold text-[16px] md:text-[20px]">Location</div>
       <div class="text-white text-[16px] leading-[160%] flex flex-col gap-2.5">
         <div>Tatabányai Multifunkcionális Csarnok</div>
         <div class="flex gap-2.5">
@@ -14,7 +14,7 @@
       </div>
     </div>
     <div class="flex flex-col gap-3">
-      <div class="text-white font-bold text-[16px]">Contact</div>
+      <div class="text-white font-bold text-[16px] md:text-[20px]">Contact</div>
       <div class="text-white text-[16px] leading-[160%] flex flex-col gap-2.5">
         <div>Hungarian Badminton Association</div>
         <div class="flex gap-2.5 items-center">
@@ -33,15 +33,15 @@
       </div>
     </div>
     <div class="flex flex-col gap-3">
-        <div class="text-white font-bold text-[16px]">Follow us!</div>
-        <div class="flex gap-2.5">
-            <img src="/images/facebook.png" alt="Facebook" class="w-7.5">
-            <img src="/images/instagram.png" alt="Instagram" class="w-7.5">
-            <img src="/images/youtube.png" alt="Youtube" class="w-7.5">
-        </div>
-    </div>
-    <div class="flex justify-center text-white text-[12px]">
-        © Magyar Tollaslabda Szövetség
+      <div class="text-white font-bold text-[16px] md:text-[20px]">Follow us!</div>
+      <div class="flex gap-2.5">
+        <img src="/images/facebook.png" alt="Facebook" class="w-7.5 md:w-10" />
+        <img src="/images/instagram.png" alt="Instagram" class="w-7.5 md:w-10" />
+        <img src="/images/youtube.png" alt="Youtube" class="w-7.5 md:w-10" />
+      </div>
     </div>
   </div>
+  <div class="flex justify-center text-white text-[12px] mt-6">
+    © Magyar Tollaslabda Szövetség
+  </div>
 </div>

src/app/header/header.html

@@ -12,7 +12,9 @@
     </div>
     <div class="flex gap-6 text-[13px] font-bold text-ejc-dark">
       <div>
-        <a class="text-ejc-dark" href="https://badmintoneurope.com">Badminton Europe</a>
+        <a class="text-ejc-dark" href="https://badmintoneurope.com"
+          >Badminton Europe</a
+        >
       </div>
       <div>
         <a class="text-ejc-dark" href="https://badminton.hu">badminton.hu</a>
@@ -20,21 +22,37 @@
     </div>
   </div>
 </div>
-<div class="w-screen bg-ejc-dark-blue h-[67px] hidden md:flex items-center">
+<div class="w-screen bg-ejc-dark-blue h-16.75 hidden md:flex items-center">
   <div class="container mx-auto flex justify-between">
-    <img class="w-[21px]" src="/images/logo-small.png" alt="Logo">
+    <img class="w-5.25" src="/images/logo-small.png" alt="Logo" />
     <div class="flex gap-6 text-[16px] font-bold text-white">
       <div>
-        <a class="text-white font-extrabold cursor-pointer" (click)="scrollTo('events');">Events</a>
+        <a
+          class="text-white font-extrabold cursor-pointer"
+          (click)="scrollTo('events');">
+          Events
+        </a>
       </div>
       <div>
-        <a class="text-white font-extrabold cursor-pointer" (click)="scrollTo('venue');">Venue</a>
+        <a
+          class="text-white font-extrabold cursor-pointer"
+          (click)="scrollTo('venue');">
+          Venue
+        </a>
       </div>
       <div>
-        <a class="text-white font-extrabold cursor-pointer" (click)="scrollTo('media');">Media</a>
+        <a
+          class="text-white font-extrabold cursor-pointer"
+          (click)="scrollTo('media');">
+          Media
+        </a>
       </div>
       <div>
-        <a class="text-white font-extrabold cursor-pointer" (click)="scrollTo('information');">Information</a>
+        <a
+          class="text-white font-extrabold cursor-pointer"
+          (click)="scrollTo('information');">
+          Information
+        </a>
       </div>
     </div>
   </div>
@@ -63,20 +81,30 @@
     </svg>
   </button>
 
-	@if (isMenuOpen) {
-	<div #menu class="absolute top-full right-0 mt-2 w-56 rounded-lg shadow-lg bg-white z-50">
-		<a class="block px-4 py-3 hover:bg-white text-ejc-dark transition-colors cursor-pointer" (click)="scrollTo('events'); closeMenu()">
-			Events
-		</a>
-		<a class="block px-4 py-3 hover:bg-white text-ejc-dark transition-colors cursor-pointer" (click)="scrollTo('venue'); closeMenu()">
-			Venue
-		</a>
-		<a class="block px-4 py-3 hover:bg-white text-ejc-dark transition-colors cursor-pointer" (click)="scrollTo('media'); closeMenu()">
-			Media
-		</a>
-		<a class="block px-4 py-3 hover:bg-white text-ejc-dark transition-colors cursor-pointer" (click)="scrollTo('information'); closeMenu()">
-			Information
-		</a>
-	</div>
-	}
+  @if (isMenuOpen) {
+  <div
+    #menu
+    class="absolute top-full right-0 mt-2 w-56 rounded-lg shadow-lg bg-white z-50">
+    <a
+      class="block px-4 py-3 hover:bg-white text-ejc-dark transition-colors cursor-pointer"
+      (click)="scrollTo('events'); closeMenu()">
+      Events
+    </a>
+    <a
+      class="block px-4 py-3 hover:bg-white text-ejc-dark transition-colors cursor-pointer"
+      (click)="scrollTo('venue'); closeMenu()">
+      Venue
+    </a>
+    <a
+      class="block px-4 py-3 hover:bg-white text-ejc-dark transition-colors cursor-pointer"
+      (click)="scrollTo('media'); closeMenu()">
+      Media
+    </a>
+    <a
+      class="block px-4 py-3 hover:bg-white text-ejc-dark transition-colors cursor-pointer"
+      (click)="scrollTo('information'); closeMenu()">
+      Information
+    </a>
+  </div>
+  }
 </div>

src/app/information/information.html

@@ -1,51 +1,65 @@
 <div class="w-screen bg-ejc-dark-blue">
-  <div class="container mx-auto px-5 py-10 flex flex-col gap-6">
-    <div class="text-white font-extrabold text-2xl text-center">
+  <div class="container mx-auto px-5 py-10 flex flex-col gap-6 md:py-20">
+    <div
+      class="text-white font-extrabold text-2xl text-center md:text-[40px] md:text-left">
       Useful Information
     </div>
-    <div class="flex flex-col gap-6">
-      <div
-        class="bg-white p-10 text-ejc-dark font-bold text-[16px] leading-[130%]">
-        For direct event information please download the Sportity app and insert
-        this password:<br />EJC2026
-      </div>
-      <div class="bg-white p-10 text-ejc-dark flex flex-col gap-6">
-        <div class="font-bold text-[16px] leading-[130%]">Emergency number</div>
-        <div class="text-[16px] leading-[130%]">112</div>
-      </div>
-      <div class="bg-white p-10 text-ejc-dark flex flex-col gap-6">
-        <div class="font-bold text-[16px] leading-[130%]">Nearest hospital</div>
-        <div class="text-[16px] leading-[160%]">
-          <p class="mb-3">Komárom-Esztergom Vármegyei Szent Borbála Kórház
-          2800</p>
-          <p>Tatabánya, Dózsa György út 77.</p>
+    <div class="flex flex-col gap-6 md:flex-row md:flex-wrap">
+      <div class="flex flex-col gap-6 md:w-full">
+        <div
+          class="bg-white p-10 text-ejc-dark font-bold text-[16px] leading-[130%]">
+          For direct event information please download the Sportity app and
+          insert this password:<br />EJC2026
         </div>
       </div>
-      <div class="bg-white p-10 text-ejc-dark flex flex-col gap-6">
-        <div class="font-bold text-[16px] leading-[130%]">
-          On-site medical services
+      <div class="flex flex-col gap-6 md:w-full md:flex-row">
+        <div class="bg-white p-10 text-ejc-dark flex flex-col gap-6 md:flex-1">
+          <div class="font-bold text-[16px] leading-[130%]">
+            Emergency number
+          </div>
+          <div class="text-[16px] leading-[130%]">112</div>
         </div>
-        <div class="text-[16px] leading-[130%]"></div>
-      </div>
-      <div class="bg-white p-10 text-ejc-dark flex flex-col gap-6">
-        <div class="font-bold text-[16px] leading-[130%]">Massage booking</div>
-        <div class="text-[16px] leading-[130%]"></div>
-      </div>
-      <div class="bg-white p-10 text-ejc-dark flex flex-col gap-6">
-        <div class="font-bold text-[16px] leading-[130%]">Currency</div>
-        <div class="text-[16px] leading-[160%]">
-          <p class="mb-3">Hungarian Forint - HUF</p>
-          <p>Nowadays, the average exchange rate: 1 Euro = 355 HUF</p>
+        <div class="bg-white p-10 text-ejc-dark flex flex-col gap-6 md:flex-1">
+          <div class="font-bold text-[16px] leading-[130%]">
+            Nearest hospital
+          </div>
+          <div class="text-[16px] leading-[160%]">
+            <p class="mb-3">
+              Komárom-Esztergom Vármegyei Szent Borbála Kórház 2800
+            </p>
+            <p>Tatabánya, Dózsa György út 77.</p>
+          </div>
+        </div>
+        <div class="bg-white p-10 text-ejc-dark flex flex-col gap-6 md:flex-1">
+          <div class="font-bold text-[16px] leading-[130%]">
+            On-site medical services
+          </div>
+          <div class="text-[16px] leading-[130%]"></div>
+        </div>
+        <div class="bg-white p-10 text-ejc-dark flex flex-col gap-6 md:flex-1">
+          <div class="font-bold text-[16px] leading-[130%]">
+            Massage booking
+          </div>
+          <div class="text-[16px] leading-[130%]"></div>
         </div>
       </div>
-      <div class="bg-white p-10 text-ejc-dark flex flex-col gap-6">
-        <div class="font-bold text-[16px] leading-[130%]">
-          Weather in August
+      <div class="flex flex-col gap-6 md:w-full md:flex-row">
+        <div class="bg-white p-10 text-ejc-dark flex flex-col gap-6 md:flex-1">
+          <div class="font-bold text-[16px] leading-[130%]">Currency</div>
+          <div class="text-[16px] leading-[160%]">
+            <p class="mb-3">Hungarian Forint - HUF</p>
+            <p>Nowadays, the average exchange rate: 1 Euro = 355 HUF</p>
+          </div>
         </div>
-        <div class="text-[16px] leading-[160%]">
-          August is typically the hottest month in Hungary. The temperature hits
-          about 30℃ during the day, falling away to a balmy 19℃ at night. On
-          average, there will be 2 rainy days during the month
+        <div class="bg-white p-10 text-ejc-dark flex flex-col gap-6 md:flex-1">
+          <div class="font-bold text-[16px] leading-[130%]">
+            Weather in August
+          </div>
+          <div class="text-[16px] leading-[160%]">
+            August is typically the hottest month in Hungary. The temperature
+            hits about 30℃ during the day, falling away to a balmy 19℃ at night.
+            On average, there will be 2 rainy days during the month
+          </div>
         </div>
       </div>
     </div>

src/app/media/media.html

@@ -1,15 +1,20 @@
 <div class="container mx-auto px-5 py-10 bg-white">
-    <div class="font-extrabold text-ejc-dark text-2xl text-center">
-        Media
-    </div>
+  <div class="font-extrabold text-ejc-dark text-2xl text-center md:text-[40px]">
+    Media
+  </div>
 </div>
-<div class="container mx-auto px-5 pb-10 bg-white flex flex-col gap-5">
-    <img src="/images/badminton_europe_tv.png" alt="Badminton Europe TV">
-    <div class="font-extrabold text-2xl text-ejc-dark leading-[130%]">
-        Watch every match live on badmintoneurope.tv
+<div class="container mx-auto px-5 pb-10 bg-white flex flex-col gap-5 md:flex-row">
+  <div class="md:order-last md:flex-1 md:flex md:justify-center md:items-center">
+    <img src="/images/badminton_europe_tv.png" class="w-full md:max-w-[395px] md:max-h-[120px]" alt="Badminton Europe TV" />
+  </div>
+  <div class="flex flex-col gap-5 md:flex-1">
+    <div class="font-extrabold text-2xl text-ejc-dark leading-[130%] md:text-[40px]">
+      Watch every match live on badmintoneurope.tv
     </div>
-    <div class="w-45.75 py-3.75 px-7.5 rounded-md flex items-center gap-2.5 bg-ejc-orange">
-        <div class="font-bold text-[17px] text-white">Watch now</div>
-        <app-chevron-right />
+    <div
+      class="w-45.75 py-3.75 px-7.5 rounded-md flex items-center gap-2.5 bg-ejc-orange">
+      <div class="font-bold text-[17px] text-white">Watch now</div>
+      <app-chevron-right />
     </div>
+  </div>
 </div>

src/app/two-events/two-events.html

@@ -1,38 +1,48 @@
-<div class="container mx-auto py-10 px-5 bg-white flex flex-col gap-6">
-  <div class="text-center text-2xl text-ejc-dark font-extrabold leading-[130%]">
+<div
+  class="container mx-auto py-10 px-5 bg-white flex flex-col gap-6 md:px-0 md:py-20">
+  <div
+    class="text-center text-2xl text-ejc-dark font-extrabold leading-[130%] md:text-[40px]">
     Follow the two events!
   </div>
-  <div class="flex flex-col gap-6">
-    <img src="/images/team_event.png" alt="Team Event" />
-    <div class="text-ejc-dark font-extrabold text-xl text-center">
-      2026 European Junior Team Championships
-    </div>
-    <div
-      class="text-center text-[16px] text-ejc-orange font-bold leading-[130%]">
-      18-22 Aug 2026
-    </div>
-    <div class="flex justify-center">
+  <div class="flex flex-col gap-6 md:flex-row">
+    <div class="flex flex-col gap-6">
+      <img
+        class="md:aspect-video"
+        src="/images/team_event.png"
+        alt="Team Event" />
+      <div class="text-ejc-dark font-extrabold text-xl text-center">
+        2026 European Junior Team Championships
+      </div>
       <div
-        class="bg-ejc-light-blue text-white rounded-md px-7.5 py-2.5 uppercase flex justify-center gap-2 w-43 items-center font-extrabold">
-        More info
-        <app-chevron-right></app-chevron-right>
+        class="text-center text-[16px] text-ejc-orange font-bold leading-[130%]">
+        18-22 Aug 2026
+      </div>
+      <div class="flex justify-center">
+        <div
+          class="bg-ejc-light-blue text-white rounded-md px-7.5 py-2.5 uppercase flex justify-center gap-2 w-43 items-center font-extrabold">
+          More info
+          <app-chevron-right></app-chevron-right>
+        </div>
       </div>
     </div>
-  </div>
-  <div class="flex flex-col gap-6">
-    <img src="/images/individual_event.png" alt="Individual Event" />
-    <div class="text-ejc-dark font-extrabold text-xl text-center">
-      2026 European Junior Championships
-    </div>
-    <div
-      class="text-center text-[16px] text-ejc-orange font-bold leading-[130%]">
-      22-27 Aug 2026
-    </div>
-    <div class="flex justify-center">
+    <div class="flex flex-col gap-6">
+      <img
+        class="md:aspect-video"
+        src="/images/individual_event.png"
+        alt="Individual Event" />
+      <div class="text-ejc-dark font-extrabold text-xl text-center">
+        2026 European Junior Championships
+      </div>
       <div
-        class="bg-ejc-light-blue text-white rounded-md px-7.5 py-2.5 uppercase flex justify-center gap-2 w-43 items-center font-extrabold">
-        More info
-        <app-chevron-right></app-chevron-right>
+        class="text-center text-[16px] text-ejc-orange font-bold leading-[130%]">
+        22-27 Aug 2026
+      </div>
+      <div class="flex justify-center">
+        <div
+          class="bg-ejc-light-blue text-white rounded-md px-7.5 py-2.5 uppercase flex justify-center gap-2 w-43 items-center font-extrabold">
+          More info
+          <app-chevron-right></app-chevron-right>
+        </div>
       </div>
     </div>
   </div>

src/app/venue/venue.html

@@ -1,38 +1,56 @@
-<div class="container mx-auto bg-ejc-orange px-5 py-10 flex flex-col gap-6">
-  <img src="/images/csarnok.jpg" alt="Hall" />
-  <div class="text-white font-extrabold text-2xl">Venue</div>
-  <div class="text-white text-[16px] leading-[160%]">
-    The Tatabánya Multifunctional Sports Hall is a state-of-the-art indoor
-    sports arena with a seating capacity of around 6,000, opened in 2022.
-    Designed to host international and high-level competitions, it offers
-    versatile facilities suitable for badminton, handball, basketball,
-    volleyball and other indoor sports, as well as major cultural and sporting
-    events.
-  </div>
-  <div class="flex flex-col gap-6">
-    <div class="flex gap-2.5">
-        <app-marker></app-marker>
-        <div class="text-white font-bold text-[16px]">
-            2800 Tatabánya, Olimpikon u.
-        </div>
+<div class="w-screen bg-ejc-orange">
+  <div
+    class="container mx-auto px-5 py-10 flex flex-col gap-6 md:flex-row md:pb-0">
+    <div class="md:order-last flex-1">
+      <img
+        class="inline-block md:hidden"
+        src="/images/csarnok.jpg"
+        alt="Hall" />
+      <img
+        class="md:inline-block hidden md:w-147.5"
+        src="/images/csarnok.png"
+        alt="Hall" />
     </div>
-    <div class="flex gap-2.5">
-        <app-car></app-car>
-        <div class="text-white font-bold text-[16px]">
-            500 parkingplaces are available
+    <div class="flex flex-col gap-6 flex-1">
+      <div class="text-white font-extrabold text-2xl md:text-[40px]">Venue</div>
+      <div class="text-white text-[16px] leading-[160%]">
+        The Tatabánya Multifunctional Sports Hall is a state-of-the-art indoor
+        sports arena with a seating capacity of around 6,000, opened in 2022.
+        Designed to host international and high-level competitions, it offers
+        versatile facilities suitable for badminton, handball, basketball,
+        volleyball and other indoor sports, as well as major cultural and
+        sporting events.
+      </div>
+      <div class="flex flex-col gap-6 md:flex-row">
+        <div class="flex flex-col gap-6">
+          <div class="flex gap-2.5 md:flex-col">
+            <app-marker></app-marker>
+            <div class="text-white font-bold text-[16px]">
+              2800 Tatabánya, Olimpikon u.
+            </div>
+          </div>
+          <div class="flex gap-2.5 md:flex-col">
+            <app-car></app-car>
+            <div class="text-white font-bold text-[16px]">
+              500 parkingplaces are available
+            </div>
+          </div>
         </div>
-    </div>
-    <div class="flex gap-2.5">
-        <app-bus></app-bus>
-        <div class="text-white font-bold text-[16px]">
-            Shuttle buses from and to the official hotels
-        </div>
-    </div>
-    <div class="flex gap-2.5">
-        <app-bus></app-bus>
-        <div class="text-white font-bold text-[16px]">
-            The schedule is available on the Sportity app
+        <div class="flex flex-col gap-6">
+          <div class="flex gap-2.5 md:flex-col">
+            <app-bus></app-bus>
+            <div class="text-white font-bold text-[16px]">
+              Shuttle buses from and to the official hotels
+            </div>
+          </div>
+          <div class="flex gap-2.5 md:flex-col">
+            <app-bus></app-bus>
+            <div class="text-white font-bold text-[16px]">
+              The schedule is available on the Sportity app
+            </div>
+          </div>
         </div>
+      </div>
     </div>
   </div>
 </div>

src/app/welcome/welcome.html

@@ -1,4 +1,6 @@
 <div
-  class="bg-ejc-orange py-10 px-5 text-center text-white font-extrabold text-2xl leading-[130%]">
-  Welcome to the 2026 Europen Junior Championships in Tatabánya, Hungary!
+  class="bg-ejc-orange py-10 px-5 text-center text-white font-extrabold text-2xl leading-[130%] md:px-0 md:py-20 md:text-[40px] md:text-left">
+  <div class="container mx-auto">
+    Welcome to the 2026 Europen Junior Championships in Tatabánya, Hungary!
+  </div>
 </div>