🐛 key features - spacing and sizing fixes (#2426)

spacing and sizing fixes
tinacms · Nov 6, 2024 · 0e8981f · 0e8981f
1 parent cc52149
commit 0e8981f
Showing 1 changed file with 4 additions and 5 deletions.
diff --git a/components/blocks/CarouselFeature.tsx b/components/blocks/CarouselFeature.tsx
@@ -22,7 +22,6 @@ const CarouselItem = ({
 
   const commonStyles =
     'transition-all delay-[50] duration-500 hover:scale-105 hover:z-20';
-  const nonHoveredStyles = 'pl-4';
 
   const actionsArray = button ? [button] : [];
 
@@ -39,7 +38,7 @@ const CarouselItem = ({
       className={`${
         isHovered && !isSmallOrMediumScreen
           ? 'group block bg-gradient-to-br from-white/25 via-white/50 to-white/75 shadow-2xl pl-6 pr-8 md:py-9 md:pr-11 lg:pb-8 lg:pt-8 lg:pr-4 rounded-2xl'
-          : nonHoveredStyles
+          : ''
       } ${commonStyles}`}
       onClick={() => onClick(index)}
       style={{ textDecoration: 'none', overflow: 'visible' }}
@@ -63,7 +62,7 @@ const CarouselItem = ({
           )}
           {headline && (
             <h3
-              className={` md:text-3xl text-2xl font-tuner leading-tight cursor-pointer pl-4 ${
+              className={` md:text-3xl text-2xl font-tuner leading-tight cursor-pointer pl-3 ${
                 isHovered && !isSmallOrMediumScreen
                   ? 'text-transparent lg:text-3xl bg-gradient-to-br from-orange-400 cursor-default via-orange-500 to-orange-600 bg-clip-text'
                   : 'text-black lg:text-xl'
@@ -81,12 +80,12 @@ const CarouselItem = ({
           }`}
         >
           {textDisplayCondition && (
-            <p className={`md:pl-12 lg:pl-9 text-lg font-medium slide-up`}>
+            <p className={`md:pl-12 lg:pl-13 pl-9 text-lg font-medium slide-up`}>
               {text}
             </p>
           )}
           {buttonDisplayCondition && (
-            <div className={`md:pl-6 lg:pl-7 slide-up`}>
+            <div className={`md:pl-6 lg:pl-6 pl-3 slide-up flex justify-start`}>
               <Actions items={actionsArray} />
             </div>
           )}