fixed title and craousel responsive

src/components/section/CarouselSection.astro

@@ -9,7 +9,7 @@ const { images, class: className } = Astro.props;
 
 <div class="bg-white">
   <div class="mx-auto">
-    <div class="swiper lg:h-200 md:h-150 h-100">
+    <div class="swiper lg:h-200 md:h-150 h-62">
       <div class="swiper-wrapper">
         {
           images.map((image) => (

src/components/section/TitleSection.astro

@@ -3,7 +3,7 @@ import { Icon } from 'astro-icon/components'
 
 const { title } = Astro.props;
 ---
-<div class="py-16 bg-white">
+<div class="md:py-16 p-4 bg-white">
     <div class="container mx-auto">
         <div class="flex justify-between px-4">
             <h2 class="text-tertiary font-secondary text-xl sm:text-2xl md:text-3xl lg:text-5xl font-bold">{title}</h2>

src/pages/[locale]/news/[id].astro

@@ -37,7 +37,7 @@ const baseSlug = routeTranslations.news[locale] || routeTranslations.news.en;
 ---
 
 <MainLayout>
-  <div class="container mx-auto py-16">
+  <div class="container mx-auto md:py-16 py-8">
     <Header />
   </div>