fix: blog header mobile responsiveness

Author: Dave-lab12

src/components/Blog/Hero.astro

@@ -9,12 +9,14 @@ const url = `/blog/${id}`;
   <div class="hero__background__decoration"></div>
   <div class="hero__content">
     <h1 class="hero__title">{title}</h1>
-    <p class="hero__description" set:html={description} />
+    <div class="hero__description">
+      <p set:html={description} />
+    </div>
     <div class="hero__cta">
-      <GlowingBtn href={url} text="Read more" fontSize="22px" />
+      <GlowingBtn href={url} text="Read more" fontSize="20px" />
     </div>
   </div>
-  <div class="hero__image">
+  <div class="hero__image m-auto md:m-0">
     <img src={photo_url} alt="Image description" />
   </div>
 </section>
@@ -91,6 +93,7 @@ const url = `/blog/${id}`;
     .hero__image img {
       width: 100%;
       max-width: 715px;
+      border-radius: 10px;
     }
     .hero_cta_img {
       display: block;
@@ -112,7 +115,7 @@ const url = `/blog/${id}`;
       display: inline-block;
       width: 100%;
       height: 100%;
-      max-width: 570px;
+      max-width: 500px;
       max-height: 570px;
       pointer-events: none;
     }

src/components/GlowingBtn.astro

@@ -1,16 +1,16 @@
 ---
 export interface Props {
   text: string;
-  href: string; 
-  fontSize ?:string;
+  href: string;
+  fontSize?: string;
 }
 
-const { text, href ,fontSize} = Astro.props;
+const { text, href, fontSize } = Astro.props;
 ---
 
 <a class="btn" href={href} target="_blank">{text}</a>
 
-<style   define:vars={{ fontSize }}>
+<style define:vars={{ fontSize }}>
   .btn {
     background: #ff8b92;
     box-shadow: 0px 0px 10px #ff2358;
@@ -21,7 +21,7 @@ const { text, href ,fontSize} = Astro.props;
     padding: 10px 16px;
     text-align: center;
     color: #343045;
-    font-weight: 700;
+    font-weight: 400;
     font-size: var(--fontSize);
     line-height: 28px;
     position: relative;

src/components/Hero.astro

@@ -30,7 +30,7 @@ import GlowingBtn from "./GlowingBtn.astro";
 <style>
   .hero {
     display: flex;
-    justify-content: space-between;
+    justify-content: space-around;
     flex-direction: column-reverse;
     align-items: center;
     margin-top: 14px;