checkout: adjust layout

src/pages/checkout/page.tsx

@@ -1,4 +1,4 @@
-import { Form } from "antd";
+import { Form, Layout } from "antd";
 import OrderSummary from "components/OrderSummary/OrderSummary";
 import PaymentMethods from "components/PaymentMethods/PaymentMethods";
 import ProHeader from "components/ProHeader/ProHeader";
@@ -27,19 +27,21 @@ export default function CheckoutPage() {
         }}
         layout="vertical"
       >
-        <ProHeader>{t("checkout.title")}</ProHeader>
-        <div className={styles.checkoutContainer}>
-          <AddressSummary />
-          <RoomDetails />
-          <OfficeDetails />
-          <GiftDetails />
-          <BriefMenu />
-          <PhoneCard />
-          <PaymentMethods />
-          <OrderSummary />
-        </div>
+        <Layout>
+          <ProHeader>{t("checkout.title")}</ProHeader>
+          <Layout.Content className={styles.checkoutContainer}>
+            <AddressSummary />
+            <RoomDetails />
+            <OfficeDetails />
+            <GiftDetails />
+            <BriefMenu />
+            <PhoneCard />
+            <PaymentMethods />
+            <OrderSummary />
+          </Layout.Content>
 
-        <CheckoutButton form={form} />
+          <CheckoutButton form={form} />
+        </Layout>
       </Form>
     </>
   );