feat: refactor of my stay

apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/referenceCard.module.css

@@ -1,72 +1,19 @@
 .referenceCard {
-  width: var(--max-width-content);
-  max-width: 588px;
-  margin: 0 auto;
-  padding: var(--Spacing-x3);
-  border-radius: var(--Corner-radius-Large);
   background-color: var(--Base-Surface-Primary-light-Normal);
+  border-radius: var(--Corner-radius-Large);
   box-shadow: var(--popup-box-shadow);
+  display: flex;
+  flex-direction: column;
+  gap: var(--Space-x1);
+  margin: 0 auto;
+  max-width: 588px;
+  padding: var(--Spacing-x3) var(--Spacing-x3) var(--Spacing-x4);
+  width: var(--max-width-content);
 }
 
-.referenceRow {
+.row {
+  align-items: center;
   display: flex;
   justify-content: space-between;
-  align-items: center;
-  padding-bottom: var(--Spacing-x-one-and-half);
-}
-
-.divider {
-  margin-bottom: var(--Spacing-x-one-and-half);
-}
-
-.cancelledRooms {
-  color: var(--Scandic-Brand-Scandic-Red);
-}
-
-.actionArea {
-  display: flex;
-  gap: var(--Spacing-x2);
-  margin: var(--Spacing-x4) 0 var(--Spacing-x3);
-}
-
-.note {
-  text-align: center;
-  width: 80%;
-  margin: 0 auto;
-}
-
-.cancelledNote {
-  color: var(--UI-Text-Placeholder);
-}
-
-.titleDesktop {
-  display: none;
-}
-
-.guaranteed {
-  align-items: flex-start;
-  border-radius: var(--Corner-radius-Medium);
-  display: flex;
-  background-color: var(--Surface-Feedback-Succes);
-  gap: var(--Spacing-x1);
-  padding: var(--Spacing-x1);
-  margin-bottom: var(--Space-x1);
-}
-
-.guaranteedText {
-  color: var(--Surface-Feedback-Succes-Accent);
-}
-
-@media (min-width: 768px) {
-  .actionArea {
-    gap: var(--Spacing-x3);
-  }
-
-  .titleMobile {
-    display: none;
-  }
-
-  .titleDesktop {
-    display: block;
-  }
+  padding-top: var(--Space-x1);
 }