From 56eeaeb28ed95f3971bc7a214cec6db8661a36c6 Mon Sep 17 00:00:00 2001
From: Chuma McPhoy <chuma.mcphoy@scandichotels.com>
Date: Thu, 11 Jul 2024 14:26:40 +0200
Subject: [PATCH] fix: Replace custom container w. grids component for rooms

---
 components/ContentType/HotelPage/Rooms/index.tsx       |  7 +++----
 .../ContentType/HotelPage/Rooms/rooms.module.css       | 10 ----------
 2 files changed, 3 insertions(+), 14 deletions(-)
 delete mode 100644 components/ContentType/HotelPage/Rooms/rooms.module.css

diff --git a/components/ContentType/HotelPage/Rooms/index.tsx b/components/ContentType/HotelPage/Rooms/index.tsx
index f7cdde172..c865e23e7 100644
--- a/components/ContentType/HotelPage/Rooms/index.tsx
+++ b/components/ContentType/HotelPage/Rooms/index.tsx
@@ -1,12 +1,11 @@
 import SectionContainer from "@/components/Section/Container"
 import SectionHeader from "@/components/Section/Header"
+import Grids from "@/components/TempDesignSystem/Grids"
 import { getIntl } from "@/i18n"
 
 import { RoomCard } from "./RoomCard"
 import { RoomsProps } from "./types"
 
-import styles from "./rooms.module.css"
-
 export async function Rooms({ rooms }: RoomsProps) {
   const { formatMessage } = await getIntl()
   const mappedRooms = rooms
@@ -37,7 +36,7 @@ export async function Rooms({ rooms }: RoomsProps) {
         title={formatMessage({ id: "hotelPages.rooms.title" })}
         subtitle={null}
       />
-      <section className={styles.cardContainer}>
+      <Grids.Stackable>
         {mappedRooms.map(({ id, images, title, subtitle, popularChoice }) => (
           <RoomCard
             key={id}
@@ -48,7 +47,7 @@ export async function Rooms({ rooms }: RoomsProps) {
             badgeTextTransKey={popularChoice ? "Popular choice" : null}
           />
         ))}
-      </section>
+      </Grids.Stackable>
     </SectionContainer>
   )
 }
diff --git a/components/ContentType/HotelPage/Rooms/rooms.module.css b/components/ContentType/HotelPage/Rooms/rooms.module.css
deleted file mode 100644
index 7a74c6009..000000000
--- a/components/ContentType/HotelPage/Rooms/rooms.module.css
+++ /dev/null
@@ -1,10 +0,0 @@
-.cardContainer {
-  display: grid;
-  gap: var(--Spacing-x3);
-}
-
-@media screen and (min-width: 768px) {
-  .cardContainer {
-    grid-template-columns: repeat(3, 1fr);
-  }
-}