moved pagination closer to cards

Author: luke-buttifant

components/CardsColumns.js

@@ -1,7 +1,8 @@
 import { Swiper, SwiperSlide } from 'swiper/react';
-import { Pagination } from 'swiper';
+import { Pagination, Navigation } from 'swiper';
 import 'swiper/css';
 import "swiper/css/pagination";
+import "swiper/css/navigation";
 
 import Card from './Card';
 import Container from './Container';
@@ -17,15 +18,15 @@ export default function CardsColumns({
 }) {
   return (
       <Container>
-        <Swiper
+        <Swiper className={styles.swiper}
           mousewheel={true}
           grabCursor={true}
-          navigation={true}
-          pagination={true} modules={[Pagination]}
+          modules={[Pagination]}
+          pagination
           centerInsufficientSlides={true}
-          slidesPerView={1}
+          slidesPerView={1.09}
           breakpoints={{
-            780: {
+            769: {
               slidesPerView: 2,
               spaceBetween: 50,
             },

styles/CardsColumns.module.scss

@@ -3,18 +3,18 @@
 
 .inner__content {
   margin: 0 auto;
-  padding-bottom: 12rem;
+  padding-bottom: 4rem;
   justify-content: center;
 
   @include desktop-breakpoint-plus {
     display: flex;
   }
 
   @include desktop-breakpoint-minus {
-    padding-bottom: 5rem;
+    padding-bottom: 1rem;
   }
 }
 
-.swiper-slide {
-  height: auto;
-}
+.swiper{
+  margin-bottom: 6rem;
+}