more image gallery styling, add arrow icons

web/src/components/blocks/swiper.scss

@@ -3,24 +3,22 @@
   height: 100%;
 }
 
-.swiper-slide {}
-
 .swiper-button-next,
 .swiper-button-prev {
   &:before {
-    content: "→";
+    content: "";
     display: block;
-    padding: var(--spacing-sitepadding-inline);
-    font-size: var(--font-size-h3);
     position: absolute;
-    color: var(--color-goldenBeige);
+    width: 3rem;
+    height: 3rem;
+    background-size: 100%;
   }
 }
 
 .swiper-button-next {
   &:before {
-    content: "→";
-    right: 0;
+    background-image: url("/assets/icons/circle-arrow-right.svg");
+    right: var(--spacing-sitepadding);
   }
 
   &:after {
@@ -31,8 +29,8 @@
 
 .swiper-button-prev {
   &:before {
-    content: "←";
-    left: 0;
+    background-image: url("/assets/icons/circle-arrow-left.svg");
+    left: var(--spacing-sitepadding);
   }
 
   &:after {
@@ -42,57 +40,27 @@
 }
 
 .swiper-pagination {
-  padding-top: var(--spacing-sitepadding-inline);
-  padding-left: calc(var(--spacing-sitepadding-inline) + var(--size-col-1));
+  display: inline-block;
+  width: auto;
+  margin: var(--spacing-sitepadding);
+  padding: 0 .5rem;
+  border-radius: 2rem;
+  background: rgba(0, 0, 0, 0.6);
   position: absolute;
   top: 0;
+  right: 0;
+  left: auto;
   bottom: auto;
-  text-align: left;
-}
-
-@media (max-width: 1100px) {
-
-  .swiper-button-next,
-  .swiper-button-prev {
-    &:before {
-      padding: 1rem;
-      font-size: var(--font-size-h5);
-    }
-  }
+  font-size: var(--font-size-caption);
 }
 
 @media (max-width: 800px) {
 
-  .swiper-button-next,
-  .swiper-button-prev {
-    bottom: 1rem;
-    top: auto;
-
-    &:before {
-      padding: 1rem;
-      font-size: var(--font-size-h5);
-    }
+  .swiper-button-next:before {
+    right: 10px;
   }
 
-  .swiper-pagination {
-    padding-top: 1.75rem;
-  }
-
-  .swiper-slide {
-
-    figure {
-      width: 100vw;
-      height: 60vh;
-      margin-bottom: 2rem;
-
-      figcaption {
-        position: absolute;
-        bottom: 5rem;
-        left: 50%;
-        transform: translateX(-50%);
-        width: 100%;
-        padding: 0 2rem;
-      }
-    }
+  .swiper-button-prev:before {
+    left: 10px;
   }
 }