Merged in chore/move-enter-details (pull request #2778)

Chore/move enter details

Approved-by: Anton Gunnarsson

packages/booking-flow/lib/components/EnterDetails/Header/header.module.css

@@ -0,0 +1,86 @@
+.header {
+  position: relative;
+  overflow: hidden;
+}
+
+.hero {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 100%;
+  width: 100%;
+  object-fit: cover;
+}
+
+.wrapper {
+  position: relative;
+  background: linear-gradient(
+    60deg,
+    rgb(0 0 0 / 25%) 0%,
+    rgb(0 0 0 / 50%) 50%,
+    rgb(0 0 0 / 75%) 100%
+  );
+  width: 100dvw;
+}
+
+.container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  max-width: var(--max-width-page);
+  gap: var(--Space-x2);
+  padding: var(--Space-x3) 0 var(--Space-x4);
+  margin: 0 auto;
+}
+
+.titleContainer {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Space-x05);
+}
+
+.mobileTitle {
+  display: -webkit-box;
+}
+
+.mobileTitle,
+.title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -webkit-line-clamp: 2; /* number of lines to show */
+  line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+
+.title {
+  display: none;
+}
+
+.address {
+  text-align: center;
+  color: var(--Text-Inverted);
+}
+
+@media (min-width: 768px) {
+  .container {
+    padding: var(--Space-x3) 0;
+    gap: var(--Space-x3);
+  }
+  .mobileTitle {
+    display: none;
+  }
+  .titleContainer {
+    gap: var(--Space-x1);
+  }
+  .title {
+    display: -webkit-box;
+  }
+}
+
+@media screen and (min-width: 1367px) {
+  .container {
+    padding: var(--Space-x6) 0;
+  }
+}