chore: align styles

components/MyPages/Blocks/Stays/Header/header.module.css

@@ -1,12 +1,14 @@
 .header {
   display: grid;
-  grid-template-areas: "title link";
+  grid-template-areas:
+    "title link"
+    "subtitle subtitle";
   grid-template-columns: 1fr max-content;
+  gap: 1.5rem;
 }
 
 .title {
   grid-area: title;
-  font-weight: 600;
 }
 
 .link {
@@ -14,15 +16,5 @@
 }
 
 .subtitle {
-  padding-top: 0.5rem;
-  padding-bottom: 2.5rem;
-  margin: 0;
-}
-
-@media screen and (min-width: 950px) {
-  .subtitle {
-    width: 60%;
-    padding-top: 2.5rem;
-    padding-bottom: 5rem;
-  }
+  grid-area: subtitle;
 }

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

@@ -15,7 +15,7 @@ export default function Header({ title, subtitle, link }: HeaderProps) {
             as="h3"
             level="h2"
             className={styles.title}
-            weight="semiBold"
+            weight="medium"
             uppercase
           >
             {title}
@@ -26,12 +26,12 @@ export default function Header({ title, subtitle, link }: HeaderProps) {
             {link.text}
           </Link>
         )}
+        {subtitle && (
+          <Title as="h5" weight="regular" className={styles.subtitle}>
+            {subtitle}
+          </Title>
+        )}
       </header>
-      {subtitle && (
-        <Title as="h5" weight="regular" className={styles.subtitle}>
-          {subtitle}
-        </Title>
-      )}
     </>
   )
 }