diff --git a/app/[lang]/(live)/(public)/hotelreservation/select-hotel/page.module.css b/app/[lang]/(live)/(public)/hotelreservation/select-hotel/page.module.css
index cace3368f..e8b0334b5 100644
--- a/app/[lang]/(live)/(public)/hotelreservation/select-hotel/page.module.css
+++ b/app/[lang]/(live)/(public)/hotelreservation/select-hotel/page.module.css
@@ -1,6 +1,6 @@
 .main {
   display: grid;
-  grid-template-columns: repeat(3, auto);
+  grid-template-columns: repeat(3, minmax(min-content, max-content));
   padding: var(--Spacing-x4) var(--Spacing-x4) 0 var(--Spacing-x4);
   height: 100dvh;
   background-color: var(--Scandic-Brand-Warm-White);
diff --git a/components/HotelReservation/HotelCard/hotelCard.module.css b/components/HotelReservation/HotelCard/hotelCard.module.css
index 25ed80018..7974e90f9 100644
--- a/components/HotelReservation/HotelCard/hotelCard.module.css
+++ b/components/HotelReservation/HotelCard/hotelCard.module.css
@@ -3,12 +3,13 @@
   background-color: var(--Base-Surface-Primary-light-Normal);
   border: 1px solid var(--Base-Border-Subtle);
   border-radius: var(--Corner-radius-Small);
-  min-height: 460px;
+  max-height: 460px;
+  width: 480px;
 }
 
 .image {
   height: auto;
-  min-height: 160px;
+  max-height: 180px;
   object-fit: cover;
   overflow: hidden;
   width: 100%;
@@ -53,13 +54,11 @@
   justify-content: center;
 }
 
-@media screen and (min-width: 850px) {
+@media screen and (min-width: 1180px) {
   .card {
     grid-template-columns: 1fr min(480px);
     height: 285px;
-    min-height: 285px;
     width: 850px;
-    max-width: 850px;
   }
 
   .image {