feat: add mobile design to accordions

components/HotelReservation/EnterDetails/SelectedRoom/selectedRoom.module.css

@@ -2,43 +2,42 @@
   position: relative;
   display: flex;
   flex-direction: row;
-  gap: var(--Spacing-x3);
+  gap: var(--Spacing-x-one-and-half);
   padding-top: var(--Spacing-x3);
 }
 
-.wrapper::after {
-  position: absolute;
-  left: 12px;
-  bottom: 0;
-  top: var(--Spacing-x5);
-  height: 100%;
-  content: "";
-  border-left: 1px solid var(--Primary-Light-On-Surface-Divider-subtle);
-}
-
 .main {
-  display: grid;
   width: 100%;
   border-bottom: 1px solid var(--Primary-Light-On-Surface-Divider-subtle);
   padding-bottom: var(--Spacing-x3);
-  grid-template-rows: 2em 0fr;
 }
 
 .headerContainer {
-  display: flex;
+  display: grid;
   justify-content: space-between;
   align-items: center;
+  grid-template-areas:
+    "title button"
+    "description button";
 }
 
-.selection {
+.title {
+  grid-area: title;
+}
+
+.description {
   font-weight: 450;
   font-size: var(--typography-Title-4-fontSize);
+  grid-area: description;
+}
+
+.button {
+  grid-area: button;
+  justify-self: flex-end;
 }
 
 .iconWrapper {
   position: relative;
-  top: var(--Spacing-x1);
-  z-index: 1;
 }
 
 .circle {
@@ -57,9 +56,41 @@
 
 .rate {
   color: var(--UI-Text-Placeholder);
+  display: block;
 }
 
 .details {
   display: flex;
   justify-content: flex-start;
 }
+
+@media screen and (min-width: 1367px) {
+  .wrapper {
+    gap: var(--Spacing-x3);
+  }
+
+  .iconWrapper {
+    top: var(--Spacing-x1);
+  }
+
+  .rate {
+    display: inline;
+  }
+
+  .rate::before {
+    content: "(";
+  }
+  .rate::after {
+    content: ")";
+  }
+
+  .wrapper:not(:last-child)::after {
+    position: absolute;
+    left: 12px;
+    bottom: 0;
+    top: var(--Spacing-x7);
+    height: 100%;
+    content: "";
+    border-left: 1px solid var(--Primary-Light-On-Surface-Divider-subtle);
+  }
+}