fix(SW-591): fixed the position of the amenities list

components/ContentType/HotelPage/AmenitiesList/amenitiesList.module.css

@@ -6,8 +6,7 @@
   display: grid;
   gap: var(--Spacing-x-one-and-half);
   height: fit-content;
-  width: 100%;
+  width: min(100%, 300px);
-  max-width: 300px;
 }
 
 .amenityItemList {

components/ContentType/HotelPage/IntroSection/introSection.module.css

@@ -2,7 +2,7 @@
   display: grid;
   gap: var(--Spacing-x2);
   position: relative;
-  max-width: var(--max-width-text-block);
+  max-width: 607px; /* Max width according to Figma */
 }
 
 .mainContent {

components/ContentType/HotelPage/hotelPage.module.css

@@ -28,7 +28,9 @@
 }
 
 .introContainer {
-  display: grid;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
   gap: var(--Spacing-x4);
   scroll-margin-top: var(--hotel-page-scroll-margin-top);
 }

components/ContentType/HotelPage/index.tsx

@@ -75,6 +75,30 @@ export default async function HotelPage() {
             address={hotelAddress}
             tripAdvisor={hotelRatings?.tripAdvisor}
           />
+
+          <AmenitiesList detailedFacilities={hotelDetailedFacilities} />
+        </div>
+        <Rooms rooms={roomCategories} />
+        <Facilities facilities={facilities} activitiesCard={activitiesCard} />
+      </main>
+      {googleMapsApiKey ? (
+        <>
+          <aside className={styles.mapContainer}>
+            <div className={styles.mapWithCard}>
+              <StaticMap coordinates={coordinates} hotelName={hotelName} />
+              <MapCard hotelName={hotelName} pois={topThreePois} />
+            </div>
+          </aside>
+          <MobileMapToggle />
+          <DynamicMap
+            apiKey={googleMapsApiKey}
+            hotelName={hotelName}
+            coordinates={coordinates}
+            pointsOfInterest={pointsOfInterest}
+            mapId={googleMapId}
+          />
+        </>
+      ) : null}
       <SidePeekProvider>
         {/* eslint-disable import/no-named-as-default-member */}
         <SidePeek
@@ -120,29 +144,6 @@ export default async function HotelPage() {
         </SidePeek>
         {/* eslint-enable import/no-named-as-default-member */}
       </SidePeekProvider>
-          <AmenitiesList detailedFacilities={hotelDetailedFacilities} />
-        </div>
-        <Rooms rooms={roomCategories} />
-        <Facilities facilities={facilities} activitiesCard={activitiesCard} />
-      </main>
-      {googleMapsApiKey ? (
-        <>
-          <aside className={styles.mapContainer}>
-            <div className={styles.mapWithCard}>
-              <StaticMap coordinates={coordinates} hotelName={hotelName} />
-              <MapCard hotelName={hotelName} pois={topThreePois} />
-            </div>
-          </aside>
-          <MobileMapToggle />
-          <DynamicMap
-            apiKey={googleMapsApiKey}
-            hotelName={hotelName}
-            coordinates={coordinates}
-            pointsOfInterest={pointsOfInterest}
-            mapId={googleMapId}
-          />
-        </>
-      ) : null}
     </div>
   )
 }