diff --git a/src/components/Carousel.astro b/src/components/Carousel.astro index b6946be..2f31d89 100644 --- a/src/components/Carousel.astro +++ b/src/components/Carousel.astro @@ -52,9 +52,7 @@ const duration = width / speed + 's'; @apply overflow-hidden mask-x-from-90%; > div { - @apply flex flex-col items-center gap-5; - writing-mode: vertical-lr; - text-orientation: upright; + @apply flex flex-row items-center gap-5; animation: move var(--duration) infinite linear; } @@ -64,7 +62,7 @@ const duration = width / speed + 's'; } picture { - @apply h-auto w-auto; + @apply h-auto w-auto flex-shrink-0; } @keyframes move { @@ -76,4 +74,19 @@ const duration = width / speed + 's'; transform: translateX(-50%); } } + + /* RTL support for Arabic and other RTL languages */ + :global([dir='rtl']) .carousel > div { + animation: moveRTL var(--duration) infinite linear; + } + + @keyframes moveRTL { + 0% { + transform: translateX(0); + } + + 100% { + transform: translateX(50%); + } + }