fix(SW-1608): Hotel listing synced with design

Approved-by: Matilda Landström

apps/scandic-web/components/Blocks/HotelListing/HotelListingItem/hotelListingItem.module.css

@@ -1,35 +1,38 @@
 .container {
-  background-color: var(--Base-Surface-Primary-light-Normal);
-  border: 1px solid var(--Base-Border-Subtle);
+  background-color: var(--Surface-Primary-Default);
+  border: 1px solid var(--Border-Default);
   border-radius: var(--Corner-radius-md);
   overflow: hidden;
+  color: var(--Text-Default);
 }
 
 .image {
   width: 100%;
-  max-height: 200px;
+  height: 200px;
   object-fit: cover;
 }
 
 .content {
-  display: flex;
-  flex-direction: column;
-  gap: var(--Spacing-x2);
-  padding: var(--Spacing-x2) var(--Spacing-x3);
+  display: grid;
+  gap: var(--Space-x2);
+  padding: var(--Space-x2) var(--Space-x3);
 }
 
 .intro {
-  display: flex;
-  flex-direction: column;
-  gap: var(--Spacing-x-half);
-}
-
-.dividerContainer {
-  padding: 0 var(--Spacing-x1);
+  display: grid;
+  gap: var(--Space-x05);
 }
 
 .captions {
   display: flex;
+  gap: var(--Space-x1);
+  color: var(--Text-Tertiary);
+}
+
+@media screen and (max-width: 767px) {
+  .ctaDivider {
+    display: none;
+  }
 }
 
 @media screen and (min-width: 768px) {
@@ -39,11 +42,11 @@
   }
 
   .image {
-    max-height: none;
     height: 100%;
   }
 
   .button {
     width: min(100%, 200px);
+    justify-self: end;
   }
 }