Merged in fix/SW-2786-ios-only-mobile-browsers- (pull request #2626)

fix(SW-2786): Added sizes auto to load images of appropriate size instead of largest

* fix(SW-2786): Added sizes auto to load images of appropriate size instead of largest

* fix(SW-2786): Updated to specific size as auto value is not yet supported by major browsers

* fix(SW-2786): Updated to height as min-height doesn't work for child having 100% correctly


Approved-by: Bianca Widstam

apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsList/RoomListItem/RoomImage/image.module.css

@@ -1,6 +1,6 @@
 .imageContainer {
   margin: 0 calc(-1 * var(--Spacing-x2));
-  min-height: 190px;
+  height: 190px;
   position: relative;
   border-radius: var(--Corner-radius-lg) var(--Corner-radius-lg) 0 0;
 }

apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsList/RoomListItem/RoomImage/index.tsx

@@ -54,6 +54,7 @@ const RoomImage = memo(function RoomImage({
         title={roomType}
         fill
         imageCountPosition="top"
+        sizes="(max-width: 768px) 768px, 420px"
       />
       <div className={styles.toggleSidePeek}>
         {roomTypeCode && room && (