From 6e5b7cb7b547ebac7a3bf9f930896c4c42fa01c3 Mon Sep 17 00:00:00 2001
From: Matthieu Bessat <mail@matthieubessat.fr>
Date: Thu, 11 Jan 2024 08:56:12 +0100
Subject: [PATCH] fix(carousel): responsive carousel

---
 assets/sass/carousel.scss | 26 ++++++++++++++++++++++----
 assets/sass/general.scss  |  4 +---
 2 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/assets/sass/carousel.scss b/assets/sass/carousel.scss
index aace3d9..96186b7 100644
--- a/assets/sass/carousel.scss
+++ b/assets/sass/carousel.scss
@@ -123,6 +123,7 @@ $height: 30rem;
             font-size: .9rem;
             opacity: 0.9;
             text-align: center;
+            margin-top: 1rem;
         }
     }
 }
@@ -277,7 +278,7 @@ $height: 30rem;
 }
 
 @media (max-width: $md-breakpoint) {
-    $md-height: 45rem;
+    $md-height: 47rem;
     .carousel {
         height: $md-height !important;
     }
@@ -286,7 +287,7 @@ $height: 30rem;
     .carousel::after,
     .carousel__prev,
     .carousel__next {
-        transform: translateY($md-height/2 - 2rem) !important;
+        transform: translateY($md-height - 4.5rem) !important;
     }
 
     .carousel::next {
@@ -334,11 +335,17 @@ $height: 30rem;
         .image-container {
             display: flex;
             justify-content: center;
-            padding-top: 2rem;
+            padding-top: 1rem;
+        }
+
+        .slide-content {
+            .page-container {
+                padding: 0 1.5rem;
+            }
         }
 
         .slide-image {
-            height: 19rem;
+            height: 20rem;
             img {
                 width: auto;
                 height: 100%;
@@ -346,3 +353,14 @@ $height: 30rem;
         }
     }
 }
+
+@media (max-width: $sm-breakpoint) {
+    .carousel {
+        .image-container {
+            padding-top: 0rem;
+        }
+        .slide-image {
+            height: 13rem;
+        }
+    }
+}
diff --git a/assets/sass/general.scss b/assets/sass/general.scss
index a5223f4..07ec423 100644
--- a/assets/sass/general.scss
+++ b/assets/sass/general.scss
@@ -84,6 +84,7 @@ a:hover {
 
 img {
     max-width: 100%;
+    object-fit: contain;
 }
 
 .grid {
@@ -93,9 +94,6 @@ img {
     grid-template-columns: 1fr 1fr;
 }
 
-.btn {
-}
-
 .wikipedia-btn {
     margin-top: .5rem;