From 5e053034a5eb8584a9b05db2b94eb04aac58076a Mon Sep 17 00:00:00 2001
From: Oriol Carbonell <info@oriolcarbonell.cat>
Date: Fri, 2 Feb 2024 02:38:31 +0100
Subject: [PATCH] Move carousel arrows out of the way on mobile
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Carrousels have a first slide that is mostly text without any background color,
and on mobile the arrows looked like where “erasing” the text.
---
 web/static/public.css | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/web/static/public.css b/web/static/public.css
index ad2f105..b5288b8 100644
--- a/web/static/public.css
+++ b/web/static/public.css
@@ -635,6 +635,21 @@ dl, .nature > div, .outside_activities > div, .campsite_info {
     z-index: 1;
 }
 
+
+@media (max-width: 48rem) {
+
+  .carousel .slick-arrow {
+    background: var(--accent);
+    margin-top: -6rem;
+    margin-right: -1rem;
+  }
+
+  .carousel .slick-list {
+    margin-right: -5rem;
+    padding-top: 2rem;
+  }
+}
+
 .slick-slider .slick-prev {
     right: 6rem;
     border-top-right-radius: 0;