feat: add CardGrid and add style to StayCard

components/MyPages/Blocks/Stays/StayCard/index.tsx

@@ -1,3 +1,5 @@
+import { Calendar } from "react-feather"
+
 import { dt } from "@/lib/dt"
 
 import Image from "@/components/Image"
@@ -36,21 +38,12 @@ export default function StayCard({ stay, lang }: StayCardProps) {
         >
           {hotelInformation.hotelName}
         </Title>
-        <section className={styles.container}>
-          <div className={styles.date}>
-            <Image
-              alt="Calendar Icon"
-              height={20}
-              src="/_static/icons/calendar_month.svg"
-              width={20}
-            />
-            <p>
-              <time dateTime={arrivalDateTime}>{arrivalDate}</time>
-              {" - "}
-              <time dateTime={departDateTime}>{departDate}</time>
-            </p>
-          </div>
-        </section>
+        <div className={styles.date}>
+          <Calendar height={20} width={20} color="var(--Main-Brand-Burgundy)" />
+          <time dateTime={arrivalDateTime}>{arrivalDate}</time>
+          {" - "}
+          <time dateTime={departDateTime}>{departDate}</time>
+        </div>
       </footer>
     </article>
   )

components/MyPages/Blocks/Stays/StayCard/stay.module.css

@@ -1,12 +1,9 @@
 .stay {
-  background-color: var(--some-grey-color, #c2bdba);
-  border-radius: 0.8rem;
+  border-radius: 0.4rem;
   display: grid;
-  flex-grow: 1;
-  flex-shrink: 0;
-  flex-basis: 32rem;
-  height: 34rem;
   overflow: hidden;
+  background-color: var(--Main-Grey-White);
+  border: 1px solid #4d001b1a; /* var(--Main-Brand-Burgundy) 10% */
 }
 
 .image {
@@ -18,17 +15,13 @@
 }
 
 .footer {
-  background-color: var(--some-grey-color, #ebe8e6);
-  border-bottom: 0.1rem solid var(--some-grey-color, #d9d9d9);
-  border-left: 0.1rem solid var(--some-grey-color, #d9d9d9);
-  border-right: 0.1rem solid var(--some-grey-color, #d9d9d9);
-  border-radius: 0 0 0.8rem 0.8rem;
-  height: 12rem;
-  padding: 4rem 2.5rem;
+  color: var(--Main-Brand-Burgundy);
+  padding: 1.6rem;
   overflow: hidden;
   margin-top: auto;
-  text-align: center;
   width: 100%;
+  display: grid;
+  gap: 1.6rem;
 }
 
 .hotel {
@@ -39,22 +32,12 @@
   margin: 0;
 }
 
-.container {
-  display: flex;
-  gap: 2rem;
-  justify-content: center;
-}
+.date {
+  font-size: var(--typography-Caption-Regular-fontSize);
+  font-weight: var(--typography-Caption-Regular-fontWeight);
+  line-height: var(--typography-Caption-Regular-lineHeight);
 
-.date,
-.guests {
+  display: flex;
   align-items: center;
-  display: flex;
-  gap: 0.6rem;
-  font-size: small;
-}
-
-@media screen and (min-width: 950px) {
-  .footer {
-    padding: 2rem 2.5rem;
-  }
+  gap: 0.4rem;
 }