fix(SW-194): update css on Rooms

components/ContentType/HotelPage/Rooms/index.tsx

@@ -61,25 +61,21 @@ export function Rooms({ rooms }: RoomsProps) {
         title={intl.formatMessage({ id: "Rooms" })}
         preamble={null}
       />
-      <Grids.Stackable>
-        {mappedRooms.map(
-          ({ id, images, title, subtitle, popularChoice }, index) => (
-            <div
-              key={id}
-              className={
-                !allRoomsVisible && index > 2 ? styles.hiddenRoomCard : ""
-              }
-            >
-              <RoomCard
-                id={id}
-                images={images}
-                title={title}
-                subtitle={subtitle}
-                badgeTextTransKey={popularChoice ? "Popular choice" : null}
-              />
-            </div>
-          )
-        )}
+      <Grids.Stackable className={styles.grid}>
+        {mappedRooms.map(({ id, images, title, subtitle, popularChoice }) => (
+          <div
+            key={id}
+            className={`${allRoomsVisible ? styles.allVisible : ""}`}
+          >
+            <RoomCard
+              id={id}
+              images={images}
+              title={title}
+              subtitle={subtitle}
+              badgeTextTransKey={popularChoice ? "Popular choice" : null}
+            />
+          </div>
+        ))}
       </Grids.Stackable>
 
       {showToggleButton ? (

components/ContentType/HotelPage/Rooms/rooms.module.css

@@ -13,10 +13,10 @@
   justify-content: center;
 }
 
-.hiddenRoomCard {
-  display: none;
-}
-
 .showMoreButton.showLess .chevron {
   transform: rotate(180deg);
 }
+
+.grid :not(.allVisible):nth-child(n + 4) {
+  display: none;
+}