Show “full slides in the carousels, 3 slides in the biggest breakpoint

Customer does not want the next slide to show partially; either it shows
theo whole slide, or not at all.

Had to remove the min-width for campsite type’s spiel, or it would make
the whole thing fall over, i do not know why; possibly because slick
could not reduce the width to its expected value.

web/static/public.css

@@ -454,7 +454,6 @@ dl, .nature div + div, .outside_activities > div {
 
 .carousel .spiel {
     font-size: 2.4rem;
-    padding-right: 4rem;
 }
 
 .carousel .spiel p {
@@ -462,7 +461,7 @@ dl, .nature div + div, .outside_activities > div {
     margin-bottom: 2rem;
 }
 
-.carousel figure, .carousel .slick-track > img {
+.carousel .spiel, .carousel figure, .carousel .slick-track > img {
     margin-right: 5rem;
     position: relative;
 }
@@ -488,12 +487,7 @@ dl, .nature div + div, .outside_activities > div {
 
 .carousel .slick-list {
     order: 1;
-    padding: 0 20% 0 0 !important;
-}
-
-.carousel .slick-track {
-    display: flex;
-    align-items: start;
+    margin-right: -5rem;
 }
 
 .carousel.slick-slider {
@@ -688,11 +682,6 @@ dl, .nature div + div, .outside_activities > div {
     align-items: center;
 }
 
-.campsite_type.carousel .spiel {
-    min-width: calc((100vw - 5rem/* main margin */ - 5rem/* booking gap */) * .40111/* flex: .4 of form */ + 5rem /* booking gap again */);
-    flex-shrink: 0;
-}
-
 .campsite_type.carousel .spiel h3 {
     font-size: calc(1.8rem + 1.7vw);
     font-weight: 700;
@@ -1315,4 +1304,4 @@ dt {
 .services_icon a {
   color: var(--accent);
   text-decoration: var(--accent) wavy underline;
-}
+}

web/templates/public/layout.gohtml

@@ -128,13 +128,19 @@
     <script>
         jQuery(function () {
             jQuery('.carousel').slick({
-                slidesToShow: 2,
+                slidesToShow: 3,
                 slidesToScroll: 1,
                 infinite: false,
                 arrows: true,
                 prevArrow: '<button type="button" class="slick-prev">←</button>',
                 nextArrow: '<button type="button" class="slick-next">→</button>',
                 responsive: [
+                    {
+                        breakpoint: 1024,
+                        settings: {
+                            slidesToShow: 2,
+                        }
+                    },
                     {
                         breakpoint: 768,
                         settings: {