fix(SW-194): update css on Rooms

components/ContentType/HotelPage/Rooms/index.tsx

@@ -61,14 +61,11 @@ export function Rooms({ rooms }: RoomsProps) {
         title={intl.formatMessage({ id: "Rooms" })}
         preamble={null}
       />
-      <Grids.Stackable>
-        {mappedRooms.map(
-          ({ id, images, title, subtitle, popularChoice }, index) => (
+      <Grids.Stackable className={styles.grid}>
+        {mappedRooms.map(({ id, images, title, subtitle, popularChoice }) => (
           <div
             key={id}
-              className={
-                !allRoomsVisible && index > 2 ? styles.hiddenRoomCard : ""
-              }
+            className={`${allRoomsVisible ? styles.allVisible : ""}`}
           >
             <RoomCard
               id={id}
@@ -78,8 +75,7 @@ export function Rooms({ rooms }: RoomsProps) {
               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;
+}