@@ -160,7 +160,17 @@ const carouselId = `carousel-${type}-${variant}-${currentSlug ?? 'all'}`
           {/* Navigation Buttons */}
           <button
             type="button"
-            class="embla__button embla__button--prev absolute left-0 top-1/2 -translate-y-1/2 -translate-x-4 w-12 h-12 rounded-full bg-content-inverse border-2 border-trim shadow-lg hover:bg-gray-200 hover:border-gray-200 transition-all duration-300 flex items-center justify-center z-(--z-raised) disabled:opacity-30 disabled:cursor-not-allowed focus-visible:outline-none after:pointer-events-none after:absolute after:-inset-0.5 after:rounded-none after:content-[''] focus-visible:after:border-2 focus-visible:after:border-spotlight"
+            class:list={[
+              "embla__button embla__button--prev",
+              "absolute w-12 h-12 left-0 top-1/2 -translate-y-1/2 -translate-x-4",
+              "bg-content-inverse",
+              "rounded-full border-2 border-trim shadow-lg",
+              "hover:bg-content-inverse-active hover:border-gray-200",
+              "transition-all duration-300 flex items-center justify-center z-(--z-raised)",
+              "disabled:opacity-30 disabled:cursor-not-allowed",
+              "focus-visible:outline-none focus-visible:after:border-2 focus-visible:after:border-spotlight",
+              "after:pointer-events-none after:absolute after:-inset-0.5 after:rounded-none after:content-['']"
+            ]}
             aria-label="Previous slide"
             data-carousel-prev
           >
@@ -183,7 +193,17 @@ const carouselId = `carousel-${type}-${variant}-${currentSlug ?? 'all'}`
 
           <button
             type="button"
-            class="embla__button embla__button--next absolute right-0 top-1/2 -translate-y-1/2 translate-x-4 w-12 h-12 rounded-full bg-content-inverse border-2 border-trim shadow-lg hover:bg-gray-200 hover:border-gray-200 transition-all duration-300 flex items-center justify-center z-(--z-raised) disabled:opacity-30 disabled:cursor-not-allowed focus-visible:outline-none after:pointer-events-none after:absolute after:-inset-0.5 after:rounded-none after:content-[''] focus-visible:after:border-2 focus-visible:after:border-spotlight"
+            class:list={[
+              "embla__button embla__button--next",
+              "absolute w-12 h-12 right-0 top-1/2 -translate-y-1/2 translate-x-4",
+              "bg-content-inverse",
+              "rounded-full border-2 border-trim shadow-lg",
+              "hover:bg-content-inverse-active hover:border-gray-200",
+              "transition-all duration-300 flex items-center justify-center z-(--z-raised)",
+              "disabled:opacity-30 disabled:cursor-not-allowed",
+              "focus-visible:outline-none focus-visible:after:border-2 focus-visible:after:border-spotlight",
+              "after:pointer-events-none after:absolute after:-inset-0.5 after:rounded-none after:content-['']"
+            ]}
             aria-label="Next slide"
             data-carousel-next
           >