From 27736c300239e2aae4f8077b3386ff4a5d838418 Mon Sep 17 00:00:00 2001
From: Felipe Luz Oliveira <75860661+felipebrsk@users.noreply.github.com>
Date: Mon, 2 Sep 2024 18:09:59 -0300
Subject: [PATCH] fix: fixing header carousel responsive

---
 src/components/Header/modules/HeaderCarousel.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Header/modules/HeaderCarousel.tsx b/src/components/Header/modules/HeaderCarousel.tsx
index 0d33cf2..f5c9089 100644
--- a/src/components/Header/modules/HeaderCarousel.tsx
+++ b/src/components/Header/modules/HeaderCarousel.tsx
@@ -53,7 +53,7 @@ function HeaderCarousel(props: HeaderCarouselProps) {
                   {related.short_description}
                 </Typography>
                 <Typography className="mb-2">Available on:</Typography>
-                <Box className="flex md:justify-end justify-center gap-2 mb-4">
+                <Box className="flex md:justify-end justify-center gap-2 mb-4 sm:flex-row flex-col sm:px-0 px-8">
                   {related.platforms.map(({ id, name }) => (
                     <Box
                       component="span"
@@ -63,7 +63,7 @@ function HeaderCarousel(props: HeaderCarouselProps) {
                     </Box>
                   ))}
                 </Box>
-                <Box className="flex flex-wrap md:justify-end justify-center gap-2">
+                <Box className="flex flex-wrap md:justify-end justify-center gap-2 sm:flex-row flex-col sm:px-0 px-8">
                   {related.tags.map(({ id, name }) => (
                     <Box
                       component="span"