diff --git a/components/ContentType/HotelPage/Rooms/RoomCard/index.tsx b/components/ContentType/HotelPage/Rooms/RoomCard/index.tsx
index 7d8c97def..8fc126976 100644
--- a/components/ContentType/HotelPage/Rooms/RoomCard/index.tsx
+++ b/components/ContentType/HotelPage/Rooms/RoomCard/index.tsx
@@ -36,7 +36,8 @@ export function RoomCard({ room }: RoomCardProps) {
             { id: "{title} - Image gallery" },
             { title: name }
           )}
-          height={200}
+          fill
+          sizes="(min-width: 768px) 320px, 100vw"
         />
       </div>
       <div className={styles.content}>
diff --git a/components/ImageGallery/index.tsx b/components/ImageGallery/index.tsx
index a6e969162..ecafeaa4e 100644
--- a/components/ImageGallery/index.tsx
+++ b/components/ImageGallery/index.tsx
@@ -18,11 +18,12 @@ function ImageGallery({
   title,
   fill,
   height = 280,
+  sizes,
 }: ImageGalleryProps) {
   const intl = useIntl()
   const [lightboxIsOpen, setLightboxIsOpen] = useState(false)
   const [imageError, setImageError] = useState(false)
-  const imageProps = fill ? { fill } : { height, width: height * 1.5 }
+  const imageProps = fill ? { fill, sizes } : { height, width: height * 1.5 }
 
   if (!images || images.length === 0 || imageError) {
     return <div className={styles.imagePlaceholder} />
diff --git a/types/components/imageGallery.ts b/types/components/imageGallery.ts
index 40fb70916..f5f18cfe6 100644
--- a/types/components/imageGallery.ts
+++ b/types/components/imageGallery.ts
@@ -11,4 +11,5 @@ export type ImageGalleryProps = {
   fill?: boolean
   width?: number
   height?: number
+  sizes?: string
 }