fix: gradient on slideshow component

Author: hunterbecton

core/vibes/soul/sections/slideshow/index.tsx

@@ -153,7 +153,7 @@ export function Slideshow({ slides, playOnInit = true, interval = 5000, classNam
   return (
     <section
       className={clsx(
-        'relative h-[80vh] bg-[var(--slideshow-background,color-mix(in_oklab,hsl(var(--primary)),black_75%))] @container',
+        '@container relative h-[80vh] bg-[var(--slideshow-background,color-mix(in_oklab,hsl(var(--primary)),black_75%))]',
         className,
       )}
     >
@@ -166,19 +166,19 @@ export function Slideshow({ slides, playOnInit = true, interval = 5000, classNam
                   className="relative h-full w-full min-w-0 shrink-0 grow-0 basis-full"
                   key={idx}
                 >
-                  <div className="bg-linear-to-t absolute inset-x-0 bottom-0 z-10 from-[var(--slideshow-mask,hsl(var(--foreground)/80%))] to-transparent">
-                    <div className="max-w-(--breakpoint-2xl) mx-auto w-full text-balance px-4 pb-16 pt-12 @xl:px-6 @xl:pb-20 @xl:pt-16 @4xl:px-8 @4xl:pt-20">
-                      <h1 className="m-0 max-w-xl font-[family-name:var(--slideshow-title-font-family,var(--font-family-heading))] text-4xl font-medium leading-none text-[var(--slideshow-title,hsl(var(--background)))] @2xl:text-5xl @2xl:leading-[.9] @4xl:text-6xl">
+                  <div className="absolute inset-x-0 bottom-0 z-10 bg-gradient-to-t from-[var(--slideshow-mask,hsl(var(--foreground)/80%))] to-transparent">
+                    <div className="max-w-(--breakpoint-2xl) @xl:px-6 @xl:pb-20 @xl:pt-16 @4xl:px-8 @4xl:pt-20 mx-auto w-full text-balance px-4 pb-16 pt-12">
+                      <h1 className="@2xl:text-5xl @2xl:leading-[.9] @4xl:text-6xl m-0 max-w-xl font-[family-name:var(--slideshow-title-font-family,var(--font-family-heading))] text-4xl font-medium leading-none text-[var(--slideshow-title,hsl(var(--background)))]">
                         {title}
                       </h1>
                       {showDescription && (
-                        <p className="mt-2 max-w-xl font-[family-name:var(--slideshow-description-font-family,var(--font-family-body))] text-base leading-normal text-[var(--slideshow-description,hsl(var(--background)/80%))] @xl:mt-3 @xl:text-lg">
+                        <p className="@xl:mt-3 @xl:text-lg mt-2 max-w-xl font-[family-name:var(--slideshow-description-font-family,var(--font-family-body))] text-base leading-normal text-[var(--slideshow-description,hsl(var(--background)/80%))]">
                           {description}
                         </p>
                       )}
                       {showCta && (
                         <ButtonLink
-                          className="mt-6 @xl:mt-8"
+                          className="@xl:mt-8 mt-6"
                           href={cta?.href ?? '#'}
                           shape={cta?.shape ?? 'pill'}
                           size={cta?.size ?? 'large'}
@@ -212,7 +212,7 @@ export function Slideshow({ slides, playOnInit = true, interval = 5000, classNam
       </div>
 
       {/* Controls */}
-      <div className="max-w-(--breakpoint-2xl) absolute bottom-4 left-1/2 flex w-full -translate-x-1/2 flex-wrap items-center px-4 @xl:bottom-6 @xl:px-6 @4xl:px-8">
+      <div className="max-w-(--breakpoint-2xl) @xl:bottom-6 @xl:px-6 @4xl:px-8 absolute bottom-4 left-1/2 flex w-full -translate-x-1/2 flex-wrap items-center px-4">
         {/* Progress Buttons */}
         {scrollSnaps.map((_: number, index: number) => {
           return (
@@ -230,11 +230,11 @@ export function Slideshow({ slides, playOnInit = true, interval = 5000, classNam
                 <div
                   className={clsx(
                     'absolute h-0.5 bg-[var(--slideshow-pagination,hsl(var(--background)))]',
-                    'opacity-0 fill-mode-forwards',
+                    'fill-mode-forwards opacity-0',
                     isPlaying ? 'running' : 'paused',
                     index === selectedIndex
-                      ? 'opacity-100 ease-linear animate-in slide-in-from-left'
-                      : 'ease-out animate-out fade-out',
+                      ? 'animate-in slide-in-from-left opacity-100 ease-linear'
+                      : 'animate-out fade-out ease-out',
                   )}
                   key={`progress-${playCount}`} // Force the animation to restart when pressing "Play", to match animation with embla's autoplay timer
                   style={{