feat: add mobile summary

components/HotelReservation/EnterDetails/Summary/BottomSheet/bottomSheet.module.css

@@ -0,0 +1,49 @@
+.wrapper {
+  display: grid;
+  grid-template-rows: 0fr 7.5em;
+
+  transition: 0.5s ease-in-out;
+  border-top: 1px solid var(--Base-Border-Subtle);
+  background: var(--Base-Surface-Primary-light-Normal);
+  align-content: end;
+}
+
+.bottomSheet {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  padding: var(--Spacing-x2) var(--Spacing-x3) var(--Spacing-x5)
+    var(--Spacing-x3);
+  justify-content: space-between;
+  width: auto;
+  align-items: flex-start;
+  transition: 0.5s ease-in-out;
+}
+
+.priceDetails {
+  display: block;
+  border: none;
+  background: none;
+  text-align: start;
+  opacity: 1;
+  transition:
+    opacity 0.5s ease-in-out,
+    padding 0.5s ease-in-out;
+}
+
+.wrapper[data-open="true"] {
+  grid-template-rows: 1fr 7.5em;
+}
+
+.wrapper[data-open="true"] .bottomSheet {
+  grid-template-columns: 0fr 1fr;
+}
+
+.wrapper[data-open="true"] .priceDetails {
+  opacity: 0;
+  padding: 0;
+}
+
+.content,
+.priceDetails {
+  overflow: hidden;
+}