feat: make steps of enter details flow dynamic depending on data

app/[lang]/(live)/(public)/hotelreservation/(standard)/step/@hotelHeader/page.module.css

@@ -0,0 +1,64 @@
+.header {
+  background-color: var(--Base-Surface-Subtle-Normal);
+  padding: var(--Spacing-x3) var(--Spacing-x2);
+}
+
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x3);
+  justify-content: center;
+}
+
+.titleContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  gap: var(--Spacing-x1);
+}
+
+.descriptionContainer {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x-one-and-half);
+}
+
+.address {
+  display: flex;
+  gap: var(--Spacing-x-one-and-half);
+  font-style: normal;
+}
+
+.dividerContainer {
+  display: none;
+}
+
+@media (min-width: 768px) {
+  .header {
+    padding: var(--Spacing-x4) 0;
+  }
+
+  .wrapper {
+    flex-direction: row;
+    gap: var(--Spacing-x6);
+    margin: 0 auto;
+    /* simulates padding on viewport smaller than --max-width-navigation */
+    width: min(
+      calc(100dvw - (var(--Spacing-x2) * 2)),
+      var(--max-width-navigation)
+    );
+  }
+
+  .titleContainer > h1 {
+    white-space: nowrap;
+  }
+
+  .dividerContainer {
+    display: block;
+  }
+
+  .address {
+    gap: var(--Spacing-x3);
+  }
+}