diff --git a/src/components/section/CarouselSection.astro b/src/components/section/CarouselSection.astro
index 4563a46..5757fe9 100644
--- a/src/components/section/CarouselSection.astro
+++ b/src/components/section/CarouselSection.astro
@@ -11,24 +11,24 @@ const { images, class: className } = Astro.props;
 
 <div class="bg-white">
   <div class="mx-auto">
-    <div class="swiper lg:h-200 md:h-150 h-62">
+    <div class="swiper">
       <div class="swiper-wrapper">
         {
           images.map((image) => (
-            <div class="swiper-slide h-full">
-              <div class="flex! h-full flex-col items-center justify-center relative">
+            <div class="swiper-slide">
+              <div class="relative">
                 {image.text && (
-                  <div class="uppercase lg:text-9xl md:text-5xl text-4xl text-white text-shadow-lg absolute font-secondary">
+                  <div class="uppercase lg:text-9xl md:text-5xl text-4xl text-white text-shadow-lg absolute inset-0 flex items-center justify-center font-secondary z-10">
                     {image.text}
                   </div>
                 )}
                 <img
-                  class="w-full h-full object-cover object-center"
+                  class="w-full"
                   src={image.image}
                   alt={image.text}
                 />
                 {image.text_alt && (
-                  <div class="text-sm text-white px-4 py-2 italic bg-black/50 absolute bottom-2 right-2 rounded">
+                  <div class="text-sm text-white px-4 py-2 italic bg-black/50 absolute bottom-2 right-2 rounded z-10">
                     {image.text_alt}
                   </div>
                 )}